:root{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#17332d;background:#efeae0}*{box-sizing:border-box}body{margin:0;min-width:1180px;background:linear-gradient(180deg,#f7f4ed,#e9e2d5)}button{font:inherit}.app-shell{min-height:100vh}.topbar{height:86px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;background:#fcfaf5;border-bottom:1px solid #d8d0c3;box-shadow:0 3px 15px #20382d12}.brand-kicker{font-size:10px;font-weight:800;letter-spacing:.22em;color:#977c4f}.topbar h1{font-family:Georgia,"Noto Serif TC",serif;font-size:28px;margin:0;color:#143f34}.top-actions{display:flex;gap:10px}.top-actions button,.action-bar button,.result-card button,.log-head button{border:1px solid #c9c0b2;background:#fffdf8;color:#2a443d;border-radius:10px;padding:10px 15px;cursor:pointer}.top-actions .primary,.primary{background:#1f5a49;color:white;border-color:#1f5a49}.game-wrap{padding:18px 28px 32px}.status-strip{max-width:1230px;margin:0 auto 12px;background:#fffaf1;border:1px solid #d8cdbb;border-radius:12px;padding:10px 16px;display:flex;gap:18px;align-items:center;font-size:13px}.status-strip strong{margin-right:auto}.status-dot{width:8px;height:8px;background:#d19b38;border-radius:50%}.table{height:760px;max-width:1230px;margin:auto;position:relative;border:12px solid #7c5439;border-radius:28px;background:radial-gradient(circle at center,#236753 0,#174f40 50%,#123c32 100%);box-shadow:inset 0 0 0 3px #9b7558,inset 0 0 55px #061f1a8a,0 20px 40px #44382d28;overflow:hidden}.opponent,.human{position:absolute;z-index:3;color:#f8f1e5}.opponent.top{top:18px;left:50%;transform:translateX(-50%);width:620px;text-align:center}.opponent.left{left:14px;top:242px;width:190px}.opponent.right{right:14px;top:242px;width:190px;text-align:right}.opponent-name,.human-meta{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;margin-bottom:6px}.opponent.top .opponent-name{justify-content:center}.opponent.right .opponent-name{justify-content:flex-end}.wind-badge{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:50%;background:#f4e7cb;color:#3f3023;font-family:serif;font-weight:800}.hidden-hand{display:flex;gap:2px;justify-content:center}.opponent.left .hidden-hand,.opponent.right .hidden-hand{flex-wrap:wrap;max-width:176px}.meld-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}.opponent.top .meld-row{justify-content:center}.opponent.right .meld-row{justify-content:flex-end}.meld{display:flex;gap:1px;padding:2px;background:#0b312980;border-radius:4px}.flowers{font-size:11px;color:#f5d79f;margin-top:4px}.center-panel{position:absolute;z-index:4;left:50%;top:48%;transform:translate(-50%,-50%);width:230px;height:230px;border-radius:26px;background:linear-gradient(145deg,#f8f0df,#e9dbc1);box-shadow:0 10px 30px #00150f80,inset 0 0 0 1px #fff;display:flex;align-items:center;flex-direction:column;color:#2f443e;padding:18px}.round-chip{font-weight:800;color:#7f5a30}.wall-count{font-family:Georgia,serif;font-size:52px;line-height:1;margin:16px 0 4px;color:#173f35}.wall-count span{font-size:15px;margin-left:3px}.last-discard{display:flex;align-items:center;gap:7px;font-size:11px;color:#6d6b61}.notice{font-size:11px;text-align:center;margin-top:auto;color:#786c5a}.river{position:absolute;z-index:2;display:flex;flex-wrap:wrap;gap:2px;justify-content:center}.river-west{top:138px;left:365px;width:470px}.river-east{bottom:178px;left:365px;width:470px}.river-north{left:208px;top:245px;width:155px;justify-content:flex-start}.river-south{right:208px;top:245px;width:155px;justify-content:flex-end}.human{bottom:18px;left:50%;transform:translateX(-50%);width:980px}.human-meta{justify-content:center}.dealer-tag{background:#c18d36;color:white;border-radius:5px;padding:2px 6px;font-size:10px}.human-meta>div:last-child{margin-left:auto;font-size:11px;color:#e7d8bd;font-weight:500}.human-melds{justify-content:center;min-height:34px}.human-hand{display:flex;gap:4px;justify-content:center;align-items:flex-end;min-height:78px}.hint{text-align:center;font-size:11px;color:#e4d5ba;margin-top:5px}.tile{width:50px;height:68px;border:0;border-radius:5px;background:linear-gradient(100deg,#fffef8,#eee9df);box-shadow:inset -4px 0 0 #d8d1c5,0 3px 3px #001c1480;color:#172a25;font-weight:900;font-family:"Noto Serif TC",serif;font-size:18px;cursor:pointer;transition:.12s transform,.12s box-shadow}.tile:disabled{cursor:default}.tile:not(:disabled):hover{transform:translateY(-4px)}.tile.selected{transform:translateY(-15px);box-shadow:inset -4px 0 0 #d8d1c5,0 10px 10px #001c1470,0 0 0 3px #f2c76c}.tile.small{width:29px;height:40px;font-size:11px;border-radius:3px;box-shadow:inset -2px 0 0 #d8d1c5,0 2px 2px #001c1466}.tile.back{background:linear-gradient(135deg,#245f87,#123f63);box-shadow:inset 0 0 0 2px #dce6e4,inset 0 0 0 5px #1e5478,0 2px 2px #001c1466}.suit-characters{color:#b5342c}.suit-dots{color:#17644e}.suit-bamboo{color:#1f5370}.dragon-red{color:#c02c28}.dragon-green{color:#267c4d}.flower{color:#b07327}.action-bar{max-width:1230px;min-height:66px;margin:12px auto 0;background:#fffaf1;border:1px solid #d8cdbb;border-radius:16px;padding:10px 14px;display:flex;gap:9px;justify-content:center;align-items:center}.action-bar button{min-width:78px;font-weight:750}.action-bar .win-action{background:#b93b32;color:#fff;border-color:#a12d25}.action-placeholder{font-size:12px;color:#958c7f}.result-modal{position:fixed;z-index:20;inset:0;background:#0a1a16b5;display:grid;place-items:center;backdrop-filter:blur(5px)}.result-card{width:430px;background:#fbf7ee;border-radius:22px;padding:36px;text-align:center}.result-icon{font-size:58px}.result-card h2{font-family:Georgia,"Noto Serif TC",serif;color:#164535}.result-card p{color:#786f62;font-size:14px;line-height:1.7}.result-card .large{padding:12px 28px}.log-panel{position:fixed;z-index:30;right:0;top:0;height:100vh;width:440px;background:#fdfbf7;box-shadow:-20px 0 50px #0003;display:flex;flex-direction:column}.log-head{height:64px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ded8cd}.log-body{padding:12px;overflow:auto;font-size:11px}.log-body>div{padding:8px;border-bottom:1px solid #e9e4db;display:grid;grid-template-columns:110px 1fr;gap:8px}.log-body code{color:#87571c;font-weight:800}.log-body span{word-break:break-all;color:#62605b}
.match-strip{max-width:1230px;margin:0 auto 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#163f35;color:#f5ecdb;border-radius:12px;padding:10px 14px;font-size:12px}.match-strip>strong{font-size:15px;margin-right:4px}.score-chip{display:inline-flex;gap:5px;align-items:center;padding:5px 9px;background:#ffffff14;border:1px solid #ffffff20;border-radius:999px}.match-strip .score-chip{margin-left:auto}.match-strip .score-chip~.score-chip{margin-left:0}.score-chip b{font-variant-numeric:tabular-nums}.dealer-score{box-shadow:inset 0 0 0 1px #e8ba5f;color:#ffe4a6}.dealer-center{font-size:11px;color:#7e684d;margin-bottom:6px}.result-card.wide{width:min(760px,90vw);max-height:88vh;overflow:auto}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin:18px 0}.result-grid section{border:1px solid #ddd3c2;border-radius:14px;padding:14px;background:#fffdf8}.result-grid h3{margin:0 0 10px;color:#6f5636}.winner-block+.winner-block{border-top:1px solid #e8e1d6;margin-top:10px;padding-top:10px}.winner-title{font-weight:850;color:#194a3d;margin-bottom:6px}.score-line,.payment-line{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13px}.payment-line+ .payment-line{border-top:1px dashed #e6dfd4}.empty-result{font-size:13px;color:#8c8376}.total-strip{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;background:#173f35;color:white;padding:10px;border-radius:12px}.next-round-note{margin:14px 0;color:#71695d}.result-card .total-strip .score-chip{background:#ffffff12}
/* Stage 2.2 UX */
.table-stage{max-width:1230px;margin:auto;overflow:visible}.opponent.active,.human.active{filter:drop-shadow(0 0 10px #ffd77a)}.opponent.active .opponent-name,.human.active .human-meta{color:#ffe3a3}.status-dot.thinking{animation:pulse 1s infinite}.tile.drawn{margin-left:14px}.tile.latest{outline:3px solid #ffd56c;outline-offset:2px;animation:latestPulse 1.2s ease-in-out infinite}.countdown{font-size:12px;color:#785d31;background:#f6e6bd;border-radius:999px;padding:8px 11px}.countdown b{font-size:16px;color:#b54230}.settings-modal{position:fixed;z-index:40;inset:0;background:#0a1a16a8;display:grid;place-items:center;backdrop-filter:blur(4px)}.settings-card{width:min(430px,92vw);background:#fbf7ee;border-radius:20px;padding:24px;box-shadow:0 25px 70px #0005}.settings-card h2{margin:0 0 18px;color:#164535}.settings-card label{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #e7dfd2;font-size:13px}.settings-card input,.settings-card select{width:100%;padding:9px;border:1px solid #cfc5b6;border-radius:8px;background:white}.settings-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.settings-actions button{border:1px solid #c9c0b2;background:white;border-radius:9px;padding:9px 14px}.settings-actions .primary{background:#1f5a49;color:white}.thinking{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}@keyframes latestPulse{50%{outline-color:#fff1b4}}
@media(max-width:1000px){body{min-width:0}.topbar{height:64px;padding:0 14px}.topbar h1{font-size:21px}.brand-kicker{font-size:8px}.game-wrap{padding:10px}.match-strip,.status-strip{border-radius:9px}.table-stage{overflow-x:auto;padding-bottom:4px}.table{min-width:930px;height:650px;border-width:8px}.human{width:850px}.human-hand{gap:2px}.tile{width:43px;height:60px;font-size:16px}.tile.small{width:26px;height:36px}.river-west,.river-east{left:285px;width:360px}.river-north{left:175px}.river-south{right:175px}.center-panel{width:190px;height:190px}.wall-count{font-size:42px}.opponent.left,.opponent.right{top:205px}.opponent.top{width:520px}.human{bottom:12px}.action-bar{position:sticky;bottom:4px;z-index:12;box-shadow:0 5px 25px #0002}.result-grid{grid-template-columns:1fr}}
@media(max-height:650px) and (orientation:landscape){.topbar{display:none}.game-wrap{padding:4px}.match-strip{margin-bottom:4px;padding:6px 10px}.status-strip{margin-bottom:4px;padding:6px 10px}.table{height:520px}.opponent.top{top:8px}.opponent.left,.opponent.right{top:165px}.center-panel{top:45%;width:165px;height:165px;padding:10px}.wall-count{font-size:34px;margin:8px 0}.river-west{top:110px}.river-east{bottom:145px}.river-north,.river-south{top:195px}.human{bottom:8px}.tile{width:38px;height:52px;font-size:14px}.tile.small{width:23px;height:32px}.action-bar{min-height:48px;margin-top:4px;padding:5px}}
/* Stage 2.3 polish, stats and replay */
.table{background:radial-gradient(circle at 50% 45%,#2c735e 0,#1b5d4a 44%,#103d32 100%)}
.tile{border:1px solid #f7f2e7;background:linear-gradient(100deg,#fffef9 0,#f4efe5 64%,#ddd5c9 100%)}
.stats-card{width:min(520px,92vw)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stats-grid>div{background:#fffdf8;border:1px solid #e0d6c6;border-radius:12px;padding:14px 8px;text-align:center}.stats-grid b{display:block;font:700 25px Georgia,serif;color:#194a3d}.stats-grid span{font-size:11px;color:#807566}
.replay-modal{z-index:50}.replay-card{width:min(1050px,95vw);height:min(760px,92vh);background:#f9f5ec;border-radius:22px;overflow:hidden;box-shadow:0 28px 80px #0006;display:flex;flex-direction:column}.replay-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ddd3c2}.replay-head h2{margin:0;color:#164535}.replay-head span{font-size:11px;color:#7a7165}.replay-head button{border:0;background:transparent;font-size:24px;cursor:pointer}.replay-layout{display:grid;grid-template-columns:190px 1fr;min-height:0;flex:1}.replay-list{border-right:1px solid #ddd3c2;padding:10px;overflow:auto}.replay-list button{width:100%;border:1px solid #ddd3c2;background:white;border-radius:10px;padding:10px;text-align:left;margin-bottom:8px;cursor:pointer}.replay-list button.active{background:#1f5a49;color:white}.replay-list b,.replay-list span{display:block}.replay-list span{font-size:10px;opacity:.8;margin-top:3px}.replay-main{padding:14px;min-width:0;display:flex;flex-direction:column}.replay-status{display:flex;gap:12px;align-items:center;background:#173f35;color:#fff;border-radius:10px;padding:9px 12px;font-size:12px}.replay-status span:nth-child(2){margin-right:auto}.replay-board{margin-top:10px;background:radial-gradient(circle,#286e59,#174c3e);border:8px solid #79523a;border-radius:20px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:auto;flex:1}.replay-seat{background:#0a302866;color:#f7efe1;border:1px solid #ffffff1f;border-radius:12px;padding:9px;min-height:150px}.replay-seat strong{font-size:12px}.replay-seat>div:nth-child(2){font-size:10px;opacity:.8}.replay-melds,.replay-river,.replay-hand{display:flex;flex-wrap:wrap;gap:2px;margin-top:7px}.replay-hand{border-top:1px solid #ffffff26;padding-top:8px}.replay-tile{display:inline-flex;width:25px;height:34px;background:#fffdf5;border-radius:3px;align-items:center;justify-content:center;color:#17332d;font:800 10px "Noto Serif TC",serif;box-shadow:inset -2px 0 #d7d0c4}.replay-tile.suit-characters{color:#b5342c}.replay-tile.suit-dots{color:#17644e}.replay-tile.suit-bamboo{color:#1f5370}.replay-tile.dragon-red{color:#c02c28}.replay-tile.dragon-green{color:#267c4d}.replay-tile.flower{color:#b07327}.replay-controls{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;margin-top:10px}.replay-controls button{border:1px solid #c9c0b2;background:white;border-radius:9px;padding:7px 12px;cursor:pointer}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}.replay-layout{grid-template-columns:1fr}.replay-list{display:flex;border-right:0;border-bottom:1px solid #ddd3c2;overflow-x:auto}.replay-list button{min-width:130px}.replay-board{grid-template-columns:1fr}}