.stage{max-width:640px;margin:auto}.turnbar{--tb-st-lines:1;--tb-msg-lines:2;--tb-rt:11px;--tb-st-rt:11px}.toolbar,.actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.toolbar{justify-content:flex-end}.pond{text-align:center;font-weight:700;margin:8px}.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.seat{font-size:14px!important;min-height:44px;padding:6px!important}.seat[aria-pressed=true],.rank-card[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-height:84px}.rank-card{border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);padding:0;min-width:0;min-height:44px;cursor:pointer;box-shadow:var(--shadow-piece)}.rank-card svg{display:block;width:100%;height:auto}.rank-card span{display:block;font-size:14px;line-height:20px;font-weight:700}.rank-card:disabled{cursor:default;opacity:1}.rank-card:active:not(:disabled){transform:translateY(1px)}#hand-title{font-size:16px;margin:8px 0}.actions{align-items:center;justify-content:center}.events{font-size:14px;line-height:1.6;margin:8px 0;padding-left:20px;min-height:90px}.selection{min-height:24px;font-size:14px}#cards{display:flex;flex-wrap:wrap;gap:8px}#cards svg{width:54px}details{font-size:14px;margin:8px 0}summary{cursor:pointer;min-height:44px;align-content:center}#result{border:2px solid var(--accent);padding:16px;margin-top:16px}.save-note{font-size:14px}.article{max-width:720px;margin:32px auto;line-height:1.9}.article img{display:block;width:100%;height:auto}.article figure{margin:24px 0}.article figcaption{font-size:14px}.article table{width:100%;border-collapse:collapse}.article th,.article td{border:1px solid var(--line);padding:8px}.field{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.field select{min-height:44px;max-width:100%}#gate{padding:16px;text-align:center}[hidden]{display:none!important}@media(max-width:420px){.toolbar{margin:4px 0}.events{min-height:88px}.rank-card span{font-size:14px}.hand{gap:8px}.seat{font-size:14px!important}.stage{padding:8px!important}.article table{font-size:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.seat{font-size:17px!important}.seat strong{display:block;font-size:17px}.seat span{display:block;font-size:14px;font-weight:400;line-height:20px}.rank-card{position:relative}.rank-card span{background:var(--surface);border-radius:3px}.turnbar .status{font-weight:700}:root:lang(en) .turnbar{--tb-rt:0px;--tb-st-rt:0px}@media(max-width:420px){.rank-card{height:60px;overflow:hidden}.rank-card svg{height:56px;width:auto;max-width:100%;margin:auto}.rank-card span{position:absolute;bottom:0;right:0;padding:0 2px;line-height:18px}.hand{min-height:60px}}
.turnbar{line-height:1.4}@media(max-width:420px){.hand{grid-template-columns:repeat(6,minmax(0,1fr));max-height:196px;overflow:auto}}
.toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar .btn{padding:6px 2px;min-height:44px}

/* Settings and representative cards stay legible and directly tappable. */
#setup select{font:inherit;font-size:16px;min-height:44px;padding:8px;}
@media(max-width:420px){.hand{grid-template-columns:repeat(5,minmax(0,1fr));}}

