:root {
  color-scheme: only light;
  --ink: #19352e;
  --muted: #61746e;
  --paper: #f6f1e6;
  --paper-2: #fffdf7;
  --felt: #175647;
  --felt-dark: #0e3c32;
  --gold: #d59a42;
  --line: rgba(25, 53, 46, .15);
  --blue: #5aa9dc;
  --green: #43a867;
  --yellow: #e1b83f;
  --orange: #e77c35;
  --red: #c94d45;
  --shadow: 0 18px 45px rgba(24, 42, 36, .13);
}
@media (max-width:720px){.concealed-hand .tile.winning{width:calc(100% - 3px);margin-left:3px}}
.backend-only{display:none!important}
* { box-sizing: border-box; }
html { color-scheme: only light; background:#ebe4d7; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 20% 0%, #fffaf0, transparent 35%), #ebe4d7; font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
[hidden] { display: none !important; }
.home-view { position:relative;min-height: 100vh; padding: clamp(28px,6vw,80px); background: radial-gradient(circle at 80% 10%,rgba(213,154,66,.22),transparent 28%),linear-gradient(145deg,#f9f4e9,#e9e1d3); }
.home-hero { max-width: 720px; margin: 5vh auto 54px; text-align:center; }
.brand-mark{width:122px;height:105px;margin:0 auto 18px;position:relative;filter:drop-shadow(0 14px 22px rgba(15,60,50,.24))}.brand-mark img{width:100%;height:100%;display:block;object-fit:contain}
.home-hero h1 { margin-top:7px;font-size:clamp(42px,8vw,72px);letter-spacing:.12em; }
.home-lead { margin:16px 0 28px;color:var(--muted);font-size:18px; }
.home-topbar{position:absolute;z-index:2;top:clamp(18px,2.8vw,38px);right:clamp(18px,3.6vw,54px);left:clamp(18px,3.6vw,54px);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}.home-account-row{display:flex;align-items:flex-end;margin-left:auto;text-align:right}.beta-member-notice{display:inline-block;margin:0;padding:7px 12px;border:1px solid #d7b260;border-radius:999px;color:#175647;background:#fff4d8;font-size:12px;font-weight:900}
.brand-subtitle{margin-top:8px;color:#9a6a2e;font-size:13px;font-weight:800;letter-spacing:.18em}.home-hero .brand-subtitle{font-size:19.5px}
.home-primary { display:inline-block;padding:14px 30px;border-radius:12px;color:#fff;background:var(--felt);box-shadow:0 12px 26px rgba(23,86,71,.24);font-weight:800;text-decoration:none; }
.training-grid { width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.training-card { min-height:210px;padding:22px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,247,.75);text-decoration:none; }
.training-card.active { color:#f8f2e7;background:var(--felt-dark);transform:translateY(-8px);box-shadow:var(--shadow); }
.training-card.feedback-card{background:linear-gradient(145deg,#174f42,#103a31)}.training-card.sponsor-card{width:100%;appearance:none;border-color:#b58b36;background:linear-gradient(145deg,#5b4520,#2f2617);font:inherit;text-align:left;cursor:pointer}.training-card.sponsor-card[hidden]{display:none}.training-card.sponsor-card:hover{transform:translateY(-10px);box-shadow:0 18px 44px rgba(72,48,12,.34)}
.training-card.quiz-card{width:100%;appearance:none;border-color:#5d8b7b;background:linear-gradient(145deg,#245f51,#123e34);font:inherit;text-align:left;cursor:pointer}.training-card.quiz-card:hover{transform:translateY(-10px);box-shadow:0 18px 44px rgba(18,62,52,.28)}
.training-card>span { color:var(--gold);font:700 26px Georgia,serif; }.training-card h2{margin:22px 0 8px}.training-card p{font-size:13px;line-height:1.7;opacity:.74}.training-card a,.training-card b{margin-top:auto;color:inherit;font-size:13px;text-decoration:none}.training-card.coming{opacity:.68}
.site-footer{display:flex;justify-content:center;gap:14px;margin-top:42px;color:var(--muted);font-size:11px;letter-spacing:.08em}.site-footer b{color:var(--gold)}
.setup-view{min-height:100vh;padding:32px 16px;color:var(--ink);background:radial-gradient(circle at 80% 10%,rgba(213,154,66,.22),transparent 28%),linear-gradient(145deg,#f9f4e9,#e9e1d3)}
.setup-card{width:min(590px,100%);margin:auto}.back-home{color:#94b8a9;font-size:12px;text-decoration:none}.setup-brand{text-align:center;margin:16px 0 32px}.setup-brand .brand-mark{width:108px;height:92px;margin-bottom:14px}.setup-brand .brand-heading{font-size:42px;color:#f7f0e2}.setup-brand .brand-subtitle{color:#e2ad4e}.setup-slogan{margin-top:12px;color:#91bca9;font-size:14px;letter-spacing:.08em}
.setup-view .back-home{color:#496b60}.setup-view .setup-brand .brand-heading{color:var(--ink)}.setup-view .setup-slogan{color:#61746e}.setup-view form{display:grid;gap:22px}.setup-section>label,.label-row label,.style-grid>label{display:block;margin-bottom:8px;color:#315f50;font-size:12px;font-weight:800;letter-spacing:.12em}.label-row{display:flex;justify-content:space-between;align-items:center}.label-row button{border:0;color:#9a6a2e;background:transparent;text-decoration:underline}.setup-section input[type="text"],.setup-section>input,.setup-section select{width:100%;padding:13px 14px;color:#fffdf7;background:#175647;border:1px solid #2c6d5d;border-radius:10px;outline:none}.setup-section select option{color:#fffdf7;background:#175647}.setup-section input:focus,.setup-section select:focus{border-color:#d59a42;box-shadow:0 0 0 3px rgba(213,154,66,.18)}.setup-section small{display:block;margin-top:7px;color:#61746e;font-size:11px;line-height:1.5}
.segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.segmented input{position:absolute;opacity:0}.segmented span{display:block;padding:11px;text-align:center;color:#86ad9d;border:1px solid #2b5c4d;border-radius:10px;background:#102d25;font-weight:800}.segmented input:checked+span{color:#f4ca66;border-color:#e1ab35;background:#193c31}
.segmented input:disabled+span{cursor:not-allowed;color:#81918b;border-color:#aab3ae;background:#d4d8d4;box-shadow:none;opacity:.9}
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.style-grid>label{grid-column:1/-1}.style-grid div>span{display:block;margin-bottom:5px;color:#61746e;font-size:11px}.difficulty-heading{display:flex!important;align-items:baseline;gap:5px;flex-wrap:wrap}.difficulty-heading span{color:#61746e;font-size:11px;font-weight:600;letter-spacing:0}.setup-consent{display:flex!important;align-items:flex-start;gap:8px;margin:12px 2px 8px;color:#496b60;font-size:12px;line-height:1.5}.setup-consent input{flex:0 0 auto;margin-top:3px}.setup-consent button{display:inline;margin:0 3px;padding:0;border:0;color:#9a6a2e;background:none;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}.setup-start{width:100%;margin-top:4px;padding:15px;border:1px solid #4a8268;border-radius:11px;color:#fff4d8;background:linear-gradient(135deg,#2c644b,#1d503d);font-size:16px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.2)}.setup-start:disabled{cursor:not-allowed;opacity:.45}.setup-start span{color:#e8bd5c;font-size:12px}.setup-data-note{margin:10px 2px 0;color:#61746e;font-size:11px;line-height:1.5}.setup-teaching-note{margin-top:2px}.setup-view .site-footer{color:#61746e}.setup-view .site-footer b{color:#9a6a2e}
.data-preference-row{align-items:center!important;justify-content:space-between;padding:10px 12px;border:1px solid #315f50;border-radius:10px;background:rgba(8,42,34,.45)}
.data-preference-row button{flex:0 0 auto;margin-left:12px!important;padding:6px 9px!important;border:1px solid #4a8268!important;border-radius:8px!important;text-decoration:none!important;background:#163f34!important}
.setup-preference-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.setup-choice-section>label{font-size:12px}.setup-option-two{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-option-two span{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px}
.data-choice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.data-choice-actions button{min-height:48px}
@media (max-width:520px){.data-choice-actions{grid-template-columns:1fr}.setup-preference-grid{grid-template-columns:1fr}.data-preference-row{align-items:flex-start!important}}
#topNextHandBtn.coach-action-btn,#tableSnapshotBtn.coach-action-btn,#landscapeBtn.coach-action-btn,#newMatchBtn.coach-action-btn,#playerStatsBtn.coach-action-btn,#resetScoresBtn.coach-action-btn{font-size:16px!important;line-height:normal!important;padding:9px 14px!important;min-height:39px!important;border-radius:9px!important;white-space:nowrap!important}
button, select, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1480px, 100%); margin: auto; padding: 20px; }
.topbar { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: Georgia, "Noto Serif TC", serif; font-size: 29px; letter-spacing: .08em; }
.topbar .brand-heading a { color:inherit;text-decoration:none; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
.eyebrow { color: #9a6a2e; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.match-strip { display: flex; flex: 1; justify-content: center; gap: 6px; flex-wrap: wrap; }
.match-strip span, .mode-badge { background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.primary-btn, .soft-btn, .action-buttons button { border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 800; }
.primary-btn { color: #fff; background: var(--ink); }
.soft-btn, .action-buttons button { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); }
.switch { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 38px; height: 22px; border-radius: 20px; background: #9da9a5; position: relative; }
.switch span::after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.2s; }
.switch input:checked + span { background: var(--felt); }
.switch input:checked + span::after { transform: translateX(16px); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.game-column { min-width: 0; }
.mahjong-table { min-height: 690px; position: relative; overflow: hidden; border: 10px solid #6c4931; border-radius: 30px; background: radial-gradient(circle at center, #27715f, var(--felt) 56%, var(--felt-dark)); box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.12); }
.mahjong-table::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image: repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.1) 13px); }
.seat { position: absolute; z-index: 2; color: #eef8f4; text-align: center; font-size: 12px; }
.seat-top { top: 14px; left: 25%; right: 25%; }
.seat-left { left: 15px; top: 25%; width: 110px; }
.seat-right { right: 15px; top: 25%; width: 110px; }
.opponent-line { display:flex; justify-content:center; gap:2px; margin-top:7px; }
.opponent-line .revealed-tile{flex:0 0 24px;width:24px;height:35px;padding:1px;border-bottom-width:2px;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.seat-left .opponent-line, .seat-right .opponent-line { height:260px;flex-flow:column nowrap;justify-content:center;align-items:center;gap:0; }
.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{flex:none;transform:rotate(90deg);margin:-4px 0}
.seat-left .opponent-line .revealed-tile{transform:rotate(90deg);margin:-5px 0}.seat-right .opponent-line .revealed-tile{transform:rotate(-90deg);margin:-5px 0}
.seat-left .mini-melds{transform:rotate(90deg)}.seat-right .mini-melds{transform:rotate(-90deg)}
.tile-back { display:inline-block; width:16px; height:25px; border:1px solid rgba(255,255,255,.52); border-radius:3px; background: linear-gradient(135deg,#d8ad57,#9c6428); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.wall-visual{position:absolute;z-index:2;inset:112px 132px 208px;pointer-events:none}.wall-side{position:absolute;display:flex;gap:3px}.wall-top,.wall-bottom{left:50%;transform:translateX(-50%)}.wall-top{top:0}.wall-bottom{bottom:0}.wall-left,.wall-right{top:50%;flex-direction:column;transform:translateY(-50%)}.wall-left{left:0}.wall-right{right:0}.wall-stack{position:relative;display:block;width:17px;height:23px;border:1px solid #d8f5ee;border-radius:2px;background:linear-gradient(145deg,#54b9c1,#197483 58%,#0c4450);box-shadow:2px 3px 0 #082f36,inset 1px 1px rgba(255,255,255,.42)}.wall-stack::after{content:"";position:absolute;z-index:-1;inset:3px -2px -3px 2px;border-radius:2px;background:#0d5260}.wall-left .wall-stack,.wall-right .wall-stack{width:23px;height:17px}.wall-stack.used{visibility:hidden}.door-side .wall-stack:not(.used){box-shadow:0 0 0 1px #f0bd58,2px 3px 0 #082f36}.door-label{position:absolute;left:50%;top:-16px;transform:translateX(-50%);color:#ffe29c;font-size:8px;font-weight:900;white-space:nowrap}.wall-left .door-label{left:28px;top:50%;transform:translateY(-50%)}.wall-right .door-label{left:auto;right:28px;top:50%;transform:translateY(-50%)}
.wall-stack.half::after{display:none}
.dead-wall{position:absolute;z-index:3;left:145px;bottom:202px;color:#d9e2df;font-size:9px;text-align:center;opacity:.98}.dead-wall strong{display:block;margin-bottom:4px;letter-spacing:.08em}.dead-wall>div{display:grid;grid-template-columns:repeat(8,13px);gap:2px}.dead-wall i{display:block;width:13px;height:20px;border:1px solid #25332f;border-radius:2px;background:linear-gradient(145deg,#33433e,#111d19);box-shadow:1px 2px 0 #08110e,inset 1px 1px rgba(255,255,255,.1)}
.seat-name { display:flex; justify-content:center; gap:6px; align-items:center; }
.seat-name b { color:#ffe1a1; }
.opponent-open-row{display:flex;justify-content:center;align-items:center;gap:3px;min-height:25px;margin-top:4px}.opponent-open-row .mini-melds,.opponent-open-row .flowers{margin-top:0}.mini-melds, .flowers { min-height:25px;margin-top:5px }.mini-melds{display:flex;justify-content:center;gap:3px}.opp-meld{display:flex;gap:0}.mini-melds .tile{width:20px;height:30px;padding:1px;border-bottom-width:2px;box-shadow:0 2px 3px rgba(0,0,0,.2)}.mini-melds .tile-face{font-size:11px}.mini-melds .face-wan .tile-number{font-size:10px}.mini-melds .face-wan .tile-suit{font-size:7px}.mini-melds .face-honor .honor-char{font-size:13px}.mini-melds .called{box-shadow:inset 0 0 0 2px var(--gold)}
.table-center { position:absolute; z-index:1; inset:190px 225px 292px; }
.river { position:absolute;display:flex;width:238px;min-height:46px;gap:3px;row-gap:2px;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;transform-origin:center; }
.river-top { left:50%;top:0;transform:translateX(-50%) rotate(180deg); }
.river-bottom { left:50%;bottom:0;transform:translateX(-50%); }
.river-left { left:-92px;top:50%;transform:translateY(-50%) rotate(90deg); }
.river-right { right:-92px;top:50%;transform:translateY(-50%) rotate(-90deg); }
.discard-tile { width:31px; height:43px; display:flex; align-items:center; justify-content:center; color:#14231e; background:#fbf6e8; border-radius:4px; border:1px solid #d8ceba;border-bottom:4px solid #aaa18e;box-shadow:0 2px 3px rgba(0,0,0,.18); font-size:22px; line-height:1; }
.discard-tile.latest { box-shadow: 0 0 0 3px var(--gold); }
.discard-tile.claimed{opacity:.28;filter:saturate(.65)}
.claim-overlay { position:absolute;z-index:20;inset:-70px -105px;display:grid;place-items:center;background:rgba(6,35,29,.48);backdrop-filter:blur(2px);border-radius:18px; }
.claim-callout { width:min(360px,90%);padding:20px;text-align:center;color:var(--ink);background:#fffaf0;border:2px solid #e4bd74;border-radius:18px;box-shadow:0 22px 65px rgba(0,0,0,.42); }
.claim-callout>p { color:#a36d27;font-size:11px;font-weight:900;letter-spacing:.2em; }.claim-callout h2{margin:4px 0}.claim-callout>span{display:block;color:var(--muted);font-size:12px}.claim-callout>div{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:15px}.claim-callout button{min-width:62px;padding:10px 15px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#f2eadb;font-weight:900}.claim-callout button.primary{color:#fff;background:var(--felt)}
.player-zone { position:absolute; z-index:3; left:18px; right:18px; bottom:18px; color:#fff; }
.player-meta { display:flex; align-items:end; justify-content:space-between; margin-bottom:7px; }
.player-meta strong { font-size:17px; margin-right:8px; }
.player-meta span { font-size:15px; opacity:.78; }
.hand-row { display:flex; align-items:flex-end; justify-content:center; gap:14px; min-width:0; }
.meld-zone { display:flex; gap:3px; flex:0 0 auto; }
.concealed-hand { display:flex; gap:3px; justify-content:center; min-width:0; }
.tile { width:50px; height:70px; position:relative; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; border:1px solid #d6ccb8; border-radius:7px; color:#172821; background:#faf7ee; border-bottom:3px solid #aaa18d; box-shadow:0 5px 8px rgba(0,0,0,.26); line-height:1; transition:transform .14s, box-shadow .14s; }
button.tile:hover { transform:translateY(-8px); }
button.tile:focus-visible { outline:3px solid #fff; outline-offset:2px; transform:translateY(-8px); }
.tile.drawn,.tile.winning { margin-left:9px; }
.opponent-line .revealed-tile.winning{margin-inline-start:9px!important}
.tile.c-green { box-shadow:0 0 0 3px var(--green),0 4px 8px rgba(0,0,0,.22); }
.tile.c-yellow { box-shadow:0 0 0 3px var(--yellow),0 4px 8px rgba(0,0,0,.22); }
.tile.c-orange { box-shadow:0 0 0 3px var(--orange),0 4px 8px rgba(0,0,0,.22); }
.tile.c-red { box-shadow:0 0 0 3px var(--red),0 4px 8px rgba(0,0,0,.22); }
.tile.c-ready { box-shadow:0 0 0 3px #5aa9dc,0 4px 8px rgba(0,0,0,.22); }
.tile-face { width:100%;height:100%;min-width:0;display:grid;place-items:center;position:relative;overflow:hidden;font-family:"DFKai-SB","BiauKai","Microsoft JhengHei",serif;font-weight:900; }
.classic-face{display:block;background-image:url("/game/assets/taiwan-classic-tile-sheet-hd.png");background-repeat:no-repeat;background-size:900% 500%;background-position:var(--sprite-x) var(--sprite-y);image-rendering:auto}
.face-wan { grid-template-rows:1fr 1fr; }.face-wan .tile-number{font-size:28px;color:#145d4b;align-self:end;text-shadow:.5px .5px #0b392f}.face-wan .tile-suit{font-size:22px;color:#b52f2c;align-self:start;text-shadow:.5px .5px #6d1c1a}
.face-honor .honor-char{font-size:35px;color:#155946;text-shadow:.7px .7px #0a352a}.face-honor.red-dragon .honor-char{color:#b62929;text-shadow:.7px .7px #711a18}.face-honor.green-dragon .honor-char{color:#147b47}.face-honor.white-dragon::after{content:"";width:68%;height:68%;border:5px double #286a9d;border-radius:2px;box-shadow:inset 0 0 0 2px #f8f2e6}
.pip-grid,.stick-grid { width:88%;height:88%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;place-items:center; }
.pip { width:9px;height:9px;border:2px solid #28523d;border-radius:50%;background:radial-gradient(circle,#f4ead9 0 24%,currentColor 27% 44%,#f4ead9 47%);color:#28523d;box-shadow:0 0 0 1px rgba(12,40,30,.2) }.pip.red{border-color:#b8322d;color:#b8322d}.pip.blue{border-color:#202b27;color:#202b27}.pip.big{width:25px;height:25px;border-width:3px;grid-area:1/1/4/4;background:repeating-conic-gradient(#bf302d 0 12deg,#f3eadb 12deg 24deg,#176f50 24deg 36deg,#f3eadb 36deg 48deg)}
.stick { width:5px;height:15px;border:1px solid #243c32;border-radius:4px;background:radial-gradient(circle at 50% 20%,#e9dfca 0 13%,transparent 15%),#28523d;transform:rotate(1deg);box-shadow:1px 0 #10251e}.stick::before,.stick::after{content:"";position:absolute;width:4px;height:2px;border-radius:50%;background:inherit;transform:rotate(35deg);left:-3px;top:4px}.stick::after{left:3px;top:9px;transform:rotate(-35deg)}.stick.red{background:#b8322d}.stick.blue{background:#202b27}
.face-bird svg{width:86%;height:86%}.bird-body{fill:#197753}.bird-wing{fill:#b92e2a}.bird-tail{fill:#286b9b}.face-bird circle{fill:#172821}
.mini-melds .pip{width:3px;height:3px;border-width:1px}.mini-melds .pip.big{width:9px;height:9px}.mini-melds .stick{width:2px;height:5px;border:0}.mini-melds .face-bird svg{width:70%;height:70%}
.face-flower{display:block;padding:3px;background:linear-gradient(#fff,#eee9dd)}.face-flower .flower-number{position:absolute;right:3px;top:3px;z-index:2;font:900 10px/1 Georgia,serif;color:#161f1c}.face-flower .flower-name{position:absolute;inset:7px 3px 2px;display:grid;place-items:center;font-size:12px;line-height:1;color:#197052;text-shadow:.5px .5px #0b3f30}.face-flower.season .flower-name{color:#b52f2c;text-shadow:.5px .5px #6d1c1a}
.mini-flower-tile{width:25px;height:34px;display:inline-flex;vertical-align:middle;margin-right:2px;padding:2px;border-radius:4px;color:var(--ink);background:linear-gradient(#fffef8,#ddd2bc);border-bottom:3px solid #a99d87;box-shadow:0 2px 3px rgba(0,0,0,.22)}.mini-flower-tile .flower-number{font-size:7px}.mini-flower-tile .flower-name{font-size:8px}
.meld { display:flex; gap:0; padding-right:3px; border-right:1px solid rgba(255,255,255,.28); }
.meld .tile { flex:0 0 22px; width:22px; height:34px; padding:1px; font-size:17px; border-bottom-width:3px; border-radius:3px; box-shadow:none; }
.meld .classic-face{width:96%;height:96%}.meld .face-flower .flower-name{font-size:6px}
.meld .called { box-shadow:inset 0 0 0 2px var(--gold); }
.action-bar { min-height:66px; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; padding:12px 15px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:14px; }
.action-bar.centered-active{display:none}
.action-bar span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.action-buttons { display:flex; gap:7px; }
.action-buttons button.primary { color:#fff; background:var(--felt); }
.coach-panel, .history-panel { background:rgba(255,253,247,.86); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.coach-panel { padding:17px; position:sticky; top:15px; }
.panel-heading { display:flex; justify-content:space-between; align-items:start; padding-bottom:13px; border-bottom:1px solid var(--line); }
.recommendation { margin:14px 0; padding:13px; color:#f8f4e9; background:var(--ink); border-radius:12px; font-size:13px; line-height:1.65; }
.recommendation strong { color:#f2bd62; }
.candidate-list { display:grid; gap:7px; max-height:220px; overflow:auto; }
.candidate { display:grid; grid-template-columns:38px 1fr auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.candidate .mini-tile { width:35px; height:47px; display:flex; align-items:center; justify-content:center;padding:2px;background:linear-gradient(#fffef8,#ddd2bc);border:1px solid var(--line);border-bottom:4px solid #a99d87;border-radius:4px; }
.candidate b { display:block; }
.candidate small { color:var(--muted); }
.candidate .rank { color:#956728; font-weight:900; }
.candidate-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:3px 8px;margin-top:3px;color:var(--muted);font-size:10px}.candidate-metrics b{color:var(--ink)}.candidate-metrics .positive{color:#188052}.candidate-metrics .negative{color:#ba3e36}
.estimate-note{margin-top:8px;color:var(--muted);font-size:10px;line-height:1.5}
.skill-alert{margin:10px 0;padding:12px;border:1px solid #d8ac52;border-left:5px solid #d8ac52;border-radius:10px;background:#fff7df;color:var(--ink)}.skill-alert>span{display:block;color:#98661d;font-size:11.25px;font-weight:900;letter-spacing:.14em}.skill-alert strong{display:block;margin:3px 0;font-size:13px}.skill-alert p{font-size:11px;line-height:1.55;color:#52655f}
.correction-list{padding-left:22px}.correction-list li{margin:8px 0}.correction-list span{display:block;color:var(--red);font-size:12px}
.verification-ok{padding:10px 12px;color:#176d4b;background:#e9f7ef;border:1px solid #b9dfc9;border-radius:10px;font-weight:800}
.legend { margin-top:14px; border-top:1px solid var(--line); padding-top:11px; }
.legend summary { cursor:pointer; font-weight:800; font-size:13px; }
.legend div { display:flex; gap:8px; align-items:center; margin-top:8px; font-size:11px; }
.dot { width:9px; height:9px; border-radius:50%; flex:none; }
.dot.blue { background:var(--blue); }.dot.green { background:var(--green); }.dot.yellow { background:var(--yellow); }.dot.orange { background:var(--orange); }.dot.red { background:var(--red); }
.history-panel { margin-top:18px; padding:18px; display:grid; grid-template-columns:170px 1fr minmax(250px, .7fr); gap:18px; align-items:start; }
.scoreboard { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.score-card { padding:10px; border-left:3px solid #d6a557; background:rgba(255,255,255,.5); }
.score-card b,.score-card span { display:block; }.score-card span { margin-top:4px; font-size:17px; font-weight:900; }
.event-log { max-height:100px; overflow:auto; margin:0; padding-left:23px; color:var(--muted); font-size:12px; line-height:1.7; }
dialog { width:min(580px,calc(100% - 28px)); border:0; border-radius:18px; padding:0; color:var(--ink); background:var(--paper-2); box-shadow:0 25px 80px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(8,24,20,.65); backdrop-filter:blur(3px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; padding:17px 20px; border-bottom:1px solid var(--line); }
.dialog-head button { border:0; background:none; font-size:26px; }
.dialog-body { padding:20px; line-height:1.7; }
.dialog-body ul { padding-left:20px; }.muted { color:var(--muted); font-size:12px; }
.short-quiz-body h3{margin:8px 0;font-size:19px}.short-quiz-topic{color:#9a6a2e;font-size:12px;font-weight:900;letter-spacing:.14em}.short-quiz-options{display:grid;gap:9px;margin-top:18px}.short-quiz-options button{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#fff;text-align:left}.short-quiz-options button span{color:var(--muted);font-size:12px}.short-quiz-options button.correct{border-color:#2f9164;background:#eaf7ef}.short-quiz-options button.incorrect{border-color:#bd544b;background:#fff0ee}.short-quiz-result{min-height:48px;margin-top:14px;padding:10px 12px;border-radius:9px;color:var(--muted);background:#f0eadf}.short-quiz-result.correct{color:#176342;background:#eaf7ef}.short-quiz-result.incorrect{color:#8f3932;background:#fff0ee}
.teaching-benefits{display:grid;gap:6px;margin:8px 0 14px}.home-account{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0;font-size:13px}.home-account .account-status{color:#175647;font-weight:900}.home-account a{display:inline-flex;min-height:38px;align-items:center;padding:0 13px;border:1px solid #2c6d5d;border-radius:10px;color:#fff;background:#175647;font-weight:800;text-decoration:none}.home-account .account-signout{color:#fff;border-color:#2c6d5d}
.home-account .account-login{display:inline-flex;min-height:38px;align-items:center;padding:0 15px;border:1px solid #2c6d5d;border-radius:10px;color:#fff;background:#175647;font-weight:900}.home-account .account-login:hover{background:#103f34}
.home-account .account-subscription{min-height:38px;padding:0 15px;border-color:#b58b36;border-radius:10px;color:#5b4217;background:#fff4d8;font-weight:900}.home-account .account-subscription:hover{background:#f7dfaa}.subscription-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.subscription-summary>div{padding:13px 14px;border:1px solid #d8c9ab;border-radius:12px;background:#fffaf0}.subscription-summary span,.subscription-summary strong{display:block}.subscription-summary span{color:#6b776f;font-size:12px}.subscription-summary strong{margin-top:4px;color:#175647;font-size:16px}.dialog-actions #subscriptionCheckoutBtn:disabled{cursor:not-allowed;opacity:.68}.subscription-pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}.subscription-pricing[hidden]{display:none}.subscription-pricing p{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid #d8c9ab;border-radius:10px;background:#fffaf0}.subscription-pricing strong{color:#9a6a2e}
@media (max-width:720px){.home-topbar{position:static;margin:0 0 22px}.home-account-row{align-items:flex-end;margin-left:auto}.home-hero{margin-top:0}.beta-member-notice{max-width:100%}}
.sponsor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.sponsor-options button{display:flex;min-height:84px;flex-direction:column;justify-content:center;gap:5px;padding:12px;border:1px solid #b9964c;border-radius:12px;color:#61491d;background:#fff7df}.sponsor-options button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(97,73,29,.18)}.sponsor-options button:disabled{cursor:not-allowed;opacity:.78}.sponsor-options span{font-size:12px;font-weight:800}.sponsor-options b{font-size:16px}
@media (max-width:520px){.sponsor-options{grid-template-columns:1fr}}
@media (max-width:520px){.subscription-summary{grid-template-columns:1fr}}
.dialog-actions { padding:0 20px 20px; display:flex;justify-content:flex-end;gap:8px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.result-stat { background:#f1eadc; border-radius:10px; padding:11px; }.result-stat b { display:block; font-size:21px; }
.result-delta{display:inline!important;margin-left:3px;font-size:.78em!important}.result-delta-up{color:#c62828}.result-delta-down{color:#14844b}.result-delta-flat{color:inherit}
.result-stat small{display:block;margin-top:3px;color:#66756f}.afa-score-stat{border:2px solid #d8a72f;background:#fff7df}.afa-score-stat b{font-size:30px;color:#8b5b00}.afa-decision-counts{display:grid;grid-template-columns:repeat(7,minmax(70px,1fr));gap:7px;margin:14px 0}.afa-decision-counts span{display:flex;flex-direction:column;align-items:center;padding:8px 5px;border:1px solid #d8cbb5;border-radius:8px;background:#faf5eb;font-size:11px;color:#5d6a65}.afa-decision-counts b{font-size:20px;color:#173c32}.afa-axis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.afa-axis-grid>div{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 12px;border-radius:8px;background:#123c34;color:#e9f3ed}.afa-axis-grid span{font-size:12px}.afa-axis-grid b{font-size:21px;color:#f6cf71}.afa-axis-grid small{grid-column:1/-1;color:#a9c5bd}
.tile-back{width:17px;height:27px;border-color:rgba(255,255,255,.72);border-bottom:4px solid #563319;background:linear-gradient(105deg,#f1ca76 0 7%,#bd7e37 9% 20%,#9c6428 22% 74%,#75471e 78%);box-shadow:2px 3px 3px rgba(0,0,0,.32),inset 2px 1px rgba(255,255,255,.28)}
.wall-visual{inset:135px 152px 225px}.wall-side{gap:3px;perspective:280px}.wall-stack{width:16px;height:23px;border-radius:3px;border-bottom:4px solid #07323a;background:linear-gradient(110deg,#85d7d8 0 8%,#3ca4ad 10% 22%,#197483 24% 76%,#0c4450 80%);box-shadow:3px 4px 3px rgba(0,0,0,.38),inset 2px 1px rgba(255,255,255,.48);transform:rotateX(5deg)}.wall-left .wall-stack,.wall-right .wall-stack{width:23px;height:16px;transform:rotateY(5deg)}.wall-stack.dead{visibility:visible;background:linear-gradient(120deg,#43524e,#17231f 72%);border-color:#5a6964;border-bottom-color:#0b1210;box-shadow:2px 3px 2px rgba(0,0,0,.55),inset 1px 1px rgba(255,255,255,.12)}
.wall-stack.dead-top{background:linear-gradient(120deg,#43524e,#17231f 72%);border-color:#5a6964}.wall-stack.dead-top::after{background:#0d5260}.wall-stack.dead-bottom::after{background:linear-gradient(120deg,#43524e,#17231f 72%)}.wall-stack.half.remaining-dead{background:linear-gradient(120deg,#43524e,#17231f 72%);border-color:#5a6964}
.seat-top .mini-melds,.seat-top>.flowers{transform:rotate(180deg)}.seat-left>.flowers{transform:rotate(90deg)}.seat-right>.flowers{transform:rotate(-90deg)}.seat-left>.flowers,.seat-right>.flowers{margin-top:12px}
.seat-top .opponent-open-row{transform:rotate(180deg)}.seat-left .opponent-open-row{transform:rotate(90deg)}.seat-right .opponent-open-row{transform:rotate(-90deg)}.seat-top .opponent-open-row .mini-melds,.seat-left .opponent-open-row .mini-melds,.seat-right .opponent-open-row .mini-melds{transform:none}
@media (max-width:1050px){.layout{grid-template-columns:1fr}.coach-panel{position:static}.coach-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel-heading,.legend{grid-column:span 1}.candidate-list{max-height:180px}.history-panel{grid-template-columns:1fr}.mahjong-table{min-height:650px}.tile{width:39px;height:57px;font-size:30px}}
@media (max-width:800px){.training-grid{grid-template-columns:1fr 1fr}.training-card.active{transform:none}.home-hero{margin-top:2vh}.layout{grid-template-columns:1fr}.coach-panel{position:static}}
@media (max-width:720px){.app-shell{padding:6px}.topbar{flex-wrap:wrap;gap:9px}.topbar .brand-heading{font-size:21px}.match-strip{order:3;width:100%;justify-content:flex-start;gap:3px}.match-strip span{padding:5px 7px;font-size:10px}.layout{display:block}.coach-panel{display:block;margin-top:8px}.mahjong-table{min-height:610px;border-width:5px;border-radius:18px}.seat-top{left:18%;right:18%}.seat-left,.seat-right{top:19%;width:60px;font-size:9px}.seat-left{left:5px}.seat-right{right:5px}.tile-back{width:11px;height:18px}.table-center{inset:142px 66px 188px}.river{width:148px;gap:1px}.river-left{left:-60px}.river-right{right:-60px}.discard-tile{width:19px;height:27px;padding:1px;border-bottom-width:2px}.claim-overlay{inset:-55px -55px}.player-zone{left:5px;right:5px;bottom:10px}.concealed-hand{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:1px;width:100%;overflow:visible;padding-top:8px}.tile{width:100%;height:48px;min-width:0;padding:1px;border-bottom-width:5px;border-radius:4px}.tile.drawn{margin-left:2px}.face-wan .tile-number{font-size:17px}.face-wan .tile-suit{font-size:13px}.face-honor .honor-char{font-size:23px}.pip{width:5px;height:5px;border-width:1px}.pip.big{width:17px;height:17px;border-width:3px}.stick{width:2px;height:9px}.hand-row{display:block}.meld-zone{margin-bottom:5px;gap:4px}.meld .tile{flex-basis:25px;width:25px;height:38px}.meld .face-wan .tile-number{font-size:14px}.meld .face-wan .tile-suit{font-size:10px}.action-bar{align-items:flex-start;flex-direction:column}.history-panel{display:block}.scoreboard{margin:12px 0;grid-template-columns:1fr 1fr}.top-actions{width:100%;justify-content:space-between}.candidate-list{max-height:none}.home-view{padding:26px 16px}.training-grid{grid-template-columns:1fr}.training-card{min-height:165px}.home-hero{margin-bottom:34px}.home-hero h1{font-size:42px}.home-lead{font-size:15px}.setup-view{padding:18px 14px}.setup-brand{margin:10px 0 24px}.setup-brand .brand-heading{font-size:34px}.style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.style-grid>label{grid-column:1/-1}.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}}
@media (max-width:720px){.concealed-hand{gap:0;overflow:hidden;padding:8px 2px 4px}.concealed-hand .tile{height:50px;margin-left:0;overflow:hidden;border-width:1px;border-bottom-width:4px;border-radius:3px;box-shadow:inset 1px 1px #fff,0 2px 3px rgba(0,0,0,.2)}.tile-face{min-width:0;overflow:hidden}.pip-grid,.stick-grid{width:96%;height:92%;gap:0}.pip{width:7px;height:7px}.pip.big{width:19px;height:19px}.stick{width:4px;height:11px}.face-flower .flower-number{font-size:7px;right:2px;top:2px}.face-flower .flower-name{font-size:14px;inset:6px 1px 1px}.hand-row{min-width:0}.meld-zone{max-width:100%;overflow-x:auto}}
@media (max-width:720px){.concealed-hand .tile{height:50px}.concealed-hand .tile.drawn{width:calc(100% - 3px);margin-left:3px}.concealed-hand .tile.c-green{box-shadow:inset 0 0 0 3px var(--green),0 2px 3px rgba(0,0,0,.2)}.concealed-hand .tile.c-yellow{box-shadow:inset 0 0 0 3px var(--yellow),0 2px 3px rgba(0,0,0,.2)}.concealed-hand .tile.c-orange{box-shadow:inset 0 0 0 3px var(--orange),0 2px 3px rgba(0,0,0,.2)}.concealed-hand .tile.c-red{box-shadow:inset 0 0 0 3px var(--red),0 2px 3px rgba(0,0,0,.2)}.concealed-hand .tile.c-ready{box-shadow:inset 0 0 0 3px #5aa9dc,0 2px 3px rgba(0,0,0,.2)}.face-wan .tile-number{font-size:15px}.face-wan .tile-suit{font-size:11px}.face-honor .honor-char{font-size:19px}.pip-grid,.stick-grid{width:88%;height:86%}.pip{width:4px;height:4px;border-width:1px}.pip.big{width:14px;height:14px;border-width:2px}.stick{width:3px;height:8px;border-width:0}.face-bird svg{width:76%;height:76%}.face-flower .flower-name{font-size:14px}}
@media (max-width:720px){.hand-row{display:flex;align-items:flex-end;gap:3px}.meld-zone{flex:0 0 auto;margin:0;gap:2px;overflow:visible}.meld{padding-right:2px}.meld .tile{flex-basis:18px;width:18px;height:29px}.concealed-hand{display:flex;flex:1 1 auto;min-width:0;padding:8px 2px 4px}.concealed-hand .tile{flex:1 1 0;width:auto}.seat-left .opponent-line,.seat-right .opponent-line{height:190px}.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{margin:-3px 0}.wall-visual{inset:105px 43px 174px}.wall-side{gap:2px}.wall-stack{width:10px;height:15px}.wall-left .wall-stack,.wall-right .wall-stack{width:15px;height:10px}.dead-wall{left:46px;bottom:168px;transform:scale(.65);transform-origin:left bottom}}
@media (orientation:landscape) and (max-height:540px){.mahjong-table{min-height:520px}.table-center{inset:128px 102px 190px}.river{width:160px}.river-left{left:-64px}.river-right{right:-64px}.player-zone{bottom:6px}.wall-visual{inset:88px 78px 145px}.dead-wall{bottom:142px}.topbar{margin-bottom:6px}}
@media (max-width:720px) and (orientation:portrait){.table-center{inset:155px 76px 225px}.river{width:135px}.river-left{left:-54px}.river-right{right:-54px}}
@media (max-width:720px){.top-actions{flex-wrap:wrap}.face-flower .flower-name{font-size:7px}.mini-flower-tile .flower-name{font-size:7px}.opponent-open-row{gap:1px}.mini-melds .tile{width:17px;height:26px}}
@media (max-width:720px){.wall-visual{inset:125px 48px 195px}.dead-wall{bottom:190px}.seat-left>.flowers,.seat-right>.flowers{margin-top:18px}.mini-flower-tile{width:21px;height:29px}}
@media (orientation:landscape) and (max-height:540px){.wall-visual{inset:88px 78px 145px}.dead-wall{bottom:142px}}

/* v0.13 — 四家固定區與較長牌河 */
.setup-help{margin:8px 0 0;color:#719b8a;font-size:11px;line-height:1.55}
.opponent-stage{display:flex;align-items:flex-end;justify-content:center;gap:5px;min-width:0}
.player-flowers{display:flex;justify-content:flex-start;min-height:0;margin:0 0 5px;pointer-events:none}
.seat-top .opponent-stage{flex-direction:row}
.seat-left .opponent-stage,.seat-right .opponent-stage{flex-direction:column;gap:2px}
.seat-name{position:relative;z-index:6;width:max-content;max-width:100%;margin:5px auto 0;padding:2px 5px;border-radius:5px;background:rgba(8,52,43,.78);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.table-center{z-index:4}
.river.crowded{gap:1px;row-gap:1px}
.river.crowded .discard-tile{width:27px;height:38px}
.river.dense .discard-tile{width:23px;height:33px}
.face-flower .flower-name{font-size:22px}
.mini-flower-tile .flower-name,.mini-melds .face-flower .flower-name,.meld .face-flower .flower-name{font-size:8px}

@media (max-width:720px){
  .mahjong-table{min-height:640px}
  .seat-top{top:7px;left:12%;right:12%}
  .seat-left,.seat-right{top:18%;width:54px}
  .seat-left{left:4px}.seat-right{right:4px}
  .seat-left .opponent-stage,.seat-right .opponent-stage{height:238px;justify-content:flex-start}
  .seat-left .opponent-line,.seat-right .opponent-line{height:190px;margin-top:0}
  .seat-left .seat-name,.seat-right .seat-name{margin-top:3px;font-size:8px;gap:3px;padding:2px 3px}
  .seat-top .seat-name{font-size:9px;margin-top:2px}
  .opponent-open-row{min-height:31px;margin:0;flex:none}
  .seat-left .opponent-open-row,.seat-right .opponent-open-row{width:32px}
  .seat-left .opponent-open-row .flowers,.seat-right .opponent-open-row .flowers{margin:0}
  .table-center{inset:150px 70px 220px}
  .river{width:132px}
  .river.crowded .discard-tile{width:17px;height:24px}
  .river.dense .discard-tile{width:15px;height:22px}
  .concealed-hand .face-flower .flower-name{font-size:19px;inset:5px 1px 1px}
  .mini-flower-tile .flower-name,.mini-melds .face-flower .flower-name,.meld .face-flower .flower-name{font-size:7px}
}

.stats-trend-controls{display:flex;gap:8px;margin:0 0 10px}
.stats-trend-controls button{min-width:82px;padding:8px 12px;border:1px solid #50748d;border-radius:8px;background:#163a55;color:#dceaf4;font-weight:800;cursor:pointer}
.stats-trend-controls button.active{border-color:#e2b449;background:#284f68;color:#ffd878}
.stats-line-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.stats-line-grid article{padding:12px;border:1px solid #3e6681;border-radius:9px;background:#102b42}
.stats-line-grid h4{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;color:#f0c663;font-size:16px}.trend-skill-key{color:#f0bd46}.trend-score-key{color:#65c9c2}
.stats-line-chart{display:block;width:100%;height:auto}
.stats-chart-empty{display:grid;min-height:145px;place-items:center;color:#9db4c4}
@media(max-width:720px){.stats-line-grid{grid-template-columns:1fr}}

/* v0.28.1-beta：牌河保留起點，擴充到極端喊牌局仍可容納的固定格數。 */
.river-top,.river-bottom{display:grid;grid-template-columns:repeat(9,var(--table-tile-w));grid-template-rows:repeat(3,var(--table-tile-h));width:calc(var(--table-tile-w) * 9 + 16px);gap:2px;row-gap:2px}
.river-left,.river-right{display:grid;grid-template-columns:repeat(6,var(--table-tile-w));grid-template-rows:repeat(4,var(--table-tile-h));width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
.history-heading .soft-btn{padding:13px 20px}
.record-chart{height:92px;display:flex;align-items:end;gap:8px;padding:8px 10px;border-radius:10px;background:#e9efe8}.record-chart i{display:block;flex:1;min-width:12px;border-radius:4px 4px 0 0;background:#237654}

/* v0.28.11：戰績走勢與取消喊牌圖示。 */
.player-stats-dialog .record-chart i.record-win{background:linear-gradient(#ef7770,#b92f2b)}
.player-stats-dialog .record-chart i.record-draw{background:linear-gradient(#c7cdd2,#747f87)}
.player-stats-dialog .record-chart i.record-loss{background:linear-gradient(#66c991,#238052)}
.claim-pass-mark{display:grid!important;place-items:center;background:#efe7d8;color:#805f48;font-size:28px;font-weight:900;border:1px solid #c9bba7;border-radius:4px}
.legal-links{display:inline-flex;gap:8px;align-items:center}.legal-links button{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;padding:2px 0}

/* v0.17 — 固定 9:16 遊戲工作區 */
.app-shell{width:100%;max-width:none;margin:0;padding:8px}
.game-workspace{display:block}
.play-column{container-type:inline-size;width:min(100%,560px);aspect-ratio:9/16;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.play-column .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;margin:0 0 7px;padding:5px 3px;align-items:center}
.play-column .topbar .brand-heading{font-size:clamp(20px,5cqw,27px)}
.play-column .top-actions{justify-content:flex-end;gap:5px;flex-wrap:wrap}
.play-column .top-actions button{padding:7px 9px;font-size:11px}
.play-column .switch{font-size:11px}
.play-column .match-strip{grid-column:1/-1;order:initial;width:100%;justify-content:flex-start;gap:4px}
.play-column .match-strip span{padding:4px 7px;font-size:9px}
.game-column{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.mahjong-table{width:100%;height:100%;min-height:0;border-width:6px;border-radius:20px}
.action-bar{min-height:58px;margin-top:6px;padding:9px 11px}
.side-column{width:min(100%,760px);margin:10px auto 0;display:grid;gap:10px}
.side-column .coach-panel{position:static}
.side-column .history-panel{margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.play-column{--table-tile-w:clamp(18px,5.05cqw,29px);--table-tile-h:clamp(38px,8.6cqw,50px)}
.concealed-hand .tile{height:var(--table-tile-h)}
.opponent-line .tile-back,.opponent-line .revealed-tile,.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{flex-basis:var(--table-tile-w);width:var(--table-tile-w);height:var(--table-tile-h)}
.discard-tile,.river.crowded .discard-tile,.river.dense .discard-tile{width:var(--table-tile-w);height:var(--table-tile-h)}
.river,.river.crowded,.river.dense{width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
.seat-top{top:1.5%;left:0;right:0}
.seat-left,.seat-right{top:47%;width:calc(var(--table-tile-w) * 16 + 36px)}
.seat-left{left:calc(30px - var(--table-tile-w) * 8)}.seat-right{right:calc(30px - var(--table-tile-w) * 8)}
.opponent-stage{padding-bottom:22px}
.opponent-stage>.seat-name{top:calc(100% - 20px);font-size:11px;padding:2px 5px;gap:4px}
.opponent-stage>.seat-name b{font-size:14px}
.opponent-front-row{bottom:calc(100% + 4px)}
.opponent-front-row .mini-flower-tile{width:var(--table-tile-w);height:calc(var(--table-tile-h) * .78);margin:0}
.wall-top{top:13.5%;right:calc(50% - var(--table-tile-w) * 8)}
.wall-bottom{right:1%;bottom:12.5%}
.wall-left{left:18%}.wall-right{right:18%}
.player-zone{left:1%;right:1%;bottom:.8%}
.player-flowers{left:0;bottom:100%}
.table-center{inset:24% 16% 20%}
.river-left{left:calc(-3 * var(--table-tile-w))}.river-right{right:calc(-3 * var(--table-tile-w))}

@media (orientation:landscape) and (min-width:900px){
  body{overflow-x:hidden}
  .app-shell{padding:0 0 0 6px}
  .game-workspace{display:grid;grid-template-columns:min(43vw,56.25vh) minmax(0,1fr);gap:0;align-items:start}
  .play-column{grid-column:1;width:100%;height:100vh;aspect-ratio:auto;margin:0;position:sticky;top:0;padding:5px 6px 5px 0}
  .side-column{grid-column:2;width:100%;max-width:none;margin:0;padding:14px;display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(300px,.95fr);gap:12px;align-items:start;max-height:100vh;overflow:auto}
  .side-column .coach-panel{grid-column:1;display:block}
  .side-column .history-panel{grid-column:2;margin:0;position:sticky;top:14px}
  .app-shell>.site-footer{display:none}
}

/* v0.28.2：一般桌面與直式版的微調。 */
.player-zone { transform: translateY(calc(var(--table-tile-h) * -0.25)); }
.player-meta { transform: translateX(calc(var(--table-tile-w) * -1)); }
.seat-top .opponent-stage > .seat-name { right: calc(50% + var(--table-tile-w)); }
.wall-top { top: calc(105px - var(--table-tile-h) * 0.25); }
@media (max-width:720px){ .wall-top { top: calc(99px - var(--table-tile-h) * 0.25); } }

/* v0.28.3：依難度分類的玩家戰績與大牌榮譽。 */
.player-stats-dialog{width:min(860px,calc(100% - 28px));background:linear-gradient(145deg,#081d2d,#173b58);color:#eef7ff;border:2px solid #d5a744}
.player-stats-dialog .dialog-head{border-color:rgba(218,181,85,.45)}.player-stats-dialog .dialog-head h2{color:#fff;margin:0}.player-stats-dialog .dialog-head button{color:#fff}.stats-kicker{margin:0 0 3px;color:#f0bd52;font-size:12px;font-weight:800;letter-spacing:.08em}
.stats-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.player-stats-dialog .dialog-head .player-stats-download{background:#e9bd57;color:#163044;font-size:14px!important;font-weight:800;line-height:1.2;padding:9px 12px;border:0;border-radius:9px;white-space:nowrap}
.stats-tabs{display:flex;gap:7px;padding:13px 20px 0;overflow:auto}.stats-tabs button{border:1px solid #54758e;background:#14314a;color:#cde1ee;border-radius:8px 8px 0 0;padding:8px 15px;font-weight:800;white-space:nowrap}.stats-tabs button.active{background:#f0bd52;color:#102b3c;border-color:#f6d47c}
.profile-hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px;border:1px solid rgba(223,183,76,.55);border-radius:13px;background:linear-gradient(120deg,#102d48,#1e4c6d)}.profile-medal{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#ffe59a,#bd791e);border:3px solid #fff2b1;color:#23334a;font-weight:900;font-size:28px;box-shadow:0 4px 12px #0008}.profile-hero p{margin:0;color:#bdd9eb;font-weight:700}.profile-hero strong{display:block;font-size:35px;color:#fff6d0;line-height:1.1}.profile-hero small{color:#a9c5d8}.profile-hero aside{border-left:1px solid #7da3b9;padding-left:16px;text-align:center}.profile-hero aside b{display:block;font-size:28px;color:#ffe082}.profile-hero aside span{font-size:11px;color:#c5dce9}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.stat-grid div{background:#102b42;border:1px solid #3e6681;border-radius:9px;padding:12px}.stat-grid span{display:block;color:#a9c7d9;font-size:12px}.stat-grid b{display:block;margin-top:4px;font-size:21px;color:#fff5ca}.stats-section,.honor-section{border-top:1px solid #54758e;padding-top:12px}.stats-section h3,.honor-section h3{margin:0 0 8px;color:#f6cc68}.player-stats-dialog .record-chart{background:#0b2336;border:1px solid #3d6681}.player-stats-dialog .record-chart i{background:linear-gradient(#69d9ee,#277e9d)}.player-stats-dialog .muted{color:#b3cede}.honor-section ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}.honor-section li{display:flex;justify-content:space-between;padding:7px 9px;background:#112d44;border-radius:6px;color:#cfe3ec}.honor-section li b{color:#ffd66e}.player-stats-dialog .dialog-actions{border-top:1px solid #54758e;padding-top:14px}.player-stats-dialog .soft-btn{background:#e9bd57;color:#163044;border:0}
.sample-confidence{display:flex;gap:10px;align-items:center;margin:12px 0 0;padding:10px 12px;border:1px solid #446c84;border-radius:9px;background:#0c263a;color:#cfe3ec}.sample-confidence b{color:#f6cc68;white-space:nowrap}.sample-confidence span{font-size:12px}.confidence-stable{border-color:#3e8f75}.confidence-developing{border-color:#b89242}.confidence-provisional{border-color:#6d8290}.afa-trend-grid,.afa-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}.afa-trend-grid>div,.afa-detail-grid>div{padding:11px 12px;border:1px solid #3e6681;border-radius:9px;background:#102b42}.afa-trend-grid span,.afa-detail-grid span{display:block;color:#a9c7d9;font-size:12px}.afa-trend-grid b,.afa-detail-grid b{display:block;margin:3px 0;color:#fff5ca;font-size:22px}.afa-trend-grid small,.afa-detail-grid small{color:#9ebccc}.coach-insight{margin:14px 0;padding:15px;border-left:4px solid #f0bd46;border-radius:9px;background:linear-gradient(120deg,#183c51,#102b42);color:#d9e8ef}.coach-insight>span{font-size:13.75px;font-weight:800;letter-spacing:.08em;color:#f0bd46}.coach-insight h3{margin:4px 0 5px;color:#fff0b3;font-size:1.46em}.coach-insight p{margin:0;font-size:16.25px;line-height:1.65}
.afa-mastery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.afa-mastery-grid>div{position:relative;overflow:hidden;padding:11px 12px 17px;border:1px solid #3e6681;border-radius:9px;background:#102b42}.afa-mastery-grid span,.afa-mastery-grid small{display:block;color:#a9c7d9;font-size:12px}.afa-mastery-grid b{display:block;margin:3px 0;color:#fff5ca;font-size:19px}.afa-mastery-grid i{position:absolute;left:0;bottom:0;width:var(--mastery);height:4px;background:#e0b743}.afa-mastery-grid .mastery-mastered i{background:#58c79d}.key-review-list{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}.key-review-list li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr);gap:8px;align-items:center;padding:8px 10px;min-width:0;font-size:14px;line-height:1.5;border:1px solid #3e6681;border-radius:9px;background:#102b42;color:#d9e8ef}.key-review-list li b{color:#f6cc68;font-size:13px;white-space:normal;overflow-wrap:anywhere}.key-review-list li small{color:#9ebccc;font-size:12px;text-align:right;white-space:normal;overflow-wrap:anywhere}
.key-review-list,.key-review-list li>*{min-width:0;max-width:100%;overflow-wrap:anywhere}.key-review-list{width:100%;box-sizing:border-box}.key-review-list li{box-sizing:border-box}
.subscription-comparison{min-width:0;font-size:14px;line-height:1.6}.subscription-comparison table{width:100%;table-layout:fixed;border-collapse:collapse}.subscription-comparison th,.subscription-comparison td{padding:8px 6px;border:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}.subscription-comparison thead{background:#e5f0e8;color:#175647}.subscription-comparison th:first-child{width:27%}.subscription-future{padding:10px;border:1px solid var(--line);border-radius:8px;background:#f7f5ef}
.challenge-leaderboard{margin-top:14px}.leaderboard-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid #3e6681;border-radius:9px;background:#102b42}.leaderboard-setting label{display:flex;align-items:center;gap:9px;color:#fff5ca;font-weight:800}.leaderboard-setting input{width:18px;height:18px;accent-color:#e9bd57}.leaderboard-setting div{text-align:right}.leaderboard-setting b,.leaderboard-setting small{display:block}.leaderboard-setting small{margin-top:3px;color:#a9c7d9}.challenge-leaderboard-list{display:grid;gap:5px;margin:10px 0 14px;padding:0;list-style:none}.challenge-leaderboard-list li{display:grid;grid-template-columns:36px minmax(0,1fr) 90px 70px;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;background:#112d44}.challenge-leaderboard-list li>b{color:#f6cc68}.challenge-leaderboard-list strong{color:#fff5ca;text-align:right}.challenge-leaderboard-list small{color:#a9c7d9;text-align:right}
.leaderboard-hero{display:flex;align-items:center;gap:18px;padding:16px;border:1px solid rgba(223,183,76,.55);border-radius:12px;background:linear-gradient(120deg,#102d48,#1e4c6d)}.leaderboard-hero p,.leaderboard-hero h3{margin:0}.leaderboard-hero p{color:#f0bd52;font-size:18px;font-weight:900;letter-spacing:.08em}.leaderboard-hero h3{margin-top:4px;color:#fff5ca;font-size:24px}.leaderboard-category-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 0}.leaderboard-category-controls button,.leaderboard-category-controls label{border:1px solid #54758e;border-radius:8px;background:#14314a;color:#cde1ee;font-weight:800}.leaderboard-category-controls button{padding:8px 12px}.leaderboard-category-controls button.active{border-color:#f6d47c;background:#f0bd52;color:#102b3c}.leaderboard-category-controls label{display:flex;align-items:center;gap:8px;padding:5px 7px 5px 11px}.leaderboard-category-controls select{min-height:32px;border:0;border-radius:6px;background:#f7f1e4;color:#173b32;font-weight:800}.leaderboard-category-controls .leaderboard-participation{justify-content:flex-end;margin-left:auto;padding:7px 11px}.leaderboard-participation input{width:18px;height:18px;margin:0;accent-color:#e9bd57}
@media (max-width:600px){.player-stats-dialog{width:calc(100% - 16px)}.profile-hero{grid-template-columns:auto 1fr}.profile-hero aside{grid-column:1/-1;border-left:0;border-top:1px solid #7da3b9;padding:9px 0 0;text-align:left}.profile-hero aside b{display:inline;margin-right:8px}.profile-hero aside span{display:inline}.stat-grid,.honor-section ul{grid-template-columns:repeat(2,1fr)}.afa-trend-grid,.afa-detail-grid,.afa-mastery-grid{grid-template-columns:1fr}.key-review-list li{grid-template-columns:1fr}.key-review-list li b,.key-review-list li small{white-space:normal}.key-review-list li small{text-align:left}.leaderboard-setting,.leaderboard-hero{align-items:flex-start;flex-direction:column}.leaderboard-setting div{text-align:left}.leaderboard-category-controls{align-items:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard-category-controls label{grid-column:1/-1}.leaderboard-category-controls .leaderboard-participation{justify-content:space-between;margin-left:0}.leaderboard-category-controls select{flex:1}.challenge-leaderboard-list li{grid-template-columns:30px minmax(0,1fr) 68px}.challenge-leaderboard-list li small{display:none}.sample-confidence{align-items:flex-start;flex-direction:column;gap:4px}.stats-tabs{padding-left:12px;padding-right:12px}.player-stats-dialog .dialog-body{padding:14px}}
@media (max-width:700px){.afa-decision-counts{grid-template-columns:repeat(4,1fr)}.afa-axis-grid{grid-template-columns:repeat(2,1fr)}}

/* v0.32.1 — 設定選單配色與品牌字級 */
.setup-brand .brand-subtitle{font-size:19.5px}
.segmented span{color:#fffdf7;border-color:#2c6d5d;background:#175647}
.segmented input:checked+span{color:#fffdf7;border-color:#d59a42;background:#0e3c32;box-shadow:0 0 0 2px rgba(213,154,66,.16)}
.data-preference-row{color:#fffdf7;border-color:#2c6d5d;background:#175647}
.data-preference-row button{color:#fffdf7!important;border-color:#5b9383!important;background:#0e3c32!important}
.setup-start{color:#fffdf7;border-color:#2c6d5d;background:#175647;box-shadow:0 12px 28px rgba(23,86,71,.24)}

/* v0.32.2 — 首頁品牌色、設定標題與手機狀態字級 */
.home-hero .brand-subtitle{color:#e2ad4e}
.setup-brand .brand-heading{font-size:52.5px}
#cloudRecordStatus{flex:1 0 auto;min-width:max-content;font-size:13px;line-height:1.5;white-space:nowrap;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:720px){.setup-brand .brand-heading{font-size:42.5px}}

/* v0.16 — 同尺寸牌面、獨立前方列與可讀座位資訊 */
.opponent-stage{display:block;width:max-content;max-width:100%;margin:0 auto;padding:0 0 27px;transform-origin:center}
.opponent-rack-row{display:flex;align-items:flex-end;justify-content:center;gap:5px;white-space:nowrap}
.opponent-front-row{position:absolute;left:0;right:0;bottom:calc(100% + 7px);display:flex;align-items:flex-end;justify-content:flex-start;min-height:34px;white-space:nowrap}
.opponent-front-row .flowers{display:flex;flex-flow:row nowrap;align-items:flex-end;gap:2px;margin:0;transform:none}
.opponent-stage>.seat-name{top:calc(100% - 24px);right:50%;transform:translateX(50%);padding:3px 7px;font-size:12px;gap:6px}
.opponent-stage>.seat-name b{font-size:15px}
.seat-top{left:0;right:0;top:12px}
.seat-top .opponent-stage{transform:rotate(180deg)}
.seat-left,.seat-right{top:49%;width:480px}
.seat-left{left:-192px}.seat-right{right:-192px}
.seat-left .opponent-stage,.seat-right .opponent-stage{height:auto;justify-content:initial}
.opponent-line{height:auto!important;margin:0!important;display:flex!important;flex-flow:row nowrap!important;align-items:flex-end!important;justify-content:center!important;gap:1px!important}
.opponent-line .tile-back,.opponent-line .revealed-tile{flex:0 0 31px;width:31px;height:48px;margin:0!important;transform:none!important;border-radius:4px}
.seat-top .opponent-front-row,.seat-left .opponent-front-row,.seat-right .opponent-front-row{transform:none}
.player-flowers{bottom:100%;display:flex;flex-flow:row nowrap;gap:2px}
.wall-top{right:9%}
.discard-tile{width:31px;height:48px;padding:1px;border-bottom-width:4px}
.river{width:202px;gap:3px;row-gap:2px}
.river.crowded .discard-tile,.river.dense .discard-tile{width:31px;height:48px}
.river.crowded,.river.dense{gap:3px;row-gap:2px}
.table-center{inset:165px 190px 215px}

@media (max-width:720px){
  :root{--table-tile-w:clamp(19px,4.9vw,29px);--table-tile-h:50px}
  .mahjong-table{min-height:680px}
  .seat-top{left:0;right:0;top:9px}
  .seat-left,.seat-right{top:48%;width:440px}
  .seat-left{left:-170px}.seat-right{right:-170px}
  .opponent-stage{padding-bottom:24px}
  .opponent-rack-row{gap:3px}
  .opponent-stage>.seat-name{top:calc(100% - 21px);padding:3px 6px;font-size:12px;gap:5px}
  .opponent-stage>.seat-name b{font-size:15px}
  .opponent-line .tile-back,.opponent-line .revealed-tile{flex-basis:var(--table-tile-w);width:var(--table-tile-w);height:var(--table-tile-h)}
  .opponent-line .revealed-tile{padding:1px;border-bottom-width:4px}
  .opponent-front-row{bottom:calc(100% + 5px);min-height:29px}
  .opponent-front-row .mini-flower-tile{width:var(--table-tile-w);height:38px;margin:0}
  .player-zone{bottom:5px}
  .player-flowers{bottom:100%;left:0}
  .wall-bottom{right:5px;bottom:77px}
  .wall-top{top:99px;right:9%}
  .wall-left{left:105px}.wall-right{right:105px}
  .discard-tile,.river.crowded .discard-tile,.river.dense .discard-tile{width:var(--table-tile-w);height:var(--table-tile-h);padding:1px;border-bottom-width:4px}
  .river,.river.crowded,.river.dense{width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
  .table-center{inset:150px 62px 185px}
  .river-left{left:calc(-3 * var(--table-tile-w))}.river-right{right:calc(-3 * var(--table-tile-w))}
}

/* v0.28.2：一般桌面與直式版的微調（置於最後以覆蓋舊版桌面規則）。 */
.player-zone { transform: translateY(calc(var(--table-tile-h) * -0.25)); }
.player-meta { transform: translateX(calc(var(--table-tile-w) * -1)); }
.seat-top .opponent-stage > .seat-name { right: calc(50% + var(--table-tile-w)); }
.wall-top { top: calc(105px - var(--table-tile-h) * 0.25); }
@media (max-width:720px){ .wall-top { top: calc(99px - var(--table-tile-h) * 0.25); } }

/* v0.28.1-beta final cascade：固定牌河上限與戰績元件。 */
.river-top,.river-bottom{display:grid;grid-template-columns:repeat(9,var(--table-tile-w));grid-template-rows:repeat(3,var(--table-tile-h));width:calc(var(--table-tile-w) * 9 + 16px);gap:2px;row-gap:2px}
.river-left,.river-right{display:grid;grid-template-columns:repeat(6,var(--table-tile-w));grid-template-rows:repeat(4,var(--table-tile-h));width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
.history-heading .soft-btn{padding:13px 20px}
.record-chart{height:92px;display:flex;align-items:end;gap:8px;padding:8px 10px;border-radius:10px;background:#e9efe8}.record-chart i{display:block;flex:1;min-width:12px;border-radius:4px 4px 0 0;background:#237654}

/* v0.28.0-beta：依牌桌實際牌高微調，保持不同螢幕比例一致。 */
.wall-top{top:calc(105px - var(--table-tile-h) * .5)}
.player-zone{bottom:calc(8px + var(--table-tile-h) * .25)}
.player-meta{transform:translateX(calc(var(--table-tile-w) * -.5))}
.seat-top .opponent-stage>.seat-name{margin-right:calc(var(--table-tile-w) * .5)}
@media (max-width:720px){
  .wall-top{top:calc(99px - var(--table-tile-h) * .5)}
  .player-zone{bottom:calc(5px + var(--table-tile-h) * .25)}
}

/* v0.17 final cascade — 9:16 版面必須位於所有相容規則之後 */
.app-shell{width:100%;max-width:none;margin:0;padding:8px}
.game-workspace{display:block}
.play-column{container-type:inline-size;width:min(100%,560px);aspect-ratio:9/16;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;--table-tile-w:clamp(18px,5.05cqw,29px);--table-tile-h:clamp(38px,8.6cqw,50px)}
.play-column .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;margin:0 0 7px;padding:5px 3px;align-items:center}
.play-column .topbar .brand-heading{font-size:clamp(20px,5cqw,27px)}
.play-column .top-actions{width:auto;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.play-column .top-actions button{padding:7px 9px;font-size:11px}
.play-column .switch{font-size:11px}
.play-column .match-strip{grid-column:1/-1;order:initial;width:100%;justify-content:flex-start;gap:4px}
.play-column .match-strip span{padding:4px 7px;font-size:9px}
.game-column{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.mahjong-table{width:100%;height:100%;min-height:0;border-width:6px;border-radius:20px}
.action-bar{min-height:58px;margin-top:6px;padding:9px 11px}
.side-column{width:min(100%,760px);margin:10px auto 0;display:grid;gap:10px}
.side-column .coach-panel{position:static;display:block}
.side-column .history-panel{margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.concealed-hand .tile{height:var(--table-tile-h)}
.opponent-line .tile-back,.opponent-line .revealed-tile,.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{flex-basis:var(--table-tile-w);width:var(--table-tile-w);height:var(--table-tile-h)}
.discard-tile,.river.crowded .discard-tile,.river.dense .discard-tile{width:var(--table-tile-w);height:var(--table-tile-h)}
.river,.river.crowded,.river.dense{width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
.seat-top{top:1.5%;left:0;right:0}
.seat-left,.seat-right{top:47%;width:calc(var(--table-tile-w) * 16 + 36px)}
.seat-left{left:calc(30px - var(--table-tile-w) * 8)}.seat-right{right:calc(30px - var(--table-tile-w) * 8)}
.opponent-stage{padding:0 0 22px}
.opponent-stage>.seat-name{top:calc(100% - 20px);right:50%;transform:translateX(50%);font-size:11px;padding:2px 5px;gap:4px}
.opponent-stage>.seat-name b{font-size:14px}
.opponent-front-row{bottom:calc(100% + 4px)}
.opponent-front-row .mini-flower-tile{width:var(--table-tile-w);height:calc(var(--table-tile-h) * .78);margin:0}
.wall-top{top:13.5%;right:calc(50% - var(--table-tile-w) * 8)}
.wall-bottom{right:1%;bottom:12.5%}
.wall-left{left:18%}.wall-right{right:18%}
.player-zone{left:1%;right:1%;bottom:.8%}
.player-flowers{left:0;bottom:100%}
.table-center{inset:24% 16% 20%}
.river-left{left:calc(-3 * var(--table-tile-w))}.river-right{right:calc(-3 * var(--table-tile-w))}

@media (orientation:landscape) and (min-width:900px){
  body{overflow-x:hidden}
  .app-shell{padding:0 0 0 6px}
  .game-workspace{display:grid;grid-template-columns:min(43vw,56.25vh) minmax(0,1fr);gap:0;align-items:start}
  .play-column{grid-column:1;width:100%;height:100vh;aspect-ratio:auto;margin:0;position:sticky;top:0;padding:5px 6px 5px 0}
  .side-column{grid-column:2;width:100%;max-width:none;margin:0;padding:14px;display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(300px,.95fr);gap:12px;align-items:start;max-height:100vh;overflow:auto}
  .side-column .coach-panel{grid-column:1;display:block}
  .side-column .history-panel{grid-column:2;margin:0;position:sticky;top:14px}
  .app-shell>.site-footer{display:none}
}

/* v0.15 — 四家固定座位群組與手機直式牌桌 */
.opponent-stage{position:relative;display:flex;flex-direction:row!important;align-items:flex-end;justify-content:flex-end;gap:6px;padding-bottom:23px;transform-origin:center}
.opponent-open-row{order:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;margin:0;min-height:0}
.opponent-line{order:1;margin:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:2px}
.opponent-stage>.seat-name{position:absolute;right:0;top:calc(100% - 20px);margin:0;transform:none}
.seat-top{top:16px;left:17%;right:17%}
.seat-top .opponent-stage{transform:rotate(180deg)}
.seat-left,.seat-right{top:50%;width:390px}
.seat-left{left:-164px;transform:translateY(-50%) rotate(90deg)}
.seat-right{right:-164px;transform:translateY(-50%) rotate(-90deg)}
.seat-left .opponent-stage,.seat-right .opponent-stage{height:auto;flex-direction:row!important}
.seat-left .opponent-line,.seat-right .opponent-line{height:auto;flex-flow:row nowrap;justify-content:flex-end;align-items:flex-end;gap:2px}
.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back,.seat-left .opponent-line .revealed-tile,.seat-right .opponent-line .revealed-tile{transform:none;margin:0}
.seat-top .opponent-open-row,.seat-left .opponent-open-row,.seat-right .opponent-open-row,.seat-top .mini-melds,.seat-left .mini-melds,.seat-right .mini-melds{transform:none}
.player-zone{bottom:8px}
.hand-row{justify-content:flex-end;gap:8px}
.player-meta{justify-content:center;margin:4px 0 0}
.player-flowers{position:absolute;left:0;bottom:78px;margin:0;z-index:3}
.wall-visual{inset:0}
.wall-top{left:auto;right:17%;transform:none;top:105px}
.wall-bottom{left:auto;right:18px;transform:none;bottom:100px}
.wall-left{left:105px}.wall-right{right:105px}
.face-flower .flower-name{font-size:35px;inset:7px 2px 2px}
.mini-flower-tile .flower-name,.mini-melds .face-flower .flower-name{font-size:13px}
.meld .face-flower .flower-name{font-size:13px}

@media (max-width:720px){
  .mahjong-table{min-height:660px}
  .seat-top{top:8px;left:11%;right:11%}
  .seat-left,.seat-right{top:49%;width:255px}
  .seat-left{left:-102px}.seat-right{right:-102px}
  .opponent-stage{gap:3px;padding-bottom:17px}
  .opponent-stage>.seat-name{top:calc(100% - 14px);font-size:8px;padding:1px 3px}
  .seat-left .opponent-stage,.seat-right .opponent-stage{height:auto;justify-content:flex-end}
  .seat-left .opponent-line,.seat-right .opponent-line{height:auto}
  .opponent-line .tile-back{width:11px;height:18px}
  .opponent-open-row{gap:2px}
  .wall-visual{inset:0}
  .wall-top{top:91px;right:11%}.wall-bottom{right:5px;bottom:75px}
  .wall-left{left:48px}.wall-right{right:48px}
  .table-center{inset:158px 72px 224px}
  .player-zone{left:5px;right:5px;bottom:5px}
  .hand-row{gap:3px}
  .player-meta{margin-top:2px}
  .player-flowers{bottom:64px}
  .face-flower .flower-name,.concealed-hand .face-flower .flower-name{font-size:19px;inset:5px 1px 1px}
  .mini-flower-tile .flower-name,.mini-melds .face-flower .flower-name,.meld .face-flower .flower-name{font-size:11px}
}

/* v0.16 final cascade — must remain after the v0.15 compatibility rules */
.opponent-stage{position:relative;display:block;width:max-content;max-width:100%;margin:0 auto;padding:0 0 27px;transform-origin:center}
.opponent-rack-row{display:flex;align-items:flex-end;justify-content:center;gap:5px;white-space:nowrap}
.opponent-front-row{position:absolute;left:0;right:0;bottom:calc(100% + 7px);display:flex;align-items:flex-end;justify-content:flex-start;min-height:34px;white-space:nowrap}
.opponent-front-row .flowers{display:flex;flex-flow:row nowrap;align-items:flex-end;gap:2px;margin:0;transform:none}
.opponent-stage>.seat-name{position:absolute;top:calc(100% - 24px);right:50%;margin:0;transform:translateX(50%);padding:3px 7px;font-size:12px;gap:6px}
.opponent-stage>.seat-name b{font-size:15px}
.seat-top{left:0;right:0;top:12px}
.seat-left,.seat-right{top:49%;width:480px}
.seat-left{left:-192px}.seat-right{right:-192px}
.seat-left .opponent-stage,.seat-right .opponent-stage{height:auto;justify-content:initial}
.opponent-line,.seat-left .opponent-line,.seat-right .opponent-line{height:auto!important;margin:0!important;display:flex!important;flex-flow:row nowrap!important;align-items:flex-end!important;justify-content:center!important;gap:1px!important}
.opponent-line .tile-back,.opponent-line .revealed-tile,.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{flex:0 0 31px;width:31px;height:48px;margin:0!important;transform:none!important;border-radius:4px}
.seat-top .opponent-front-row,.seat-left .opponent-front-row,.seat-right .opponent-front-row{transform:none}
.player-flowers{position:absolute;left:0;bottom:100%;display:flex;flex-flow:row nowrap;gap:2px;margin:0;z-index:3}
.wall-top{top:105px;right:9%}
.wall-bottom{right:18px;bottom:100px}
.discard-tile,.river.crowded .discard-tile,.river.dense .discard-tile{width:31px;height:48px;padding:1px;border-bottom-width:4px}
.river,.river.crowded,.river.dense{width:202px;gap:3px;row-gap:2px}
.table-center{inset:165px 190px 215px}

@media (max-width:720px){
  :root{--table-tile-w:clamp(19px,4.9vw,29px);--table-tile-h:50px}
  .mahjong-table{min-height:680px}
  .seat-top{left:0;right:0;top:9px}
  .seat-left,.seat-right{top:48%;width:440px}
  .seat-left{left:-170px}.seat-right{right:-170px}
  .opponent-stage{padding:0 0 24px}
  .opponent-rack-row{gap:3px}
  .opponent-stage>.seat-name{top:calc(100% - 21px);right:50%;transform:translateX(50%);padding:3px 6px;font-size:12px;gap:5px}
  .opponent-stage>.seat-name b{font-size:15px}
  .opponent-line .tile-back,.opponent-line .revealed-tile,.seat-left .opponent-line .tile-back,.seat-right .opponent-line .tile-back{flex-basis:var(--table-tile-w);width:var(--table-tile-w);height:var(--table-tile-h)}
  .opponent-line .revealed-tile{padding:1px;border-bottom-width:4px}
  .opponent-front-row{bottom:calc(100% + 5px);min-height:29px}
  .opponent-front-row .mini-flower-tile{width:var(--table-tile-w);height:38px;margin:0}
  .player-zone{left:5px;right:5px;bottom:5px}
  .player-flowers{left:0;bottom:100%}
  .wall-top{top:99px;right:9%}.wall-bottom{right:5px;bottom:77px}
  .wall-left{left:105px}.wall-right{right:105px}
  .discard-tile,.river.crowded .discard-tile,.river.dense .discard-tile{width:var(--table-tile-w);height:var(--table-tile-h);padding:1px;border-bottom-width:4px}
  .river,.river.crowded,.river.dense{width:calc(var(--table-tile-w) * 6 + 10px);gap:2px;row-gap:2px}
  .table-center{inset:150px 62px 185px}
  .river-left{left:calc(-3 * var(--table-tile-w))}.river-right{right:calc(-3 * var(--table-tile-w))}
}

/* v0.31.3-beta final cascade：玩家與對家資訊列各向右移半張。 */
.player-meta{transform:translateX(0)}
.seat-top .opponent-stage>.seat-name{margin-right:0}

/* 挑戰難度使用系統產生的牌局碼，欄位與電腦牌風一致呈現不可變更。 */
.setup-section #setupCode:disabled{cursor:not-allowed;color:#81918b;background:#d4d8d4;border-color:#aab3ae;box-shadow:none;opacity:.9}
.setup-section #setupCode{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:clamp(12px,2.8vw,16px);letter-spacing:.025em}

.account-device-list{display:grid;gap:10px;margin:14px 0}
.account-device-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #c9d7d0;border-radius:12px;background:#f6faf8}
.account-device-row>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.account-device-row span{padding:2px 7px;border-radius:999px;background:#dcece4;color:#245544;font-size:12px}
.account-device-row small{flex-basis:100%;color:#667a72}
.account-device-row button,.home-account button{border:1px solid #8cac9e;border-radius:999px;background:#fff;color:#245544;padding:5px 10px;cursor:pointer}
#resetPlayerStatsBtn{display:none!important}
.short-quiz-body{font-size:16px}.short-quiz-topic{font-size:14px;letter-spacing:0}.short-quiz-body select{display:block;width:100%;margin:8px 0 14px;padding:10px;font:inherit;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}
.short-quiz-hand{display:flex;flex-wrap:wrap;gap:3px;padding:12px 4px;margin:12px 0;background:#174c3d;border-radius:9px}.short-quiz-hand .tile{flex:0 0 30px;width:30px;height:44px;border-radius:3px;box-shadow:none}.short-quiz-options button{font-size:16px}.short-quiz-options button span{font-size:14px}.short-quiz-result{line-height:1.7}

.short-quiz-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.short-quiz-topics button{padding:18px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:700}.short-quiz-topics button:hover:not(:disabled){background:#eaf7ef;border-color:#2f9164}.short-quiz-topics button:disabled{opacity:.55}.short-quiz-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}.short-quiz-totals p{padding:14px 4px;background:#eaf7ef;border-radius:10px}.short-quiz-totals p.quiz-negative{background:#fff0ee}.short-quiz-totals strong{display:block;font-size:28px;color:#176342}.short-quiz-mistake{padding:12px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.short-quiz-mistake h4{margin:8px 0}.short-quiz-body [hidden],#shortQuizDialog button[hidden]{display:none!important}

.difficulty-heading .challenge-difficulty-note{color:inherit;font:inherit;letter-spacing:inherit}

.setup-preference-group .setup-data-note{margin:6px 2px 0}
#playerNameError:empty{display:none}

.setup-section>.difficulty-heading{display:block!important}
.setup-view .style-grid{row-gap:4px}
.setup-view .style-grid>label{margin-bottom:0}

.brand-heading{font-family:Georgia,"Noto Serif TC",serif;font-size:29px;letter-spacing:.08em}