/* ============================================================
   HEIST — STYLES  ·  Dark corporate interior aesthetic
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --bg:#0a0c12;--bg1:#0e1018;--bg2:#121520;--bg3:#181c28;
  --brd:#1e2535;--brd2:#28304a;
  --pip:#30ee70;--pip2:#20c050;--pip3:#108030;
  --amb:#f0b020;--amb2:#d09010;
  --rust:#e03030;--rust2:#b82020;
  --cyan:#38c8f0;--blue:#3060e0;
  --txt:#c8d8f0;--txt2:#788aaa;--txt3:#3a4a68;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Share Tech Mono',monospace;color:var(--txt);touch-action:none;}
.screen{position:fixed;inset:0;display:none;flex-direction:column;}
.screen.on{display:flex;}

/* ── TITLE ── */
#s-title{align-items:center;justify-content:center;
  background:linear-gradient(180deg,#04060e 0%,#080c18 50%,#0c1428 100%);}
#s-title::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(30,37,53,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(30,37,53,.5) 1px,transparent 1px);
  background-size:32px 32px;pointer-events:none;}
/* Laser grid floor effect */
#s-title::after{content:'';position:absolute;bottom:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(48,96,224,.06) 50%,rgba(48,96,224,.12));
  background-image:linear-gradient(rgba(48,96,224,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(48,96,224,.15) 1px,transparent 1px);
  background-size:32px 32px;pointer-events:none;}
.ti{position:relative;z-index:2;text-align:center;padding:24px 20px;}
.ti-tag{font-size:12px;letter-spacing:7px;color:var(--pip);opacity:.75;margin-bottom:10px;font-family:'Oswald',sans-serif;}
.ti-logo{font-family:'Black Ops One',cursive;font-size:clamp(42px,13vw,82px);color:var(--txt);letter-spacing:1px;text-shadow:0 0 40px rgba(48,200,240,.25);line-height:1;}
.ti-logo em{color:var(--amb);font-style:normal;display:block;font-size:clamp(52px,15vw,96px);letter-spacing:-1px;}
.ti-sub{font-size:10px;letter-spacing:4px;color:var(--txt3);margin:14px 0 28px;line-height:2;}
.gbtn{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;letter-spacing:4px;padding:13px 48px;background:transparent;border:2px solid var(--amb);color:var(--amb);cursor:pointer;-webkit-appearance:none;border-radius:0;transition:.15s;display:block;margin:0 auto 10px;}
.gbtn:active{background:var(--amb);color:var(--bg);}
.gbtn.secondary{border-color:var(--txt3);color:var(--txt3);font-size:14px;padding:9px 32px;}
.gbtn.secondary:active{background:var(--txt3);color:var(--bg);}
.ti-hint{margin-top:14px;font-size:9px;color:var(--txt3);letter-spacing:2px;line-height:2.1;}

/* ── HUD ── */
#hud{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 12px;background:var(--bg1);border-bottom:2px solid var(--brd2);flex-shrink:0;z-index:20;}
.ht{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;letter-spacing:3px;color:var(--pip);}
.ht.e{color:var(--rust);}
.hr{font-size:10px;color:var(--txt3);letter-spacing:2px;margin-left:10px;}
.hud-mid{display:flex;gap:7px;align-items:center;}
#alarm-status{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--pip);}
#ebtn{font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:3px;padding:5px 16px;background:transparent;border:1px solid var(--amb);color:var(--amb);cursor:pointer;-webkit-appearance:none;border-radius:0;}
#ebtn:active{background:var(--amb);color:var(--bg);}
#ebtn:disabled{opacity:.2;pointer-events:none;}
#hud-save{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;padding:4px 10px;background:transparent;border:1px solid var(--txt3);color:var(--txt3);cursor:pointer;-webkit-appearance:none;border-radius:0;}
#hud-save:active{background:var(--txt3);color:var(--bg);}
.hec{font-size:9px;color:var(--txt3);}
.hec span{color:var(--rust);font-weight:bold;}

/* ── OBJ BAR ── */
#obj-bar{background:var(--bg2);border-bottom:1px solid var(--brd);padding:6px 14px;font-size:12px;color:var(--amb);letter-spacing:2px;flex-shrink:0;font-family:'Oswald',sans-serif;}

