:root{
    --void:#0a0c16; --void2:#05060d;
    --ink:#f4f2ec; --muted:#9aa3ba;
    --ember:#ff9f1c; --ember2:#ffc869;
    --blood:#e63950; --emerald:#23d5ab; --gold:#ffd166;
    --panel:#10131f; --panel2:#171b2c; --bord:rgba(255,255,255,.09);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--void2);}
  body{font-family:'Heebo',system-ui,'Segoe UI',Arial,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none;}
  #cv{display:block;position:fixed;inset:0;touch-action:none;background:radial-gradient(120% 120% at 50% 35%, #0d1020 0%, #0a0c16 45%, #05060d 100%);}
  #vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(130% 130% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);}
  #dangerVig{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(115% 115% at 50% 50%, transparent 52%, rgba(230,57,80,.5) 100%);transition:opacity .3s;}
  #dangerVig.on{opacity:1;animation:dpulse 1.05s ease-in-out infinite;}
  @keyframes dpulse{0%,100%{opacity:.5}50%{opacity:1}}
  #flash{position:fixed;inset:0;pointer-events:none;z-index:6;background:#fff;opacity:0;}

  .hud{position:fixed;inset:0;pointer-events:none;z-index:4;}
  .hud.hidden{display:none;}
  .hud-top{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 12px 8px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg, rgba(5,6,13,.82), rgba(5,6,13,0));}
  .bar{position:relative;height:13px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid var(--bord);}
  .bar.xp{height:8px;}
  .bar>i{position:absolute;top:0;bottom:0;right:0;width:100%;border-radius:8px;transition:width .12s linear;}
  .bar.hp>i{background:linear-gradient(270deg,#ff5470,#ff8a5b);box-shadow:0 0 12px rgba(255,84,112,.5) inset;}
  .bar.xp>i{background:linear-gradient(270deg,var(--emerald),#7bf7d5);box-shadow:0 0 10px rgba(35,213,171,.5) inset;}
  .bar .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);}
  .hud-stats{display:flex;gap:9px;align-items:center;font-size:13px;font-weight:700;flex-wrap:wrap;}
  .hud-stats .t{font-variant-numeric:tabular-nums;font-size:17px;font-weight:900;letter-spacing:1px;}
  .hud-stats b{color:var(--ember2);}
  .hud-stats .dot{opacity:.35;}
  #comboBox{color:var(--ember);font-weight:900;}
  #comboBox b{color:#fff;background:var(--ember);border-radius:7px;padding:0 7px;}
  .weapon-bar{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));right:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:62vw;justify-content:flex-end;}
  .wchip{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;position:relative;font-weight:900;font-size:15px;color:#0a0c16;border:1px solid rgba(0,0,0,.25);box-shadow:0 2px 6px rgba(0,0,0,.4);}
  .wchip.evo{border:2px solid var(--gold);box-shadow:0 0 10px rgba(255,209,102,.6);}
  .wchip s{position:absolute;bottom:-3px;left:-3px;background:#0a0c16;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);text-decoration:none;}
  .wchip.pas{border-radius:50%;}
  .icon-btn{pointer-events:auto;position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;width:40px;height:40px;border-radius:11px;background:rgba(16,19,31,.72);border:1px solid var(--bord);color:var(--ink);font-size:17px;cursor:pointer;}
  .icon-btn:active{transform:scale(.94);}

  .overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(120% 120% at 50% 30%, rgba(10,12,22,.82), rgba(5,6,13,.95));backdrop-filter:blur(4px);overflow:auto;}
  .overlay.hidden{display:none;}
  .panel{width:100%;max-width:520px;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--bord);border-radius:20px;padding:26px 22px;box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;}
  .title{font-weight:900;letter-spacing:-1px;line-height:1;text-align:center;}
  .brand{font-size:54px;background:linear-gradient(180deg,#fff,var(--ember2) 60%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,159,28,.25);}
  .sub{text-align:center;color:var(--muted);margin:8px 0 20px;font-size:15px;font-weight:500;}
  .ember-line{height:3px;width:64px;margin:0 auto 18px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--ember),transparent);}
  .btn{display:block;width:100%;border:none;border-radius:14px;padding:15px 18px;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;margin-top:10px;transition:transform .08s, filter .15s;color:#0a0c16;background:linear-gradient(180deg,var(--ember2),var(--ember));box-shadow:0 8px 22px rgba(255,159,28,.28);}
  .btn:active{transform:translateY(1px) scale(.99);}
  .btn.sec{background:linear-gradient(180deg,#222840,#1a1f33);color:var(--ink);border:1px solid var(--bord);box-shadow:none;}
  .btn.sec:active{filter:brightness(1.15);}
  .btn[disabled]{opacity:.42;cursor:not-allowed;filter:grayscale(.4);}
  .row{display:flex;gap:10px;}
  .row .btn{margin-top:10px;}

  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 16px;}
  .scard{background:rgba(255,255,255,.04);border:1px solid var(--bord);border-radius:12px;padding:11px 13px;}
  .scard .k{font-size:12px;color:var(--muted);font-weight:600;}
  .scard .v{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;}
  .scard .v.em{color:var(--ember2);}

  .chal{margin:4px 0 18px;}
  .chal .ck{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px;}
  .chal .ck b{color:var(--ember2);}
  .ctrack{height:11px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid var(--bord);overflow:hidden;}
  .ctrack>i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--gold));border-radius:7px;width:0;transition:width .4s;}

  #levelup .panel{max-width:560px;}
  .lu-head{text-align:center;font-size:26px;font-weight:900;color:var(--ember2);margin-bottom:2px;}
  .lu-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:16px;font-weight:600;}
  .cards{display:flex;flex-direction:column;gap:11px;}
  .card{pointer-events:auto;display:flex;align-items:center;gap:14px;text-align:right;background:rgba(255,255,255,.035);border:1px solid var(--bord);border-radius:15px;padding:13px 15px;cursor:pointer;transition:transform .08s, border-color .15s, background .15s;}
  .card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,159,28,.5);}
  .card:active{transform:scale(.985);}
  .card.evo{border-color:var(--gold);background:linear-gradient(90deg,rgba(255,209,102,.13),rgba(255,255,255,.035));box-shadow:0 0 26px rgba(255,209,102,.28);}
  .card .ic{flex:0 0 auto;width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:900;color:#0a0c16;box-shadow:0 4px 12px rgba(0,0,0,.35);}
  .card.evo .ic{box-shadow:0 0 16px rgba(255,209,102,.6);}
  .card.pasic .ic{border-radius:50%;}
  .card .tx{flex:1;min-width:0;}
  .card .nm{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;}
  .card .nm em{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;background:rgba(255,159,28,.16);color:var(--ember2);font-style:normal;}
  .card .nm em.new{background:rgba(35,213,171,.18);color:var(--emerald);}
  .card .nm em.evo{background:rgba(255,209,102,.2);color:var(--gold);}
  .card .ds{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.35;font-weight:500;}
  .lu-actions{display:flex;gap:10px;margin-top:14px;}
  .lu-actions .btn{margin-top:0;}

  #shopScreen .panel,#charScreen .panel{max-width:600px;}
  .shead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
  .shead h2{font-size:24px;font-weight:900;margin:0;}
  .gold-pill{font-size:16px;font-weight:900;color:var(--gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:5px 13px;border-radius:30px;}
  .stip{color:var(--muted);font-size:13px;margin:0 0 16px;font-weight:500;}
  .shop-list,.char-list{display:flex;flex-direction:column;gap:9px;max-height:54vh;overflow:auto;padding-left:4px;margin-bottom:16px;}
  .sitem{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.035);border:1px solid var(--bord);border-radius:13px;padding:11px 13px;}
  .sitem .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;color:#0a0c16;font-weight:900;}
  .sitem .tx{flex:1;min-width:0;}
  .sitem .nm{font-weight:800;font-size:15px;}
  .sitem .ds{font-size:12px;color:var(--muted);margin-top:2px;}
  .pips{display:flex;gap:3px;margin-top:5px;}
  .pip{width:13px;height:5px;border-radius:3px;background:rgba(255,255,255,.13);}
  .pip.on{background:var(--ember);}
  .buy{flex:0 0 auto;border:none;border-radius:11px;padding:9px 13px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;min-width:74px;background:linear-gradient(180deg,var(--ember2),var(--ember));color:#0a0c16;}
  .buy:active{transform:scale(.95);}
  .buy[disabled]{background:#262b40;color:var(--muted);cursor:not-allowed;}
  .buy.max{background:rgba(35,213,171,.16);color:var(--emerald);}

  .citem{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.035);border:1px solid var(--bord);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
  .citem:hover{background:rgba(255,255,255,.06);}
  .citem.sel{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset;}
  .citem.lock{opacity:.78;}
  .citem .av{width:54px;height:54px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;color:#0a0c16;font-weight:900;}
  .citem .tx{flex:1;}
  .citem .nm{font-weight:800;font-size:16px;}
  .citem .ds{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.3;}
  .citem .act{flex:0 0 auto;font-size:13px;font-weight:800;}
  .citem .act .pl{color:var(--emerald);}
  .citem .act .pr{color:var(--gold);}

  .pbuild{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 16px;}
  .pbuild .pc{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--bord);border-radius:9px;padding:5px 9px;font-size:13px;font-weight:700;}
  .pbuild .pc i{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-style:normal;color:#0a0c16;font-weight:900;font-size:12px;}
  .pbuild .pc.evo{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}

  .howto-body{color:var(--muted);font-size:14.5px;line-height:1.6;font-weight:500;}
  .howto-body b{color:var(--ink);font-weight:800;}
  .howto-body .k{display:inline-block;background:rgba(255,255,255,.08);border:1px solid var(--bord);border-radius:6px;padding:1px 7px;font-weight:800;color:var(--ink);font-size:12px;margin:0 1px;}
  .howto-body p{margin:0 0 11px;}

  .ribbon{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;font-weight:600;}
  .ribbon b{color:var(--ember2);}
  @media (max-width:420px){ .brand{font-size:44px;} .panel{padding:22px 18px;border-radius:18px;} .card .ic{width:46px;height:46px;font-size:21px;} }
  .card .banish{pointer-events:auto;flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.35);color:#ff8a9b;font-size:13px;font-weight:900;cursor:pointer;align-self:center;}
  .card .banish:hover{background:rgba(255,84,112,.25);}
  .card .banish:active{transform:scale(.9);}
  .icon-btn.right{left:auto;right:12px;}
  #toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,30px);z-index:30;background:linear-gradient(180deg,#1b2034,#121726);border:1px solid var(--gold);color:var(--ink);font-weight:800;font-size:14px;padding:11px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;max-width:88vw;text-align:center;}
  #toast.show{opacity:1;transform:translate(-50%,0);}
  .modepick{display:flex;gap:8px;margin:2px 0 8px;}
  .modebtn{flex:1;padding:11px 6px;border-radius:12px;border:1px solid var(--bord);background:rgba(255,255,255,.04);color:var(--muted);font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:all .12s;}
  .modebtn.sel{background:linear-gradient(180deg,var(--ember2),var(--ember));color:#0a0c16;border-color:transparent;box-shadow:0 6px 16px rgba(255,159,28,.25);}
  .modebtn:active{transform:scale(.96);}
  .modedesc{text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;margin-bottom:14px;min-height:16px;}
  .opt-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
  .opt-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid var(--bord);border-radius:13px;padding:13px 15px;}
  .opt-row .on{font-weight:800;font-size:15px;}
  .opt-row .od{font-size:12px;color:var(--muted);margin-top:2px;}
  .toggle{flex:0 0 auto;width:52px;height:30px;border-radius:16px;background:#262b40;border:1px solid var(--bord);position:relative;cursor:pointer;transition:background .15s;}
  .toggle.on{background:linear-gradient(180deg,var(--emerald),#1aa583);}
  .toggle i{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:right .15s;}
  .toggle.on i{right:25px;}
  .score-list{display:flex;flex-direction:column;gap:7px;max-height:56vh;overflow:auto;margin-bottom:16px;}
  .score-row{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.035);border:1px solid var(--bord);border-radius:11px;padding:9px 13px;}
  .score-row .rank{font-weight:900;font-size:16px;color:var(--muted);min-width:26px;}
  .score-row.top .rank{color:var(--gold);}
  .score-row .st{flex:1;}
  .score-row .stime{font-weight:900;font-size:17px;font-variant-numeric:tabular-nums;}
  .score-row .smeta{font-size:11.5px;color:var(--muted);}
  .score-row .smode{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;background:rgba(255,159,28,.14);color:var(--ember2);}
  .score-row .smode.daily{background:rgba(123,227,255,.16);color:#7be3ff;}
  .score-row .smode.hardcore{background:rgba(255,84,112,.16);color:#ff8a9b;}
  .achv-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:56vh;overflow:auto;margin-bottom:16px;}
  .achv-card{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.035);border:1px solid var(--bord);border-radius:12px;padding:10px 12px;opacity:.5;}
  .achv-card.got{opacity:1;border-color:rgba(255,209,102,.4);}
  .achv-card .aic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;background:#262b40;flex:0 0 auto;}
  .achv-card.got .aic{background:linear-gradient(180deg,var(--ember2),var(--ember));color:#0a0c16;}
  .achv-card .an{font-weight:800;font-size:13.5px;}
  .achv-card .ad{font-size:11px;color:var(--muted);margin-top:1px;}
  .empty-note{text-align:center;color:var(--muted);font-size:14px;padding:24px 0;font-weight:600;}