.stage{max-width:640px;margin-inline:auto;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.turnbar{--tb-msg-lines:2;--tb-st-lines:1}.status{font-weight:700}.summary{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;color:var(--ink-sub)}
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.seat{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px}.seat.active{border:2px solid var(--accent);padding:7px}.seat strong{display:block}.seat span{display:block}
#table{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}.pile{display:grid;justify-items:center;gap:8px}.pile svg{width:74px;height:102px;filter:var(--shadow-piece)}.pile p{margin:0;text-align:center;font-size:14px}.target{font-size:20px;font-weight:700}.formula{margin:16px 0 8px;font-size:17px;overflow-wrap:anywhere;min-height:28px}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-height:280px;overflow-y:auto;padding:4px 2px 8px}.card{display:block;border:2px solid transparent;border-radius:6px;background:transparent;padding:0;cursor:pointer;min-width:44px;min-height:62px;position:relative}.card svg{width:100%;display:block;filter:var(--shadow-piece)}.card.playable{border-color:var(--accent)}.card.playable::after{content:'•';position:absolute;bottom:0;right:3px;color:var(--accent);font-weight:800;background:var(--surface);border-radius:3px}.card.selected{outline:3px solid var(--accent);outline-offset:1px;transform:translateY(-2px)}.card:focus-visible{outline:3px solid var(--accent)}
.card.enter{animation:deal .2s ease-out}.placed{animation:deal .18s ease-out}@keyframes deal{from{transform:translateY(-8px);opacity:.4}to{transform:translateY(0);opacity:1}}
.hand-area{position:relative;min-height:142px}.handoff{padding:24px 16px;text-align:center;border:1px dashed var(--line-strong);border-radius:6px}.actions,.utility{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.actions .btn{flex:1;min-width:100px}.utility .btn{font-size:16px}.selection-options{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;align-items:center}.selection-options select{max-width:100%;min-height:44px}.selection-options label{font-size:16px}#result{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.scores{width:100%;border-collapse:collapse}.scores td,.scores th{text-align:left;border-bottom:1px solid var(--line);padding:8px;font-size:16px}.recent{font-size:14px;overflow-wrap:anywhere}.article{margin-top:32px}.article p{line-height:1.85}.article table{width:100%;border-collapse:collapse;table-layout:fixed}.article th,.article td{border:1px solid var(--line);padding:8px;overflow-wrap:anywhere}.article figure{margin:24px 0}.article img{display:block;width:100%;height:auto;filter:var(--img-dim)}.article figcaption{font-size:14px;color:var(--ink-sub);margin-top:8px}.field select{max-width:100%;min-height:44px}.ad-gap{height:150px}.site-footer{margin-top:32px}.stats{font-size:14px;color:var(--ink-sub)}[hidden]{display:none!important}
@media(max-width:640px){.stage{padding:12px}.turnbar{--tb-msg-lines:3;--tb-st-lines:2}.hand{grid-template-columns:repeat(5,minmax(0,1fr));max-height:244px;gap:8px}.pile svg{width:65px;height:90px}.actions .btn{min-width:110px}#table{padding:12px;gap:8px}.article table{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Settings stay legible and tappable on phones. */
#setup select,.selection-options select{font:inherit;font-size:16px;min-height:44px;}

/* Original card faces on the project's existing felt. The two phases share one close action area. */
#dobon-board{background:#246a4d url('assets/felt.webp') repeat;color:#fff8ea;border-radius:6px;padding:12px;}
#dobon-board .summary{color:#fff8ea;margin:0 0 8px;font-size:14px;}
#dobon-board .seats{margin:0 0 12px;}
#dobon-board .seat{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center;padding:6px;background:var(--surface);color:var(--ink);min-height:50px;}
#dobon-board .seat strong,#dobon-board .seat>span:not(.dobon-seat-back){grid-column:2;}
#dobon-board .seat.active{padding:5px;border:2px solid #e5bf63;}
.dobon-seat-back{grid-column:1;grid-row:1/3;width:22px;height:31px;}
.dobon-seat-back svg{display:block;width:100%;height:100%;}
#play-area{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:start;}
#table{background:transparent;border:0;padding:0;gap:8px;grid-template-columns:1fr 1fr;}
#table .pile{gap:4px;}
#table .pile p{color:#fff8ea;font-size:14px;}
#table #target{font-size:18px;line-height:1.4;}
.dobon-pile-button{border:2px solid transparent;border-radius:6px;background:transparent;padding:2px;width:78px;min-height:106px;cursor:pointer;}
.dobon-pile-button:disabled{cursor:default;opacity:1;}
.dobon-pile-button:not(:disabled){border-color:#e5bf63;}
.dobon-pile-button svg{display:block;width:70px;height:96px;}
#dobon-step{font-size:16px;margin:0 0 8px;color:#fff8ea;line-height:1.4;}
.checking #dobon-step{border-left:4px solid #e5bf63;padding-left:8px;}
#dobon-own{min-height:0;min-width:0;}
#formula{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:16px;margin:0 0 8px;min-height:32px;padding:6px 8px;background:#fff8ea;color:#233b30;border-radius:6px;line-height:1.4;max-height:100px;overflow:auto;}
.dobon-terms{flex:1;min-width:0;overflow-wrap:anywhere;}
.dobon-compare{font-size:19px;border-bottom:2px solid #806331;white-space:nowrap;}
.dobon-compare.match{color:#185940;border-color:#185940;}
.hand{grid-template-columns:repeat(5,minmax(0,1fr));padding:4px;max-height:224px;}
.card{min-width:0;min-height:62px;}
.card:disabled{opacity:1;cursor:default;}
.card svg{max-height:96px;}
.card.playable{border-color:#e5bf63;}
.card.playable::after{color:#233b30;background:#fff8ea;}
.card.selected{outline-color:#f0cf71;transform:translateY(-3px);}
.selection-options{margin:8px 0 0;gap:8px;font-size:14px;min-height:0;}
.selection-options:has(label[hidden]):not(:has(label:not([hidden]))):has(#selection:empty){display:none;}
.selection-options label{min-height:44px;align-content:center;}
.selection-options select{color:var(--ink);background:var(--surface);}
#dobon-preview{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:16px;line-height:1.45;background:#fff4cd;color:#233b30;padding:8px;border-radius:6px;}
.dobon-preview-card{width:44px;height:61px;flex:none;}
.dobon-preview-card svg{display:block;width:100%;height:100%;}
#dobon-own .actions{margin-top:8px;gap:8px;}
#dobon-own .actions .btn{font-size:16px;min-height:44px;min-width:0;}
#dobon-own .actions #cancel-selection{flex:0 0 auto;background:#fff8ea;color:#233b30;padding-inline:12px;}
#dobon-board .btn.sub{background:#fff8ea;color:#233b30;border-color:#fff8ea;}
#dobon-board #pass.dobon-main{background:var(--accent);color:#fff;border-color:var(--accent);}
.dobon-nearby{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.dobon-nearby .btn{min-height:44px;font-size:16px;}
#dobon-board #result{border-radius:6px;border:0;padding:12px;background:var(--surface);color:var(--ink);}
#dobon-board #result h2{margin:0 0 8px;font-size:20px;}
#dobon-board #result p{margin:8px 0;}
#dobon-board #result .actions{margin-top:8px;}
.dobon-support{margin-top:8px;}
.dobon-support>summary{min-height:44px;align-content:center;font-size:16px;cursor:pointer;}
.stage:has(#result:not([hidden])) .turnbar{display:none;}
.dobon-flying{position:fixed;width:44px;height:61px;z-index:1000;pointer-events:none;}
.dobon-flying svg{width:100%;height:100%;display:block;}
#dobon-board button:focus-visible{outline:3px solid #f0cf71;outline-offset:2px;}
.dobon-guide-frame{position:relative;max-width:360px;margin:auto;}
.dobon-guide-frame img{display:block;width:100%;height:auto;filter:none;}
.dobon-guide-frame .dobon-guide-overlay{position:absolute;inset:0;pointer-events:none;}
.article .dobon-guide figcaption{font-size:16px;line-height:1.7;max-width:520px;margin:8px auto;}
@media(min-width:641px){.turnbar{--tb-msg-lines:1;}.stage{padding:12px;}.hand{max-height:212px;}}
@media(max-width:640px){#play-area{grid-template-columns:minmax(0,1fr);gap:12px;}#table{grid-template-columns:1fr 1fr;}#dobon-board{padding:8px;}#dobon-board .seats{margin-bottom:8px;}.card svg{max-height:80px;}.hand{max-height:244px;}.dobon-pile-button{min-height:94px;width:68px;}.dobon-pile-button svg{width:60px;height:83px;}.dobon-nearby .btn{padding:8px 12px;}}