:root{
  --bg:#0d0d0f; --panel:#16181e; --panel2:#1c1f27;
  --orange:#ff6b1a; --green:#39ff14; --red:#ff2d2d; --blue:#39a0ff;
  --line:#2a2e37; --txt:#d8dbe2; --dim:#7a808c;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:var(--bg); color:var(--txt);
  font-family:'Rajdhani',sans-serif; -webkit-user-select:none; user-select:none; touch-action:none; }
canvas#canvas{ position:fixed; inset:0; display:block; background:#0a0a0c; cursor:crosshair; }

/* ---- Screens ---- */
.screen{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,107,26,0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
    #0b0c10;
  padding:20px; overflow:auto; }
.screen.hidden{ display:none; }
.menu-inner{ max-width:460px; width:100%; text-align:center; animation:fade .4s ease; }
.menu-inner.wide{ max-width:720px; }
@keyframes fade{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

h1.glitch{ font-family:'JetBrains Mono',monospace; font-size:clamp(42px,11vw,84px); font-weight:700;
  letter-spacing:4px; color:#fff; position:relative; line-height:1; margin-bottom:8px; }
h1.glitch::before,h1.glitch::after{ content:attr(data-text); position:absolute; inset:0; }
h1.glitch::before{ color:var(--orange); animation:g1 2.6s infinite; }
h1.glitch::after{ color:var(--blue); animation:g2 3.1s infinite; }
@keyframes g1{ 0%,92%,100%{transform:none;opacity:0;} 93%{transform:translate(-3px,1px);opacity:.7;} 96%{transform:translate(2px,-1px);} }
@keyframes g2{ 0%,90%,100%{transform:none;opacity:0;} 91%{transform:translate(3px,-1px);opacity:.6;} 94%{transform:translate(-2px,1px);} }

.tagline{ color:var(--dim); font-size:16px; letter-spacing:1px; margin-bottom:28px; text-transform:uppercase; }
.hdr{ font-family:'JetBrains Mono',monospace; font-size:clamp(24px,6vw,40px); color:var(--orange); letter-spacing:3px; margin-bottom:6px; }
.hdr.win{ color:var(--green); } .hdr.lose{ color:var(--red); }
.sub{ color:var(--dim); margin-bottom:20px; }

.btn-col{ display:flex; flex-direction:column; gap:12px; max-width:300px; margin:0 auto; }
.tbtn{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 22px; background:var(--panel); color:var(--txt); border:1px solid var(--line);
  cursor:pointer; transition:.15s; clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%); }
.tbtn:hover{ background:var(--panel2); border-color:var(--orange); color:#fff; transform:translateX(3px); }
.tbtn.primary{ background:var(--orange); color:#0a0a0a; border-color:var(--orange); }
.tbtn.primary:hover{ background:#ff8342; box-shadow:0 0 24px rgba(255,107,26,0.5); }
.tbtn.ghost{ background:transparent; }
.stats-line{ margin-top:30px; color:var(--dim); font-size:13px; letter-spacing:1px; }
.stats-line b{ color:var(--green); }
footer{ margin-top:24px; font-size:12px; }
footer a{ color:var(--orange); text-decoration:none; border-bottom:1px dotted var(--orange); }

/* ---- Mode cards ---- */
.mode-cards{ display:grid; gap:14px; margin-bottom:22px; }
@media(min-width:620px){ .mode-cards{ grid-template-columns:repeat(3,1fr); } }
.mode-card{ background:var(--panel); border:1px solid var(--line); padding:20px 16px; cursor:pointer;
  transition:.15s; text-align:left; clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,0 100%); }
.mode-card:hover{ border-color:var(--orange); background:var(--panel2); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.mc-icon{ font-size:32px; margin-bottom:8px; }
.mode-card h3{ font-family:'JetBrains Mono',monospace; font-size:15px; color:#fff; letter-spacing:1px; margin-bottom:8px; }
.mode-card p{ color:var(--dim); font-size:13px; line-height:1.4; }

/* ---- Loadout ---- */
.ld-section-title{ text-align:left; font-family:'JetBrains Mono',monospace; color:var(--orange); letter-spacing:2px; font-size:13px; margin:18px 0 10px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.weapon-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.weapon-card{ background:var(--panel); border:1px solid var(--line); padding:12px; cursor:pointer; transition:.15s; text-align:left; }
.weapon-card:hover{ border-color:var(--dim); }
.weapon-card.active{ border-color:var(--orange); background:var(--panel2); box-shadow:inset 0 0 0 1px var(--orange); }
.wc-name{ font-family:'JetBrains Mono',monospace; font-size:12px; color:#fff; margin-bottom:8px; }
.wc-stats{ display:grid; grid-template-columns:auto 1fr; gap:3px 6px; align-items:center; font-size:9px; color:var(--dim); margin-bottom:8px; }
.wc-stats .bar{ height:5px; background:#0a0a0a; border-radius:3px; overflow:hidden; }
.wc-stats .bar i{ display:block; height:100%; background:var(--orange); }
.wc-ammo{ font-size:11px; color:var(--green); font-family:'JetBrains Mono',monospace; }
.wc-ammo b{ color:#fff; }

.perk-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.perk-card{ background:var(--panel); border:1px solid var(--line); padding:12px; cursor:pointer; transition:.15s; text-align:left; }
.perk-card:hover{ border-color:var(--dim); }
.perk-card.active{ border-color:var(--green); background:rgba(57,255,20,0.06); }
.pc-name{ font-family:'JetBrains Mono',monospace; font-size:12px; color:#fff; margin-bottom:6px; letter-spacing:1px; }
.perk-card.active .pc-name{ color:var(--green); }
.pc-desc{ font-size:12px; color:var(--dim); line-height:1.4; }
.ld-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.ld-actions .tbtn{ flex:1; }

/* ---- Help ---- */
.help-body{ text-align:left; background:var(--panel); border:1px solid var(--line); padding:20px; margin-bottom:20px; line-height:1.7; font-size:15px; }
.help-body hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }
.help-body ul{ margin:8px 0 8px 20px; }
.help-body li{ margin-bottom:6px; }
.help-body .hl{ color:var(--orange); font-family:'JetBrains Mono',monospace; }
.help-body b{ color:#fff; }

/* ---- HUD ---- */
#hud{ position:fixed; inset:0; z-index:15; pointer-events:none; }
#hud.hidden{ display:none; }
#hud-top{ position:absolute; top:14px; left:50%; transform:translateX(-50%); background:rgba(10,12,16,0.8);
  border:1px solid var(--line); padding:8px 18px; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:1px;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%); text-align:center; }
.sc-a{ color:var(--blue); } .sc-b{ color:var(--red); }
#minimap-wrap{ position:absolute; top:14px; right:14px; border:1px solid var(--orange); box-shadow:0 0 16px rgba(0,0,0,.6); }
#minimap{ display:block; }
#killfeed{ position:absolute; top:178px; right:14px; width:180px; text-align:right; }
.kf{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim); background:rgba(10,12,16,0.6);
  padding:3px 8px; margin-bottom:3px; transition:opacity .4s; }
.kf b{ color:#ccc; } .kf-me{ color:var(--green); } .kf-me b{ color:var(--green); }
#hud-health{ position:absolute; bottom:20px; left:20px; width:180px; height:22px; background:rgba(10,12,16,0.8);
  border:1px solid var(--line); overflow:hidden; }
#hp-bar{ height:100%; background:var(--green); transition:width .2s,background .2s; }
#hp-txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:13px; color:#fff; text-shadow:0 1px 2px #000; }
#hud-ammo{ position:absolute; bottom:20px; left:210px; background:rgba(10,12,16,0.8); border:1px solid var(--line); padding:6px 14px; text-align:right; }
.ammo-name{ font-size:11px; color:var(--dim); letter-spacing:1px; }
.ammo-nums{ font-family:'JetBrains Mono',monospace; font-size:24px; line-height:1; }
.ammo-nums .cur{ color:#fff; } .ammo-nums .res{ color:var(--dim); font-size:16px; }
.ammo-mags{ font-size:10px; color:var(--orange); letter-spacing:1px; }
#hud-perks{ position:absolute; bottom:20px; right:20px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:200px; }
.perk-chip{ font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 8px; background:rgba(57,255,20,0.1);
  border:1px solid rgba(57,255,20,0.4); color:var(--green); letter-spacing:1px; transition:.2s; }
.perk-chip.flash{ background:var(--green); color:#000; box-shadow:0 0 16px var(--green); transform:scale(1.2); }
#vignette{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s;
  box-shadow:inset 0 0 140px 40px rgba(255,45,45,0.7); }

/* end stats */
.end-stats{ margin:16px 0 24px; background:var(--panel); border:1px solid var(--line); padding:20px; font-size:16px; line-height:1.8; }
.es-big{ font-family:'JetBrains Mono',monospace; font-size:28px; color:#fff; margin-bottom:6px; letter-spacing:2px; }
.es-row b{ color:var(--orange); }

/* ---- Mobile ---- */
.mobile-only{ display:none; }
body.mobile .mobile-only{ display:block; }
#joystick{ position:fixed; width:120px; height:120px; border:2px solid rgba(255,107,26,0.5); border-radius:50%;
  z-index:16; display:none; background:rgba(10,12,16,0.4); }
#stick{ position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:rgba(255,107,26,0.7); }
#reloadBtn{ position:fixed; bottom:120px; right:20px; z-index:17; pointer-events:auto; display:none;
  padding:14px 20px; background:rgba(255,107,26,0.85); color:#0a0a0a; border:none; border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:1px; }
body.mobile #reloadBtn{ display:block; }
body.mobile #hud-ammo{ left:auto; right:14px; bottom:56px; }
body.mobile #hud-perks{ bottom:56px; right:auto; left:14px; max-width:150px; }
body.mobile #minimap-wrap{ top:70px; right:8px; }
body.mobile #minimap{ width:100px; height:100px; }
body.mobile #killfeed{ display:none; }
</parameter>
</invoke>