:root{
    --void:#0E0A24; --void2:#191238; --surface:#241a4d; --card:#1B1440;
    --c-top:#CBA6FF; --c-mid:#9F7BFF; --c-low:#6F5BFF;
    --accent:#9F7BFF; --accent-lt:#CBA6FF; --txt:#EDE9FF; --muted:#9A8FC4; --line:rgba(159,123,255,.20);
    --lav-grad:linear-gradient(180deg,#F1E9FF 0%,#CBA6FF 46%,#8E6BFF 100%);
    --ok:#5CE0A8; --warn:#FF6F9D;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  [hidden]{display:none !important}  /* class display rules must not override the hidden attribute */
  html,body{height:100%}
  body{font-family:'Space Grotesk',system-ui,sans-serif; background:var(--void); color:var(--txt);
    overflow:hidden; position:fixed; inset:0; -webkit-user-select:none; user-select:none}
  .app{position:absolute; inset:0; display:flex; flex-direction:column}

  /* ambient bg */
  .sky{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
  /* Telegram-style dim vector pattern filling the empty space behind the game */
  .gpattern{position:absolute; inset:0; width:100%; height:100%; opacity:.09; pointer-events:none;
    mask-image:radial-gradient(135% 100% at 50% 36%, #000 38%, rgba(0,0,0,.25) 100%);
    -webkit-mask-image:radial-gradient(135% 100% at 50% 36%, #000 38%, rgba(0,0,0,.25) 100%)}
  /* gently floating glowing motes (calm ambient life; dim) */
  .motes{position:absolute; inset:0; pointer-events:none; overflow:hidden}
  .motes i{position:absolute; bottom:-12px; width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle, rgba(203,166,255,.9), rgba(159,123,255,0) 70%);
    opacity:0; animation:moteRise linear infinite}
  @keyframes moteRise{
    0%{ transform:translateY(0) translateX(0) scale(.7); opacity:0 }
    12%{ opacity:.5 }
    50%{ transform:translateY(-46vh) translateX(8px) scale(1) }
    88%{ opacity:.45 }
    100%{ transform:translateY(-92vh) translateX(-6px) scale(.8); opacity:0 } }
  .glow{position:absolute; left:50%; top:34%; width:min(130vw,580px); aspect-ratio:1; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(159,123,255,.30) 0%, rgba(111,91,255,.12) 42%, transparent 66%); filter:blur(10px)}
  .grid{position:absolute; left:-25%; right:-25%; bottom:6%; height:40%;
    background-image:repeating-linear-gradient(90deg,transparent 0 38px,rgba(203,166,255,.26) 38px 39px),
      repeating-linear-gradient(0deg,transparent 0 30px,rgba(111,91,255,.22) 30px 31px);
    transform:perspective(440px) rotateX(76deg); transform-origin:bottom;
    mask-image:linear-gradient(0deg,#000,transparent 88%); -webkit-mask-image:linear-gradient(0deg,#000,transparent 88%);
    animation:flow 8s linear infinite}
  @keyframes flow{from{background-position:0 0}to{background-position:0 30px}}

  /* header */
  .header{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
    padding:calc(env(safe-area-inset-top) + 12px) 16px 8px}
  .brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.14em; font-size:13px}
  .brand .dot{width:22px; height:22px; border-radius:6px; object-fit:cover; box-shadow:0 0 10px var(--accent)}
  .brand b{color:var(--c-top)}
  .balchip{display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px;
    background:rgba(159,123,255,.12); border:1px solid rgba(159,123,255,.4); padding:6px 13px; border-radius:999px;
    background-clip:padding-box}
  .balchip .gem{width:14px; height:14px; background:var(--lav-grad); transform:rotate(45deg); border-radius:3px;
    box-shadow:0 0 10px rgba(159,123,255,.8), inset 0 0 4px rgba(255,255,255,.6)}
  .balchip span{background:var(--lav-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

  /* screens */
  .screens{position:relative; z-index:2; flex:1; min-height:0}
  .screen{position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden}
  .screen.active{display:flex}
  .scroll{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 16px calc(env(safe-area-inset-bottom) + 86px)}

  /* GAME screen */
  .gstat{display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; color:var(--muted); padding:2px 16px 4px}
  .gstat .lvl{color:var(--c-top); font-weight:600} .gstat .prog{font-family:'Space Mono',monospace; color:var(--c-top); font-weight:700}
  .gstat .combo{color:var(--accent-lt); font-weight:600}
  .stage{flex:1; position:relative; min-height:0; cursor:pointer; touch-action:manipulation}
  #game{position:absolute; inset:0; width:100%; height:100%; display:block}
  .overlay{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center; padding:24px; background:rgba(14,10,36,.5); backdrop-filter:blur(2px)}
  .overlay h2{font-size:22px; font-weight:700} .overlay p{color:var(--muted); font-size:13px; max-width:260px}
  .overlay.hidden{display:none}
  .tapcue{margin-top:4px; width:54px; height:54px; border-radius:50%; border:2px solid var(--accent-lt);
    display:grid; place-items:center; color:var(--accent-lt); font-size:22px; animation:pulse 1.5s ease-in-out infinite}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}

  /* cards / generic */
  h3.sec{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:16px 2px 8px; font-weight:600}
  .card{background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:10px}
  .card .t{font-size:14px; font-weight:600} .card .s{font-size:12px; color:var(--muted); margin-top:3px}
  .card .s b{color:var(--c-top)} .card .s i{font-style:normal; color:var(--accent-lt)}
  .rowflex{display:flex; align-items:center; gap:12px}
  .pricebtn{margin-left:auto}

  button{font-family:inherit; font-weight:700; border:none; cursor:pointer; border-radius:12px; transition:transform .06s, opacity .2s}
  button:active{transform:translateY(1px)} button:disabled{opacity:.4; cursor:default}
  button:focus-visible{outline:2px solid var(--accent-lt); outline-offset:2px}
  .btn-lav{background:var(--lav-grad); color:#241046; padding:10px 16px; font-size:13px; white-space:nowrap; box-shadow:0 4px 14px rgba(142,107,255,.35)}
  .btn-ghost{background:transparent; color:var(--accent-lt); border:1px solid var(--accent); padding:10px 16px; font-size:13px}
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{flex:1 1 30%; min-width:96px; background:rgba(159,123,255,.08); border:1px solid var(--line); border-radius:13px; padding:11px 8px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s}
  .chip:active{transform:translateY(1px)} .chip.dim{opacity:.4}
  .chip .p{font-size:18px; font-weight:700; color:var(--c-top)} .chip .c{font-size:11px; color:var(--muted); margin-top:2px; font-family:'Space Mono',monospace}

  /* shop skins */
  .skins{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .skin{background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line); border-radius:16px; padding:12px; text-align:center; position:relative}
  .skin.cur{border-color:var(--accent)} .skin .sw{height:54px; border-radius:11px; margin-bottom:9px}
  .skin .n{font-size:13px; font-weight:600} .skin .b{font-size:11px; margin-top:7px; color:var(--muted)}
  .skin .tag{position:absolute; top:8px; right:8px; font-size:9px; letter-spacing:.1em; padding:2px 7px; border-radius:999px; background:rgba(159,123,255,.18); color:var(--c-top)}

  /* leaderboard */
  .banner{background:linear-gradient(120deg,#3a2470,#241a4d); border:1px solid var(--line); border-radius:16px; padding:15px; margin-bottom:6px}
  .banner h2{font-size:16px} .banner p{font-size:12px; color:var(--muted); margin-top:5px}
  .banner .cd{font-family:'Space Mono',monospace; color:var(--c-top); font-weight:700; margin-top:8px; font-size:13px}
  .lb{list-style:none} .lb li{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:13px; margin-top:7px;
    background:rgba(159,123,255,.05); border:1px solid transparent}
  .lb li.me{background:rgba(159,123,255,.14); border-color:var(--accent)}
  .lb .rk{width:24px; text-align:center; font-weight:700; font-family:'Space Mono',monospace; color:var(--muted)}
  .lb .rk.top{color:var(--c-top)} .lb .nm{flex:1; font-size:14px; font-weight:500} .lb .sc{font-family:'Space Mono',monospace; font-weight:700; color:var(--c-top)}

  /* profile */
  .prof{display:flex; align-items:center; gap:14px; padding:6px 2px 2px}
  .ava{width:56px; height:56px; border-radius:16px; background:var(--lav-grad); display:grid; place-items:center; font-size:24px; font-weight:700; color:#241046; overflow:hidden}
  .ava img{width:100%; height:100%; object-fit:cover; display:block}
  .prof .nm{font-size:18px; font-weight:700} .prof .id{font-size:12px; color:var(--muted); font-family:'Space Mono',monospace}
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
  .stat{background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line); border-radius:14px; padding:13px}
  .stat .v{font-size:22px; font-weight:700; color:var(--c-top)} .stat .k{font-size:11px; color:var(--muted); margin-top:2px}
  .opt{display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line)}
  .opt:last-child{border-bottom:none} .opt .t{flex:1; font-size:14px}
  .toggle{width:46px; height:27px; border-radius:999px; background:rgba(159,123,255,.2); position:relative; cursor:pointer; transition:background .2s}
  .toggle.on{background:var(--accent)} .toggle i{position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:left .2s}
  .toggle.on i{left:22px}
  .link{display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); color:var(--txt); text-decoration:none; font-size:14px}
  .link:last-child{border-bottom:none} .link .ar{margin-left:auto; color:var(--muted)}
  .ver{text-align:center; color:var(--muted); font-size:11px; margin-top:14px; font-family:'Space Mono',monospace}

  /* bottom nav */
  .nav{position:relative; z-index:4; display:flex; background:rgba(20,15,42,.92); border-top:1px solid var(--line);
    padding:8px 8px calc(env(safe-area-inset-bottom) + 8px); backdrop-filter:blur(12px)}
  .nav button{flex:1; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-weight:600; font-size:10px; padding:4px 0}
  .nav button .ic{font-size:20px; line-height:1; filter:grayscale(.4) opacity(.8)}
  .nav button.active{color:var(--c-top)} .nav button.active .ic{filter:none}

  .toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 76px); transform:translate(-50%,16px); z-index:60;
    background:var(--surface); border:1px solid var(--line); color:var(--txt); padding:11px 16px; border-radius:13px;
    font-size:13px; font-weight:500; max-width:88%; text-align:center; opacity:0; transition:opacity .25s, transform .25s; box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .toast.show{opacity:1; transform:translate(-50%,0)} .toast b{color:var(--c-top); font-family:'Space Mono',monospace}
  .demo-badge{position:absolute; top:calc(env(safe-area-inset-top) + 12px); left:50%; transform:translateX(-50%); z-index:5;
    font-size:10px; letter-spacing:.18em; color:var(--accent-lt); border:1px solid rgba(159,123,255,.45); padding:3px 9px; border-radius:999px; display:none}
  /* ---------- polish: animations, gloss, podium ---------- */
  .balchip.bump{animation:balPop .42s ease}
  @keyframes balPop{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
  .balchip.bump .gem{animation:gemSpin .5s ease}
  @keyframes gemSpin{0%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(1.25)}100%{transform:rotate(405deg) scale(1)}}

  /* discount chips: colorful + gloss sweep */
  .chip{position:relative; overflow:hidden; background:linear-gradient(160deg,rgba(203,166,255,.16),rgba(111,91,255,.06))}
  .chip::after{content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); animation:sheen 3.4s ease-in-out infinite}
  .chip:nth-child(2)::after{animation-delay:.5s} .chip:nth-child(3)::after{animation-delay:1s}
  .chip:nth-child(4)::after{animation-delay:1.5s} .chip:nth-child(5)::after{animation-delay:2s}
  .chip:active{transform:translateY(1px) scale(.98)}
  @keyframes sheen{0%{left:-60%}55%,100%{left:140%}}

  /* skin cards: sheen sweep on swatch, press + active ring */
  .skin{transition:transform .08s, border-color .2s} .skin:active{transform:scale(.985)}
  .skin .sw{position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .skin .sw::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%); transform:translateX(-120%); animation:swatchSheen 4.5s ease-in-out infinite}
  .skin.cur{box-shadow:0 0 0 1px var(--accent), 0 6px 22px rgba(142,107,255,.3)} .skin.cur .sw::after{animation-duration:2.4s}
  @keyframes swatchSheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}

  /* contest banner: living gradient */
  .banner{background:linear-gradient(120deg,#3a2470,#5a3aa0,#241a4d,#3a2470); background-size:280% 280%;
    animation:bannerFlow 9s ease infinite; box-shadow:0 8px 26px rgba(90,58,160,.25)}
  @keyframes bannerFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

  /* leaderboard podium + row entrance */
  .lb li{animation:rowIn .35s ease both}
  .lb li:nth-child(2){animation-delay:.04s} .lb li:nth-child(3){animation-delay:.08s}
  .lb li:nth-child(4){animation-delay:.12s} .lb li:nth-child(5){animation-delay:.16s}
  @keyframes rowIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
  .lb li.podium .rk{font-size:18px}
  .lb li.r1{background:linear-gradient(100deg,rgba(255,209,102,.16),rgba(159,123,255,.06)); border-color:rgba(255,209,102,.4)}
  .lb li.r2{background:linear-gradient(100deg,rgba(210,214,235,.14),rgba(159,123,255,.05)); border-color:rgba(210,214,235,.35)}
  .lb li.r3{background:linear-gradient(100deg,rgba(214,150,110,.14),rgba(159,123,255,.05)); border-color:rgba(214,150,110,.35)}

  /* ---------- admin panel ---------- */
  .nav button.admin-only.active{color:#FFD166} .nav button.admin-only.active .ic{filter:none}
  .asub{display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; -webkit-overflow-scrolling:touch}
  .asub button{flex:0 0 auto; background:rgba(159,123,255,.08); color:var(--muted); border:1px solid var(--line);
    border-radius:999px; padding:7px 14px; font-size:12px}
  .asub button.active{background:var(--accent); color:#fff; border-color:var(--accent)}
  .apane[hidden]{display:none}
  .astats{grid-template-columns:1fr 1fr}
  .astats .stat{padding:11px 13px} .astats .v{font-size:19px}
  .acard{background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:9px}
  .acard .ah{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
  .acard .ah b{font-size:14px} .aid{font-size:11px; color:var(--muted); font-family:'Space Mono',monospace; margin-top:3px}
  .acoins{text-align:right; font-weight:700; color:var(--c-top); font-family:'Space Mono',monospace; font-size:14px}
  .aact{display:flex; gap:6px; margin-top:10px; align-items:center; flex-wrap:wrap}
  .ainp{background:rgba(159,123,255,.08); border:1px solid var(--line); border-radius:10px; color:var(--txt);
    font-family:inherit; font-size:13px; padding:9px 11px; width:90px; -webkit-appearance:none}
  .ainp:focus{outline:none; border-color:var(--accent)} .ainp.grow{flex:1; width:auto}
  textarea.ainp{width:100%; resize:vertical; min-height:64px}
  button.s{padding:8px 12px; font-size:13px; border-radius:10px}
  .arow{display:flex; gap:8px; margin-bottom:10px}
  .af{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
  .af span{font-size:13px; color:var(--muted)} .af .ainp{width:130px; text-align:right}
  .abad{font-size:9px; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:rgba(159,123,255,.18); color:var(--c-top); vertical-align:middle}
  .abad.ban{background:rgba(255,111,157,.18); color:var(--warn)}
  .alist{padding:6px 12px} .alog{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13px}
  .alog:last-child{border-bottom:none} .alog span:first-child{color:var(--muted); font-family:'Space Mono',monospace; font-size:12px; min-width:74px}
  .alog b{color:var(--c-top)} .alog .amono{font-family:'Space Mono',monospace; color:var(--accent-lt); font-size:12px}
  .alog.flag{background:rgba(255,111,157,.08); border-radius:8px}
  .amuted{color:var(--muted); font-size:13px; text-align:center; padding:10px}

  /* ============================================================
     EXTRA MOTION LAYER — screen transitions, entrances, ambience,
     reward flourishes. Purely cosmetic; game sim untouched.
  ============================================================ */

  /* --- screen / tab transitions --- */
  .screen.active{ animation:scrIn .40s cubic-bezier(.18,.7,.18,1) both }
  #s-game.active{ animation:scrFade .28s ease both }
  @keyframes scrIn{ from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }
  @keyframes scrFade{ from{opacity:0} to{opacity:1} }

  /* --- staggered card / item entrances when a screen opens or re-renders --- */
  .screen.active .scroll > .card,
  .screen.active .scroll > h3.sec,
  .screen.active .stats,
  .screen.active .skins,
  .screen.active .banner{ animation:riseIn .46s cubic-bezier(.2,.7,.2,1) both }
  .screen.active .scroll > *:nth-child(2){ animation-delay:.05s }
  .screen.active .scroll > *:nth-child(3){ animation-delay:.10s }
  .screen.active .scroll > *:nth-child(4){ animation-delay:.15s }
  .screen.active .scroll > *:nth-child(5){ animation-delay:.20s }
  .screen.active .scroll > *:nth-child(6){ animation-delay:.25s }
  @keyframes riseIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

  /* skin grid + discount chips pop in with a soft scale */
  .skins .skin{ animation:popIn .42s cubic-bezier(.2,.8,.2,1.2) both }
  .skins .skin:nth-child(2){animation-delay:.06s} .skins .skin:nth-child(3){animation-delay:.12s} .skins .skin:nth-child(4){animation-delay:.18s}
  .chips .chip{ animation:popIn .4s cubic-bezier(.2,.8,.2,1.2) both }
  .chips .chip:nth-child(2){animation-delay:.05s} .chips .chip:nth-child(3){animation-delay:.1s}
  .chips .chip:nth-child(4){animation-delay:.15s} .chips .chip:nth-child(5){animation-delay:.2s}
  .stats .stat:nth-child(2){ animation-delay:.07s }
  @keyframes popIn{ 0%{opacity:0; transform:scale(.86) translateY(8px)} 100%{opacity:1; transform:none} }

  /* --- bottom nav: active lift + glowing indicator + press ripple --- */
  .nav button{ position:relative; transition:color .2s, transform .12s }
  .nav button:active{ transform:scale(.9) }
  .nav button .ic{ transition:transform .25s cubic-bezier(.2,.8,.2,1.4), filter .2s }
  .nav button.active .ic{ transform:translateY(-2px) scale(1.18) }
  .nav button.active::before{ content:""; position:absolute; top:0; left:50%; width:26px; height:3px; border-radius:999px;
    transform:translateX(-50%); background:var(--lav-grad); box-shadow:0 0 10px var(--accent); animation:navBar .32s ease both }
  .nav button.admin-only.active::before{ background:linear-gradient(90deg,#FFD166,#FF9C5C); box-shadow:0 0 10px #FFD166 }
  @keyframes navBar{ from{opacity:0; width:6px} to{opacity:1; width:26px} }
  .ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0); pointer-events:none;
    background:radial-gradient(circle,rgba(203,166,255,.55),transparent 70%); animation:ripple .5s ease-out forwards }
  @keyframes ripple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

  /* --- header ambience: floating gem, breathing brand glow --- */
  .balchip .gem{ animation:gemFloat 3.2s ease-in-out infinite }
  @keyframes gemFloat{ 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(-2px)} }
  .brand .dot{ animation:brandGlow 3.4s ease-in-out infinite }
  @keyframes brandGlow{ 0%,100%{box-shadow:0 0 8px var(--accent)} 50%{box-shadow:0 0 18px var(--accent-lt)} }
  .balchip{ transition:box-shadow .3s }
  .balchip.bump{ box-shadow:0 0 0 1px var(--accent-lt), 0 0 18px rgba(159,123,255,.5) }

  /* floating "+N" gain near the balance chip */
  .gain-pop{ position:fixed; z-index:61; font-family:'Space Mono',monospace; font-weight:700; font-size:15px;
    color:var(--c-top); text-shadow:0 0 12px rgba(159,123,255,.8); pointer-events:none; animation:gainUp 1s ease-out forwards }
  @keyframes gainUp{ 0%{opacity:0; transform:translateY(4px) scale(.8)} 18%{opacity:1; transform:translateY(-2px) scale(1.1)}
    100%{opacity:0; transform:translateY(-26px) scale(1)} }

  /* --- overlay (start / game over) --- */
  .overlay:not(.hidden){ animation:ovIn .42s cubic-bezier(.2,.7,.2,1) both }
  .overlay h2{ animation:ovTitle .5s cubic-bezier(.2,.8,.2,1.3) both }
  @keyframes ovIn{ from{opacity:0; backdrop-filter:blur(0)} to{opacity:1} }
  @keyframes ovTitle{ 0%{opacity:0; transform:translateY(10px) scale(.92)} 100%{opacity:1; transform:none} }
  .tapcue{ position:relative }
  .tapcue::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--accent-lt);
    opacity:0; animation:tapRing 1.5s ease-out infinite }
  @keyframes tapRing{ 0%{opacity:.5; transform:scale(.8)} 100%{opacity:0; transform:scale(1.5)} }

  /* --- HUD pops --- */
  .gstat .lvl.pep{ display:inline-block; animation:hudPop .42s cubic-bezier(.2,.8,.2,1.4) }
  .gstat .combo.pep{ display:inline-block; animation:hudPop .42s cubic-bezier(.2,.8,.2,1.4) }
  @keyframes hudPop{ 0%{transform:scale(1)} 40%{transform:scale(1.4); color:#fff} 100%{transform:scale(1)} }

  /* --- toast: springy entrance --- */
  .toast.show{ animation:toastIn .42s cubic-bezier(.2,.8,.2,1.3) }
  @keyframes toastIn{ 0%{opacity:0; transform:translate(-50%,18px) scale(.9)} 60%{transform:translate(-50%,-3px) scale(1.02)} 100%{transform:translate(-50%,0) scale(1)} }

  /* --- toggles: bouncy knob --- */
  .toggle i{ transition:left .26s cubic-bezier(.2,.8,.2,1.5), background .2s }
  .toggle.on i{ background:#fff; box-shadow:0 0 8px rgba(255,255,255,.6) }

  /* --- buttons: shine on press --- */
  .btn-lav{ position:relative; overflow:hidden }
  .btn-lav::after{ content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:left .5s ease }
  .btn-lav:active::after{ left:140% }

  /* --- demo badge: gentle float --- */
  .demo-badge{ animation:badgeFloat 3s ease-in-out infinite }
  @keyframes badgeFloat{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(2px)} }

  /* --- leaderboard medals: shimmer on podium --- */
  .lb li.podium .rk{ animation:medalPulse 2.2s ease-in-out infinite }
  @keyframes medalPulse{ 0%,100%{transform:scale(1); filter:drop-shadow(0 0 2px rgba(255,209,102,.4))} 50%{transform:scale(1.14); filter:drop-shadow(0 0 8px rgba(255,209,102,.8))} }

  /* --- confetti --- */
  .confetti{ position:fixed; z-index:70; width:9px; height:14px; border-radius:2px; pointer-events:none; top:0; left:0;
    will-change:transform,opacity; animation:confFall var(--dur,1.4s) cubic-bezier(.25,.6,.4,1) forwards }
  @keyframes confFall{ 0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot))} }

  /* ============================================================
     NEW UI COMPONENTS
  ============================================================ */

  /* --- boot loader --- */
  .boot{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    background:radial-gradient(circle at 50% 38%, #1a1142, #0E0A24 70%); transition:opacity .4s ease }
  .boot.gone{ opacity:0; pointer-events:none }
  .bootlogo{ width:72px; height:72px; border-radius:20px; box-shadow:0 0 28px rgba(159,123,255,.6); animation:bootPulse 1.8s ease-in-out infinite }
  @keyframes bootPulse{ 0%,100%{transform:scale(1); box-shadow:0 0 22px rgba(159,123,255,.5)} 50%{transform:scale(1.06); box-shadow:0 0 40px rgba(203,166,255,.85)} }
  .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(159,123,255,.22); border-top-color:var(--c-top); animation:spin .8s linear infinite }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  .bootmsg{ color:var(--muted); font-size:13px; letter-spacing:.12em }

  /* --- onboarding --- */
  .onb{ position:fixed; inset:0; z-index:150; display:flex; align-items:flex-end; justify-content:center;
    background:rgba(10,7,26,.72); backdrop-filter:blur(6px); padding:0 16px calc(env(safe-area-inset-bottom) + 22px); animation:onbFade .3s ease both }
  @keyframes onbFade{ from{opacity:0} to{opacity:1} }
  .onbcard{ width:100%; max-width:420px; background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line);
    border-radius:24px; padding:22px 20px 18px; box-shadow:0 -10px 50px rgba(0,0,0,.5); animation:sheetUp .42s cubic-bezier(.2,.8,.2,1.1) both }
  @keyframes sheetUp{ from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1} }
  .onbtrack{ position:relative }
  .onbslide{ display:none; text-align:center; padding:10px 6px 4px }
  .onbslide.on{ display:block; animation:onbSlideIn .34s cubic-bezier(.2,.8,.2,1) both }
  @keyframes onbSlideIn{ from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none} }
  .onbic{ font-size:46px; margin-bottom:12px; animation:floaty 3s ease-in-out infinite }
  @keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  .onbslide h2{ font-size:20px; margin-bottom:8px } .onbslide p{ color:var(--muted); font-size:14px; line-height:1.5; max-width:300px; margin:0 auto }
  .onbdots{ display:flex; gap:7px; justify-content:center; margin:16px 0 14px }
  .onbdots i{ width:7px; height:7px; border-radius:50%; background:rgba(159,123,255,.3); transition:width .25s, background .25s }
  .onbdots i.on{ width:20px; background:var(--accent); border-radius:999px }
  .onbskip{ display:block; margin:10px auto 0; background:none; color:var(--muted); font-size:13px; padding:6px }

  /* --- game progress bar --- */
  .pbar{ height:5px; margin:0 16px 4px; border-radius:999px; background:rgba(159,123,255,.14); overflow:hidden; position:relative }
  .pbar i{ display:block; height:100%; width:0%; border-radius:999px; background:var(--lav-grad); box-shadow:0 0 10px rgba(159,123,255,.7);
    transition:width .25s cubic-bezier(.2,.8,.2,1) }
  .pbar i::after{ content:""; position:absolute; top:0; right:0; width:24px; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5)); animation:pbarShine 1.6s ease-in-out infinite }
  @keyframes pbarShine{ 0%,100%{opacity:.3} 50%{opacity:.9} }

  /* --- record chip (ghost record chase) --- */
  .rechip{ position:absolute; top:10px; right:10px; z-index:4; font-size:11px; color:var(--muted);
    background:rgba(20,15,42,.66); border:1px solid var(--line); border-radius:999px; padding:5px 11px; backdrop-filter:blur(4px); transition:transform .2s }
  .rechip b{ color:var(--c-top); font-family:'Space Mono',monospace }
  .rechip.beat{ color:#241046; background:var(--lav-grad); border-color:transparent; animation:recBeat .6s cubic-bezier(.2,.8,.2,1.4) }
  .rechip.beat b{ color:#241046 }
  @keyframes recBeat{ 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }

  /* --- game over panel --- */
  .ovstats{ display:flex; gap:10px; margin:6px 0 4px }
  .ovstats .ovs{ flex:1; background:rgba(159,123,255,.08); border:1px solid var(--line); border-radius:13px; padding:11px 6px; min-width:74px;
    animation:popIn .42s cubic-bezier(.2,.8,.2,1.2) both }
  .ovstats .ovs:nth-child(2){ animation-delay:.07s } .ovstats .ovs:nth-child(3){ animation-delay:.14s }
  .ovstats .v{ font-size:22px; font-weight:700; color:var(--c-top); font-family:'Space Mono',monospace } .ovstats .k{ font-size:10px; color:var(--muted); margin-top:3px }
  .ovbtns{ display:flex; gap:10px; margin-top:6px } .ovbtns button{ flex:1 }
  .newbest{ font-family:'Space Mono',monospace; font-weight:700; letter-spacing:.08em; color:#FFD166;
    text-shadow:0 0 16px rgba(255,209,102,.7); animation:newbest 1.6s ease-in-out infinite }
  @keyframes newbest{ 0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.08); opacity:1} }

  /* --- achievements --- */
  .achcount{ color:var(--c-top); font-family:'Space Mono',monospace; text-transform:none; letter-spacing:0 }
  .ach{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
  .ach .a{ position:relative; aspect-ratio:1; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:rgba(159,123,255,.05); border:1px solid var(--line); text-align:center; padding:4px; overflow:hidden }
  .ach .a .e{ font-size:23px; filter:grayscale(1) opacity(.45); transition:filter .3s, transform .3s }
  .ach .a .n{ font-size:8.5px; color:var(--muted); line-height:1.1 }
  .ach .a.got{ border-color:var(--accent); background:linear-gradient(160deg,rgba(203,166,255,.16),rgba(111,91,255,.05)) }
  .ach .a.got .e{ filter:none; transform:scale(1.05) } .ach .a.got .n{ color:var(--txt) }
  .ach .a.got::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%); transform:translateX(-130%); animation:swatchSheen 5s ease-in-out infinite }
  .ach .a.just{ animation:achPop .6s cubic-bezier(.2,.8,.2,1.5) }
  @keyframes achPop{ 0%{transform:scale(.7)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }

  /* --- referral card --- */
  .refcard .reflink{ margin-top:10px; font-family:'Space Mono',monospace; font-size:12px; color:var(--accent-lt); word-break:break-all;
    background:rgba(159,123,255,.08); border:1px dashed var(--line); border-radius:10px; padding:9px 11px }

  /* --- skin preview + progress --- */
  .skin .sw{ display:flex; align-items:center; justify-content:center }
  .skin .sw svg{ width:64px; height:48px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)) }
  .skin .prog2{ margin-top:8px; height:4px; border-radius:999px; background:rgba(159,123,255,.14); overflow:hidden }
  .skin .prog2 i{ display:block; height:100%; border-radius:999px; background:var(--lav-grad); transition:width .4s ease }
  .skin .need{ font-size:10px; color:var(--muted); margin-top:5px; font-family:'Space Mono',monospace }

  /* --- pull to refresh --- */
  .ptr{ position:absolute; top:0; left:50%; transform:translate(-50%,-44px); z-index:6; width:30px; height:30px; border-radius:50%;
    background:rgba(20,15,42,.9); border:1px solid var(--line); display:grid; place-items:center; transition:transform .15s, opacity .15s; opacity:0 }
  .ptr.show{ opacity:1 } .ptr svg{ width:16px; height:16px; color:var(--c-top); transition:transform .1s }
  .ptr.spin svg{ animation:spin .7s linear infinite }

  /* --- leaderboard skeleton --- */
  .skel{ height:44px; border-radius:13px; margin-top:7px; background:linear-gradient(100deg,rgba(159,123,255,.06) 30%,rgba(159,123,255,.16) 50%,rgba(159,123,255,.06) 70%);
    background-size:220% 100%; animation:shimmer 1.2s linear infinite }
  @keyframes shimmer{ from{background-position:120% 0} to{background-position:-120% 0} }

  /* --- booster card --- */
  .booster{ position:relative; overflow:hidden }
  .booster .bicon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:22px;
    background:rgba(159,123,255,.14); border:1px solid var(--line) }
  .booster.on{ border-color:rgba(255,209,102,.5); background:linear-gradient(160deg,rgba(255,209,102,.12),rgba(159,123,255,.05)) }
  .booster.on .bicon{ background:linear-gradient(135deg,#FFD166,#FF9C5C); border-color:transparent; animation:boostGlow 1.6s ease-in-out infinite }
  @keyframes boostGlow{ 0%,100%{box-shadow:0 0 8px rgba(255,209,102,.5)} 50%{box-shadow:0 0 20px rgba(255,209,102,.9)} }
  .boosttimer{ font-family:'Space Mono',monospace; font-weight:700; color:#FFD166; font-size:16px; min-width:64px; text-align:right;
    text-shadow:0 0 10px rgba(255,209,102,.5) }

  /* --- in-game ×2 badge --- */
  .x2{ display:inline-block; font-family:'Space Mono',monospace; font-weight:700; font-size:12px; color:#241046;
    background:linear-gradient(135deg,#FFD166,#FF9C5C); padding:1px 8px; border-radius:999px;
    box-shadow:0 0 12px rgba(255,209,102,.6); animation:x2pulse 1.2s ease-in-out infinite }
  @keyframes x2pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important }
    .confetti,.gain-pop,.ripple{ display:none !important }
    .spinner,.ptr.spin svg{ animation:spin .8s linear infinite !important }
  }

  /* ---- Streak chip ---- */
  .streakchip{ display:flex; align-items:center; gap:3px; background:rgba(255,140,0,.15);
    border:1px solid rgba(255,140,0,.35); border-radius:20px; padding:3px 10px;
    font-size:13px; font-weight:700; color:#ffaa33; }
  .streakchip[hidden]{ display:none !important }

  /* ---- In-game restart button (mobile) ---- */
  .btn-restart{ background:none; border:1px solid var(--line); border-radius:8px;
    color:var(--muted); font-size:16px; padding:2px 8px; cursor:pointer; margin-left:8px;
    vertical-align:middle; line-height:1.4; }
  .btn-restart:active{ color:var(--txt); border-color:var(--accent); }

  /* ---- Telegram gate (shown when opened outside Telegram) ---- */
  .tg-gate{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
    background:var(--void); padding:24px; }
  .tg-gate[hidden]{ display:none !important }
  .tg-gate-card{ background:var(--card); border:1px solid var(--line); border-radius:20px;
    padding:36px 28px; text-align:center; max-width:320px; width:100%; }
  .tg-gate-icon{ font-size:56px; margin-bottom:16px; }
  .tg-gate-card h2{ font-size:22px; font-weight:700; margin-bottom:10px; color:var(--txt); }
  .tg-gate-card p{ color:var(--muted); font-size:15px; line-height:1.5; margin-bottom:24px; }
  .tg-gate-btn{ display:block; text-decoration:none; text-align:center; padding:14px; border-radius:12px;
    background:var(--lav-grad); color:#fff; font-weight:700; font-size:16px; }