/* Pald Earn — effects: ambient arcade backdrop, level crest effects (image-masked), interaction feedback, states.
   Decorative only: nothing here changes rewards or progression. Everything stops under reduced motion. */

/* ---------- ambient backdrop: soft nebula glows + a faint holo grid + a few slow stars (fixed, behind content) ---------- */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:
 radial-gradient(60% 38% at 12% -6%,rgba(124,108,255,.24),transparent 62%),
 radial-gradient(46% 32% at 104% 8%,rgba(79,216,255,.13),transparent 60%),
 radial-gradient(70% 46% at 50% 112%,rgba(91,92,240,.18),transparent 62%)}
body::after{opacity:.55;background-image:
 radial-gradient(1.2px 1.2px at 8% 22%,rgba(255,255,255,.75),transparent 70%),radial-gradient(1px 1px at 22% 64%,rgba(196,206,255,.6),transparent 70%),
 radial-gradient(1.4px 1.4px at 41% 12%,rgba(255,255,255,.7),transparent 70%),radial-gradient(1px 1px at 63% 41%,rgba(196,206,255,.55),transparent 70%),
 radial-gradient(1.2px 1.2px at 79% 76%,rgba(255,255,255,.65),transparent 70%),radial-gradient(1px 1px at 91% 29%,rgba(160,220,255,.6),transparent 70%),
 radial-gradient(1px 1px at 33% 88%,rgba(255,255,255,.5),transparent 70%),radial-gradient(1.3px 1.3px at 56% 94%,rgba(196,206,255,.55),transparent 70%),
 linear-gradient(rgba(140,150,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,150,255,.045) 1px,transparent 1px);
 background-size:auto,auto,auto,auto,auto,auto,auto,auto,32px 32px,32px 32px;
 -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.2) 75%,#000 100%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.2) 75%,#000 100%);
 animation:sky-breathe 9s ease-in-out infinite alternate}
@keyframes sky-breathe{from{opacity:.42}to{opacity:.62}}
:root[data-theme="light"] body::before{background:radial-gradient(60% 38% at 12% -6%,rgba(124,108,255,.14),transparent 62%),radial-gradient(46% 32% at 104% 8%,rgba(79,216,255,.1),transparent 60%)}
:root[data-theme="light"] body::after{opacity:.35;background-image:linear-gradient(rgba(91,92,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,92,240,.05) 1px,transparent 1px);background-size:32px 32px;animation:none}
body.playing::after{display:none}

