:root{color-scheme:light;--ink: #241c12;--paper: #efe6d4;--panel: #fffdf8;--line: #d3c4a8;--accent: #7a3224;--accent-2: #c45c26;--muted: #5c5140;--red: #b42318;--ok: #1f6b45;--ok-soft: #e5f4eb;--bad-soft: #fdecea;--felt: #5a6b52;--felt-deep: #3f4d3b;--wood: #7a5233;--wood-edge: #5c3b24;--focus: #1d4f91;--card-face: #fffef9;--shadow: 0 10px 28px rgba(36, 28, 18, .12)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 500px at 50% -10%,#f7f1e4,transparent),var(--paper);color:var(--ink);font-family:PingFang TC,Noto Sans TC,Noto Sans CJK TC,Microsoft JhengHei,WenQuanYi Micro Hei,system-ui,sans-serif}button,input{font:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.page{max-width:1080px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}.setup-page{min-height:100dvh}.play-page{min-height:100dvh;padding-bottom:0;gap:8px}.top h1,.play-top h1{margin:0;font-size:1.55rem;letter-spacing:.08em}.play-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.play-top .seed{font-size:.85rem;word-break:break-all}.muted{color:var(--muted);margin:4px 0}.panel,.setup,.result-card,.log{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}.setup fieldset{border:1px dashed var(--line);margin:10px 0;display:flex;flex-direction:column;gap:4px;border-radius:10px}.setup label{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 6px;border-radius:8px;cursor:pointer}.setup label:hover{background:#f6efe3}.setup .primary{min-height:48px;min-width:140px;font-size:1.05rem}.table-grid{display:grid;grid-template-columns:minmax(108px,.85fr) minmax(0,1.7fr) minmax(108px,.85fr);grid-template-rows:auto minmax(220px,1fr);grid-template-areas:". north ." "west felt east";gap:8px;padding:10px;background:radial-gradient(ellipse at center,#6a7c61 0%,var(--felt) 55%,var(--felt-deep) 100%);border:10px solid var(--wood);outline:2px solid var(--wood-edge);border-radius:28px;box-shadow:inset 0 0 48px #14181047,var(--shadow);min-height:320px}.seat{background:#fffdf8eb;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:8px 10px;color:var(--ink);min-width:0}.seat.north{grid-area:north;justify-self:center;width:min(280px,100%)}.seat.west{grid-area:west;align-self:center}.seat.east{grid-area:east;align-self:center}.seat.turn,.seat.thinking{box-shadow:0 0 0 3px #f0c37a}.seat-name{font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.seat-count{margin:4px 0}.seat-status{color:var(--muted);font-size:.9rem;min-height:1.2em}.lock-tag{font-size:.75rem;font-weight:700;color:var(--muted);background:#efe6d4;border-radius:999px;padding:1px 7px}.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.2em;min-height:1.6em;padding:0 7px;border-radius:999px;background:#efe6d4;font-weight:700;font-variant-numeric:tabular-nums}.backs{display:flex;margin-top:6px;min-height:28px}.backs .card{width:20px;height:28px;margin-right:-12px;pointer-events:none;border-radius:4px}.felt{grid-area:felt;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f4efe4;padding:8px 10px 12px;min-width:0}.felt-label,.felt h2{margin:0 0 6px;font-size:.95rem;letter-spacing:.12em;font-weight:700;color:#f4efe4}.felt-who,.felt-empty{margin:0 0 8px;color:#efe6d4}.felt-cards{justify-content:center;margin-bottom:8px;flex-wrap:nowrap;max-width:100%}.felt-cards .card{width:48px;height:70px;margin-left:-10px}.felt-cards .card:first-child{margin-left:0}.felt .hint{color:#ffe7b3}.turn-pill{margin:8px 0 0;font-weight:800;background:#14181059;border-radius:999px;padding:6px 14px;min-height:32px}.turn-pill.you{background:var(--ok);color:#fffef8}.turn-pill.thinking{background:#c45c26;color:#fffef8}.human-dock{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:10px 12px 0;box-shadow:var(--shadow)}.human-dock.active{box-shadow:0 0 0 3px #1f6b4540,var(--shadow)}.human-meta h2{margin:0;font-size:1.05rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rank-legend{font-size:.82rem}.hand-fan{--card-w: 58px;--card-h: 86px;--fan-overlap: max( 12px, calc( (var(--card-w) * var(--hand-count) - 100% + 16px) / max(var(--hand-count) - 1, 1) ) );display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--card-h) + 28px);padding:18px 4px 8px;overflow-x:auto}.hand-fan .card{flex:0 0 auto;width:var(--card-w);height:var(--card-h);margin-left:calc(var(--fan-overlap) * -1);position:relative}.hand-fan .card:first-child{margin-left:0}.hand-fan .card.selected{z-index:3}.row{display:flex;flex-wrap:wrap;gap:6px}.felt-cards.row{flex-wrap:nowrap;overflow-x:auto}.card{width:54px;height:80px;border:1px solid #2a2116;border-radius:8px;background:var(--card-face);display:grid;grid-template-rows:auto 1fr;padding:5px 6px 8px;line-height:1;box-shadow:0 1px #241c121f;color:inherit;overflow:hidden}.card.clickable{cursor:pointer;min-height:72px}.card.clickable:hover{transform:translateY(-6px)}.card.disabled{filter:saturate(.85);opacity:.9}.card.red{color:var(--red)}.card.black{color:var(--ink)}.card.selected{transform:translateY(-16px);background:#fff4e5;box-shadow:0 8px 16px #241c1229}.card.tone-legal.selected{outline:3px solid var(--ok);background:var(--ok-soft)}.card.tone-illegal.selected{outline:3px solid var(--red);background:var(--bad-soft)}.card.back{background:repeating-linear-gradient(45deg,#6b3f2a,#6b3f2a 4px,#8a5640 4px 8px);border-color:#4a2a1c;display:block}.card-corner{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.card-rank{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}.card-suit-sm{font-size:.9rem}.card-pip{font-size:1.55rem;align-self:center;justify-self:center}.action-bar{position:sticky;bottom:0;z-index:6;background:color-mix(in srgb,var(--panel) 94%,white);border-top:1px solid var(--line);margin:0 -12px;padding:8px 12px calc(10px + env(safe-area-inset-bottom))}.hint-line{margin:0 0 8px;min-height:1.3em;font-weight:700}.hint-line.legal{color:var(--ok)}.hint-line.illegal,.hint-line.pass{color:var(--accent)}.hint{color:#ffe7b3;font-weight:700}.controls{display:flex;flex-wrap:wrap;gap:8px}button{background:#efe6d4;border:1px solid var(--ink);border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#fffef8;border-color:var(--accent);font-weight:700}button.ghost{background:transparent}button.primary:hover:not(:disabled),button:hover:not(:disabled):not(.primary):not(.ghost){filter:brightness(1.05)}.result-overlay{position:fixed;inset:0;background:#241c1273;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}.result-card{width:min(420px,100%);border-color:var(--accent)}.result-card h2{margin:0 0 8px;color:var(--accent)}.remain-list{list-style:none;padding:0;margin:8px 0 12px}.remain-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}.log{box-shadow:none;margin-bottom:12px}.log summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.log ol{margin:0;padding-left:1.2rem;max-height:180px;overflow:auto}.error{color:var(--red);font-weight:700}@media(max-width:720px){.page{padding:8px 8px 0}.table-grid{grid-template-columns:minmax(72px,.7fr) minmax(0,1.6fr) minmax(72px,.7fr);grid-template-rows:auto minmax(150px,1fr);border-width:7px;border-radius:18px;padding:6px;gap:6px;min-height:220px}.seat{padding:6px;font-size:.82rem}.seat.west .backs,.seat.east .backs{display:none}.seat.north{width:min(220px,100%)}.hand-fan{--card-w: 50px;--card-h: 78px}.felt-cards .card{width:38px;height:56px;margin-left:-12px;padding:3px 4px}.felt-cards .card-rank{font-size:.9rem}.felt-cards .card-pip{font-size:1.05rem}.play-page{padding-bottom:0;min-height:0}.log{display:none}.human-dock{border-radius:16px;padding-bottom:8px}.action-bar{position:sticky;margin:8px -12px 0;border-top:1px solid var(--line);border-radius:0 0 16px 16px}.action-bar .controls{display:grid;grid-template-columns:1fr 1fr}.action-bar .primary{grid-column:1 / -1}.play-top .seed,.rank-legend{display:none}}@media(prefers-reduced-motion:reduce){.card,.card.clickable:hover,.card.selected,.turn-pill{transition:none;transform:none}.card.selected{transform:none;box-shadow:0 0 0 3px var(--accent-2)}}
