/* Every filled control has a paired foreground token. Themes are complete contracts. */
:root{
 color-scheme:light;--canvas:#e9edf2;--surface:#f7f9fc;--raised:#ffffff;--soft:#edf1f6;--ink:#17212c;--muted:#586577;--line:#c4ceda;--border-strong:#8594a5;
 --cta:#17212c;--on-cta:#ffffff;--accent:#c6ed53;--on-accent:#263308;--accent-soft:#eff6d9;--accent-edge:#617d12;--focus:#245ac7;
 --x:#245ac7;--x-soft:#e4ecff;--o:#b53155;--o-soft:#fbe5eb;--danger:#a62036;--danger-soft:#fce9ee;--success:#27683e;
 --badge-bg:#e9edda;--badge-ink:#4b581c;--radius:18px;--mini-radius:13px;--shadow:0 12px 38px #1d2a4014;--heading:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --texture:none;--display-weight:800;--nav-shadow:0 5px 25px #28394b12;
}
:root[data-theme="dark"]{
 color-scheme:dark;--canvas:#080e16;--surface:#101924;--raised:#1a2736;--soft:#213244;--ink:#edf4fb;--muted:#afc1d3;--line:#475b70;--border-strong:#7792ad;
 --cta:#d9f58b;--on-cta:#233009;--accent:#d9f58b;--on-accent:#233009;--accent-soft:#293721;--accent-edge:#c2e275;--focus:#aad0ff;
 --x:#9bbdff;--x-soft:#263a60;--o:#ffa0b8;--o-soft:#512e43;--danger:#ffafbf;--danger-soft:#4a2334;--success:#9ae0b0;
 --badge-bg:#31403e;--badge-ink:#e1dba8;--shadow:0 16px 48px #0005;--nav-shadow:0 5px 30px #0006;
}
:root[data-theme="paper"]{
 color-scheme:light;--canvas:#d7cebc;--surface:#f4eedf;--raised:#fffaf0;--soft:#ede3ce;--ink:#352f25;--muted:#6c5e4c;--line:#baaa90;--border-strong:#8c7659;
 --cta:#3a342a;--on-cta:#fff8e8;--accent:#ebc86a;--on-accent:#3d2f06;--accent-soft:#f3e6be;--accent-edge:#876716;--focus:#335c87;
 --x:#2f5986;--x-soft:#dfe7ed;--o:#a83a4b;--o-soft:#f2ded9;--danger:#9b2933;--danger-soft:#f6e0d8;--success:#37683c;
 --badge-bg:#ead6aa;--badge-ink:#6f4d14;--radius:10px;--mini-radius:7px;--shadow:3px 4px 0 #67543a22;--nav-shadow:2px 3px 0 #67543a22;--heading:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--display-weight:700;
 --texture:repeating-linear-gradient(0deg,transparent,transparent 27px,#876d4c12 27px,#876d4c12 28px);
}
:root[data-theme="neon"]{
 color-scheme:dark;--canvas:#070514;--surface:#100d24;--raised:#1c1738;--soft:#282247;--ink:#f0edff;--muted:#bbb0dd;--line:#685487;--border-strong:#a18bbf;
 --cta:#dbeb72;--on-cta:#293209;--accent:#dbeb72;--on-accent:#293209;--accent-soft:#353c1d;--accent-edge:#dbeb72;--focus:#79e4fa;
 --x:#74e3f7;--x-soft:#153c4a;--o:#ff99d7;--o-soft:#4e2450;--danger:#ffb2bf;--danger-soft:#492139;--success:#a0efbb;
 --badge-bg:#443157;--badge-ink:#e9c6ff;--radius:12px;--mini-radius:8px;--shadow:0 0 0 1px #b28cfa18,0 14px 32px #0005;--nav-shadow:0 0 20px #a675ff20;
 --texture:linear-gradient(#b7a0ff08 1px,transparent 1px),linear-gradient(90deg,#b7a0ff08 1px,transparent 1px);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink);background:var(--canvas);font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}body{display:flex;justify-content:center;padding:20px 12px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button,input,select{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button{ -webkit-tap-highlight-color:transparent }[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--heading)}h2{font-size:26px;letter-spacing:-.6px;margin-bottom:8px}h3{font-size:16px;margin-bottom:8px}p{line-height:1.55}small,.subtle{color:var(--muted)}.icon{width:21px;height:21px;flex:none;display:block}.app{position:relative;width:min(440px,100%);height:min(900px,calc(100dvh - 40px));min-height:550px;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;background-image:var(--texture);background-size:28px 28px}.topbar{height:76px;flex:none;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{display:flex;align-items:center;gap:9px;padding:0;border:0;background:none;color:var(--ink);height:44px}.brand b{font-size:19px;letter-spacing:-.6px}.brand>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--cta);color:var(--on-cta)}.header-actions{display:flex;gap:8px;align-items:center}.icon-button{width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:var(--raised);color:var(--ink);flex:none}.wallet-pill{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--raised);border-radius:24px;padding:8px 11px;min-height:44px;color:var(--ink)}.wallet-pill .icon{width:18px;height:18px}.wallet-pill b{font-size:13px;font-variant-numeric:tabular-nums}.content-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;position:relative}#page{min-height:100%;padding:8px 18px 24px;overflow:visible}.hero{padding:8px 0 12px;position:relative}.hero h1{font-size:38px;line-height:1.07;letter-spacing:-1.7px;margin-bottom:14px;font-weight:var(--display-weight)}.hero h1 em{font-style:normal;color:var(--muted)}.hero p{font-size:14px;color:var(--muted);max-width:350px;margin-bottom:4px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px 0 10px}.section-heading h3{margin:0}.eyebrow{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:var(--muted)}.caption{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}.status-line{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:6px 0}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;background:var(--soft);color:var(--ink);font-size:11px;padding:5px 9px;font-weight:650}.pill.accent{background:var(--accent);color:var(--on-accent)}.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow)}.rank-summary{display:flex;align-items:center;gap:12px;margin-top:12px;text-align:left;width:100%;color:var(--ink)}.rank-summary .grow{flex:1}.rank-summary b{display:block;font-size:14px}.rank-summary small{display:block;font-size:11px;margin-top:3px}.rank-badge{width:48px;height:48px;flex:none}.rank-badge.large{width:92px;height:92px}.mode-list{display:grid;gap:8px}.mode{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);color:var(--ink);min-height:74px}.mode.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.mode-symbol{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--soft);color:var(--ink)}.mode.active .mode-symbol{background:var(--accent);color:var(--on-accent)}.mode-copy{flex:1}.mode-copy strong{display:block;font-size:14px}.mode-copy small{display:block;font-size:11px;margin-top:3px}.mode>.icon{width:17px;height:17px}.setup{margin-top:10px;padding:14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-row label{font-size:13px;font-weight:650}.setting-row small{display:block;margin-top:3px;font-size:11px;font-weight:400}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650}.field select,.setting-row select,.field input{border:1px solid var(--line);border-radius:9px;background:var(--raised);color:var(--ink);padding:10px;min-height:44px;min-width:0;width:100%}.setting-row select{width:auto;max-width:155px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.button{min-height:44px;padding:11px 15px;border:1px solid transparent;border-radius:12px;background:var(--cta);color:var(--on-cta);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px}.button.full{width:100%;margin-top:10px;min-height:50px}.button.quiet{background:var(--raised);color:var(--ink);border-color:var(--line)}.button.danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}.button:disabled{background:var(--soft);color:var(--muted);border-color:var(--line)}.link-button{border:0;background:none;color:var(--ink);font-size:12px;font-weight:650;min-height:44px;text-decoration:underline;text-underline-offset:3px}.learn{width:100%;display:flex;align-items:center;gap:10px;padding:13px;margin-top:12px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:transparent;color:var(--ink);text-align:left}.learn strong{display:block;font-size:13px}.learn small{font-size:11px}.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:none;gap:4px;margin:0 10px 10px;padding:6px;border:1px solid var(--line);border-radius:19px;background:var(--raised);box-shadow:var(--nav-shadow)}.nav-button{height:54px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:650}.nav-button.active{background:var(--cta);color:var(--on-cta)}.nav-button .icon{width:20px;height:20px}.tabs{display:flex;gap:5px;padding:4px;border-radius:13px;background:var(--soft);border:1px solid var(--line);margin:14px 0}.tab{flex:1;min-height:42px;padding:7px 5px;border:0;border-radius:9px;background:none;color:var(--muted);font-size:11px;font-weight:650}.tab.active{background:var(--raised);color:var(--ink);box-shadow:0 1px 4px #0001}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat{background:var(--raised);border:1px solid var(--line);padding:15px 13px;border-radius:var(--radius)}.stat span{font-size:11px;color:var(--muted)}.stat strong{font-size:27px;font-variant-numeric:tabular-nums;letter-spacing:-1px;display:block;margin-top:7px}.note{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--muted);font-size:12px;line-height:1.55;margin:12px 0}.notice{background:var(--accent-soft);border-color:var(--accent-edge);color:var(--ink)}.empty{text-align:center;padding:27px 15px;background:var(--raised);border:1px dashed var(--border-strong);border-radius:var(--radius);margin:12px 0}.empty>.icon{width:28px;height:28px;margin:0 auto 10px;color:var(--muted)}.empty h3{margin-bottom:6px}.empty p{font-size:12px;color:var(--muted);margin:0}.league-strip{display:flex;gap:8px;overflow:auto;margin:12px -2px;padding:3px 2px 10px;scrollbar-width:thin}.league{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:var(--radius);min-width:84px;min-height:97px;padding:10px 8px;font-size:10px}.league.active{outline:2px solid var(--accent-edge);outline-offset:-2px;background:var(--accent-soft)}.league-hero{padding:24px 16px;text-align:center;border:1px solid var(--line);background:var(--raised);border-radius:var(--radius);position:relative;overflow:hidden}.league-hero:before{content:'';position:absolute;inset:10px;border:1px solid var(--line);border-radius:calc(var(--radius) - 3px);pointer-events:none}.league-hero h3{font-size:27px;margin:6px 0}.league-hero p{margin:0;color:var(--muted);font-size:12px}.league-meta{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:14px 0 0}.standing{display:grid;grid-template-columns:23px 36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 3px;border-bottom:1px solid var(--line);font-size:12px}.standing .rank-badge{width:34px;height:34px}.standing b{display:block;font-size:12px}.standing small{display:block;font-size:10px}.standing .position{color:var(--muted);font-size:11px}.standing button{padding:8px;border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:9px;min-height:44px;min-width:44px;font-size:11px}.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.balance{padding:17px;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius)}.balance>.icon{color:var(--muted);margin-bottom:8px}.balance strong{display:block;font-size:30px;letter-spacing:-1px}.balance span{font-size:11px;color:var(--muted)}.quest{display:grid;grid-template-columns:1fr auto;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}.quest strong{font-size:13px}.quest p{font-size:11px;color:var(--muted);margin:4px 0}.quest .reward{font-size:12px;font-weight:800;display:flex;align-items:center;gap:3px}.quest .reward .icon{width:15px}.quest-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}.progress{height:5px;background:var(--soft);border:1px solid var(--line);border-radius:9px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--accent-edge)}.ledger{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.ledger small{display:block;font-size:10px;margin-top:3px}.gain{color:var(--success)}.loss{color:var(--danger)}
/* Match layout: content never determines track size. */
.game-screen{position:absolute;inset:0;z-index:10;background:var(--surface);background-image:var(--texture);background-size:28px 28px;display:flex;flex-direction:column;padding:10px 14px 16px;overflow:auto}.match-top{display:flex;align-items:center;gap:8px;flex:none}.match-top>div{flex:1;text-align:center}.match-top b{font-size:13px;display:block}.match-top small{display:block;font-size:10px;margin-top:2px}.timer{font-variant-numeric:tabular-nums;font-size:10px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--raised);color:var(--muted);min-width:42px;text-align:center}.timer.urgent{color:var(--danger);background:var(--danger-soft);border-color:var(--danger)}.players{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 12px;flex:none}.player{padding:10px 8px;border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:7px;align-items:center;background:var(--raised)}.player.active{outline:2px solid var(--accent-edge);outline-offset:0}.player-glyph{width:29px;height:29px;display:grid;place-items:center;font-size:19px;font-weight:800;flex:none;border-radius:8px}.player-glyph.x{background:var(--x-soft);color:var(--x)}.player-glyph.o{background:var(--o-soft);color:var(--o)}.player>div{flex:1;min-width:0}.player b{display:block;font-size:11px}.player small{display:block;font-size:9px}.player strong{font-size:20px;font-variant-numeric:tabular-nums}.turn-hud{padding:11px 12px;background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:12px;min-height:59px;flex:none}.turn-hud b{display:block;font-size:13px}.turn-hud span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.board-wrap{width:min(100%,max(240px,calc(100dvh - 322px)));max-width:402px;aspect-ratio:1;position:relative;flex:none;margin:17px auto 0}.mega-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px}.mini{min-width:0;min-height:0;position:relative;border:1px solid var(--border-strong);border-radius:var(--mini-radius);background:var(--raised);overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.mini.active{outline:3px solid var(--accent-edge);outline-offset:1px;background:var(--accent-soft)}.mini.available{box-shadow:inset 0 0 0 2px var(--accent-edge)}.mini.inactive{background:var(--soft)}.mini.preview{outline:3px dashed var(--focus);outline-offset:-3px}.mini.win{outline:3px solid var(--success)}.cell{padding:0;min-width:0;min-height:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:transparent}.cell:nth-child(3n){border-right:0}.cell:nth-child(n+7){border-bottom:0}.cell:disabled{cursor:default}.cell:not(:disabled):hover{background:var(--raised)}.mark-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.mark-layer svg{width:68%;height:68%;display:block;fill:none;stroke-width:4.5;stroke-linecap:round}.mark-layer.x{color:var(--x)}.mark-layer.o{color:var(--o)}.claim{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;background:var(--soft);color:var(--muted)}.claim.x{background:var(--x-soft)}.claim.o{background:var(--o-soft)}.claim .mark-layer{inset:8%}.claim span{font-size:11px;font-weight:800}.board-note{font-size:11px;color:var(--muted);text-align:center;min-height:35px;margin:12px 0 8px}.match-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:auto;padding-top:10px}.match-controls .button{padding:9px 4px;font-size:11px}
/* Native dialogs keep focus and restore it; the page cannot be tapped underneath. */
dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:22px;width:min(420px,calc(100% - 20px));max-height:88dvh;padding:20px;box-shadow:0 24px 80px #0006;overflow:auto}dialog::backdrop{background:#08132199;backdrop-filter:blur(5px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.sheet-head h2{margin:0;font-size:25px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-card{background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:138px;text-align:left}.theme-card.active{outline:2px solid var(--accent-edge);outline-offset:0}.theme-card b{font-size:12px}.theme-card small{font-size:10px}.theme-preview{height:76px;width:100%;border-radius:8px;padding:12px;position:relative;display:flex;gap:8px;align-items:center;justify-content:center;background:#f7f9fc;color:#245ac7;border:1px solid #c4ceda}.theme-preview .sample-x{font-size:31px;font-weight:800}.theme-preview .sample-o{color:#b53155;font-size:32px;font-weight:700}.theme-preview.dark{background:#101924;color:#9bbdff;border-color:#475b70}.theme-preview.dark .sample-o{color:#ffa0b8}.theme-preview.paper{background:repeating-linear-gradient(#fffaf0,#fffaf0 16px,#c8baa5 17px);color:#2f5986;border-color:#baaa90}.theme-preview.paper .sample-o{color:#a83a4b}.theme-preview.neon{background:linear-gradient(145deg,#100d24,#282247);color:#74e3f7;border-color:#a18bbf}.theme-preview.neon .sample-o{color:#ff99d7}.theme-preview.neon span{text-shadow:0 0 10px currentColor}.switch{width:46px;height:28px;accent-color:var(--accent-edge);flex:none}.tutorial-step{display:grid;grid-template-columns:32px 1fr;gap:10px;margin:14px 0}.step-number{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800}.tutorial-step b{font-size:13px}.tutorial-step p{font-size:12px;color:var(--muted);margin:4px 0}.tutorial-map{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:78px;height:78px;margin-top:8px}.tutorial-map span{border:1px solid var(--line);border-radius:4px;background:var(--raised);display:grid;place-items:center;font-size:12px}.tutorial-map .hot{background:var(--accent);color:var(--on-accent);font-weight:800}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:11px 16px;border-radius:13px;color:var(--on-cta);background:var(--cta);font-size:12px;max-width:90%;box-shadow:0 5px 25px #0003;pointer-events:none;z-index:100;display:none}.toast.visible{display:block}.divider{height:1px;background:var(--line);margin:18px 0}.split{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:9px 0}.amount{font-variant-numeric:tabular-nums;font-weight:750}.theme-caption{margin-top:14px}
/* Material-specific design, not simply inversion. Geometry is unchanged. */
:root[data-theme="paper"] .app{border-radius:20px}:root[data-theme="paper"] .topbar{border-bottom:1px solid var(--line)}:root[data-theme="paper"] .hero h1{letter-spacing:-1.2px;font-size:39px}:root[data-theme="paper"] .mode.active{box-shadow:3px 3px 0 #765a2a30}:root[data-theme="paper"] .nav-button.active{border-radius:7px}:root[data-theme="paper"] .league-hero{background-image:repeating-linear-gradient(0deg,transparent,transparent 25px,#876d4c0e 26px)}
:root[data-theme="dark"] .hero h1 em{color:#d3eb9a}:root[data-theme="dark"] .league-hero{background-image:radial-gradient(ellipse at top,#32473755,transparent 70%)}:root[data-theme="neon"] .hero h1 em{color:#d8c4ff}:root[data-theme="neon"] .topbar{border-bottom:1px solid #685487}:root[data-theme="neon"] .league-hero{background-image:linear-gradient(120deg,#51214a50,#152d4550)}:root[data-theme="neon"] .mark-layer svg{filter:drop-shadow(0 0 2px currentColor)}:root[data-theme="neon"] .mini.active{box-shadow:0 0 11px #dbeb7233}:root[data-theme="neon"] .brand b{letter-spacing:1px;font-size:17px}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *:before, :root[data-motion="reduced"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:480px){body{padding:0}.app{height:100dvh;min-height:0;border:0;border-radius:0!important;max-width:100%}.topbar{padding-top:calc(10px + env(safe-area-inset-top));height:calc(68px + env(safe-area-inset-top))}.bottom-nav{margin-bottom:calc(8px + env(safe-area-inset-bottom))}.game-screen{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}dialog{max-height:88dvh}}
@media(max-width:350px){.topbar{padding-left:12px;padding-right:12px}.brand b{font-size:17px}.header-actions{gap:4px}#page{padding-left:13px;padding-right:13px}.hero h1{font-size:33px}.player{gap:4px;padding:8px 5px}.player-glyph{width:25px}.game-screen{padding-left:10px;padding-right:10px}.wallet-pill{padding:8px}}
@media(max-height:690px){.players{margin:9px 0}.player{padding:7px}.turn-hud{padding:7px 10px;min-height:49px}.board-wrap{margin-top:11px}.board-note{margin-top:6px;min-height:28px}.game-screen{overflow:auto}.match-controls{padding-top:5px}}


/* V3.2 UI continuity pass — restores the stronger V3.1 interaction shell while preserving V3.2 systems. */
:root{
 --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --hud:#171a1f;--on-hud:#f7f9fc;--hud-muted:#aeb5bd;--nav-glass:rgba(255,255,255,.93);
}
:root[data-theme="dark"]{--hud:#080d13;--on-hud:#edf4fb;--hud-muted:#9fb1c4;--nav-glass:rgba(26,39,54,.94)}
:root[data-theme="paper"]{--hud:#352f25;--on-hud:#fff8e8;--hud-muted:#d4c5ae;--nav-glass:rgba(255,250,240,.94)}
:root[data-theme="neon"]{--hud:#090617;--on-hud:#f0edff;--hud-muted:#b9addc;--nav-glass:rgba(28,23,56,.94)}

body{font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.eyebrow,.caption,.rank-summary small,.setup-title span,.setup-note,.match-top small,.timer,.player small,.turn-hud span,.settings-version{font-family:var(--mono)}

#page{padding-bottom:112px}
.bottom-nav{
 position:absolute;left:12px;right:12px;bottom:12px;z-index:35;margin:0;padding:6px;height:72px;
 grid-template-columns:repeat(5,minmax(0,1fr));border-radius:22px;background:var(--nav-glass);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--nav-shadow),0 10px 28px #17212c14;
}
.nav-button{height:58px;border-radius:16px}.nav-button.active{box-shadow:none}

.home-hero{padding-bottom:8px}.home-hero h1{font-size:34px;line-height:1.02;margin-bottom:8px}.home-hero p{font-size:13px;line-height:1.45;margin-bottom:0}
.mode-list{gap:8px}.mode{min-height:70px;padding:11px 12px;border-radius:16px}.mode-symbol{width:42px;height:42px;border-radius:12px}.mode.active{box-shadow:0 0 0 1px var(--ink);border-color:var(--ink)}
.mode-copy strong{font-size:15px}.mode-copy small{font-size:11px}.mode>.icon{width:18px;height:18px}
.old-setup{padding:11px 12px;border-radius:16px;background:var(--soft);margin-top:9px}
.setup-block{display:grid;grid-template-columns:minmax(96px,.72fr) minmax(0,1.7fr);gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.setup-block:last-of-type{border-bottom:0}.setup-title b{display:block;font-size:12px}.setup-title span{display:block;font-size:8px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.setup-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.setup-chips.two .setup-chip{flex:1}.setup-chips.three .setup-chip{flex:1}
.setup-chip{border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:999px;padding:5px 8px;min-height:30px;font:600 8px var(--mono);white-space:nowrap}
.setup-chip.active{background:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.setup-note{font-size:9px;color:var(--muted);text-align:center;margin:7px 0 0;line-height:1.4}
.learn{border-style:solid;border-radius:14px;background:var(--raised);padding:10px 12px;margin-top:9px}.learn>.icon:first-child{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--soft)}.learn>.icon:last-child{margin-left:auto;width:17px}
.home-quests{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 0}.home-quests>span{flex:1}.home-quests b{display:block;font-size:12px}.home-quests small{display:block;color:var(--muted);font-size:10px;margin-top:2px}

.sheet-backdrop{position:absolute;inset:0;z-index:70;background:#08132166;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.bottom-sheet{position:absolute;left:0;right:0;bottom:0;z-index:80;max-height:84%;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px #0003}
.grabber{width:44px;height:4px;background:var(--line);border-radius:999px;margin:0 auto 13px}.sheet-head{position:sticky;top:-10px;z-index:3;background:var(--surface);padding:4px 0 9px;margin-bottom:3px}.sheet-head h2{font-size:24px}.sheet-head .icon-button{width:38px;height:38px;border-radius:11px}
.setting-group{margin-top:13px}.setting-group h4{margin:0 0 4px;font:600 9px var(--mono);letter-spacing:.12em;color:var(--muted)}
.setting-row{min-height:46px;padding:7px 0}.setting-row label{flex:1}.setting-row label,.setting-row>label{font-size:12px}.setting-row small{font-size:9px}.setting-row select{min-height:32px;padding:4px 7px;font-size:10px}
.switch{-webkit-appearance:none;appearance:none;width:46px;height:27px;position:relative;flex:none;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--raised);padding:0;outline-offset:3px;transition:background .16s,border-color .16s}
.switch:before{content:'';position:absolute;width:19px;height:19px;left:3px;top:2.5px;border-radius:50%;background:var(--ink);transition:transform .16s,background .16s}
.switch:checked{background:var(--accent);border-color:var(--accent-edge)}.switch:checked:before{transform:translateX(20px);background:var(--on-accent)}
.theme-grid{margin-top:6px}.theme-card{min-height:132px}.theme-card.active{outline:2px solid var(--accent-edge)}

.tutorial-cards{display:grid;gap:9px}.tutorial-card{display:grid;grid-template-columns:38px 1fr;gap:10px;border:1px solid var(--line);background:var(--raised);border-radius:14px;padding:10px}.tutorial-card .step-number{width:38px;height:38px;border-radius:12px;background:var(--cta);color:var(--on-cta);font:600 11px var(--mono)}
.tutorial-card b{font-size:13px}.tutorial-card p{font-size:11px;color:var(--muted);line-height:1.4;margin:3px 0 0}.tutorial-flow{display:flex;align-items:center;gap:8px;margin-top:8px}.tutorial-flow>.icon{width:18px;color:var(--accent-edge)}
.tutorial-map.old-map{width:58px;height:58px;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px}.tutorial-map.old-map span{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;font:600 8px var(--mono)}.tutorial-map.old-map span:nth-child(3n){border-right:0}.tutorial-map.old-map span:nth-child(n+7){border-bottom:0}

.game-screen{overflow:hidden;padding:0 14px 13px;display:flex;flex-direction:column;z-index:50}.match-top{height:58px;padding:10px 0 6px;gap:7px}.match-top .icon-button{width:36px;height:36px;border-radius:11px}.match-top>div b{font-size:13px}.match-top>div small{font-size:8px;text-transform:uppercase;letter-spacing:.04em}.timer{height:36px;display:grid;place-items:center;padding:0 6px;font-size:9px;border-radius:10px;min-width:40px}
.players{margin:8px 0 6px;gap:7px}.player{padding:6px 8px;border-radius:14px;min-height:52px;box-shadow:2px 2px 0 #0000000d}.player.active{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}#playerX.active{background:var(--x-soft)}#playerO.active{background:var(--o-soft)}.player-glyph{width:31px;height:31px;border-radius:9px;background:var(--raised)}.player b{font-size:11px}.player small{font-size:8px}.player strong{font-size:22px}
.turn-hud{min-height:43px;margin:4px 0 7px;padding:7px 9px;display:flex;align-items:center;gap:8px;background:var(--hud);color:var(--on-hud);border-color:var(--hud);border-radius:13px}.turn-hud .turn-icon{width:27px;height:27px;display:grid;place-items:center;flex:none;border-radius:8px;background:var(--accent);color:var(--on-accent)}.turn-hud .turn-icon .icon{width:15px;height:15px}.turn-hud>div{min-width:0}.turn-hud b{font-size:11px}.turn-hud span:not(.turn-icon){font:500 8px var(--mono);color:var(--hud-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.board-wrap{width:min(100%,max(225px,calc(100dvh - 315px)));max-width:390px;margin:0 auto;aspect-ratio:1}.mega-board{gap:6px}.mini{border-radius:12px;background:var(--raised)}.mini.active{outline:3px solid var(--accent);outline-offset:1px;background:var(--raised);box-shadow:0 0 0 1px var(--accent-edge)}.mini.available{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-edge) 60%,transparent)}.mini.inactive{opacity:.42;background:var(--raised)}.mini.preview{outline:3px dashed var(--focus);outline-offset:-3px;opacity:1}.mini.win{opacity:1;outline:4px solid var(--success)}
.board-note{min-height:31px;margin:7px 2px 5px;font-size:10px}.match-controls{grid-template-columns:68px 1fr 68px;gap:8px;margin-top:auto;padding-top:5px}.match-controls .button{height:48px;min-height:48px;padding:5px 3px;border-radius:14px;display:flex;flex-direction:column;gap:2px;font-size:9px}.match-controls .button:nth-child(2){font-size:13px;flex-direction:row;background:var(--soft);font-weight:700}.match-control-icon{display:grid;place-items:center}.match-control-icon .icon{width:17px;height:17px}.danger-text{color:var(--danger)!important}

:root[data-theme="paper"] .bottom-nav,:root[data-theme="paper"] .bottom-sheet{border-radius:14px 14px 0 0}:root[data-theme="paper"] .bottom-nav{border-radius:14px}:root[data-theme="paper"] .mode,:root[data-theme="paper"] .old-setup,:root[data-theme="paper"] .tutorial-card{border-radius:9px}
:root[data-theme="neon"] .bottom-nav{box-shadow:0 0 20px #a675ff24,0 10px 28px #0007}:root[data-theme="neon"] .turn-hud{box-shadow:0 0 16px #dbeb7220}:root[data-theme="neon"] .player.active{box-shadow:0 0 0 2px var(--accent),0 0 13px #dbeb7230}

@media(max-width:480px){#page{padding-bottom:calc(104px + env(safe-area-inset-bottom))}.bottom-nav{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));margin:0}.bottom-sheet{max-height:86dvh}.home-hero h1{font-size:31px}}
@media(max-width:350px){.setup-block{grid-template-columns:1fr}.setup-chips{justify-content:flex-start}.setup-chips.two .setup-chip,.setup-chips.three .setup-chip{flex:initial}.board-wrap{width:min(100%,max(210px,calc(100dvh - 306px)))}}
@media(max-height:690px){.home-hero{padding-top:2px}.home-hero h1{font-size:27px}.rank-summary{margin-top:8px}.mode{min-height:62px;padding:8px 10px}.mode-symbol{width:36px;height:36px}.match-top{height:50px}.players{margin:4px 0}.player{min-height:45px;padding:4px 7px}.turn-hud{min-height:39px;margin:2px 0 5px}.board-wrap{width:min(100%,max(205px,calc(100dvh - 278px)))}.board-note{margin:4px 0;min-height:26px}.match-controls .button{height:42px;min-height:42px}}

/* V3.2.2 interaction restoration */
.cell:not(:disabled){transition:background .12s ease,box-shadow .12s ease,transform .12s ease}
.cell.cell-hover{
  background:color-mix(in srgb,var(--accent) 18%,var(--raised));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-edge) 78%,transparent);
  z-index:3;
}
.cell.cell-hover:before{
  content:"";position:absolute;inset:4px;border:1.5px solid color-mix(in srgb,var(--accent-edge) 70%,transparent);
  border-radius:6px;pointer-events:none
}
.cell.cell-hover:after{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(16px,5.4vw,25px);font-weight:700;opacity:.34;line-height:1
}
.cell.cell-hover.hover-x:after{content:"X";color:var(--x)}
.cell.cell-hover.hover-o:after{content:"O";color:var(--o)}
@media(hover:hover){.cell.cell-hover{transform:scale(.975)}}

.route-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:12}
.route-path{fill:none;stroke:var(--accent-edge);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:route-draw .52s ease forwards;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-edge) 38%,transparent))}
.route-start,.route-end{fill:var(--accent);stroke:var(--surface);stroke-width:2;animation:route-dot .22s ease both}
.route-end{animation-delay:.2s}
.mini.route-target{animation:route-target-pulse .55s ease}
.mini.free-route-pulse{animation:free-route-pulse .5s ease}
@keyframes route-draw{from{stroke-dashoffset:var(--route-length);opacity:.22}to{stroke-dashoffset:0;opacity:1}}
@keyframes route-dot{from{opacity:0;transform:scale(.4);transform-origin:center}to{opacity:1;transform:scale(1);transform-origin:center}}
@keyframes route-target-pulse{0%,100%{box-shadow:0 0 0 0 transparent}45%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent-edge) 24%,transparent)}}
@keyframes free-route-pulse{0%,100%{box-shadow:inset 0 0 0 2px var(--accent-edge)}50%{box-shadow:inset 0 0 0 3px var(--accent-edge),0 0 0 4px color-mix(in srgb,var(--accent-edge) 16%,transparent)}}
:root[data-motion="reduced"] .route-path,:root[data-motion="reduced"] .route-start,:root[data-motion="reduced"] .route-end{animation-duration:.01ms!important}
:root[data-motion="reduced"] .mini.route-target,:root[data-motion="reduced"] .mini.free-route-pulse{animation:none!important}

@media(max-width:365px){
 .bottom-nav{gap:2px;padding:5px}
 .nav-button{font-size:8px}
 .nav-button .icon{width:18px;height:18px}
}


/* V3.2.3 — exact V3.1 post-move route treatment from the supplied reference. */
.route-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;overflow:visible}
.route-overlay line{
 stroke:var(--accent);
 stroke-width:3;
 stroke-linecap:round;
 filter:drop-shadow(0 0 4px var(--accent));
 animation:routeFade .65s ease forwards
}
.route-overlay circle{
 fill:var(--accent);
 animation:routeFade .65s ease forwards
}
@keyframes routeFade{0%{opacity:0}18%{opacity:1}75%{opacity:1}100%{opacity:0}}
.mini.route-target{animation:routeTargetExact .45s ease}
@keyframes routeTargetExact{50%{box-shadow:0 0 0 4px var(--accent)}}
/* The old game had no persistent last-move dot; the route line is the movement cue. */
.cell.last:after{content:none!important}


/* V3.2.4 — Friends page restored to the supplied V3.1 layout. */
.panel-head{padding:20px 0 12px}
.panel-head h2{font-size:28px;letter-spacing:-1px;margin:5px 0 4px}
.panel-head p{font-size:12px;color:var(--muted);margin:0}
.friend-search{display:flex;gap:8px}
.friend-search-wrap{flex:1;position:relative}
.friend-search-wrap>.icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.friend-search-wrap input{width:100%;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--raised);color:var(--ink);padding:0 12px 0 36px;outline:none}
.friend-search-wrap input:focus{border-color:var(--ink)}
.friend-add{height:42px;border:1px solid var(--line);border-radius:13px;background:var(--raised);color:var(--ink);padding:0 12px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:650}
.friend-add .icon{width:16px;height:16px}
.friend-code-card{border:1px solid var(--line);background:var(--raised);border-radius:16px;padding:12px;margin-top:12px;display:flex;align-items:center;gap:10px}
.friend-code-card>div:first-child{min-width:0}
.friend-code-card span{display:block;font:500 9px var(--mono);color:var(--muted)}
.friend-code{font:600 14px var(--mono);letter-spacing:.05em;margin-top:2px}
.copy-friend{margin-left:auto;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;flex:none}
.copy-friend .icon{width:16px;height:16px}
.friends-section-title{font-size:13px;font-weight:700;margin:18px 0 8px;display:flex;align-items:center;justify-content:space-between}
.friends-section-title small{font:500 9px var(--mono);color:var(--muted)}
.friend-empty{border:1px dashed var(--line);border-radius:18px;padding:24px 18px;text-align:center;margin-top:14px;background:color-mix(in srgb,var(--raised) 58%,transparent)}
.friend-empty-icon{width:52px;height:52px;border-radius:17px;background:var(--soft);display:grid;place-items:center;margin:0 auto 10px}
.friend-empty-icon .icon{width:24px;height:24px}
.friend-empty b{display:block;font-size:14px}
.friend-empty p{font-size:11px;color:var(--muted);margin:5px auto 0;max-width:260px;line-height:1.45}
:root[data-theme="paper"] .friend-code-card,:root[data-theme="paper"] .friend-empty,:root[data-theme="paper"] .friend-search-wrap input,:root[data-theme="paper"] .friend-add{border-radius:9px}
:root[data-theme="neon"] .friend-code-card,:root[data-theme="neon"] .friend-empty{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 45%,transparent)}


