@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=IBM+Plex+Mono:wght@500;700&display=swap');
:root { --ink:#090c12; --panel:#121923; --line:#354151; --cyan:#5cddff; --red:#ff4d6d; --lime:#bbf44f; --paper:#e9f1f2; }
* { box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--ink); color:var(--paper); font-family:"IBM Plex Mono",monospace; }
body { touch-action:none; overscroll-behavior:none; }
button, input { font:inherit; }
#game { position:fixed; inset:0; width:100%; height:100%; image-rendering:pixelated; cursor:crosshair; }
#scanlines { pointer-events:none; position:fixed; inset:0; z-index:20; opacity:.1; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px); }
.screen { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(5,8,12,.78); }
.menu-shell { width:min(1040px,92vw); border:2px solid #5a6879; background:#0c1119; box-shadow:12px 12px 0 #05070a; }
.brand { font-family:"Black Ops One"; font-size:clamp(26px,4vw,48px); padding:19px 28px; border-bottom:2px solid var(--line); letter-spacing:0; }
.brand span { color:var(--cyan); } .brand b { float:right; color:var(--red); font-size:.5em; margin-top:12px; }
.menu-grid { display:grid; grid-template-columns:340px 1fr; min-height:540px; }
.roster { padding:26px; border-right:2px solid var(--line); background:#101721; }
.eyebrow { color:#8795a7; font-size:12px; margin:0 0 14px; }
.class-card { width:100%; height:94px; display:grid; grid-template-columns:70px 1fr 25px; align-items:center; gap:12px; margin-bottom:12px; border:2px solid #344253; background:#151e2a; color:white; text-align:left; cursor:pointer; }
.class-card.selected { border-color:var(--cyan); box-shadow:inset 5px 0 var(--cyan); background:#162735; }
.class-card.locked { opacity:.38; cursor:not-allowed; }
.portrait { width:58px; height:58px; margin-left:8px; display:grid; place-items:center; background:#273445; color:#77869a; font:30px "Black Ops One"; image-rendering:pixelated; }
.swordsman-art { position:relative; background:linear-gradient(135deg,#51d9fa 50%,#253246 50%); }
.mage-art { position:relative; background:#34234b; color:#d59cff; } .mage-art i { display:block; width:22px; height:22px; background:#713db8; border:4px solid #211537; box-shadow:0 -13px #d6a1ff, 0 14px #d6a1ff; }
.ninja-art { position:relative; background:#263646; color:#8df5d0; } .ninja-art i { display:block; width:23px; height:25px; background:#2d968b; border:4px solid #16242f; box-shadow:0 -14px #16242f, -5px -5px #8df5d0, 18px 11px #dce6e8; }
.joker-art { position:relative; background:#4d202d; color:#ffcf54; } .joker-art i { display:block; width:22px; height:24px; background:#b73854; border:4px solid #321522; box-shadow:0 -14px #e4e9ec, 17px 2px #fff1a6; }
.bomber-art { position:relative; background:#4a3822; color:#ffb84e; } .bomber-art i { display:block; width:24px; height:24px; background:#c16a30; border:4px solid #31231b; box-shadow:0 -14px #4a3822, 18px 3px #29201a; }
.vampire-art { position:relative; background:#431f38; color:#ff6b91; } .vampire-art i { display:block; width:22px; height:24px; background:#8b315b; border:4px solid #281426; box-shadow:0 -14px #211323, 17px 2px #ffb5c6; }
.necromancer-art { position:relative; background:#14352c; color:#8cff80; } .necromancer-art i { display:block; width:22px; height:24px; background:#397452; border:4px solid #10251e; box-shadow:0 -14px #d8e6d0, 17px 2px #5cff80; }
.swordsman-art:before { content:""; width:22px; height:31px; background:#f3bf89; border:5px solid #172331; box-shadow:8px -8px #d8e6e7; }
.class-card strong,.class-card small { display:block; } .class-card strong { font:20px "Black Ops One"; } .class-card small { color:#9aa9ba; font-size:10px; margin-top:5px; }
.class-card em { align-self:start; padding-top:10px; color:#657285; font-style:normal; }
.loadout { padding:26px; display:flex; flex-direction:column; }
.fighter-preview { flex:1; min-height:215px; display:grid; place-items:center; background-color:#0a0e14; background-image:linear-gradient(#19212d 1px,transparent 1px),linear-gradient(90deg,#19212d 1px,transparent 1px); background-size:22px 22px; border:1px solid #273240; }
.pixel-fighter { position:relative; width:68px; height:88px; background:#4fc8e8; border:10px solid #182333; box-shadow:-17px 56px #26394e,17px 56px #26394e,0 -38px #f0bb85,0 -53px #d9e5e7; transform:scale(1.3); }
.pixel-fighter:before { content:""; position:absolute; width:14px; height:14px; background:#101722; left:6px; top:-35px; box-shadow:28px 0 #101722; }
.blade { position:absolute; width:12px; height:90px; background:#edfafa; border:5px solid #718393; right:-48px; top:-2px; transform:rotate(25deg); transform-origin:bottom; }
.preview-mage { width:76px; height:94px; background:#713db8; border:9px solid #211537; box-shadow:-24px 62px #38245a,24px 62px #38245a,0 -42px #d7a1ff,0 -62px #33204e; }
.preview-mage:before { content:""; position:absolute; width:52px; height:12px; left:3px; top:-46px; background:#241435; box-shadow:-10px 6px #d7a1ff,10px 6px #d7a1ff; }
.preview-mage:after { content:"✦"; position:absolute; color:#f5d8ff; font:34px "Black Ops One"; right:-65px; top:-13px; text-shadow:0 0 12px #c782ff; }
.preview-ninja { width:76px; height:92px; background:#2d968b; border:9px solid #16242f; box-shadow:-24px 61px #1e4e55,24px 61px #1e4e55,0 -42px #17242f; }
.preview-ninja:before { content:""; position:absolute; width:52px; height:22px; left:3px; top:-38px; background:#16242f; box-shadow:0 12px #8df5d0; }
.preview-ninja:after { content:""; position:absolute; width:11px; height:76px; background:#dce6e8; right:-52px; top:-3px; transform:rotate(28deg); box-shadow:0 0 9px #8df5d0; }
.preview-joker { width:76px; height:94px; background:#b73854; border:9px solid #321522; box-shadow:-24px 62px #61263b,24px 62px #61263b,0 -42px #f0c28b,0 -61px #e4e9ec; }
.preview-joker:before { content:"★"; position:absolute; color:#ffcf54; font:28px "Black Ops One"; left:18px; top:-51px; text-shadow:0 0 10px #ffcf54; }
.preview-joker:after { content:"♦"; position:absolute; color:#fff1a6; font:34px "Black Ops One"; right:-57px; top:-12px; transform:rotate(15deg); }
.preview-bomber { width:78px; height:96px; background:#c16a30; border:10px solid #31231b; box-shadow:-24px 63px #68422c,24px 63px #68422c,0 -43px #d9a26f,0 -62px #4a3822; }
.preview-bomber:before { content:"✹"; position:absolute; color:#ffcf54; font:30px "Black Ops One"; left:16px; top:-52px; text-shadow:0 0 12px #ff8c42; }
.preview-bomber:after { content:"●"; position:absolute; color:#29201a; font:32px serif; right:-56px; top:-7px; }
.preview-vampire { width:76px; height:96px; background:#8b315b; border:10px solid #281426; box-shadow:-24px 63px #4e2441,24px 63px #4e2441,0 -43px #dca17e,0 -62px #211323; }
.preview-vampire:before { content:"☾"; position:absolute; color:#ff6b91; font:32px serif; left:17px; top:-54px; text-shadow:0 0 12px #ff416d; }
.preview-vampire:after { content:"♦"; position:absolute; color:#ffb5c6; font:28px serif; right:-53px; top:-5px; transform:rotate(25deg); }
.preview-necromancer { width:76px; height:96px; background:#397452; border:10px solid #10251e; box-shadow:-24px 63px #214d39,24px 63px #214d39,0 -43px #d9e8d3,0 -62px #1a3428; }
.preview-necromancer:before { content:"☠"; position:absolute; color:#8cff80; font:31px serif; left:16px; top:-54px; text-shadow:0 0 12px #54ff8e; }
.preview-necromancer:after { content:"✦"; position:absolute; color:#5cff80; font:30px serif; right:-57px; top:-8px; text-shadow:0 0 10px #3cff78; }
.stats { display:flex; justify-content:space-between; padding:13px 4px; font-size:11px; color:#8d9bab; } .stats b { color:white; }
.abilities { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.abilities div { padding:10px 8px; min-height:72px; border:1px solid #344050; background:#141b25; }
kbd { display:inline-grid; min-width:28px; height:25px; place-items:center; border:1px solid #718195; background:#253142; color:var(--cyan); font:700 11px inherit; }
.abilities b,.abilities small { display:block; } .abilities b { font-size:10px; margin-top:6px; } .abilities small { color:#8c9bab; font-size:9px; }
.deploy-row { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:15px; }
#name { min-width:0; border:2px solid #354457; background:#0b1017; color:white; padding:0 13px; outline:none; }
#name:focus { border-color:var(--cyan); }
#deploy { height:57px; border:0; background:var(--red); color:white; font:23px "Black Ops One"; cursor:pointer; box-shadow:0 5px #a6203f; }
#deploy:hover { background:#ff718b; } #deploy:active { transform:translateY(4px); box-shadow:0 1px #a6203f; }
.bot-match { margin-top:10px; height:42px; border:1px solid #5d6d7c; background:#182431; color:#dce6e8; cursor:pointer; font-size:11px; letter-spacing:0; } .bot-match:hover { border-color:#ffcf54; color:#ffdf78; }
.hidden { display:none !important; }
#hud { position:fixed; inset:0; z-index:5; pointer-events:none; }
.topbar { position:absolute; top:18px; left:20px; right:20px; height:38px; display:flex; align-items:center; gap:18px; padding:0 12px; border-left:5px solid var(--cyan); background:rgba(8,12,17,.86); font-size:11px; }
.topbar span { font:17px "Black Ops One"; color:var(--cyan); } .topbar b { color:#9aa9b9; } .topbar i { margin-left:auto; color:var(--lime); font-style:normal; }
#fullscreen { pointer-events:auto; border:1px solid #566477; background:#172231; color:#c9f6ff; width:30px; height:27px; font-size:20px; line-height:20px; cursor:pointer; }
#leaderboard { position:absolute; right:20px; top:72px; width:220px; background:rgba(8,12,17,.88); border-top:3px solid var(--red); padding:12px; }
#leaderboard h2 { margin:0 0 8px; font:14px "Black Ops One"; }
#leaderboard ol { list-style-position:inside; padding:0; margin:0; }
#leaderboard li { display:grid; grid-template-columns:20px 1fr 35px; border-top:1px solid #27313d; padding:7px 2px; font-size:10px; } #leaderboard li b { text-align:right; color:var(--cyan); }
#killfeed { position:absolute; left:20px; top:72px; width:260px; display:grid; gap:4px; text-align:left; } #killfeed div { padding:6px 8px; border-left:3px solid var(--red); background:rgba(8,12,17,.78); font-size:10px; animation:feedIn .18s ease-out; } #killfeed b { color:#ff6b7e; } #killfeed span { color:#8f9cad; margin:0 5px; } @keyframes feedIn { from { transform:translateX(-12px); opacity:0; } }
.settings { margin-top:16px; padding-top:13px; border-top:1px solid #344050; } .settings label { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:10px; margin:8px 0; color:#aab6c1; font-size:9px; } .settings input[type=range] { width:100%; accent-color:var(--cyan); } .settings .toggle-row { display:flex; justify-content:space-between; } .settings input[type=checkbox] { width:18px; height:18px; accent-color:var(--cyan); }
.status { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); width:min(660px,92vw); }
.hp-row { display:flex; align-items:center; gap:10px; margin-bottom:7px; font-size:11px; font-weight:bold; }
.hp-row>div { flex:1; height:13px; padding:2px; background:#080b10; border:1px solid #758194; } #hpFill { display:block; height:100%; background:var(--red); }
.ability-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.ability-bar button { position:relative; height:57px; overflow:hidden; border:1px solid #566477; background:rgba(13,19,28,.92); color:white; text-align:left; padding:7px; }
.ability-bar button { pointer-events:auto; touch-action:manipulation; }
.ability-bar button b { margin-left:7px; font-size:10px; } .ability-bar button>i { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--cyan); }
.ability-bar .cooldown { position:absolute; right:7px; top:7px; color:#aebaca; font-size:9px; } .ability-bar .ult { border-color:#e4c84f; } .ability-bar .ult kbd { color:#ffe45c; } #ultFill { height:100%; background:rgba(241,208,57,.23); z-index:-1; }
.ability-bar .ult.ready { border-color:#ffe45c; color:#fff4a6; box-shadow:0 0 18px rgba(255,220,70,.8), inset 0 0 16px rgba(255,220,70,.24); animation:ultPulse .8s steps(2) infinite; } .ability-bar .ult.ready kbd { background:#806d16; color:#fff6a5; } .ability-bar .ult.ready #ultFill { background:#f1d039; }
@keyframes ultPulse { 50% { filter:brightness(1.35); } }
#death { position:absolute; inset:0; display:grid; place-content:center; text-align:center; background:rgba(112,10,34,.28); } #death b { font:44px "Black Ops One"; color:#ff5876; } #death span { font-size:11px; }
#death button { pointer-events:auto; margin:18px 4px 0; padding:12px 16px; border:1px solid #718195; background:#151f2b; color:white; cursor:pointer; font-size:11px; } #death button:hover { border-color:var(--cyan); } #death button:disabled { opacity:.45; cursor:not-allowed; }
.controls { position:absolute; left:20px; bottom:20px; color:#738195; font-size:9px; }
#joystick,#cameraStick { display:none; }
@media (max-width:720px), (pointer:coarse) {
  .menu-shell { width:95vw; max-height:94vh; overflow:auto; } .menu-grid { grid-template-columns:1fr; min-height:0; }
  .roster { display:block; padding:14px; border-right:0; border-bottom:2px solid var(--line); } .class-card { display:inline-grid; width:31.7%; height:78px; grid-template-columns:42px 1fr; gap:5px; } .class-card em { display:none; } .portrait { width:38px; height:38px; margin-left:4px; font-size:20px; } .class-card strong { font-size:13px; } .class-card small { font-size:8px; }
  .loadout { padding:14px; } .fighter-preview { min-height:125px; } .stats { font-size:9px; } .abilities { grid-template-columns:repeat(2,1fr); } .deploy-row { grid-template-columns:1fr 1.5fr; }
  .topbar { top:8px; left:8px; right:8px; } .topbar b { display:none; } #leaderboard { top:55px; right:8px; width:155px; opacity:.82; } #killfeed { top:55px; left:8px; width:210px; } .status { left:auto; right:10px; bottom:12px; transform:none; width:208px; height:208px; } .hp-row { position:absolute; width:190px; right:0; bottom:-2px; transform:translateY(100%); } .ability-bar { position:absolute; inset:0; display:block; } .ability-bar button { position:absolute; width:88px; height:58px; padding:5px; border-radius:50%; text-align:center; } .ability-bar button b { display:block; font-size:8px; margin:2px 0 0; } .ability-bar button kbd { min-width:23px; } .ability-bar button:nth-child(1) { left:60px; top:0; } .ability-bar button:nth-child(2) { right:0; top:50px; } .ability-bar button:nth-child(3) { right:0; bottom:50px; } .ability-bar button:nth-child(4) { left:60px; bottom:0; }
  .controls { display:none; } #joystick,#cameraStick { display:block; pointer-events:auto; position:absolute; bottom:28px; width:112px; height:112px; border:2px solid rgba(160,190,205,.45); background:rgba(30,50,65,.35); border-radius:50%; touch-action:none; } #joystick { left:22px; } #cameraStick { right:18px; border-color:rgba(255,213,92,.58); background:rgba(67,54,30,.3); } #joystick i,#cameraStick i { position:absolute; width:42px; height:42px; left:33px; top:33px; border-radius:50%; background:rgba(92,221,255,.65); } #cameraStick i { background:rgba(255,213,92,.78); }
  .status { right:146px; width:192px; height:190px; bottom:22px; } .hp-row { width:180px; bottom:-2px; }
  .ability-bar button:nth-child(1) { right:0; top:0; left:auto; } .ability-bar button:nth-child(2) { right:52px; top:43px; } .ability-bar button:nth-child(3) { right:52px; bottom:43px; } .ability-bar button:nth-child(4) { right:0; bottom:0; left:auto; }
  #death b { font-size:34px; } #scanlines { display:none; }
}