/* One navigation shell and material palette across the application. */
body.premium { background:#e8eae4; }
body.premium .topbar { height:52px;background:#182e26;color:#f4f0df;border-bottom:1px solid #c3ae7755; }
body.premium .brand-mark { background:linear-gradient(125deg,#fff9e5,#d9cdb0); }
body.premium .edition { display:none; }
body.premium .app-shell { display:block;min-height:0; }
body.premium aside { padding:0 24px;background:#21392e;border:0;position:static; }
body.premium aside>.eyebrow,body.premium .sidebar-bottom { display:none; }
body.premium nav { display:flex;gap:8px; }
body.premium .nav { flex:0 1 auto;width:auto;font-size:14px;margin:0;padding:10px 18px;color:#d0dacb;border-radius:0;min-height:40px; }
body.premium .nav.active { background:transparent;color:#fff3cb;box-shadow:inset 0 -2px #cdb474; }
body.premium .nav:hover { background:#ffffff0b; }
body.premium:not(.play-view) main { max-width:1500px;margin:0 auto;padding:20px; }
body.premium:not(.play-view) .page-head { margin-bottom:18px; }
body.premium:not(.play-view) .page-head h1 { font-size:25px; }
body.premium:not(.play-view) .page-head p { font-size:16px; }
body.premium:not(.play-view) .panel,body.premium:not(.play-view) .card { background:linear-gradient(120deg,#fcfbf5,#eeeee3);border:1px solid #c4c5b5;border-radius:10px; }
body.premium:not(.play-view) .card p { font-size:15px;line-height:1.5; }
body.premium:not(.play-view) .card-art { background:radial-gradient(ellipse at 40% 25%,#467b63,#214936); }
body.premium:not(.play-view) .rack-area { background:radial-gradient(ellipse at 40% 25%,#467b63,#214936);border:5px solid #85613c;border-radius:14px;box-shadow:inset 0 0 25px #10271b66,0 2px 0 #c7ab77;padding:18px; }
body.premium:not(.play-view) .rack-area .eyebrow,body.premium:not(.play-view) .rack-info,body.premium:not(.play-view) .rack-area .quiet,body.premium:not(.play-view) .rack-placeholder { color:#f1f1df; }
body.premium:not(.play-view) .rack-area .rack-tiles { padding-bottom:18px;border-bottom:8px solid #ba9864; }
body.premium:not(.play-view) .rack-area .tile { background:linear-gradient(112deg,#fffef7,#f4f1e6 48%,#e8e1cb);border:1px solid #dcd2b9;box-shadow:inset 1px 1px #fff,0 3px #bfb18c,0 6px #ebe0bd,0 9px #753c2f,1px 13px 6px #102a2390; }
body.premium:not(.play-view) .primary { background:#285843;color:#fff9e8;border-radius:6px; }
body.premium:not(.play-view) .button,body.premium:not(.play-view) .chip { border-radius:6px; }
@media(max-width:720px) {
 body.premium aside { padding:0 5px; }
 body.premium nav { gap:0; }
 body.premium .nav { flex:1;padding:10px 5px;font-size:12px; }
 body.premium:not(.play-view) main { padding:12px; }
 body.premium:not(.play-view) .rack-area { padding:12px; }
}
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .topbar { display:none; }
 body.premium aside { padding:0 max(5px,env(safe-area-inset-left)); }
 body.premium nav { gap:8px; }
 body.premium .nav { flex:0 1 auto;min-height:30px;padding:6px 12px;font-size:12px;line-height:18px; }
 body.premium:not(.play-view) main { padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); }
}
/* Keep the table's viewport calculation aligned with the shared navigation. */
@media(min-width:1001px) { body.premium.play-view main { height:calc(100dvh - 92px); } }
/* Table controls remain distinct from the felt and comfortable to tap. */
body.premium .mahjong-table .table-help {
 background:linear-gradient(#e7eedf,#cbd9c4);color:#183c2d;border:1px solid #f0f4e8;border-bottom-color:#899f7e;
 box-shadow:inset 0 1px #fff9,0 2px 0 #657d60,0 4px 7px #10291f50;
 font-size:15px;font-weight:600;min-height:44px;padding:10px 16px;border-radius:8px;
}
body.premium .mahjong-table .table-help:hover { background:linear-gradient(#f7f9ef,#dce8d4); }
body.premium .mahjong-table .table-help:active { transform:translateY(2px);box-shadow:inset 0 1px 3px #506b4d40; }
body.premium .mahjong-table .table-help:focus-visible { outline:3px solid #ffdf84;outline-offset:3px; }
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .mahjong-table .table-help { font-size:14px;min-height:40px;padding:8px 13px; }
 body.premium .table-rack .tile { max-height:82px; }
}
body.premium .table-topline { justify-content:center; }
body.premium .table-buttons { display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; }
body.premium .table-buttons .table-help { display:inline-flex;align-items:center;justify-content:center;gap:8px; }
body.premium .table-buttons .hands-toggle { display:none; }
.control-icon { width:20px;height:20px;flex-shrink:0; }
body.premium .mahjong-table .control-pause { background:linear-gradient(#ffe2a0,#e9bb62);color:#4c330e;border-color:#ffe7b3;box-shadow:inset 0 1px #fff8,0 2px #987039,0 4px 7px #10291f50; }
body.premium .mahjong-table .control-deal { background:linear-gradient(#d8e9ff,#b4d0ed);color:#203e60;border-color:#e6f2ff;box-shadow:inset 0 1px #fff8,0 2px #6686a6,0 4px 7px #10291f50; }
body.premium .mahjong-table .control-reference { background:linear-gradient(#eae5f3,#cfc5df);color:#443951;border-color:#f3eef9;box-shadow:inset 0 1px #fff8,0 2px #897b9b,0 4px 7px #10291f50; }
body.premium .mahjong-table .table-help:hover { filter:brightness(1.06); }
body.premium .mahjong-table .table-help:active { filter:brightness(.97);box-shadow:inset 0 1px 3px #26362840; }
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .table-buttons .hands-toggle { display:inline-flex; }
 body.premium .table-buttons { gap:8px; }
 body.premium .table-buttons .table-help { min-height:44px;padding:8px 12px; }
}
@media(max-width:600px) {
 body.premium .table-buttons { gap:6px; }
 body.premium .table-buttons .table-help { padding:8px;font-size:13px; }
}
/* Declared sets must stay inside the opponents' area, above the player's rack. */
body.premium .four-seat-table { overflow:auto;grid-template-rows:auto minmax(min-content,1fr);align-items:start;gap:12px; }
body.premium .four-seat-table .opponent,body.premium .four-seat-table .table-center { align-self:start;min-width:0; }
body.premium .table-center .last-discard { margin-bottom:12px; }
body.premium .human-melds { position:relative;margin-top:10px;flex-shrink:0; }
body.premium .meld-group>span { display:block;line-height:1.3;margin-bottom:5px; }
body.premium .table-center .table-status { overflow-wrap:anywhere; }
body.premium .rules-mode { display:flex;flex-direction:column;gap:2px;color:#f3efdb;font-size:11px;text-align:left; }
body.premium .rules-mode select { max-width:180px;background:#f3efdf;color:#213b30;font:600 13px system-ui;border:1px solid #cdb77f;border-radius:6px;padding:7px; }
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .table-buttons { gap:5px; }
 body.premium .table-buttons .table-help { padding:6px 9px;gap:5px; }
 body.premium .rules-mode select { max-width:160px;font-size:12px; }
 body.premium .four-seat-table { gap:5px; }
 body.premium .human-melds { margin-top:4px; }
}
/* Large, explicit choices replace the rules menu. */
body.premium .rules-toggle { display:flex;gap:3px;padding:3px;border:1px solid #d7c795;border-radius:10px;background:#14382d; }
body.premium .rules-toggle button { min-height:44px;padding:8px 14px;font:600 16px system-ui;border:0;border-radius:7px;background:transparent;color:#fff7df; }
body.premium .rules-toggle button[aria-pressed=true] { background:#f5e4b3;color:#173c2e;box-shadow:0 2px 3px #0004; }
body.premium .rules-toggle button:focus-visible { outline:3px solid white;outline-offset:2px; }
/* Let the table grow when exposed sets need more room; never clip their labels. */
body.premium .four-seat-table { overflow:visible;flex:1 0 auto;min-height:min-content; }
body.premium.play-view .mahjong-table { height:auto;min-height:100%;overflow:visible; }
body.premium.play-view main { overflow-y:auto; }
/* A readable six-hand page, with familiar book navigation. */
body.premium .hand-reference { touch-action:pan-y; }
body.premium .potential-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
body.premium.play-view .potential-hand { font-size:19px;line-height:1.3;min-height:58px;padding:9px; }
body.premium.play-view .potential-hand b { font-size:16px;color:#304d35; }
body.premium .hand-pages { align-items:center;gap:10px;font-size:16px;margin-top:14px; }
body.premium .hand-pages button { min-height:48px;padding:8px 14px;background:#e7d5aa;color:#263d2e;border:1px solid #a9905d;border-radius:8px;font-size:18px;font-weight:600; }
body.premium .hand-pages button:disabled { opacity:.45; }
body.premium .swipe-hint { margin:8px 0;font-size:15px;color:#42543c;text-align:center; }
body.premium.play-view .hand-detail h3 { font-size:22px; }
body.premium.play-view .hand-detail p { font-size:18px;line-height:1.5; }
body.premium.play-view .hand-detail-title>span { font-size:16px; }
body.premium.play-view .hand-detail .potential-tile.needed { opacity:.8; }
body.premium.play-view .hand-detail .potential-tile.held { border-bottom:3px solid #326044; }
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .hands-open .hand-reference { width:min(600px,85%);top:0;max-height:100%;padding:14px; }
 body.premium .rules-toggle button { font-size:15px;padding:6px 10px; }
 body.premium .potential-list { gap:5px; }
 body.premium.play-view .potential-hand { font-size:18px;min-height:50px; }
}
/* One reading scale across views; tile artwork retains its own proportions. */
:root { --read-size:16px;--heading-size:22px;--caption-size:14px; }
:root[data-text-size=large] { --read-size:19px;--heading-size:26px;--caption-size:17px; }
:root[data-text-size=extra] { --read-size:22px;--heading-size:30px;--caption-size:20px; }
body.premium aside { display:flex;align-items:center; }
body.premium aside nav { flex:1;min-width:0;flex-wrap:wrap; }
#text-settings { flex-shrink:0;min-width:44px;min-height:44px;margin-left:auto;border:1px solid #c9bd92;border-radius:7px;background:#f3e7c8;color:#1b3c2d;font:700 18px system-ui; }
.text-options { display:flex;gap:10px;flex-wrap:wrap; }
.text-options button { min-height:48px;padding:12px;font-size:var(--read-size); }
.text-options button[aria-pressed=true] { background:#234b3b;color:white;outline:3px solid #b69a55; }
body.premium.play-view :is(.potential-hand,.hand-detail p,.hand-pages,.hand-pages button,.table-status,.table-help,.gold-button,.rules-toggle button,.card p,.panel p,.button,.search,.chip,.nav,.capture-settings input,.capture-settings select) { font-size:var(--read-size);line-height:1.4; }
body.premium.play-view :is(.hand-detail h3,.potential-heading h2,.panel h2,.card h3) { font-size:var(--heading-size);line-height:1.25; }
body.premium.play-view :is(.potential-hand b,.hand-detail-title>span,.hand-note,.swipe-hint,.hand-count,.rules-mode,.seat-title,.seat-title span,.meld-group>span,.table-bottom,.table-rack-label) { font-size:var(--caption-size);line-height:1.4; }
body.premium .hand-reference { overflow-y:auto;min-height:0; }
html[data-text-size=large] body.premium.play-view main,html[data-text-size=extra] body.premium.play-view main { height:auto;min-height:calc(100dvh - 92px); }
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .nav { font-size:var(--caption-size); }
 #text-settings { min-height:30px; }
 body.premium .hands-open .hand-reference { position:fixed;top:40px;right:8px;bottom:8px; }
}
body.premium .rules-mode { align-self:center; }
body.premium .rules-toggle { padding:3px; }
body.premium .rules-toggle button { min-height:44px; }
body.premium aside { flex-direction:row;gap:10px; }
body.premium .opponent-rack { flex-wrap:nowrap; }
body.premium .opponent-rack .mini-back { min-width:0;flex-shrink:1; }

body.premium:not(.play-view) :is(p,button,input,select,.button,.nav) { font-size:var(--read-size);line-height:1.4; }
body.premium:not(.play-view) :is(h2,h3) { font-size:var(--heading-size); }
@media(min-width:1001px) { body.premium.play-view main { height:calc(100dvh - 96px); } }
@media(max-width:1000px) and (orientation:landscape) { body.premium.play-view main { height:calc(100dvh - 34px); } }
html[data-text-size=large] body.premium.play-view main,html[data-text-size=extra] body.premium.play-view main { height:auto; }
.hand-panel-toggle { min-width:44px;min-height:44px;border:1px solid #80977e;border-radius:6px;background:#f5ecd4;color:#183c2d;font-size:24px; }
/* Allocate rack and footer space before distributing the remaining felt area. */
body.premium.play-view .mahjong-table { display:flex;height:100%;min-height:min-content; }
body.premium .four-seat-table { flex:1 1 auto;min-height:min-content; }
body.premium .table-topline,body.premium .table-rack-zone,body.premium .table-bottom,body.premium .human-melds { flex-shrink:0; }
body.premium .hand-reference .hand-detail { margin-top:20px;padding-top:16px;border-top:1px solid #c9cbb8; }
body.premium .human-melds:has(.meld-row:empty) { display:none; }
body.premium .table-rack-zone { margin-top:8px; }
@media(min-width:1001px) and (max-height:900px) {
 body.premium .four-seat-table { margin:6px 0;gap:8px; }
 body.premium .opponent { padding:4px; }
 body.premium .center-dragon { padding:4px;font-size:40px; }
 body.premium .table-rack .tile { max-height:112px; }
 body.premium .human-melds .meld-row { margin:4px 0; }
}
:root { --tile-high:#fffef7;--tile-low:#e8e1cb;--tile-back:#9c5140;--tile-back-dark:#5d291e; }
:root[data-tile-set=eucalyptus] { --tile-high:#fbfff5;--tile-low:#dce8d4;--tile-back:#608374;--tile-back-dark:#2f5747; }
:root[data-tile-set=coastal] { --tile-high:#f8fdff;--tile-low:#dbe8ed;--tile-back:#5485a5;--tile-back-dark:#31546e; }
:root[data-tile-set=sandstone] { --tile-high:#fff8e9;--tile-low:#eddbbe;--tile-back:#bd805d;--tile-back-dark:#824e34; }
body.premium .tile,body.premium.play-view .table-rack .tile { background:linear-gradient(112deg,var(--tile-high),var(--tile-low)); }
body.premium .mini-back { background:linear-gradient(115deg,var(--tile-high),var(--tile-back));border-color:var(--tile-low); }
.tile-set-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.tile-set-options button { display:flex;align-items:center;gap:12px;padding:12px;min-height:72px;font-size:var(--read-size);background:#f8f5e9;border:2px solid #c4ccbb;border-radius:8px;color:#244535; }
.tile-set-options button[aria-pressed=true] { border-color:#346650;outline:2px solid #bbaa73; }
.set-swatch { display:inline-grid;place-items:center;min-width:32px;height:44px;background:#f8f4e4;border-radius:5px;font-size:25px;box-shadow:0 5px #995944; }
.set-swatch.eucalyptus { background:#e6efde;box-shadow:0 5px #608374; }
.set-swatch.coastal { background:#e0edf3;box-shadow:0 5px #5485a5; }
.set-swatch.sandstone { background:#f3e3c7;box-shadow:0 5px #bd805d; }
/* Hands can be opened with the same toggle at every screen size. */
body.premium .table-buttons .hands-toggle { display:inline-flex; }
body.premium .hands-collapsed { grid-template-columns:minmax(0,1fr) 64px; }
body.premium .hands-collapsed .hand-reference { display:flex;padding:8px; }
@media(min-width:1001px) { body.premium .hands-collapsed .hand-reference > :not(.potential-heading),body.premium .hands-collapsed .hand-count { display:none; } }
body.premium .potential-heading .hand-panel-toggle { margin-left:auto;order:1; }
/* Reserve space for the tile example while the hand choices and explanation scroll. */
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .hands-open .hand-reference { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 14px;width:calc(100% - 16px);max-width:900px;max-height:calc(100dvh - 48px);padding:10px;overflow:hidden; }
 body.premium .hand-reference .potential-heading { grid-column:1 / -1;margin:0; }
 body.premium .hand-reference .potential-list { grid-column:1;grid-row:2;grid-template-columns:1fr;overflow-y:auto;align-content:start; }
 body.premium .hand-reference .hand-pages { grid-column:1;grid-row:3;margin:0;gap:4px;font-size:14px; }
 body.premium .hand-reference .hand-pages button { min-height:44px;padding:6px 8px;font-size:14px; }
 body.premium .hand-reference .swipe-hint { display:none; }
 body.premium .hand-reference .hand-detail { grid-column:2;grid-row:2 / 4;display:flex;flex-direction:column;min-height:0;margin:0;padding:0 0 0 12px;border-top:0;border-left:1px solid #c9cbb8;overflow:hidden; }
 body.premium .hand-reference .hand-detail-title { flex-shrink:0; }
 body.premium .hand-reference .potential-pattern { flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:300px;align-self:center;gap:4px;padding:8px 0; }
 body.premium .hand-reference .hand-description { min-height:0;overflow-y:auto; }
}
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .hands-open .hand-reference { display:flex;max-height:calc(100dvh - 24px);overflow:hidden; }
 body.premium .hand-reference .hand-detail { order:1;flex-shrink:0;margin:0 0 12px;padding:0;border:0; }
 body.premium .hand-reference .hand-description { max-height:15dvh;overflow-y:auto; }
 body.premium .hand-reference .potential-list { order:2;overflow-y:auto; }
 body.premium .hand-reference .hand-pages { order:3;flex-shrink:0; }
 body.premium .hand-reference .swipe-hint { order:4;flex-shrink:0; }
}

.hand-panel-toggle { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.hand-panel-toggle:focus-visible { outline:3px solid #326044;outline-offset:2px; }
.hand-panel-toggle[aria-expanded=false] svg { transform:rotate(180deg); }
body.premium .hands-collapsed .potential-heading { flex-direction:column;gap:14px;margin:0; }
body.premium .hands-collapsed .potential-heading h2 { writing-mode:vertical-rl;order:2; }
body.premium .hands-collapsed .hand-panel-toggle { margin:0; }
@media(max-width:1000px) {
 .hand-panel-toggle[aria-expanded=true] svg { transform:rotate(-90deg); }
 .hand-panel-toggle[aria-expanded=false] svg { transform:rotate(90deg); }
 body.premium .hands-collapsed .potential-heading { flex-direction:row;gap:14px; }
 body.premium .hands-collapsed .potential-heading h2 { writing-mode:horizontal-tb;order:0; }
 body.premium .hands-collapsed .hand-panel-toggle { margin-left:auto; }
}
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .hands-collapsed .hand-reference { position:fixed;z-index:30;top:40px;right:8px;width:auto;bottom:auto; }
}
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .hands-collapsed { grid-template-columns:1fr; }
}
/* The reference is part of the page, so an expanded hand never covers the board. */
@media(max-width:1000px) {
 body.premium.play-view main { height:auto;overflow:visible; }
 body.premium .play-workspace { display:flex;flex-direction:column;height:auto;gap:10px; }
 body.premium.play-view .mahjong-table { height:auto;min-height:calc(100dvh - 54px); }
 body.premium .hands-open .hand-reference,
 body.premium .hands-collapsed .hand-reference { position:static;width:100%;max-width:none;max-height:none;bottom:auto;top:auto;right:auto;box-shadow:0 3px 10px #14271910; }
 body.premium .hands-collapsed .hand-reference { padding:10px; }
 body.premium .hands-collapsed .potential-heading { width:100%; }
}
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .hands-open .hand-reference { height:340px; }
}
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .hands-open .hand-reference { height:min(640px,calc(100dvh - 24px)); }
}
.hand-panel-toggle { transition:background-color .2s,border-color .2s; }
.hand-panel-toggle:hover { background:#e8dfc3;border-color:#42634d; }
.hand-panel-toggle svg { transition:transform .24s cubic-bezier(.2,.8,.2,1); }
body.premium .hand-reference { overflow:hidden; }
@media(min-width:1001px) {
 body.premium .play-workspace { transition:grid-template-columns .24s cubic-bezier(.2,.8,.2,1); }
 body.premium .hands-collapsed { grid-template-columns:minmax(0,1fr) minmax(64px,64px); }
 body.premium .hands-open .hand-reference { overflow-y:auto; }
}
@media(prefers-reduced-motion:reduce) {
 .hand-panel-toggle,.hand-panel-toggle svg,body.premium .play-workspace { transition:none; }
}
#camera { width:min(900px,calc(100vw - 24px)); }
#camera #video[hidden],#camera #photo[hidden] { display:none; }
#camera #video { max-height:40dvh; }
#camera #photo { display:block;max-height:35dvh;max-width:100%;object-fit:contain;margin:12px auto; }
#scan-review { margin-top:20px;border-top:1px solid #c9cbb8;padding-top:12px; }
#scan-review[hidden] { display:none; }
#scan-tiles { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0; }
.scan-tile { display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:1px solid #c4c5b5;border-radius:8px;min-width:0; }
.scan-tile img,.scan-placeholder { width:72px;height:96px;object-fit:contain; }
.scan-placeholder { display:grid;place-items:center;background:#eee9d9;text-align:center; }
.scan-tile label,.scan-tile select { width:100%; }
.scan-tile select { display:block;margin-top:6px;min-height:44px;font-size:16px; }
#scan-validation { font-weight:600; }
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .opponent .seat-title { flex-wrap:wrap;justify-content:center; }
 body.premium .opponent .seat-title span { max-width:100%;overflow-wrap:anywhere; }
}
/* Larger opponent tiles remain countable without squeezing them into a tiny row. */
@media(max-width:1000px) {
 body.premium .opponent-rack { display:grid;grid-template-columns:repeat(7,minmax(0,20px));gap:4px 3px;margin:8px 0 10px; }
 body.premium .opponent-rack .mini-back { width:100%;height:32px;border-radius:3px; }
 body.premium .seat-2 { width:min(100%,340px);max-width:100%; }
 body.premium .seat-2 .opponent-rack { grid-template-columns:repeat(13,minmax(0,20px)); }
 body.premium .opponent .tile.small { width:clamp(18px,4.5vw,28px);height:auto;aspect-ratio:.7;padding:1px; }
}
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .opponent:not(.seat-2) .opponent-rack { grid-template-columns:repeat(4,minmax(0,20px)); }
}

/* Mobile reference floats above the current table and is available only after dealing. */
body.premium .play-workspace.hands-unavailable { grid-template-columns:minmax(0,1fr); }
@media(max-width:1000px) {
 body.premium .play-workspace .hand-reference { position:fixed;z-index:40;top:8px;right:8px;bottom:auto;width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:10px;box-shadow:0 8px 30px #061d2480;transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s; }
 body.premium .play-workspace.hands-open .hand-reference { opacity:1;visibility:visible;transform:translateY(0); }
 body.premium .play-workspace.hands-collapsed .hand-reference { opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none; }
 body.premium .play-workspace .potential-heading { flex-direction:row;gap:14px;margin:0; }
 body.premium .play-workspace .potential-heading h2 { writing-mode:horizontal-tb;order:0; }
 body.premium .play-workspace .hand-count { display:inline; }
 body.premium .play-workspace .hand-panel-toggle { margin-left:auto; }
}
@media(max-width:1000px) and (orientation:landscape) {
 body.premium .play-workspace .hand-reference { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 14px;height:min(340px,calc(100dvh - 16px)); }
}
@media(max-width:1000px) and (orientation:portrait) {
 body.premium .play-workspace .hand-reference { display:flex;height:min(640px,calc(100dvh - 16px)); }
}
@media(prefers-reduced-motion:reduce) {
 body.premium .play-workspace .hand-reference { transition:none; }
}
.challenge-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.challenge-card { padding:16px;border:1px solid #bcc9b7;border-radius:10px;background:#f4f5e9; }
.challenge-card h3 { margin:10px 0; }
.learning-guide li { margin:10px 0; }
.learning-guide details,.delete-account { margin-top:16px; }
.learning-guide summary,.delete-account summary { cursor:pointer;min-height:44px;padding:10px 0; }
.locked-hand { border-style:dashed!important; }
.locked-hand .card-body { display:flex;flex-direction:column;height:100%; }
.locked-hand button { margin-top:auto; }
.subscription-price { font-size:26px;font-weight:700;color:#214b38; }
#account-email-form,#account-code-form { display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:14px 0; }
#account-email-form label,#account-code-form label,.delete-account label { display:flex;flex-direction:column;gap:6px; }
#account-email,#account-code,#delete-confirm { min-height:44px;padding:8px;max-width:100%;border:1px solid #9aac91;border-radius:6px;font-size:18px; }
button:disabled { cursor:default;opacity:.6; }
@media(max-width:720px) { .challenge-grid { grid-template-columns:1fr; }.subscription-price { font-size:22px; } }

/* Phone landscape: one viewport, with the player's rack reserved before the felt. */
:root {
 --screen-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));
 --screen-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));
 --screen-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
 --screen-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px));
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium { background:#21392e;padding:var(--screen-top) var(--screen-right) var(--screen-bottom) var(--screen-left); }
 body.premium.play-view { height:100dvh;overflow:hidden;overscroll-behavior:none; }
 body.premium .topbar { display:none; }
 body.premium aside { height:36px;padding:0 4px;gap:4px; }
 body.premium aside nav { flex-wrap:nowrap;gap:0;overflow-x:auto; }
 body.premium aside .nav { flex:0 0 auto;min-height:36px;padding:4px 8px;font-size:12px;line-height:1.2;white-space:nowrap; }
 body.premium aside .nav span { display:none; }
 body.premium #text-settings { min-height:32px;height:32px;font-size:14px; }
 html body.premium.play-view main { height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 36px);min-height:0;padding:0 4px 4px;overflow:hidden; }
 body.premium .play-workspace { height:100%;min-height:0;gap:0; }
 body.premium.play-view .mahjong-table { height:100%;min-height:0;width:100%;padding:4px 8px;border-width:2px;border-radius:8px;overflow:hidden; }
 body.premium .table-buttons { flex-wrap:nowrap;gap:4px; }
 body.premium .table-buttons .table-help { min-height:44px;height:44px;padding:4px 9px;font-size:12px;line-height:1.1;gap:4px;box-shadow:none; }
 body.premium .rules-toggle { padding:0;border:0; }
 body.premium .rules-toggle button { min-height:44px;padding:4px 8px;font-size:12px;line-height:1.1; }
 body.premium .control-icon { width:18px;height:18px; }
 body.premium .four-seat-table { flex:1 1 0;min-height:0;grid-template-rows:max-content minmax(0,1fr);gap:4px;margin:8px 0 0;overflow:auto; }
 body.premium .four-seat-table .opponent,body.premium .four-seat-table .table-center { align-self:center; }
 /* West grows with its tiles/sets instead of overflowing a fixed-height row. */
 body.premium .four-seat-table .seat-2 { align-self:start;padding-top:0;padding-bottom:4px; }
 body.premium .seat-title { font-size:11px;line-height:1.1; }
 body.premium .opponent-rack { gap:2px;margin:3px 0;grid-template-columns:repeat(7,minmax(0,18px)); }
 body.premium .seat-2 .opponent-rack { grid-template-columns:repeat(13,minmax(0,18px)); }
 body.premium .opponent-rack .mini-back { height:22px; }
 body.premium .table-center .table-status { font-size:12px;line-height:1.2; }
 body.premium .turn-actions .gold-button { min-height:36px;padding:4px 8px;font-size:12px; }
 body.premium .table-center .last-discard { margin:2px 0;gap:5px;font-size:11px; }
 body.premium .last-discard .tile { width:24px;height:34px;min-width:0; }
 body.premium .human-melds { margin:0;max-height:36px;overflow:auto; }
 body.premium .human-melds .meld-row { margin:0;gap:6px;align-items:center; }
 body.premium .human-melds .meld-group { display:flex;align-items:center;gap:3px; }
 body.premium .human-melds .meld-group>span { font-size:10px;margin:0; }
 body.premium .human-melds .tile.small { width:16px;height:23px; }
 body.premium .table-rack-zone { margin-top:3px; }
 body.premium .table-rack-label { font-size:10px;line-height:1.2;margin-bottom:3px; }
 body.premium .table-rack.rack-tiles { gap:3px;padding:0 2px 6px;justify-content:center; }
 body.premium.play-view .table-rack .tile { flex:0 1 calc((100% - 39px)/14);height:clamp(48px,19dvh,82px);max-height:82px;max-width:58px;min-width:0;padding:2px;box-shadow:inset 1px 1px #fff,0 3px #b6b395,0 5px var(--tile-back);transform:none; }
 body.premium .wood-rack { height:7px;box-shadow:0 2px #463024; }
 body.premium .table-bottom { margin-top:3px;line-height:1;font-size:10px; }
 body.premium .wall-remaining { font-size:10px; }
 body.premium .play-workspace .hand-reference { top:calc(var(--screen-top) + 4px);right:calc(var(--screen-right) + 4px);width:calc(100% - var(--screen-left) - var(--screen-right) - 8px);height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 8px);max-height:340px; }
 body.premium:not(.play-view) main { padding:12px; }
 dialog { max-height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 12px);max-width:calc(100vw - var(--screen-left) - var(--screen-right) - 12px); }
}
@media (orientation:landscape) and (max-height:360px) {
 body.premium .table-buttons .table-help span { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
 body.premium .table-buttons .table-help { min-width:44px; }
 body.premium .human-melds .meld-group>span { display:none; }
}
/* Short phones place the opponents together, freeing a full-width turn prompt. */
@media (orientation:landscape) and (max-height:360px) and (max-width:1000px) {
 body.premium .four-seat-table { grid-template-areas:'west north south' 'center center center';grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:2px; }
 body.premium .four-seat-table .opponent { align-self:start;padding:0; }
 body.premium .seat-2 { grid-column:auto;width:100%; }
 body.premium .seat-2 .opponent-rack,body.premium .opponent-rack { grid-template-columns:repeat(7,minmax(0,18px));margin:2px 0; }
 body.premium .opponent-rack .mini-back { height:16px; }
 body.premium .opponent .meld-row { margin:0;gap:3px;justify-content:center; }
 body.premium .opponent .tile.small { width:12px;min-width:0;height:16px;padding:0; }
 body.premium .opponent .flower-face { font-size:16px; }
 body.premium .table-center { display:flex;align-items:center;justify-content:center;gap:8px; }
 body.premium .turn-controls { display:flex;align-items:center;justify-content:center;gap:8px; }
 body.premium .table-center .table-status { font-size:11px;max-width:300px; }
 body.premium .last-discard>span { display:none; }
 body.premium.play-view .table-rack .tile { height:48px; }
 body.premium .table-rack-zone { margin-top:2px; }
}

/* Reading pages need their own light surface inside the dark landscape shell. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium:not(.play-view) main { background:#f7f6ee;color:#26382e;min-height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 36px); }
 body.premium:not(.play-view) .page-head p { color:#465648; }
 body.premium:not(.play-view) .page-head h1 { color:#26382e; }
}

#accessibility { color:#26382e;background:#f7f6ee; }
#accessibility .dialog-title { display:flex;align-items:flex-start;gap:16px; }
#accessibility .dialog-title h2 { flex:1;min-width:0;margin:0; }
#accessibility .dialog-title button { flex:0 0 44px;width:44px;min-height:44px;margin-left:auto; }
#accessibility>h3 { margin:24px 0 12px; }
#accessibility>p { margin:16px 0;line-height:1.5; }
#accessibility .text-options { gap:12px; }
#accessibility .tile-set-options button { text-align:left; }

/* Local artwork paints before the game module; no artificial loading delay. */
body.is-loading { background:#21392e!important;overflow:hidden; }
body.is-loading>.topbar,body.is-loading>.app-shell { visibility:hidden; }
.boot-screen { position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(ellipse at 78% 45%,#245c46,#103d32 70%);color:#fff5d9;opacity:1;transition:opacity .22s ease; }
.boot-brand { display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,1000px); }
.boot-brand>div { order:0;flex:1;min-width:0;position:relative;z-index:1; }
.boot-brand>img { order:1;flex:0 0 auto;width:48%;height:auto;object-fit:contain; }
.boot-brand h1 { font:700 clamp(38px,7vw,76px)/1.02 system-ui;letter-spacing:-2px;margin:18px 0 18px; }
.boot-kicker { color:#dfc990;font:700 12px/1.5 system-ui;letter-spacing:3px;margin:0; }
.boot-tagline { color:#d7e7d9;font:400 clamp(16px,2.6vw,23px)/1.4 system-ui;margin:0; }
#boot-message { color:#d7e7d9;font:400 13px/1.5 system-ui;margin:10px 0 0; }
.boot-progress { position:relative;width:min(100%,240px);height:26px;margin-top:26px; }
.boot-progress::before { content:'';position:absolute;left:0;right:0;top:12px;height:3px;border-radius:2px;background:#d7e7d940; }
.boot-progress i { position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:26px;background:#fff5da;color:#24553c;border-radius:3px;box-shadow:0 2px #889b7a;font:700 17px Georgia;animation:tile-travel 2.8s ease-in-out infinite;transform-style:preserve-3d; }
@keyframes tile-travel { 0%,100%{left:0;transform:perspective(160px) rotateY(0deg)}50%{left:calc(100% - 20px);transform:perspective(160px) rotateY(360deg)} }
.boot-screen.is-ready { opacity:0;pointer-events:none; }
.boot-failed .boot-progress { display:none; }
#boot-retry { margin-top:16px;min-height:48px;padding:10px 22px;background:#f5e4b3;color:#21392e;border:2px solid #f5e4b3;border-radius:8px;font:600 16px system-ui; }
@media(orientation:portrait) { .boot-brand { flex-direction:column;text-align:center;gap:24px; }.boot-progress { margin-left:auto;margin-right:auto; }.boot-brand>img { order:0;width:min(58vw,280px); }.boot-brand>div { order:1;flex:0 0 auto; }.boot-brand h1 { font-size:48px; } }
@media(orientation:landscape) and (max-height:360px) { .boot-brand { max-width:650px; }.boot-brand h1 { font-size:40px;margin:10px 0; }.boot-progress { margin-top:16px; }.boot-brand>img { width:42%; } }
@media(prefers-reduced-motion:reduce) { .boot-progress i { animation:none;opacity:1; }.boot-screen { transition:none; } }

/* Focus navigation: system typography, labelled menus, and one row during play. */
:root { --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.phone-navigation,.focus-menu,.focus-more,.focus-context { display:none!important; }
#navigation-menu,#table-menu { width:min(520px,calc(100vw - 24px));background:#f7f6ee;color:#26382e; }
#navigation-menu .dialog-title,#table-menu .dialog-title { display:flex;align-items:center;gap:16px; }
#navigation-menu h2,#table-menu h2 { flex:1;margin:0; }
#navigation-menu .dialog-title button,#table-menu .dialog-title button { min-width:48px;min-height:48px; }
.menu-choices { display:grid;gap:10px;margin-top:20px; }
.menu-choices>button { min-height:48px;padding:12px 16px;text-align:left;border:1px solid #687766;border-radius:8px;background:#fffaf0;color:#26382e;font:500 var(--read-size)/1.4 var(--sans); }
.menu-choices>button[aria-current=page] { background:#21392e;color:#fff5d9;text-decoration:underline;text-underline-offset:5px;font-weight:700; }
.menu-choices button:focus-visible,.phone-navigation button:focus-visible { outline:3px solid #2867bb;outline-offset:3px; }
.menu-rules { border-top:1px solid #687766;margin-top:8px;padding-top:8px; }
.menu-rules p { color:#465648;font-size:var(--read-size); }
.menu-rules .rules-toggle button { flex:1;font-size:var(--read-size);min-height:48px; }
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium aside { height:auto;min-height:64px;padding:8px; }
 body.premium aside>nav,body.premium aside>#text-settings { display:none; }
 body.premium .phone-navigation { display:flex!important;align-items:center;gap:16px;width:100%; }
 .phone-navigation button { min-height:48px;min-width:72px;padding:10px 14px;background:#fff8e5;color:#20382c;border:1px solid #fff8e5;border-radius:8px;font:600 var(--read-size)/1.3 var(--sans); }
 #phone-location { color:#fff5d9;font:600 var(--read-size)/1.4 var(--sans); }
 body.premium.play-view aside { display:none; }
 html body.premium.play-view main { height:calc(100dvh - var(--screen-top) - var(--screen-bottom)); }
 body.premium:not(.play-view) main { min-height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 64px); }
 body.premium .table-topline { padding:2px 0 6px;border-bottom:1px solid #869b84; }
 body.premium .table-buttons { width:100%;justify-content:center;flex-wrap:wrap;gap:6px; }
 body.premium .table-buttons>.rules-mode { display:flex; }
 body.premium .table-buttons>[data-action=new-game],body.premium .table-buttons>[data-action=table-history],body.premium .table-buttons>[data-action=table-rules] { display:inline-flex; }
 body.premium .table-buttons .focus-menu { display:inline-flex!important; }
 body.premium .table-buttons .focus-more { display:none!important; }
 body.premium .focus-context { display:none!important; }
 body.premium .table-buttons .table-help { min-width:48px;min-height:48px;height:auto;padding:10px 10px;background:#fff8e5;color:#20382c;border:1px solid #fff8e5;border-radius:8px;font:600 var(--read-size)/1.3 var(--sans);box-shadow:none; }
 body.premium .table-buttons .table-help span { position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal; }
 body.premium .table-buttons .table-help:focus-visible { outline:3px solid #f5d484;outline-offset:2px; }
 body.premium .table-buttons .control-icon { display:none; }
 body.premium .table-buttons .control-pause { background:#f5e4b3;border-color:#f5e4b3; }
 body.premium .table-buttons .hands-toggle[aria-expanded=true] { text-decoration:underline;text-underline-offset:4px; }
 body.premium .table-center .table-status { font-size:var(--read-size); }
 body.premium .turn-actions .gold-button { font-size:var(--read-size);min-height:48px; }
}
/* Main receives programmatic navigation focus; focus cues belong to its controls. */
#main:focus { outline:none; }
body.premium .hand-panel-toggle[aria-expanded=true] svg { transform:none; }
/* Dialog autofocus is not a selection. Show a quiet cue only for keyboard use. */
body.premium :is(.dialog-title button,.hand-panel-toggle):focus { outline:none; }
body.premium :is(.dialog-title button,.hand-panel-toggle) { border-radius:8px; }
html[data-input-mode=keyboard] body.premium :is(.dialog-title button,.hand-panel-toggle):focus-visible { outline:2px solid #42634d;outline-offset:2px; }

/* Direct, colour-coded controls stay centred as a single balanced group. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .table-buttons .rules-toggle { padding:2px;gap:2px;border:1px solid #aebd9c;border-radius:10px; }
 body.premium .table-buttons .rules-toggle button { min-height:48px;min-width:48px;padding:8px;font:600 var(--read-size)/1.3 var(--sans); }
 body.premium .table-buttons .control-pause { background:#f5d58b;color:#4c330e;border-color:#f5d58b; }
 body.premium .table-buttons .control-deal { background:#c7ddf6;color:#203e60;border-color:#c7ddf6; }
 body.premium .table-buttons .control-reference { background:#e0d6ee;color:#443951;border-color:#e0d6ee; }
 body.premium .table-buttons .focus-menu,body.premium .table-buttons .focus-more { background:#e0ead6;color:#203c2c;border-color:#e0ead6; }
}
@media (orientation:landscape) and (max-height:600px) and (max-width:620px) {
 body.premium .table-buttons>[data-action=table-history],body.premium .table-buttons>[data-action=table-rules] { display:none; }
 body.premium .table-buttons .focus-more { display:inline-flex!important; }
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .mahjong-table .table-buttons .control-pause:hover { background:#f5d58b; }
 body.premium .mahjong-table .table-buttons .control-deal:hover { background:#c7ddf6; }
 body.premium .mahjong-table .table-buttons .control-reference:hover { background:#e0d6ee; }
}
/* Equal outer gutters centre the frame on the physical landscape display. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium.play-view { --frame-inset:max(6px,var(--screen-top),var(--screen-bottom));padding-top:var(--frame-inset);padding-bottom:var(--frame-inset); }
 html body.premium.play-view main { height:calc(100dvh - 2 * var(--frame-inset));padding:4px; }
}
.premium-callout { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin:12px 0 20px;border:1px solid #b4a16d;border-radius:10px;background:#f3e7c6;color:#26382e; }
.premium-callout strong { font-size:var(--read-size);line-height:1.4; }
.premium-callout p { margin:6px 0 0;font-size:14px;line-height:1.4; }
.premium-callout button { flex-shrink:0;min-height:48px;padding:10px 14px;border:1px solid #21392e;border-radius:8px;background:#21392e;color:#fff5d9;font:600 var(--read-size)/1.3 var(--sans); }
.potential-list>.premium-callout { grid-column:1/-1;display:block;margin:8px 0 0;padding:12px; }
.potential-list>.premium-callout p { display:none; }
.potential-list>.premium-callout button { display:block;width:100%;margin-top:8px; }
@media(max-width:700px) { .premium-callout { align-items:stretch;flex-direction:column; } }
/* Keep all opponent racks and bonus sets in one band above the turn controls. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .four-seat-table { grid-template-areas:'west north south' 'center center center';grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:max-content minmax(min-content,1fr);align-content:start;gap:6px; }
 body.premium .four-seat-table .opponent { align-self:start;padding:0 2px 4px; }
 body.premium .four-seat-table .seat-2 { grid-column:auto;width:100%; }
 body.premium .opponent-rack,body.premium .seat-2 .opponent-rack { display:flex;flex-wrap:nowrap;justify-content:center;gap:2px; }
 body.premium .opponent-rack .mini-back { flex:0 1 18px;min-width:0;height:22px; }
 body.premium .opponent .meld-row { justify-content:center;align-items:start;gap:4px;margin:5px 0 0; }
 body.premium .opponent .meld-group { max-width:100%; }
 body.premium .opponent .meld-group>div { flex-wrap:wrap;justify-content:center;gap:2px; }
 body.premium .opponent .tile.small { flex:0 0 auto;width:18px;min-width:0;height:27px;aspect-ratio:auto;padding:1px;overflow:visible; }
 body.premium .opponent .flower-face { font-size:21px;line-height:1; }
 body.premium .table-center { align-self:start; }
}
/* Keep the felt clean while retaining touch/keyboard access to crowded sets. */
body.premium .four-seat-table { scrollbar-width:none; }
body.premium .four-seat-table::-webkit-scrollbar { display:none; }
/* Raised ivory faces and a visible coloured base, including short Android windows. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .table-rack.rack-tiles { padding-bottom:11px; }
 body.premium.play-view .table-rack .tile {
  border-color:#d5cbb0;border-radius:6px 6px 4px 4px;
  box-shadow:inset 2px 2px 2px #ffffff,inset -2px -3px 3px #9d927650,
    0 2px #d4c9ab,0 4px #eee3c3,0 6px var(--tile-back-dark),0 8px var(--tile-back),1px 10px 4px #0b211b80;
 }
 body.premium.play-view .table-rack .tile::after { box-shadow:inset 0 1px 0 #fff,inset 1px 0 #fff9,inset -1px -1px #c1b69960; }
}
@media (orientation:landscape) and (min-width:621px) and (max-width:1000px) and (max-height:360px) {
 body.premium.play-view .table-rack .tile { height:clamp(60px,20dvh,76px); }
}
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important; }
#navigation-menu { width:min(760px,calc(100vw - 24px));padding:16px 20px 20px; }
#navigation-menu .dialog-title { justify-content:flex-end;min-height:40px; }
#navigation-menu .dialog-title button { margin-left:auto;min-height:40px; }
#navigation-menu .menu-choices { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px; }
#navigation-menu .menu-choices>button { display:flex;flex-direction:column;justify-content:center;min-width:0;gap:4px;padding:10px 14px; }
#navigation-menu .menu-choices>button>strong { font-weight:600; }
#navigation-menu .menu-choices>button>span { font-size:14px;font-weight:400;line-height:1.4; }
#navigation-menu .menu-choices>.navigation-feature { min-height:104px;background:#e5ecdc;border-color:#809777; }
#navigation-menu .menu-choices>.navigation-feature strong { font-size:calc(var(--read-size) + 4px); }
#navigation-menu .menu-choices>.navigation-feature:nth-child(2) { background:#f0e6cf;border-color:#aa966a; }
#navigation-menu .menu-choices>button[aria-current=page] { background:#21392e;color:#fff5d9; }
#navigation-menu .menu-choices>[data-view=membership]:not([aria-current=page]) { background:#f5e4b3;border-color:#aa966a; }
@media(orientation:landscape) and (max-height:360px) {
 #navigation-menu { padding:8px 16px 12px; }
 #navigation-menu .menu-choices { gap:8px;margin-top:4px; }
 #navigation-menu .menu-choices>.navigation-feature { min-height:82px; }
 #navigation-menu .menu-choices>button { padding:8px 12px; }
}
@media(max-width:430px) and (orientation:portrait) {
 #navigation-menu .menu-choices { grid-template-columns:1fr; }
 #navigation-menu .menu-choices>.navigation-feature { min-height:90px; }
}

/* Turn actions always remain outside the scrollable opponent racks. */
.opponent-band { display:contents; }
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .four-seat-table { display:flex;flex-direction:column;overflow:hidden;gap:4px; }
 body.premium .opponent-band { width:100%;display:grid;grid-template-areas:'west north south';grid-template-columns:repeat(3,minmax(0,1fr));flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none; }
 body.premium .opponent-band::-webkit-scrollbar { display:none; }
 body.premium .four-seat-table .table-center { flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding-bottom:6px; }
 body.premium .turn-controls { display:flex;align-items:center;justify-content:center;gap:8px; }
 body.premium .turn-controls .table-status { margin:0; }
 body.premium .turn-actions { flex-shrink:0; }
 body.premium .last-discard>span { display:none; }
 body.premium .center-discards,body.premium .center-dragon { display:none; }
}

.table-primary-controls { display:contents; }
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .table-buttons { display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:6px; }
 body.premium .table-buttons .focus-menu { justify-self:start; }
 body.premium .table-primary-controls { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-width:0; }
 body.premium .table-primary-controls>[data-action=table-history],body.premium .table-primary-controls>[data-action=table-rules] { display:inline-flex; }
 body.premium .table-buttons .control-pause { justify-self:end;width:48px;height:48px;padding:10px; }
 body.premium .table-buttons .control-pause .control-icon { display:block;width:24px;height:24px; }
 body.premium .table-buttons .control-pause span { display:none; }
}
@media (orientation:landscape) and (max-height:600px) and (max-width:620px) {
 body.premium .table-primary-controls>[data-action=table-history],body.premium .table-primary-controls>[data-action=table-rules] { display:none; }
}
/* Equal seat columns keep North, West and South aligned on roomy tables too. */
body.premium .four-seat-table { grid-template-areas:'west north south' 'center center center';grid-template-columns:repeat(3,minmax(0,1fr)); }
body.premium .four-seat-table .opponent { width:100%;max-width:100%;grid-column:auto;align-self:start; }
body.premium .opponent-rack { justify-content:center; }
body.premium .opponent .meld-row { justify-content:center; }
body.premium .four-seat-table .seat-3 { grid-column:1; }
body.premium .four-seat-table .seat-2 { grid-column:2; }
body.premium .four-seat-table .seat-1 { grid-column:3; }
body.premium .opponent .seat-title { flex-direction:column;align-items:center;justify-content:center;text-align:center; }
/* A clear primary game action, followed by the two main learning tools. */
#navigation-menu .menu-choices>[data-view=play] { grid-column:1/-1;background:#21392e;color:#fff5d9;min-height:56px; }
#navigation-menu .menu-choices>button>strong { display:flex;align-items:center;gap:10px; }
#navigation-menu .control-icon { display:block;flex:0 0 24px;width:24px;height:24px; }
#navigation-menu .menu-choices>.navigation-feature { min-height:88px; }
#navigation-menu .menu-choices>[data-view=explore]:not([aria-current=page]) { background:#f0e6cf;border-color:#aa966a; }
#navigation-menu .menu-choices>[data-view=rack]:not([aria-current=page]) { background:#e5ecdc;border-color:#809777; }
#navigation-menu .menu-choices>[data-action=display-preferences] { grid-column:1/-1; }
@media(orientation:landscape) and (max-height:440px) {
 #navigation-menu { padding:8px 16px 12px; }
 #navigation-menu .dialog-title { height:32px;min-height:32px; }
 #navigation-menu .menu-choices { margin-top:4px;gap:6px; }
 #navigation-menu .menu-choices>button { padding:6px 12px; }
 #navigation-menu .menu-choices>.navigation-feature { min-height:72px; }
 #navigation-menu .menu-choices>[data-view=play] { min-height:48px; }
}
/* Selected navigation cards must keep a matching foreground and background. */
#navigation-menu .menu-choices>button[aria-current=page],
#navigation-menu .menu-choices>button[aria-current=page]:hover { background:#21392e;color:#fff5d9;border-color:#809777; }
.checker-suits { display:flex;gap:6px;margin:10px 0;flex-wrap:wrap; }
.checker-suits button { min-height:48px;padding:8px 12px;border:1px solid #809777;border-radius:8px;background:#fffaf0;color:#26382e; }
.checker-suits button[aria-pressed=true] { background:#21392e;color:#fff5d9; }
.checker-entry .palette { display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px; }
.checker-entry .palette .tile { width:100%;min-width:0;max-width:64px;height:76px; }
body.checker-view .rack-area { position:sticky;top:0;z-index:2; }
@media(orientation:landscape) and (max-height:600px) and (min-width:621px) {
 body.premium.checker-view main { height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 64px);min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 12px;overflow:auto; }
 html body.premium.checker-view main>.page-head { display:none; }
 html body.premium.checker-view .rack-area { flex:0 0 auto;position:static;margin:0;padding:6px 10px; }
 html body.premium.checker-view .rack-top { margin:0;display:flex;align-items:center;justify-content:space-between; }
 html body.premium.checker-view .rack-top .quiet { padding:4px 10px;min-height:32px; }
 html body.premium.checker-view .rack-tiles { min-height:52px;gap:4px;flex-wrap:nowrap;padding:0 0 5px; }
 html body.premium.checker-view .rack-tiles .tile { flex:0 1 48px;min-width:0;width:48px;height:52px; }
 html body.premium.checker-view .rack-info { margin:0;font-size:12px; }
 html body.premium.checker-view .checker-tools { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px;flex:1;min-height:146px;margin:0; }
 html body.premium.checker-view .checker-tools .panel { padding:8px;margin:0;min-width:0; }
 html body.premium.checker-view .checker-tools h2 { font-size:16px;margin:0; }
 html body.premium.checker-view .checker-tools>section>p { display:none; }
 html body.premium.checker-view .checker-suits { margin:4px 0;gap:4px;flex-wrap:nowrap; }
 html body.premium.checker-view .checker-suits button { min-height:40px;padding:5px 8px;font-size:14px; }
 html body.premium.checker-view .checker-entry .palette { gap:4px; }
 html body.premium.checker-view .checker-entry .palette .tile { height:58px; }
 html body.premium.checker-view .checker-matches { overflow:auto;overscroll-behavior:contain; }
 html body.premium.checker-view .match { padding:8px 0;margin:0; }
 html body.premium.checker-view .match-top { font-size:14px;gap:8px; }
 html body.premium.checker-view .missing { flex-wrap:wrap;gap:3px; }
 html body.premium.checker-view .missing .tile.small { width:22px;height:31px;min-width:0; }
 html body.premium.checker-view main>.bottom-note { display:none; }
}
@media(max-width:620px) {
 .checker-entry .palette { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media(orientation:landscape) and (max-height:600px) and (min-width:621px) {
 html body.premium.checker-view .rack-area { padding:2px 10px;border-width:3px; }
 html body.premium.checker-view .rack-area .rack-tiles { margin:0;padding:0 0 8px;border-bottom:3px solid #ba9864;min-height:63px; }
}
#navigation-menu .menu-choices>.navigation-feature[aria-current=page],
#navigation-menu .menu-choices>.navigation-feature[aria-current=page]:hover { background:#21392e;color:#fff5d9;border-color:#809777; }
@media(orientation:landscape) and (max-height:600px) and (min-width:621px) {
 body.premium.checker-view aside { min-height:52px;padding:2px 8px; }
 html body.premium.checker-view main { height:calc(100dvh - var(--screen-top) - var(--screen-bottom) - 52px);gap:4px;padding-block:4px; }
}
/* Short screens keep seat labels fixed; exposed tiles share the heading row. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .opponent-band { overflow:visible;flex:0 0 auto; }
 body.premium .four-seat-table .opponent { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:27px 26px;align-items:center;gap:2px;padding:0 3px; }
 body.premium .opponent .seat-title { grid-column:1;grid-row:1;align-items:start;line-height:1.2; }
 body.premium .opponent .opponent-rack { grid-column:1/-1;grid-row:2;margin:0; }
 body.premium .opponent .meld-row { grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;justify-content:flex-end;overflow-x:auto;overflow-y:hidden;max-height:27px;margin:0;gap:3px;scrollbar-width:none; }
 body.premium .opponent .meld-group { flex:0 0 auto; }
 body.premium .opponent .meld-group>div { flex-wrap:nowrap; }
 body.premium .opponent .meld-group>span { display:none; }
 body.premium .opponent .tile.small { height:23px;width:16px; }
 body.premium .opponent .flower-face { font-size:18px; }
 body.premium .opponent .meld-row::-webkit-scrollbar { display:none; }
 body.premium .four-seat-table { overflow:visible; }
}
@media(orientation:landscape) and (max-height:360px) and (min-width:621px) and (max-width:1000px) {
 body.premium.play-view .mahjong-table:has(.turn-actions .gold-button) .table-rack .tile { height:51px; }
}
/* Larger corner identifiers and a wall count that can be read at a glance. */
body.premium .tile:not(.small) .rank { font-size:14px;font-weight:700;line-height:1;color:#26382e;top:3px;left:3px;background:#fffbedde;border-radius:2px;padding:1px 2px;z-index:1; }
body.premium.play-view .table-rack .tile .rank { font-size:14px; }
body.premium .wall-remaining { font-size:14px;line-height:1.3;color:#fff5d9; }
body.premium .wall-remaining strong { font-size:20px;font-weight:700;font-variant-numeric:tabular-nums; }
@media(orientation:landscape) and (max-height:360px) {
 body.premium .wall-remaining { font-size:12px; }
 body.premium .wall-remaining strong { font-size:17px; }
}
/* Explicit grid tracks prevent WebKit sizing the launch content beyond the viewport. */
.boot-screen { width:100%;height:100dvh;box-sizing:border-box;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden;padding:max(20px,var(--screen-top)) max(24px,var(--screen-right)) max(20px,var(--screen-bottom)) max(24px,var(--screen-left)); }
.boot-brand { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:1000px;min-width:0;max-height:100%;margin:auto;gap:20px; }
.boot-brand>div { grid-column:1;grid-row:1;min-width:0; }
.boot-brand>img { grid-column:2;grid-row:1;width:100%;max-width:100%;max-height:calc(100dvh - 48px);min-width:0;object-fit:contain; }
@media(orientation:landscape) and (max-height:600px) {
 .boot-brand h1 { font-size:clamp(34px,12dvh,64px);margin:12px 0; }
 .boot-kicker { font-size:11px;letter-spacing:2.5px; }
 .boot-tagline { font-size:clamp(15px,4.5dvh,20px); }
 .boot-progress { margin-top:16px; }
}
@media(orientation:portrait) {
 .boot-brand { grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:16px;text-align:center; }
 .boot-brand>img { grid-column:1;grid-row:1;width:min(58vw,280px);max-height:32dvh;justify-self:center; }
 .boot-brand>div { grid-column:1;grid-row:2; }
 .boot-brand h1 { font-size:clamp(34px,6dvh,48px);margin:12px 0; }
}
#navigation-menu .android-download { display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:48px;border:1px solid #809777;border-radius:8px;background:#e5ecdc;color:#26382e;font:600 var(--read-size)/1.4 var(--sans); }
#navigation-menu .menu-choices:has(.android-download)>[data-action=display-preferences] { grid-column:auto; }
body.premium aside nav .nav-download { display:inline-flex;align-items:center;min-height:48px;margin-left:auto;background:#f5e4b3;color:#21392e;border-radius:8px;font-weight:700;text-decoration:none;white-space:nowrap; }
.tile .english-tile-face { display:none; }
html[data-tile-faces=english] .tile>.tile-face:not(.english-tile-face),
html[data-tile-faces=english] .tile>.flower-face,
html[data-tile-faces=english] .tile>.rank { display:none; }
html[data-tile-faces=english] .tile>.english-tile-face { display:block; }
html body.premium aside nav a.nav-download,
html body.premium aside nav a.nav-download:visited { background:#f5e4b3;color:#21392e;border:1px solid #b4a16d;opacity:1; }
html body.premium aside nav a.nav-download:hover,
html body.premium aside nav a.nav-download:focus-visible { background:#fff1c9;color:#21392e;opacity:1; }
/* Make opponents' concealed tiles easier to see and count. */
body.premium .opponent-rack .mini-back { width:22px;height:34px; }
@media(orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .opponent-rack .mini-back { flex-basis:20px;height:26px; }
 body.premium .four-seat-table .opponent { grid-template-rows:27px 30px; }
 body.premium .four-seat-table .table-center { padding-bottom:2px; }
}

/* Keep short-screen turn prompts and personal bonus tiles in separate rows. */
.table-status:empty { display:none!important; }
@media(orientation:landscape) and (max-height:600px) and (max-width:1000px) {
 body.premium .human-melds .meld-group>span { display:none; }
 body.premium .human-melds .meld-row { justify-content:flex-start; }
 body.premium .four-seat-table .turn-controls { min-width:0; }
 body.premium .four-seat-table .table-status { white-space:normal; }
 body.premium .opponent .meld-row { justify-content:safe flex-end; }
}