:root{
  --ink-900:#0B0A1F; --ink-850:#100E26; --ink-800:#16142F; --ink-700:#1E1B3D; --ink-600:#28244E; --ink-500:#332E60;
  --line:#2C2853; --line-soft:#221F45;
  --violet-300:#B9A8FF; --violet-400:#9A82FF; --violet:#7C5CFF; --violet-600:#6B3CFF; --violet-700:#5526E0;
  --violet-soft:rgba(124,92,255,.16); --violet-glow:rgba(124,92,255,.5);
  --mint:#2BE8A6; --mint-d:#12A878; --mint-soft:rgba(43,232,166,.15);
  --coral:#FF6B6B; --coral-soft:rgba(255,107,107,.15);
  --gold:#FFC53D; --gold-d:#F59E0B; --gold-soft:rgba(255,197,61,.16);
  --sky:#38BDF8; --sky-soft:rgba(56,189,248,.15);
  --pink:#FF5CAA; --pink-soft:rgba(255,92,170,.15);
  --text:#F4F2FF; --text-2:#C9C4EC; --muted:#908AC0; --faint:#635D92;
  --on-mint:#04231A; --on-gold:#2E2102;
  --grad-pulse:linear-gradient(135deg,#8B6CFF 0%,#FF5CAA 100%);
  --grad-gold:linear-gradient(135deg,#FFD86B 0%,#FFA73D 100%);
  --grad-violet:linear-gradient(135deg,#9A82FF 0%,#6B3CFF 100%);
  --grad-mint:linear-gradient(135deg,#5BF0BE 0%,#16B886 100%);
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.2,.8,.2,1);
  --shadow-md:0 8px 24px rgba(0,0,0,.42); --shadow-lg:0 18px 48px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body); color:var(--text); background:#0a0a22;
  height:100%; overflow:hidden; overscroll-behavior:none;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stage-head{text-align:center;max-width:430px}
.stage-head h1{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;justify-content:center}
.stage-head p{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}
.stage-head b{color:var(--violet-300)}
.mono{font-family:var(--font-mono)}
.eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* full-screen app — the game IS the viewport (mobile-first, fills any screen) */
.phone{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;background:#0a0a22}
.notch{display:none}

/* ===== living world background ===== */
.world{position:absolute;inset:0;overflow:hidden}
.sky{position:absolute;inset:0;
  background:
    radial-gradient(90% 55% at 50% 6%, rgba(124,92,255,.42), transparent 60%),
    radial-gradient(70% 45% at 85% 35%, rgba(255,92,170,.16), transparent 60%),
    radial-gradient(80% 50% at 12% 70%, rgba(43,232,166,.12), transparent 60%),
    linear-gradient(#13123a 0%, #0c0b25 45%, #0a0920 100%);
}
.stars{position:absolute;inset:0}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.18}50%{opacity:.7}}
.orbs{position:absolute;inset:-10% 0;will-change:transform}
.orb{position:absolute;border-radius:50%;filter:blur(26px);opacity:.5}
.horizon{position:absolute;left:0;right:0;bottom:0;height:160px;
  background:radial-gradient(120% 100% at 50% 120%, rgba(124,92,255,.4), transparent 70%);}
.motes{position:absolute;inset:0;pointer-events:none}
.mote{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:var(--violet-300);opacity:.0;
  box-shadow:0 0 8px var(--violet-glow);animation:rise linear infinite}
@keyframes rise{0%{opacity:0;transform:translateY(0)}10%{opacity:.8}100%{opacity:0;transform:translateY(-760px)}}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.6),inset 0 -40px 60px rgba(11,10,31,.7)}

/* ===== floating glass HUD ===== */
.hud{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:50;display:flex;align-items:center;gap:9px;padding:0 14px}
.glass{background:rgba(22,20,47,.55);backdrop-filter:blur(14px);border:1px solid rgba(124,92,255,.22);border-radius:var(--r-pill)}
.menubtn{width:42px;height:42px;display:grid;place-items:center;cursor:pointer;color:var(--text);flex:none;transition:transform .15s var(--spring)}
.menubtn:active{transform:scale(.9)}
.hud .lvlwrap{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;flex:1;min-width:104px}
.lvlbadge{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:#fff;background:var(--grad-violet);box-shadow:0 0 14px var(--violet-soft)}
.lvlwrap .bar{flex:1;min-width:0}
.lvlwrap .bar .t{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:nowrap;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--violet-300);margin-bottom:3px;text-transform:uppercase}
.lvlwrap .bar .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvlwrap .bar .track{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.lvlwrap .bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--pink));background-size:200% 100%;width:0;transition:width .8s var(--spring);animation:shim 2.2s linear infinite}
.statchip{display:flex;align-items:center;gap:4px;padding:8px 10px;font-family:var(--font-mono);font-weight:700;font-size:12.5px;flex:none;white-space:nowrap}
/* four chips on a narrow phone: drop the raw XP count before ANYTHING wraps */
@media(max-width:400px){.lvlwrap .bar .t #xpt{display:none}.statchip{padding:8px 8px;font-size:12px}}
.statchip.coin{color:var(--gold)} .statchip.streak{color:var(--coral)}
@keyframes shim{from{background-position:200% 0}to{background-position:-40% 0}}

/* ===== the path / scroll world ===== */
.scrollworld{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:20;scrollbar-width:none}
.scrollworld::-webkit-scrollbar{display:none}
.path{position:relative;width:100%;padding:96px 0 150px;min-height:100%}

/* chapter banner */
.chapter{position:relative;width:fit-content;margin:0 auto 8px;text-align:center;z-index:5}
.chapter .ch-l{display:flex;align-items:center;gap:10px;color:var(--violet-300)}
.chapter .ch-l hr{width:34px;border:none;border-top:2px solid var(--violet-soft)}
.chapter h2{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.02em;margin-top:3px}

/* node */
.node{position:relative;height:118px;display:flex;justify-content:center}
.nodewrap{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.startflag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:#fff;color:var(--violet-700);font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.05em;padding:4px 11px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(0,0,0,.4);animation:bobflag 1.3s var(--spring) infinite;white-space:nowrap;z-index:6}
.startflag::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:#fff}
@keyframes bobflag{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.bub{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;border:none;cursor:default;position:relative;
  transition:transform .12s var(--spring),box-shadow .12s}
.bub .face{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2}
.bub.done .face{background:var(--grad-mint)}
.bub.now .face{background:var(--grad-violet)}
.bub.todo .face{background:linear-gradient(160deg,#2a2750,#211e40)}
.bub.locked .face{background:linear-gradient(160deg,#1a1836,#14122c)}
.bub.done{box-shadow:0 8px 0 #0E7E5C, 0 14px 22px rgba(0,0,0,.45);}
.bub.now{box-shadow:0 8px 0 #4A1FC2, 0 0 34px var(--violet-glow), 0 14px 26px rgba(0,0,0,.5);cursor:pointer}
.bub.todo{box-shadow:0 7px 0 #16142f, 0 10px 18px rgba(0,0,0,.4);cursor:pointer}
.bub.locked{box-shadow:0 7px 0 #100e26, 0 8px 14px rgba(0,0,0,.4)}
.bub.now{animation:nowpulse 2.2s ease-in-out infinite}
@keyframes nowpulse{0%,100%{box-shadow:0 8px 0 #4A1FC2,0 0 28px var(--violet-glow),0 14px 26px rgba(0,0,0,.5)}50%{box-shadow:0 8px 0 #4A1FC2,0 0 46px var(--violet-glow),0 14px 26px rgba(0,0,0,.5)}}
.bub.todo{animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bub.press{transform:translateY(6px)}
.bub.press{box-shadow:0 2px 0 #4A1FC2,0 0 30px var(--violet-glow)!important}
.ringpop{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--violet);opacity:0;z-index:1}
.nlabel{font-size:11.5px;font-weight:800;text-align:center;max-width:120px;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.nlabel.dim{color:var(--muted)}
.nlabel .sub{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--gold);margin-top:2px;text-shadow:none}
.nlabel.dim .sub{color:var(--faint)}
/* Pip on path */
.pipspot{position:absolute;top:-12px;z-index:8;pointer-events:none}
/* decorations */
.deco{position:absolute;z-index:3;pointer-events:none;opacity:.95}
.spark{position:absolute;color:var(--gold);font-size:13px;animation:tw 2.4s ease-in-out infinite;z-index:3}
.chest{position:absolute;z-index:7;cursor:pointer;animation:floaty 2.8s ease-in-out infinite}
.flag-mile{position:absolute;z-index:4;text-align:center}

/* bottom objective CTA */
.cta{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:var(--r-pill);font-weight:800;font-size:13.5px;color:#fff;background:var(--grad-violet);
  box-shadow:0 10px 30px rgba(124,92,255,.5);cursor:pointer;animation:ctab 1.8s var(--spring) infinite;white-space:nowrap}
@keyframes ctab{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}

/* ===== left drawer ===== */
.drawer-scrim{position:absolute;inset:0;background:rgba(5,4,18,.6);backdrop-filter:blur(3px);z-index:95;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:absolute;top:0;left:0;bottom:0;width:75%;max-width:280px;z-index:96;
  background:linear-gradient(160deg,#1a1740,#100e28);border-right:1px solid var(--line);
  transform:translateX(-104%);transition:transform .34s var(--spring);display:flex;flex-direction:column;padding:38px 0 18px;box-shadow:14px 0 40px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer .dhead{display:flex;align-items:center;gap:12px;padding:6px 20px 18px;border-bottom:1px solid var(--line)}
.drawer .dhead .nm b{font-family:var(--font-display);font-weight:800;font-size:16px;display:block}
.drawer .dhead .nm span{font-size:11.5px;color:var(--violet-300);font-family:var(--font-mono)}
.dnav{flex:1;padding:12px 12px;display:flex;flex-direction:column;gap:3px}
.dnav button{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:var(--r-md);border:none;background:none;color:var(--text-2);font-family:var(--font-body);font-weight:700;font-size:14.5px;cursor:pointer;text-align:left;transition:.18s}
.dnav button:hover{background:var(--ink-700);color:var(--text)}
.dnav button.active{background:var(--violet-soft);color:#fff}
.dnav button.active svg{color:var(--violet-300)}
.dnav svg{color:var(--muted);flex:none}
.dfoot{padding:10px 22px 0;color:var(--faint);font-size:11px;font-family:var(--font-mono)}

/* ===== full-screen panels (store/ranks/profile) ===== */
.panel{position:absolute;inset:0;z-index:70;background:
  radial-gradient(90% 50% at 50% 0%,rgba(124,92,255,.22),transparent 60%),var(--ink-900);
  transform:translateX(100%);transition:transform .34s var(--spring);overflow-y:auto;scrollbar-width:none}
.panel::-webkit-scrollbar{display:none}
.panel.open{transform:none}
.ptop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 16px 14px;background:linear-gradient(rgba(11,10,31,.9),transparent);backdrop-filter:blur(8px)}
.ptop .back{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink-700);border:1px solid var(--line);color:var(--text);cursor:pointer}
.ptop h2{font-family:var(--font-display);font-weight:800;font-size:20px}
.pbody{max-width:520px;margin:0 auto;padding:6px 16px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px}
.card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;position:relative}
.card.glow{box-shadow:var(--glow-violet,0 0 0 1px var(--violet-soft),0 8px 28px rgba(124,92,255,.3))}
.clabel{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prize{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.prize .ico{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--ink-700)}
.prize b{font-size:13.5px}.prize .stock{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.prize .cost{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--gold);display:flex;gap:5px;align-items:center;margin-top:auto}
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:800;font-size:13px;color:#fff;background:var(--grad-violet);padding:10px 14px;border-radius:var(--r-sm);width:100%;transition:transform .14s var(--spring);box-shadow:0 6px 18px rgba(124,92,255,.32)}
.btn:active{transform:scale(.94)}
.btn.gold{background:var(--grad-gold);color:var(--on-gold)}
.btn.ghost{background:var(--ink-700);border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.sm{font-size:12px;padding:8px 10px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.lbrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);background:var(--ink-800);border:1px solid var(--line)}
.lbrow.me{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet-soft)}
.lbrow.top{background:var(--gold-soft);border-color:rgba(255,197,61,.4)}
.lbrow .rk{font-family:var(--font-mono);font-weight:700;font-size:15px;width:24px;text-align:center;color:var(--muted)}
.lbrow.top .rk{color:var(--gold)}
.lbrow .ava2{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px;flex:none}
.lbrow .who b{font-size:13.5px;display:block}.lbrow .who span{font-size:11px;color:var(--muted)}
/* R9b: card previews clamp at 2 lines — tap the card/row for the full text */
.cl2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;white-space:normal}
b.cl2,h3.cl2{display:-webkit-box}
.lbrow .pts{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:14px;text-align:right}.lbrow .pts span{display:block;font-size:9px;color:var(--muted);font-weight:400}
.bgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.badge{aspect-ratio:1;border-radius:var(--r-md);background:var(--ink-700);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:6px}
.badge.lock{opacity:.4}.badge small{font-size:9.5px;font-weight:700;line-height:1.1}
.badge.un{animation:floaty 3.4s ease-in-out infinite}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:700;font-size:12.5px;padding:6px 11px;border-radius:var(--r-pill);background:var(--ink-700);border:1px solid var(--line)}
.pill.coin{color:var(--gold)}.pill.streak{color:var(--coral)}

/* ===== fx ===== */
.fx{position:absolute;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.flyup{position:absolute;font-family:var(--font-mono);font-weight:700;font-size:26px;animation:flyup 1.3s var(--ease-out) forwards;text-shadow:0 2px 12px rgba(0,0,0,.6)}
@keyframes flyup{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:translateY(-120px) scale(1)}}
.conf{position:absolute;width:10px;height:15px;border-radius:2px;will-change:transform,opacity}
@keyframes fall{to{transform:translateY(720px) rotate(760deg);opacity:0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:115;pointer-events:none}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,-1px)}}
.pipdock{position:absolute;right:14px;bottom:96px;z-index:118;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.bubble{max-width:190px;background:rgba(30,27,61,.95);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:700;line-height:1.35;padding:9px 12px;border-radius:var(--r-md);box-shadow:var(--shadow-md);position:relative;animation:pop .4s var(--spring) both}
.bubble::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:11px;height:11px;background:rgba(30,27,61,.95);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.scrim{position:absolute;inset:0;background:rgba(6,5,18,.66);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:flex-end;animation:fade .25s both}
.scrim.center{align-items:center;justify-content:center}
.sheet{width:100%;background:linear-gradient(#1b1942,#16142f);border-top:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 18px 24px;animation:up .42s var(--spring) both}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h3{font-family:var(--font-display);font-weight:800;font-size:20px;margin-bottom:3px}
.meta{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.tag{font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--r-pill);background:var(--ink-700);border:1px solid var(--line);color:var(--text-2)}
.tag.sky{color:var(--sky);background:var(--sky-soft);border-color:rgba(56,189,248,.3)}
.checkl{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.citem{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-md);background:var(--ink-700);border:1px solid var(--line);cursor:pointer;font-size:13px}
.citem .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.2s}
.citem.on .box{background:var(--mint);border-color:var(--mint)}.citem.on{color:var(--text-2)}
.payout{display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:var(--r-md);background:var(--gold-soft);border:1px solid rgba(255,197,61,.3);margin:12px 0}
.payout .v{font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--violet-300)}
.payout .x{font-family:var(--font-mono);font-weight:700;font-size:18px;color:var(--gold)}
.modal{width:86%;background:linear-gradient(#1d1a46,#16142f);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 22px;text-align:center;animation:pop .5s var(--spring) both;box-shadow:var(--shadow-lg)}
.modal .big{font-family:var(--font-mono);font-weight:700;font-size:70px;background:var(--grad-pulse);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.modal h3{font-family:var(--font-display);font-weight:800;font-size:25px;margin:6px 0 4px}
.modal p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:122;background:rgba(30,27,61,.96);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:700;padding:11px 16px;border-radius:var(--r-pill);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px;animation:pop .4s var(--spring) both;max-width:88%}
@keyframes pop{0%{opacity:0;transform:scale(.84)}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.caption{color:var(--faint);font-size:12px;text-align:center;max-width:392px;line-height:1.5}.caption b{color:var(--text-2)}
/* ===== onboarding (first-time character setup) ===== */
.onb{position:absolute;inset:0;z-index:200;background:radial-gradient(90% 60% at 50% 0%,rgba(124,92,255,.32),transparent 60%),#0a0920;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(34px + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom));text-align:center;animation:fade .4s both;overflow-y:auto}
.onb .eyebrow{font-size:11px}
.onb h2{font-family:var(--font-display);font-weight:800;font-size:25px}
.onb .pipprev{filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.onb .skins{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:300px}
.skin{width:46px;height:46px;border-radius:50%;cursor:pointer;border:3px solid transparent;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .15s var(--spring)}
.skin.sel{border-color:#fff;transform:scale(1.12)}
.skin:active{transform:scale(.9)}
.onb input{font-family:var(--font-body);font-weight:700;font-size:16px;text-align:center;color:var(--text);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:240px;outline:none}
.onb input:focus{border-color:var(--violet)}
/* ===== daily intro cinematic ===== */
.intro{position:absolute;inset:0;z-index:190;pointer-events:none}
.introcard{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;animation:introcard 2.6s var(--ease-out) forwards}
@keyframes introcard{0%{opacity:0;transform:translate(-50%,-32%) scale(.92)}16%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.03)}}
.introcard h1{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.02em;text-shadow:0 6px 26px rgba(124,92,255,.55)}
.introskip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:var(--text-2);font-size:12px;font-weight:700;background:rgba(22,20,47,.6);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* ===== world depth: drifting clouds ===== */
.clouds{position:absolute;inset:-5% 0;pointer-events:none;will-change:transform}
/* clouds retired 2026-07-03 — biome skies replaced them */
@keyframes drift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
/* ===== scenery along the climb ===== */
.deco{position:absolute;z-index:3;pointer-events:none}
.deco.crystal{width:15px;height:23px;background:linear-gradient(160deg,#9A82FF,#38BDF8);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);opacity:.85;filter:drop-shadow(0 0 8px rgba(124,92,255,.6));animation:floaty 4s ease-in-out infinite}
.deco.lamp{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px 4px rgba(255,197,61,.5);animation:pulse-glow 3s ease-in-out infinite}
/* ===== combo ===== */
.combo{position:absolute;top:30%;left:50%;z-index:125;font-family:var(--font-display);font-weight:800;font-size:30px;color:#fff;text-shadow:0 4px 18px rgba(255,92,170,.7);transition:opacity .4s;animation:comboin .5s var(--spring) both;pointer-events:none}
.combo span{background:var(--grad-pulse);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes comboin{0%{opacity:0;transform:translateX(-50%) scale(.5) rotate(-6deg)}60%{transform:translateX(-50%) scale(1.15) rotate(2deg)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
/* ===== loot reveal ===== */
.loot{width:80%;max-width:320px;background:linear-gradient(#1d1a46,#16142f);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px 22px;text-align:center;box-shadow:var(--shadow-lg);animation:pop .5s var(--spring) both}
.loot .lootlid{display:flex;justify-content:center;animation:lootlid 1.3s var(--spring)}
@keyframes lootlid{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12px) rotate(-8deg)}100%{transform:translateY(0) rotate(0)}}
.loot .lootprize{display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px 0 16px;animation:pulse-pop .6s var(--spring) .3s both}
/* ===== run-progress chip ===== */
.goalchip{position:absolute;top:calc(72px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:48;display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--r-pill);background:rgba(22,20,47,.55);backdrop-filter:blur(12px);border:1px solid rgba(124,92,255,.22);font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--text-2)}
.goalchip .gtrack{width:56px;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.goalchip .gfill{height:100%;background:var(--grad-energy);border-radius:99px;transition:width .6s var(--spring)}
/* ===== R2: Pip walker + dust ===== */
.pipwalker{position:absolute;left:0;top:0;z-index:60;pointer-events:none;will-change:transform}
.pipwalker .pipbody{display:block;transform-origin:50% 100%;transition:transform .1s}
.dust{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(201,196,236,.85);z-index:59;pointer-events:none;animation:dustpuff .5s var(--ease-out) forwards}
@keyframes dustpuff{0%{opacity:.9;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx,10px),-14px) scale(.4)}}
/* ===== R3: day gates + past/future path sections ===== */
.gate{position:relative;z-index:4;display:flex;align-items:center;gap:10px;justify-content:center;margin:10px 30px}
.gline{flex:1;max-width:86px;height:2px;border-radius:2px;background:var(--line)}
.gpill{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.08em;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-800);color:var(--muted);white-space:nowrap}
.gpill.done{color:var(--mint);border-color:rgba(43,232,166,.35);background:var(--mint-soft)}
.gpill.today{color:#fff;background:var(--grad-violet);border:1px solid transparent;box-shadow:0 0 20px var(--violet-soft)}
.gpill.lock{color:var(--faint)}
.node.past{opacity:.72}
.node.future{opacity:.6}
.node.past .bub,.node.future .bub{animation:none;cursor:default}
/* ===== R4: trail ribbon, node flip, Pip idle ===== */
.trail{position:absolute;top:0;left:0;z-index:1;pointer-events:none}
.nodewrap{z-index:5}
.bub.flip{animation:flipdone .55s var(--spring)}
@keyframes flipdone{0%{transform:rotateY(0)}45%{transform:rotateY(90deg) scale(1.06)}55%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.pipspot.peek{animation:peek .95s var(--spring)}
@keyframes peek{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) translateX(-3px)}65%{transform:rotate(7deg) translateX(3px)}}
/* ===== Tasks: pending-approval node ===== */
.bub.pending .face{background:var(--grad-gold)}
.bub.pending{box-shadow:0 8px 0 #B97606, 0 0 22px rgba(255,197,61,.35), 0 14px 22px rgba(0,0,0,.45);cursor:default;animation:none}
/* ===== Reports: in-game form sheet ===== */
.rfield label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rfield input,.rfield select{width:100%;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;outline:none}
.rfield input:focus,.rfield select:focus{border-color:var(--violet)}
.photobtn{width:100%;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--text);background:var(--ink-700);border:1px dashed var(--violet-400);border-radius:var(--r-sm);padding:12px;cursor:pointer}
.photoprev img{margin-top:8px;max-width:100%;border-radius:var(--r-md);border:1px solid var(--line);max-height:140px;object-fit:cover}
/* ===== Logs panel inputs ===== */
.lg-in{width:100%;font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--text);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;outline:none}
.lg-in:focus{border-color:var(--violet)}
/* ============================================================
   BIOME JOURNEY — the world changes as you level.
   Night skies per zone + time-of-day wash + zone scenery,
   node platforms and the summit landmark.
   ============================================================ */
#sky{position:absolute;inset:0;transition:background 1.2s ease}
.bio-valley #sky{background:linear-gradient(180deg,#07061A 0%,#100E26 45%,#1E1745 80%,#2A1E5C 100%)}
.bio-jungle #sky{background:linear-gradient(180deg,#04120F 0%,#07231D 45%,#0C3A2F 80%,#14503F 100%)}
.bio-desert #sky{background:linear-gradient(180deg,#120818 0%,#231030 45%,#3A1B3E 80%,#59283F 100%)}
#horizon{position:absolute;left:-15%;right:-15%;bottom:-120px;height:260px;border-radius:50%;filter:blur(46px);opacity:.4;transition:background 1.2s ease}
.bio-valley #horizon{background:#7C5CFF}
.bio-jungle #horizon{background:#2BE8A6}
.bio-desert #horizon{background:#FF8A5C}
/* time-of-day wash over everything */
#tod{position:absolute;inset:0;pointer-events:none;transition:background 2s ease;mix-blend-mode:screen}
.tod-dawn #tod{background:linear-gradient(180deg,rgba(255,150,120,.10),rgba(255,197,61,.05) 40%,transparent 70%)}
.tod-day #tod{background:linear-gradient(180deg,rgba(124,180,255,.07),transparent 55%)}
.tod-dusk #tod{background:linear-gradient(180deg,rgba(255,110,80,.12),rgba(255,92,170,.06) 45%,transparent 75%)}
.tod-night #tod{background:none}
.tod-night .star{opacity:.75}
/* zone-tinted stars/motes */
.bio-jungle .star{background:#BFF5DF}
.bio-desert .star{background:#FFE0B8}
.bio-jungle .mote{background:#2BE8A6}
.bio-desert .mote{background:#FFC53D}
/* --- scenery: Neon Jungle --- */
.deco.fern{filter:drop-shadow(0 0 8px rgba(43,232,166,.5));animation:floaty 4.5s ease-in-out infinite}
.deco.bloom{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FF9AD0,#E0357F);box-shadow:0 0 16px 5px rgba(255,92,170,.45);animation:pulse-glow 3.4s ease-in-out infinite}
.deco.firefly{width:5px;height:5px;border-radius:50%;background:#D9FFB3;box-shadow:0 0 10px 3px rgba(200,255,140,.7);animation:fly 6s ease-in-out infinite alternate}
@keyframes fly{0%{transform:translate(0,0)}30%{transform:translate(14px,-10px)}60%{transform:translate(-8px,-22px)}100%{transform:translate(10px,-34px)}}
/* --- scenery: Dusk Desert --- */
.deco.cactus{filter:drop-shadow(0 0 6px rgba(59,170,127,.35));position:absolute}
.deco.cactus .cl{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(255,197,61,.6);animation:tw 2.6s ease-in-out infinite}
.deco.cactus .c1{left:3px;top:9px}.deco.cactus .c2{right:2px;top:5px;animation-delay:1.2s}
.deco.tumble{width:16px;height:16px;border-radius:50%;border:2.5px dotted rgba(255,197,61,.55);animation:roll 9s linear infinite}
@keyframes roll{from{transform:rotate(0) translateX(0)}50%{transform:rotate(540deg) translateX(26px)}to{transform:rotate(1080deg) translateX(0)}}
.deco.shoot{width:44px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);opacity:0;transform:rotate(-28deg);animation:shoot 7s ease-in infinite}
@keyframes shoot{0%,88%{opacity:0;transform:rotate(-28deg) translateX(0)}90%{opacity:.9}100%{opacity:0;transform:rotate(-28deg) translateX(-70px)}}
/* --- node platforms per zone (stepping stones under every bubble) --- */
.nodewrap::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:92px;height:20px;border-radius:50%;z-index:0;opacity:.5;transition:background .8s ease}
.bio-valley .nodewrap::after{background:radial-gradient(closest-side,rgba(124,92,255,.4),transparent)}
.bio-jungle .nodewrap::after{background:radial-gradient(closest-side,rgba(43,232,166,.35),transparent)}
.bio-desert .nodewrap::after{background:radial-gradient(closest-side,rgba(255,138,92,.35),transparent)}
.bio-jungle .bub.todo .face{background:linear-gradient(160deg,#173B31,#10291f)}
.bio-desert .bub.todo .face{background:linear-gradient(160deg,#3A2233,#2A1826)}
.bio-jungle .bub.todo{box-shadow:0 7px 0 #0B1F18,0 10px 18px rgba(0,0,0,.4)}
.bio-desert .bub.todo{box-shadow:0 7px 0 #1E1019,0 10px 18px rgba(0,0,0,.4)}
/* --- summit landmark (zone gate when the next level enters a new land) --- */
.landmark{text-align:center}
.lm-arch{width:64px;height:52px;margin:0 auto 6px;border:3px solid var(--gold);border-bottom:none;border-radius:36px 36px 0 0;display:flex;align-items:flex-end;justify-content:center;font-size:24px;padding-bottom:2px;box-shadow:0 0 18px rgba(255,197,61,.25);animation:pulse-glow 3s ease-in-out infinite}
.landmark.zone .lm-arch{border-color:var(--mint);box-shadow:0 0 24px rgba(43,232,166,.35)}
.lm-label{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.landmark.zone .lm-label{color:var(--mint)}
@media (prefers-reduced-motion:reduce){.deco.firefly,.deco.tumble,.deco.shoot,.lm-arch{animation:none}}
/* ===== personal sales ring ===== */
.statchip.sales{cursor:pointer}
.statchip.sales.hit{border-color:rgba(255,197,61,.6);box-shadow:0 0 12px rgba(255,197,61,.3)}
.slwrap{position:relative;display:inline-block;margin-top:6px}
.slmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.slmid b{font-size:26px;font-weight:700}
.slmid span{font-size:11px;color:var(--muted)}
#slarc{transition:stroke-dashoffset 1.4s cubic-bezier(.34,1.56,.64,1)}
/* ===== time clock v2: dedicated clock chip (always visible, server-driven) ===== */
.clockchip{position:absolute;top:calc(112px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:49;font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--text);padding:10px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.clockchip.in{border:1px solid rgba(124,92,255,.55);box-shadow:0 0 18px rgba(124,92,255,.35);color:#fff;background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(124,92,255,.12))}
.clockchip.out{border:1px solid rgba(255,197,61,.55);box-shadow:0 0 18px rgba(255,197,61,.25);color:var(--gold)}
.clockchip.warn{border:1px solid rgba(255,107,107,.45);color:var(--coral)}
.clockchip.dim{border:1px solid var(--line);color:var(--muted)}
.clockchip.done{border:1px solid rgba(43,232,166,.45);color:var(--mint)}
.clockchip.armed{animation:ctab 1.2s var(--spring) infinite}
.clockchip:active{transform:translateX(-50%) scale(.93)}
.clockchip:disabled{opacity:.7}
/* ===== time clock: lunch chip ===== */
.lunchchip{position:absolute;top:calc(158px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:48;font-family:var(--font-body);font-weight:800;font-size:11.5px;color:var(--text);padding:8px 14px;cursor:pointer;border:1px solid rgba(255,197,61,.35)}
.lunchchip.running{background:var(--gold-soft);color:var(--gold);animation:ctab 1.8s var(--spring) infinite}
/* ===== mission briefing (P2a) ===== */
.briefhero{margin:0 -18px;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;max-height:230px}
.briefhero img{width:100%;display:block;object-fit:cover;max-height:230px}
.objbox{background:var(--violet-soft);border:1px solid rgba(124,92,255,.35);border-radius:var(--r-md);padding:13px 14px;margin:12px 0}
.proofbox{background:var(--ink-700);border:1px dashed var(--gold);border-radius:var(--r-md);padding:13px 14px;margin:12px 0}
.proofbox.ok{border-style:solid;border-color:var(--mint)}
/* ===== academy players ===== */
.acwrap{width:100%;max-width:520px;margin:0 auto;background:linear-gradient(#1b1942,#131129);border:1px solid var(--line);display:flex;flex-direction:column;padding:14px;overflow-y:auto}
.achead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.actimer{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:12px}
.actfill{height:100%;border-radius:99px;background:var(--grad-mint);transition:width .1s linear}
.acq{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.4;margin-bottom:14px;text-align:center}
.acopts{display:flex;flex-direction:column;gap:9px}
.acopt{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--text);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;cursor:pointer;text-align:left;transition:transform .12s var(--spring)}
.acopt:active{transform:scale(.97)}
.acimgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acimg{background:var(--ink-700);border:2px solid var(--line);border-radius:var(--r-md);padding:4px;cursor:pointer;transition:transform .12s var(--spring)}
.acimg img{width:100%;border-radius:10px;display:block;aspect-ratio:1;object-fit:cover}
.acimg:active{transform:scale(.96)}
.acopt.good,.acimg.good{border-color:var(--mint);box-shadow:0 0 16px rgba(43,232,166,.4)}
.acopt.bad,.acimg.bad{border-color:var(--coral);opacity:.75}
.acmask{font-size:30px;font-weight:700;letter-spacing:4px;color:var(--violet-300);margin:12px 0}
.ackeys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.ackey{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--text);background:var(--ink-700);border:1px solid var(--line);border-radius:9px;padding:9px 0;cursor:pointer}
.ackey:disabled{opacity:.35}
.ackey.good{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}
.ackey.bad{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)}
/* stop Android touch-to-search / text selection stealing taps */
.btn,.bub,.cta,.acopt,.acimg,.ackey,.citem,.skin,.menubtn,.dnav button,.lbrow,.chn,.tkr,.lunchchip,button{-webkit-user-select:none;user-select:none;touch-action:manipulation}
.cta{bottom:calc(34px + env(safe-area-inset-bottom))}
/* drawer: scrollable (it outgrew the screen), tighter rows, sign-out anchored */
.dnav{overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:0}
.dnav::-webkit-scrollbar{display:none}
.dnav button{padding:10px 14px;font-size:14px;flex:none}
.dnav button.signout{margin-top:10px;border-top:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);color:var(--coral)}
.dnav button.signout svg{color:var(--coral)}

/* Dolf-3F: Loyverse catalogue picker dropdown */
.catdrop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:#221E45;border:1px solid rgba(255,255,255,.16);border-radius:12px;display:none;max-height:224px;overflow-y:auto;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.catdrop .cd-row{padding:9px 12px;font-size:12.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.catdrop .cd-row+.cd-row{border-top:1px solid rgba(255,255,255,.06)}
.catdrop .cd-row:hover{background:rgba(255,255,255,.08)}

/* Dolf-4I: quiz juice — question image, combo, feedback row, recap */
.acqimg{display:block;max-width:100%;max-height:170px;margin:6px auto 2px;border-radius:14px;border:1px solid rgba(255,255,255,.12);object-fit:cover;animation:pop .5s var(--spring)}
.accombo{text-align:center;font-weight:800;font-size:12.5px;color:var(--gold);animation:pop .4s var(--spring)}
.acfbrow{display:flex;gap:10px;align-items:flex-start;animation:pop .35s var(--spring)}
.acfbrow.bad{animation:pop .35s var(--spring)}
.acfbpip{flex:0 0 auto;margin-top:-4px}
.acrecwrap{display:flex;flex-direction:column;gap:8px;margin-top:10px;text-align:left;max-height:300px;overflow-y:auto;padding:2px}
.acrec{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 11px;font-size:12.5px;background:rgba(255,255,255,.03)}
.acrec.good{border-color:rgba(43,232,166,.35)}
.acrec.bad{border-color:rgba(255,107,107,.4)}
.acrec b{font-size:12.5px}
.acrec-l{margin-top:3px;color:var(--text-2)}
.acrec-l.good2{color:var(--mint);font-weight:700}


/* ===== Sheet v3: bulletproof dialog layer ===== */
/* decorations can NEVER eat taps — belt and braces after the dead-window saga */
.fx,.intro,.tod,.sky,.vignette,.pipdock,.flash,.pipwalker,.combo,.clouds,.trail,.motes,.deco,.pipspot,.dust{pointer-events:none!important}
#uilayer{position:absolute;inset:0;z-index:2000}
.s3{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.s3.s3c{align-items:center}
.s3dim{position:absolute;inset:0;background:rgba(6,5,18,.8)} /* sibling dimmer — no blur, no parent-of-buttons */
.s3box{position:relative;width:100%;max-height:92%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(#1b1942,#16142f);border-top:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 18px calc(24px + env(safe-area-inset-bottom));animation:s3in .22s ease-out both}
.s3.s3c .s3box{width:86%;max-width:420px;border:1px solid var(--line);border-radius:var(--r-xl);text-align:center;box-shadow:var(--shadow-lg);border-top:1px solid var(--line)}
@keyframes s3in{from{opacity:0}to{opacity:1}} /* opacity ONLY — transforms killed hit-testing on Android */
.s3box .btn,.s3box .citem,.s3box .photobtn{touch-action:manipulation}
.s3box .briefhero{margin:-22px -18px 14px}


/* Dolf-5 L1: SELECTED state was invisible — .btn.ghost's background out-ranked .btn.gold
   (rule order), so fault/test/leave-type chips never highlighted. Three-class rules win. */
.btn.ghost.gold,.btn.ghost.on{background:var(--grad-gold);color:var(--on-gold);border-color:transparent;box-shadow:0 0 0 2px rgba(255,197,61,.35),0 4px 14px rgba(255,197,61,.25);font-weight:800}