/* ---------- level crest: the operator's level{1-6}.ico + effects masked to the crest's own pixels ---------- */
.lvfx{--glow:#9AA6FF;--glow2:#D6DCFF;--shine-every:7s;position:relative;display:inline-grid;place-items:center;flex:none;isolation:isolate;line-height:0}
.lvfx>img,.lvfx>svg{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 calc(var(--s,40px) * .07) color-mix(in srgb,var(--glow) 75%,transparent)) drop-shadow(0 calc(var(--s,40px) * .04) calc(var(--s,40px) * .05) rgba(0,0,0,.45))}
.lvfx>i{position:absolute;pointer-events:none}
.lvfx .fx-aura{inset:-14%;z-index:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 42%,transparent) 0%,color-mix(in srgb,var(--glow) 12%,transparent) 42%,transparent 68%);animation:lv-breathe 3.4s ease-in-out infinite}
.lvfx .fx-shine{inset:0;z-index:3;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.15) 55%,transparent 62%) -170% 0/260% 100% no-repeat;mix-blend-mode:screen;animation:lv-shine var(--shine-every) ease-in-out infinite}
.lvfx .fx-ring{inset:-11%;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 10%,var(--glow) 16%,transparent 24% 48%,var(--glow2) 56%,transparent 64% 100%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62% 66%,transparent 68%);mask:radial-gradient(circle,transparent 60%,#000 62% 66%,transparent 68%);opacity:.9;animation:lv-spin 8s linear infinite}
.lvfx .fx-orbit{inset:-13%;z-index:4;animation:lv-spin 4.6s linear infinite}
.lvfx .fx-orbit b{position:absolute;top:0;left:50%;width:max(3px,calc(var(--s,40px) * .085));height:max(3px,calc(var(--s,40px) * .085));margin-left:calc(max(3px,calc(var(--s,40px) * .085)) / -2);border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--glow2) 55%,transparent 72%);box-shadow:0 0 calc(var(--s,40px) * .16) var(--glow2)}
.lvfx .fx-sparks{inset:-18%;z-index:4}
.lvfx .fx-sparks b{position:absolute;width:max(4px,calc(var(--s,40px) * .15));height:max(4px,calc(var(--s,40px) * .15));background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px var(--glow2));opacity:0;animation:lv-twinkle 2.6s ease-in-out infinite}
.lvfx .fx-sparks b:nth-child(1){left:6%;top:16%;animation-delay:0s}
.lvfx .fx-sparks b:nth-child(2){right:4%;top:28%;animation-delay:.7s}
.lvfx .fx-sparks b:nth-child(3){left:14%;bottom:8%;animation-delay:1.3s}
.lvfx .fx-sparks b:nth-child(4){right:12%;bottom:4%;animation-delay:1.9s}
.lvfx .fx-sparks b:nth-child(5){left:46%;top:-2%;animation-delay:.35s}
.lvfx .fx-sparks b:nth-child(6){left:44%;bottom:-4%;animation-delay:1.6s}
.lvfx .fx-rays{inset:-34%;z-index:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--glow2) 34%,transparent) 0 5deg,transparent 5deg 24deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 66%);mask:radial-gradient(circle,#000 22%,transparent 66%);animation:lv-spin 16s linear infinite reverse;opacity:.75}
/* tier families: I silver-periwinkle · II azure · III violet + segment ring · IV cyan + orbiting light · V royal + gold sparks · VI iridescent crown */
.lvfx.t1{--glow:#9AA6FF;--glow2:#E0E6FF;--shine-every:7.5s}
.lvfx.t2{--glow:#6FA8FF;--glow2:#C9DCFF;--shine-every:6.5s}
.lvfx.t3{--glow:#A88BFF;--glow2:#7FE8F2;--shine-every:5.5s}
.lvfx.t4{--glow:#38D6EE;--glow2:#B9A6FF;--shine-every:4.8s}
.lvfx.t5{--glow:#B784FF;--glow2:#FFD36E;--shine-every:4s}
.lvfx.t6{--glow:#F0A8FF;--glow2:#8CF0FF;--shine-every:3.4s}
.lvfx.t6 .fx-aura{animation:lv-breathe 3s ease-in-out infinite,lv-hue 6s linear infinite}
.lvfx.t6>img{animation:lv-hue-soft 6s linear infinite}
.lvfx.t5 .fx-sparks b{background:linear-gradient(135deg,#FFF6D0,#FFD36E)}
@keyframes lv-breathe{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes lv-shine{0%,58%{background-position:-170% 0}82%,100%{background-position:170% 0}}
@keyframes lv-spin{to{transform:rotate(360deg)}}
@keyframes lv-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:.2;transform:scale(.6) rotate(80deg)}}
@keyframes lv-hue{to{filter:hue-rotate(360deg)}}
@keyframes lv-hue-soft{0%,100%{filter:drop-shadow(0 0 calc(var(--s,40px) * .08) #F0A8FF) drop-shadow(0 2px 3px rgba(0,0,0,.45))}50%{filter:drop-shadow(0 0 calc(var(--s,40px) * .1) #8CF0FF) drop-shadow(0 2px 3px rgba(0,0,0,.45))}}
/* small crests (≤26 px) keep aura + shine only, so tiny rows stay calm and sharp */
.lvfx.still>i:not(.fx-aura){display:none}
.lvfx.still .fx-aura{animation:none;opacity:.8}
/* one polished reveal on promotion / replay (interactions.js adds .crest-reveal) */
.lvfx.crest-reveal>img,.lvfx.crest-reveal>svg{animation:lv-pop 1.15s var(--ease-out,cubic-bezier(.16,1,.3,1)) both}
.lvfx.crest-reveal .fx-aura{animation:lv-bloom 1.2s ease-out both}
.lvfx.crest-reveal::after{content:"";position:absolute;inset:-30%;z-index:5;border-radius:50%;border:2px solid var(--glow2);opacity:0;animation:lv-wave 1.1s ease-out .1s both;pointer-events:none}
@keyframes lv-pop{0%{transform:scale(.55) rotate(-12deg);opacity:.2}55%{transform:scale(1.14) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes lv-bloom{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.35)}100%{opacity:.85;transform:none}}
@keyframes lv-wave{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.25)}}

/* ---------- interaction feedback (press-active / press-flash are set by interactions.js) ---------- */
.press-flash{background-image:radial-gradient(circle at var(--press-x,50%) var(--press-y,50%),rgba(190,200,255,.22),transparent 62%)!important;background-blend-mode:screen}
.btn-primary.press-flash{background-image:radial-gradient(circle at var(--press-x,50%) var(--press-y,50%),rgba(255,255,255,.3),transparent 60%),linear-gradient(135deg,var(--action-2) 0%,var(--action) 55%,var(--action-3) 100%)!important}
.press-active:not(.is-loading){filter:brightness(1.1)}
.btn[aria-busy=true]{cursor:progress;pointer-events:none}
.btn.is-rejected{box-shadow:inset 0 0 0 1px var(--coral);background-color:var(--coral-soft);animation:shake .36s ease-in-out}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.navigation-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;overflow:hidden;background:rgba(124,108,255,.12);pointer-events:none}
.navigation-progress>i{display:block;width:35%;height:100%;border-radius:0 6px 6px 0;background:linear-gradient(90deg,var(--action-2),var(--cyan));box-shadow:0 0 10px var(--cyan);animation:route-progress .95s ease-in-out infinite}
@keyframes route-progress{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
.view-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px}
.view-state>.glyph{width:28px;height:28px;color:var(--coral-ink)}
.view-state h2{font-size:18px}
.view-state p{font-size:13px;color:var(--ink-2);max-width:300px}
.view-state .btn{margin-top:6px}
.offline-bar{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 14px;min-height:44px;font-size:13px;line-height:1.35;border:1px solid rgba(154,170,233,.33);background:#1A2346;color:#EDF3FF;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.offline-bar::before{content:"";width:7px;height:7px;background:#EDBA85;border-radius:50%;flex:none;box-shadow:0 0 6px #EDBA85}
.offline-bar.restored::before{background:#82E6D8;box-shadow:0 0 6px #82E6D8}

/* ---------- sheet + toast surfaces (glass with a neon top edge) ---------- */
dialog.sheet{background:linear-gradient(180deg,#182046,#10162F 60%);box-shadow:0 -1px 0 rgba(196,206,255,.22),var(--sh-3)}
dialog.sheet::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,108,255,.9),rgba(79,216,255,.8),transparent);box-shadow:0 0 12px rgba(124,108,255,.8);pointer-events:none}
:root[data-theme="light"] dialog.sheet{background:#fff;box-shadow:var(--sh-3)}
dialog.sheet::backdrop{background:rgba(5,8,20,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* ---------- explore sheet (profile + destinations) ---------- */
dialog.sheet.explore .sheet-top h2{visibility:hidden}
.ex-head{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 0 4px;text-align:center}
.ex-head .avatar-btn{--av:78px}
.ex-head h3{font-size:20px;font-weight:850;margin-top:14px;letter-spacing:-.01em}
.ex-head p{font-size:13px;color:var(--ink-2)}
.ex-bal{display:flex;gap:8px;margin-top:10px}
.ex-bal .capsule{min-width:116px;height:38px}
.ex-title{font-size:19px;font-weight:850;margin:14px 2px 8px;letter-spacing:-.01em}
.ex-list{border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;padding:4px 0}
.ex-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto 16px;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 12px;text-align:left;color:var(--ink);font-weight:700;font-size:15px;transition:background-color .15s}
.ex-row:hover{background:rgba(255,255,255,.03)}
.ex-row:active{background:rgba(255,255,255,.06)}
.ex-ic{display:grid;place-items:center;width:32px;height:32px}
.ex-ic>.art{width:28px;height:28px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.ex-ic>.tone-tile{width:30px;height:30px}
.ex-v{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.ex-row .chev{width:16px;height:16px;color:var(--ink-3)}
.ex-sep{display:block;height:1px;margin:4px 12px;background:var(--line)}

/* ---------- energy page: segmented charge ring around a pulsing core ---------- */
#energy-page{display:grid;gap:10px;max-width:520px;margin:0 auto}
.en-hero{display:grid;justify-items:center;gap:2px;padding:4px 0 8px;text-align:center}
.en-orb{position:relative;display:grid;place-items:center;width:150px;height:150px}
.en-segs{position:absolute;inset:0}
.en-segs i{position:absolute;left:50%;top:0;width:6px;height:15px;margin-left:-3px;border-radius:4px;background:rgba(255,255,255,.1);transform-origin:3px 75px;transform:rotate(var(--a))}
.en-segs i.on{background:linear-gradient(180deg,var(--cyan),var(--action-2));box-shadow:0 0 8px rgba(79,216,255,.75)}
.en-hero.full .en-segs i.on{background:linear-gradient(180deg,#9AF5DF,#2BC79E);box-shadow:0 0 8px rgba(94,230,200,.8)}
.en-core{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#2D317E,#121739 72%);box-shadow:0 0 0 1px var(--line-2),0 0 44px rgba(124,108,255,.38),inset 0 0 26px rgba(124,108,255,.38)}
.en-core .art{width:56px;height:56px;filter:drop-shadow(0 0 12px rgba(124,108,255,.95));animation:en-pulse 2.4s ease-in-out infinite}
@keyframes en-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.en-big{font-size:34px;font-weight:900;letter-spacing:-.02em;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:6px;line-height:1.1}
.en-big b{color:var(--ink)}
.en-sub{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.en-reason{display:grid;gap:2px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);margin:0}
.en-reason small{color:var(--ink-2);font-size:12.5px;font-weight:500}
.en-div{height:1px;background:var(--line);margin:4px 0}
.en-note{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:-4px}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
 body::after,.lvfx>i,.lvfx>img,.avatar-btn .av-ring,.btn-primary::before,.gc-glint,.en-core .art,.lgb-A::before,.navigation-progress>i{animation:none!important}
 .lvfx .fx-shine,.lvfx .fx-orbit,.lvfx .fx-sparks,.gc-glint{display:none}
}
.reduce-motion body::after,.reduce-motion .lvfx>i,.reduce-motion .lvfx>img,.reduce-motion .avatar-btn .av-ring,.reduce-motion .btn-primary::before,.reduce-motion .gc-glint,.reduce-motion .en-core .art,.reduce-motion .lgb-A::before{animation:none!important}
.reduce-motion .lvfx .fx-shine,.reduce-motion .lvfx .fx-orbit,.reduce-motion .lvfx .fx-sparks,.reduce-motion .gc-glint{display:none}
body.is-background *{animation-play-state:paused!important}

/* ---------- portrait frames: six icon-matched families, 50 level states ---------- */
.portrait-frame{--tc1:#9695FF;--tc2:#E2E6FF;--orbit-time:24s;isolation:isolate}
.portrait-frame.t2{--tc1:#8C88FF;--tc2:#B4CFFF}
.portrait-frame.t3{--tc1:#9B7AFF;--tc2:#7CDEFF;--orbit-time:22s}
.portrait-frame.t4{--tc1:#B387FF;--tc2:#9AEDFF;--orbit-time:20s}
.portrait-frame.t5{--tc1:#A883FF;--tc2:#D1F4FF;--orbit-time:18s}
.portrait-frame.t6{--tc1:#B5A0FF;--tc2:#EAFCFF;--orbit-time:16s}
.portrait-frame::before{display:none}
.profile-ring{position:absolute;inset:-1px;z-index:3;border-radius:50%;pointer-events:none}
.pr-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke-linecap:round;stroke-linejoin:round;color:var(--tc1);filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--tc1) 55%,transparent))}
.pr-track{stroke:var(--tc1);stroke-width:.8;opacity:.42}
.pr-rim{stroke:var(--tc1);stroke-width:1.65;opacity:.95}
.pr-tick{stroke:var(--tc1);stroke-width:1.7;opacity:.17}
.pr-tick.lit{stroke:var(--tc2);opacity:.95}
.pr-facets{stroke:var(--tc2);stroke-width:.65;fill:var(--tc1)}
.pr-halo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,transparent 58%,color-mix(in srgb,var(--tc1) 27%,transparent) 64%,transparent 74%);opacity:.65}
.pr-orbit{stroke:var(--tc2);stroke-width:1.1;transform-origin:60px 60px;animation:portrait-orbit var(--orbit-time) linear infinite}
.pr-node{fill:var(--tc2);stroke:none}
.pr-wing,.pr-crown{fill:color-mix(in srgb,var(--tc1) 40%,#151D43);stroke:var(--tc2);stroke-width:1.1}
.t5 .pr-rim,.t6 .pr-rim{stroke-width:2}
.t6 .pr-facets{fill:var(--tc2);stroke:var(--tc1)}
.t6 .pr-halo{background:conic-gradient(from 30deg,transparent,var(--tc1),transparent,var(--tc2),transparent);mask:radial-gradient(circle,transparent 58%,#000 64%,transparent 74%);opacity:.35}
.pr-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -40deg,transparent 65%,var(--tc2) 81%,transparent 87%);mask:radial-gradient(farthest-side,transparent 85%,#000 88% 97%,transparent 99%);opacity:0}
.portrait-frame .av-badge{bottom:-8px;z-index:5;filter:drop-shadow(0 2px 2px #060B20)}
.portrait-frame .av-badge .lvfx{line-height:0}
.portrait-frame .av-badge .lvfx>img{animation:none}
.portrait-frame .av-level{position:absolute;z-index:6;right:-2px;bottom:0;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:6px;border:1px solid var(--tc1);background:#151D39;color:#F4F5FF;font:800 10px/1 var(--font,system-ui,sans-serif);font-variant-numeric:tabular-nums;box-shadow:0 1px 5px #060B20}
.portrait-frame:is(:hover,:focus-visible) .pr-halo{opacity:1}
.portrait-frame:is(:hover,:focus-visible) .pr-track{opacity:.85}
.portrait-frame:focus-visible{outline:2px solid var(--tc2);outline-offset:5px}
.portrait-frame.crest-reveal .pr-sweep{animation:portrait-sweep 1.2s cubic-bezier(.2,.7,.2,1) both}
.portrait-frame.crest-reveal .pr-halo{animation:portrait-bloom 1.2s ease-out both}
.portrait-frame.crest-reveal .pr-facets,.portrait-frame.crest-reveal .pr-crown{animation:portrait-forge 1.2s ease-out both}
.portrait-preview{--av:76px;display:inline-grid}
.portrait-preview .av-badge{bottom:-12px}
.portrait-preview .av-level,.ex-head .portrait-frame .av-level{min-width:22px;height:22px;right:0;font-size:12px}
.lv-hero:has(.portrait-preview) .lv-badge{width:92px;height:104px;overflow:visible;display:grid;place-items:center}
.lv-hero:has(.portrait-preview){grid-template-columns:92px minmax(0,1fr)}
@keyframes portrait-orbit{to{transform:rotate(360deg)}}
@keyframes portrait-sweep{0%{opacity:0;transform:rotate(-100deg)}20%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:rotate(260deg)}}
@keyframes portrait-bloom{0%{opacity:.2;transform:scale(.92)}35%{opacity:1;transform:scale(1.12)}100%{opacity:.65;transform:scale(1)}}
@keyframes portrait-forge{0%{opacity:.15}40%{opacity:1;filter:drop-shadow(0 0 3px var(--tc2))}100%{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.portrait-frame *,.portrait-frame *::after{animation:none!important}.pr-sweep{display:none}}
.reduce-motion .portrait-frame *,.reduce-motion .portrait-frame *::after{animation:none!important}
.reduce-motion .pr-sweep{display:none}
body.playing .profile-ring *,body:has(dialog[open]) .hdr .profile-ring *{animation-play-state:paused!important}

/* ---------- local demo tools ---------- */
.demo-levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.demo-level-picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.demo-level-picker label{flex-basis:100%;font-size:12px;color:var(--muted)}
.demo-level-picker select{flex:1;width:auto;min-width:0}
.demo-lv{display:grid;justify-items:center;gap:6px;padding:10px 0 8px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:800;color:var(--ink-2);transition:transform var(--t-press) var(--ease)}
.demo-lv:active{transform:scale(.95)}
.demo-lv.on{box-shadow:inset 0 0 0 1.5px rgba(160,150,255,.8),0 0 16px rgba(124,108,255,.3);color:var(--ink)}

/* ---------- loading screen: the operator's loading art full-bleed + glass progress panel + post-load reveal ---------- */
.boot.bx{position:fixed;inset:0;z-index:300;display:block;min-height:0;padding:0;text-align:left;place-items:normal;overflow:hidden;background:#0A0F21;isolation:isolate}
.bx-art{position:absolute;inset:0;z-index:-3;background-color:#0A0F21;background-position:center top;background-size:cover;background-repeat:no-repeat;transform-origin:50% 28%;animation:bx-drift 14s ease-in-out infinite alternate}
@keyframes bx-drift{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.08) translateY(-1.2%)}}
.bx-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 60% at 50% 105%,rgba(91,92,240,.32),transparent 60%),linear-gradient(180deg,rgba(10,15,33,0) 46%,rgba(10,15,33,.72) 72%,rgba(10,15,33,.96) 92%)}
.bx-sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bx-sparks i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(140,160,255,.9);opacity:0;animation:bx-rise 6s linear infinite}
.bx-sparks i:nth-child(1){left:8%;animation-delay:0s}.bx-sparks i:nth-child(2){left:19%;animation-delay:2.1s;width:3px;height:3px}.bx-sparks i:nth-child(3){left:31%;animation-delay:4s}.bx-sparks i:nth-child(4){left:42%;animation-delay:1.2s;width:3px;height:3px;box-shadow:0 0 10px 2px rgba(120,240,220,.9)}.bx-sparks i:nth-child(5){left:55%;animation-delay:3.3s}.bx-sparks i:nth-child(6){left:66%;animation-delay:.6s;width:3px;height:3px}.bx-sparks i:nth-child(7){left:74%;animation-delay:2.7s;box-shadow:0 0 10px 2px rgba(255,214,110,.9)}.bx-sparks i:nth-child(8){left:83%;animation-delay:4.6s}.bx-sparks i:nth-child(9){left:91%;animation-delay:1.8s;width:3px;height:3px}.bx-sparks i:nth-child(10){left:48%;animation-delay:5.2s;box-shadow:0 0 10px 2px rgba(120,240,220,.9)}
@keyframes bx-rise{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.95}80%{opacity:.5}100%{transform:translateY(-62vh) scale(1);opacity:0}}
.bx-panel{position:absolute;left:50%;bottom:calc(22px + var(--safe-b));width:min(380px,calc(100% - 32px));transform:translateX(-50%);display:grid;gap:10px;padding:12px 14px 12px;border-radius:20px;background:linear-gradient(160deg,rgba(28,36,76,.82),rgba(14,20,46,.88));box-shadow:inset 0 0 0 1px rgba(160,170,255,.22),0 18px 40px rgba(0,0,0,.45),0 0 40px rgba(91,92,240,.18);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);animation:bx-panel-in .6s var(--ease-out,cubic-bezier(.16,1,.3,1)) .1s both}
@keyframes bx-panel-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.bx-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px}
.bx-mark{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(124,108,255,.7));animation:bx-mark 2.4s ease-in-out infinite}
@keyframes bx-mark{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.bx-copy{min-width:0}
.bx-copy b{display:block;font-size:14.5px;font-weight:850;color:#fff;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-copy small{display:block;font-size:12px;color:#B8C0E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.bx-copy small.swap{opacity:0}
.bx-pct{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 0 14px rgba(124,108,255,.8)}
.boot.bx .bx-bar{position:relative;width:100%;height:8px;margin:0;border-radius:8px;background:rgba(255,255,255,.1);overflow:visible;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.boot.bx .bx-bar i{position:relative;display:block;height:100%;width:var(--v,6%);border-radius:inherit;background:linear-gradient(90deg,#7C6CFF,#5B8CFF 55%,#4FD8FF);box-shadow:0 0 14px rgba(79,216,255,.55);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.boot.bx .bx-bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%) -120% 0/220% 100% no-repeat;animation:bx-shine 1.6s linear infinite}
.boot.bx .bx-bar i::after{content:"";position:absolute;right:-6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#9CF2FF 55%,transparent 72%);box-shadow:0 0 14px 4px rgba(79,216,255,.7)}
@keyframes bx-shine{to{background-position:120% 0}}
.bx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.bx-steps li{display:flex;align-items:center;justify-content:center;gap:5px;height:26px;border-radius:9px;background:rgba(255,255,255,.05);font-size:11px;font-weight:750;color:#8F98C2;transition:background .3s,color .3s}
.bx-steps li span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,box-shadow .3s}
.bx-steps li.on{color:#fff;background:rgba(124,108,255,.24)}
.bx-steps li.on span{background:#9CF2FF;box-shadow:0 0 8px #4FD8FF;animation:bx-blink 1s ease-in-out infinite}
.bx-steps li.done{color:#CFFAEF;background:rgba(61,219,176,.16)}
.bx-steps li.done span{background:#3DDBB0;box-shadow:0 0 6px #3DDBB0;animation:none}
@keyframes bx-blink{50%{opacity:.4}}
.bx #boot-slow{position:absolute;left:50%;bottom:calc(150px + var(--safe-b));width:min(380px,calc(100% - 32px));transform:translateX(-50%)}
.bx #boot-slow:empty{display:none}
.bx .slow-banner{margin:0;background:linear-gradient(160deg,rgba(255,138,132,.24),rgba(60,24,40,.9));box-shadow:inset 0 0 0 1px rgba(255,138,132,.35),0 10px 26px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.bx .slow-banner small{color:#FFD4D1}
.bx .slow-banner .btn{margin-left:auto;flex:none}
/* ready → reveal: the art pushes in and dissolves while the app rises underneath */
.bx.bx-ready .bx-pct{color:#7EF0D6;text-shadow:0 0 14px rgba(61,219,176,.8)}
.bx.bx-out{pointer-events:none}
.bx.bx-out .bx-art{animation:bx-push .75s cubic-bezier(.4,0,.2,1) forwards}
.bx.bx-out .bx-panel{animation:bx-panel-out .45s ease-in forwards}
.bx.bx-out{animation:bx-fade .8s ease-in .15s forwards}
.bx.bx-out::after{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(160,170,255,.5),transparent 70%);animation:bx-flash .7s ease-out forwards;pointer-events:none}
@keyframes bx-push{to{transform:scale(1.22);filter:blur(6px) brightness(1.15)}}
@keyframes bx-panel-out{to{opacity:0;transform:translate(-50%,24px) scale(.96)}}
@keyframes bx-fade{to{opacity:0;visibility:hidden}}
@keyframes bx-flash{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
body.intro .topbar{animation:intro-down .55s var(--ease-out) .05s both}
body.intro .h-sec,body.intro .context-note{animation:intro-up .6s var(--ease-out) both}
body.intro .h-sec:nth-of-type(1){animation-delay:.12s}body.intro .h-sec:nth-of-type(2){animation-delay:.22s}
body.intro .tiles .tile{animation:intro-pop .5s var(--ease-spring) both}
body.intro .tiles .tile:nth-child(1){animation-delay:.2s}body.intro .tiles .tile:nth-child(2){animation-delay:.26s}body.intro .tiles .tile:nth-child(3){animation-delay:.32s}body.intro .tiles .tile:nth-child(4){animation-delay:.38s}
body.intro .games>*{animation:intro-up .6s var(--ease-out) both;animation-delay:calc(.3s + var(--i,0) * 60ms)}
@keyframes intro-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes intro-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes intro-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bx-art,.bx-sparks i,.bx-mark,.boot.bx .bx-bar i::before{animation:none!important}body.intro *{animation:none!important}}
.reduce-motion .bx-art,.reduce-motion .bx-sparks i,.reduce-motion body.intro *{animation:none!important}

/* ---------- chest queue note (home), timers, glowing hints ---------- */
.chest-note{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:7px 8px 7px 8px;border-radius:16px;background:linear-gradient(135deg,rgba(247,197,78,.14),rgba(124,108,255,.12)),var(--glass);box-shadow:inset 0 0 0 1px rgba(247,197,78,.26),var(--sh-1);text-align:left;color:var(--ink);overflow:hidden}
.chest-note.ready{box-shadow:inset 0 0 0 1.5px rgba(247,197,78,.6),0 0 22px rgba(247,197,78,.25);animation:cn-glow 2s ease-in-out infinite}
@keyframes cn-glow{50%{box-shadow:inset 0 0 0 1.5px rgba(247,197,78,.85),0 0 30px rgba(247,197,78,.4)}}
.cn-art{position:relative;display:grid;place-items:center}
.cn-art>.art{width:40px;height:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.chest-note.ready .cn-art>.art{animation:cn-bob 1.6s ease-in-out infinite}
@keyframes cn-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.cn-count{position:absolute;right:-4px;top:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(135deg,#FFB547,#F08A24);color:#2A1600;font-size:11px;font-weight:900;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.cn-txt{min-width:0}
.cn-txt b{display:block;font-size:14px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-txt small{display:block;font-size:12px;color:var(--ink-2)}
.cn-cta{display:inline-grid;place-items:center;min-width:58px;height:32px;padding:0 10px;border-radius:10px;background:var(--gold-soft);color:var(--gold-ink);font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(247,197,78,.3)}
.chest-note.ready .cn-cta{background:linear-gradient(135deg,#FFD25E,#F2A922);color:#2A1600;box-shadow:0 4px 14px rgba(242,169,34,.45)}
.chest-wait{display:inline-grid;place-items:center;min-width:58px;height:30px;padding:0 10px;border-radius:9px;background:var(--inset);color:var(--ink-2);font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
.hint-glow{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:12.5px;font-weight:800;line-height:1.35}
.hint-glow .ph-flag{flex:none;width:20px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(252,209,22,.35)}
.rk-hint{margin:10px 2px 2px}
.hint-glow .glyph{flex:none;width:15px;height:15px;color:#FFD776;filter:drop-shadow(0 0 4px rgba(255,215,118,.8));animation:hint-pulse 1.8s ease-in-out infinite}
.hint-glow span{background:linear-gradient(90deg,#FFD776,#FFF3C4 25%,#8CF0FF 50%,#FFD776 75%,#FFF3C4);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hint-flow 4s linear infinite}
:root[data-theme="light"] .hint-glow span{background:linear-gradient(90deg,#B26A00,#5B5CF0 50%,#B26A00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes hint-flow{to{background-position:-200% 0}}
@keyframes hint-pulse{50%{transform:scale(1.2) rotate(15deg)}}
/* ---------- daily check-in popup ---------- */
.cip{display:grid;gap:12px}
.cip-hero{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:radial-gradient(140px 80px at 10% 50%,rgba(124,108,255,.28),transparent 70%),var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.cip-hero .art{animation:cn-bob 2s ease-in-out infinite}
.cip-hero b{display:block;font-size:17px;font-weight:900}
.cip-hero small{display:block;font-size:12.5px;color:var(--ink-2)}
dialog.sheet.ci-pop .ci-day.today{animation:ci-today 1.6s ease-in-out infinite}
@keyframes ci-today{50%{box-shadow:inset 0 0 0 2px var(--action-2),0 0 16px rgba(124,108,255,.55)}}
/* ---------- Suggest a Game ---------- */
.sg-hero{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:4px}
.sg-hero p{font-size:13px;color:var(--ink-2);line-height:1.4}

/* ---------- Pald Raffle home button (V3.1): sticky bottom-left, slides in from the left, × tucks it behind a › tab ---------- */
.rfab-space{height:64px}
.rfab{position:fixed;left:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:flex-start;max-width:calc(100vw - 20px);animation:rfab-in .75s cubic-bezier(.2,1.25,.4,1) both .25s;transition:transform .45s cubic-bezier(.6,-.25,.7,0),opacity .35s}
.rfab.gone{transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none;animation:none}
.rfab.back{animation:rfab-in .6s cubic-bezier(.2,1.25,.4,1) both}
.rfab-main{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;height:54px;padding:0 14px 0 7px;border:0;border-radius:18px;color:#fff;text-align:left;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 24px rgba(247,197,78,.28);transition:transform .14s}
.rfab-main:active{transform:scale(.96)}
.rfab-main::before{content:'';position:absolute;inset:-2px;z-index:-2;border-radius:20px;background:linear-gradient(90deg,#FFD776,#7CC8FF,#B98CFF,#FF8FB1,#FFD776);background-size:300% 100%;animation:rfab-flow 4s linear infinite}
.rfab-main::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(247,197,78,.28),transparent 55%),linear-gradient(135deg,#2C2676,#141B4A)}
.rfab-ic{position:relative;display:grid;place-items:center;width:42px;height:42px;animation:rfab-bob 2.6s ease-in-out infinite}
.rfab-ic svg{width:42px;height:42px;filter:drop-shadow(0 0 8px rgba(247,197,78,.6))}
.rfab-ic::after{content:'';position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(255,231,160,.55),transparent 70%);z-index:-1;animation:rfab-glow 2.6s ease-in-out infinite}
.rfab-live{position:absolute;top:-5px;right:-10px;padding:1px 5px;border-radius:6px;background:#E5485C;color:#fff;font-size:9px;font-weight:900;font-style:normal;letter-spacing:.08em;box-shadow:0 0 10px rgba(229,72,92,.7);animation:rfab-blink 1s steps(2) infinite}
.rfab-tt{display:grid;line-height:1.15}
.rfab-tt b{font-family:var(--font-display);font-size:14.5px;font-weight:700;letter-spacing:.01em;background:linear-gradient(90deg,#FFE7A0,#fff 40%,#BFE6FF 60%,#FFE7A0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rfab-text 3s linear infinite}
.rfab-tt small{margin-top:1px;font-size:11px;color:rgba(255,255,255,.78);white-space:nowrap}
.rfab-float{position:absolute;left:24px;top:-14px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 5px;border-radius:10px;background:linear-gradient(180deg,#123A7A,#0B1D4C);box-shadow:inset 0 0 0 1px rgba(124,200,255,.6),0 0 14px rgba(80,180,255,.55);font-family:var(--font-display);font-size:12.5px;font-weight:700;color:#D6F0FF;white-space:nowrap;pointer-events:none;animation:rfab-floattext 3.4s ease-in-out infinite}
.rfab-float .art{width:15px;height:15px;filter:drop-shadow(0 0 4px rgba(124,200,255,.9))}
.rfab-x{display:grid;place-items:center;flex:none;width:24px;height:24px;margin:-8px 0 0 -12px;padding:0;border:0;border-radius:50%;background:#0E1433;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 4px 10px rgba(0,0,0,.4);cursor:pointer;z-index:2}
.rfab-x .glyph{width:12px;height:12px}
.rfab.joined .rfab-main::after{background:radial-gradient(120% 140% at 0% 0%,rgba(71,227,176,.25),transparent 55%),linear-gradient(135deg,#1F3C5A,#141B4A)}
.rfab.live .rfab-main::after{background:radial-gradient(120% 140% at 0% 0%,rgba(229,72,92,.35),transparent 55%),linear-gradient(135deg,#4A1630,#1B1446)}
.rfab-tab{position:fixed;left:0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:26px;height:42px;padding:0;border:0;border-radius:0 13px 13px 0;background:linear-gradient(180deg,#FFD776,#E08A1E);color:#2A1600;box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 14px rgba(247,197,78,.55);transform:translateX(-110%);transition:transform .35s cubic-bezier(.2,1.2,.4,1);cursor:pointer}
.rfab-tab.on{transform:none;animation:rfab-tabpulse 2.2s ease-in-out infinite}
.rfab-tab .glyph{width:14px;height:14px;stroke-width:3}
@keyframes rfab-in{0%{transform:translateX(-130%)}100%{transform:none}}
@keyframes rfab-flow{to{background-position:300% 0}}
@keyframes rfab-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-7deg)}}
@keyframes rfab-glow{50%{opacity:.35;transform:scale(1.25)}}
@keyframes rfab-text{to{background-position:200% 0}}
@keyframes rfab-blink{50%{opacity:.35}}
@keyframes rfab-floattext{0%{opacity:0;transform:translateY(8px) scale(.9)}18%,72%{opacity:1;transform:translateY(-4px) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(.96)}}
@keyframes rfab-tabpulse{50%{box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 26px rgba(247,197,78,.9)}}
body.raffle-live #page-back{visibility:hidden}
.reduce-motion .rfab,.reduce-motion .rfab *,.reduce-motion .rfab-main::before,.reduce-motion .rfab-tab{animation:none!important}
@media (prefers-reduced-motion:reduce){.rfab,.rfab *,.rfab-main::before,.rfab-tab{animation:none!important}}
.demo-raffle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
/* Desktop: the side rail owns the bottom-left corner (profile card), so the raffle button and its › tab sit just right of the rail. */
@media (min-width:1024px){.rfab{left:calc(max(0px,(100vw - 1440px) / 2) + 252px)}.rfab-tab{left:calc(max(0px,(100vw - 1440px) / 2) + 236px)}}
/* News popups (app.js newsPop): one small card slides down from the top, then leaves by itself. */
.npop{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));z-index:70;display:flex;align-items:center;gap:10px;width:min(360px,calc(100vw - 24px));padding:9px 10px 9px 9px;border:0;border-radius:16px;color:#fff;text-align:left;font:inherit;cursor:pointer;background:linear-gradient(150deg,rgba(34,42,98,.97),rgba(16,22,52,.97));box-shadow:inset 0 0 0 1px rgba(150,140,255,.38),0 14px 34px rgba(0,0,0,.45),0 0 24px rgba(124,108,255,.28);transform:translate(-50%,-150%);opacity:0;transition:transform .45s cubic-bezier(.2,1.25,.4,1),opacity .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.npop.in{transform:translate(-50%,0);opacity:1}
.npop.out{transform:translate(-50%,-150%);opacity:0;transition:transform .32s ease-in,opacity .28s}
.npop.win{background:linear-gradient(150deg,rgba(96,66,14,.97),rgba(38,24,6,.97));box-shadow:inset 0 0 0 1px rgba(247,197,78,.5),0 14px 34px rgba(0,0,0,.45),0 0 28px rgba(247,197,78,.32)}
.npop.win::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,236,170,.18) 48%,transparent 60%);background-size:260% 100%;animation:npop-sheen 2.4s linear infinite}
@keyframes npop-sheen{from{background-position:130% 0}to{background-position:-130% 0}}
.npop-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.npop-tt{flex:1;min-width:0;display:grid;gap:2px}
.npop-tt b{font-size:13.5px;font-weight:850;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npop-tt small{font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.76);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.npop-x{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.npop-x svg{width:12px;height:12px}
.reduce-motion .npop,.reduce-motion .npop::after{transition:opacity .2s;animation:none}
@media (prefers-reduced-motion:reduce){.npop,.npop::after{transition:opacity .2s;animation:none}}

/* The raffle button carries the operator's raffle art (2026-10-20); the drawn ticket stays the fallback. */
.rfab-ic .art{width:42px;height:42px;filter:drop-shadow(0 0 8px rgba(120,170,255,.6))}

/* Desktop (2026-10-20): the raffle button docks in the side rail above the profile card. There it never covers
   content, so it needs no hide control (the tab used to peek out over the profile card). */
@media (min-width:1024px){
 .rfab{left:calc(max(0px,(100vw - 1440px) / 2) + 14px);bottom:92px;width:208px;max-width:208px}
 .rfab.gone{transform:none;opacity:1;pointer-events:auto}
 .rfab-main{width:100%}
 .rfab-x,.rfab-tab{display:none!important}
}
/* Wide screens (2026-10-20): the portrait loading art stays whole in a centred frame over a soft, blurred copy of
   itself, instead of being stretched, cropped and upscaled. Both layers inherit the art set on .bx-art. */
@media (min-width:900px) and (min-aspect-ratio:4/5){
 .bx-art{background-size:0 0;animation:none}
 .bx-art::before,.bx-art::after{content:"";position:absolute;background-image:inherit;background-repeat:no-repeat;pointer-events:none}
 .bx-art::before{inset:-70px;background-size:cover;background-position:center;filter:blur(40px) brightness(.42) saturate(1.3)}
 .bx-art::after{top:0;bottom:0;left:calc(50% - 100vh * .2814);width:calc(100vh * .5628);background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);animation:bx-drift 14s ease-in-out infinite alternate}
 .reduce-motion .bx-art::after{animation:none}
}
/* Premium art (2026-10-20): the trophy and the raffle ticket float, catch a light sweep masked to their own shape
   (app.js art(): class fx-shine + --m) and twinkle. */
.art.fx-shine{position:relative}
.art.fx-shine>img{animation:fx-float 3.4s ease-in-out infinite}
.art.fx-shine::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 46%,rgba(255,255,255,0) 60%) no-repeat;background-size:260% 100%;background-position:160% 0;animation:fx-shine 4.2s ease-in-out infinite}
.art.fx-shine::before{content:"";position:absolute;inset:-14%;pointer-events:none;background:radial-gradient(circle at 84% 14%,#fff 0 1.3px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 12% 26%,#A5F3DD 0 1.1px,rgba(165,243,221,0) 2.3px),radial-gradient(circle at 74% 92%,#FFE7A0 0 1px,rgba(255,231,160,0) 2.1px);opacity:0;animation:fx-twinkle 2.8s ease-in-out infinite}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes fx-shine{0%,58%{background-position:160% 0}88%,100%{background-position:-70% 0}}
@keyframes fx-twinkle{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
.reduce-motion .art.fx-shine>img,.reduce-motion .art.fx-shine::after,.reduce-motion .art.fx-shine::before{animation:none}
@media (prefers-reduced-motion:reduce){.art.fx-shine>img,.art.fx-shine::after,.art.fx-shine::before{animation:none}}
/* Phones (2026-10-20): while the raffle button floats bottom-left, Home keeps room below its last card so nothing
   ends up underneath it. Desktop docks the button in the side rail instead. */
@media (max-width:1023px){body.has-rfab .shell{padding-bottom:calc(88px + var(--safe-b))}}
/* Start failed inside Telegram (bootFail): the reassurance wraps instead of truncating; the reference is quiet. */
.bx-fail .bx-copy b,.bx-fail .bx-copy small{white-space:normal;overflow:visible}
.bx-fail .notice{margin:0}
.bx-ref{display:block;text-align:center;font-size:11px;letter-spacing:.06em;color:#8E97C4;font-variant-numeric:tabular-nums}

/* ---------- Home (2026-10-22): a FIXED page. Play today stays compact on top; the games are one carousel of big
   cards that fills the rest of the screen. The centred card is full size, its neighbours lean in from the sides
   (app.js wireCarousel sets --d = distance in card widths 0..1 and --s = the same with its side, -1..1). ---------- */
.shell.is-home{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;padding-bottom:calc(8px + var(--safe-b))}
.shell.is-home>.view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.shell.is-home .topbar{flex:none;position:relative;top:auto}
.shell.is-home .h-today{flex:none}
.shell.is-home .context-note{flex:none;order:1;margin-top:8px}
.shell.is-home .context-note .notice{min-height:44px;padding:6px 10px}
.shell.is-home .context-note .notice .art{width:30px;height:30px}
.h-play{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;order:2}
.shell.is-home .h-sec{margin-top:12px}
.h-play .h-head{flex:none;flex-wrap:nowrap;margin:0 2px 6px}
.h-play .h-head .h-title{flex:1 1 auto;min-width:0}
.hc-search,.hc-all{flex:none;display:inline-flex;align-items:center;justify-content:center;height:38px;border-radius:12px;transition:transform var(--t-press) var(--ease),box-shadow .2s}
.hc-search{width:38px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink)}
.hc-search .glyph{width:19px;height:19px}
.hc-all{gap:2px;padding:0 9px 0 13px;background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.3);color:var(--action-ink);font-size:13.5px;font-weight:800;white-space:nowrap}
.hc-all .glyph{width:15px;height:15px}
.hc-search:active,.hc-all:active{transform:scale(.94)}

.hc{--hc-w:min(58vw,290px);--hc-gap:12px;position:relative;flex:1 1 auto;min-height:0;margin:0 calc(-1 * var(--gutter))}
.hc-track{position:relative;display:flex;align-items:stretch;gap:var(--hc-gap);height:100%;padding:6px 0 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;outline:0}
.hc-track::-webkit-scrollbar{display:none}
.hc-track::before,.hc-track::after{content:"";flex:0 0 calc((100% - var(--hc-w)) / 2 - var(--hc-gap))}
.hc-track:focus-visible .hcard.is-active{box-shadow:0 0 0 3px var(--focus),0 18px 40px rgba(2,6,23,.55)}
.hcard{--d:1;--s:0;position:relative;flex:0 0 var(--hc-w);display:flex;flex-direction:column;min-width:0;height:100%;border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);overflow:hidden;isolation:isolate;scroll-snap-align:center;scroll-snap-stop:always;transform:translateX(calc(var(--s) * -9%)) scale(calc(1 - var(--d) * .12));opacity:calc(1 - var(--d) * .4);transition:box-shadow .3s var(--ease);will-change:transform;backface-visibility:hidden}
.hcard.is-active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1) 50%,rgba(255,255,255,.18)),0 18px 40px rgba(2,6,23,.55),0 0 32px color-mix(in srgb,var(--g1) 30%,transparent)}
.hcard::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(10,15,33,0),rgba(10,15,33,.35));opacity:var(--d)}
.hc-art{position:relative;display:grid;place-items:center;flex:1 1 auto;min-height:0;overflow:hidden;isolation:isolate;color:#fff}
.hc-art>.art{width:100%;height:100%;max-height:100%}
.hc-art>.art svg,.hc-art>.art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.hc-art::after{content:"";position:absolute;inset:auto 0 0 0;height:40px;background:linear-gradient(180deg,transparent,rgba(10,15,33,.55));pointer-events:none}
.hcard:not(.is-active) .gc-glint{animation:none;opacity:0}
.hcard .gc-more{top:9px;right:9px;width:32px;height:32px}
.hc-body{flex:none;display:flex;flex-direction:column;min-width:0;padding:10px 12px 12px}
.hc-name{font-size:18px;font-weight:900;letter-spacing:-.015em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-sub{font-size:12.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-meta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin:8px 0 10px;padding-top:8px;border-top:1px solid var(--line)}
.hc-m{display:grid;gap:1px;min-width:0}
.hc-m+.hc-m{padding-left:10px;border-left:1px solid var(--line)}
.hc-m small{font-size:10.5px;color:var(--ink-3);font-weight:750;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-m b{display:inline-flex;align-items:center;gap:4px;min-width:0;font-size:15px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-m b.gold{color:var(--gold-ink)}
.hc-m b.na{font-size:12.5px;color:var(--ink-3);font-weight:700}
.hc-m .art{flex:none;width:17px;height:17px}
.hc-play{width:100%;height:44px;min-height:44px;border-radius:14px;font-size:15px}
.hc-play .glyph{width:15px;height:15px;fill:currentColor;stroke:none}
.hcard.resting .hc-art{filter:saturate(.45) brightness(.8)}
.hcard.resting .hc-play{background:var(--glass);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.hc-dots{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;height:12px}
.hc-dots button{position:relative;flex:none;width:7px;height:7px;padding:0;border-radius:99px;background:var(--line-hi);transition:width .3s var(--ease),background .3s}
.hc-dots button::before{content:"";position:absolute;inset:-9px -4px}
.hc-dots button[aria-selected="true"]{width:22px;background:linear-gradient(90deg,var(--action-2),var(--cyan))}
/* Phones with the raffle button: it floats bottom-left over a band the dots share (right-aligned beside it). */
@media (max-width:1023px){
 body.has-rfab .shell.is-home{padding-bottom:calc(12px + var(--safe-b))}
 body.has-rfab .hc-dots{height:58px;justify-content:flex-end;padding-right:6px}
}
/* Short screens give the carousel the room (app.js fitHome adds the steps until the artwork fits): fit-1 keeps the
   "Play today" heading for screen readers only, fit-2 and fit-3 compact the icons while keeping the labels and
   prize readable, fit-4 — landscape and tiny screens — lets the home scroll. */
.shell.is-home.fit-1 .h-today .h-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.shell.is-home.fit-1 .h-sec.h-today{margin-top:8px}
.shell.is-home.fit-1 .tiles{margin-top:8px}
.shell.is-home.fit-1 .tiles .tile{grid-template-rows:50px 1fr;min-height:120px;height:auto;padding:8px 5px;gap:4px}
.shell.is-home.fit-1 .tile .tile-ic{width:38px;height:38px}
.shell.is-home.fit-1 .tile .tile-ic>.art{width:38px;height:38px}
.shell.is-home.fit-1 .home-global-trophy>.art{width:38px;height:38px}
.shell.is-home.fit-1 .hg-halo{width:46px;height:46px;margin:-23px 0 0 -23px}
.shell.is-home.fit-1 .tile-global .tile-ic.home-global-trophy{height:38px}
.shell.is-home.fit-2 .goal-card{min-height:44px;padding-block:5px}
.shell.is-home.fit-2 .tiles .tile{grid-template-rows:46px 1fr;min-height:116px;height:auto;font-size:11.5px}
.shell.is-home.fit-2 .tile .tile-ic{width:34px;height:34px}
.shell.is-home.fit-2 .tile .tile-ic>.art{width:34px;height:34px}
.shell.is-home.fit-2 .tile-global .tile-ic.home-global-trophy{height:34px}
.shell.is-home.fit-2 .hc-sub{display:none}
.shell.is-home.fit-2 .hc-meta{margin:6px 0 8px;padding-top:6px}
.shell.is-home.fit-2 .hc-play{height:40px;min-height:40px}
.shell.is-home.fit-2 .h-play .h-head .h-title{font-size:18px}
.shell.is-home.fit-2 .hc-search,.shell.is-home.fit-2 .hc-all{height:34px}.shell.is-home.fit-2 .hc-search{width:34px}
.shell.is-home.fit-2 .h-sec.h-play{margin-top:10px}
/* fit-3 keeps every shortcut's label (operator 2026-10-30: the labels must never disappear) — smaller icons and text. */
.shell.is-home.fit-3 .tiles .tile{grid-template-rows:40px 1fr;min-height:110px;height:auto;gap:3px;font-size:11px}
.shell.is-home.fit-3 .tile-global .tile-label{position:static}
.shell.is-home.fit-3 .tile .tile-ic{width:30px;height:30px}
.shell.is-home.fit-3 .tile .tile-ic>.art{width:30px;height:30px}
.shell.is-home.fit-3 .tile-global .tile-ic.home-global-trophy{height:30px}
.shell.is-home.fit-3 .hg-halo{width:38px;height:38px;margin:-19px 0 0 -19px}
.shell.is-home.fit-3 .tile-global .home-global-prize{font-size:10.5px}
.shell.is-home.fit-3 .tile-global .home-global-prize .art{width:12px;height:12px}
@media (min-width:1024px){.shell.is-home.fit-1 .tiles .tile{grid-template-rows:auto;min-height:88px;gap:10px}}
.shell.is-home.fit-3 .context-note .notice{min-height:40px;padding:4px 10px}
.shell.is-home.fit-3 .hc-meta{border-top:0;padding-top:0;margin:4px 0 8px}
.shell.is-home.fit-4{height:auto;min-height:100%;overflow:visible}
.shell.is-home.fit-4>.view{flex:none}
.shell.is-home.fit-4 .h-play{flex:none}
.shell.is-home.fit-4 .hc{flex:none;height:330px}
/* Wide screens: the games sit in one left-aligned row of full-size cards; the row scrolls sideways for the rest.
   2026-10-23: whole cards only — 3 across, 4 from 1360px, 5 from 1760px — so none is cut at the edge, with ‹ › and the
   mouse wheel to move along the row (app.js wireCarousel). */
.hc-navs{display:none}
@media (min-width:1024px){
 .hc{--hc-w:calc((100% - 2 * var(--hc-gap)) / 3);margin:0}
 .hc-track{padding:6px 0 14px}
 .hc-navs{flex:none;display:inline-flex;gap:6px;margin-right:2px}
 .hc-nav{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);transition:transform var(--t-press) var(--ease),opacity .2s}
 .hc-nav .glyph{width:18px;height:18px}
 .hc-nav:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(124,108,255,.45),var(--sh-1)}
 .hc-nav:active:not(:disabled){transform:scale(.94)}
 .hc-nav:disabled{opacity:.35;cursor:default}
 .hc-track::before,.hc-track::after{display:none}
 .hcard{transform:none;opacity:1;scroll-snap-align:start;scroll-snap-stop:normal;transition:box-shadow .3s var(--ease),transform .25s var(--ease)}
 .hcard::after{display:none}
 .hcard .gc-glint{animation:gc-glint 8s ease-in-out infinite;opacity:1}
 .hcard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1) 50%,rgba(255,255,255,.18)),0 18px 40px rgba(2,6,23,.55),0 0 32px color-mix(in srgb,var(--g1) 30%,transparent)}
 .hcard.is-active:not(:hover){box-shadow:inset 0 0 0 1px var(--line),var(--sh-2)}
 .shell.is-home{padding-bottom:20px}
}
@media (min-width:1360px){.hc{--hc-w:calc((100% - 3 * var(--hc-gap)) / 4)}}
@media (min-width:1024px){.shell.is-home.fit-2 .hc-nav{width:34px;height:34px}}
@media (min-width:1760px){.hc{--hc-w:calc((100% - 4 * var(--hc-gap)) / 5)}}
body.intro .hc{animation:intro-up .6s var(--ease-out) .26s both}
body.intro .hc-dots{animation:intro-up .6s var(--ease-out) .34s both}
.reduce-motion .hcard{transform:none;opacity:calc(1 - var(--d) * .3)}
@media (prefers-reduced-motion:reduce){.hcard{transform:none;opacity:calc(1 - var(--d) * .3)}.hc-dots button{transition:none}}
.performance-lite .hcard{will-change:auto;transform:scale(calc(1 - var(--d) * .1))}
.performance-lite .hcard::after,.performance-lite .hc-art::after{display:none}
.performance-lite .hcard.is-active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1) 50%,rgba(255,255,255,.18)),0 10px 22px rgba(2,6,23,.5)}

/* Global ranking shortcut (2026-10-22): the trophy is back — floating, sweeping light, a breathing halo and three
   sparks — and the funded total shows as the gold icon and the amount (no "Gold" word). */
.tile-global{background:radial-gradient(120% 90% at 50% 0%,rgba(247,197,78,.16),transparent 62%),var(--glass);box-shadow:inset 0 0 0 1px rgba(247,197,78,.3),var(--sh-1)}
.tile-global::after{background:radial-gradient(closest-side,rgba(247,197,78,.42),transparent)}
.shell.is-home .tiles .tile:not(.tile-global) .tile-ic>.art{transform:scale(1.25)}
@media (max-width:1023px){.shell.is-home:not(.fit-1) .tiles .tile{grid-template-rows:54px 1fr;min-height:136px}}
.home-global-trophy{position:relative;display:grid;place-items:center;isolation:isolate}
.home-global-trophy>.art{position:relative;z-index:1;width:42px;height:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(247,197,78,.45))}
.tile-global .tile-ic.home-global-trophy{height:42px}
.hg-halo{position:absolute;left:50%;top:50%;z-index:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,102,.55),rgba(255,214,102,0));animation:hg-breathe 2.8s ease-in-out infinite}
.hg-spark{position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(255,236,170,.9) 45%,rgba(255,236,170,0) 70%);opacity:0;animation:hg-spark 2.4s ease-in-out infinite}
.hg-spark.s1{left:6%;top:14%}
.hg-spark.s2{right:4%;top:6%;animation-delay:.8s}
.hg-spark.s3{right:14%;bottom:8%;width:5px;height:5px;animation-delay:1.6s}
@keyframes hg-breathe{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.12);opacity:1}}
@keyframes hg-spark{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.15)}70%{opacity:.2;transform:scale(.8)}}
.tile-global .home-global-prize{display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:850;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.tile-global .home-global-prize .art{width:14px;height:14px}
@media (min-width:1024px){.tile-global .tile-ic.home-global-trophy{height:44px}.home-global-trophy>.art{width:44px;height:44px}}
.reduce-motion .hg-halo,.reduce-motion .hg-spark{animation:none}
@media (prefers-reduced-motion:reduce){.hg-halo,.hg-spark{animation:none}}
.performance-lite .hg-halo,.performance-lite .hg-spark{animation:none}.performance-lite .hg-spark{display:none}
body.playing .hg-halo,body.playing .hg-spark,body.is-background .hg-halo,body.is-background .hg-spark{animation-play-state:paused}

/* ---------- Rankings (2026-10-22): one top 3 for every board, list rows with the prize under the score ---------- */
.rk-stage{position:relative;isolation:isolate;margin:6px 0 0;padding:16px 8px 0;border-radius:24px;overflow:hidden;background:radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--g1,#8B8CF8) 30%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--g2,#2B2E8F) 42%,#0E1430),#0B1026);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1,#8B8CF8) 24%,transparent),var(--sh-2)}
.rk-stage::before{content:"";position:absolute;left:50%;top:-38%;z-index:-1;width:160%;aspect-ratio:1;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--g1,#8B8CF8) 15%,transparent) 0 6deg,transparent 6deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 18%,transparent 72%);mask:radial-gradient(closest-side,#000 18%,transparent 72%);transform:translateX(-50%);animation:t3-rays 48s linear infinite;pointer-events:none}
@keyframes t3-rays{to{transform:translateX(-50%) rotate(360deg)}}
.rk-stage.is-empty>.t3{filter:none}
ol.t3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:6px;margin:0;padding:0;list-style:none}
.t3-col{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;grid-row:1}
.t3-col.p1{grid-column:2}.t3-col.p2{grid-column:1}.t3-col.p3{grid-column:3}
.t3-crown{position:relative;z-index:2;width:42px;height:26px;margin-bottom:-7px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(247,197,78,.55));animation:t3-crown 3.2s ease-in-out infinite}
@keyframes t3-crown{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-3px) rotate(5deg)}}
.t3-ava{--ring:linear-gradient(145deg,#F4F6FF,#9AA3BC 55%,#E8ECF7);position:relative;display:grid;place-items:center;padding:3px;border-radius:50%;background:var(--ring);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.t3-col.p1 .t3-ava{--ring:conic-gradient(from 210deg,#FFF1B8,#F7C54E,#C98A12,#FFE08A,#F7C54E,#FFF1B8);padding:4px;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 28px rgba(247,197,78,.5)}
.t3-col.p3 .t3-ava{--ring:linear-gradient(145deg,#FFDDBF,#C9814A 55%,#F5B98A)}
.t3-ava>.art{border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(10,15,33,.92)}
.t3-col.empty .t3-ava{padding:0;background:none;box-shadow:none}
.t3-q{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.32);background:rgba(255,255,255,.05);font-size:20px;font-weight:900;color:rgba(255,255,255,.55)}
.t3-col.p1 .t3-q{width:70px;height:70px;font-size:24px}
.t3-nm{display:block;max-width:100%;margin-top:8px;font-size:13px;font-weight:800;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3-col.p1 .t3-nm{font-size:14.5px}
.t3-col.me .t3-nm{color:#C9C6FF}
.t3-col.empty .t3-nm{font-weight:700;color:rgba(230,234,255,.6)}
.t3-sc{margin-top:1px;font-size:16px;font-weight:900;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums}
.t3-col.p1 .t3-sc{font-size:19px}
.t3-sub{max-width:100%;font-size:11px;line-height:1.3;color:rgba(230,234,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3-pz{display:inline-flex;align-items:center;gap:3px;max-width:100%;margin-top:5px;padding:2px 8px 2px 4px;border-radius:999px;background:rgba(247,197,78,.14);box-shadow:inset 0 0 0 1px rgba(247,197,78,.34);color:#FFD978;font-size:12.5px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.t3-pz .art{flex:none;width:16px;height:16px}
.t3-pz.none{background:none;box-shadow:none;color:rgba(230,234,255,.45)}
.t3-step{display:grid;place-items:center;align-self:stretch;height:44px;margin-top:9px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--g1,#8B8CF8) 34%,rgba(255,255,255,.08)),color-mix(in srgb,var(--g2,#2B2E8F) 44%,rgba(255,255,255,.02)));box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px color-mix(in srgb,var(--g1,#8B8CF8) 30%,transparent)}
.t3-step span{font-size:22px;font-weight:950;color:rgba(255,255,255,.92);text-shadow:0 2px 8px rgba(0,0,0,.35)}
.t3-col.p1 .t3-step{height:64px;background:linear-gradient(180deg,rgba(255,214,102,.56),rgba(201,138,18,.24));box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(247,197,78,.5),0 -6px 26px rgba(247,197,78,.2)}
.t3-col.p1 .t3-step span{font-size:30px;color:#FFF3C4}
.t3-col.p3 .t3-step{height:32px}
.t3-col.empty{opacity:.72}
.rk-cta{margin-top:0}
.rk .pool-card .pc-k{font-size:11.5px;font-weight:750;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.rk .pool-card b{display:block;line-height:1.15}
.rk-boost{display:grid;gap:8px}
.rk-boost .rk-adb{margin:0}
.rk-head,.rk-row{grid-template-columns:30px minmax(0,1fr) auto}
.rk-head span:nth-child(3){text-align:right}
.rk-row .who .art{width:36px;height:36px}
.rk-row .val{display:grid;justify-items:end;gap:1px;min-width:0}
.rk-row .val .score{font-size:15px;font-weight:850;line-height:1.2}
.rk-row .val .prize{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:800;color:var(--gold-ink);white-space:nowrap}
.rk-row .val .prize .art{width:15px;height:15px}
.rk-row .val .prize.none{color:var(--ink-3);font-weight:600}
.rh-ic.rh-trophy{position:relative;isolation:isolate;overflow:visible}
.rh-trophy>.art{position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(247,197,78,.5))}
.rh-trophy .hg-halo{width:66px;height:66px;margin:-33px 0 0 -33px}
.rk-fund{display:grid;gap:8px;margin-bottom:12px;padding:12px;border-radius:16px;background:var(--inset)}
.rk-fund h3{font-size:14px;font-weight:850}
.rk-fund .fd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rk-fund .fd-row small{display:block;font-size:11.5px;color:var(--ink-2)}
.rk-fund p{font-size:13px;line-height:1.5}
.rk-fund .fd-g{display:inline-flex;align-items:center;gap:3px;color:var(--gold-ink);font-weight:850;white-space:nowrap;vertical-align:-2px}
.rk-fund .fd-g .art{width:14px;height:14px}
.rkg-prize strong .art,.rkg-bonus b .art{vertical-align:-3px}
.reduce-motion .rk-stage::before,.reduce-motion .t3-crown{animation:none}
@media (prefers-reduced-motion:reduce){.rk-stage::before,.t3-crown{animation:none}}
.performance-lite .rk-stage::before{animation:none}.performance-lite .t3-crown{animation:none}
@media (max-width:359px){.t3-nm{font-size:12px}.t3-sc{font-size:14px}.t3-col.p1 .t3-sc{font-size:17px}.t3-pz{font-size:11.5px}}

/* ---------- Round result (2026-10-22): a compact hero, then the rewards with one clear claim and its ad bonus ---------- */
.rs2{gap:12px}
.rs-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:12px;border-radius:24px;overflow:hidden;isolation:isolate;background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--g1,#8B8CF8) 28%,transparent),transparent 62%),var(--surface);box-shadow:var(--sh-2)}
.rs-hero .confetti{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rs-hero .res-art{width:104px;height:80px;border-radius:18px}
.rs-tt{min-width:0}
.rs-tt h2{font-size:21px;font-weight:900;line-height:1.15;letter-spacing:-.02em}
.rs-tt p{margin-top:2px;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.rs-score{margin-top:6px}
.rs-score small{display:block;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.rs-score b{display:block;font-size:34px;font-weight:950;line-height:1.02;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rs-rewards{display:grid;gap:10px;padding:14px;border-radius:24px;background:var(--surface);box-shadow:var(--sh-2)}
.rs-rewards.is-ready{box-shadow:inset 0 0 0 1px rgba(247,197,78,.42),0 0 30px rgba(247,197,78,.12),var(--sh-2)}
.rs-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rs-head h3{font-size:17px;font-weight:850}
.rs-rewards .reward-tiles{gap:8px}
.rs-rewards .reward-tile{justify-content:center;gap:3px;padding:10px 6px;border-radius:16px;background:var(--inset);box-shadow:none}
.rs-rewards .reward-tile .art{width:40px;height:40px}
.rs-rewards .reward-tile b{font-size:20px}
.rs-rewards .reward-tile.rt-ready{background:linear-gradient(180deg,rgba(247,197,78,.2),rgba(247,197,78,.05));box-shadow:inset 0 0 0 1px rgba(247,197,78,.4)}
.rs-rewards .reward-tile.rt-ready b{color:#FFD978}
.rs-rewards .reward-tile.rt-done b{color:var(--mint)}
.rs-rewards .chest-tile b{font-size:15px}
.rs-rewards .chest-tile .btn{min-height:32px;margin-top:2px;padding:0 10px;font-size:12.5px}
.rs-claim{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font-size:16px}
.rs-claim>.glyph{width:20px;height:20px}
.rs-claim-amt{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding:3px 10px 3px 5px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:900}
.rs-claim-amt .art{width:22px;height:22px}
.rs-bonus{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.3);font-size:12.5px;font-weight:700;line-height:1.4;color:var(--action-ink)}
.rs-bonus .art{flex:none;width:24px;height:24px}
.rs-safe{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.rs-safe .glyph{flex:none;width:14px;height:14px;margin-top:2px;color:var(--success)}
.rs2 .stat-strip>div{padding:9px 6px}
.rs2 .stat-strip .v{font-size:18px}
.rs2 .res-actions .btn{min-height:48px}

/* Chest offer additions: the ad's ranking bonus and today's chest count. */
.coffer .co-bonus{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 8px;padding:7px 10px;border-radius:12px;background:rgba(124,108,255,.18);box-shadow:inset 0 0 0 1px rgba(160,150,255,.3);font-size:12px;font-weight:750;line-height:1.35;color:#D9D6FF;text-align:left}
.coffer .co-bonus .art{flex:none;width:22px;height:22px}
.coffer .co-quota{position:relative;margin:0 0 12px;font-size:11.5px;font-weight:700;color:var(--stage-ink-2,#A9B1CF)}

/* During a round a drag on the board never pans the page (taps still work); the screen itself is fitted in games.js. */
body.playing .board{touch-action:none}
/* Lighter look (performance-lite: Data Saver, low-memory phones, or a phone measured below ~25 fps): decorative loops
   stop and glass blur goes, so taps, scrolling and games keep their frames. Functional motion — spinners, countdowns,
   game boards, progress bars, the how-to pictures — is unchanged. */
.performance-lite .btn-primary::before,.performance-lite .av-ring,.performance-lite .gc-glint,.performance-lite .lgb-A::before,
.performance-lite .gp-art>.art svg,.performance-lite .gp-art>.art img,.performance-lite .gp-sparks i,.performance-lite .gp-prize>.art,
.performance-lite .rk-hero::after,.performance-lite .mq,.performance-lite .wk,.performance-lite .mn,.performance-lite .mcd,.performance-lite .mh.odd,
.performance-lite .ms.top,.performance-lite .mo-spin,.performance-lite .msl.move,.performance-lite .msl-arrow,.performance-lite .mg-rays,.performance-lite .mg-star,
.performance-lite .mt-dash,.performance-lite .adm-plus,.performance-lite .adm-cup,.performance-lite .adm-ad,.performance-lite .coffer .co-rays,
.performance-lite .npop.win::after,.performance-lite .profile-ring *{animation:none!important}
/* Keep the raffle's original border, floating ticket and six twinkling particles in
   automatic lite mode. Explicit Reduced motion still uses the rules above. */
.performance-lite *,.performance-lite ::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.performance-lite body::after{display:none}
.play.tight{padding-bottom:calc(6px + var(--safe-b))}
.play.tight .phead{margin-bottom:0}
.play.tight .hud-sub{margin-top:6px}
.play.tight .board-area{margin:6px 0;min-height:0}
.play.tight .boost-note{display:none}
.play.tight .board-feedback{min-height:18px;font-size:13px}
body.playing #app{overscroll-behavior:none}
/* Funded prizes split over places 1–N (2026-10-23): the total, the first three tiles, then each group's share. */
.rk-guarantees .rkg-total{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;font-weight:800;line-height:1.3;opacity:1}
.rk-guarantees .rkg-rest{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rkg-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:var(--inset,#8e91d610);border:1px solid #8d96ed33;font-size:11px;line-height:1}
.rkg-chip small{font-size:10px;opacity:.75}
.rkg-chip b{font-weight:900}
/* ── Chest popup (2026-10-23): a reward moment — a big glowing chest, what it holds, one clear claim ─────────── */
.chest-modal .coffer.cx{padding:16px 20px 16px;border-radius:24px;background:radial-gradient(120% 70% at 50% 0%,rgba(255,206,92,.30),transparent 60%),linear-gradient(180deg,#2A2F6B 0%,#171C44 62%,#121638 100%);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,214,118,.28),inset 0 1px 0 rgba(255,255,255,.12);animation:cx-in .42s cubic-bezier(.2,1.3,.4,1) both}
@keyframes cx-in{from{opacity:0;transform:translateY(18px) scale(.86)}to{opacity:1;transform:none}}
.coffer.cx .co-paused{margin:0 0 2px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;opacity:.9}
.cx-hero{position:relative;display:grid;place-items:center;height:136px;margin:0 auto}
.coffer.cx .co-rays{top:50%;width:236px;height:236px;margin:-118px 0 0 -118px;animation:cx-spin 16s linear infinite}
@keyframes cx-spin{to{transform:rotate(1turn)}}
.cx-glow{position:absolute;left:50%;top:50%;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,118,.55),rgba(255,214,118,.12) 45%,transparent 70%);animation:cx-pulse 1.8s ease-in-out infinite;pointer-events:none}
@keyframes cx-pulse{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.06);opacity:1}}
.coffer.cx .co-art{position:relative;width:104px;height:104px;margin:0;filter:drop-shadow(0 10px 22px rgba(247,197,78,.55));animation:cx-bob 2.2s ease-in-out infinite}
.coffer.cx .co-art .art,.coffer.cx .co-art img{width:104px;height:104px}
@keyframes cx-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.cx-sp{position:absolute;width:9px;height:9px;background:#FFE7A0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:cx-tw 2.4s ease-in-out infinite;opacity:0;pointer-events:none}
.cx-sp.s1{left:20%;top:22%}.cx-sp.s2{right:20%;top:16%;animation-delay:.6s;width:12px;height:12px}.cx-sp.s3{left:26%;bottom:14%;animation-delay:1.2s}.cx-sp.s4{right:24%;bottom:20%;animation-delay:1.8s;width:7px;height:7px}
@keyframes cx-tw{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.1)}}
.cx-badge{position:relative;display:inline-flex;align-items:center;gap:5px;margin:2px auto 6px;padding:4px 10px;border-radius:999px;background:rgba(113,223,189,.14);box-shadow:inset 0 0 0 1px rgba(113,223,189,.38);color:#9BF0D2;font-size:11.5px;font-weight:800;line-height:1.2}
.cx-badge .glyph{width:12px;height:12px}
.coffer.cx b#co-t{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.coffer.cx .co-value{margin:10px auto 2px;padding:7px 16px;width:max-content;max-width:100%;box-sizing:border-box;border-radius:16px;background:rgba(255,214,118,.10);box-shadow:inset 0 0 0 1px rgba(255,214,118,.30)}
.coffer.cx .co-value strong{font-size:32px}
.coffer.cx .co-hint{margin:8px auto 12px;font-size:13px;font-weight:650;line-height:1.4;color:#C6CCE6;text-shadow:none}
.coffer.cx .co-bonus{margin:0 0 12px;font-size:11.5px}
.coffer.cx .cx-act{display:grid;grid-template-columns:1fr;gap:6px}
.cx-claim{min-height:52px;gap:8px;font-size:16px;border-radius:14px;animation:cx-cta 2.4s ease-in-out infinite}
.cx-claim .glyph{width:20px;height:20px}
@keyframes cx-cta{0%,70%,100%{box-shadow:0 6px 16px rgba(242,169,34,.42),inset 0 1px 0 rgba(255,255,255,.6)}85%{box-shadow:0 6px 26px rgba(242,169,34,.75),0 0 0 6px rgba(255,214,118,.16),inset 0 1px 0 rgba(255,255,255,.6)}}
.coffer.cx .cx-give{min-height:40px;background:transparent;color:#A9B1CF;font-size:13.5px;font-weight:750;box-shadow:none}
.coffer.cx .co-quota{margin:8px 0 0;font-size:11px;opacity:.85}
.coffer.cx.confirm .cx-give{background:linear-gradient(180deg,#FF7A8A,#E5485C);color:#fff;box-shadow:0 6px 16px rgba(229,72,92,.35)}
.coffer.cx.confirm .cx-claim{animation:none}
/* Opened: the chest pops, light bursts outwards, the Points pulse — then the round resumes. */
.cx-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.cx-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#FFD776;box-shadow:0 0 10px #FFD776;opacity:0;transform:rotate(var(--a)) translateY(0)}
.coffer.cx.cx-opened .cx-burst i{animation:cx-fly .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes cx-fly{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-92px) scale(.4)}}
.coffer.cx.cx-opened .co-art{animation:cx-pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cx-pop{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1.08)}}
.coffer.cx.cx-opened .co-value{animation:cx-val .6s ease-out both}
@keyframes cx-val{0%{transform:scale(1)}40%{transform:scale(1.14);box-shadow:inset 0 0 0 1px rgba(255,214,118,.6),0 0 24px rgba(255,214,118,.5)}100%{transform:scale(1)}}
.coffer.cx.cx-opened .cx-act,.coffer.cx.cx-opened .co-quota,.coffer.cx.cx-opened .co-hint{opacity:.35;transition:opacity .2s}
.performance-lite .coffer.cx .co-rays,.performance-lite .cx-sp{display:none}
.performance-lite .coffer.cx .co-art,.performance-lite .cx-glow,.performance-lite .cx-claim{animation:none}
@media (max-height:620px){.cx-hero{height:106px}.coffer.cx .co-art,.coffer.cx .co-art .art,.coffer.cx .co-art img{width:84px;height:84px}.coffer.cx b#co-t{font-size:19px}.coffer.cx .co-value strong{font-size:27px}}