/* Existing self-made felt and cards. Main actions sit beside the chosen hand. */
#table{padding:16px;border-radius:6px;background:#246a4d url('assets/felt.webp') repeat;color:#fff8ea;}
.fish-table-top{display:flex;align-items:center;gap:16px;margin:0 0 12px;}
#fish-pond{width:45px;height:64px;flex:none;transform:rotate(-4deg);}
#fish-pond svg{width:100%;height:100%;display:block;}
.fish-table-top .pond{font-size:17px;text-align:left;margin:0;line-height:1.5;}
.fish-opponents>h2,#hand-title,.fish-books>h2{font-size:16px;margin:8px 0;color:#fff8ea;}
.seats{gap:8px;margin-bottom:12px;}
.seat{display:grid;grid-template-columns:28px 1fr;column-gap:8px;text-align:left;align-items:center;min-height:62px;}
.seat strong,.seat>span:not(.fish-seat-mark){grid-column:2;}
.fish-seat-mark{grid-column:1;grid-row:1/3;width:25px;height:36px;}
.fish-seat-mark svg{display:block;width:100%;height:100%;}
.seat.current-turn{border:2px dashed #d3ad54;}
.seat:disabled{opacity:1;background:var(--surface);color:var(--ink);cursor:default;}
.seat.current-turn strong::before{content:'▶ ';font-size:12px;}
.seat[aria-pressed=true]{outline:3px solid #f0cf71;outline-offset:1px;}
.hand{margin:0 0 8px;}
.rank-card{overflow:visible;position:relative;}
.rank-card[aria-pressed=true]{outline:3px solid #f0cf71;outline-offset:2px;transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.rank-card span{color:#233b30;background:#fffdf3;font-size:14px;border-radius:3px;}
.selection{font-size:16px;min-height:30px;padding:6px 8px;line-height:1.35;margin:4px 0;border-radius:6px;}
.selection.prepared{background:#fff4cd;color:#233b30;border-left:4px solid #d3ad54;font-weight:700;}
.fish-actions{gap:8px;margin:8px 0;align-items:stretch;}
.fish-actions .btn{min-height:44px;font-size:16px;white-space:normal;}
.fish-actions #ask,.fish-actions #step{flex:1;}
.fish-actions #fish-cancel{flex:0 0 auto;background:#fff8ea;color:#233b30;border-color:#fff8ea;}
.fish-actions .btn:disabled{opacity:.55;}
#fish-reply{min-height:48px;line-height:1.5;margin:8px 0 12px;font-size:16px;overflow-wrap:anywhere;}
.fish-books{border-top:1px solid #ffffff55;padding-top:4px;}
.fish-book-row{display:flex;gap:8px;align-items:flex-start;margin:8px 0;}
.fish-book-row>strong{font-size:14px;flex:0 0 96px;overflow-wrap:anywhere;}
.fish-book-chips{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
.fish-book-empty{font-size:14px;color:#eee3cd;}
.fish-book{display:flex;gap:4px;align-items:center;padding:2px 4px;background:#fffdf3;color:#233b30;border-radius:4px;}
.fish-book-fan{display:flex;padding-right:3px;height:32px;align-items:center;}
.fish-book-fan svg{width:20px;height:28px;margin-right:-12px;}
.fish-book-fan svg:last-child{margin-right:0;}
.fish-support{padding-top:8px;margin:8px 0;}
.fish-support>summary{font-size:16px;min-height:44px;}
.fish-history .events{min-height:0;}
#result{background:var(--surface);color:var(--ink);border-radius:6px;}
.fish-flying{position:fixed;width:44px;height:61px;pointer-events:none;z-index:1000;}
.fish-flying svg{width:100%;height:100%;display:block;}
#table button:focus-visible{outline:3px solid #f0cf71;outline-offset:3px;}
.fish-guide-frame{position:relative;max-width:360px;margin:auto;}
.fish-guide-frame img{display:block;width:100%;height:auto;}
.fish-guide-frame .fish-guide-overlay{position:absolute;inset:0;pointer-events:none;}
.article .fish-guide figcaption{font-size:16px;line-height:1.7;margin:8px auto;max-width:520px;}
@media(min-width:421px){.turnbar{--tb-msg-lines:1;}#table{padding:12px;}#fish-pond{width:36px;height:51px;}.fish-table-top{margin-bottom:8px;}.seats{margin-bottom:8px;}.rank-card{height:104px;}.rank-card svg{height:82px;}.hand{max-height:216px;overflow:auto;padding:4px;}}
@media(max-width:420px){#table{padding:12px;}.fish-table-top{gap:12px;}.rank-card{overflow:visible;}.hand{max-height:204px;padding:4px;}.seat strong{font-size:16px;}.fish-book-row>strong{flex-basis:86px;}.fish-actions #fish-cancel{padding:8px 10px;}}
