/* Typography V3: the same faces on every phone (self-hosted, Latin; other scripts fall back to the system font). */
@font-face{font-family:"Pald Sans";src:url("../fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Pald Display";src:url("../fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
/* ==========================================================================
   Pald Arcade — design system V2 (2026-10-18)
   Replaces app.css / games.css / arcade-*.css. Tokens → primitives → shell →
   home → sheets → overview → play shell → results → rankings → states.
   Game-specific stages/podiums: pald-games.css · secondary screens: pald-screens.css
   ========================================================================== */

/* ---------- tokens: Neon Arcade (dark is the default; light is opt-in from Settings) ---------- */
:root{
 color-scheme:dark;
 --page:#0A0F21; --page-2:#0D1330; --surface:#131A35; --surface-2:#182042; --surface-3:#1E2850; --inset:#1A2246; --inset-2:#26305C;
 --glass:linear-gradient(160deg,rgba(32,41,80,.92),rgba(18,25,52,.94)); --glass-hi:linear-gradient(160deg,rgba(44,55,106,.94),rgba(22,30,62,.96));
 --line:rgba(150,165,255,.11); --line-2:rgba(150,165,255,.19); --line-hi:rgba(196,206,255,.32);
 --ink:#F4F6FF; --ink-2:#B0B8DC; --ink-3:#7F88B2; --ink-inv:#0A0F21;
 --accent:#8B8CF8; --action:#5B5CF0; --action-2:#7C6CFF; --action-3:#4338CA; --action-ink:#C3C6FF; --on-action:#FFFFFF;
 --action-soft:rgba(110,112,255,.16); --action-soft-2:rgba(110,112,255,.27); --seg-on:rgba(124,108,255,.32);
 --cyan:#4FD8FF; --mint:#5EE6C8; --mint-ink:#7EF0D6; --mint-soft:rgba(94,230,200,.14); --coral:#FF8A84; --coral-ink:#FFADA8; --coral-soft:rgba(255,138,132,.15); --rose:#F29BB8;
 --gold:#F7C54E; --gold-ink:#FFD776; --gold-soft:rgba(247,197,78,.15); --blue:#58A6FF; --success:#3DDBB0; --warn:#F5B648; --danger:#FF6B6B;
 --focus:0 0 0 3px rgba(124,108,255,.6);
 --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;
 --sh-1:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(2,6,23,.34);
 --sh-2:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(2,6,23,.46);
 --sh-3:0 24px 70px rgba(0,0,0,.62);
 --sh-act:0 6px 18px rgba(91,92,240,.46),inset 0 1px 0 rgba(255,255,255,.28);
 --t-press:140ms; --t-page:200ms; --t-sheet:260ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
 --gutter:16px; --maxw:1180px; --safe-t:max(env(safe-area-inset-top,0px),calc(var(--pald-telegram-safe-top,0px) + var(--pald-telegram-content-top,0px))); --safe-b:max(env(safe-area-inset-bottom,0px),calc(var(--pald-telegram-safe-bottom,0px) + var(--pald-telegram-content-bottom,0px)));
 --font:"Pald Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --font-display:"Pald Display","Pald Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 /* the play stage stays dark in every theme */
 --stage:#090E20; --stage-2:#11183A; --stage-3:#1A2350; --stage-tile:rgba(255,255,255,.06); --stage-line:rgba(255,255,255,.09); --stage-ink:#F5F6FF; --stage-ink-2:#A9B1CF;
}
:root[data-theme="light"]{
 color-scheme:light;
 --page:#F3F4FF; --page-2:#ECEEFF; --surface:#FFFFFF; --surface-2:#F7F8FF; --surface-3:#EEF0FF; --inset:#ECEEFA; --inset-2:#E1E5F7;
 --glass:linear-gradient(160deg,#FFFFFF,#F8F9FF); --glass-hi:linear-gradient(160deg,#FFFFFF,#F1F2FF);
 --line:rgba(25,33,57,.08); --line-2:rgba(25,33,57,.14); --line-hi:rgba(91,92,240,.28);
 --ink:#182039; --ink-2:#59627C; --ink-3:#848CA6; --ink-inv:#FFFFFF;
 --action-ink:#4146BE; --action-soft:#ECECFF; --action-soft-2:#E0E1FF; --seg-on:#FFFFFF;
 --mint-ink:#16705D; --mint-soft:#E1F6F0; --coral-ink:#B23F38; --coral-soft:#FDE9E7; --gold-ink:#94600A; --gold-soft:#FFF5DC;
 --sh-1:0 1px 2px rgba(25,33,57,.05),0 2px 8px rgba(25,33,57,.05);
 --sh-2:0 1px 2px rgba(25,33,57,.04),0 10px 26px rgba(84,89,201,.10);
 --sh-3:0 22px 60px rgba(25,33,57,.22);
 --sh-act:0 6px 16px rgba(84,89,201,.30),inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overscroll-behavior-y:none}
img,svg{display:block;max-width:100%}
img{-webkit-user-drag:none;user-select:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:var(--action-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
::selection{background:rgba(124,108,255,.45);color:#fff}
.num,.tabular{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.glyph{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.glyph.sm{width:18px;height:18px}.glyph.xs{width:15px;height:15px}.glyph.lg{width:26px;height:26px}
svg.glyph circle{fill:currentColor;stroke:none}
.art{display:inline-grid;place-items:center;flex:none;line-height:0}
.art img,.art svg{width:100%;height:100%;object-fit:contain}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.small{font-size:13px}.caption{font-size:12px}
.t-title{font-size:23px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.t-sec{font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.t-card{font-size:17px;line-height:1.25;font-weight:750}
.row{display:flex;align-items:center;gap:10px}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.stack{display:grid;gap:12px}.stack.tight{gap:8px}.stack.loose{gap:20px}
.spacer{flex:1}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px;border-radius:13px;font-weight:700;font-size:15px;line-height:1;letter-spacing:-.005em;isolation:isolate;overflow:hidden;transition:transform var(--t-press) var(--ease),box-shadow .2s,background-color .2s,filter .2s,opacity .2s;user-select:none;white-space:nowrap}
.btn:active:not(:disabled){transform:scale(.97)}
.btn-primary{color:var(--on-action);background:linear-gradient(135deg,var(--action-2) 0%,var(--action) 55%,var(--action-3) 100%);box-shadow:var(--sh-act)}
/* sheen only on the screen's main call to action (keeps low-end phones smooth) */
.btn-primary.btn-lg::before,.btn-primary.gp-play::before,.btn-primary.btn-md.btn-block::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26) 46%,transparent 60%) -170% 0/260% 100% no-repeat;animation:btn-sheen 6s ease-in-out infinite;pointer-events:none}
@keyframes btn-sheen{0%,72%{background-position:-170% 0}90%,100%{background-position:170% 0}}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 8px 24px rgba(91,92,240,.58),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-primary:active:not(:disabled){filter:brightness(.94)}
.btn-soft{color:var(--action-ink);background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.22)}
.btn-soft:hover:not(:disabled){background:var(--action-soft-2)}
.btn-ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2)}
.btn-quiet{color:var(--action-ink);background:transparent;min-height:40px;padding:0 10px}
.btn-danger{color:#fff;background:linear-gradient(135deg,#FF7E7E,#E0484E);box-shadow:0 6px 16px rgba(224,72,78,.34)}
.btn-lg{min-height:48px;font-size:15.5px;border-radius:14px;padding:0 18px}
.btn-md{min-height:44px;border-radius:13px}
.btn-sm{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn-block{display:flex;width:100%}
.btn .glyph{width:19px;height:19px}
.btn-lg .glyph{width:21px;height:21px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;filter:saturate(.6)}
.btn:disabled::before{animation:none}
.btn.is-loading{color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-soft.is-loading::after,.btn-ghost.is-loading::after{border-color:rgba(124,108,255,.25);border-top-color:var(--action-2)}
.btn.is-done{background:linear-gradient(135deg,#46E0B6,#1FA67F)!important;color:#fff!important}
.btn .bolt{width:18px;height:18px;fill:currentColor;stroke:none}
.btn .cost{font-weight:600;opacity:.9}
.reason{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:8px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--ink);transition:transform var(--t-press) var(--ease),background-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.icon-btn:active{transform:scale(.93)}
.icon-btn.round{border-radius:50%;background:var(--glass);box-shadow:var(--sh-1)}
.icon-btn.solid{background:var(--inset)}
.icon-btn.sm{width:36px;height:36px;border-radius:12px}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#FF5E6C;box-shadow:0 0 0 2px var(--page),0 0 8px rgba(255,94,108,.8)}
.link-btn{display:inline-flex;align-items:center;gap:4px;color:var(--action-ink);font-weight:700;font-size:15px;min-height:44px}
.link-btn .glyph{width:18px;height:18px}

/* ---------- chips, tags, status ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap}
.chip .glyph{width:17px;height:17px;color:var(--action-ink)}
.chip.inset{background:var(--inset);box-shadow:none}
.fact{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:13px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:650}
.fact .glyph{width:18px;height:18px;color:var(--action-ink)}
.fact.heart .glyph{color:#FF6B81;fill:#FF6B81}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:750;background:var(--inset);color:var(--ink-2);white-space:nowrap}
.tag.mint{background:var(--mint-soft);color:var(--mint-ink)}.tag.coral{background:var(--coral-soft);color:var(--coral-ink)}.tag.gold{background:var(--gold-soft);color:var(--gold-ink)}.tag.action{background:var(--action-soft);color:var(--action-ink)}
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--inset);color:var(--ink-2)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.status.ok{background:var(--mint-soft);color:var(--mint-ink)}.status.wait{background:var(--gold-soft);color:var(--gold-ink)}.status.info{background:var(--action-soft);color:var(--action-ink)}.status.bad{background:var(--coral-soft);color:var(--coral-ink)}
.ad-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:8px;background:rgba(124,108,255,.18);color:var(--action-ink);font-size:12px;font-weight:800}
.ad-tag svg{width:15px;height:15px}

/* ---------- surfaces ---------- */
.card{background:var(--glass);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);padding:16px}
.card.flat{box-shadow:inset 0 0 0 1px var(--line)}
.tray{background:var(--glass);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);padding:16px}
.tray-inset{background:var(--inset);border-radius:var(--r-md);padding:12px 14px}
.list{background:var(--glass);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);overflow:hidden}
.list-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;text-align:left;color:var(--ink);transition:background-color .15s}
.list-row+.list-row{border-top:1px solid var(--line)}
.list-row:hover{background:rgba(255,255,255,.03)}
.list-row:active{background:rgba(255,255,255,.06)}
.list-row .label{flex:1;min-width:0;font-weight:650;font-size:15px}
.list-row .label small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.list-row .value{color:var(--ink-2);font-size:13.5px;font-weight:550;white-space:nowrap}
.list-row .chev{width:17px;height:17px;color:var(--ink-3)}
.list-row .art{width:28px;height:28px}
.list-group-title{font-size:12px;font-weight:750;color:var(--ink-3);margin:16px 4px 8px;letter-spacing:.06em;text-transform:uppercase}
.tone-tile{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone);flex:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 25%,transparent)}
.tone-tile .glyph{width:18px;height:18px;stroke-width:2.2}
.divider{height:1px;background:var(--line);margin:16px 0}
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.2);color:var(--ink);font-size:14px}
.notice .glyph{color:var(--action-ink);margin-top:1px}
.notice b{display:block;font-weight:750;margin-bottom:2px}
.notice.warn{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(247,197,78,.22)}.notice.warn .glyph{color:var(--gold-ink)}
.notice.bad{background:var(--coral-soft);box-shadow:inset 0 0 0 1px rgba(255,138,132,.22)}.notice.bad .glyph{color:var(--coral-ink)}
.notice.ok{background:var(--mint-soft);box-shadow:inset 0 0 0 1px rgba(94,230,200,.22)}.notice.ok .glyph{color:var(--mint-ink)}

/* ---------- tabs ---------- */
.tabs-u{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:4px 0 14px;overflow-x:auto;scrollbar-width:none}
.tabs-u::-webkit-scrollbar{display:none}
.tabs-u button{position:relative;min-height:42px;padding:0 2px;color:var(--ink-2);font-weight:650;font-size:15px;white-space:nowrap}
.tabs-u button[aria-selected="true"]{color:var(--ink);font-weight:750}
.tabs-u button[aria-selected="true"]::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--action-2),var(--cyan));box-shadow:0 0 8px rgba(79,216,255,.6)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:15px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{min-height:38px;border-radius:11px;font-weight:700;color:var(--ink-2);transition:background-color .15s,color .15s}
.seg button[aria-selected="true"]{background:linear-gradient(135deg,var(--action-2),var(--action));color:var(--on-action);box-shadow:var(--sh-act)}