/* ==========================================================================
   V3.2.1 FINAL APPEARANCE PACKS
   Ported from the user's Figma theme export. Component structure and game UX
   remain V3.2; only visual contracts change.
   ========================================================================== */

/* Shared theme contract */
:root[data-theme]{
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --display:var(--sans);
  --soft-ui:var(--soft);
  --soft-panel:var(--soft);
  --empty-bg:color-mix(in srgb,var(--raised) 58%,transparent);
  --cell-line:var(--line);
  --mini-border:var(--line);
  --settings-line:var(--line);
  --route-hover:var(--accent-soft);
  --route-press:var(--accent-soft);
  --route-soft:var(--accent-soft);
  --draw-soft:var(--soft);
  --brand-mark-bg:var(--cta);
  --panel-dark:#171a1f;
  --panel-dark-text:#fff;
  --grabber:var(--line);
  --config-line:var(--line);
  --route-edge:var(--accent-edge);
  --danger-line:var(--danger);
  --hud:var(--panel-dark);
  --on-hud:var(--panel-dark-text);
  --hud-muted:#aeb5bd;
  --nav-glass:rgba(255,255,255,.94);
}
:root[data-theme] body{font-family:var(--sans)}
:root[data-theme] .eyebrow,
:root[data-theme] .caption,
:root[data-theme] .rank-summary small,
:root[data-theme] .setup-title span,
:root[data-theme] .setup-note,
:root[data-theme] .match-top small,
:root[data-theme] .timer,
:root[data-theme] .player small,
:root[data-theme] .turn-hud span,
:root[data-theme] .settings-version,
:root[data-theme] .friend-code,
:root[data-theme] .friend-code-card span,
:root[data-theme] .friends-section-title small{font-family:var(--mono)}
:root[data-theme] .home-hero h1,
:root[data-theme] .panel-head h2,
:root[data-theme] .sheet-head h2,
:root[data-theme] .league-hero h3,
:root[data-theme] .stat strong,
:root[data-theme] .brand b{font-family:var(--display)}
:root[data-theme] .brand>span{background:var(--brand-mark-bg)}
:root[data-theme] .mode-symbol,
:root[data-theme] .learn>.icon:first-child,
:root[data-theme] .friend-empty-icon{background:var(--soft-ui)}
:root[data-theme] .old-setup{background:var(--soft-panel)}
:root[data-theme] .friend-empty{background:var(--empty-bg)}
:root[data-theme] .setup-block{border-color:var(--config-line)}
:root[data-theme] .bottom-nav{background:var(--nav-glass)}
:root[data-theme] .bottom-sheet{background:var(--surface)}
:root[data-theme] .grabber{background:var(--grabber)}
:root[data-theme] .turn-hud{background:var(--panel-dark);color:var(--panel-dark-text);border-color:var(--panel-dark)}
:root[data-theme] .turn-hud span:not(.turn-icon){color:var(--hud-muted)}
:root[data-theme] .mini{border-color:var(--mini-border)}
:root[data-theme] .cell{border-color:var(--cell-line)}
:root[data-theme] .cell.cell-hover{background:var(--route-hover)}
:root[data-theme] .claim.draw{background:var(--draw-soft)}
:root[data-theme] button:focus-visible,
:root[data-theme] input:focus-visible,
:root[data-theme] select:focus-visible{outline-color:var(--focus)}
:root[data-theme] .route-overlay line{stroke:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}
:root[data-theme] .route-overlay circle{fill:var(--accent)}
:root[data-theme] .theme-preview .sample-x{font-family:var(--display)}
:root[data-theme] .theme-preview .sample-o{font-family:var(--display)}

