/* ───────────────────────────────────────────────────────────────
   BUSTÉ // de_dust2 degen — CS:Source orange/black tactical theme.
   ─────────────────────────────────────────────────────────────── */
:root{
  --orange:#ff7a18; --orange-hi:#ffb020; --orange-lo:#b8530b;
  --gold:#ffd23f; --gold-hi:#fff3b0; --gold-lo:#9a6a06;
  --neon:#ff2e88; --neon2:#19e3ff;
  --cream:#e9e2d4; --ink:#15110b; --shadow:#8a8270;
  --bg:#0c0a08; --panel:#1a1610; --panel2:#241d13;
  --win:#7CFC4D; --lose:#ff4d4d;
  --btn-f:'Arial Black','Impact',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% -10%, #3a2206 0%, transparent 55%),
    repeating-linear-gradient(0deg,#0c0a08 0 38px,#0e0b08 38px 39px),
    var(--bg);
  color:var(--cream);min-height:100%;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;
}
#marquee{position:fixed;top:0;left:0;right:0;height:6px;z-index:50;
  background:repeating-linear-gradient(90deg,var(--orange) 0 9px,transparent 9px 20px);
  filter:drop-shadow(0 0 6px var(--orange));animation:chase .8s linear infinite}
@keyframes chase{to{background-position:20px 0}}
@keyframes flicker{0%,18%,22%,100%{opacity:1}20%{opacity:.45}}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-3px) scale(1.02)}30%,50%,70%{transform:translate(-6px,3px) scale(1.04)}40%,60%{transform:translate(6px,-2px) scale(1.03)}}

#app{width:100%;max-width:580px;padding:24px 14px 60px;flex:1}
.boot{text-align:center;padding:80px 0;color:var(--shadow);font-style:italic}

.brand{text-align:center;margin-bottom:4px}
.brand h1{font-family:var(--btn-f);font-size:4rem;letter-spacing:1px;line-height:.9;color:var(--orange-hi);
  text-shadow:0 0 14px var(--orange),3px 3px 0 #000,5px 5px 0 var(--orange-lo);animation:flicker 7s infinite}
.brand .accent{color:var(--neon)}
.tag{color:var(--neon2);font-family:var(--btn-f);font-size:.85rem;letter-spacing:1px;margin-top:4px;text-transform:uppercase}
.sub-snark{color:var(--shadow);font-size:.84rem;margin:8px auto 0;max-width:460px;line-height:1.45;text-align:center}

.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--orange-lo);
  border-radius:10px;box-shadow:0 0 0 1px #000,0 12px 40px rgba(0,0,0,.7),inset 0 0 30px rgba(255,122,24,.05);
  padding:18px 16px;margin-top:16px;animation:fadein .25s ease both}
.hdr{text-align:center;font-family:var(--btn-f);color:var(--orange-hi);font-size:1.15rem;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase}
.hdr small{display:block;color:var(--shadow);font-weight:400;font-size:.7rem;letter-spacing:.5px;text-transform:none;margin-top:2px}
.sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--shadow);margin:10px 0 6px;text-align:center}
.divider{height:2px;background:linear-gradient(90deg,transparent,var(--orange-lo),transparent);margin:12px 0;opacity:.6}

.mod-banner{background:linear-gradient(90deg,rgba(255,122,24,.16),rgba(25,227,255,.1));border:1px dashed var(--orange);border-radius:8px;padding:9px 12px;margin:10px 0;text-align:center}
.mod-banner .ml{color:var(--neon2);font-size:.6rem;text-transform:uppercase;letter-spacing:.22em}
.mod-banner .mt{color:var(--orange-hi);font-weight:bold;font-size:1rem;letter-spacing:.5px}
.mod-banner .md{color:var(--cream);font-size:.8rem;opacity:.85}

.chiprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.chiprow .label{color:var(--shadow);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em}
.chips{font-family:var(--btn-f);font-size:1.5rem;color:var(--gold);text-shadow:0 0 10px var(--gold-lo)}