/* ---------- meters ---------- */
.meter{position:relative;height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
:root[data-theme="light"] .meter{background:var(--inset-2)}
.meter>i{position:absolute;inset:0 auto 0 0;width:var(--v,0%);border-radius:inherit;background:linear-gradient(90deg,var(--action-2),var(--cyan));box-shadow:0 0 10px rgba(79,216,255,.45);transition:width .6s var(--ease-out)}
.meter.mint>i{background:linear-gradient(90deg,#7EF0D6,#2BC79E)}.meter.coral>i{background:linear-gradient(90deg,#FFB4AF,#FF6B6B)}.meter.gold>i{background:linear-gradient(90deg,#FFE08A,#F2A922)}
.segs{display:flex;gap:4px}.segs i{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.1)}.segs i.on{background:linear-gradient(90deg,var(--action-2),var(--cyan));box-shadow:0 0 6px rgba(79,216,255,.55)}

/* ---------- currency amounts ---------- */
.amt{display:inline-flex;align-items:center;gap:6px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt .art{width:20px;height:20px}
.amt.lg{font-size:30px;font-weight:850;letter-spacing:-.02em;gap:10px}.amt.lg .art{width:40px;height:40px}
.amt.md{font-size:20px;font-weight:800}.amt.md .art{width:28px;height:28px}
.amt.gold{color:var(--ink)}
.local{display:block;font-size:12.5px;color:var(--ink-2);font-weight:550}

/* ---------- app shell ---------- */
#app{min-height:100vh}
.shell{max-width:var(--maxw);margin:0 auto;padding:calc(4px + var(--safe-t)) var(--gutter) calc(28px + var(--safe-b));width:100%;min-width:0}
.view{animation:page-in var(--t-page) var(--ease) both;min-width:0}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* header (home): Menu / Points / Profile / Gold / Bell — one 58 px row, centred avatar */
.topbar{position:sticky;top:var(--safe-t);z-index:20;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 4px;background:linear-gradient(180deg,var(--page) 62%,color-mix(in srgb,var(--page) 0%,transparent));transition:background .25s,box-shadow .25s}
.topbar.scrolled{background:color-mix(in srgb,var(--page) 86%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line)}
.hdr{display:grid;grid-template-columns:40px minmax(0,1fr) 60px minmax(0,1fr) 40px;gap:6px;align-items:center;height:62px;padding-bottom:4px}
.hd-btn{width:40px;height:40px;border-radius:12px}
.hd-btn .glyph{width:23px;height:23px}
.capsule{position:relative;display:flex;align-items:center;gap:6px;min-width:0;height:38px;padding:0 4px 0 5px;border-radius:var(--r-pill);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1);font-weight:850;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);transition:transform var(--t-press) var(--ease),box-shadow .2s}
.capsule:hover{box-shadow:inset 0 0 0 1px var(--line-hi),0 0 16px rgba(124,108,255,.25)}
.capsule:active{transform:scale(.96)}
.capsule .cap-ic{display:grid;place-items:center;flex:none}
.capsule .cap-ic .art{width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.capsule .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.capsule .cap-plus{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;box-shadow:0 0 10px rgba(124,108,255,.6)}
.capsule .cap-plus .glyph{width:13px;height:13px;stroke-width:3}
.capsule .lbl{display:none;font-size:11px;font-weight:600;color:var(--ink-2);line-height:1}
.hdr .capsule.pts{margin-left:2px}.hdr .capsule.gold{margin-right:2px}
/* profile portrait: animated tier ring + the real level crest (images/icons/level{n}.ico) as its badge */
.avatar-btn{--av:44px;--tc1:#8B8CF8;--tc2:#C7D2FE;position:relative;justify-self:center;display:grid;place-items:center;width:calc(var(--av) + 10px);height:calc(var(--av) + 10px);border-radius:50%;transition:transform var(--t-press) var(--ease)}
.avatar-btn:active{transform:scale(.95)}
.avatar-btn .face{position:relative;z-index:2;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--page)}
.avatar-btn .face>.art{width:100%!important;height:100%!important}
.avatar-btn .face svg,.avatar-btn .face img{width:100%;height:100%;object-fit:cover}
.avatar-btn .av-ring{position:absolute;inset:0;z-index:1;border-radius:50%;background:conic-gradient(var(--tc1),var(--tc2),transparent 40%,var(--tc1) 60%,var(--tc2),var(--tc1));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));filter:drop-shadow(0 0 5px var(--tc1));animation:av-rot 7s linear infinite}
.avatar-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tc1) 30%,transparent),transparent);z-index:0}
@keyframes av-rot{to{transform:rotate(360deg)}}
.avatar-btn .av-badge{position:absolute;z-index:4;left:50%;bottom:calc(var(--av) * -.36);transform:translateX(-50%);line-height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.avatar-btn.t2{--tc1:#60A5FA;--tc2:#A78BFA}.avatar-btn.t3{--tc1:#A78BFA;--tc2:#67E8F9}.avatar-btn.t4{--tc1:#22D3EE;--tc2:#A78BFA}.avatar-btn.t5{--tc1:#C084FC;--tc2:#FBBF24}.avatar-btn.t6{--tc1:#F0ABFC;--tc2:#67E8F9}
.lvl-badge{display:none}
/* status row: energy (with live fill line) + league */
.status-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;height:36px;margin-top:6px}
.st-energy{position:relative;display:flex;align-items:center;gap:7px;min-width:0;padding:0 11px 0 6px;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-size:13.5px;color:var(--ink-2);text-align:left;overflow:hidden;transition:transform var(--t-press)}
.st-energy .st-bolt{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:radial-gradient(circle,rgba(124,108,255,.38),transparent 72%);flex:none}
.st-energy .st-bolt .art{width:19px;height:19px;filter:drop-shadow(0 0 6px rgba(124,108,255,.85))}
.st-energy b{color:var(--ink);font-weight:850;font-variant-numeric:tabular-nums}
.st-energy .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-energy .st-fill{position:absolute;left:0;bottom:0;height:2px;width:var(--e,0%);border-radius:0 2px 2px 0;background:linear-gradient(90deg,var(--action-2),var(--cyan));box-shadow:0 0 8px var(--cyan)}
.st-energy.full b{color:var(--mint-ink)}
.st-league{display:flex;align-items:center;gap:5px;padding:0 8px 0 7px;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-weight:850;font-size:14px;color:var(--ink);white-space:nowrap;transition:transform var(--t-press)}
.st-energy:active,.st-league:active{transform:scale(.97)}
.st-league .art{width:21px;height:21px}
.st-league .glyph{width:15px;height:15px;color:var(--ink-3)}

/* page header (sub pages) */
.phead{position:sticky;top:var(--safe-t);z-index:15;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;min-height:56px;margin:0 calc(-1 * var(--gutter)) 10px;padding:4px calc(var(--gutter) - 4px) 4px;background:color-mix(in srgb,var(--page) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.phead h1{text-align:center;font-size:18px;font-weight:850;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .icon-btn{width:40px;height:40px;border-radius:50%;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.phead .icon-btn .glyph{width:20px;height:20px}
.phead.on-stage{grid-template-columns:44px minmax(0,1fr) 44px 44px;background:transparent;color:var(--stage-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.phead.on-stage .icon-btn{background:rgba(255,255,255,.08);box-shadow:none;color:var(--stage-ink)}
.page-intro{margin:4px 2px 16px}
.page-intro p{color:var(--ink-2);margin-top:4px}

/* ---------- home: Play today (goals + shortcuts) and Games (filters + cards) ---------- */
.h-sec{margin-top:14px}
.h-title{font-size:20px;font-weight:850;letter-spacing:-.015em;margin:0 2px 10px}
.h-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 2px 10px}
.h-head .h-title{margin:0;flex:1 0 auto}
.goal-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:50px;padding:7px 8px 7px 9px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);overflow:hidden;isolation:isolate;transition:transform var(--t-press) var(--ease)}
.goal-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(140px 70px at 0% 50%,rgba(124,108,255,.2),transparent 70%)}
.goal-card:active{transform:scale(.985)}
.goal-ring{--p:0;position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--action-2) calc(var(--p) * 1%),rgba(255,255,255,.09) 0)}
.goal-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3A3E9A,#171C47)}
.goal-ring .glyph{position:relative;width:16px;height:16px;color:#CBD0FF}
.goal-card.done .goal-ring{background:conic-gradient(var(--success) 100%,transparent 0)}
.goal-card.done .goal-ring .glyph{color:#7EF0D6}
.gtxt{min-width:0}
.gtxt b{display:block;font-size:14px;font-weight:850;line-height:1.2}
.gtxt small{display:block;font-size:12px;color:var(--ink-2);line-height:1.2}
.goal-card .segs{width:52px}
.gview{display:inline-flex;align-items:center;gap:1px;height:28px;padding:0 7px 0 10px;border-radius:9px;background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.25);color:var(--action-ink);font-size:13px;font-weight:750}
.gview .glyph{width:14px;height:14px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.tile{position:relative;display:grid;grid-template-rows:42px 1fr;align-items:center;justify-items:center;gap:6px;height:auto;min-height:124px;padding:10px 6px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);font-size:12px;font-weight:750;overflow:hidden;isolation:isolate;transition:transform var(--t-press) var(--ease),box-shadow .2s}
.tile::after{content:"";position:absolute;left:18%;right:18%;bottom:-24%;height:46%;z-index:-1;background:radial-gradient(closest-side,rgba(124,108,255,.34),transparent);filter:blur(3px)}
.tile .tile-ic{display:grid;place-items:center;width:42px;height:42px}
.tile .tile-ic>.art{width:100%!important;height:100%!important}
.tile .tile-label{display:grid;grid-template-rows:minmax(30px,auto) minmax(16px,auto);align-self:start;align-items:center;justify-items:center;gap:3px;min-width:0;max-width:100%;text-align:center;line-height:1.25}
.tile .tile-name{display:grid;align-items:center;min-height:30px;max-width:100%;overflow-wrap:anywhere}
.tile .art{width:42px;height:42px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));transition:transform .3s var(--ease-spring)}
.tile:hover{box-shadow:inset 0 0 0 1px var(--line-hi),0 0 18px rgba(124,108,255,.22)}
.tile:hover .art{transform:translateY(-2px) scale(1.07)}
.tile:active{transform:scale(.95)}
.pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.pills::-webkit-scrollbar{display:none}
.pills button{flex:none;height:30px;padding:0 12px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:700;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s,transform var(--t-press)}
.pills button:active{transform:scale(.95)}
.pills button[aria-selected="true"]{background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;box-shadow:0 4px 14px rgba(91,92,240,.48),inset 0 1px 0 rgba(255,255,255,.25)}
/* game cards: artwork header + name, mechanic, 1st prize, round length, Play (opens the game's page) */
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gcard{--g1:#8B8CF8;--g2:#2B2E8F;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);overflow:hidden;isolation:isolate;transition:transform .22s var(--ease),box-shadow .22s}
.gcard:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-hi),0 16px 34px rgba(2,6,23,.55),0 0 26px color-mix(in srgb,var(--g1) 26%,transparent)}
.gc-art{position:relative;display:grid;place-items:center;height:96px;overflow:hidden;isolation:isolate;color:#fff;border-radius:0}
.gc-bg,.crow-art .gc-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(110% 95% at 78% 12%,color-mix(in srgb,var(--g1) 58%,transparent),transparent 62%),radial-gradient(80% 70% at 10% 100%,color-mix(in srgb,var(--g1) 22%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--g2) 74%,#0A0F21),#0E1430)}
.gc-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;-webkit-mask:linear-gradient(180deg,transparent 10%,#000 85%);mask:linear-gradient(180deg,transparent 10%,#000 85%);opacity:.55}
.gc-art>.art{width:100%;height:100%}
.gc-art>.art svg,.gc-art>.art img{width:100%;height:100%;object-fit:contain;transform:scale(1.02);transition:transform .4s var(--ease);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.gcard:hover .gc-art>.art svg,.gcard:hover .gc-art>.art img{transform:scale(1.09) translateY(-2px)}
.gc-art::after{content:"";position:absolute;inset:auto 0 0 0;height:28px;background:linear-gradient(180deg,transparent,rgba(10,15,33,.5));pointer-events:none}
.gc-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.2) 48%,transparent 60%) -160% 0/260% 100% no-repeat;animation:gc-glint 8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .7s)}
@keyframes gc-glint{0%,74%{background-position:-160% 0}92%,100%{background-position:160% 0}}
.gc-pin{position:absolute;top:7px;left:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(10,15,33,.5);color:#fff}
.gc-pin .glyph{width:12px;height:12px}
.gc-more{position:absolute;top:6px;right:6px;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(10,15,33,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform var(--t-press),background .2s}
.gc-more:hover{background:rgba(10,15,33,.6)}
.gc-more:active{transform:scale(.9)}
.gc-more .glyph{width:16px;height:16px}
.gc-body{display:flex;flex-direction:column;padding:8px 10px 10px;min-width:0}
.gc-name{font-size:15px;font-weight:850;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-sub{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-meta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin:7px 0 8px;padding-top:7px;border-top:1px solid var(--line)}
.gc-m{display:grid;gap:1px;min-width:0}
.gc-m+.gc-m{padding-left:9px;border-left:1px solid var(--line)}
.gc-m small{font-size:11px;color:var(--ink-3);font-weight:750;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.gc-m b{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-m b.gold{color:var(--gold-ink)}
.gc-m b.na{font-size:12px;color:var(--ink-3);font-weight:700}
.gc-m .art{width:16px;height:16px}
.gc-play{width:100%;height:36px;min-height:36px;border-radius:11px;font-size:14px;padding:0 10px}
.gc-play .glyph{width:14px;height:14px;fill:currentColor;stroke:none}
.games.swap>*{animation:card-in .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes card-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.context-note:empty{display:none}
.context-note{margin-top:10px}
.context-note .notice{min-height:44px;padding:8px 12px;border-radius:14px;width:100%;text-align:left}
/* per-game colour families (card headers, stages, thumbnails) */
.g-trace-trail,.st-trace-trail{--g1:#2EE6B8;--g2:#0F7A6A}
.g-pop-quiz,.st-pop-quiz{--g1:#FF8080;--g2:#9E2F4A}
.g-piano-rush,.st-piano-rush{--g1:#A585FF;--g2:#3B2A8F}
.g-pair-peek,.st-pair-peek{--g1:#86E39A;--g2:#25603F}
.g-hue-hunt,.st-hue-hunt{--g1:#FF8BC8;--g2:#5B2A9A}
.g-stack-snap,.st-stack-snap{--g1:#FFB27A;--g2:#7A3A2A}
.g-orbit-tap,.st-orbit-tap{--g1:#8FA2FF;--g2:#2B2E8F}
.g-slide-path,.st-slide-path{--g1:#4FD8FF;--g2:#145B7A}
.st-trace-trail,.st-pop-quiz,.st-piano-rush,.st-pair-peek,.st-hue-hunt,.st-stack-snap,.st-orbit-tap,.st-slide-path{background:radial-gradient(100% 90% at 72% 18%,color-mix(in srgb,var(--g1) 52%,transparent),transparent 64%),linear-gradient(160deg,color-mix(in srgb,var(--g2) 74%,#0A0F21),#0E1430)}
:root[data-theme="light"] .gc-bg,:root[data-theme="light"] .st-trace-trail,:root[data-theme="light"] .st-pop-quiz,:root[data-theme="light"] .st-piano-rush,:root[data-theme="light"] .st-pair-peek,:root[data-theme="light"] .st-hue-hunt,:root[data-theme="light"] .st-stack-snap,:root[data-theme="light"] .st-orbit-tap,:root[data-theme="light"] .st-slide-path{background:radial-gradient(100% 90% at 75% 15%,color-mix(in srgb,var(--g1) 40%,#fff),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--g1) 24%,#fff),color-mix(in srgb,var(--g1) 10%,#fff))}
:root[data-theme="light"] .gc-art::after{background:none}
/* league badge composite: approved star + crisp tier code; C/B/A add structural underframes */
.lgb{position:relative;display:inline-grid;place-items:center}
.lgb img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 0 5px rgba(196,206,255,.35))}
.lgb b{position:absolute;z-index:2;left:50%;bottom:-2px;transform:translateX(-50%);padding:0 4px;border-radius:6px;background:var(--surface-2);color:var(--action-ink);font-size:max(9px,calc(var(--lgb,22px)*.36));font-weight:900;line-height:1.25;box-shadow:0 0 0 1px var(--line-2)}
.lgb-C::before,.lgb-B::before,.lgb-A::before{content:"";position:absolute;inset:-6%;border-radius:50%;z-index:0}
.lgb-C::before{background:radial-gradient(circle,transparent 58%,#B9B4E8 60%,#9C95DA 68%,transparent 70%)}
.lgb-B::before{background:conic-gradient(#8B8CF8 0 20%,transparent 0 25%,#8B8CF8 0 45%,transparent 0 50%,#8B8CF8 0 70%,transparent 0 75%,#8B8CF8 0 95%,transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%,#000 69%,transparent 70%);mask:radial-gradient(circle,transparent 60%,#000 61%,#000 69%,transparent 70%)}
.lgb-A::before{inset:-10%;background:conic-gradient(from 20deg,#79D7C3,#8B8CF8,#C3B7FF,#79D7C3);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);animation:av-rot 9s linear infinite}
.st-league .lgb b,.capsule .lgb b{display:none}
/* catalog (/games): search + one filter line + horizontal rows */
.cat-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.cat-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--action-2),0 0 16px rgba(124,108,255,.25)}
.cat-search input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;color:var(--ink);outline:none}
.cat-search .glyph{width:19px;height:19px}
.cat-note{font-size:12.5px;color:var(--ink-2);margin:-4px 2px 10px}
.cat-filter{display:flex;gap:6px;margin:10px 0 12px;overflow-x:auto;scrollbar-width:none}
.cat-filter::-webkit-scrollbar{display:none}
.cat-filter button{flex:none;height:32px;padding:0 13px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.cat-filter button[aria-selected="true"]{background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;box-shadow:0 4px 14px rgba(91,92,240,.45)}
.cat-list{display:grid;gap:8px}
.crow{--g1:#8B8CF8;--g2:#2B2E8F;display:flex;align-items:center;gap:10px;min-height:86px;padding:9px 10px 9px 9px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.crow .top{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--ink);text-align:left}
.crow-art{position:relative;display:grid;place-items:center;width:66px;height:66px;flex:none;border-radius:15px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.crow-art>.art{width:58px;height:58px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.crow .tt{min-width:0}
.crow .name{display:block;font-size:15.5px;font-weight:850}
.crow .mech{display:block;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow-prize{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--ink-3)}
.crow-prize small{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.crow-prize b{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;font-weight:850;color:var(--gold-ink)}
.crow-prize b.na{color:var(--ink-3);font-size:12px}
.crow-prize .art{width:16px;height:16px}
.crow .gc-play{flex:none;width:auto;min-width:70px;height:36px}
@media (max-width:359px){
 :root{--gutter:12px}
 .hdr{grid-template-columns:36px minmax(0,1fr) 54px minmax(0,1fr) 36px;gap:4px}
 .hd-btn{width:36px}
 .capsule{gap:4px;padding:0 3px 0 4px;font-size:13.5px}.capsule .cap-ic .art{width:22px;height:22px}.capsule .cap-plus{width:19px;height:19px}
 .avatar-btn{--av:40px}
 .goal-card{grid-template-columns:38px minmax(0,1fr) auto;gap:8px}.goal-card .segs{display:none}
 .tiles{gap:6px}.tile{font-size:11px}
 .gc-art{height:84px}.gc-meta{grid-template-columns:1fr}.gc-m+.gc-m{padding:4px 0 0;border:0}
}

/* ---------- desktop shell (≥1024 px): sidebar + centred content, 4 cards per row ---------- */
.side{display:none}
@media (min-width:1024px){
 .with-side{display:grid;grid-template-columns:236px minmax(0,1fr);max-width:1440px;margin:0 auto;min-height:100vh}
 .side{display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;padding:22px 14px;background:linear-gradient(180deg,rgba(20,27,56,.92),rgba(13,19,44,.96));box-shadow:inset -1px 0 0 var(--line)}
 :root[data-theme="light"] .side{background:#fff}
 .side .brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:-.02em;margin:0 8px 20px;color:var(--ink)}
 .side .brand .art{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(124,108,255,.5))}
 .side a{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:13px;color:var(--ink-2);font-weight:700;font-size:15px;transition:background .2s,color .2s}
 .side a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
 .side a[aria-current="page"]{background:linear-gradient(135deg,rgba(124,108,255,.28),rgba(91,92,240,.14));color:#fff;box-shadow:inset 0 0 0 1px rgba(124,108,255,.35)}
 .side a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--action-2),var(--cyan));box-shadow:0 0 10px var(--cyan)}
 .side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid var(--line);color:var(--ink)}
 .side .me .art{border-radius:50%;overflow:hidden}
 .shell{padding:14px 32px 40px;max-width:1120px}
 .topbar{margin:0;padding:4px 0 0;background:transparent}
 .topbar.scrolled{margin:0 -32px;padding:4px 32px 4px}
 .hdr{grid-template-columns:1fr minmax(0,170px) 64px minmax(0,170px) 1fr}
 .hdr .menu-btn{visibility:hidden}
 .capsule{height:42px}
 .status-row{max-width:520px;width:100%;margin:8px auto 0}
 .games{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .gc-art{height:120px}
 .tiles{grid-template-columns:repeat(4,minmax(0,160px));justify-content:start}
 .phead{margin:0 0 10px;padding:6px 0}
 .cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:1023px){.games{grid-template-columns:repeat(3,minmax(0,1fr))}.cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}.shell{max-width:820px}}

/* ---------- sheets (dialog) ---------- */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:560px;max-height:min(88vh,860px,calc(100dvh - var(--safe-t) - 8px));padding:0;border:0;border-radius:28px 28px 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3);overflow:hidden;display:flex;flex-direction:column}
dialog.sheet:not([open]){display:none}
dialog.sheet[open]{animation:sheet-in var(--t-sheet) var(--ease-out)}
dialog.sheet.closing{animation:sheet-out .18s ease-in forwards}
dialog.sheet::backdrop{background:rgba(12,15,30,.48);animation:fade-in var(--t-sheet) ease}
@keyframes sheet-in{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
@keyframes sheet-out{to{transform:translateY(18px);opacity:0}}
@keyframes fade-in{from{opacity:0}}
.sheet-grab{width:44px;height:5px;border-radius:5px;background:var(--line-2);margin:10px auto 0;flex:none}
.sheet-top{display:flex;align-items:center;gap:10px;padding:8px 14px 0 20px;flex:none}
.sheet-top h2{flex:1;font-size:20px;font-weight:800;letter-spacing:-.01em}
.sheet-top .icon-btn{width:40px;height:40px;border-radius:50%;background:var(--inset)}
.sheet-body{padding:12px 20px calc(20px + var(--safe-b));overflow:auto;overscroll-behavior:contain}
.sheet-foot{padding:12px 20px calc(16px + var(--safe-b));border-top:1px solid var(--line);flex:none}
@media (min-width:700px){dialog.sheet{inset:0;margin:auto;border-radius:28px;max-height:84vh}dialog.sheet .sheet-grab{display:none}}

/* explore / profile sheet */
.me-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 4px;text-align:center}
.me-head .avatar-btn{width:92px;height:92px;padding:4px}
.me-head .avatar-btn .lvl-badge{height:20px;line-height:20px;font-size:12px;min-width:32px}
.me-head h3{font-size:21px;font-weight:850;margin-top:6px}
.me-head p{color:var(--ink-2);font-size:14px}
.me-bal{display:flex;justify-content:center;gap:10px;margin:10px 0 4px}
.me-bal .capsule{height:40px}
.explore-title{font-size:21px;font-weight:850;margin:18px 2px 10px}

/* context menu (long press / More) */
.ctx-head{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:8px}
.ctx-head .thumb{width:64px;height:64px;border-radius:14px;overflow:hidden;flex:none}
.ctx-head .thumb .art{width:100%;height:100%}
.ctx-head b{display:block;font-size:17px}
.ctx-head small{color:var(--ink-2)}
.ctx-list .list-row{padding:10px 6px;min-height:52px}
.ctx-list .list-row .glyph{color:var(--ink)}
.press-hold{transition:transform .45s linear}
.press-hold.holding{transform:scale(.985)}

/* how it works sheet */
.howto-steps{display:grid;gap:10px;counter-reset:step}
.howto-step{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.howto-step .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--action-2),var(--action));color:var(--on-action);font-weight:850;font-size:14px;flex:none}
.howto-step b{display:block;font-size:15.5px;font-weight:750}
.howto-step p{color:var(--ink-2);font-size:14px;margin-top:2px}
.howto-step .ex{display:inline-flex;margin-top:8px}
.rules{margin-top:14px;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.rules details{border-top:1px solid var(--line)}
.rules details:first-child{border-top:0}
.rules summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;font-weight:700;cursor:pointer;list-style:none}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.rules details[open] summary::after{transform:rotate(225deg)}
.rules .rb{padding:0 16px 14px;color:var(--ink-2);font-size:14px}
.rules .rb ul{margin:0;padding-left:18px}
.rules .rb li{margin:4px 0}
.rules table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.rules td,.rules th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.rules th{color:var(--ink-3);font-weight:650}

/* ---------- energy hero (chest bonus + no-energy sheets) ---------- */
.energy-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 4px}
.energy-hero .art{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(124,108,255,.55))}
.energy-hero .big{font-size:42px;font-weight:900;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.energy-hero .sub{font-size:15px;color:var(--ink-2);font-weight:600}
.energy-dots{display:flex;gap:4px;justify-content:center;margin:12px auto 4px;max-width:300px;flex-wrap:wrap}
.energy-dots i{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.1)}
.energy-dots i.on{background:linear-gradient(180deg,var(--cyan),var(--action-2));box-shadow:0 0 6px rgba(79,216,255,.6)}

/* ---------- game page = the game's own home: hero, facts, prize, Ranked/Practice, Play, tiles ---------- */
.gp{display:grid;gap:10px;max-width:560px;margin:0 auto}
.gp-hero{position:relative;height:176px;border-radius:22px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line),var(--sh-2)}
.gp-hero .gc-bg{position:absolute;inset:0;z-index:-1}
.gp-art{position:absolute;inset:4px 0 40px;display:grid;place-items:center;z-index:0}
.gp-art>.art{width:100%;height:100%}
.gp-art>.art svg,.gp-art>.art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));animation:gp-float 5.5s ease-in-out infinite}
@keyframes gp-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015)}}
.gp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:86px;z-index:0;background:linear-gradient(180deg,transparent,rgba(8,12,28,.9));pointer-events:none}
.gp-id{position:absolute;left:14px;right:56px;bottom:11px;z-index:2}
.gp-id h2{font-size:26px;font-weight:900;letter-spacing:-.025em;line-height:1.05;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.gp-id p{font-size:13.5px;color:rgba(226,232,255,.86);margin-top:3px}
.gp-hero .gc-more{top:10px;right:10px;width:32px;height:32px}
.gp-sparks{position:absolute;inset:0;z-index:1;pointer-events:none}
.gp-sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px color-mix(in srgb,var(--g1) 80%,transparent);opacity:0;animation:gp-spark 4.2s ease-in-out infinite}
.gp-sparks i:nth-child(1){left:12%;top:24%;animation-delay:.2s}.gp-sparks i:nth-child(2){left:84%;top:18%;animation-delay:1.1s}.gp-sparks i:nth-child(3){left:70%;top:58%;animation-delay:2.2s}.gp-sparks i:nth-child(4){left:26%;top:62%;animation-delay:3s}.gp-sparks i:nth-child(5){left:52%;top:12%;animation-delay:1.7s}
@keyframes gp-spark{0%,100%{opacity:0;transform:translateY(6px) scale(.4)}40%{opacity:.95;transform:translateY(-4px) scale(1)}70%{opacity:.3;transform:translateY(-12px) scale(.7)}}
.gp-facts{display:flex;gap:6px;flex-wrap:wrap}
.gp-fact{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:10px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:700;color:var(--ink)}
.gp-fact .glyph{width:15px;height:15px;color:var(--action-ink)}
.gp-fact.heart .glyph{color:#FF6B81;fill:#FF6B81}
.gp-prize{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:70px;padding:9px 12px;border-radius:18px;background:radial-gradient(170px 90px at 6% 50%,rgba(247,197,78,.17),transparent 72%),var(--glass);box-shadow:inset 0 0 0 1px rgba(247,197,78,.24),var(--sh-1);text-align:left;color:var(--ink);overflow:hidden;transition:transform var(--t-press) var(--ease)}
.gp-prize:active{transform:scale(.985)}
.gp-prize>.art{width:48px;height:48px;filter:drop-shadow(0 0 12px rgba(247,197,78,.5));animation:gp-gem 3.6s ease-in-out infinite}
@keyframes gp-gem{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}}
.gp-prize .pv{min-width:0}
.gp-prize b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.gp-prize .k{display:block;font-size:12px;color:var(--ink-2);font-weight:650}
.gp-prize .none{display:block;font-size:16px;font-weight:800;color:var(--ink-2)}
.gp-prize .chev{width:18px;height:18px;color:var(--ink-3)}
.gp-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gp-mode button{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-height:58px;padding:8px 10px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);text-align:left;color:var(--ink);transition:background .2s,box-shadow .2s,transform var(--t-press) var(--ease)}
.gp-mode button:active{transform:scale(.97)}
.gp-mode .mi{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--action-soft);color:var(--action-ink)}
.gp-mode .mi .glyph{width:18px;height:18px}
.gp-mode b{display:block;font-size:14.5px;font-weight:850}
.gp-mode small{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.25}
.gp-mode button[aria-checked="true"]{background:linear-gradient(135deg,rgba(124,108,255,.44),rgba(91,92,240,.2));box-shadow:inset 0 0 0 1.5px rgba(160,150,255,.78),0 0 22px rgba(124,108,255,.24)}
.gp-mode button[aria-checked="true"] .mi{background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;box-shadow:0 0 12px rgba(124,108,255,.6)}
:root[data-theme="light"] .gp-mode button[aria-checked="true"]{background:var(--action-soft);box-shadow:inset 0 0 0 2px var(--action)}
.gp-play{height:50px;min-height:50px;border-radius:15px;font-size:16px}
.gp-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);margin:-2px 0 0}
.gp-meta b{color:var(--ink);font-weight:850}.gp-meta i{color:var(--ink-3);font-style:normal}
.gp-meta span{display:inline-flex;align-items:center;gap:3px}
.gp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gp-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:72px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-size:11.5px;font-weight:750;color:var(--ink);text-align:center;line-height:1.15;padding:0 4px;transition:transform var(--t-press) var(--ease),box-shadow .2s}
.gp-tile:hover{box-shadow:inset 0 0 0 1px var(--line-hi),0 0 16px rgba(124,108,255,.2)}
.gp-tile:active{transform:scale(.95)}
.gp-tile .art{display:grid;place-items:center;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.gp-tile .art .glyph{width:24px;height:24px;color:var(--action-ink)}
.gp-tile .badge{position:absolute;top:-6px;right:-2px;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;font-size:11px;font-weight:850;line-height:18px;box-shadow:0 0 0 2px var(--page),0 0 10px rgba(124,108,255,.6)}
.gp-note{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.2);font-size:12.5px;color:var(--ink)}
.gp-note .glyph{color:var(--action-ink)}
.gp-note.warn{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(247,197,78,.2)}.gp-note.warn .glyph{color:var(--gold-ink)}
.gp-how,.howto-row{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 14px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-weight:750;font-size:14.5px;text-align:left;color:var(--ink);transition:transform var(--t-press) var(--ease)}
.gp-how:active,.howto-row:active{transform:scale(.985)}
.gp-how .glyph,.howto-row .glyph{color:var(--action-ink)}
.gp-how .chev,.howto-row .chev{margin-left:auto;color:var(--ink-3)}
.gp-how small,.howto-row small{display:block;font-weight:500;color:var(--ink-2);font-size:12.5px}
@media (min-width:1024px){.gp{max-width:620px}.gp-hero{height:220px}}

/* ---------- play shell (dark stage) ---------- */
body.playing{background:var(--stage)}
.play{min-height:100vh;color:var(--stage-ink);background:radial-gradient(120% 70% at 50% 0%,var(--play-glow,#1E2550) 0%,var(--stage) 60%);padding:calc(4px + var(--safe-t)) var(--gutter) calc(16px + var(--safe-b));display:flex;flex-direction:column}
.play .phead{background:transparent;color:var(--stage-ink);margin-bottom:6px}
.play .phead .icon-btn{background:rgba(255,255,255,.08);box-shadow:none;color:var(--stage-ink)}
.hud{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px}
.hud-tile{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:8px 12px;border-radius:16px;background:var(--stage-tile);box-shadow:inset 0 0 0 1px var(--stage-line);text-align:center}
.hud-tile .k{font-size:11.5px;color:var(--stage-ink-2);font-weight:600;letter-spacing:.01em}
.hud-tile .v{font-size:24px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.hud-tile .v.timer.low{color:#FF8D86}
.hud-tile .v.accent{color:#B9B6FF}
.hud-tile.hearts .v{display:flex;gap:4px;justify-content:center}
.hud-tile.hearts svg{width:24px;height:24px}
.hud-sub{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 2px;font-size:13.5px;color:var(--stage-ink-2);font-weight:600}
.hud-sub .pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:15px;background:var(--stage-tile);box-shadow:inset 0 0 0 1px var(--stage-line);color:var(--stage-ink)}
.dots-prog{display:inline-flex;gap:6px}.dots-prog i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}.dots-prog i.on{background:var(--mint)}.dots-prog i.cur{background:#fff}
.board-area{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:300px;margin:10px 0}
.board-feedback{min-height:22px;text-align:center;font-weight:700;color:var(--stage-ink-2);font-size:14px}
.tool-dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:10px;border-radius:18px;background:var(--stage-tile);box-shadow:inset 0 0 0 1px var(--stage-line);color:var(--stage-ink);transition:transform var(--t-press),background-color var(--t-press)}
.tool:active:not(:disabled){transform:scale(.97)}
.tool:hover:not(:disabled){background:rgba(255,255,255,.085)}
.tool .tl{display:flex;align-items:center;gap:8px;font-weight:750;font-size:15px}
.tool .tl .glyph{width:22px;height:22px}
.tool .ad-tag{background:rgba(165,167,255,.18);color:#C9CAFF}
.tool small{font-size:12px;color:var(--stage-ink-2)}
.tool:disabled{opacity:.5;cursor:not-allowed}
.tool.armed{box-shadow:inset 0 0 0 2px #A5A7FF;background:rgba(165,167,255,.12)}
.tool.is-loading .tl{opacity:.4}
.boost-note{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:10px 0;border-radius:14px;background:var(--stage-tile);box-shadow:inset 0 0 0 1px var(--stage-line);font-size:13.5px;color:var(--stage-ink-2)}
.boost-note .glyph{color:#B9B6FF}
.boost-note.on{color:#FFE1A0;box-shadow:inset 0 0 0 1px rgba(255,214,120,.35)}
.play-toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:30px;font-weight:900;font-style:italic;letter-spacing:-.02em;pointer-events:none;text-shadow:0 4px 20px rgba(139,140,248,.55);animation:burst .55s var(--ease-out) forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.float-score{position:absolute;pointer-events:none;font-weight:850;font-size:16px;color:#C9F7EA;animation:float-up .8s var(--ease-out) forwards}
@keyframes float-up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-26px)}}
.pause-veil{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,13,28,.72);border-radius:20px;text-align:center;color:#fff;font-weight:700}
@media (min-width:1024px){.play-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;max-width:1180px;margin:0 auto;width:100%}.play-side{display:grid;gap:14px;align-content:start;padding-top:62px}.play-side .panel{padding:16px;border-radius:20px;background:var(--stage-tile);box-shadow:inset 0 0 0 1px var(--stage-line)}}
@media (max-width:1023px){.play-side{display:none}}

/* ---------- results ---------- */
.res{display:grid;gap:14px}
.res-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 2px}
.res-hero .art{width:150px;height:110px}
.res-hero h2{font-size:32px;font-weight:900;letter-spacing:-.03em;margin-top:6px}
.res-hero p{color:var(--ink-2);font-size:15px}
.res-score{padding:16px;border-radius:22px;background:var(--surface);box-shadow:var(--sh-2);text-align:center}
.res-score .k{font-size:14px;color:var(--ink-2);font-weight:650}
.res-score .v{font-size:46px;font-weight:900;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.res-score .badge-new{display:inline-flex;align-items:center;gap:5px;margin-top:6px}
.stat-strip{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-radius:20px;background:var(--surface);box-shadow:var(--sh-2);overflow:hidden}
.stat-strip>div{padding:12px 8px;text-align:center}
.stat-strip>div+div{border-left:1px solid var(--line)}
.stat-strip .k{font-size:12.5px;color:var(--ink-2);font-weight:600}
.stat-strip .v{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-strip .v.ok{color:var(--success)}.stat-strip .v.bad{color:var(--danger)}
.rewards h3{font-size:19px;font-weight:850;margin:4px 2px 10px}
.reward-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reward-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1);text-align:center}
.reward-tile .art{width:44px;height:44px}
.reward-tile b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.reward-tile small{font-size:12.5px;color:var(--ink-2)}
.reward-tile.off{opacity:.5}
.reward-tile.off b{font-size:15px}
.res-status{display:grid;gap:8px}
.res-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res-actions .btn{min-height:52px}
.confetti{position:absolute;inset:-10px 0 auto;height:140px;pointer-events:none;overflow:visible}
.confetti i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;opacity:0;animation:conf 1.4s var(--ease-out) forwards}
@keyframes conf{0%{opacity:0;transform:translate(0,10px) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,90px)) rotate(var(--rot,180deg))}}

/* ---------- rankings (shared shell; podiums in pald-games.css) ---------- */
.rk-top{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.rk-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;background:var(--inset)}
.rk-tabs button{min-height:40px;border-radius:12px;font-weight:700;color:var(--ink-2)}
.rk-tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--action-2),var(--action));color:var(--on-action);box-shadow:var(--sh-act)}
.countdown{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.countdown .glyph{width:18px;height:18px;color:var(--ink-2)}
.pool-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1);text-align:left}
.pool-card .art{width:44px;height:44px}
.pool-card b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.pool-card small{display:block;color:var(--ink-2);font-size:12.5px}
.pool-card .glyph{margin-left:auto;color:var(--ink-3)}
.qual-card{padding:14px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1)}
.qual-card .row b{font-size:15px}
.qual-card .meter{margin-top:10px;height:10px}
.qual-card .meter>i{background:linear-gradient(90deg,#9BE6D5,#4FC1A6)}
/* Funded top three (2026-10-21): prizes the operator reserved before any ad was watched. */
.rk-guarantees{padding:14px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1.5px var(--gold-soft)}
.rkg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rkg-head span{display:inline-flex;align-items:center;gap:6px;font-size:15px}
.rkg-head span .glyph{width:16px;height:16px;color:var(--gold-ink)}
.rkg-head small{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--mint-soft);color:var(--mint-ink);font-size:11.5px;font-weight:750;white-space:nowrap}
.rkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.rkg-prize{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--inset);text-align:center;min-width:0}
.rkg-prize:first-child{background:var(--gold-soft)}
.rkg-prize>small:first-child{font-weight:800;color:var(--ink-2);font-size:12px}
.rkg-prize strong{display:inline-flex;align-items:center;gap:4px;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rkg-prize strong .art{width:20px;height:20px;flex:none}
.rkg-prize span{font-size:11.5px;color:var(--ink-2)}
.rkg-prize em{font-style:normal;font-size:11px;font-weight:700;color:var(--mint-ink)}
.rkg-prize>small:last-child:not(:first-child){font-size:11px;color:var(--ink-3)}
.rk-guarantees>p{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.rkg-bonus{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.rkg-bonus span{color:var(--ink-2)}.rkg-bonus b{font-variant-numeric:tabular-nums}.rkg-bonus small{margin-left:auto;color:var(--ink-3);font-size:12px}
@media(max-width:360px){.rkg-prize strong{font-size:15px}}
.rk-list{border-radius:20px;background:var(--surface);box-shadow:var(--sh-2);overflow:hidden}
.rk-head,.rk-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto 72px;gap:8px;align-items:center;padding:0 14px}
.rk-head{min-height:38px;font-size:12px;font-weight:650;color:var(--ink-3);border-bottom:1px solid var(--line)}
.rk-head span:nth-child(3),.rk-head span:nth-child(4){text-align:right}
.rk-row{min-height:54px;border-bottom:1px solid var(--line)}
.rk-row:last-child{border-bottom:0}
.rk-row .place{font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rk-row .who{display:flex;align-items:center;gap:10px;min-width:0}
.rk-row .who .art{width:32px;height:32px;border-radius:50%;overflow:hidden}
.rk-row .who b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-row .who small{display:block;font-size:12px;color:var(--ink-2)}
.rk-row .score{text-align:right;font-weight:750;font-variant-numeric:tabular-nums}
.rk-row .prize{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-weight:800;font-variant-numeric:tabular-nums}
.rk-row .prize .art{width:18px;height:18px}
.rk-row .prize.none{color:var(--ink-3);font-weight:600;font-size:13px}
.rk-row.me{background:var(--action-soft);box-shadow:inset 3px 0 0 var(--action)}
.rk-row.me .place,.rk-row.me b{color:var(--action-ink)}
.rk-gap{text-align:center;color:var(--ink-3);letter-spacing:.3em;padding:4px 0;border-bottom:1px solid var(--line)}
.rk-pin{position:sticky;bottom:calc(10px + var(--safe-b));z-index:6;margin-top:10px;border-radius:18px;background:var(--surface);box-shadow:0 10px 30px rgba(25,33,57,.18),inset 0 0 0 2px var(--action)}
.rk-pin .rk-row{border:0;background:transparent;box-shadow:none}
.podium-wrap{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sh-2)}
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:8px;padding:16px 12px 14px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pod .face{position:relative;width:62px;height:62px;border-radius:50%;padding:3px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.pod.p1 .face{width:76px;height:76px}
.pod .face .art{width:100%;height:100%;border-radius:50%;overflow:hidden}
.pod .medal{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;box-shadow:0 0 0 2px #fff}
.pod.p1 .medal{background:linear-gradient(180deg,#FFD66B,#E6A21C)}.pod.p2 .medal{background:linear-gradient(180deg,#D7DCEA,#9AA3BC)}.pod.p3 .medal{background:linear-gradient(180deg,#F5B98A,#D9814A)}
.pod .nm{margin-top:14px;font-weight:800;font-size:14.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .sc{font-weight:850;font-size:17px;font-variant-numeric:tabular-nums}
.pod .sub{font-size:11.5px;opacity:.8}
.pod .pz{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-weight:900;font-size:17px;font-variant-numeric:tabular-nums}
.pod .pz .art{width:22px;height:22px}
.pod .pz.none{font-size:12px;font-weight:650;opacity:.75}
.pod.empty .face{background:rgba(255,255,255,.35);box-shadow:none}
.prizes-later{display:flex;gap:12px;align-items:flex-start;padding:12px 4px}
.prizes-later .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--inset);flex:none}

/* ---------- loading, empty, error, toast ---------- */
.boot{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.boot .art{width:72px;height:72px;margin:0 auto 14px;animation:boot-pulse 1.6s ease-in-out infinite}
.boot h1{font-size:26px;font-weight:900;letter-spacing:-.02em}
.boot p{color:var(--ink-2);margin-top:4px}
.boot .bar{width:160px;height:5px;border-radius:5px;background:var(--inset-2);margin:18px auto 0;overflow:hidden}
.boot .bar i{display:block;height:100%;width:var(--v,10%);background:linear-gradient(90deg,var(--action-2),var(--action));border-radius:inherit;transition:width .3s}
@keyframes boot-pulse{50%{transform:scale(1.06)}}
.sk{position:relative;overflow:hidden;background:var(--inset);border-radius:14px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.3s infinite}
:root[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk.line{height:14px;border-radius:7px}.sk.circle{border-radius:50%}
.slow-banner{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--coral-soft);margin-top:16px}
.slow-banner .glyph{color:var(--danger)}
.slow-banner b{display:block}
.slow-banner small{color:var(--ink-2)}
.empty:where(:not(.tp,.qt,.eq,.mc,.pg,.podium-player)){display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 12px}
.empty .art{width:96px;height:96px;opacity:.95}
.empty h3{font-size:18px;font-weight:800}
.empty p{color:var(--ink-2);max-width:320px}
.toasts{position:fixed;left:0;right:0;bottom:calc(16px + var(--safe-b));z-index:60;display:grid;justify-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{max-width:420px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:#1D2240;color:#fff;font-weight:650;font-size:14.5px;box-shadow:0 14px 40px rgba(0,0,0,.3);animation:toast-in .25s var(--ease-out);pointer-events:auto}
.toast .art{width:24px;height:24px}
.toast.leave{animation:toast-out .2s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:70;padding:calc(8px + var(--safe-t)) 16px 8px;background:#C9443D;color:#fff;font-weight:700;text-align:center;font-size:14px}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
:root.reduce-motion *,:root.reduce-motion *::before,:root.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* ---------- rankings hub (V3): tabs, chips, period, compact stage ≤180 px, 56 px rows ---------- */
.rk{display:grid;gap:10px}
.rk-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--inset)}
.rk-seg button{height:36px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink-2)}
.rk-seg button[aria-selected="true"]{background:var(--surface);color:var(--action-ink);box-shadow:var(--sh-1)}
.rk-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.rk-chips::-webkit-scrollbar{display:none}
.rk-chip{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s,transform var(--t-press)}
.rk-chip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--action),0 4px 12px rgba(84,89,201,.25)}
.rk-chip:active{transform:scale(.95)}
.rk-title{display:flex;align-items:center;gap:10px}
.rk-title .stage{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none}
.rk-title .stage.glob{background:var(--gold-soft)}
.rk-title b{display:block;font-size:17px;font-weight:850}
.rk-title small{display:block;font-size:12.5px;color:var(--ink-2)}
.rk-period{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rk-week{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:12px;background:var(--inset);flex:1;max-width:230px}
.rk-week button{height:32px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-2)}
.rk-week button[aria-selected="true"]{background:linear-gradient(180deg,var(--action-2),var(--action));color:var(--on-action)}
.rk .countdown{height:36px;font-size:13px}
.rk .pool-card{min-height:56px;padding:8px 12px}
.rk .pool-card b{font-size:17px}
.rk .pool-card b.np{font-size:14.5px;color:var(--ink-2)}
.rk-stage{border-radius:22px;overflow:hidden}
.rk-rows{list-style:none;margin:0;padding:0}
.rk .rk-row{min-height:56px}
.rk .rk-list{box-shadow:var(--sh-1)}
.prizes-later{border-radius:18px;background:var(--surface);box-shadow:var(--sh-1);padding:12px}
.prizes-later b{font-size:14.5px}
/* generic podium (Global and fallback): three blocks of different heights */
.pod-generic{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:8px;height:180px;padding:12px 12px 0;background:radial-gradient(120% 100% at 50% 0,#EDEBFF,#DCD9FF)}
:root[data-theme="dark"] .pod-generic{background:radial-gradient(120% 100% at 50% 0,#2A2766,#171A3A)}
.pg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:100%;text-align:center;color:var(--ink)}
.pg .face{position:relative;width:46px;height:46px;border-radius:50%;padding:2px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.pg-1 .face{width:54px;height:54px}
.pg .face .art{width:100%;height:100%;border-radius:50%;overflow:hidden}
.pg .medal{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:#9AA3BC;box-shadow:0 0 0 2px #fff}
.pg-1 .medal{background:linear-gradient(180deg,#FFD66B,#E6A21C)}.pg-3 .medal{background:linear-gradient(180deg,#F5B98A,#D9814A)}
.pg .nm{margin-top:9px;font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .sc{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.pg small{font-size:11px;color:var(--ink-2)}
.pg .pz{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:850}
.pg .pz .art{width:16px;height:16px}.pg .pz.none{font-size:11px;font-weight:650;color:var(--ink-3)}
.pg .block{display:block;width:100%;margin-top:6px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#FFFFFF,#E8E7FF);box-shadow:inset 0 1px 0 #fff}
:root[data-theme="dark"] .pg .block{background:linear-gradient(180deg,#3A3880,#262457)}
.pg-1 .block{height:44px}.pg-2 .block{height:30px}.pg-3 .block{height:20px}
.pg.empty{opacity:.55}
/* league page */
.lg-hero{display:flex;align-items:center;gap:14px;padding:12px;border-radius:20px;background:var(--surface);box-shadow:var(--sh-2)}
.lg-hero>div{flex:1;min-width:0}
.lg-hero h2{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
.lg-hero .meter{height:8px;margin-bottom:4px}
.lg-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lg-group{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);font-size:12.5px;font-weight:800;color:var(--ink-2)}
.lg-group.cur{box-shadow:inset 0 0 0 2px var(--action),var(--sh-1);color:var(--action-ink)}

/* ---------- announcement canvas + in-game sound control (folded) ---------- */
.announcement-canvas{position:relative;width:min(100%,calc((100dvh - 190px) * 9 / 14));margin-inline:auto;aspect-ratio:9/14;min-height:280px;overflow:hidden}
.announcement-element{position:absolute;overflow:hidden}
.announcement-element img{max-width:100%}
.sound-control{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:12px;background:var(--stage-tile);color:var(--stage-ink)}
.sound-control[aria-pressed=false]{opacity:.65}
.note{padding:10px 12px;border-radius:12px;background:var(--inset);color:var(--ink-2);font-size:13px;line-height:1.45}
.note.warn{background:var(--gold-soft);color:var(--ink)}

/* Display face: headings, hero titles and the big numbers (tabular so counters never jitter). */
h1,h2,h3,.t-title,.t-sec,.h-title,.sheet-top h2,.explore-title,.ex-title,.ex-head h3,.gp-id h2,.gp-prize b,.hud-tile .v,.res-hero h2,.res-score .v,.stat-strip .v,.reward-tile b,.pool-card b,.lg-hero h2,.lv-hero h2,.ready h2,.ready .count,.chest-reveal .cr-amt,.promo h2,.qz-timer b,.arcade-native-stats b,.arcade-complete h2,.arcade-result-metrics b,.rh-tt b,.en-big,.bx-pct,.amt.lg,.amt.md,.rk-row .score,.pg .sc,.podium-score,.cd-t,.coffer b,.rk-cta b{font-family:var(--font-display);letter-spacing:-.01em}
.hud-tile .v,.res-score .v,.stat-strip .v,.en-big,.bx-pct,.rk-row .score,.pg .sc,.podium-score,.cd-t,.arcade-native-stats b{font-variant-numeric:tabular-nums}

/* Narrow phones 360–399 px (most Android screens): balance numbers get room to show — 1,234,617 becomes 1.2M at a
   readable size instead of an ellipsis. Smaller coin icon (beats the inline art size) and "+" button, tighter columns. */
@media (max-width:399px){
 .hdr{grid-template-columns:34px minmax(0,1fr) 54px minmax(0,1fr) 34px;gap:4px}
 .hd-btn{width:34px}
 .avatar-btn{--av:40px}
 .hdr .capsule{gap:3px;padding:0 3px 0 4px;font-size:13.5px}
 .hdr .capsule .cap-ic .art{width:20px!important;height:20px!important}
 .hdr .capsule .cap-ic .art img{width:100%;height:100%}
 .hdr .capsule .cap-plus{width:18px;height:18px}
 .hdr .capsule .cap-plus .glyph{width:11px;height:11px}
}

/* Operator 3D art in small slots (2026-10-20): the new icon set replaces flat glyphs where it carries meaning. */
.gp-mode .mi:has(.art){background:none}
.gp-mode .mi .art{width:30px;height:30px}
.gp-fact .art{width:16px;height:16px}
.gc-m b .art{width:15px;height:15px}
.goal-ring .art{position:relative;width:22px;height:22px}
.view-state>.art{width:88px;height:88px}
.gp-how>.art,.howto-row>.art{width:26px;height:26px}
.rk-cta-ic:has(.art){background:none;width:36px;height:36px}
.rk-cta-ic .art,.prizes-later .ic .art{width:32px;height:32px}
.sx-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sx-seg button .art{width:18px;height:18px}
.tool .tl .art{width:24px;height:24px}
.notice>.art{flex:none}
/* A game the operator paused: calm and clear, never a surprise error on tap. */
.gcard.resting .gc-art{filter:saturate(.45) brightness(.8)}
.gcard.resting .gc-play{background:var(--glass);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.gc-rest{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 5px;border-radius:999px;background:rgba(10,14,34,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#E7E9FF;font-size:11.5px;font-weight:800}
.gc-rest .art{width:18px;height:18px}

/* Desktop (2026-10-20): the shortcut tiles share the row as compact horizontal cards (they used to stop at
   half width), and pages with wide boards read in a centred column like the other secondary pages. */
@media (min-width:1024px){
 .tiles{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:10px}
 .tile{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto;justify-items:start;gap:10px;min-height:88px;padding:10px 12px;font-size:14px}
 .tile .tile-label{justify-items:start;text-align:left}
 .tile .tile-ic{width:44px;height:44px}
 .tile .art{width:44px;height:44px}
 .rk{width:100%;max-width:760px;margin:0 auto}
}
@media (min-width:1024px){.topbar.scrolled{background:color-mix(in srgb,var(--page) 95%,transparent)}}

/* Global ranking shortcut: the funded total shares the same snapshot as its board. */



.tile-global .home-global-gem .art{width:38px;height:38px;animation:global-gem-float 3.6s ease-in-out infinite}
.home-global-prize{color:var(--gold-ink);font-size:11px;font-variant-numeric:tabular-nums;max-width:100%;line-height:1.25;overflow-wrap:anywhere}
.home-global-prize small{font-size:9px;font-weight:600}
@keyframes global-gem-float{0%,100%{transform:translateY(2px) rotate(-5deg)}50%{transform:translateY(-3px) rotate(5deg)}}
@media(max-width:359px){.tiles{gap:6px}.tile{padding:10px 4px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.tile-global .home-global-gem .art{animation:none}}
.reduce-motion .tile-global .home-global-gem .art{animation:none}

/* One scroll viewport across all routes. The document itself never rubber-bands. */
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0;height:100vh;height:100dvh;width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;isolation:isolate}
.avatar-photo{position:relative;overflow:hidden;border-radius:50%}
.avatar-photo>img{position:absolute;inset:0;object-fit:cover}
.home-global-prize{display:flex;justify-content:center;align-items:center;gap:3px}
.home-global-prize>span{min-width:0;overflow-wrap:anywhere}
.home-global-prize>.art{flex:none}
.tile-global .home-global-prize .art{width:14px;height:14px;animation:none;filter:none}
.round-claim{display:grid;gap:12px;margin:14px 0}
.round-claim p .art{display:inline-grid;vertical-align:middle}
.co-hint{line-height:1.45;max-width:340px;text-align:center}
.rk-hero{margin-bottom:14px}.rk-stage{margin:18px 0 12px}.rk-list{margin-top:14px}
.pg-glob{min-height:250px;align-items:flex-end;gap:12px;padding:20px 8px 8px}
.pg-glob .pg{min-width:0;flex:1;max-width:160px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pg-glob .pg-1{order:2;transform:translateY(-16px)}.pg-glob .pg-2{order:1}.pg-glob .pg-3{order:3}
.pg-glob .nm{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px}
.pg-glob .sc{display:block;margin:4px 0}.pg-glob .pz{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;font-size:13px}
.pg-glob .block{width:100%;min-height:48px;margin-top:10px;border-radius:16px 16px 0 0;background:linear-gradient(160deg,rgba(246,200,90,.2),rgba(139,140,248,.12));box-shadow:inset 0 1px rgba(255,255,255,.12)}
.pg-glob .pg-1 .block{min-height:64px;background:linear-gradient(160deg,rgba(246,200,90,.4),rgba(139,140,248,.16))}
@media(max-width:600px){.topbar,.phead{backdrop-filter:none;-webkit-backdrop-filter:none}.gcard .gc-bg,.gc-glint,.bx-sparks,.gp-sparks{animation:none}.gcard{content-visibility:auto;contain-intrinsic-size:auto 260px}}

.performance-lite .fx-shine,.performance-lite .fx-orbit,.performance-lite .fx-sparks,.performance-lite .confetti i{animation:none!important}
.performance-lite .level-emblem,.performance-lite .portrait-frame{filter:none!important}