:root{
  --bg:#05070b;
  --ink:#eef1f6; --mute:#8d97a8; --dim:#5a6477;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --glass:linear-gradient(180deg,rgba(22,27,38,.8),rgba(11,14,21,.72));
  --amber:#ffb547; --amber-2:#ff7a2a; --red:#ff4d3d; --toxic:#a6ff5c; --blue:#5cc8ff; --green:#3ee08a;
  --display:"Chakra Petch","Be Vietnam Pro",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#c{position:fixed;inset:0;display:block}
.hidden{display:none!important}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.fill{fill:currentColor;stroke:none}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;font-size:calc(16px*var(--hudz,1));opacity:0;transition:opacity .5s ease}
#hud.on{opacity:1}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.lbl{font-family:var(--display);font-weight:600;font-size:.66em;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.hud-tl{position:absolute;left:max(16px,env(safe-area-inset-left));top:16px}
.vitals{padding:.7em .85em .75em;width:17em;transition:box-shadow .3s}
.v-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.45em}
.hp-num{font-family:var(--display);font-weight:700;font-size:1.05em;font-variant-numeric:tabular-nums}
.hp-num small{color:var(--dim);font-size:.72em;margin-left:2px}
.bar{position:relative;height:.72em;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.bar i{position:absolute;inset:0;transform-origin:left center;border-radius:inherit}
.bar .ghost{background:rgba(255,255,255,.55);transition:transform .7s .25s var(--ease)}
.bar .fill{background:linear-gradient(90deg,#16a34a,#a6ff5c);transition:transform .14s ease-out;box-shadow:0 0 12px rgba(120,255,120,.35)}
.bar::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:rgba(255,255,255,.16);z-index:2;pointer-events:none}
.bar::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.4) calc(10% - 1px) 10%)}
.vitals.mid .fill{background:linear-gradient(90deg,#d97706,#ffd36b);box-shadow:0 0 12px rgba(255,190,80,.35)}
.vitals.low .fill{background:linear-gradient(90deg,#b91c1c,#ff6b4a);box-shadow:0 0 14px rgba(255,70,50,.55)}
.vitals.low{animation:lowpulse 1s ease-in-out infinite}
@keyframes lowpulse{50%{box-shadow:0 0 0 1px rgba(255,77,61,.55),0 0 30px rgba(255,40,20,.35)}}
.sub-row{display:flex;align-items:center;gap:.6em;margin-top:.65em}
.dash{position:relative;width:4.4em;height:.34em;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.dash i{position:absolute;inset:0;background:linear-gradient(90deg,#2b7fd0,var(--blue));transform-origin:left;border-radius:inherit}
.dash-lbl{font-family:var(--display);font-size:.62em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.dash-lbl.ready{color:var(--blue);text-shadow:0 0 10px rgba(92,200,255,.5)}
.grens{display:flex;gap:.3em;margin-left:auto}
.grens b{width:.66em;height:.66em;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);transition:all .25s}
.grens b.on{background:radial-gradient(circle at 35% 30%,#c4dc86,#56682a);border-color:#24300f;box-shadow:0 0 8px rgba(166,255,92,.3)}

.hud-tc{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.42em}
.wave{display:flex;align-items:baseline;gap:.5em;padding:.32em 1.15em .42em;border-radius:99px}
.wave b{font-family:var(--display);font-weight:700;font-size:1.7em;line-height:1;color:var(--amber);text-shadow:0 0 18px rgba(255,170,60,.45);font-variant-numeric:tabular-nums}
.wave-prog{width:11em;height:3px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.wave-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-2),var(--amber));transform-origin:left;transition:transform .35s var(--ease);box-shadow:0 0 8px rgba(255,150,50,.6)}
.wave-sub{font-size:.72em;color:var(--mute);font-weight:600}
.boss{margin-top:.55em;width:min(26em,60vw);text-align:center;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
.boss.on{opacity:1;transform:none}
.boss-name{font-family:var(--display);font-weight:700;font-size:.78em;letter-spacing:.3em;text-transform:uppercase;color:#ff8a6b;margin-bottom:.35em;text-shadow:0 0 14px rgba(255,60,40,.7)}
.boss .bar{height:.62em}
.boss .fill{background:linear-gradient(90deg,#7f1d1d,#ef4444,#ff9a7a);box-shadow:0 0 16px rgba(255,60,40,.55)}

.hud-tr{position:absolute;right:max(16px,env(safe-area-inset-right));top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:.5em}
.scorebox{padding:.5em .9em .55em;text-align:right;min-width:9em}
.score{font-family:var(--display);font-weight:700;font-size:1.6em;line-height:1.08;font-variant-numeric:tabular-nums}
.coins{display:flex;align-items:center;gap:.45em;padding:.36em .85em;border-radius:99px;font-family:var(--display);font-weight:700;color:#ffd36b;font-variant-numeric:tabular-nums}
.coins.bump{animation:bump .22s var(--ease)}
@keyframes bump{45%{transform:scale(1.13)}}
.coin{display:inline-block;width:1em;height:1em;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff6c2 0 12%,#ffd34d 30%,#e09612 70%,#9a5a06);
  box-shadow:0 0 10px rgba(255,190,60,.45),inset 0 0 0 1.5px rgba(120,60,0,.45)}
.combo{display:flex;flex-direction:column;align-items:flex-end;opacity:0;transform:translateX(10px);transition:opacity .2s,transform .25s var(--ease)}
.combo.on{opacity:1;transform:none}
.combo .cn{font-family:var(--display);font-weight:700;font-style:italic;font-size:1.2em;letter-spacing:.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.combo .cn em{font-style:normal;color:var(--amber);margin-left:.35em}
.combo.hot .cn{color:#ffd36b;text-shadow:0 0 16px rgba(255,140,40,.8)}
.combo-bar{width:6.5em;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-top:4px}
.combo-bar i{display:block;height:100%;background:var(--amber);transform-origin:right}
#mini{width:9em;height:9em;border-radius:14px;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.35);background:rgba(8,10,15,.75)}

.dock{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:.5em;pointer-events:auto;max-width:calc(100vw - 20px)}
.slot{position:relative;width:6.4em;min-width:0;flex:0 1 auto;padding:.55em .55em .5em;border-radius:12px;text-align:center;color:var(--mute);overflow:hidden;
  background:linear-gradient(180deg,rgba(22,27,38,.78),rgba(11,14,21,.72));border:1px solid var(--line);
  transition:transform .25s var(--ease),border-color .25s,background .25s,color .25s,box-shadow .25s}
.slot:hover{border-color:var(--line2)}
.slot svg.gun{display:block;width:100%;height:1.9em;fill:currentColor;opacity:.7;transition:opacity .25s}
.slot .nm{font-size:.6em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .am{font-family:var(--display);font-weight:700;font-size:.95em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:.05em}
.slot .am small{color:var(--dim);font-size:.72em}
.slot .key{position:absolute;top:.35em;left:.5em;font-family:var(--display);font-size:.6em;font-weight:700;color:var(--dim)}
.slot .rl{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0);box-shadow:0 0 8px var(--amber)}
.slot.on{transform:translateY(-5px);border-color:rgba(255,181,71,.6);color:var(--amber);
  background:linear-gradient(180deg,rgba(64,42,16,.85),rgba(22,16,10,.8));
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 26px rgba(255,150,40,.2)}
.slot.on svg.gun{opacity:1;filter:drop-shadow(0 0 6px rgba(255,170,60,.55))}
.slot.empty .am{color:var(--red)}
body.touch .slot .key{display:none}
.hint{position:absolute;left:50%;bottom:7.6em;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:.88em;
  letter-spacing:.16em;text-transform:uppercase;color:#ffb08a;text-shadow:0 0 14px rgba(255,80,40,.7);opacity:0;transition:opacity .2s;white-space:nowrap}
.hint.on{animation:hintb 1.1s ease-in-out infinite}
@keyframes hintb{0%,100%{opacity:1}50%{opacity:.35}}

#banner{position:absolute;left:0;right:0;top:23%;text-align:center;opacity:0;padding:0 16px}
#banner.play{animation:bannerIn 2.7s var(--ease) forwards}
@keyframes bannerIn{
  0%{opacity:0;transform:scale(1.3);filter:blur(12px)}
  12%{opacity:1;transform:scale(1);filter:blur(0)}
  78%{opacity:1;transform:scale(.985)}
  100%{opacity:0;transform:translateY(-16px) scale(.96)}}
.b-kicker{font-family:var(--display);font-weight:700;font-size:.85em;letter-spacing:.55em;text-transform:uppercase;color:var(--amber);padding-left:.55em;margin-bottom:.1em}
.b-title{display:inline-block;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(42px,8vw,96px);line-height:1.15;padding:.05em .25em;
  background:linear-gradient(180deg,#fff 18%,#ffd59a 58%,#ff8a3a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,140,40,.35))}
#banner.red .b-title{background-image:linear-gradient(180deg,#fff 10%,#ff9a7a 50%,#ff3b2a)}
#banner.red .b-kicker{color:#ff6b4a}
#banner.green .b-title{background-image:linear-gradient(180deg,#fff 10%,#c8ffa0 50%,#3ee08a)}
#banner.green .b-kicker{color:var(--green)}
.b-sub{font-weight:600;font-size:1em;color:#d8dde6;text-shadow:0 2px 12px rgba(0,0,0,.9)}

/* ============ TOUCH ============ */
#touchUI{position:fixed;inset:0;pointer-events:none;z-index:6}
.tbtns{position:absolute;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-42%);display:grid;gap:24px;justify-items:end;pointer-events:auto}
.tbtn{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#e3e8f0;
  background:radial-gradient(circle at 50% 28%,rgba(46,55,74,.8),rgba(12,15,22,.8));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .1s,background .1s}
.tbtn:active{transform:scale(.9);background:radial-gradient(circle,rgba(255,140,60,.55),rgba(120,40,10,.6))}
.tbtn .ico{width:24px;height:24px}
.tbtn span{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tbtn.sm{width:42px;height:42px}
.tbtn.sm .ico{width:18px;height:18px}

/* ============ OVERLAYS ============ */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.overlay.show{opacity:1;visibility:visible;transition:opacity .4s ease}
.scrim{background:radial-gradient(120% 90% at 50% 40%,rgba(8,10,16,.55),rgba(3,4,8,.92));
  backdrop-filter:blur(7px) saturate(.75);-webkit-backdrop-filter:blur(7px) saturate(.75)}
.panel{position:relative;width:100%;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,29,40,.94),rgba(11,14,21,.96));border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(20px) scale(.98);transition:transform .55s var(--ease)}
.overlay.show .panel{transform:none}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,181,71,.6),transparent)}
.eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.eyebrow.amber{color:var(--amber)} .eyebrow.red{color:var(--red)}
.ttl{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.2;margin-top:4px}
.desc{font-size:13px;line-height:1.55;color:var(--mute)}
.desc.center{margin:8px 0 24px;font-size:14px}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.65em;height:54px;padding:0 1.6em;border-radius:14px;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .25s,filter .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{color:#1d0e02;background:linear-gradient(180deg,#ffd98a,#ffa042 55%,#f2701f);
  box-shadow:0 10px 30px rgba(255,130,40,.35),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(120,40,0,.3)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 14px 42px rgba(255,130,40,.55),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(120,40,0,.3)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,62%{left:-60%}100%{left:135%}}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-icon{width:54px;padding:0}
.btn .ico{width:20px;height:20px}
kbd{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.18)}
.btn-ghost kbd{background:rgba(255,255,255,.06);border-color:var(--line2);color:var(--mute)}
body.touch kbd{display:none}

/* ============ MENU ============ */
#menu{justify-content:flex-start;
  background:linear-gradient(90deg,rgba(4,6,10,.95) 0%,rgba(4,6,10,.78) 36%,rgba(4,6,10,.12) 74%),linear-gradient(0deg,rgba(4,6,10,.85),transparent 40%)}
.menu-wrap{width:100%;max-width:1200px;max-height:100%;overflow:auto;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);
  gap:56px;align-items:center;padding:12px clamp(8px,4vw,56px)}
.menu-wrap::-webkit-scrollbar{display:none}
.hero>*,.side>*{opacity:0;transform:translateY(16px)}
#menu.show .hero>*,#menu.show .side>*{animation:rise .9s var(--ease) forwards}
.hero>*:nth-child(2){animation-delay:.07s!important}.hero>*:nth-child(3){animation-delay:.14s!important}
.hero>*:nth-child(4){animation-delay:.21s!important}.hero>*:nth-child(5){animation-delay:.28s!important}.hero>*:nth-child(6){animation-delay:.35s!important}
.side>*:nth-child(1){animation-delay:.3s!important}.side>*:nth-child(2){animation-delay:.4s!important}
@keyframes rise{to{opacity:1;transform:none}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;font-weight:600;color:#c9d0db}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:dotp 1.6s ease-in-out infinite}
@keyframes dotp{50%{opacity:.3}}
.logo{margin:18px 0 12px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;line-height:1}
.logo .l1{display:block;font-size:clamp(22px,3.2vw,34px);letter-spacing:.5em;color:#e9edf3;opacity:.92;padding-left:.12em}
.logo .l2{display:inline-block;font-size:clamp(54px,min(9.6vw,14vh),132px);line-height:1.12;padding:.04em .12em 0 0;
  background:linear-gradient(180deg,#fff3dc 0%,#ffb35c 36%,#ff5a2a 66%,#a3120c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(70,8,4,.85)) drop-shadow(0 0 44px rgba(255,90,40,.35));animation:flick 7s infinite}
@keyframes flick{0%,91%,100%{opacity:1}92%{opacity:.7}93%{opacity:1}95%{opacity:.82}96%{opacity:1}}
.tagline{font-size:16px;line-height:1.7;color:#b9c1cd;max-width:31em}
.cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.cta .btn-primary{height:58px;padding:0 2em;font-size:17px}
.cta .btn-icon{height:58px;width:58px}
.best-card{margin-top:28px;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);max-width:360px}
.best-card .ico{width:24px;height:24px;color:var(--amber)}
.best-card .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.best-card .v{font-family:var(--display);font-weight:700;font-size:19px;margin-top:2px}
.best-card .v em{font-style:normal;color:var(--mute);font-size:14px;font-weight:600}
.side{display:grid;gap:14px}
.card{border-radius:18px;padding:18px 18px 20px;background:linear-gradient(180deg,rgba(22,27,38,.82),rgba(11,14,21,.82));border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.card-title{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.card-title::after{content:"";flex:1;height:1px;background:var(--line)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;font-size:13.5px;color:#c6cdd8}
.kc{display:flex;gap:4px}
.kc i{font-style:normal;min-width:28px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:7px;
  background:linear-gradient(180deg,#2b3244,#1a1f2b);border:1px solid rgba(255,255,255,.1);border-bottom-width:3px;
  font-family:var(--display);font-weight:700;font-size:12px;color:#e6ebf2}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.foe{text-align:center;padding:10px 6px 10px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);transition:border-color .2s,background .2s}
.foe:hover{border-color:var(--line2);background:rgba(255,255,255,.05)}
.foe canvas{width:54px;height:54px;display:block;margin:0 auto 4px}
.foe b{display:block;font-size:11.5px;font-weight:700;line-height:1.25}
.foe span{display:block;font-size:10px;color:var(--mute);margin-top:1px;line-height:1.3}

/* ============ SHOP ============ */
.shop{max-width:1000px;height:min(780px,100%);display:flex;flex-direction:column}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:24px 26px 0}
.wallet{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,190,70,.13),rgba(255,150,40,.05));border:1px solid rgba(255,190,70,.3);
  font-family:var(--display);font-weight:700;font-size:26px;color:#ffd36b;font-variant-numeric:tabular-nums}
.wallet .coin{width:22px;height:22px}
.tabs{position:relative;display:flex;gap:4px;margin:20px 26px 0;padding:4px;border-radius:12px;background:rgba(0,0,0,.32);border:1px solid var(--line);width:max-content;max-width:calc(100% - 52px)}
.tabs button{position:relative;z-index:1;height:38px;padding:0 20px;border-radius:9px;font-weight:700;font-size:14px;color:var(--mute);transition:color .2s}
.tabs button.on{color:var(--ink)}
.tab-ind{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:9px;background:linear-gradient(180deg,#2e3649,#1d2330);border:1px solid var(--line2);
  box-shadow:0 4px 12px rgba(0,0,0,.3);transition:left .35s var(--ease),width .35s var(--ease)}
.shop-body{flex:1;overflow:auto;padding:18px 26px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-content:start;
  scrollbar-width:thin;scrollbar-color:#2a3140 transparent}
.item{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.item:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.shop-body.anim .item{animation:cardIn .5s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}}
.item.owned{border-color:rgba(62,224,138,.22)}
.item.equipped{border-color:rgba(255,181,71,.5);box-shadow:0 0 0 1px rgba(255,181,71,.12),0 0 34px rgba(255,150,40,.1)}
.item.flash{animation:flash .7s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 2px rgba(255,210,120,.95),0 0 44px rgba(255,170,60,.6)}}
.art{height:72px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.04);
  background:radial-gradient(70% 90% at 50% 100%,rgba(255,170,60,.14),transparent 70%),rgba(0,0,0,.28)}
.art svg.gun{width:80%;height:50px;fill:#cfd6df;filter:drop-shadow(0 5px 6px rgba(0,0,0,.6))}
.item.equipped .art svg.gun{fill:var(--amber);filter:drop-shadow(0 0 10px rgba(255,160,50,.45)) drop-shadow(0 5px 6px rgba(0,0,0,.6))}
.art .ico{width:32px;height:32px;color:var(--amber);filter:drop-shadow(0 0 10px rgba(255,160,50,.4))}
.art.green{background:radial-gradient(70% 90% at 50% 100%,rgba(62,224,138,.14),transparent 70%),rgba(0,0,0,.28)}
.art.green .ico{color:var(--green);filter:drop-shadow(0 0 10px rgba(62,224,138,.4))}
.ih{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ih b{font-weight:800;font-size:15.5px}
.ih .muted{font-family:var(--display);font-weight:700;font-size:13px;color:var(--mute)}
.badge{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:6px;color:var(--green);background:rgba(62,224,138,.1);border:1px solid rgba(62,224,138,.25);white-space:nowrap}
.badge.amber{color:var(--amber);background:rgba(255,181,71,.1);border-color:rgba(255,181,71,.3)}
.stats{display:grid;gap:7px}
.st{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:8px;font-size:11px;color:var(--mute);font-weight:600}
.st i{position:relative;height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.st i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v));background:linear-gradient(90deg,var(--amber-2),var(--amber));border-radius:inherit}
.st em{font-style:normal;text-align:right;color:#d2d8e1;font-family:var(--display);font-weight:700}
.lv{display:flex;gap:4px}
.lv i{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.07);transition:background .3s}
.lv i.on{background:linear-gradient(90deg,var(--amber-2),var(--amber));box-shadow:0 0 8px rgba(255,160,50,.35)}
.btns{display:flex;gap:8px;margin-top:auto}
.buy{flex:1;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.04em;color:#1d0e02;
  background:linear-gradient(180deg,#ffd98a,#ffa042);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px rgba(255,140,40,.22);transition:filter .15s,transform .1s}
.buy:hover{filter:brightness(1.08)}
.buy:active{transform:scale(.97)}
.buy .coin{width:15px;height:15px}
.buy.poor{color:#ff8a7a;background:rgba(255,77,61,.07);box-shadow:inset 0 0 0 1px rgba(255,77,61,.25);cursor:not-allowed;filter:none}
.buy.poor .coin{filter:grayscale(.6) opacity(.7)}
.buy.done{color:var(--green);background:rgba(62,224,138,.07);box-shadow:inset 0 0 0 1px rgba(62,224,138,.22);cursor:default;filter:none}
.buy.alt{color:var(--ink);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line2)}
.shop-foot{display:flex;align-items:center;gap:20px;padding:16px 26px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.22);flex-wrap:wrap}
.pstat{display:flex;align-items:center;gap:10px;flex:1;min-width:210px;font-family:var(--display);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.pstat .heart{width:20px;height:20px;color:#ff6b6b}
.pstat .bar{flex:1;max-width:200px;height:10px}
.next-info{font-size:13px;color:var(--mute)}
.next-info b{color:var(--ink)}
.next-info.boss b{color:#ff8a6b}

/* ============ PAUSE / OVER ============ */
.small-panel{max-width:540px;padding:32px 30px 28px;text-align:center}
.over-title{display:inline-block;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(34px,7vw,54px);line-height:1.18;padding:0 .12em;margin:6px 0 2px;
  background:linear-gradient(180deg,#fff 0%,#ff9a7a 45%,#d4180e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(255,50,30,.35))}
.record{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 14px;border-radius:99px;font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:12px;text-transform:uppercase;
  color:#1d0e02;background:linear-gradient(90deg,#ffd98a,#ffa042);box-shadow:0 0 26px rgba(255,160,50,.5);animation:pop .6s var(--ease) .5s both}
@keyframes pop{from{opacity:0;transform:scale(.5)}}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.sc{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.sc .ico{width:22px;height:22px;color:var(--amber)}
.sc span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.sc b{font-family:var(--display);font-weight:700;font-size:25px;font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.foot-note{margin-top:18px;font-size:13px;color:var(--mute)}
.foot-note b{color:var(--amber)}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .menu-wrap{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;padding:20px 4px;overflow-x:hidden}
  .hero,.side{min-width:0}
  .tagline{font-size:15px}
  #menu{align-items:flex-start;background:linear-gradient(180deg,rgba(4,6,10,.55),rgba(4,6,10,.94) 55%)}
}
@media (max-width:640px),(max-height:520px){
  #hud{font-size:calc(12.5px*var(--hudz,1))}
  .hud-tl{left:10px;top:10px}.hud-tr{right:10px;top:10px}.hud-tc{top:8px}
  .vitals{width:13.5em}
  #mini{width:7.5em;height:7.5em}
  .dock{bottom:10px;gap:.35em}
  .slot{width:5.4em}
}
@media (max-height:520px){#mini{display:none}.menu-wrap{padding:8px}.logo{margin:12px 0 10px}.cta{margin-top:18px}.best-card{margin-top:16px}}
@media (max-width:560px){
  .shop-head{padding:18px 16px 0}.tabs{margin:16px 16px 0;max-width:calc(100% - 32px)}.tabs button{padding:0 14px}
  .shop-body{padding:14px 16px}.shop-foot{padding:14px 16px 16px;gap:12px}.shop-foot .btn{width:100%}
  .ttl{font-size:26px}.small-panel{padding:24px 18px 22px}.sc b{font-size:20px}.btn{height:50px;font-size:14px}
  .roster{grid-template-columns:repeat(3,1fr)}
  .maps{grid-template-columns:1fr!important}
}

/* ============ CHỌN BẢN ĐỒ ============ */
.map-pick{margin-top:24px;max-width:560px}
.mp-title{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.mapc{position:relative;text-align:left;padding:10px 12px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .2s}
.mapc:hover{transform:translateY(-2px);border-color:var(--line2);background:rgba(255,255,255,.07)}
.mapc.on{border-color:rgba(255,181,71,.7);background:linear-gradient(180deg,rgba(64,42,16,.6),rgba(22,16,10,.6));box-shadow:0 0 26px rgba(255,150,40,.16)}
.mapc .sw{display:block;height:34px;border-radius:8px;margin-bottom:8px;border:1px solid rgba(255,255,255,.1)}
.mapc b{display:block;font-weight:800;font-size:14px}
.mapc span{display:block;font-family:var(--display);font-size:11px;font-weight:700;color:var(--amber);margin-top:1px;letter-spacing:.06em}
.mapc em{display:block;font-style:normal;font-size:11px;line-height:1.4;color:var(--mute);margin-top:4px}

/* ============ CO-OP ============ */
.p2box{position:absolute;left:max(16px,env(safe-area-inset-left));top:122px;width:17em;padding:.6em .85em .65em;border-left:3px solid #ff9a4a}
.p2box .bar .fill{background:linear-gradient(90deg,#c2570f,#ffb36b);box-shadow:0 0 12px rgba(255,150,60,.4)}
.p2gun{font-size:.72em;color:var(--mute);margin-top:.5em;font-weight:600}
.modes{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.32);border:1px solid var(--line)}
.modes button{height:36px;padding:0 16px;border-radius:9px;font-weight:700;font-size:13px;color:var(--mute);transition:all .2s}
.modes button.on{color:var(--ink);background:linear-gradient(180deg,#2e3649,#1d2330);border:1px solid var(--line2)}

/* ============ BẢNG XẾP HẠNG ============ */
.lb{max-width:720px}
.namebox{display:grid;gap:4px}
.namebox span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.namebox input{height:40px;width:190px;padding:0 12px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--ink);font:inherit;font-weight:600;outline:0;user-select:text;-webkit-user-select:text}
.namebox input:focus{border-color:rgba(255,181,71,.7)}
#lbTabs button.on{background:linear-gradient(180deg,#2e3649,#1d2330);border:1px solid var(--line2);color:var(--ink)}
.lb-list{padding:16px 26px 8px;display:grid;gap:6px}
.lb-row{display:grid;grid-template-columns:34px 1fr auto 70px 70px;gap:12px;align-items:center;height:42px;padding:0 14px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:14px}
.lb-row .rk{font-family:var(--display);font-weight:700;color:var(--mute)}
.lb-row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .nm em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:#ff9a4a;border:1px solid rgba(255,154,74,.4);border-radius:5px;padding:1px 5px;margin-left:6px}
.lb-row .pts{font-family:var(--display);font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums;text-align:right}
.lb-row .mt{color:var(--mute);font-size:12.5px;text-align:right}
.lb-row.top .rk{color:var(--amber)}
.lb-row.top:nth-child(1){background:linear-gradient(90deg,rgba(255,181,71,.14),rgba(255,181,71,.03));border-color:rgba(255,181,71,.4)}
.lb-row.empty{opacity:.4;grid-template-columns:34px 1fr}
@media (max-width:560px){.lb-row{grid-template-columns:28px 1fr auto;}.lb-row .mt{display:none}.lb-list{padding:14px 16px 6px}.namebox input{width:140px}}

/* ============ MÃ GIAN LẬN ============ */
.cheat-in{height:54px;flex:1;min-width:0;padding:0 14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--ink);font:inherit;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;outline:0;user-select:text;-webkit-user-select:text}
.cheat-in:focus{border-color:rgba(255,181,71,.7)}
.cheat-in::placeholder{text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
.cheat-msg{min-height:22px;margin-top:12px;font-weight:700;font-size:14px}
.cheat-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:10px;text-align:left;font-size:12px;color:var(--mute)}
.cheat-list b{display:block;font-family:var(--display);color:var(--amber);letter-spacing:.08em;font-size:12.5px}
@media (max-width:560px){.cheat-list{grid-template-columns:1fr}}

.roster{max-height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3140 transparent;padding-right:4px}
/* ============ KIỂU CHƠI · CÀI ĐẶT · THẺ · THÀNH TÍCH · BÁNH XE ============ */
body.no-mini #mini{display:none}
.modes{flex-wrap:wrap}
.gm-desc{margin-top:10px;max-width:520px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.maps.locked{opacity:.4;pointer-events:none}
.cta{flex-wrap:wrap}
.setp{max-width:520px}
.set-body{display:grid;gap:8px;margin-top:16px;text-align:left}
.set-row{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:14px;font-weight:600;text-align:left;width:100%}
.set-row>span{flex:1}
.set-row em{font-style:normal;min-width:44px;text-align:right;font-family:var(--display);font-weight:700;color:var(--amber);font-size:13px}
.set-row input[type=range]{width:160px;accent-color:#ffb547;cursor:pointer}
.set-row select{height:34px;padding:0 10px;border-radius:9px;background:#161b25;color:var(--ink);border:1px solid var(--line2);font:inherit;font-weight:600}
.sw{position:relative;width:44px;height:24px;border-radius:99px;background:#2a3140;border:1px solid var(--line2);transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#aab3c2;transition:transform .2s var(--ease),background .2s}
.sw.on{background:#a8621c}.sw.on::after{transform:translateX(20px);background:#ffd9a0}
.perk-panel{max-width:860px;padding:30px 28px 28px;text-align:center}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(34,42,58,.85),rgba(14,18,26,.9));border:1px solid var(--line2);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.pcard:hover,.pcard.sel{transform:translateY(-6px);border-color:rgba(255,181,71,.8);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 30px rgba(255,150,40,.2)}
.pcard .ico{width:44px;height:44px;color:var(--amber);filter:drop-shadow(0 0 12px rgba(255,170,60,.5))}
.pcard b{font-family:var(--display);font-size:19px;font-weight:700}
.pcard em{font-style:normal;font-size:13px;line-height:1.5;color:var(--mute);min-height:60px}
.pcard .lv{font-style:normal;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.pcard .pk{position:absolute;left:12px;top:10px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--dim)}
@media (max-width:700px){.perks{grid-template-columns:1fr}.pcard{flex-direction:row;flex-wrap:wrap;text-align:left;padding:14px}.pcard em{min-height:0;flex:1 1 100%}}
.stat-line{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 26px 0}
.stat-line div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.stat-line span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.stat-line b{font-family:var(--display);font-size:19px;color:var(--ink)}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 26px 8px;max-height:46vh;overflow:auto;scrollbar-width:thin}
.ach{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);opacity:.5}
.ach.on{opacity:1;border-color:rgba(255,181,71,.45);background:linear-gradient(90deg,rgba(255,181,71,.1),rgba(255,181,71,.02))}
.ach .ico{width:22px;height:22px;color:var(--dim)}.ach.on .ico{color:var(--amber)}
.ach b{display:block;font-size:14px}.ach em{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-top:1px}
@media (max-width:640px){.stat-line{grid-template-columns:repeat(2,1fr);padding:12px 16px 0}.ach-grid{grid-template-columns:1fr;padding:12px 16px 6px}}
#achPop{position:fixed;left:50%;top:18px;z-index:70;transform:translate(-50%,-140%);padding:10px 22px 11px;border-radius:14px;background:linear-gradient(180deg,rgba(60,42,14,.96),rgba(22,16,8,.96));border:1px solid rgba(255,181,71,.7);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(255,150,40,.25);text-align:center;pointer-events:none}
#achPop small{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
#achPop b{font-family:var(--display);font-size:18px}
#achPop.on{animation:achIn 3.6s var(--ease) forwards}
@keyframes achIn{0%{transform:translate(-50%,-140%)}10%,82%{transform:translate(-50%,0)}100%{transform:translate(-50%,-140%)}}
.xhud{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(112px*var(--hudz,1));display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:.3em .4em;max-width:24em;font-size:.72em;font-weight:600;color:var(--mute);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.xhud b{color:var(--amber)}.xhud .xt{color:#9fd8ff}.xhud .xd{color:var(--green);font-weight:800}
.tip{position:absolute;left:50%;top:max(96px,14vh);transform:translate(-50%,-8px);max-width:min(560px,90vw);padding:.6em 1.2em;border-radius:99px;background:rgba(10,14,22,.82);border:1px solid rgba(255,181,71,.5);font-family:var(--display);font-weight:700;font-size:.92em;color:#ffe2b0;text-align:center;opacity:0;transition:opacity .35s,transform .35s var(--ease)}
.tip.on{opacity:1;transform:translate(-50%,0)}
.wheel{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .12s;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%,transparent 75%)}
.wheel.on{opacity:1}
.wheel-c{position:absolute;left:50%;top:50%}
.wi{position:absolute;width:94px;height:62px;margin:-31px 0 0 -47px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:14px;background:linear-gradient(180deg,rgba(26,32,44,.92),rgba(12,15,22,.92));border:1px solid var(--line2);color:var(--mute);transition:transform .12s,border-color .12s,color .12s}
.wi .gun{width:56px;height:20px;fill:currentColor}
.wi span{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.04em}
.wi.cur{border-color:rgba(255,255,255,.35)}
.wi.sel{transform:scale(1.18);border-color:rgba(255,181,71,.9);color:var(--amber);box-shadow:0 0 26px rgba(255,150,40,.35)}
.wmid{position:absolute;left:-60px;top:-18px;width:120px;text-align:center;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px #000}
.oextra{margin:0 0 18px;display:grid;gap:6px;text-align:left}
.ox{display:flex;justify-content:space-between;gap:16px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12.5px}
.ox span{color:var(--mute);white-space:nowrap}.ox b{font-weight:700;text-align:right}
.ochart{display:flex;align-items:flex-end;gap:3px;height:54px;padding:6px 8px 0;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.ochart i{flex:1;min-width:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--amber),#a8621c)}
.ocap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;font-weight:700}
.p2box:not(.hidden)~.xhud{top:calc(200px*var(--hudz,1))}
.gm-pick{margin-top:22px;max-width:560px}
.gm-pick .gm-desc{margin-top:8px;min-height:2.9em}
.chip-btn{cursor:pointer;transition:background .2s,border-color .2s}
.chip-btn:hover{background:rgba(255,255,255,.12);border-color:var(--line2)}
.chip-btn .ico{width:14px;height:14px;color:var(--amber)}
.btns.up{margin-top:6px}
.btns.up .buy{width:100%;flex:1 1 100%}
.wi{width:88px;height:56px;margin:-28px 0 0 -44px}
.oextra{grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.ox{flex-direction:column;gap:1px;align-items:flex-start;padding:7px 12px}
.ox.wide{grid-column:1/-1}
.ox b{text-align:left;font-size:13px}
.ox span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.oextra .ochart{grid-column:1/-1;height:44px}
.oextra .ocap{grid-column:1/-1}
#over .panel{max-height:96vh;overflow:auto;scrollbar-width:none}
.wup{display:grid;gap:5px;margin-top:9px}
.wu{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute);font-weight:600}
.wu>span:first-child{width:62px;flex:none}
.pp{display:flex;gap:3px;flex:1}
.pp b{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.pp b.on{background:linear-gradient(90deg,var(--amber-2),var(--amber));box-shadow:0 0 6px rgba(255,150,50,.5)}
.buy.mini{height:26px!important;min-width:74px;padding:0 10px!important;font-size:12px!important;flex:none}
.wu .mx{min-width:74px;text-align:center;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--green)}
#lbTabs{flex-wrap:wrap}
.xhud span{padding:.15em .6em;border-radius:99px;background:rgba(10,14,22,.62);border:1px solid var(--line)}
#setClose,#tutBtn,#healBtn{height:48px;font-size:13px;padding:0 1.1em}
.setp .row{flex-wrap:wrap}
.name-in{width:100%;height:54px;padding:0 16px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--ink);font:inherit;font-weight:600;font-size:16px;outline:0;user-select:text;-webkit-user-select:text}
.name-in:focus{border-color:rgba(255,181,71,.7)}
.btn.sm{height:40px;font-size:12px;padding:0 1em;letter-spacing:.1em}
.btn.danger{background:rgba(255,77,61,.18);border-color:rgba(255,77,61,.6);color:#ff8a7a}
.slot-list{padding:16px 26px 8px;display:grid;gap:8px;max-height:52vh;overflow:auto;scrollbar-width:thin}
.slot-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.slot-row .si{flex:1;min-width:0}
.slot-row b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-row span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.slot-row em{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-top:2px}
.slot-empty{padding:34px 10px;text-align:center;color:var(--mute);font-size:14px;line-height:1.7}
@media (max-width:560px){.slot-row{flex-wrap:wrap}.slot-row .btn{flex:1}.slot-list{padding:12px 16px 6px}}
.tsup{position:absolute;left:max(12px,env(safe-area-inset-left));top:96px;display:none;grid-template-columns:repeat(2,56px);gap:8px 10px;pointer-events:auto}
body.touch .tsup{display:grid}
.tbtn.tx{width:56px;height:46px;border-radius:14px;font-family:var(--display);flex-direction:column;gap:0;line-height:1}
.tbtn.tx b{font-size:15px}
.tbtn.tx span{position:static;transform:none;font-size:8px;margin-top:2px}
.tbtn.tx i{position:absolute;top:-6px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:var(--amber,#ffb547);color:#1a1006;font:700 10px/17px var(--display);font-style:normal;text-align:center}
.tbtn.tx i:empty{display:none}
.tbtn.tx.off{opacity:.38}
.slot-row .mpips{display:flex;gap:3px;margin:5px 0 1px}
body.touch .xhud{display:none}
.mpips u{width:14px;height:6px;border-radius:2px;background:rgba(255,255,255,.12);display:block}
.mpips u.on{background:var(--amber,#ffb547)}
.chip-btn.hot{border-color:rgba(255,181,71,.75);color:var(--amber,#ffb547);animation:hotp 1.6s ease-in-out infinite}
@keyframes hotp{50%{box-shadow:0 0 0 4px rgba(255,181,71,.18)}}
.dock.many .slot{width:5em}
.dock.many2 .slot{width:3.9em;padding:.4em .2em}
.dock.many2 .slot .nm{display:none}
@media (min-width:760px){.shop-foot{flex-wrap:nowrap}.shop-foot .next-info{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shop-foot .btn{white-space:nowrap}}

.ld{grid-column:1/-1;display:grid;gap:14px}
.ld-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ld-head b{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ld-head span{font-size:12px;color:var(--mute)}
.ld-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ld-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.035);border:1px dashed var(--line2);cursor:pointer;transition:.18s}
.ld-slot:hover{background:rgba(255,255,255,.06)}
.ld-slot.sel{border:1px solid var(--amber);background:rgba(255,181,71,.08);box-shadow:0 0 0 3px rgba(255,181,71,.12)}
.ld-slot.cur b{color:var(--amber)}
.ld-slot .n{position:absolute;left:9px;top:7px;font:700 11px var(--display);color:var(--mute)}
.ld-slot svg.gun{width:80%;height:30px;fill:#cfd6df}
.ld-slot b{font-size:12px;text-align:center}
.ld-slot em{font-style:normal;font-size:12px;color:var(--dim)}
.ld-slot .x{position:absolute;right:6px;top:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,77,61,.2);color:#ff8a7a;font:700 14px/1 sans-serif;cursor:pointer}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ld-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;transition:.18s}
.ld-card:hover{border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.06)}
.ld-card.in{border-color:rgba(91,227,106,.45);background:rgba(91,227,106,.06)}
.ld-card svg.gun{width:80%;height:28px;fill:#cfd6df}
.ld-card b{font-size:12px;text-align:center}
.ld-card span{font-size:11px;color:var(--mute)}
@media (max-width:640px){.ld-slots{grid-template-columns:repeat(3,1fr)}}

.set-body{max-height:58vh;overflow:auto;scrollbar-width:thin;padding-right:4px}
.set-head{margin:14px 2px 2px;font:700 12px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);text-align:left}
.xh-prev{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
.xh-prev canvas{display:block;width:100%;height:auto}
.set-row input[type=color]{width:46px;height:30px;padding:0;border:1px solid var(--line2);border-radius:8px;background:transparent;cursor:pointer}
.sw-row{height:auto;padding:10px 14px}
.swatches{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.swatches button{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0}
.swatches button:hover{transform:scale(1.15)}
.xh-reset{justify-content:center;color:var(--mute);cursor:pointer}
.xh-reset:hover{color:var(--ink)}
.xh-prev{position:sticky;top:0;z-index:2;box-shadow:0 6px 14px rgba(0,0,0,.5)}

/* ===== Gói Pro ===== */
.protag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:linear-gradient(180deg,#ffb547,#ff7a2d);color:#1a0f05;font-weight:800;font-size:10px;line-height:1.5;letter-spacing:.06em;vertical-align:middle;font-style:normal}
.mapc .protag{position:absolute;top:8px;right:8px;margin:0}
.mapc.locked .sw{filter:grayscale(.85) brightness(.7)}.mapc.locked b,.mapc.locked span,.mapc.locked em{opacity:.6}
.modes button.locked{opacity:.75}
.chip-btn#proBtn{background:linear-gradient(180deg,rgba(255,181,71,.25),rgba(255,122,45,.18));border-color:rgba(255,181,71,.55);color:#ffd08a;font-weight:800}
.chip-btn#proBtn.is-pro{background:rgba(80,200,120,.16);border-color:rgba(80,200,120,.5);color:#9be8b2}
.item .buy.prolock{background:linear-gradient(180deg,#ffb547,#ff7a2d);color:#1a0f05;font-weight:800}
.set-row.locked{opacity:.55}.set-row.locked input,.set-row.locked select{pointer-events:none}
.pro-body{padding:16px 22px;overflow:auto;max-height:62vh}
.pro-why{background:rgba(255,181,71,.12);border:1px solid rgba(255,181,71,.4);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:600;text-align:center}
.pro-msg{background:rgba(255,90,61,.14);border:1px solid rgba(255,90,61,.45);border-radius:10px;padding:9px 13px;margin-bottom:12px;text-align:center}
.pro-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}
.pro-tbl th,.pro-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pro-tbl th{opacity:.7;font-weight:700}.pro-tbl .pro{color:#ffd08a;font-weight:600}.pro-tbl th.pro{color:#ffb547;opacity:1}
.pro-price{text-align:center;font-size:18px;margin:6px 0 14px}.pro-price b{font-size:28px;color:#ffb547}.pro-price s{opacity:.55;margin-left:6px}
.pro-ok{background:rgba(80,200,120,.12);border:1px solid rgba(80,200,120,.45);border-radius:14px;padding:14px;text-align:center;margin-bottom:14px}
.pro-ok b{display:block;font-size:18px;margin-bottom:4px}.pro-ok span{display:block;font:700 18px/1.4 monospace;letter-spacing:1px;user-select:all}.pro-ok em{display:block;font-size:12.5px;opacity:.75;margin-top:6px;font-style:normal}
.pro-ok.big span{font-size:24px;margin:8px 0}
.pro-wait{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-bottom:10px}
.pro-wait .qr{background:#fff;border-radius:14px;padding:10px}.pro-wait .qr img{display:block;width:220px;height:220px;max-width:60vw}
.pro-wait .bank{flex:1;min-width:230px;display:grid;gap:8px}.pro-wait .bank div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.pro-wait .bank span{flex:0 0 100%;font-size:12px;opacity:.65}.pro-wait .bank b{font-size:16px;word-break:break-all}
.pro-wait .must{background:rgba(255,181,71,.12);border:1px solid rgba(255,181,71,.5);border-radius:10px;padding:8px 10px}.pro-wait .must b{font-size:22px;color:#ffb547;letter-spacing:1px}
.pro-wait .cp{padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.1);font-size:12px;color:inherit}
.pro-body .name-in{width:100%;box-sizing:border-box}
.pro-body a{color:#7fb0ff}
.pro-cloud{background:rgba(127,176,255,.1);border:1px solid rgba(127,176,255,.35);border-radius:14px;padding:12px 14px;margin-bottom:14px;text-align:center}
.pro-cloud b{display:block;margin-bottom:3px}.pro-cloud span{display:block;font-size:13px;opacity:.8;margin-bottom:8px}
.set-row.dio div{display:flex;gap:8px;flex-wrap:wrap}
.pro-cta{position:sticky;bottom:-17px;margin:0 -22px;padding:12px 22px 14px;background:linear-gradient(180deg,rgba(15,19,27,0),rgb(15,19,27) 50%)}
.pro-cta .pro-price{margin:0 0 10px}
.pro-tbl{font-size:13px}.pro-tbl th,.pro-tbl td{padding:6px 10px}