: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)}
  .lb-ava-w{ position:relative; width:28px; height:28px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; overflow:hidden }
  .lb-ava-t{ font-size:12px; font-weight:700; color:#fff; line-height:1; z-index:0 }
  .lb-ava-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; z-index:1 }
  /* online presence ring (box-shadow renders outside overflow:hidden) */
  .lb-ava-w.on{ box-shadow:0 0 0 2px #0e0b1e, 0 0 0 3.5px #2fd07a, 0 0 8px rgba(47,208,122,.5) }
  .lb-ava-w.off{ box-shadow:0 0 0 2px #0e0b1e, 0 0 0 3.5px rgba(224,85,97,.75) }
  .role-badge{ font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em;
    padding:2px 7px; border-radius:6px; vertical-align:middle; display:inline-block; margin-left:6px }
  .role-owner{ background:rgba(255,209,102,.18); border:1px solid rgba(255,209,102,.45); color:#FFD166;
    text-shadow:0 0 8px rgba(255,209,102,.5) }
  .role-admin{ background:rgba(159,123,255,.18); border:1px solid rgba(159,123,255,.45); color:#CBA6FF }
  .role-sm{ font-size:9px; padding:1px 5px; margin-left:4px }

  /* 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; z-index:1 }
  #s-game.active{ animation:scrFade .28s ease both }
  .screen.leaving{ display:flex !important; animation:scrOut .2s ease both; pointer-events:none; z-index:0 }
  @keyframes scrIn{ from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }
  @keyframes scrOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-10px) scale(.98)} }
  @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; bottom: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:22px;
    background:radial-gradient(circle at 50% 38%, #1a1142, #0E0A24 70%) }
  .boot.gone{ animation:bootOut .45s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none }
  @keyframes bootOut{ 0%{opacity:1;transform:none} 25%{opacity:1;transform:translateY(-6px) scale(1.01)} 100%{opacity:0;transform:translateY(-52px) scale(.93)} }
  .boot-icon-wrap{ position:relative; width:88px; height:88px }
  .bootlogo{ position:absolute; inset:8px; 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)} }
  .boot-ring{ position:absolute; inset:-2px; width:92px; height:92px; transform:rotate(-90deg) }
  .boot-ring-arc{ stroke-dasharray:276.5; stroke-dashoffset:276.5; animation:arcFill 1.5s cubic-bezier(.4,0,.6,1) forwards }
  @keyframes arcFill{ to{ stroke-dashoffset:0 } }
  .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 daily modal ---- */
  .streak-modal{ position:fixed; inset:0; z-index:180; display:flex; align-items:flex-end; justify-content:center;
    padding:0 16px calc(env(safe-area-inset-bottom) + 24px); background:rgba(8,5,20,.75); backdrop-filter:blur(6px);
    animation:onbFade .28s ease both }
  .streak-modal[hidden]{ display:none !important }
  .streak-card{ width:100%; max-width:400px; background:linear-gradient(175deg,#1c1148 0%,var(--card) 100%);
    border:1px solid rgba(159,123,255,.28); border-radius:24px; padding:26px 20px 20px;
    box-shadow:0 -6px 40px rgba(0,0,0,.55),0 0 0 1px rgba(159,123,255,.08); animation:sheetUp .38s cubic-bezier(.2,.8,.2,1.1) both }
  .streak-hdr{ text-align:center; margin-bottom:22px }
  .streak-fire-big{ font-size:44px; line-height:1; margin-bottom:8px; animation:fireWobble 1.6s ease-in-out infinite }
  @keyframes fireWobble{ 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.08) rotate(3deg)} }
  .streak-num{ font-size:46px; font-weight:700; color:#fff; font-family:'Space Mono',monospace; line-height:1;
    text-shadow:0 0 24px rgba(159,123,255,.6) }
  .streak-sub{ color:var(--muted); font-size:14px; margin-top:5px }
  .scal{ display:flex; justify-content:space-between; gap:5px; margin:0 0 18px }
  .scal-cell{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px }
  .scal-dot{ width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(159,123,255,.2);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:transparent;
    background:rgba(159,123,255,.04); transition:all .2s }
  .scal-cell.played .scal-dot{ background:rgba(159,123,255,.18); border-color:rgba(159,123,255,.5); color:#CBA6FF }
  .scal-cell.today .scal-dot{ border-color:var(--accent); box-shadow:0 0 10px rgba(159,123,255,.35) }
  .scal-cell.today.played .scal-dot{ background:var(--accent); border-color:var(--accent); color:#fff;
    box-shadow:0 0 16px rgba(159,123,255,.65) }
  .scal-day{ font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase }
  .scal-cell.today .scal-day{ color:var(--accent) }
  .streak-next{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:16px; line-height:1.5 }
  .streak-next b{ color:#CBA6FF }
  .streak-next .sn-bonus{ display:inline-block; background:rgba(159,123,255,.14); border:1px solid rgba(159,123,255,.25);
    border-radius:10px; padding:2px 10px; font-weight:700; color:#CBA6FF; font-size:13px; margin-top:4px }

  /* ---- Streak-locked skin badge ---- */
  .tag-streak{ background:rgba(255,140,0,.18) !important; color:#ffaa33 !important; border-color:rgba(255,140,0,.35) !important }
  .skin-sl .sw{ opacity:.7; filter:saturate(.7) }
  .skin-sl .n{ color:var(--muted) }
  /* rarity frames + badge */
  .rarity-badge{ position:absolute; top:8px; left:8px; font-size:8px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.28) }
  .rarity-badge.r-rare{ color:#4FC3F7; box-shadow:inset 0 0 0 1px rgba(79,195,247,.5) }
  .rarity-badge.r-epic{ color:#B388FF; box-shadow:inset 0 0 0 1px rgba(179,136,255,.5) }
  .rarity-badge.r-legendary{ color:#FFD54F; box-shadow:inset 0 0 0 1px rgba(255,213,79,.6) }
  .skin.r-rare{ border-color:rgba(79,195,247,.45) }
  .skin.r-epic{ border-color:rgba(179,136,255,.5); box-shadow:0 4px 20px rgba(179,136,255,.14) }
  .skin.r-legendary{ border-color:rgba(255,213,79,.55); box-shadow:0 4px 22px rgba(255,213,79,.18) }
  .skin.r-legendary .sw{ box-shadow:inset 0 0 0 1px rgba(255,213,79,.28) }
  @media (prefers-reduced-motion: no-preference){
    .skin.r-legendary{ animation:legendPulse 3.2s ease-in-out infinite }
  }
  @keyframes legendPulse{ 0%,100%{ box-shadow:0 4px 18px rgba(255,213,79,.14) } 50%{ box-shadow:0 6px 28px rgba(255,213,79,.30) } }
  /* daily deal ("товар дня") */
  .deal{ position:relative; overflow:hidden; border-radius:18px; padding:14px;
    background:linear-gradient(135deg,rgba(255,120,60,.16),rgba(159,123,255,.16));
    border:1px solid rgba(255,140,80,.4); box-shadow:0 6px 26px rgba(255,120,60,.16); margin-bottom:14px }
  .deal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
  .deal-tag{ font-size:11px; font-weight:800; letter-spacing:.05em; color:#FF9A5C }
  .deal-timer{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; color:var(--c-top);
    background:rgba(0,0,0,.25); padding:2px 8px; border-radius:999px }
  .deal-body{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
  .deal-sw{ width:64px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center }
  .deal-sw svg{ width:64px; height:48px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)) }
  .deal-emoji{ font-size:40px; flex-shrink:0; width:56px; text-align:center }
  .deal-info{ flex:1; min-width:0 }
  .deal-title{ font-size:15px; font-weight:700; margin-bottom:4px }
  .deal-price{ font-size:14px; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
  .deal-price b{ font-size:17px; color:var(--c-top) }
  .deal-old{ text-decoration:line-through; color:var(--muted); font-size:12px }
  .deal-off{ font-size:11px; font-weight:800; color:#fff; background:#E0533A; padding:2px 7px; border-radius:999px }
  @media (prefers-reduced-motion: no-preference){
    .deal::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
      background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
      transform:skewX(-18deg); animation:dealShine 5.5s ease-in-out infinite }
  }
  @keyframes dealShine{ 0%,72%{ left:-60% } 100%{ left:130% } }
  /* bundles */
  .bundle{ margin-bottom:10px; border:1px solid rgba(159,123,255,.3) }
  .bundle.done{ opacity:.62 }
  .bundle-top{ display:flex; gap:12px; align-items:center; margin-bottom:11px }
  .bundle-emoji{ font-size:34px; flex-shrink:0 }
  .bundle-title{ font-size:15px; font-weight:700; margin-bottom:3px }
  .bundle-desc{ font-size:12px; color:var(--muted); line-height:1.35 }
  /* backgrounds */
  .bgs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
  .bgc{ position:relative; background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line);
    border-radius:16px; padding:12px; text-align:center; transition:transform .08s, border-color .2s }
  .bgc:active{ transform:scale(.985) }
  .bgc.cur{ box-shadow:0 0 0 1px var(--accent), 0 6px 22px rgba(142,107,255,.3) }
  .bgc .bgsw{ height:66px; border-radius:11px; margin-bottom:9px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    position:relative; overflow:hidden }
  .bgc .bgsw::after{ content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.28),transparent 45%) }
  .bgc .n{ font-size:13px; font-weight:600 }
  .bgc.r-rare{ border-color:rgba(79,195,247,.45) }
  .bgc.r-epic{ border-color:rgba(179,136,255,.5); box-shadow:0 4px 20px rgba(179,136,255,.14) }
  .bgc.r-legendary{ border-color:rgba(255,213,79,.55); box-shadow:0 4px 22px rgba(255,213,79,.18) }
  /* player profile modal */
  .pm-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
  .pm-head .lb-ava-w{ width:52px; height:52px; flex-shrink:0 }
  .pm-id{ flex:1; min-width:0 }
  .pm-name{ font-size:17px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
  .pm-clan{ font-size:12px; color:var(--muted); margin-top:3px }
  .pm-sw{ width:56px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center }
  .pm-sw svg{ width:56px; height:42px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)) }
  .pm-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px }
  .pm-stat{ background:rgba(159,123,255,.07); border:1px solid var(--line); border-radius:13px; padding:11px 12px }
  .pm-stat b{ display:block; font-size:17px; font-weight:700; color:var(--c-top) }
  .pm-stat span{ font-size:11px; color:var(--muted) }

  /* ---- 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 }

  /* ---- Day cap bar ---- */
  .dcb-wrap{ position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(159,123,255,.12) }
  .dcb-wrap .dcb-fill{ height:100%; background:var(--lav-grad); transition:width .6s ease; max-width:100% }
  .dcb-wrap .dcb-text{ display:none }

  /* ---- Upgrades ---- */
  #upgradeGrid{ display:flex; flex-direction:column; gap:10px; margin-bottom:4px }
  .upg-card{ padding:14px 16px }
  .upg-head{ display:flex; align-items:center; gap:12px }
  .upg-icon{ font-size:22px; flex-shrink:0 }
  .upg-title{ flex:1 }
  .upg-title b{ font-size:15px }
  .upg-dots{ display:flex; gap:5px; margin-top:4px }
  .upg-dot{ width:8px; height:8px; border-radius:50%; background:rgba(159,123,255,.2); border:1px solid rgba(159,123,255,.3) }
  .upg-dot.on{ background:var(--accent); border-color:var(--accent-lt); box-shadow:0 0 6px var(--accent) }
  .upg-cur{ margin-top:8px; font-size:12px; color:var(--ok) }
  .upg-next{ margin-top:4px; font-size:12px; color:var(--muted) }
  .upg-next.max{ color:var(--accent-lt) }
  .upg-buy{ padding:7px 14px; font-size:13px; flex-shrink:0 }
  .upg-daylim{ margin-top:8px; display:flex; flex-direction:column; gap:5px }
  .upg-daylim span{ font-size:11px; color:var(--muted) }
  .upg-dl-bar{ height:4px; background:rgba(159,123,255,.15); border-radius:999px; overflow:hidden }
  .upg-dl-fill{ height:100%; background:var(--lav-grad); border-radius:999px; transition:width .5s ease }

  /* ---- Clan tag pill ---- */
  .clan-tag{ display:inline-block; font-family:'Courier New',monospace; font-size:11px; font-weight:700;
    color:#FFD166; background:rgba(255,209,102,.1); border:1px solid rgba(255,209,102,.35);
    border-radius:5px; padding:1px 5px; letter-spacing:.04em; line-height:1.5; white-space:nowrap; flex-shrink:0 }
  .clan-tag-sm{ display:inline-block; font-family:'Courier New',monospace; font-size:10px; font-weight:700;
    color:#FFD166; background:rgba(255,209,102,.1); border:1px solid rgba(255,209,102,.3);
    border-radius:4px; padding:0 4px; letter-spacing:.04em; margin-right:3px; vertical-align:middle }

  /* ---- Leaderboard tabs ---- */
  /* segmented control: one recessed track, raised active pill */
  .lb-tabs{ display:flex; gap:4px; padding:4px; margin:0 0 14px;
    background:var(--void2); border:1px solid var(--line); border-radius:13px }
  .lb-tab{ flex:1; padding:9px 0; border-radius:9px; border:0; background:transparent;
    color:var(--muted); font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.2px;
    cursor:pointer; transition:color .18s ease, transform .12s ease }
  .lb-tab:active{ transform:scale(.97) }
  .lb-tab.active{ color:#fff; background:linear-gradient(180deg,#9F7BFF,#6F5BFF);
    box-shadow:0 3px 12px rgba(111,91,255,.42), inset 0 1px 0 rgba(255,255,255,.20) }

  /* ---- Clan leaderboard row ---- */
  .lb li.clan-row{ gap:10px }
  .clan-row-info{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center }
  .clan-row-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .clan-row-meta{ font-size:11px; color:var(--muted); margin-top:1px }

  /* ---- Clan card in profile ---- */
  #clanCard .card{ padding:14px 16px }
  .clan-card-head{ display:flex; align-items:center; gap:12px }
  .clan-card-tag{ font-family:'Courier New',monospace; font-size:20px; font-weight:700;
    color:#FFD166; text-shadow:0 0 12px rgba(255,209,102,.5); flex-shrink:0 }
  .clan-card-info{ flex:1 }
  .clan-card-info b{ font-size:15px }
  .clan-card-meta{ font-size:12px; color:var(--muted); margin-top:3px }
  .clan-card-btns{ display:flex; gap:8px; margin-top:12px }
  .clan-empty{ text-align:center; padding:20px 0 8px; color:var(--muted); font-size:13px }
  .clan-empty-btns{ display:flex; gap:8px; margin-top:12px }

  /* ---- Clan modal ---- */
  .clan-modal{ position:fixed; inset:0; z-index:100; background:rgba(14,10,36,.85);
    display:flex; align-items:flex-end; backdrop-filter:blur(4px); animation:fadeIn .2s ease }
  .clan-modal[hidden]{ display:none !important }
  .clan-modal-box{ width:100%; max-width:520px; margin:0 auto; max-height:85vh; overflow-y:auto; background:var(--void2);
    border-radius:20px 20px 0 0; padding:14px 22px calc(env(safe-area-inset-bottom)+26px);
    animation:slideUp .3s cubic-bezier(.2,.8,.2,1) }
  .clan-modal-box::before{ content:''; display:block; width:40px; height:4px; border-radius:99px;
    background:var(--line); margin:0 auto 18px }
  .clan-modal-box h3{ text-align:center }
  @keyframes slideUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
  .clan-modal-tag{ font-family:'Courier New',monospace; font-size:28px; font-weight:700; text-align:center;
    color:#FFD166; text-shadow:0 0 20px rgba(255,209,102,.6); margin-bottom:4px }
  .clan-modal-name{ font-size:20px; font-weight:700; text-align:center; margin-bottom:4px }
  .clan-modal-score{ font-size:13px; color:var(--muted); text-align:center; margin-bottom:16px }
  .clan-members{ display:flex; flex-direction:column; gap:6px; margin:12px 0; max-height:40vh; overflow-y:auto }
  .clan-member{ display:flex; align-items:center; gap:10px; padding:8px 10px;
    background:rgba(159,123,255,.06); border-radius:12px }
  .clan-member-name{ flex:1; font-size:14px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .clan-member-score{ font-size:13px; color:var(--muted); flex-shrink:0 }
  .clan-member-owner{ font-size:10px; color:#FFD166; font-weight:700; margin-left:4px }
  .clan-mod{ display:flex; gap:6px; flex-shrink:0 }
  .clan-mod button{ font-size:11px; font-weight:700; padding:5px 9px; border-radius:8px;
    border:1px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent }
  .cm-kick{ background:rgba(255,209,102,.12); color:#FFD166; border-color:rgba(255,209,102,.3) }
  .cm-ban{ background:rgba(255,90,90,.12); color:#FF7B7B; border-color:rgba(255,90,90,.3) }
  .clan-mod button:active{ transform:scale(.94) }
  .clan-banned{ margin:12px 0; padding:10px 12px; border-radius:12px;
    background:rgba(255,90,90,.06); border:1px solid rgba(255,90,90,.16) }
  .clan-banned-head{ font-size:12px; font-weight:700; color:#FF7B7B; margin-bottom:8px;
    text-transform:uppercase; letter-spacing:.04em }
  .clan-banned-row{ display:flex; align-items:center; gap:10px; padding:5px 0 }
  .clan-banned-name{ flex:1; font-size:13px; min-width:0; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; color:var(--muted) }
  .cm-unban{ flex-shrink:0; font-size:11px; font-weight:700; padding:5px 9px; border-radius:8px;
    background:rgba(159,123,255,.14); color:var(--accent-lt); border:1px solid rgba(159,123,255,.3);
    cursor:pointer; -webkit-tap-highlight-color:transparent }
  .cm-unban:active{ transform:scale(.94) }
  .clan-form label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px }
  .clan-form input{ width:100%; background:rgba(159,123,255,.08); border:1px solid var(--line);
    border-radius:10px; padding:10px 12px; color:var(--txt); font-size:15px; font-family:inherit;
    outline:none; margin-bottom:12px }
  .clan-form input:focus{ border-color:var(--accent) }
  .clan-form .hint{ font-size:11px; color:var(--muted); margin-top:-8px; margin-bottom:12px }

  /* ---- Weekly clan goal ---- */
  .clan-goal{ background:rgba(159,123,255,.07); border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; margin:0 0 14px }
  .clan-goal-head{ display:flex; justify-content:space-between; align-items:center;
    font-size:13px; font-weight:700; margin-bottom:8px }
  .clan-goal-total{ font-size:12px; color:var(--accent-lt); font-weight:700 }
  .clan-goal-bar{ height:7px; background:rgba(159,123,255,.15); border-radius:999px; overflow:hidden }
  .clan-goal-fill{ height:100%; background:var(--lav-grad); border-radius:999px; transition:width .5s ease }
  .clan-goal-tiers{ display:flex; flex-direction:column; gap:6px; margin-top:10px }
  .clan-goal-tier{ display:flex; align-items:center; gap:8px; font-size:12px;
    padding:7px 9px; border-radius:10px; background:rgba(159,123,255,.05); opacity:.6 }
  .clan-goal-tier.reached{ opacity:1; background:rgba(92,224,168,.10) }
  .cgt-target{ font-weight:700; flex-shrink:0 }
  .cgt-reward{ flex:1; color:var(--muted) }
  .cgt-done{ color:var(--ok); font-weight:700; flex-shrink:0 }
  .cgt-open{ color:var(--accent-lt); font-weight:600; flex-shrink:0 }
  .cgt-lock{ flex-shrink:0 }
  .clan-goal-claim{ flex-shrink:0; padding:5px 10px; font-size:12px; border:none; border-radius:8px;
    cursor:pointer; font-family:inherit; font-weight:700; background:var(--lav-grad); color:#fff }
  .clan-goal-hint{ font-size:10px; color:var(--muted); margin-top:8px; text-align:center }
  .clan-card-goal{ margin-top:12px }
  .clan-card-goal-row{ display:flex; justify-content:space-between; font-size:12px;
    color:var(--muted); margin-bottom:5px }
  .clan-card-goal-cta{ color:var(--ok); font-weight:700 }

  /* ---- Weekend event banner ---- */
  .event-banner{ display:flex; align-items:center; gap:10px; margin:0 12px 8px;
    padding:9px 13px; border-radius:14px; background:var(--lav-grad);
    box-shadow:0 6px 20px rgba(111,91,255,.35); position:relative; overflow:hidden }
  .event-banner::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
    transform:translateX(-100%); animation:evShine 3.6s ease-in-out infinite }
  @keyframes evShine{ 0%,55%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }
  .event-banner .ev-emoji{ font-size:22px; flex-shrink:0; z-index:1 }
  .event-banner .ev-txt{ flex:1; min-width:0; display:flex; flex-direction:column;
    line-height:1.15; z-index:1; color:#fff }
  .event-banner .ev-txt b{ font-size:13px; font-weight:800 }
  .event-banner .ev-txt span{ font-size:11px; opacity:.92; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis }
  .event-banner .ev-timer{ flex-shrink:0; z-index:1; font-weight:800; font-size:13px; color:#fff;
    background:rgba(0,0,0,.22); padding:4px 8px; border-radius:9px; font-variant-numeric:tabular-nums }
  @media (prefers-reduced-motion: reduce){ .event-banner::after{ animation:none; display:none } }

  /* ---- Admin clan panel ---- */
  .aclan-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line) }
  .aclan-tag{ font-family:'Courier New',monospace; font-weight:700; color:#FFD166; font-size:14px; flex-shrink:0 }
  .aclan-info{ flex:1 }
  .aclan-info b{ font-size:13px }
  .aclan-info span{ font-size:11px; color:var(--muted); display:block }
  .aclan-members{ padding:4px 0 8px 12px; border-bottom:1px solid var(--line) }
  .aclan-member-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(159,123,255,.08) }

  /* ---- Daily missions ---- */
  #missionsGrid{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px }
  .mission-card{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px;
    background:var(--card); border:1px solid var(--line); transition:opacity .2s }
  .mission-card.claimed{ opacity:.55 }
  .mission-icon{ font-size:20px; flex-shrink:0 }
  .mission-body{ flex:1; min-width:0 }
  .mission-title{ font-size:13px; font-weight:600; margin-bottom:5px }
  .mission-prog-wrap{ display:flex; align-items:center; gap:7px }
  .mission-bar{ flex:1; height:4px; background:rgba(159,123,255,.15); border-radius:999px; overflow:hidden }
  .mission-bar-fill{ height:100%; background:var(--lav-grad); border-radius:999px; transition:width .5s ease }
  .mission-prog-txt{ font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0 }
  .mission-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0 }
  .mission-reward{ font-size:12px; color:var(--accent-lt); font-weight:700; white-space:nowrap }
  .mission-done{ font-size:16px }
  .mission-btn{ padding:5px 11px; font-size:12px; border-radius:8px; border:none; cursor:pointer;
    background:rgba(92,224,168,.15); color:var(--ok); font-weight:700; font-family:inherit }
  .mission-btn:disabled{ opacity:.5; cursor:default }

  /* ---- Daily-bonus calendar ---- */
  .daily-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px }
  .daily-cell{ position:relative; text-align:center; padding:9px 2px 8px; border-radius:11px;
    background:rgba(159,123,255,.06); border:1px solid var(--line) }
  .daily-cell.is-today{ border-color:var(--accent); background:rgba(159,123,255,.16);
    box-shadow:0 0 0 1px var(--accent), 0 4px 14px rgba(111,91,255,.35) }
  .daily-cell.is-claimed{ opacity:.45 }
  .daily-day{ font-size:9px; color:var(--muted); margin-bottom:3px }
  .daily-amt{ font-size:11px; font-weight:800; color:var(--accent-lt); line-height:1.1 }
  .daily-boost{ display:block; font-size:8px; color:#FFD166; font-weight:700; margin-top:2px }
  .daily-check{ position:absolute; top:3px; right:4px; font-size:9px; color:var(--ok) }

  /* ---- 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; }

  /* ================= DUELS ================= */
  /* palette: you = cyan #39F6FF, rival = magenta #FF3DAE */
  .duel-entry{ position:relative; display:flex; align-items:center; gap:8px; width:100%;
    margin:0 0 12px; padding:13px 16px; border-radius:14px; cursor:pointer;
    font-size:15px; font-weight:800; color:#eafcff; letter-spacing:.2px;
    background:linear-gradient(100deg,rgba(57,246,255,.16),rgba(255,61,174,.16));
    border:1px solid rgba(57,246,255,.35); }
  .duel-entry:active{ transform:scale(.99); }
  .duel-hint{ font-weight:500; font-size:12px; color:var(--muted); }
  .duel-badge{ margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
    background:#FF3DAE; color:#fff; font-size:12px; font-weight:800; display:inline-flex;
    align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,61,174,.6); }
  .duel-badge[hidden]{ display:none; }

  /* full-screen ghost race */
  .duel-screen{ position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column;
    background:radial-gradient(120% 90% at 50% 0%,#141033 0%,#0A0812 70%); color:var(--txt); }
  .duel-screen[hidden]{ display:none !important; }
  .duel-top{ position:relative; padding:calc(env(safe-area-inset-top,0) + 12px) 14px 8px; }
  .duel-players{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .dp{ display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
  .dp-op{ justify-content:flex-end; }
  .dp-op[hidden]{ visibility:hidden; }
  .dp-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
  .dp-me .dp-dot{ background:#39F6FF; box-shadow:0 0 10px #39F6FF; }
  .dp-op .dp-dot{ background:#FF3DAE; box-shadow:0 0 10px #FF3DAE; }
  .dp-name{ font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dp-sc{ font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; }
  .dp-me .dp-sc{ color:#8df6ff; } .dp-op .dp-sc{ color:#ff9ad8; }
  .duel-clock{ text-align:center; flex:none; }
  .duel-time{ font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1;
    text-shadow:0 0 18px rgba(255,255,255,.25); }
  .duel-pips{ display:flex; gap:5px; justify-content:center; margin:5px 0 2px; }
  .duel-pips i{ width:16px; height:5px; border-radius:3px; background:rgba(255,255,255,.16); }
  .duel-pips i.done{ background:#39F6FF; box-shadow:0 0 8px rgba(57,246,255,.6); }
  .duel-pips i.w{ background:#39F6FF; box-shadow:0 0 8px rgba(57,246,255,.7); }
  .duel-pips i.l{ background:#FF3DAE; box-shadow:0 0 8px rgba(255,61,174,.7); }
  .duel-pips i.cur{ background:rgba(255,255,255,.5); }
  .duel-mult{ font-size:15px; font-weight:900; color:#FFD54F; letter-spacing:.5px; margin-top:1px;
    text-shadow:0 0 12px rgba(255,213,79,.55); }
  .duel-stake{ font-size:11px; color:#FFD54F; font-weight:800; margin-top:2px; }
  .duel-x{ position:absolute; top:calc(env(safe-area-inset-top,0) + 8px); right:10px;
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
    background:rgba(0,0,0,.3); color:var(--muted); font-size:15px; cursor:pointer; }
  .duel-arena{ position:relative; flex:1; min-height:0; touch-action:none; }
  #duelCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .duel-foot{ text-align:center; font-size:12px; color:var(--muted);
    padding:10px 16px calc(env(safe-area-inset-bottom,0) + 12px); }

  .duel-big{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:120px; font-weight:900; color:#fff; pointer-events:none;
    text-shadow:0 0 40px rgba(57,246,255,.7); }
  .duel-big[hidden]{ display:none; }
  .duel-big.go{ animation:duelPop .42s ease-out; }
  @keyframes duelPop{ 0%{ transform:scale(.4); opacity:0; } 40%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); opacity:.9; } }

  .duel-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(10,8,18,.72); backdrop-filter:blur(3px); }
  .duel-overlay[hidden]{ display:none; }
  .do-card{ width:100%; max-width:320px; text-align:center;
    background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 22px; }
  .do-k{ font-size:14px; color:var(--muted); font-weight:700; }
  .do-score{ font-size:52px; font-weight:900; color:#8df6ff; font-variant-numeric:tabular-nums; line-height:1.05; }
  .do-sub{ font-size:13px; color:var(--muted); line-height:1.5; }
  .do-title{ font-size:34px; font-weight:900; letter-spacing:1px; margin-bottom:6px; }
  .do-title.win{ color:#39F6FF; text-shadow:0 0 24px rgba(57,246,255,.6); }
  .do-title.loss{ color:#FF3DAE; }
  .do-title.draw{ color:#cfd2e6; }
  .do-vs{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:44px; font-weight:900;
    font-variant-numeric:tabular-nums; }
  .do-vs .do-me{ color:#8df6ff; } .do-vs .do-op{ color:#ff9ad8; } .do-vs .do-x{ color:var(--muted); font-size:26px; }
  .do-pot{ margin-top:12px; font-size:22px; font-weight:900; }
  .do-pot.win{ color:#FFD54F; } .do-pot.loss{ color:#FF6F9D; } .do-pot.draw{ color:var(--muted); }
  .do-btns{ margin-top:16px; }

  /* stake picker + invite card (reuse .clan-modal shell) */
  .ds-head,.di-who b,.dl-title{ font-size:19px; font-weight:800; }
  .ds-head{ text-align:center; }
  .ds-opp{ text-align:center; color:var(--muted); font-size:14px; margin-top:4px; }
  .ds-rules,.di-rules{ text-align:center; font-size:12.5px; color:var(--muted); line-height:1.5; margin:12px 0; }
  .ds-bal,.di-bal{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:10px; }
  .ds-bal b,.di-bal b{ color:#FFD54F; }
  .ds-label{ font-size:12px; color:var(--muted); font-weight:700; margin-bottom:8px; }
  .ds-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
  .ds-chip{ padding:12px 6px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
    color:var(--txt); font-weight:800; font-size:14px; cursor:pointer; }
  .ds-chip.sel{ border-color:#39F6FF; background:rgba(57,246,255,.14); box-shadow:0 0 0 1px rgba(57,246,255,.4) inset; }
  .ds-chip.off{ opacity:.35; }
  .di-head{ display:flex; align-items:center; gap:12px; }
  .di-who{ display:flex; flex-direction:column; } .di-who span{ font-size:13px; color:var(--muted); }
  .di-pot{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 4px;
    padding:12px 16px; border-radius:14px; background:linear-gradient(100deg,rgba(57,246,255,.14),rgba(255,61,174,.14));
    border:1px solid rgba(255,61,174,.3); }
  .di-pot span{ color:var(--muted); font-size:13px; } .di-pot b{ font-size:22px; font-weight:900; color:#FFD54F; }
  .di-x{ text-align:center; color:var(--muted); padding:20px 0; }

  /* duels list */
  .dl-sec{ font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase;
    letter-spacing:.5px; margin:16px 0 8px; }
  .dl-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); }
  .dl-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .dl-info b{ font-size:14px; } .dl-info span{ font-size:12px; color:var(--muted); }
  .dl-go{ padding:7px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:800; font-size:13px;
    background:linear-gradient(100deg,#39F6FF,#8a5bff); color:#04121a; }
  .dl-wait{ font-size:12px; color:var(--muted); }
  .dl-out{ font-size:12px; font-weight:800; }
  .dl-win{ color:#39F6FF; } .dl-loss{ color:#FF6F9D; } .dl-draw{ color:var(--muted); }
  .dl-empty{ text-align:center; color:var(--muted); font-size:13px; padding:22px 8px; line-height:1.5; }
  .dl-title{ text-align:center; margin-bottom:4px; }

  /* transfer coins */
  .tr-input{ width:100%; margin:12px 0 8px; padding:14px 16px; border-radius:12px;
    border:1px solid var(--line); background:var(--surface); color:var(--txt);
    font-size:20px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
  .tr-input:focus{ outline:none; border-color:#39F6FF; }
  .tr-calc{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:12px; min-height:18px; }
  .tr-calc b{ color:#8df6ff; }
  .tr-calc.warn{ color:var(--warn); }

  /* passive (AFK) income card */
  .passive{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
  .passive-row{ display:flex; align-items:center; gap:12px; }
  .passive-info{ flex:1; min-width:0; }
  .passive-amt{ font-size:24px; font-weight:900; color:#FFD54F; font-variant-numeric:tabular-nums; line-height:1.1;
    text-shadow:0 0 14px rgba(255,213,79,.35); }
  .passive-sub{ font-size:12px; color:var(--muted); margin-top:3px; }
  .passive-btn{ flex:none; padding:10px 18px; font-size:14px; width:auto; }
  .passive-btn:disabled{ opacity:.45; }
  .passive-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,.08); margin:12px 0 8px; overflow:hidden; }
  .passive-bar i{ display:block; height:100%; width:0; border-radius:4px;
    background:linear-gradient(90deg,#CBA6FF,#7C55E8); transition:width .6s ease; }
  .passive-bar i.full{ background:linear-gradient(90deg,#FFE08C,#FFB300); box-shadow:0 0 10px rgba(255,213,79,.5); }
  .passive-cap{ font-size:11px; color:var(--muted); }

  /* ================= PETS ================= */
  /* rarity accent is carried per-element as --rc (common/rare/legendary/secret) */
  .sec-row{ display:flex; align-items:baseline; justify-content:space-between; }
  .sec-link{ background:none; border:none; color:var(--accent-lt); font-size:13px; font-weight:800; cursor:pointer; padding:0; }

  /* profile: open the pet collection */
  .pets-open{ display:flex; align-items:center; gap:8px; width:100%; margin:12px 0 0; padding:13px 16px;
    border-radius:14px; cursor:pointer; font-size:15px; font-weight:800; color:#eafcff;
    background:linear-gradient(100deg,rgba(178,106,255,.16),rgba(79,195,247,.14));
    border:1px solid rgba(178,106,255,.35); }
  .pets-open:active{ transform:scale(.99); }
  .pets-open-ic{ font-size:18px; }
  .pets-open-count{ margin-left:auto; font-size:13px; font-weight:800; color:var(--muted);
    background:rgba(255,255,255,.07); border-radius:9px; padding:2px 9px; }

  /* shared pet visual: emoji with an optional image slot layered on top */
  .pet-vis{ position:relative; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
  .pet-emoji{ display:block; }
  .pet-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
  /* "secret" pets are shown only as a mysterious shadow (never fully revealed) */
  .pet-vis.sil{ filter:brightness(0) drop-shadow(0 0 7px var(--rc)) drop-shadow(0 0 14px var(--rc)); opacity:.92; }
  .pet-vis.sil .pet-emoji{ opacity:.85; }

  /* shop chest cards */
  .chest{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:12px 14px; margin-bottom:10px; }
  .chest-ico{ font-size:34px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
  .chest-info{ flex:1; min-width:0; }
  .chest-name{ font-weight:800; font-size:15px; }
  .chest-odds{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
  .odd{ font-size:10px; font-weight:800; color:var(--rc); background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px; }
  .chest-buy{ flex:none; width:auto; padding:10px 16px; font-size:14px; }
  .chest-buy:disabled{ opacity:.45; }
  /* premium (Stars) chest — limited Nazuna set */
  .chest-prem{ border-color:rgba(255,213,79,.4);
    background:linear-gradient(100deg,rgba(255,213,79,.08),rgba(178,106,255,.08)); }
  .chest-limited{ font-size:9px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
    color:#FFD54F; background:rgba(255,213,79,.14); border-radius:5px; padding:1px 5px; vertical-align:1px; }
  .chest-pay{ display:flex; flex-direction:column; gap:6px; flex:none; }
  .chest-pay .chest-buy{ width:100%; }
  .chest-stars{ background:linear-gradient(100deg,#FFD54F,#FF8A3D); color:#2a1800; }
  .chest-rub{ background:linear-gradient(100deg,#4FC3F7,#5A7BFF); color:#04121a; }

  /* equipped pet perched on the tower screen */
  .pet-perch{ position:absolute; left:10px; bottom:10px; width:56px; height:56px; z-index:3;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .pet-perch .pet-vis{ font-size:40px; width:40px; height:40px; animation:petBob 2.6s ease-in-out infinite; }
  .perch-aura{ position:absolute; inset:-4px; z-index:-1; border-radius:50%;
    background:radial-gradient(circle, var(--rc) 0%, transparent 66%); opacity:.30; filter:blur(3px); }
  .pet-perch.empty{ opacity:.55; border:1.5px dashed var(--line); border-radius:50%; }
  .pet-add{ font-size:26px; color:var(--muted); }
  @keyframes petBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }

  /* gacha chest-open reveal — the signature moment */
  .gacha{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center;
    background:rgba(6,4,14,.87); backdrop-filter:blur(4px); }
  .gacha[hidden]{ display:none; }
  .gacha-stage{ position:relative; width:100%; max-width:340px; padding:24px; text-align:center; }
  .gacha-chest{ font-size:110px; animation:chestRattle .95s ease-in-out; filter:drop-shadow(0 0 26px var(--rc)); }
  @keyframes chestRattle{ 0%{transform:scale(.7);opacity:0} 20%{opacity:1} 30%{transform:scale(1) rotate(-8deg)}
    45%{transform:rotate(8deg)} 60%{transform:rotate(-6deg)} 72%{transform:rotate(6deg)}
    85%{transform:scale(1.16) rotate(0)} 100%{transform:scale(1)} }
  .gacha-burst{ position:absolute; left:50%; top:42%; width:8px; height:8px; transform:translate(-50%,-50%);
    border-radius:50%; animation:gachaBurst .6s ease-out; pointer-events:none; }
  @keyframes gachaBurst{ 0%{ box-shadow:0 0 44px 10px var(--rc); opacity:.9 } 100%{ box-shadow:0 0 200px 90px transparent; opacity:0 } }
  .gacha-pet{ animation:petIn .5s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes petIn{ 0%{ transform:scale(.4); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
  .gacha-rarity{ font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--rc); }
  .gacha-vis{ font-size:92px; line-height:1; margin:10px 0; filter:drop-shadow(0 8px 22px var(--rc)); }
  .gacha-vis .pet-vis{ width:92px; height:92px; }
  .gacha-name{ font-size:22px; font-weight:900; }
  .gacha-buffs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px; }
  .gacha-new{ margin-top:12px; font-size:14px; font-weight:800; color:var(--rc); }
  .gacha-dupe{ margin-top:12px; font-size:14px; font-weight:800; color:#FFD54F; }
  /* secret tier: holographic name + rarity */
  .gacha.r-secret .gacha-rarity, .gacha.r-secret .gacha-name{
    background:linear-gradient(90deg,#B26AFF,#4FC3F7,#FFD54F,#FF6FD8,#B26AFF); background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:holo 3s linear infinite; }
  @keyframes holo{ to{ background-position:300% 0 } }

  /* roulette strip — items race by and settle on the win under the gold ticker */
  .roul-hd{ font-size:14px; font-weight:800; color:var(--muted); margin-bottom:2px; }
  .roul-emoji{ font-size:18px; vertical-align:-2px; }
  .roul-view{ position:relative; width:100%; height:116px; overflow:hidden; margin:8px 0 2px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
            mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); }
  .roul-strip{ position:absolute; left:0; top:6px; display:flex; gap:8px; will-change:transform; }
  .roul-tile{ width:84px; height:104px; flex:none; border-radius:12px; background:#171226;
    border:1px solid var(--rc); display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 -22px 26px -20px var(--rc); }
  .roul-tile.r-legendary, .roul-tile.r-secret{ box-shadow:inset 0 0 22px -8px var(--rc), 0 0 10px -5px var(--rc); }
  .roul-cell{ width:48px; height:48px; font-size:46px; display:flex; align-items:center; justify-content:center; }
  .roul-cell .pet-vis{ width:48px; height:48px; }
  .roul-tile.win{ transform:scale(1.26); border-width:2px; z-index:2;
    box-shadow:0 0 26px -2px var(--rc), inset 0 0 22px -6px var(--rc);
    transition:transform .32s cubic-bezier(.2,1.5,.3,1); }
  .roul-ticker{ position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); z-index:3; pointer-events:none;
    background:linear-gradient(#FFD54F, rgba(255,213,79,.16) 28%, rgba(255,213,79,.16) 72%, #FFD54F);
    box-shadow:0 0 10px #FFD54F; }
  .roul-ticker::before, .roul-ticker::after{ content:""; position:absolute; left:50%; transform:translateX(-50%);
    border-left:6px solid transparent; border-right:6px solid transparent; }
  .roul-ticker::before{ top:-1px; border-top:8px solid #FFD54F; }
  .roul-ticker::after{ bottom:-1px; border-bottom:8px solid #FFD54F; }
  .roul-result{ text-align:center; animation:petIn .4s ease-out; }

  .buff-chip{ font-size:11px; font-weight:700; color:#dfe0ee; background:rgba(255,255,255,.08);
    border:1px solid var(--line); border-radius:8px; padding:3px 8px; }

  /* collection modal */
  .pets-hd{ font-size:19px; font-weight:900; text-align:center; }
  .pets-count{ font-size:13px; color:var(--muted); font-weight:700; }
  .pets-note{ font-size:12px; color:var(--muted); text-align:center; margin:4px 0 14px; }
  .pets-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .pet-card{ position:relative; background:var(--card); border:1.5px solid var(--rc); border-radius:14px;
    padding:12px 10px 10px; text-align:center; }
  .pet-card.st-dim, .pet-card.st-locked{ border-color:var(--line); opacity:.72; }
  .pet-card.st-active{ box-shadow:0 0 0 1px var(--rc), 0 0 16px -3px var(--rc); }
  .pet-count{ position:absolute; top:6px; left:8px; font-size:11px; font-weight:800; color:var(--muted); }
  .pet-rar{ font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--rc); }
  .pet-vis-lg{ font-size:44px; height:52px; display:flex; align-items:center; justify-content:center; margin:6px 0; }
  .pet-vis-lg .pet-vis{ width:52px; height:52px; }
  .pet-card.st-locked .pet-vis-lg, .pet-card.st-dim .pet-vis-lg{ filter:grayscale(1) brightness(.7); }
  .pet-nm{ font-size:13px; font-weight:800; }
  .pet-buffs{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:8px 0; min-height:20px; }
  .pet-buffs .buff-chip{ font-size:10px; padding:2px 6px; }
  .pet-eq{ font-size:12px; font-weight:800; padding:8px; border-radius:10px; }
  button.pet-eq{ width:100%; border:none; cursor:pointer; background:linear-gradient(100deg,var(--rc),#7C55E8); color:#0a0a14; }
  .pet-eq.is-active{ background:rgba(255,255,255,.06); color:var(--rc); }
  .pet-eq.lock, .pet-eq.gray{ background:rgba(255,255,255,.04); color:var(--muted); }

  @media (prefers-reduced-motion: reduce){
    .pet-perch .pet-vis, .gacha-chest, .gacha-pet, .gacha-burst,
    .gacha.r-secret .gacha-rarity, .gacha.r-secret .gacha-name{ animation:none; }
  }

  /* ---- Wheel of Fortune ---- */
  .wheel-card{background:linear-gradient(135deg,#2a1d5e,#3d1f72); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:12px; position:relative; overflow:hidden}
  .wheel-card .wc-top{display:flex; align-items:center; gap:12px}
  .wheel-card .wc-emoji{font-size:34px; filter:drop-shadow(0 0 8px rgba(203,166,255,.6))}
  .wheel-card .wc-t{font-size:16px; font-weight:700}
  .wheel-card .wc-s{font-size:12px; color:var(--muted); margin-top:2px}
  .wheel-card .wc-cta{margin-top:12px; width:100%}
  .wc-badge{position:absolute; top:10px; right:12px; background:var(--lav-grad); color:#241046; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; box-shadow:0 3px 10px rgba(142,107,255,.4)}
  .wheel-wrap{position:relative; width:280px; max-width:78vw; aspect-ratio:1; margin:10px auto 6px}
  .wheel-pointer{position:absolute; top:-4px; left:50%; transform:translateX(-50%); z-index:5; width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:24px solid var(--accent-lt); filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
  .wheel{position:absolute; inset:0; border-radius:50%; border:6px solid rgba(203,166,255,.35); box-shadow:0 0 0 3px rgba(0,0,0,.35), inset 0 0 44px rgba(0,0,0,.5); transition:transform 4.6s cubic-bezier(.16,.84,.3,1); will-change:transform}
  .wheel-seg-label{position:absolute; left:50%; top:50%; font-size:19px; white-space:nowrap; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .wheel-hub{position:absolute; left:50%; top:50%; width:48px; height:48px; transform:translate(-50%,-50%); border-radius:50%; background:var(--lav-grad); display:grid; place-items:center; font-size:20px; z-index:4; box-shadow:0 0 16px rgba(203,166,255,.7), 0 2px 6px rgba(0,0,0,.4)}
  .wheel-sources{display:flex; flex-direction:column; gap:8px; margin-top:10px}
  .wheel-src{display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg,var(--void2),var(--card)); border:1px solid var(--line); border-radius:12px; padding:11px 13px; color:var(--txt); text-align:left}
  .wheel-src .ws-l{font-size:13px} .wheel-src .ws-l b{color:var(--accent-lt)} .wheel-src>b{color:var(--accent-lt); font-size:13px}
  .wheel-src.off{opacity:.45}
  .wheel-odds{font-size:11px; color:var(--muted); margin-top:10px; text-align:center; line-height:1.6}

  /* ---- Free VPN trial card ---- */
  .trial-card{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#123b2e,#1d5e46); border:1px solid rgba(120,230,180,.28); border-radius:16px; padding:14px; margin-bottom:12px}
  .trial-card.ready{background:linear-gradient(135deg,#155e3f,#22a06b); box-shadow:0 6px 20px rgba(34,160,107,.28)}
  .trial-card .tr-emoji{font-size:30px; flex-shrink:0}
  .trial-card .tr-body{flex:1; min-width:0}
  .trial-card .tr-t{font-size:14px; font-weight:700; line-height:1.25}
  .trial-card .tr-s{font-size:12px; color:rgba(237,233,255,.72); margin-top:3px}
  .trial-card .tr-s b{color:#7ff0b8}
  .trial-card .tr-cta{flex-shrink:0; background:#fff; color:#12492f; font-weight:700}
  .trial-card .tr-bar{height:7px; border-radius:6px; background:rgba(0,0,0,.28); overflow:hidden; margin-top:8px}
  .trial-card .tr-bar i{display:block; height:100%; background:linear-gradient(90deg,#5fe3a0,#22a06b); border-radius:6px; transition:width .5s ease}
  .trial-card .tr-prog{font-size:11px; color:rgba(237,233,255,.6); margin-top:5px; font-family:'Space Mono',monospace}

  /* ---- Первые шаги (new-player quest chain) ---- */
  .starter-card{background:linear-gradient(160deg,#2a1d5e,#1b1440); border:1px solid rgba(203,166,255,.32); border-radius:16px; padding:14px; margin:4px 0 12px}
  .sq-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .sq-head b{font-size:15px}
  .sq-prog{font-size:12px; color:var(--accent-lt); font-family:'Space Mono',monospace}
  .sq-bar{height:7px; border-radius:6px; background:rgba(0,0,0,.3); overflow:hidden; margin-bottom:10px}
  .sq-bar i{display:block; height:100%; background:var(--lav-grad); border-radius:6px; transition:width .5s ease}
  .sq-list{display:flex; flex-direction:column; gap:7px}
  .sq-row{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:11px; padding:8px 11px}
  .sq-row.rdy{border-color:var(--accent); box-shadow:0 0 0 1px rgba(159,123,255,.25)}
  .sq-row.off{opacity:.5}
  .sq-ic{font-size:18px; flex-shrink:0}
  .sq-t{flex:1; font-size:13px; min-width:0}
  .sq-rew{font-size:12px; color:var(--muted); font-family:'Space Mono',monospace; white-space:nowrap}
  .sq-done{color:#5fe3a0; font-weight:700; font-size:15px}
  .sq-claim{padding:6px 12px; font-size:12px; white-space:nowrap}