/* Layout: full-bleed 3D view, tactical HUD pinned to the corners, compass strip on top, briefing card on the left over a live fly-over */
:root{
  --bg:#07090b; --ink:#eef1f2; --dim:#9aa3a8; --accent:#f2c14e; --enemy:#e8452f; --ally:#5fb4ff; --armor:#6cb8ea; --hp:#e9edef;
  --line:rgba(255,255,255,.18);
  --display:'Teko', 'Arial Narrow', Impact, sans-serif;
  --body:'Chakra Petch', 'Segoe UI', Arial, sans-serif;
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body);user-select:none;-webkit-user-select:none;touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#compass{position:absolute;top:calc(10px + var(--st));left:50%;transform:translateX(-50%);width:min(420px,60vw);height:30px}
#map{position:absolute;top:calc(12px + var(--st));left:calc(12px + var(--sl));width:170px;height:170px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.4)}
#squad{position:absolute;top:calc(190px + var(--st));left:calc(12px + var(--sl));width:170px;display:flex;flex-direction:column;gap:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
#squad div{display:flex;align-items:center;gap:8px;color:var(--ally)}
#squad div.down{color:var(--dim);text-decoration:line-through}
#squad span{flex:1;height:4px;background:rgba(255,255,255,.15);position:relative}
#squad span i{position:absolute;inset:0 auto 0 0;background:var(--ally)}
#score{position:absolute;top:calc(12px + var(--st));right:calc(14px + var(--sr));text-align:right;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
#wave{font-family:var(--display);font-size:30px;line-height:.9;color:var(--accent);letter-spacing:.04em}
#stats{font-size:14px}
#storm{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#storm.out{color:#c7a6ff}
#feed{position:absolute;left:calc(14px + var(--sl));bottom:calc(112px + var(--sb));display:flex;flex-direction:column-reverse;gap:3px;font-size:14px}
#feed div{animation:fade 4.2s forwards;white-space:nowrap}
#feed b{color:var(--accent);font-weight:600} #feed .e{color:var(--enemy)} #feed .a{color:var(--ally)} #feed .hs{color:var(--enemy);font-weight:600;letter-spacing:.06em}
@keyframes fade{0%,82%{opacity:1}100%{opacity:0}}
#cross{position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .12s}
#cross i{position:absolute;background:rgba(255,255,255,.92);box-shadow:0 0 1px #000}
#cross .v{width:2px;height:8px;left:-1px} #cross .h{height:2px;width:8px;top:-1px}
#cross .dot{width:2px;height:2px;left:-1px;top:-1px}
#hit{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0}
#hit::before,#hit::after{content:"";position:absolute;left:11px;top:-3px;width:2px;height:30px;background:linear-gradient(#fff 0 32%,transparent 32% 68%,#fff 68%);transform:rotate(45deg)}
#hit::after{transform:rotate(-45deg)}
#hit.kill::before,#hit.kill::after{background:linear-gradient(var(--enemy) 0 32%,transparent 32% 68%,var(--enemy) 68%)}
#popup{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);font-family:var(--display);font-size:24px;color:var(--accent);opacity:0;transition:opacity .2s;white-space:nowrap}
#gwarn{position:absolute;left:50%;top:50%;width:0;height:0}
#gwarn div{position:absolute;left:-22px;top:-150px;width:44px;height:44px;transform-origin:22px 150px;display:grid;place-items:center}
#gwarn svg{width:30px;height:30px;animation:pulse .5s infinite alternate}
@keyframes pulse{to{opacity:.35}}
#scope{position:absolute;inset:0}
#scope svg{position:absolute;inset:0;width:100%;height:100%}
#vitals{position:absolute;left:calc(14px + var(--sl));bottom:calc(16px + var(--sb));width:min(260px,40vw);display:flex;flex-direction:column;gap:5px}
#plates{display:flex;gap:4px}
#plates span{flex:1;height:7px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;transform:skewX(-20deg)}
#plates span i{position:absolute;inset:0 auto 0 0;background:var(--armor)}
#hpBar{height:9px;background:rgba(255,255,255,.12);position:relative;transform:skewX(-20deg)}
#hpBar i{position:absolute;inset:0 auto 0 0;background:var(--hp);transition:width .15s}
#stamBar{height:3px;background:rgba(255,255,255,.08);position:relative;transition:opacity .4s}
#stamBar i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
#stance{font-size:12px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
#weapon{position:absolute;right:calc(16px + var(--sr));bottom:calc(14px + var(--sb));text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end;font-variant-numeric:tabular-nums}
#ammo{font-family:var(--display);font-size:56px;line-height:.85}
#ammo small{font-size:26px;color:var(--dim)}
#ammo.low{color:var(--enemy)}
#wname{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#slots{display:flex;gap:10px;font-size:12px;letter-spacing:.1em;color:var(--dim)}
#slots span.on{color:var(--accent)}
#gear{font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase} #gear b{color:var(--ink)}
#reload{position:absolute;left:50%;top:calc(50% + 60px);transform:translateX(-50%);font-size:13px;letter-spacing:.3em}
#banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;font-family:var(--display);font-size:clamp(40px,8vw,76px);line-height:.9;letter-spacing:.04em;opacity:0;transition:opacity .5s;white-space:nowrap}
#banner small{display:block;font-family:var(--body);font-size:15px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}
#banner.show{opacity:1}
#subs{position:absolute;left:50%;bottom:calc(120px + var(--sb));transform:translateX(-50%);font-size:15px;max-width:80vw;text-align:center;white-space:nowrap;opacity:0;transition:opacity .25s}
#subs b{font-weight:600}
#dmgdir{position:absolute;left:50%;top:50%;width:0;height:0}
#dmgdir div{position:absolute;left:-70px;top:-170px;width:140px;height:40px;border-radius:50% 50% 0 0;border-top:5px solid rgba(232,69,47,.9);transform-origin:70px 170px;animation:fade 1.2s forwards;filter:blur(1px)}
.overlay{position:fixed;inset:0;display:flex;align-items:flex-start;background:linear-gradient(90deg,rgba(5,7,9,.92) 0%,rgba(5,7,9,.7) 45%,rgba(5,7,9,.1) 100%);padding-left:max(16px,calc(6vw + var(--sl)));padding-right:max(16px,var(--sr));z-index:5;overflow:auto}
.card{max-width:560px;width:100%;padding-block:28px;margin-block:auto;display:flex;flex-direction:column;gap:16px}
.eyebrow{font-size:12px;letter-spacing:.32em;color:var(--accent);text-transform:uppercase}
.card h1{font-family:var(--display);font-weight:500;font-size:clamp(64px,13vw,120px);line-height:.78;margin:0;letter-spacing:.01em;text-wrap:balance}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--dim);max-width:54ch}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px 18px;font-size:13px;color:var(--dim)}
.keys div{display:flex;gap:6px;align-items:center}
kbd{font-family:var(--body);font-size:11px;font-weight:600;border:1px solid #3a444c;border-bottom-width:2px;border-radius:3px;padding:1px 6px;color:var(--ink);background:#12171b}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.06em;background:var(--accent);color:#1a1405;border:0;border-radius:2px;padding:10px 34px 6px;cursor:pointer;pointer-events:auto}
.btn:disabled{opacity:.4;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #56626c}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.linkbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mis.locked{opacity:.45;cursor:not-allowed}
.btn.small{font-size:20px;padding:7px 16px 4px}
.coopstatus{font-size:13px;color:var(--dim);flex:1;min-width:180px}
#coopLink{flex:1;min-width:0;font:inherit;font-size:13px;background:rgba(255,255,255,.05);border:1px solid #3a444c;color:var(--ink);padding:8px 10px;border-radius:2px}

.card-in{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid #3a444c;border-radius:2px;background:rgba(255,255,255,.03)}
.card-in b{font-family:var(--display);font-size:24px;font-weight:500;line-height:1}
.card-in p{margin:0;font-size:14px;line-height:1.45;opacity:.9}
#challengeCard{border-color:var(--accent);background:rgba(242,193,78,.07)}
#dailyStreak{color:var(--accent);margin-left:6px}
#shareBtn{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
#oDaily{text-transform:none;letter-spacing:.01em;font-size:14px;color:var(--accent)}
#coopList{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ally)}
#intro p{max-width:560px;line-height:1.55;opacity:.9}
#oStory{text-transform:none;letter-spacing:.01em;font-size:15px;line-height:1.45;max-width:520px;color:var(--ink);font-style:italic}
#subs{text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}
.btn:hover:not(:disabled){filter:brightness(1.1)} .btn:focus-visible,.seg button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.seg{display:inline-flex;border:1px solid #3a444c;border-radius:2px}
.seg button{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--dim);border:0;padding:8px 12px;cursor:pointer}
.seg button.on{background:#232b31;color:var(--ink)}
.label{font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;min-width:74px}
.stats{display:flex;gap:30px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--display);font-weight:500;font-size:48px;line-height:.9;font-variant-numeric:tabular-nums}
.stats span{text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--dim)}
.best{font-size:12px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase}
#touch{position:fixed;inset:0;pointer-events:none;z-index:3}
#joy{position:absolute;left:calc(24px + var(--sl));bottom:calc(120px + var(--sb));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);pointer-events:auto}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.3)}
.tb{position:absolute;pointer-events:auto;border-radius:50%;background:rgba(8,11,14,.45);border:1px solid rgba(255,255,255,.35);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.1em;display:grid;place-items:center}
#tFire{right:calc(24px + var(--sr));bottom:calc(150px + var(--sb));width:84px;height:84px;border-color:var(--accent);color:var(--accent)}
#tJump{right:calc(122px + var(--sr));bottom:calc(118px + var(--sb));width:56px;height:56px}
#tCrouch{right:calc(190px + var(--sr));bottom:calc(96px + var(--sb));width:52px;height:52px}
#tAds{right:calc(32px + var(--sr));bottom:calc(250px + var(--sb));width:56px;height:56px}
#tBuild{right:calc(122px + var(--sr));bottom:calc(186px + var(--sb));width:56px;height:56px}
#tGren{right:calc(190px + var(--sr));bottom:calc(220px + var(--sb));width:50px;height:50px}
#tReload{right:calc(192px + var(--sr));bottom:calc(160px + var(--sb));width:50px;height:50px}
#tSwap{right:calc(104px + var(--sr));bottom:calc(256px + var(--sb));width:50px;height:50px}
.mlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.mis{text-align:left;background:rgba(255,255,255,.035);border:1px solid #333d45;border-radius:2px;color:var(--ink);padding:8px 10px 6px;cursor:pointer;font-family:var(--body);display:flex;flex-direction:column;gap:1px}
.mis b{font-family:var(--display);font-size:21px;font-weight:500;line-height:1;letter-spacing:.02em}
.mis span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mis:hover{border-color:#56626c} .mis:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mis.on{border-color:var(--accent);background:rgba(242,193,78,.08)} .mis.on span{color:var(--accent)}
.mblock{display:flex;flex-direction:column;gap:8px}
#mBrief{font-size:14px;line-height:1.5;color:var(--ink);opacity:.85;min-height:3em}
#objPanel{position:absolute;top:calc(84px + var(--st));right:calc(14px + var(--sr));width:min(300px,46vw);text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
#objName{font-size:11px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
#objText{font-size:15px;line-height:1.3}
#objBar{width:170px;height:4px;background:rgba(255,255,255,.15);position:relative} #objBar i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
#objTimer{font-family:var(--display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
#objMark{position:absolute;left:0;top:0;width:0;height:0}
#objMark div{position:absolute;left:-40px;top:-12px;width:80px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase}
#objMark svg{width:20px;height:20px}
#prompt{position:absolute;left:50%;top:calc(50% + 74px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;letter-spacing:.06em;white-space:nowrap}
#promptBar{width:180px;height:4px;background:rgba(255,255,255,.2);position:relative} #promptBar i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
#tUse{left:calc(160px + var(--sl));bottom:calc(150px + var(--sb));width:56px;height:56px;border-color:var(--accent);color:var(--accent)}
#tKnife{right:calc(250px + var(--sr));bottom:calc(110px + var(--sb));width:50px;height:50px}
.ld{border:1px solid #333d45;border-radius:2px;background:rgba(255,255,255,.02)}
.ld summary{cursor:pointer;padding:10px 12px;font-size:13px;letter-spacing:.06em;list-style:none}
.ld summary::-webkit-details-marker{display:none}
.ld summary::before{content:'+ ';color:var(--accent)} .ld[open] summary::before{content:'- '}
.ld summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
#ldBody{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.ldrow{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ldrow .label{padding-top:7px}
.opts{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.opt{font-family:var(--body);font-size:12px;background:transparent;border:1px solid #3a444c;color:var(--ink);padding:5px 9px;border-radius:2px;cursor:pointer}
.opt.on{border-color:var(--accent);color:var(--accent);background:rgba(242,193,78,.08)}
.opt:disabled{opacity:.42;cursor:not-allowed} .opt small{font-size:10px;color:var(--dim);margin-left:4px}
.opt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rankline{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.rankline b{color:var(--ink);font-weight:600}
.xpbar{height:4px;background:rgba(255,255,255,.12);position:relative;max-width:360px} .xpbar i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.xp{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)} .xp b{color:var(--ink)} .xp .unl{color:var(--accent);letter-spacing:.04em}
#tTac{right:calc(250px + var(--sr));bottom:calc(172px + var(--sb));width:50px;height:50px}
#loading{font-size:12px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}

/* phone controls: one cluster per thumb, nothing over the HUD */
#touch{--cb:0px}
#tAds.on{background:rgba(242,193,78,.35);border-color:var(--accent);color:#fff}
#tUse,#tBuild{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){
  #map{width:100px;height:100px} #squad{top:calc(118px + var(--st));width:100px;font-size:10px;gap:2px}
  #wave{font-size:22px} #stats{font-size:12px} #ammo{font-size:38px}
  #subs{font-size:13px;white-space:normal;width:max-content;max-width:min(360px,46vw)}
  .tb{width:52px!important;height:52px!important;font-size:10px;letter-spacing:.06em}
  #tFire{width:80px!important;height:80px!important}
  #tCrouch{width:46px!important;height:46px!important}
  #joy{left:calc(28px + var(--sl));bottom:calc(var(--jb) + var(--sb));width:120px;height:120px}
  #tFire  {right:calc(24px + var(--sr)); bottom:calc(var(--cb) + 70px + var(--sb))}
  #tAds   {right:calc(38px + var(--sr)); bottom:calc(var(--cb) + 162px + var(--sb))}
  #tReload{right:calc(112px + var(--sr));bottom:calc(var(--cb) + 140px + var(--sb))}
  #tJump  {right:calc(118px + var(--sr));bottom:calc(var(--cb) + 72px + var(--sb))}
  #tCrouch{right:calc(41px + var(--sr)); bottom:calc(var(--cb) + 10px + var(--sb))}
  #tSwap  {right:calc(96px + var(--sr)); bottom:calc(var(--cb) + 212px + var(--sb))}
  #tGren  {right:calc(176px + var(--sr));bottom:calc(var(--cb) + 182px + var(--sb))}
  #tTac   {right:calc(190px + var(--sr));bottom:calc(var(--cb) + 116px + var(--sb))}
  #tKnife {right:calc(176px + var(--sr));bottom:calc(var(--cb) + 50px + var(--sb))}
  #tUse   {left:calc(162px + var(--sl)); bottom:calc(var(--jb) + 66px + var(--sb))}
  #tBuild {left:calc(162px + var(--sl)); bottom:calc(var(--jb) + 2px + var(--sb))}
}
@media (pointer:coarse) and (orientation:landscape){
  #touch{--cb:0px;--jb:92px}
  /* squad list sits beside the map, so short screens (an app's top bar takes height) keep it clear of the stick */
  #squad{top:calc(12px + var(--st));left:calc(122px + var(--sl))}
  /* the right thumb owns the right edge: objective and weapon move to the middle */
  #objPanel{top:calc(46px + var(--st));right:auto;left:50%;transform:translateX(-50%);align-items:center;text-align:center;width:min(300px,36vw)}
  #weapon{right:auto;left:50%;transform:translateX(-50%);bottom:calc(8px + var(--sb));align-items:center;text-align:center}
  #vitals{width:min(200px,26vw);bottom:calc(10px + var(--sb))}
  #subs{bottom:calc(104px + var(--sb))}
  #compass{width:min(300px,36vw)}
}
@media (pointer:coarse) and (orientation:portrait){
  #touch{--cb:104px;--jb:150px}
  #joy{left:calc(16px + var(--sl))}
  #tUse,#tBuild{left:calc(20px + var(--sl))} #tUse{bottom:calc(var(--jb) + 196px + var(--sb))} #tBuild{bottom:calc(var(--jb) + 134px + var(--sb))}
  #subs{bottom:auto;top:calc(31% + var(--st));max-width:86vw}
  body #compass{top:calc(158px + var(--st))}
}
@media (max-width:640px){ #map{width:110px;height:110px} #squad{top:calc(128px + var(--st));width:110px} #compass{top:calc(128px + var(--st));left:auto;right:calc(12px + var(--sr));transform:none;width:50vw} #ammo{font-size:42px} #wave{font-size:24px} }
@media (prefers-reduced-motion:reduce){ #feed div,#dmgdir div{animation-duration:.01s;animation-delay:3s} #gwarn svg{animation:none} }

/* controller highlight in menus */
.padfocus{outline:3px solid var(--accent)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(242,193,78,.25)}
#errBox{position:fixed;left:8px;right:8px;bottom:8px;z-index:9999;padding:10px 12px;background:#5b1410;color:#fff;font:13px/1.35 system-ui,sans-serif;border:1px solid #e8452f;border-radius:2px;white-space:pre-wrap}
.nogl{margin:12px 0 0;padding:10px 12px;border:1px solid var(--accent);color:var(--ink);font-size:14px;line-height:1.45;max-width:560px}
/* leaderboards */
.lbtabs{flex-wrap:wrap;background:rgba(7,9,11,.75)}
.lbnote{margin:0;font-size:13px;color:var(--dim);min-height:18px}
.lbrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto}
.lbrows li{display:grid;grid-template-columns:42px 1fr auto auto;gap:12px;align-items:baseline;padding:6px 8px;background:rgba(7,9,11,.6);font-size:14px}
.lbrows li.you{background:rgba(242,193,78,.14);color:var(--accent)}
.lbrows .r{font-family:var(--display);font-size:20px;color:var(--dim)}
.lbrows .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrows .v{font-family:var(--display);font-size:20px}
.lbrows .k{font-size:12px;color:var(--dim);min-width:64px;text-align:right}
.lbme input{flex:1;min-width:120px;max-width:220px;background:#11161a;border:1px solid #3a444c;color:var(--ink);padding:8px 10px;font:inherit;border-radius:2px}
@media (max-width:520px){.lbrows li{grid-template-columns:34px 1fr auto}.lbrows .k{display:none}}
@media (max-height:500px){#boards h1{font-size:44px;line-height:.85}#boards .card{gap:10px;padding-block:14px}}