.btn{display:block;width:100%;font-family:var(--btn-f);font-size:1.1rem;letter-spacing:1px;padding:14px;border:none;border-radius:8px;
  cursor:pointer;text-transform:uppercase;color:#1a0f02;background:linear-gradient(180deg,var(--orange-hi),var(--orange),var(--orange-lo));
  box-shadow:0 4px 0 #5e3304,0 0 18px rgba(255,122,24,.35);transition:transform .05s}
.btn small{display:block;font-family:'Trebuchet MS',sans-serif;font-weight:400;font-size:.65rem;text-transform:none;opacity:.8;margin-top:2px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5e3304}
.btn:disabled{filter:grayscale(.7) brightness(.55);cursor:not-allowed;box-shadow:none}
.btn.neon{background:linear-gradient(180deg,#ff7ab0,var(--neon));color:#fff;box-shadow:0 4px 0 #8a0a44,0 0 18px var(--neon)}
.mini{font-family:var(--btn-f);font-size:.7rem;padding:5px 10px;border-radius:6px;cursor:pointer;color:var(--cream);background:#332715;border:1px solid var(--orange-lo);text-transform:uppercase;letter-spacing:.5px}
.act-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.act-btn{font-family:var(--btn-f);font-size:1rem;padding:13px 6px;border-radius:7px;cursor:pointer;text-transform:uppercase;color:var(--cream);background:#2a2114;border:1.5px solid var(--orange-lo);letter-spacing:.5px;transition:transform .05s}
.act-btn:active{transform:translateY(2px)}
.act-btn:disabled{opacity:.35;cursor:not-allowed}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
@media(max-width:460px){.menu-grid{grid-template-columns:1fr}}
.skinrow{margin-top:14px;text-align:center;font-size:.82rem;color:var(--shadow)}
.skinrow .sk-name{font-weight:bold}
.skinrow .mini{margin-left:8px}

.locker-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #ffffff10}
.locker-row.locked{opacity:.5}
.lk-emoji{font-size:1.4rem}.lk-name{flex:1;font-weight:bold}
.lk-need{font-size:.7rem;color:var(--shadow)}

.betsel{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.betchip{font-family:var(--btn-f);width:52px;height:52px;border-radius:50%;cursor:pointer;border:3px dashed #fff6;color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(0,0,0,.6);transition:transform .08s}
.betchip:active{transform:scale(.9)}
.betchip.c10{background:#2e7d32}.betchip.c50{background:#1565c0}.betchip.c100{background:#c62828}.betchip.c500{background:#6a1b9a}
.betchip.allin{background:linear-gradient(135deg,var(--neon),var(--orange));width:auto;padding:0 14px;border-radius:26px}
.betchip.clear{background:#333;border-style:solid}
.curbet{text-align:center;font-family:var(--btn-f);font-size:1.4rem;color:var(--gold-hi);margin:6px 0}

.hand{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:84px;align-items:center}
.card{width:58px;height:82px;border-radius:6px;background:var(--cream);color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:bold;box-shadow:0 3px 8px rgba(0,0,0,.6);animation:pop .22s ease both;position:relative}
.card.sm{width:40px;height:58px}
.card .r{font-size:1.5rem;line-height:1}.card.sm .r{font-size:1rem}.card .s{font-size:1.1rem}
.card.red{color:#c1121f}
.card.back{background:linear-gradient(135deg,#1a1a22,#2a2230);border:2px solid var(--skin,#888);color:var(--skin,#888);display:flex;align-items:center;justify-content:center}
.card.back .bk{font-size:1.6rem;filter:drop-shadow(0 0 6px var(--skin))}
.handval{text-align:center;font-family:var(--btn-f);font-size:1.3rem;margin-top:6px;color:var(--cream)}
.handval.bust{color:var(--lose)}.handval.bj{color:var(--gold)}

.headline{text-align:center;font-family:var(--btn-f);font-size:1.9rem;margin:6px 0;text-transform:uppercase}
.headline.win{color:var(--win);text-shadow:0 0 14px var(--win)}
.headline.lose{color:var(--lose);text-shadow:0 0 14px var(--lose)}
.roast{text-align:center;font-style:italic;color:var(--neon2);margin:8px 0;font-size:.98rem;line-height:1.4}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.dot{width:11px;height:11px;border-radius:2px;background:#3a2f1a;border:1px solid var(--orange-lo)}
.dot.win{background:var(--win)}.dot.lose{background:var(--lose)}.dot.push{background:var(--gold)}
.irow{display:flex;justify-content:space-between;font-size:.9rem;padding:6px 0;border-bottom:1px solid #ffffff10}
.irow .ik{color:var(--shadow)}
.dist{display:flex;align-items:flex-end;gap:4px;height:90px;margin:14px 0}
.bar{flex:1;background:linear-gradient(180deg,var(--orange),var(--orange-lo));border-radius:3px 3px 0 0;position:relative;min-height:3px}
.bar.you{background:linear-gradient(180deg,var(--win),#2e7d32);outline:2px solid var(--win)}
.bar span{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:.58rem;color:var(--shadow)}
.foot{text-align:center;color:var(--shadow);font-size:.66rem;margin-top:22px;line-height:1.5}
.pill{display:inline-block;background:var(--win);color:#062b06;font-size:.6rem;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:bold}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--orange);color:#1a0f02;font-weight:bold;padding:10px 18px;border-radius:8px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:80;box-shadow:0 0 18px var(--orange)}
#toast.show{opacity:1}

/* ── THE RANGE ── */
.range-mount{position:relative;width:100%;height:420px;background:#000;border:2px solid var(--orange-lo);border-radius:8px;overflow:hidden;margin-top:8px}
.range-mount.full{position:fixed;inset:0;z-index:200;width:100vw;height:100vh;border:none;border-radius:0;margin:0}
.range-exit{position:fixed;top:12px;left:12px;z-index:250;font-family:var(--btn-f);font-size:.78rem;padding:8px 14px;border-radius:6px;cursor:pointer;color:var(--cream);background:rgba(20,16,10,.82);border:1px solid var(--orange);text-transform:uppercase;letter-spacing:.5px}
#range-canvas{display:block;width:100%;height:100%;cursor:crosshair;image-rendering:pixelated}
#range-hud{position:absolute;inset:0;pointer-events:none;font-family:var(--btn-f);color:#fff}
.rh-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;color:#fff;opacity:.8;text-shadow:0 0 4px #000}
.rh-meme{position:absolute;top:14%;left:0;right:0;text-align:center;font-size:1.8rem;color:var(--orange-hi);text-shadow:0 0 10px #000,0 0 18px var(--orange);transition:opacity .2s;text-transform:uppercase}
.rh-bot{position:absolute;bottom:8px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:1rem;text-shadow:0 0 4px #000}
.rh-hp{color:var(--lose)}.rh-ammo{color:var(--gold-hi)}.rh-kills{color:var(--neon2)}
.rh-hint{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:'Trebuchet MS',sans-serif;font-size:.68rem;color:#fff8;letter-spacing:.5px}
.rh-dmg{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px rgba(200,0,0,.8);opacity:0;transition:opacity .15s}

/* ── JUMPSCARE ── */
#jumpscare{position:fixed;inset:0;z-index:9999;display:none;background:#000;align-items:center;justify-content:center}
#jumpscare.show{display:flex;animation:shake .14s linear infinite}
#jumpscare img{width:100%;height:100%;object-fit:cover;filter:contrast(1.4) saturate(1.6) brightness(1.1)}
#jumpscare .js-cap{position:absolute;bottom:8%;left:0;right:0;text-align:center;font-family:var(--btn-f);font-size:2.4rem;color:#ff1a1a;text-shadow:0 0 18px #000,0 0 30px #f00;letter-spacing:2px}

/* ── CASE GRID ── */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
@media(max-width:460px){.case-grid{grid-template-columns:1fr}}
.case-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#2a2114,#1a140c);border:1.5px solid var(--orange-lo);color:var(--cream);transition:transform .06s}
.case-card:active{transform:translateY(2px)}
.case-card:disabled{opacity:.4;cursor:not-allowed}
.cc-emoji{font-size:1.8rem}
.cc-name{font-family:var(--btn-f);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.cc-cost{color:var(--gold);font-weight:bold;font-size:.9rem}
.cc-top{font-size:.58rem;opacity:.85;text-align:center;line-height:1.1}

/* ── CASE OPENING REEL ── */
.case-wrap{position:relative;margin-top:14px;height:108px;overflow:hidden;border:2px solid var(--orange-lo);border-radius:8px;background:#0d0b07}
.case-needle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--neon);z-index:2;box-shadow:0 0 10px var(--neon);transform:translateX(-50%)}
.case-reel{display:flex;gap:0;will-change:transform}
.case-item{flex:0 0 104px;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:5px solid #888;background:#16120c}
.ci-gun{font-size:1.5rem}
.ci-name{font-size:.54rem;margin-top:3px;text-align:center;padding:0 4px;line-height:1.1}
.ci-val{font-size:.62rem;color:var(--gold);font-weight:bold;margin-top:2px}
.case-cap{text-align:center;font-family:var(--btn-f);color:var(--orange-hi);margin-top:8px;letter-spacing:1px;font-size:.92rem}

/* ── LOUD WARNING ── */
#loudwarn{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.lw-box{max-width:380px;text-align:center;border:2px solid var(--orange);border-radius:10px;padding:24px;background:var(--panel)}
.lw-h{font-family:var(--btn-f);color:var(--orange-hi);font-size:1.6rem;margin-bottom:10px;letter-spacing:1px}
.lw-box div{color:var(--cream);margin-bottom:14px;line-height:1.5}