/* ── LAYOUT ── */
#mbody{display:flex;flex:1;overflow:hidden;min-height:0;}
@media(orientation:portrait){
  #mbody{flex-direction:column;}
  #lp,#rp{display:none;}
  #garea{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:6px;}
  #mobu{display:flex;flex-direction:column;flex-shrink:0;background:var(--bg1);border-top:2px solid var(--brd2);}
}
@media(orientation:landscape){
  #mbody{flex-direction:row;}
  #lp{width:130px;background:var(--bg1);border-right:2px solid var(--brd2);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;}
  #rp{width:168px;background:var(--bg1);border-left:2px solid var(--brd2);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;}
  #garea{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px;}
  #mobu{display:none;}
}
.ph{font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:4px;color:var(--txt3);padding:5px 10px;border-bottom:1px solid var(--brd);background:var(--bg2);}
#sqlist{overflow-y:auto;flex:1;}
.uc{padding:8px 10px;border-bottom:1px solid var(--brd);cursor:pointer;}
.uc:active{background:var(--bg2);}
.uc.sel{background:rgba(48,238,112,.05);border-left:2px solid var(--pip);}
.uc.dead{opacity:.22;pointer-events:none;}
.ucn{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;line-height:1;margin-bottom:2px;}
.ucr{font-size:10px;color:var(--txt3);letter-spacing:2px;margin-bottom:4px;}
.uch{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--txt3);}
.uchb{flex:1;height:3px;background:var(--bg);border-radius:2px;overflow:hidden;}
.uchf{height:100%;border-radius:2px;}
.apds{display:flex;gap:3px;margin-top:3px;}
.apd{width:6px;height:6px;border-radius:50%;background:var(--pip3);}
.apd.off{background:var(--brd);}
#rinfo{padding:10px;flex-shrink:0;}
.rie{font-size:13px;color:var(--txt3);text-align:center;padding:14px 0;}
.rin{font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;line-height:1;}
.rir{font-size:10px;color:var(--txt3);letter-spacing:2px;margin-bottom:9px;}
.rrow{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;border-bottom:1px solid var(--brd);}
.rl{color:var(--txt3);}
.cp{color:var(--pip);}.ca{color:var(--amb);}.cr{color:var(--rust);}
#ract{border-top:1px solid var(--brd);flex-shrink:0;}
#rabtns{display:flex;flex-direction:column;}
.ab{font-family:'Oswald',sans-serif;font-size:15px;font-weight:500;letter-spacing:2px;text-align:left;padding:10px 12px;background:transparent;border:none;border-bottom:1px solid var(--brd);color:var(--txt);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;-webkit-appearance:none;border-radius:0;}
.ab:active:not(:disabled){background:var(--bg2);color:var(--amb);}
.ab.act{background:rgba(48,238,112,.06);color:var(--pip);border-left:2px solid var(--pip);}
.ab:disabled{color:var(--txt3);pointer-events:none;}
.abap{font-size:9px;color:var(--pip);}
.abap.dim{color:var(--txt3);}
#rlogw{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:60px;}
#rlogl{flex:1;overflow-y:auto;padding:4px 6px;display:flex;flex-direction:column;gap:1px;}
.le{font-size:11px;color:var(--txt3);line-height:1.5;padding-bottom:2px;border-bottom:1px solid rgba(30,37,53,.3);}
.lp{color:var(--pip2);}.le2{color:var(--rust);}.ls{color:var(--amb);}.lc{color:#ffcc00;}
.alarm{color:#ff6020;font-weight:bold;}

/* ── HEIST TILE SPRITESHEET ──────────────────────────────
   heist_tiles.png: 10 tiles × 64px = 640px wide
   Cols: 0=floor 1=wall 2=desk 3=vault 4=server
         5=cover 6=alarm 7=stairs 8=window 9=safe        */
#grid{display:inline-grid;border:2px solid var(--brd2);flex-shrink:0;}
.tile{
  position:relative;cursor:pointer;border:1px solid rgba(30,37,53,.6);
  display:flex;align-items:center;justify-content:center;
  user-select:none;flex-shrink:0;
  
  
  image-rendering:auto;
}
/* Tile spritesheet — all_tiles.png: 20 tiles × 128px = 2560px
   background-size: 2000% 100%   position = (col/19)*100% */
.tile{background-image:url('all_tiles.png');background-size:2000% 100%;}
/* Original 10 tiles */
.tc-0 {background-position:0% 0%;background-color:#1a1c24;}
.tc-1 {background-position:5.26% 0%;background-color:#0e1018;cursor:default;}
.tc-2 {background-position:10.52% 0%;background-color:#1a1408;cursor:default;}
.tc-3 {background-position:15.78% 0%;background-color:#0a0c14;cursor:default;}
.tc-4 {background-position:21.05% 0%;background-color:#0c1018;cursor:default;}
.tc-5 {background-position:26.31% 0%;background-color:#14161e;}
.tc-6 {background-position:31.57% 0%;background-color:#1a100a;}
.tc-7 {background-position:36.84% 0%;background-color:#0e1018;}
.tc-8 {background-position:42.10% 0%;background-color:#0a1018;cursor:default;}
.tc-9 {background-position:47.36% 0%;background-color:#14161e;cursor:default;}
/* New 10 tiles */
.tc-10{background-position:52.63% 0%;background-color:#200a10;}  /* casino floor */
.tc-11{background-position:57.89% 0%;background-color:#0a1a08;cursor:default;} /* poker table */
.tc-12{background-position:63.15% 0%;background-color:#0c0c18;cursor:default;} /* slot machine */
.tc-13{background-position:68.42% 0%;background-color:#181a1c;}  /* prison cell */
.tc-14{background-position:73.68% 0%;background-color:#141618;cursor:default;} /* bars */
.tc-15{background-position:78.94% 0%;background-color:#1a1a1e;}  /* embassy floor */
.tc-16{background-position:84.21% 0%;background-color:#1a1408;cursor:default;} /* embassy desk */
.tc-17{background-position:89.47% 0%;background-color:#0e1018;cursor:default;} /* cctv */
.tc-18{background-position:94.73% 0%;background-color:#080610;}  /* laser grid — walkable, hurts */
.tc-19{background-position:100% 0%;background-color:#181c10;}    /* helipad */
/* Laser grid glow overlay */
.tile.tc-18::after{content:'';position:absolute;inset:0;background:rgba(180,0,255,.08);pointer-events:none;z-index:0;}
/* Helipad pulse */
.tile.tc-19::after{content:'H';position:absolute;font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:rgba(200,180,30,.35);pointer-events:none;z-index:0;}

/* Highlights */
.tile.hl-mv::before   {content:'';position:absolute;inset:0;background:rgba(48,238,112,.22);outline:2px solid rgba(48,238,112,.8);outline-offset:-2px;pointer-events:none;z-index:1;}
.tile.hl-atk::before  {content:'';position:absolute;inset:0;background:rgba(224,48,48,.18);outline:2px solid rgba(224,48,48,.9);outline-offset:-2px;pointer-events:none;z-index:1;}
.tile.hl-heal::before {content:'';position:absolute;inset:0;background:rgba(56,200,240,.16);outline:2px solid rgba(56,200,240,.8);outline-offset:-2px;pointer-events:none;z-index:1;}
.tile.hl-spec::before {content:'';position:absolute;inset:0;background:rgba(240,176,32,.18);outline:2px solid rgba(240,176,32,.8);outline-offset:-2px;pointer-events:none;z-index:1;}
.tile.hl-sel::before  {content:'';position:absolute;inset:0;outline:3px solid var(--amb);outline-offset:-3px;pointer-events:none;z-index:1;}
/* Smoke overlay */
.tile.smoked::after{content:'💨';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.5;pointer-events:none;z-index:2;background:rgba(180,200,220,.12);}
.mvd{width:9px;height:9px;border-radius:50%;background:rgba(48,238,112,.85);pointer-events:none;position:relative;z-index:3;}

/* ── UNIT TOKENS ── */
.tok{position:absolute;inset:3px;border:2px solid;z-index:2;cursor:pointer;overflow:hidden;
  background-image:url('all_units.png');
  background-size:1600% 100%;  /* 16 cols */
  image-rendering:pixelated;image-rendering:crisp-edges;
  border-radius:3px;}
.tok.player{border-radius:50%;}
.tokhp{position:absolute;bottom:0;left:0;right:0;height:5px;background:rgba(0,0,0,.8);z-index:3;pointer-events:none;}
.tokhf{height:100%;transition:width .3s;}
.tokb{position:absolute;top:1px;right:1px;font-size:7px;padding:1px 3px;font-family:'Oswald',sans-serif;font-weight:700;border-radius:2px;z-index:4;pointer-events:none;letter-spacing:1px;}
.tok.tok-dead{opacity:.2;filter:grayscale(1);pointer-events:none;}
@keyframes pulse{0%,100%{opacity:.9;}50%{opacity:.15;}}
.tok.toks::after{content:'';position:absolute;inset:-5px;border-radius:4px;border:2px solid var(--amb);animation:pulse 1.2s infinite;pointer-events:none;}
.tok.player.toks::after{border-radius:50%;}

/* ── MOBILE BOTTOM ── */
#mobu{flex-shrink:0;}
#mobsq{display:flex;overflow-x:auto;border-bottom:1px solid var(--brd2);scrollbar-width:none;}
#mobsq::-webkit-scrollbar{display:none;}
.muc{flex-shrink:0;padding:6px 10px;border-right:1px solid var(--brd);cursor:pointer;min-width:70px;text-align:center;}
.muc:active{background:var(--bg2);}
.muc.sel{border-bottom:2px solid var(--pip);}
.muc.dead{opacity:.22;pointer-events:none;}
.mucn{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;line-height:1;}
.much{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:9px;color:var(--txt3);}
.muchb{flex:1;height:3px;background:var(--bg);border-radius:2px;overflow:hidden;}
.muchf{height:100%;border-radius:2px;}
.mucap{display:flex;gap:2px;justify-content:center;margin-top:2px;}
#mobi{display:flex;max-height:148px;}
#mobinf{flex:1;padding:7px 9px;overflow-y:auto;border-right:1px solid var(--brd);}
.min{font-family:'Oswald',sans-serif;font-size:17px;font-weight:700;line-height:1;}
.mir{font-size:8px;color:var(--txt3);letter-spacing:2px;margin-bottom:5px;}
.mrow{display:flex;justify-content:space-between;font-size:9px;padding:2px 0;border-bottom:1px solid var(--brd);}
.ml{color:var(--txt3);}
#mobact{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
#moblog{height:40px;overflow-y:auto;padding:3px 8px;border-top:1px solid var(--brd);}

/* ── TOOLTIP ── */
#tip{position:fixed;bottom:0;left:0;right:0;font-size:10px;color:var(--txt2);background:rgba(10,12,18,.97);border-top:1px solid var(--brd2);padding:4px 10px;pointer-events:none;z-index:50;min-height:21px;text-align:center;}

/* ── BATTLE SCREEN ── */
#s-battle{background:var(--bg);z-index:80;}
#bscene{flex:1;position:relative;overflow:hidden;min-height:0;
  background:linear-gradient(180deg,#06080e 0%,#0a0c16 30%,#0e1420 60%,#141c2e 100%);}
/* Heist floor perspective lines */
#bscene::before{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background-image:linear-gradient(rgba(30,37,53,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(30,37,53,.4) 1px,transparent 1px);
  background-size:32px 32px;}
#bscene::after{content:'';position:absolute;bottom:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,transparent,rgba(10,16,28,.9));}
#beim{position:absolute;left:3%;top:5%;z-index:3;background:rgba(10,14,22,.92);border:2px solid var(--brd2);padding:8px 14px;min-width:155px;}
.bin{font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--txt);}
.bil{font-size:9px;color:var(--txt3);letter-spacing:2px;margin-bottom:6px;}
.bih{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--txt3);}
.bihb{flex:1;height:5px;background:#000;border-radius:3px;overflow:hidden;}
.bihf{height:100%;border-radius:3px;transition:width .5s;}
.bid{margin-top:4px;font-size:9px;color:var(--amb);}
.bia{font-size:9px;margin-top:2px;}
#besp{position:absolute;right:6%;top:5%;z-index:3;width:clamp(80px,18vw,130px);height:clamp(80px,18vw,130px);image-rendering:pixelated;image-rendering:crisp-edges;transition:filter .4s,transform .4s;}
#bpim{position:absolute;right:3%;bottom:28%;z-index:3;background:rgba(10,14,22,.92);border:2px solid var(--brd2);padding:8px 14px;min-width:155px;}
#bpsp{position:absolute;left:6%;bottom:27%;z-index:3;width:clamp(70px,15vw,110px);height:clamp(70px,15vw,110px);image-rendering:pixelated;image-rendering:crisp-edges;transition:filter .4s,transform .4s;}
@keyframes shke{0%,100%{transform:scaleX(-1) translateX(0);}25%,75%{transform:scaleX(-1) translateX(-8px);}50%{transform:scaleX(-1) translateX(8px);}}
@keyframes shkp{0%,100%{transform:translateX(0);}25%,75%{transform:translateX(8px);}50%{transform:translateX(-8px);}}
.shke{animation:shke .4s ease !important;}
.shkp{animation:shkp .4s ease !important;}
#bbot{flex-shrink:0;background:var(--bg1);border-top:3px solid var(--brd2);display:flex;flex-direction:column;max-height:52%;}
#brangebar{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;border-bottom:1px solid var(--brd);font-size:10px;flex-shrink:0;}
.rbl{color:var(--txt3);letter-spacing:2px;}
.rbd{font-family:'Oswald',sans-serif;font-size:13px;color:var(--amb);}
.rbaw{display:flex;align-items:center;gap:7px;}
.rbb{width:90px;height:6px;background:#000;border-radius:3px;overflow:hidden;}
.rbf{height:100%;border-radius:3px;transition:width .5s,background .5s;}
#btxt{padding:12px 16px;min-height:62px;border-bottom:2px solid var(--brd);font-size:clamp(13px,2.8vw,16px);color:var(--txt);line-height:1.65;position:relative;flex-shrink:0;}
#btxt::before{content:'';position:absolute;right:12px;bottom:8px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--amb);animation:blnk .55s infinite;}
@keyframes blnk{0%,49%{opacity:1;}50%,100%{opacity:0;}}
#btxt.na::before{display:none;}
#bacts{display:flex;flex-wrap:wrap;gap:0;flex-shrink:0;}
.ba{font-family:'Oswald',sans-serif;font-size:clamp(14px,3.2vw,16px);font-weight:500;letter-spacing:2px;padding:11px 14px;background:transparent;border:1px solid var(--brd2);color:var(--txt);cursor:pointer;flex:1;min-width:110px;-webkit-appearance:none;border-radius:0;display:flex;flex-direction:column;gap:2px;}
.ba:active:not(:disabled){background:var(--bg2);color:var(--amb);}
.ba:disabled{color:var(--txt3);pointer-events:none;}
.ba-top{display:flex;justify-content:space-between;align-items:center;}
.ba-sub{font-size:8px;color:var(--amb);letter-spacing:1px;}
.baap{font-size:9px;color:var(--pip);}
.baap.dim{color:var(--txt3);}

/* ── BRIEFING ── */
#s-brief{align-items:center;justify-content:center;background:rgba(10,12,18,.97);z-index:75;}
.brief-box{width:min(440px,90vw);padding:24px;}
.brief-mission{font-size:10px;color:var(--txt3);letter-spacing:4px;margin-bottom:6px;font-family:'Oswald',sans-serif;}
.brief-title{font-family:'Black Ops One',cursive;font-size:clamp(22px,6vw,36px);color:var(--txt);margin-bottom:4px;}
.brief-sub{font-size:9px;color:var(--amb);letter-spacing:3px;margin-bottom:12px;font-family:'Oswald',sans-serif;}
.brief-desc{font-size:12px;color:var(--txt2);line-height:1.7;margin-bottom:14px;border-left:2px solid var(--brd2);padding-left:12px;}
.brief-obj{font-family:'Oswald',sans-serif;font-size:13px;color:var(--pip);letter-spacing:2px;margin-bottom:16px;padding:8px 12px;border:1px solid var(--pip3);background:rgba(48,238,112,.05);}
.brief-enemies-title{font-size:9px;color:var(--txt3);letter-spacing:3px;margin-bottom:8px;font-family:'Oswald',sans-serif;}
.brief-enemy{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--brd);font-size:11px;}
.be-name{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1px;}
.be-stat{font-size:9px;color:var(--txt3);}

/* ── SAVES ── */
#s-saves{align-items:center;justify-content:center;background:rgba(10,12,18,.97);}
.saves-box{width:min(480px,92vw);padding:24px;}
.saves-title{font-family:'Black Ops One',cursive;font-size:26px;color:var(--txt);margin-bottom:6px;}
.saves-sub{font-size:10px;color:var(--txt3);letter-spacing:3px;margin-bottom:18px;font-family:'Oswald',sans-serif;}
.save-slot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--brd2);margin-bottom:8px;background:var(--bg1);cursor:pointer;}
.save-slot.empty{border-style:dashed;opacity:.5;cursor:default;}
.slot-info{flex:1;}
.slot-name{font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;color:var(--txt);}
.slot-detail{font-size:9px;color:var(--txt3);letter-spacing:2px;margin-top:3px;}
.slot-btns{display:flex;gap:6px;}
.slot-btn{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;padding:5px 12px;background:transparent;border:1px solid;cursor:pointer;-webkit-appearance:none;border-radius:0;}
.slot-btn.load{border-color:var(--pip);color:var(--pip);}
.slot-btn.load:active{background:var(--pip);color:var(--bg);}
.slot-btn.del{border-color:var(--rust);color:var(--rust);}
.slot-btn.del:active{background:var(--rust);color:#fff;}

/* ── RESULTS ── */
#s-win,#s-lose{align-items:center;justify-content:center;background:rgba(10,12,18,.97);z-index:100;}
.rw{text-align:center;padding:20px;width:min(420px,90vw);}
.re{font-size:11px;letter-spacing:5px;color:var(--txt3);margin-bottom:8px;font-family:'Oswald',sans-serif;}
.rt{font-family:'Black Ops One',cursive;font-size:clamp(48px,13vw,84px);color:var(--pip);letter-spacing:2px;margin-bottom:20px;text-shadow:0 0 30px rgba(48,238,112,.4);}
.rt.lose{color:var(--rust);text-shadow:0 0 30px rgba(224,48,48,.4);}
.rs{font-size:11px;color:var(--txt3);letter-spacing:2px;line-height:2.2;margin-bottom:28px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px;}
.stat-card{background:var(--bg1);border:1px solid var(--brd);padding:10px;text-align:center;}
.stat-val{font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;color:var(--amb);}
.stat-lbl{font-size:8px;color:var(--txt3);letter-spacing:2px;margin-top:2px;font-family:'Oswald',sans-serif;}

/* ── DIALOGUE ── */
#dialogue-box{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(10,14,22,.97);border-top:3px solid var(--brd2);padding:14px 16px 16px;display:none;animation:dlg-in .25s ease;}
#dialogue-box.on{display:block;}
@keyframes dlg-in{from{transform:translateY(100%);}to{transform:none;}}
.dlg-inner{display:flex;gap:14px;align-items:flex-start;}
#dlg-portrait{font-size:clamp(32px,7vw,48px);flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:2px solid var(--brd2);background:var(--bg1);}
.dlg-text-area{flex:1;min-width:0;}
#dlg-name{font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;color:var(--amb);margin-bottom:5px;}
#dlg-text{font-size:clamp(12px,2.8vw,15px);color:var(--txt);line-height:1.6;min-height:3em;}
.dlg-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
#dlg-progress{font-size:9px;color:var(--txt3);letter-spacing:2px;}
.dlg-hint{font-size:9px;color:var(--txt3);letter-spacing:2px;}
#dlg-skip{font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;padding:4px 12px;background:transparent;border:1px solid var(--txt3);color:var(--txt3);cursor:pointer;-webkit-appearance:none;border-radius:0;}
#dlg-skip:active{background:var(--txt3);color:var(--bg);}

/* ── FLOATERS ── */
.df{position:fixed;pointer-events:none;z-index:200;font-family:'Black Ops One',cursive;font-size:20px;text-shadow:1px 1px 0 rgba(0,0,0,.9);animation:dfp .9s ease forwards;}
@keyframes dfp{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-40px) scale(1.3);}}
::-webkit-scrollbar{width:3px;height:3px;}::-webkit-scrollbar-thumb{background:var(--brd2);}

/* ── ACTION POPUP ─────────────────────────────────────────── */
#action-popup {
  position:fixed;   /* always fixed to viewport — works on mobile regardless of scroll */
  z-index:500;      /* above everything including HUD */
  display:none;
  flex-direction:column;
  background:rgba(10,14,22,.99);
  border:2px solid var(--brd2);
  width:240px;
  border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,.9), 0 0 0 1px rgba(56,200,240,.18);
  animation:popup-in .14s ease;
  /* Prevent popup from being clipped by any parent overflow */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
@keyframes popup-in{from{opacity:0;transform:scale(.94) translateY(4px);}to{opacity:1;transform:none;}}
.popup-hdr {
  padding:12px 14px 8px;
  border-bottom:1px solid var(--brd2);
}
.popup-name {
  font-family:'Oswald',sans-serif; font-size:18px; font-weight:700; display:block; line-height:1;
}
.popup-sub { font-size:10px; color:var(--txt3); letter-spacing:2px; margin-top:2px; display:block; }
.popup-vitals {
  display:flex; align-items:center; gap:8px; margin-top:8px; font-size:11px;
}
.popup-ap { display:flex; gap:3px; }
.popup-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:1px;
}
.popup-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:10px 8px;
  background:transparent; border:none; border-radius:0;
  color:var(--txt); cursor:pointer; transition:.1s;
  font-family:'Share Tech Mono',monospace;
  min-height:66px;
}
.popup-btn:active:not(.disabled) { background:var(--bg2); color:var(--amb); }
.popup-btn.disabled { color:var(--txt3); pointer-events:none; opacity:.5; }
.popup-btn.plan-on { background:rgba(240,176,32,.1); color:var(--amb); }
.popup-btn.fb-btn { color:#ffcc00; }
.popup-btn.fb-btn:active { background:rgba(255,200,0,.1); }
.pbi { font-size:22px; line-height:1; }
.pbn { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:2px; }
.pbap { font-size:9px; color:var(--pip); letter-spacing:1px; }
.pbap.dim { color:var(--txt3); }
.popup-x {
  position:absolute; top:6px; right:8px;
  background:transparent; border:none; color:var(--txt3); font-size:16px; cursor:pointer; padding:2px 6px;
  font-family:'Share Tech Mono',monospace; line-height:1;
}
.popup-x:active { color:var(--rust); }

/* ── PLANNING MODE ─────────────────────────────────────────── */
.plan-ghost {
  position:absolute; inset:4px;
  border:2px dashed;
  border-radius:3px;
  opacity:.5;
  pointer-events:none;
  background:rgba(240,176,32,.08);
}

/* ── FLASHBANG COUNT ──────────────────────────────────────── */
#fb-count {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
  color:#ffcc00; letter-spacing:1px;
}

/* ── TOK FLOATER (animation) ──────────────────────────────── */
.tok-floater {
  border-radius:50%;
}
.tok-floater.enemy { border-radius:3px; }

/* ── OVERWATCH ────────────────────────────────────────────── */
@keyframes ow-pulse{0%{box-shadow:0 0 0 0 rgba(56,200,240,.8);}70%{box-shadow:0 0 0 8px rgba(56,200,240,0);}100%{box-shadow:0 0 0 0 rgba(56,200,240,0);}}
.tok.overwatch-active{animation:ow-pulse 1.4s infinite;}

/* ── FLANKING HIGHLIGHT ───────────────────────────────────── */
.tile.hl-flank::before{content:'⚔';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:.7;pointer-events:none;z-index:1;background:rgba(48,238,112,.1);}

/* ── REINFORCEMENT FLASH ──────────────────────────────────── */
@keyframes rein-flash{0%,100%{background:transparent;}50%{background:rgba(224,48,48,.25);}}
.tile.rein-spawn{animation:rein-flash .4s ease 3;}

/* ── COVER BADGE ──────────────────────────────────────────── */
.cover-badge{position:absolute;bottom:1px;left:2px;font-size:7px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:1px;padding:1px 3px;border-radius:2px;pointer-events:none;z-index:2;}
.cvr-light{background:rgba(56,200,240,.85);color:#000;}
.cvr-med{background:rgba(240,176,32,.85);color:#000;}
.cvr-heavy{background:rgba(48,238,112,.85);color:#000;}

/* ── STAT LOG colors ──────────────────────────────────────── */
.lc{color:#ffcc00;}   /* crit / special */

/* ════════════════════════════════════════════════════════════
   HQ SCREEN — RPG LAYER
   ════════════════════════════════════════════════════════════ */

#s-hq { justify-content:flex-start; background:var(--bg); }

#hq-topbar {
  display:flex; align-items:center; gap:10px; padding:0 16px;
  height:48px; flex-shrink:0;
  background:var(--bg1); border-bottom:2px solid var(--brd2);
}
.hq-logo {
  font-family:'Oswald',sans-serif; font-size:16px; font-weight:700;
  letter-spacing:2px; color:var(--amb); flex:1;
}
.tb-sm {
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:2px; padding:5px 12px;
  background:transparent; border:1px solid var(--brd2); color:var(--txt2);
  cursor:pointer;
}
.tb-sm:hover { border-color:var(--brd3); color:var(--txt); }
.tb-sm.danger { border-color:#602020; color:var(--rust); }

#hq-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ── NAV TABS ── */
.hq-nav {
  display:flex; align-items:center; gap:0;
  background:var(--bg2); border-bottom:2px solid var(--brd2);
  padding:0 16px; flex-shrink:0; height:46px;
}
.hq-tab {
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:2px; padding:0 18px; height:46px;
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--txt3); cursor:pointer; margin-bottom:-2px;
}
.hq-tab:hover { color:var(--txt2); }
.hq-tab.active { color:var(--amb); border-bottom-color:var(--amb); }
.hq-nav-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.hq-cash {
  font-family:'Oswald',sans-serif; font-size:18px; font-weight:700;
  color:var(--amb); letter-spacing:1px;
}
.hq-go-btn {
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:2px; padding:8px 20px;
  background:rgba(48,238,112,.1); border:2px solid var(--pip2);
  color:var(--pip); cursor:pointer;
}
.hq-go-btn:hover { background:rgba(48,238,112,.18); }
.hq-go-btn:active { background:rgba(48,238,112,.28); }

#hq-content { flex:1; overflow:auto; padding:16px; }
#hq-content::-webkit-scrollbar { width:4px; }
#hq-content::-webkit-scrollbar-thumb { background:var(--brd2); }

/* ── CREW CARDS ── */
.hq-crew-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px; margin-bottom:16px;
}
.crew-card {
  background:var(--bg1); border:1px solid var(--brd2);
  padding:12px; cursor:pointer; transition:.12s;
}
.crew-card:hover { border-color:var(--brd3); background:var(--bg2); }
.crew-card.selected { border-color:var(--amb); background:rgba(240,176,32,.05); }
.cc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.cc-name { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; }
.cc-level {
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:700;
  color:var(--pip); background:rgba(48,238,112,.12); padding:2px 7px;
}
.cc-class { font-size:10px; color:var(--txt3); letter-spacing:2px; margin-bottom:7px; font-family:'Oswald',sans-serif; }
.cc-xp { display:flex; align-items:center; gap:7px; margin-bottom:7px; font-size:9px; color:var(--txt3); }
.xp-bar { flex:1; height:4px; background:var(--bg); border-radius:2px; overflow:hidden; }
.xp-fill { height:100%; background:var(--cyan); border-radius:2px; transition:width .4s; }
.cc-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:3px; font-size:10px; margin-bottom:8px;
}
.cc-stats span {
  background:var(--bg2); padding:3px 5px; text-align:center;
  font-family:'Oswald',sans-serif; font-size:11px; color:var(--txt2);
}
.cc-gear { display:flex; gap:6px; font-size:20px; margin-bottom:7px; }
.gear-empty { opacity:.25; }
.cc-skills { display:flex; flex-wrap:wrap; gap:3px; }
.skill-tag {
  font-size:8px; font-family:'Oswald',sans-serif; letter-spacing:1px;
  padding:2px 5px; background:var(--bg3); color:var(--txt3); border:1px solid var(--brd);
}

/* ── LOADOUT ── */
.hq-loadout {
  background:var(--bg1); border:1px solid var(--brd2); padding:14px;
}
.hq-loadout-empty { font-size:12px; color:var(--txt3); text-align:center; padding:20px; letter-spacing:2px; font-family:'Oswald',sans-serif; }
.loadout-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--brd);
}
.loadout-lvl {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  color:var(--pip); background:rgba(48,238,112,.1); padding:3px 10px;
}
.loadout-slots { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.gear-slot {
  flex:1; min-width:160px; padding:10px;
  background:var(--bg2); border:1px solid var(--brd);
  cursor:pointer; transition:.12s;
}
.gear-slot:hover { border-color:var(--brd2); }
.gear-slot.active { border-color:var(--amb); background:rgba(240,176,32,.05); }
.gs-label { font-size:9px; color:var(--txt3); letter-spacing:3px; margin-bottom:6px; font-family:'Oswald',sans-serif; }
.gs-item {
  display:flex; align-items:center; gap:8px; min-height:44px;
}
.gs-item.empty { justify-content:center; gap:10px; }
.gs-icon { font-size:24px; flex-shrink:0; }
.gs-info { flex:1; min-width:0; }
.gs-name { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; }
.gs-desc { font-size:9px; color:var(--txt3); margin-top:2px; }
.gs-remove {
  background:transparent; border:none; color:var(--txt3);
  cursor:pointer; font-size:16px; padding:2px 4px; flex-shrink:0;
}
.gs-remove:hover { color:var(--rust); }

/* ── INVENTORY LIST ── */
.inv-title { font-size:10px; color:var(--txt3); letter-spacing:3px; margin-bottom:8px; font-family:'Oswald',sans-serif; }
.inv-list { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow-y:auto; }
.inv-list::-webkit-scrollbar { width:3px; }
.inv-list::-webkit-scrollbar-thumb { background:var(--brd2); }
.inv-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--bg2); border:1px solid var(--brd); transition:.1s;
}
.inv-item:hover { border-color:var(--brd2); }
.inv-item.equipped { border-color:var(--pip2); background:rgba(48,238,112,.05); }
.inv-item.cant-afford { opacity:.5; }
.inv-icon { font-size:20px; flex-shrink:0; }
.inv-info { flex:1; min-width:0; }
.inv-name { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.rarity-badge { font-size:8px; padding:1px 5px; border-radius:2px; font-weight:400; }
.inv-desc { font-size:10px; color:var(--txt2); margin-top:2px; }
.inv-stats { font-size:9px; color:var(--pip); margin-top:2px; font-family:'Oswald',sans-serif; }
.inv-action { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.inv-cost { font-family:'Oswald',sans-serif; font-size:14px; font-weight:700; color:var(--amb); }
.inv-cost.cant { color:var(--rust); }
.inv-btn {
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:1px;
  padding:5px 12px; background:transparent; cursor:pointer;
}
.inv-btn.buy   { border:1px solid var(--amb); color:var(--amb); }
.inv-btn.buy:hover { background:rgba(240,176,32,.12); }
.inv-btn.equip { border:1px solid var(--pip2); color:var(--pip); }
.inv-btn.equip:hover { background:rgba(48,238,112,.12); }
.equipped-badge {
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:2px;
  color:var(--pip); padding:3px 8px; border:1px solid var(--pip2);
  background:rgba(48,238,112,.08);
}

/* ── SHOP ── */
.shop-hdr { margin-bottom:16px; }
.shop-title { font-family:'Black Ops One',cursive; font-size:28px; color:var(--txt); }
.shop-sub { font-size:11px; color:var(--txt3); letter-spacing:2px; margin-top:4px; font-family:'Oswald',sans-serif; }
.shop-sections { display:flex; flex-direction:column; gap:20px; }
.shop-section-title {
  font-size:10px; color:var(--txt3); letter-spacing:3px; margin-bottom:10px;
  font-family:'Oswald',sans-serif; padding-bottom:6px; border-bottom:1px solid var(--brd);
}
.shop-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:8px;
}
.shop-card {
  background:var(--bg1); border:1px solid var(--brd2); padding:12px;
  display:flex; flex-direction:column; gap:4px;
  transition:.12s;
}
.shop-card:hover { border-color:var(--brd3); }
.shop-card.cant-afford { opacity:.55; }
.sc-icon { font-size:28px; }
.sc-rarity { font-size:9px; font-family:'Oswald',sans-serif; letter-spacing:2px; }
.sc-name { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:var(--txt); }
.sc-desc { font-size:10px; color:var(--txt2); line-height:1.5; }
.sc-stats { font-size:9px; color:var(--pip); font-family:'Oswald',sans-serif; }
.sc-skills { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; }
.sc-footer { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid var(--brd); }
.sc-cost { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:var(--amb); }
.sc-cost.cant { color:var(--rust); }
.shop-unit-btns { display:flex; flex-wrap:wrap; gap:6px; }
.shop-unit-btn {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:1px; padding:7px 14px;
  background:var(--bg2); border:1px solid var(--brd); color:var(--txt2); cursor:pointer;
}
.shop-unit-btn.active { background:rgba(240,176,32,.08); color:var(--txt); }

/* ── LEVEL UP FLASH ── */
@keyframes levelup-glow {
  0%,100% { box-shadow:none; }
  50%      { box-shadow:0 0 30px rgba(240,176,32,.6); }
}
.levelup-flash { animation:levelup-glow .8s ease 2; }

/* ── RESPONSIVE ── */
@media(max-width:700px){
  .hq-crew-grid { grid-template-columns:1fr 1fr; }
  .loadout-slots { flex-direction:column; }
  .shop-grid { grid-template-columns:1fr 1fr; }
  .hq-go-btn { font-size:12px; padding:6px 12px; }
  .hq-cash { font-size:15px; }
}
@media(max-width:480px){
  .hq-crew-grid { grid-template-columns:1fr; }
  .shop-grid { grid-template-columns:1fr; }
}