:root{--accent:#86a58f;--soft:#e5ebdc}.brand-tile{display:grid;place-items:center;width:29px;height:35px;border:1px solid #d8d4ba;border-bottom:4px solid #819c88;border-radius:5px;background:#fffbe9;color:#4d8062;font-size:20px}.target-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 22px;background:#f2f0df;border-bottom:1px solid var(--line)}.target-row>div:first-child{min-width:0}.target-row p:last-child{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.target-tile{width:60px;height:78px;border:1px solid #d6d0b7;border-bottom:6px solid #90ab93;border-radius:8px;box-shadow:0 4px 7px #5e73551a;flex-shrink:0;padding:7px!important}.tile-face{background:linear-gradient(135deg,#fffef2,#edead4);color:#3a7664;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;overflow:hidden}.tile-face svg{width:100%;height:100%}.tile-number{font-size:17px;color:#425a65}.tile-wan{font-size:18px;color:#b56660;margin-top:3px}.tile-symbol{font-size:29px}.tile-symbol.wind{color:#446778}.tile-symbol.red{color:#b55d5b}.tile-symbol.green{color:#548167}.white-dragon{display:block;width:64%;height:75%;border:3px solid #819caa;border-radius:4px;box-shadow:inset 0 0 0 2px #fff9e6}.table-shell{margin:12px;padding:15px 13px 9px;border:7px solid #b7a489;border-radius:20px;background:radial-gradient(ellipse at 50% 30%,#6e9478,#3f6e5c);box-shadow:inset 0 0 0 2px #deccad}.table-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#e7e7d2;margin:0 0 12px}.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:4px;max-height:580px;max-height:min(580px,calc(100dvh - 170px));overflow-y:auto;padding:4px 3px 9px;overscroll-behavior:contain;scrollbar-color:#b9c9a9 #477360}.mahjong-tile{position:relative;min-width:44px;aspect-ratio:.73;padding:0;border:1px solid #b8c8a7;border-bottom:5px solid #355b4a;border-radius:6px;background:linear-gradient(135deg,#b5c7a8,#87a78f);box-shadow:0 3px 0 #254f3e55;color:#f5f4df;opacity:1!important;transition:transform .18s}.mahjong-tile:not(:disabled):hover{transform:translateY(-3px)}.tile-back{position:absolute;inset:4px;border:1px solid #e6ebce88;border-radius:5px;display:grid;place-items:center;font:400 13px var(--display);color:#e7ebd4}.mahjong-tile .tile-face{position:absolute;inset:0;border-radius:4px;padding:3px}.mahjong-tile .tile-number{font-size:13px}.mahjong-tile .tile-wan{font-size:14px;margin-top:1px}.mahjong-tile .tile-symbol{font-size:22px}.mahjong-tile.opened{border-bottom-color:#7a9c85;animation:tile-turn 300ms ease-out}.mahjong-tile.matched{outline:2px solid #ead78f;outline-offset:1px}.mahjong-tile.missed{outline:2px solid #dfb2a2;outline-offset:1px}.owner-dot{position:absolute;top:-2px;right:-2px;z-index:1;min-width:13px;height:13px;border:1px solid #fff7db;border-radius:50%;background:#c7ad87;color:#fffdf2;font:500 10px var(--display);display:grid;place-items:center;padding:0 3px}.table-seal{text-align:center;font-size:12px;color:#c8d5b266;padding-top:9px}.mode-badge{font-size:12px;border:1px solid #c8d3ba;background:#e5ecda;border-radius:10px;padding:12px;text-align:center}.rules-link{display:inline-flex;align-items:center;min-height:44px;color:#6b805e;font-size:12px}.history-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:9px 0;font-size:12.1px}.history-entry strong{font-weight:500;overflow-wrap:anywhere}.history-entry span{color:var(--muted);font-size:12.1px}.final-tiles{display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 0 20px}.final-tiles>div{text-align:center}.final-tiles>div>span{display:block;font-size:12.1px;color:var(--muted);margin-bottom:8px}.final-tiles .target-tile{margin:auto}.final-tiles>span{font:400 30px var(--display);color:#b58d7a}#result-note{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0 0}@keyframes tile-turn{from{transform:rotateY(80deg)}to{transform:rotateY(0)}}
@media(max-width:700px){.table-shell{margin:9px;padding:13px 9px 8px;border-width:6px}.tile-grid{gap:3px}.target-row{padding:15px 17px}.target-tile{width:55px;height:73px}.table-label{font-size:10px}}

@media(max-width:700px){main#app{padding-left:8px;padding-right:8px}.table-shell{margin:4px;border-width:3px;padding:8px 2px 6px}.tile-grid{gap:3px;padding-left:2px;padding-right:2px}.table-label{padding:0 5px}.target-row{padding:12px 14px}.target-row .eyebrow{margin-bottom:6px}.target-row .rank-badge{margin-top:4px}.target-row .target-tile{width:48px;height:64px}}

.table-scroll-hint{font-size:10px;color:#e7ead5cc;text-align:center;line-height:1.6;margin:7px 0 0}
.select-row{display:grid;gap:8px;margin:15px 0;font-size:12px}.select-row select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #c7d2b8;border-radius:11px;background:#fffdf4;color:var(--ink)}.rank-badge{display:inline-block;margin-top:7px;font-size:12.1px;font-weight:600;padding:4px 8px;border:1px solid #c6d5b6;border-radius:99px;background:#e5ecd9;color:#5a775b}.target-row[data-mode=sudden]{background:#f4e5dd}.target-row[data-mode=sudden] .rank-badge{background:#f4d9d7;border-color:#deb5b0;color:#9b6867}.rank-label{display:block;font-size:12.1px;font-weight:500;margin-top:8px;color:#657c60}.tile-symbol.season{color:#62845c}.tile-symbol.flower{color:#a37581}.season-index{position:absolute;top:4px;left:6px;font:500 10px var(--display);color:#9d937b}.target-tile{position:relative}.tile-face{position:relative}.mahjong-tile .tile-face{position:absolute}

.turn-banner{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 16px;background:#eaf0dc;border-bottom:1px solid var(--line)}.turn-banner>span:first-child{font-size:12.1px;white-space:nowrap;color:var(--muted)}.turn-banner>b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 19px var(--display)}.turn-index{display:grid;place-items:center;min-width:23px;height:23px;border-radius:50%;background:#d6e1c2;font:500 12px var(--display);color:#667d55}

/* Fit every remaining tile into one table, with the target kept above it. */
#deck.tile-grid{grid-template-columns:repeat(var(--tile-columns,13),minmax(0,1fr));grid-auto-rows:var(--tile-h,32px);gap:var(--tile-gap,1px);max-height:none;overflow:visible;margin:0 auto;padding:2px;--tile-w:24px}
#deck .mahjong-tile{min-width:0;width:100%;height:100%;aspect-ratio:auto;border-bottom-width:clamp(1px,calc(var(--tile-w)*.06),3px);border-radius:clamp(2px,calc(var(--tile-w)*.1),5px)}
#deck .tile-back{inset:clamp(2px,calc(var(--tile-w)*.08),4px);border-radius:3px;font-size:calc((clamp(10px,calc(var(--tile-w)*.3),12px)) * 1.1)}
#deck .tile-face{padding:clamp(1px,calc(var(--tile-w)*.05),2px);border-radius:3px}#deck .tile-number{font-size:calc((clamp(10px,calc(var(--tile-w)*.28),12px)) * 1.1)}#deck .tile-wan{font-size:calc((clamp(10px,calc(var(--tile-w)*.32),13px)) * 1.1);margin-top:1px}#deck .tile-symbol{font-size:calc((clamp(11px,calc(var(--tile-w)*.55),22px)) * 1.1)}#deck .season-index{font-size:calc((clamp(10px,calc(var(--tile-w)*.16),10px)) * 1.1);top:1px;left:3px}#deck .white-dragon{border-width:clamp(1px,calc(var(--tile-w)*.06),2px);box-shadow:none}
#deck .owner-dot{top:-1px;right:-1px;min-width:clamp(7px,calc(var(--tile-w)*.27),11px);height:clamp(7px,calc(var(--tile-w)*.27),11px);padding:0 1px;font-size:calc((clamp(10px,calc(var(--tile-w)*.2),10px)) * 1.1)}#deck .matched,#deck .missed{outline-width:1px;outline-offset:0}
@media(max-height:500px) and (min-aspect-ratio:4/3){.target-row{padding:6px 10px;gap:8px}.target-row>div:first-child{display:flex;align-items:center;gap:9px}.target-row .eyebrow{margin:0;font-size:10px}.target-row .rank-badge{margin:0}.target-row .target-tile{width:34px;height:44px;padding:3px!important}.target-row .tile-number{font-size:12px}.target-row .tile-wan{font-size:13px}.target-row .tile-symbol{font-size:20px}.turn-banner{min-height:34px;padding:4px 10px}.turn-banner>b{font-size:16px}.table-shell{margin:4px;border-width:3px;padding:5px 3px}.table-label{font-size:10px;margin-bottom:4px}.table-scroll-hint,.table-seal{display:none}.stage-note{min-height:0;padding:5px 10px;font-size:10px;line-height:1.5}}

/* Bright ivory faces and darker markings separate revealed tiles from deep jade backs. */
.mahjong-tile{background:linear-gradient(135deg,#376b59,#204b3d);border-color:#d9e3c9;border-bottom-color:#173e30}.tile-back{border-color:#e5ebce99}.tile-face{background:#fffef5;color:#185139}.tile-number{color:#1e3545}.tile-wan,.tile-symbol.red{color:#a12630}.tile-symbol.wind{color:#1e405c}.tile-symbol.green,.tile-symbol.season{color:#235536}.tile-symbol.flower{color:#814057}.white-dragon{border-color:#36576c}.season-index{color:#635029}.owner-dot{background:#5b421f;color:#fff9e9;border-color:#fff8da}.mahjong-tile.opened{border-color:#ece3bf;border-bottom-color:#a2915c}.mahjong-tile.matched{outline-color:#f7d65a}.mahjong-tile.missed{outline-color:#f58779}
.back-logo{display:block;width:75%;aspect-ratio:1;border-radius:22%;background:url('../grid-rush/assets/icons/icon-192.png') center/contain no-repeat;box-shadow:0 0 0 1px #ffffff66}

.final-tiles.is-pair{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.final-tiles.is-pair>div{min-width:0}.final-tiles.is-pair>div>span{overflow-wrap:anywhere;min-height:18px}.match-outcome{display:block;font-size:12.1px;line-height:1.5;margin-top:7px;color:#365e43}.history-entry strong small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:4px}

/* Keep the same player identity colours as Pocket Poker, including after a tied pair. */
#deck .mahjong-tile.opened{border-color:var(--player-color);outline:none}
#deck .mahjong-tile.opened .tile-face{box-shadow:inset 0 0 0 clamp(.5px,calc(var(--tile-w)*.025),1px) var(--player-color)}
#deck .mahjong-tile.opened .owner-dot{background:var(--player-color);color:#fff;border-color:#fffef5}
.player-row>span{display:grid;place-items:center;width:24px;flex:0 0 24px;height:24px;border-radius:50%;background:var(--player-color);color:#fff;font:500 12.1px var(--display)}
.turn-banner .turn-index{background:var(--player-color);color:#fff}
.history-entry strong::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--player-color)}
.final-tiles .target-tile[data-player]{border-color:var(--player-color);border-width:2px;border-bottom-width:3px}

/* Larger tiles trade table scrolling for reliable finger-sized targets. */
#deck.tile-grid{max-height:min(620px,65dvh);overflow-y:auto;overflow-x:hidden;gap:3px;overscroll-behavior:contain}
#deck .mahjong-tile{min-width:44px;min-height:60px;font-size:16px}
.table-scroll-hint{display:block!important}