/* ---------------- Vector Light ---------------- */
:root[data-theme="vector"]{
  color-scheme:light;
  --canvas:#e9ecef;--surface:#f8f9fb;--raised:#ffffff;--soft:#f0f2f5;--ink:#15181c;--muted:#747b84;--line:#cdd2d8;--border-strong:#bfc5cc;
  --cta:#15181c;--on-cta:#ffffff;--accent:#c6ff42;--on-accent:#27310a;--accent-soft:#d9e9a6;--accent-edge:#9dbd39;--focus:#246bfd;
  --x:#246bfd;--x-soft:#dfe9ff;--o:#f45669;--o-soft:#ffe1e6;--danger:#a82424;--danger-soft:#ffe4e4;--success:#81c784;
  --badge-bg:#e9edda;--badge-ink:#4b581c;--radius:16px;--mini-radius:16px;--shadow:0 18px 50px rgba(21,24,28,.14);--nav-shadow:0 8px 24px rgba(21,24,28,.09);
  --soft-ui:#eef1f4;--soft-panel:#f0f2f5;--empty-bg:rgba(255,255,255,.5);--cell-line:#e0e3e6;--mini-border:#bfc5cc;--settings-line:#dde1e5;
  --route-hover:#f2f6e5;--route-press:#eaf4cb;--route-soft:#d9e9a6;--draw-soft:#e3e6e9;--brand-mark-bg:#15181c;
  --panel-dark:#171a1f;--panel-dark-text:#ffffff;--grabber:#c7ccd2;--config-line:#d7dbe0;--route-edge:#9dbd39;--danger-line:#f29a9a;
  --hud:#171a1f;--on-hud:#ffffff;--hud-muted:#aeb5bd;--nav-glass:rgba(255,255,255,.94);
}
:root[data-theme="vector"] body{background:#e9ecef}
:root[data-theme="vector"] .app{border-color:#bfc5cc;box-shadow:var(--shadow)}
:root[data-theme="vector"] .theme-preview.vector{background:#f8f9fb;color:#246bfd;border-color:#cdd2d8}
:root[data-theme="vector"] .theme-preview.vector .sample-o{color:#f45669}

/* ---------------- Midnight Club ---------------- */
:root[data-theme="midnight"]{
  color-scheme:dark;
  --canvas:#080b10;--surface:#101720;--raised:#18212c;--soft:#141c26;--ink:#d4dce5;--muted:#8693a1;--line:#27323f;--border-strong:#364554;
  --cta:#b9f03c;--on-cta:#121a08;--accent:#b9f03c;--on-accent:#121a08;--accent-soft:#4a5e22;--accent-edge:#7fa02a;--focus:#6f9dff;
  --x:#6f9dff;--x-soft:#172a4a;--o:#ff7a98;--o-soft:#41202c;--danger:#ff9aae;--danger-soft:#3a1b22;--success:#6fd08a;
  --badge-bg:#31403e;--badge-ink:#e1dba8;--radius:16px;--mini-radius:16px;--shadow:0 24px 60px rgba(0,0,0,.55);--nav-shadow:0 10px 30px rgba(0,0,0,.45);
  --soft-ui:#222d3a;--soft-panel:#141c26;--empty-bg:rgba(24,33,44,.6);--cell-line:#27323f;--mini-border:#364554;--settings-line:#232e3b;
  --route-hover:#232d1c;--route-press:#2f3d1c;--route-soft:#4a5e22;--draw-soft:#232d38;--brand-mark-bg:#070a0e;
  --panel-dark:#0a0f15;--panel-dark-text:#e3e9ef;--grabber:#3a4757;--config-line:#27323f;--route-edge:#7fa02a;--danger-line:#7a3342;
  --hud:#0a0f15;--on-hud:#e3e9ef;--hud-muted:#8693a1;--nav-glass:rgba(22,30,41,.95);
}
:root[data-theme="midnight"] body{background:radial-gradient(900px 520px at 50% -8%,#131d2a,#080b10 70%)}
:root[data-theme="midnight"] .app{border-color:#243040;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}
:root[data-theme="midnight"] :is(.mode,.rank-summary,.stat,.player,.standing,.friend-code-card,.tutorial-card,.learn,.timer,.match-controls .button,.icon-button,.mini,.friend-empty){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
:root[data-theme="midnight"] .old-setup{background:var(--soft-panel);border-color:#212b37}
:root[data-theme="midnight"] .bottom-nav{box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
:root[data-theme="midnight"] .mode.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
:root[data-theme="midnight"] .player.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
:root[data-theme="midnight"] .mini.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(185,240,60,.55)}
:root[data-theme="midnight"] .sheet-backdrop{background:rgba(4,7,11,.60)}
:root[data-theme="midnight"] .bottom-sheet{box-shadow:0 -20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
:root[data-theme="midnight"] .switch:before{background:#aab6c3}
:root[data-theme="midnight"] .switch:checked:before{background:var(--on-accent)}
:root[data-theme="midnight"] .theme-preview.midnight{background:#101720;color:#6f9dff;border-color:#27323f}
:root[data-theme="midnight"] .theme-preview.midnight .sample-o{color:#ff7a98}

/* ---------------- Paper Club ---------------- */
:root[data-theme="paperclub"]{
  color-scheme:light;
  --canvas:#b9ab8f;--surface:#f6efdc;--raised:#fffbee;--soft:#f0e8cf;--ink:#27221b;--muted:#6a5e4c;--line:#9a8b72;--border-strong:#27221b;
  --cta:#27221b;--on-cta:#fffbee;--accent:#ffd23f;--on-accent:#2a1f08;--accent-soft:#ffe27a;--accent-edge:#b58d00;--focus:#2a4f9b;
  --x:#2a4f9b;--x-soft:#e4ecf6;--o:#c23a2e;--o-soft:#f8e1d9;--danger:#a32a1e;--danger-soft:#f8dbd2;--success:#4f8a45;
  --badge-bg:#ead6aa;--badge-ink:#6f4d14;--radius:12px;--mini-radius:5px;--shadow:7px 9px 0 rgba(39,34,27,.18);--nav-shadow:3px 4px 0 rgba(39,34,27,.22);
  --sans:"Patrick Hand","Segoe Print",cursive;--mono:"Patrick Hand","Segoe Print",cursive;--display:"Caveat","Patrick Hand",cursive;
  --soft-ui:#ece3c6;--soft-panel:#f0e8cf;--empty-bg:rgba(255,251,238,.55);--cell-line:#b9c4d6;--mini-border:#27221b;--settings-line:#cfc3a6;
  --route-hover:#fff0b0;--route-press:#ffe483;--route-soft:#ffe27a;--draw-soft:#ebe4cf;--brand-mark-bg:#27221b;
  --panel-dark:#2f3a52;--panel-dark-text:#f6efdc;--grabber:#b3a387;--config-line:#cfc3a6;--route-edge:#b58d00;--danger-line:#c9705f;
  --hud:#2f3a52;--on-hud:#f6efdc;--hud-muted:#c8cfe0;--nav-glass:rgba(255,251,238,.98);
  --paper-rule:rgba(70,110,170,.2);
  --paper-ruled:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--paper-rule) 31px,var(--paper-rule) 32px);
  --paper-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .08 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
:root[data-theme="paperclub"] body{background-color:var(--canvas);background-image:var(--paper-grain);font-size:15px}
:root[data-theme="paperclub"] .app,
:root[data-theme="paperclub"] .bottom-sheet{background-color:var(--surface);background-image:var(--paper-grain),var(--paper-ruled);background-position:0 18px}
:root[data-theme="paperclub"] .game-screen{background-color:var(--surface);background-image:var(--paper-grain)}
:root[data-theme="paperclub"] .app{border:2px solid var(--ink);border-radius:10px 16px 12px 14px;box-shadow:var(--shadow)}
:root[data-theme="paperclub"] .app::before{
 content:"";position:absolute;top:0;bottom:0;left:0;width:44px;z-index:34;pointer-events:none;
 background:linear-gradient(90deg,transparent 33px,rgba(194,58,46,.45) 33px,rgba(194,58,46,.45) 34.5px,transparent 34.5px),linear-gradient(90deg,rgba(39,34,27,.09),transparent 12px);
 background-size:100% 100%;background-repeat:no-repeat
}
:root[data-theme="paperclub"] .app:has(.game-screen:not([hidden]))::before{display:none}
:root[data-theme="paperclub"] :is(.topbar,#page){padding-left:50px}
:root[data-theme="paperclub"] .bottom-nav{left:52px;border:2px solid var(--ink);border-radius:14px 10px 14px 11px;box-shadow:3px 4px 0 rgba(39,34,27,.22);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme="paperclub"] .bottom-sheet{padding-left:50px;border-top:2px solid var(--ink);border-radius:14px 14px 0 0}
:root[data-theme="paperclub"] .sheet-backdrop{background:rgba(39,34,27,.42)}
:root[data-theme="paperclub"] :is(.brand>span,.icon-button,.rank-summary,.mode,.mode-symbol,.old-setup,.button,.friend-search-wrap input,.friend-add,.friend-empty,.friend-empty-icon,.friend-code-card,.copy-friend,.league-hero,.standing,.stat,.timer,.player,.player-glyph,.turn-hud,.turn-icon,.match-controls .button,.step-number,.tutorial-card,.theme-card,.bottom-sheet,.toast){
 border-radius:255px 14px 225px 12px/14px 225px 12px 255px
}
:root[data-theme="paperclub"] :is(.setup-chip,.nav-button){border-radius:999px 14px 999px 12px/14px 999px 12px 999px}
:root[data-theme="paperclub"] .nav-button{border-radius:12px 8px 12px 9px}
:root[data-theme="paperclub"] :is(.mini,.claim){border-radius:4px 6px 4px 5px}
:root[data-theme="paperclub"] .progress{border-radius:3px}
:root[data-theme="paperclub"] .switch{border-radius:10px 4px 10px 5px}
:root[data-theme="paperclub"] .switch:before{border-radius:50% 40% 50% 45%;background:var(--ink)}
:root[data-theme="paperclub"] :is(.mode,.rank-summary,.stat,.player,.standing,.friend-code-card,.tutorial-card,.old-setup,.learn,.timer,.match-controls .button,.friend-empty){
 border-color:var(--ink);border-width:1.5px;box-shadow:2px 3px 0 rgba(39,34,27,.2)
}
:root[data-theme="paperclub"] .button.full{box-shadow:3px 4px 0 rgba(39,34,27,.35);letter-spacing:.02em}
:root[data-theme="paperclub"] .button.full:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(39,34,27,.35)}
:root[data-theme="paperclub"] .mode.active{box-shadow:0 0 0 1px var(--ink),4px 5px 0 rgba(39,34,27,.22)}
:root[data-theme="paperclub"] .mode.active .mode-copy strong{background:linear-gradient(transparent 52%,rgba(255,210,63,.75) 52%,rgba(255,210,63,.75) 92%,transparent 92%);display:inline-block;padding:0 3px;margin-left:-3px}
:root[data-theme="paperclub"] .player.active{box-shadow:0 0 0 2px var(--ink),3px 4px 0 rgba(39,34,27,.22)}
:root[data-theme="paperclub"] .mini{border:2px solid var(--ink);background:var(--raised)}
:root[data-theme="paperclub"] .mini.active{box-shadow:0 0 0 4px var(--accent),3px 4px 0 3px rgba(39,34,27,.2)}
:root[data-theme="paperclub"] .mini.inactive{opacity:.5}
:root[data-theme="paperclub"] .friend-empty{border:2px dashed var(--line);box-shadow:none}
:root[data-theme="paperclub"] .home-hero h1{font-size:42px;line-height:.92;letter-spacing:0;font-weight:700;max-width:340px;transform:rotate(-1.2deg);transform-origin:left}
:root[data-theme="paperclub"] .panel-head h2{font-size:36px;letter-spacing:0;font-weight:700}
:root[data-theme="paperclub"] .sheet-head h2{font-size:32px;letter-spacing:0;font-weight:700}
:root[data-theme="paperclub"] .league-hero h3{font-size:32px;letter-spacing:0;font-weight:700}
:root[data-theme="paperclub"] .brand b{font-size:26px;font-weight:700;letter-spacing:0}
:root[data-theme="paperclub"] .stat strong{font-family:var(--display);font-size:27px;letter-spacing:0}
:root[data-theme="paperclub"] .section-heading{font-family:var(--display);font-size:24px;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:1px;margin-bottom:10px}
:root[data-theme="paperclub"] .eyebrow{color:var(--o);letter-spacing:.06em;font-size:12px}
:root[data-theme="paperclub"] .home-hero p,
:root[data-theme="paperclub"] .panel-head p{font-size:15px}
:root[data-theme="paperclub"] .setup-chip{border:1.5px solid var(--ink);font-size:12px}
:root[data-theme="paperclub"] .setup-chip.active{box-shadow:1px 2px 0 rgba(39,34,27,.35)}
:root[data-theme="paperclub"] .mark-layer svg,
:root[data-theme="paperclub"] .claim svg,
:root[data-theme="paperclub"] .brand>span svg{filter:url(#wobble)}
:root[data-theme="paperclub"] .switch:checked{border-color:var(--ink)}
:root[data-theme="paperclub"] .route-overlay line{stroke:#ffb400;filter:drop-shadow(0 0 4px #ffb400)}
:root[data-theme="paperclub"] .setup-title span,
:root[data-theme="paperclub"] .player small,
:root[data-theme="paperclub"] .match-top small,
:root[data-theme="paperclub"] .turn-hud span,
:root[data-theme="paperclub"] .friend-code-card span{font-size:11px}
:root[data-theme="paperclub"] .timer{font-size:13px}
:root[data-theme="paperclub"] .mode-copy strong{font-size:18px}
:root[data-theme="paperclub"] .mode-copy small{font-size:13px}
:root[data-theme="paperclub"] .setup-title b{font-size:14px}
:root[data-theme="paperclub"] .player b{font-size:14px}
:root[data-theme="paperclub"] .setting-row label{font-size:14px}
:root[data-theme="paperclub"] .tutorial-card p{font-size:13px}
:root[data-theme="paperclub"] .tutorial-card b{font-size:16px}
:root[data-theme="paperclub"] .friend-empty p{font-size:13px}
:root[data-theme="paperclub"] .friend-empty b{font-size:16px}
:root[data-theme="paperclub"] .board-note{font-size:13px}
:root[data-theme="paperclub"] .match-controls .button{font-size:13px}
:root[data-theme="paperclub"] .nav-button{font-size:12px}
:root[data-theme="paperclub"] .standing b{font-size:15px}
:root[data-theme="paperclub"] .rank-summary b{font-size:16px}
:root[data-theme="paperclub"] .match-top>div b{font-size:15px}
:root[data-theme="paperclub"] .learn strong{font-size:14px}
:root[data-theme="paperclub"] .learn small{font-size:12px}
:root[data-theme="paperclub"] .note{font-size:13px}
:root[data-theme="paperclub"] .button.full{font-size:19px}
:root[data-theme="paperclub"] .setting-row select{font-size:13px}
:root[data-theme="paperclub"] .toast{font-size:13px}
:root[data-theme="paperclub"] .friend-add{font-size:13px}
@media(max-width:365px){
 :root[data-theme="paperclub"] .app::before{display:none}
 :root[data-theme="paperclub"] :is(.topbar,#page,.bottom-sheet){padding-left:14px}
 :root[data-theme="paperclub"] .bottom-nav{left:8px}
}

/* ---------------- After Hours ---------------- */
:root[data-theme="afterhours"]{
  color-scheme:dark;
  --canvas:#07030f;--surface:#0f0722;--raised:#190d38;--soft:#140a2e;--ink:#f1eaff;--muted:#a79bd3;--line:#46308c;--border-strong:#5a3fb0;
  --cta:#ffd83d;--on-cta:#1a1200;--accent:#ffd83d;--on-accent:#1a1200;--accent-soft:#6b5a1c;--accent-edge:#b8961a;--focus:#2cf2ff;
  --x:#2cf2ff;--x-soft:#0c2a4d;--o:#ff4fb6;--o-soft:#46103f;--danger:#ff8fb3;--danger-soft:#4a1230;--success:#4dffa8;
  --badge-bg:#443157;--badge-ink:#e9c6ff;--radius:3px;--mini-radius:2px;--shadow:0 0 0 1px #1d0f45,0 0 36px rgba(255,79,182,.14),0 0 60px rgba(44,242,255,.08),0 24px 60px rgba(0,0,0,.6);--nav-shadow:0 0 22px rgba(255,79,182,.1),3px 3px 0 #2a1566;
  --sans:"Chakra Petch",system-ui,sans-serif;--mono:"Share Tech Mono",monospace;--display:"Orbitron",system-ui,sans-serif;
  --soft-ui:#26164f;--soft-panel:#140a2e;--empty-bg:rgba(25,13,56,.6);--cell-line:#34226f;--mini-border:#5a3fb0;--settings-line:#2d1c63;
  --route-hover:#2d2447;--route-press:#3d3140;--route-soft:#6b5a1c;--draw-soft:#20134a;--brand-mark-bg:#07030f;
  --panel-dark:#080416;--panel-dark-text:#f4efff;--grabber:#4b3597;--config-line:#2d1c63;--route-edge:#b8961a;--danger-line:#b0386f;
  --hud:#080416;--on-hud:#f4efff;--hud-muted:#a79bd3;--nav-glass:rgba(17,9,38,.96);
}
:root[data-theme="afterhours"] body{
 background-color:var(--canvas);
 background-image:linear-gradient(rgba(44,242,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,182,.04) 1px,transparent 1px),linear-gradient(to bottom,#07030f 40%,#1b0b3d 100%);
 background-size:28px 28px,28px 28px,100% 100%;
}
:root[data-theme="afterhours"] .app{border:2px solid #5b3fc0;border-radius:18px;box-shadow:var(--shadow)}
:root[data-theme="afterhours"] .app::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px)}
:root[data-theme="afterhours"] :is(.brand>span,.icon-button,.rank-summary,.mode,.mode-symbol,.old-setup,.setup-chip,.button,.bottom-nav,.nav-button,.friend-search-wrap input,.friend-add,.friend-empty,.friend-empty-icon,.friend-code-card,.copy-friend,.league-hero,.standing,.stat,.timer,.player,.player-glyph,.turn-hud,.turn-icon,.match-controls .button,.step-number,.tutorial-card,.tutorial-map,.theme-card,.bottom-sheet,.setting-row select,.toast){border-radius:3px}
:root[data-theme="afterhours"] :is(.mini,.claim){border-radius:2px}
:root[data-theme="afterhours"] .progress{border-radius:1px}
:root[data-theme="afterhours"] .switch,
:root[data-theme="afterhours"] .switch:before{border-radius:1px}
:root[data-theme="afterhours"] .bottom-sheet{border-radius:8px 8px 0 0;border-top:2px solid #5b3fc0}
:root[data-theme="afterhours"] .sheet-backdrop{background:rgba(5,2,12,.66)}
:root[data-theme="afterhours"] :is(.mode,.rank-summary,.stat,.player,.standing,.friend-code-card,.tutorial-card,.old-setup,.learn,.timer,.match-controls .button,.friend-empty){
 border-color:#46308c;box-shadow:3px 3px 0 #2a1566
}
:root[data-theme="afterhours"] .bottom-nav{border:2px solid #46308c;box-shadow:0 0 22px rgba(255,79,182,.1),3px 3px 0 #2a1566;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme="afterhours"] .button.full{box-shadow:0 4px 0 #a98a00,0 0 16px rgba(255,216,61,.26);text-transform:uppercase;letter-spacing:.06em}
:root[data-theme="afterhours"] .button.full:active{transform:translateY(3px);box-shadow:0 1px 0 #a98a00,0 0 12px rgba(255,216,61,.2)}
:root[data-theme="afterhours"] .nav-button.active{box-shadow:0 0 14px rgba(255,216,61,.28)}
:root[data-theme="afterhours"] :is(.nav-button,.match-controls .button,.section-heading h3,.setup-chip){text-transform:uppercase;letter-spacing:.06em}
:root[data-theme="afterhours"] .mode.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),3px 3px 0 #2a1566,0 0 14px rgba(255,216,61,.16)}
:root[data-theme="afterhours"] .player.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 14px rgba(255,216,61,.18)}
:root[data-theme="afterhours"] .mini.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 16px rgba(255,216,61,.3)}
:root[data-theme="afterhours"] .mini{border-width:2px}
:root[data-theme="afterhours"] .brand>span{box-shadow:0 0 12px rgba(44,242,255,.3),2px 2px 0 #ff4fb6}
:root[data-theme="afterhours"] .mark-layer.x svg{filter:drop-shadow(0 0 3px rgba(44,242,255,.7))}
:root[data-theme="afterhours"] .mark-layer.o svg{filter:drop-shadow(0 0 3px rgba(255,79,182,.7))}
:root[data-theme="afterhours"] .league-hero{box-shadow:inset 0 0 0 1px #3a2790,3px 3px 0 #2a1566}
:root[data-theme="afterhours"] .home-hero h1{font-size:24px;line-height:1.18;letter-spacing:.02em;font-weight:800;text-transform:uppercase;text-shadow:0 0 14px rgba(44,242,255,.28);max-width:340px}
:root[data-theme="afterhours"] .panel-head h2{font-size:22px;letter-spacing:.03em;text-transform:uppercase;font-weight:800}
:root[data-theme="afterhours"] .sheet-head h2{font-size:18px;letter-spacing:.04em;text-transform:uppercase;font-weight:800}
:root[data-theme="afterhours"] .league-hero h3{font-size:19px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
:root[data-theme="afterhours"] .stat strong{font-size:20px;font-weight:800;letter-spacing:0}
:root[data-theme="afterhours"] .brand b{font-size:15px;font-weight:800;letter-spacing:.06em}
:root[data-theme="afterhours"] .eyebrow{color:var(--x)}
:root[data-theme="afterhours"] .switch:before{background:#a79bd3}
:root[data-theme="afterhours"] .switch:checked:before{background:var(--on-accent)}
:root[data-theme="afterhours"] .danger-text{color:var(--danger)!important}
:root[data-theme="afterhours"] .theme-preview.afterhours{background:linear-gradient(145deg,#0f0722,#26164f);color:#2cf2ff;border-color:#5a3fb0}
:root[data-theme="afterhours"] .theme-preview.afterhours .sample-o{color:#ff4fb6}
:root[data-theme="afterhours"] .theme-preview.afterhours span{text-shadow:0 0 10px currentColor}

/* Theme picker previews are authored independently of the selected theme */
.theme-preview.vector{background:#f8f9fb;color:#246bfd;border-color:#cdd2d8}
.theme-preview.vector .sample-o{color:#f45669}
.theme-preview.midnight{background:#101720;color:#6f9dff;border-color:#27323f}
.theme-preview.midnight .sample-o{color:#ff7a98}
.theme-preview.paperclub{background:repeating-linear-gradient(#fffbee,#fffbee 16px,#9a8b72 17px);color:#2a4f9b;border-color:#9a8b72;font-family:"Patrick Hand","Segoe Print",cursive}
.theme-preview.paperclub .sample-o{color:#c23a2e}
.theme-preview.afterhours{background:linear-gradient(145deg,#0f0722,#26164f);color:#2cf2ff;border-color:#5a3fb0;font-family:"Orbitron",system-ui,sans-serif}
.theme-preview.afterhours .sample-o{color:#ff4fb6}
.theme-preview.afterhours span{text-shadow:0 0 10px currentColor}


/* V3.2.1 contrast-only fix.
   Do not change theme geometry, typography, surfaces, borders, shadows or effects. */
:root[data-theme="vector"]{
  --brand-icon-contrast:#ffffff;
  --mode-icon-contrast:#15181c;
  --mode-icon-active-contrast:#27310a;
}
:root[data-theme="midnight"]{
  --brand-icon-contrast:#b9f03c;
  --mode-icon-contrast:#f4f8fc;
  --mode-icon-active-contrast:#121a08;
}
:root[data-theme="paperclub"]{
  --brand-icon-contrast:#fffbee;
  --mode-icon-contrast:#27221b;
  --mode-icon-active-contrast:#2a1f08;
}
:root[data-theme="afterhours"]{
  --brand-icon-contrast:#ffd83d;
  --mode-icon-contrast:#f1eaff;
  --mode-icon-active-contrast:#1a1200;
}
:root[data-theme] .brand>span .icon,
:root[data-theme] .brand>span svg{
  color:var(--brand-icon-contrast)!important;
  stroke:currentColor!important;
  opacity:1!important;
}
:root[data-theme] .mode-symbol .icon,
:root[data-theme] .mode-symbol svg{
  color:var(--mode-icon-contrast)!important;
  stroke:currentColor!important;
  opacity:1!important;
}
:root[data-theme] .mode.active .mode-symbol .icon,
:root[data-theme] .mode.active .mode-symbol svg{
  color:var(--mode-icon-active-contrast)!important;
  stroke:currentColor!important;
}


/* V3.2.1 targeted appearance fixes — no theme redesign.
   1) After Hours: selected mode keeps its original purple tile but uses a visible yellow icon.
   2) Paper Club: keep the irregular paper logo tile/wordmark, but keep the small grid mark crisp. */
:root[data-theme="afterhours"] .mode.active .mode-symbol .icon,
:root[data-theme="afterhours"] .mode.active .mode-symbol svg{
  color:#ffd83d!important;
  stroke:#ffd83d!important;
  opacity:1!important;
  filter:drop-shadow(0 0 3px rgba(255,216,61,.28))!important;
}
:root[data-theme="paperclub"] .brand>span .icon,
:root[data-theme="paperclub"] .brand>span svg{
  color:var(--on-cta)!important;
  stroke:currentColor!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}


/* V3.3.4 targeted Midnight selected-mode fix.
   Keep Midnight Club's authored card styling; only restore the selected icon tile contrast. */
:root[data-theme="midnight"] .mode.active .mode-symbol{
  background:var(--accent)!important;
  color:var(--on-accent)!important;
}
:root[data-theme="midnight"] .mode.active .mode-symbol .icon,
:root[data-theme="midnight"] .mode.active .mode-symbol svg{
  color:var(--on-accent)!important;
  stroke:currentColor!important;
  opacity:1!important;
  filter:none!important;
}


/* V3.3.4 per-theme legibility audit.
   These are intentionally separate contracts; do not collapse into a shared font-size override. */

/* Vector Light — compact utility UI, but no essential label below a comfortable phone size. */
:root[data-theme="vector"] .eyebrow{font-size:10.5px}
:root[data-theme="vector"] .setup-title span{font-size:9px}
:root[data-theme="vector"] .setup-chip{font-size:10px;min-height:32px;padding:6px 9px}
:root[data-theme="vector"] .setup-note{font-size:10px}
:root[data-theme="vector"] .nav-button{font-size:9.5px}
:root[data-theme="vector"] .setting-group h4{font-size:10px}
:root[data-theme="vector"] .setting-row small{font-size:10px}
:root[data-theme="vector"] .setting-row select{font-size:11px}
:root[data-theme="vector"] .theme-card small{font-size:10.5px}
:root[data-theme="vector"] .tutorial-map.old-map span{font-size:9.5px}
:root[data-theme="vector"] .match-top>div small{font-size:9px}
:root[data-theme="vector"] .timer{font-size:10px}
:root[data-theme="vector"] .player small{font-size:9px}
:root[data-theme="vector"] .turn-hud span:not(.turn-icon){font-size:9px}
:root[data-theme="vector"] .board-note{font-size:11px}
:root[data-theme="vector"] .match-controls .button{font-size:10px}
:root[data-theme="vector"] .standing small{font-size:10.5px}
:root[data-theme="vector"] .league{font-size:10.5px}
:root[data-theme="vector"] .home-quests small{font-size:10.5px}

/* Midnight Club — dark surfaces need a little more physical type size than Vector. */
:root[data-theme="midnight"] .eyebrow{font-size:11px}
:root[data-theme="midnight"] .rank-summary small{font-size:11.5px}
:root[data-theme="midnight"] .mode-copy small{font-size:11.5px}
:root[data-theme="midnight"] .setup-title span{font-size:9.5px}
:root[data-theme="midnight"] .setup-chip{font-size:10.5px;min-height:33px;padding:6px 9px}
:root[data-theme="midnight"] .setup-note{font-size:10.5px}
:root[data-theme="midnight"] .nav-button{font-size:10px}
:root[data-theme="midnight"] .setting-group h4{font-size:10px}
:root[data-theme="midnight"] .setting-row small{font-size:10.5px}
:root[data-theme="midnight"] .setting-row select{font-size:11.5px}
:root[data-theme="midnight"] .theme-card small{font-size:11px}
:root[data-theme="midnight"] .tutorial-map.old-map span{font-size:10px}
:root[data-theme="midnight"] .match-top>div small{font-size:9.5px}
:root[data-theme="midnight"] .timer{font-size:10.5px}
:root[data-theme="midnight"] .player small{font-size:9.5px}
:root[data-theme="midnight"] .turn-hud span:not(.turn-icon){font-size:9.5px}
:root[data-theme="midnight"] .board-note{font-size:11px}
:root[data-theme="midnight"] .match-controls .button{font-size:10px}
:root[data-theme="midnight"] .standing small{font-size:11px}
:root[data-theme="midnight"] .league{font-size:11px}
:root[data-theme="midnight"] .home-quests small{font-size:11px}

/* Paper Club — handwriting needs generous sizing; preserve its looser editorial rhythm. */
:root[data-theme="paperclub"] .caption,
:root[data-theme="paperclub"] .status-line{font-size:13px}
:root[data-theme="paperclub"] .rank-summary small{font-size:13px}
:root[data-theme="paperclub"] .setup-note{font-size:12px}
:root[data-theme="paperclub"] .setting-group h4{font-size:12px;letter-spacing:.08em}
:root[data-theme="paperclub"] .setting-row small{font-size:12px}
:root[data-theme="paperclub"] .theme-card b{font-size:15px}
:root[data-theme="paperclub"] .theme-card small{font-size:12px}
:root[data-theme="paperclub"] .tutorial-map.old-map span{font-size:11px}
:root[data-theme="paperclub"] .standing small{font-size:12px}
:root[data-theme="paperclub"] .league{font-size:12px}
:root[data-theme="paperclub"] .home-quests b{font-size:14px}
:root[data-theme="paperclub"] .home-quests small{font-size:12px}

/* After Hours — arcade/mono faces read smaller, so labels are deliberately larger
   and the setup controls get more vertical room instead of squeezing the type. */
:root[data-theme="afterhours"] .eyebrow{font-size:11px;letter-spacing:.1em}
:root[data-theme="afterhours"] .rank-summary b{font-size:15px}
:root[data-theme="afterhours"] .rank-summary small{font-size:12px}
:root[data-theme="afterhours"] .mode-copy strong{font-size:15.5px}
:root[data-theme="afterhours"] .mode-copy small{font-size:12px;line-height:1.35}
:root[data-theme="afterhours"] .old-setup{padding:12px 13px}
:root[data-theme="afterhours"] .setup-block{grid-template-columns:minmax(94px,.66fr) minmax(0,1.9fr);gap:9px;padding:10px 0}
:root[data-theme="afterhours"] .setup-title b{font-size:13px}
:root[data-theme="afterhours"] .setup-title span{font-size:10.5px;letter-spacing:.05em}
:root[data-theme="afterhours"] .setup-chips{gap:6px}
:root[data-theme="afterhours"] .setup-chip{font-size:10.5px;min-height:35px;padding:7px 9px;letter-spacing:.045em}
:root[data-theme="afterhours"] .setup-note{font-size:11px;line-height:1.5}
:root[data-theme="afterhours"] .nav-button{font-size:10px}
:root[data-theme="afterhours"] .setting-group h4{font-size:10.5px}
:root[data-theme="afterhours"] .setting-row label,
:root[data-theme="afterhours"] .setting-row>label{font-size:13px}
:root[data-theme="afterhours"] .setting-row small{font-size:11px;line-height:1.4}
:root[data-theme="afterhours"] .setting-row select{font-size:12px;min-height:36px}
:root[data-theme="afterhours"] .theme-card b{font-size:13px}
:root[data-theme="afterhours"] .theme-card small{font-size:11px;line-height:1.35}
:root[data-theme="afterhours"] .tutorial-card b{font-size:14px}
:root[data-theme="afterhours"] .tutorial-card p{font-size:12px}
:root[data-theme="afterhours"] .tutorial-map.old-map span{font-size:10px}
:root[data-theme="afterhours"] .match-top>div b{font-size:14px}
:root[data-theme="afterhours"] .match-top>div small{font-size:10px}
:root[data-theme="afterhours"] .timer{font-size:10.5px}
:root[data-theme="afterhours"] .player b{font-size:12.5px}
:root[data-theme="afterhours"] .player small{font-size:10px}
:root[data-theme="afterhours"] .turn-hud b{font-size:12px}
:root[data-theme="afterhours"] .turn-hud span:not(.turn-icon){font-size:9.5px;letter-spacing:.04em}
:root[data-theme="afterhours"] .board-note{font-size:11px;line-height:1.4}
:root[data-theme="afterhours"] .match-controls .button{font-size:10px}
:root[data-theme="afterhours"] .standing b{font-size:13px}
:root[data-theme="afterhours"] .standing small{font-size:11px}
:root[data-theme="afterhours"] .league{font-size:10.5px}
:root[data-theme="afterhours"] .home-quests b{font-size:13px}
:root[data-theme="afterhours"] .home-quests small{font-size:11px}
:root[data-theme="afterhours"] .button.full{font-size:14px}

@media(max-width:365px){
 :root[data-theme="vector"] .nav-button{font-size:9px}
 :root[data-theme="midnight"] .nav-button{font-size:9.5px}
 :root[data-theme="paperclub"] .nav-button{font-size:11px}
 :root[data-theme="afterhours"] .nav-button{font-size:9.5px}
}


/* Connection state lives in the same scroll flow as page content; only the header/nav stay anchored. */
.network-status{position:relative;margin:8px 18px 10px;padding:11px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--raised);color:var(--ink);box-shadow:0 8px 24px rgba(21,24,28,.08);z-index:1}
.network-status[data-state="offline"],.network-status[data-state="timeout"],.network-status[data-state="degraded"]{border-color:var(--border-strong)}
.network-status[data-state="maintenance"]{background:var(--accent-soft);border-color:var(--accent-edge)}
.network-status[data-state="auth"]{background:var(--danger-soft);border-color:var(--danger)}
.network-status-copy{flex:1;min-width:0}.network-status-copy strong,.network-status-copy span{display:block}.network-status-copy strong{font-size:12px}.network-status-copy span{font-size:10.5px;color:var(--ink);line-height:1.4;margin-top:2px}
.network-status-action{min-height:44px;min-width:86px;padding:8px 10px;font-size:11px;flex:none}
:root[data-theme="vector"] .network-status{box-shadow:0 8px 24px rgba(21,24,28,.08)}
:root[data-theme="midnight"] .network-status{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.28)}
:root[data-theme="paperclub"] .network-status{margin-left:50px;border-width:1.5px;border-color:var(--ink);border-radius:18px 10px 18px 12px/10px 18px 12px 18px;box-shadow:3px 4px 0 rgba(39,34,27,.22)}
:root[data-theme="afterhours"] .network-status{border-radius:3px;border-color:var(--border-strong);box-shadow:3px 3px 0 #2a1566,0 0 18px rgba(44,242,255,.08)}
@media(max-width:365px){:root[data-theme="paperclub"] .network-status{margin-left:14px}}
@media(max-width:360px){.network-status{align-items:stretch;flex-direction:column}.network-status-action{width:100%}}


/* Accessibility release invariants: 24px game targets, 44px primary controls,
 * OS reduced-motion support, and forced-color affordances. */
.sheet-head .icon-button,.match-top .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
.board-wrap{min-width:min(240px,100%)}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
 .button,.icon-button,.wallet-pill,.mode,.nav-button,.setting-row select,.field input,.field select,.network-status{border:1px solid ButtonText}
 .nav-button.active,.mode.active,.mini.active{outline:2px solid Highlight;outline-offset:0}
 .progress>span{background:Highlight}
}

.support-diagnostics{width:100%;min-height:230px;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--ink);padding:12px;font:12px/1.5 'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:auto}

.legal-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.legal-link{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;text-decoration:none}
@media(max-width:360px){.legal-links{grid-template-columns:1fr}}


/* V4.1 release polish: quiet scroll surfaces, dual-currency header and readable season qualification. */
.content-scroll,.bottom-sheet{scrollbar-width:none;-ms-overflow-style:none}
.content-scroll::-webkit-scrollbar,.bottom-sheet::-webkit-scrollbar{display:none;width:0;height:0}
.wallet-pill{gap:7px;padding:8px 10px;white-space:nowrap}
.wallet-balance{display:flex;align-items:center;gap:4px;min-width:0}.wallet-balance .icon{width:17px;height:17px}.wallet-divider{width:1px;height:18px;background:var(--line);flex:none}
.rank-season-card{margin:10px 0 14px;padding:16px}.rank-season-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.rank-season-title{min-width:0;display:grid;gap:5px}.rank-season-title .eyebrow{line-height:1.25}.rank-season-title strong{font-size:14px;line-height:1.35}.rank-season-score{font-size:14px;line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums}.rank-season-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0 10px}.rank-season-progress span{display:grid;gap:2px;padding:9px 8px;background:var(--soft);border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:9px;line-height:1.3;text-align:center}.rank-season-progress b{color:var(--ink);font-size:11px;font-variant-numeric:tabular-nums}.rank-season-copy{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
@media(max-width:350px){.wallet-pill{gap:5px;padding:7px 8px}.wallet-balance{gap:3px}.wallet-balance .icon{width:15px;height:15px}.wallet-divider{height:16px}.rank-season-head{gap:8px}.rank-season-progress{grid-template-columns:1fr;gap:5px}.rank-season-progress span{display:flex;justify-content:space-between;text-align:left}}


/* V4.1 home-title fit: reclaim Paper Club notebook gutter and keep the game name intact. */
:root[data-theme="paperclub"] .app::before{
 width:34px;
 background:linear-gradient(90deg,transparent 23px,rgba(194,58,46,.45) 23px,rgba(194,58,46,.45) 24.5px,transparent 24.5px),linear-gradient(90deg,rgba(39,34,27,.09),transparent 9px)
}
:root[data-theme="paperclub"] :is(.topbar,#page){padding-left:40px}
:root[data-theme="paperclub"] .bottom-nav{left:42px}
:root[data-theme="paperclub"] .bottom-sheet{padding-left:40px}
:root[data-theme="paperclub"] .home-hero h1{font-size:40px;max-width:none}
:root[data-theme="paperclub"] .home-game-name{white-space:nowrap}
@media(min-width:400px){:root[data-theme="paperclub"] .home-title-main{white-space:nowrap}}
:root[data-theme="afterhours"] .home-hero h1{max-width:none}
:root[data-theme="afterhours"] .home-game-name{white-space:nowrap}
@media(max-width:365px){
 :root[data-theme="paperclub"] :is(.topbar,#page,.bottom-sheet){padding-left:14px}
 :root[data-theme="paperclub"] .bottom-nav{left:8px}
}