/* ============================================================
   SasanicA Game :: hangar theme
   slate night sky, amber squadron vs teal squadron
   ============================================================ */
:root{
  --bg:#0b1220; --panel:#111b2e; --panel2:#0d1526; --line:#20304e;
  --ink:#e8eef9; --dim:#8ca0bc;
  --s1:#4f8dff; --s1b:#ffc65c;      /* side 1: amber */
  --s2:#ff5c55; --s2b:#7cf0df;      /* side 2: teal  */
  --red:#f0564a; --ok:#69d18b;
  --rad:12px;
  --font:'Chakra Petch',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.45;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
input,select,button{font-family:var(--font);font-size:1rem;color:var(--ink)}
input,select{font-size:max(1rem,16px)}
input,select{
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:.65rem .8rem;width:100%;outline:none;
}
input:focus,select:focus{border-color:var(--s1)}
em{color:var(--dim);font-style:normal;font-weight:400}
code{background:var(--panel2);padding:.1em .35em;border-radius:5px;font-size:.9em}
h2{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
   margin:0 0 .9rem;font-weight:600}
::placeholder{color:#54678a}

.view{position:fixed;inset:0;overflow:auto}
.stage{overflow:hidden}
[hidden]{display:none !important}

/* ---------- brand ---------- */
.brand{font-weight:700;font-size:2rem;letter-spacing:.22em}
.brand span{color:var(--s1);margin-left:.4em}
.brand.small{font-size:1rem;letter-spacing:.28em}
.tag{color:var(--dim);margin:.4rem 0 1.6rem}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  background:transparent;border:1px solid var(--line);border-radius:9px;
  padding:.55rem 1rem;cursor:pointer;letter-spacing:.06em;font-weight:600;
  transition:border-color .15s,background .15s,transform .05s;
  touch-action:manipulation;
}
.btn:hover{border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--s1b);outline-offset:2px}
.btn.primary{background:var(--s1);border-color:var(--s1);color:#131313}
.btn.primary:hover{background:var(--s1b);border-color:var(--s1b)}
.btn.ghost{border-color:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--ink)}
.btn.big{padding:.85rem 1.4rem;font-size:1.05rem;width:100%}
.btn.sm{padding:.32rem .7rem;font-size:.85rem}
.btn.icon{font-size:1.05rem;padding:.32rem .55rem}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn[disabled]{opacity:.45;cursor:default}

/* ---------- login ---------- */
#view-login{display:flex;flex-direction:column;align-items:center;
  overflow:auto;padding:max(.9rem, env(safe-area-inset-top)) .9rem
  max(1.1rem, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch}
/* the wordmark rides above the card as a quiet hero line; the
   margin-auto pair centers the stack when there is room and lets it
   scroll when the keyboard eats the height */
#view-login > .brand{margin:auto 0 .9rem;font-size:clamp(1rem,4.2vw,1.5rem);
  letter-spacing:.55em;text-indent:.55em;opacity:.55;text-align:center}
#view-login > .brand span{display:none}
.horizon{
  position:absolute;left:0;right:0;bottom:0;height:34vh;pointer-events:none;
  background:
    linear-gradient(to top,#0e1a2c 0,#0e1a2c 22%,transparent 60%),
    radial-gradient(120% 90% at 50% 115%, rgba(245,165,36,.14), transparent 60%);
  border-top:1px solid #1a2740;
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:1.4rem;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.login-card{width:min(400px,100%);box-sizing:border-box;position:relative;z-index:1;
  margin:0 0 auto;max-width:100%}
.login-card .tag{margin:.35rem 0 1rem}
.login-card .fld input{width:100%;box-sizing:border-box;height:46px}
#btn-login{width:100%}
@media (max-height:560px){
  .login-card{padding:.8rem .9rem}
  .login-card .brand{font-size:1.3rem}
  .login-card .tag{margin:.15rem 0 .5rem;font-size:.8rem}
}
.fld{display:block;margin:.7rem 0}
.fld span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.3rem}
.msg{min-height:1.3em;color:var(--red);font-size:.9rem;margin-top:.6rem}
.msg.ok{color:var(--ok)}
.setup-note{margin-top:1rem;font-size:.85rem;color:var(--s1b);
  border:1px dashed var(--s1);border-radius:8px;padding:.7rem}
#btn-login{margin-top:.8rem}

/* ---------- lobby ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.wrap{display:grid;grid-template-columns:340px 1fr;gap:1.2rem;
  padding:1.4rem;max-width:1080px;margin:0 auto}
@media (max-width:820px){.wrap{grid-template-columns:1fr}}
.cap{color:var(--dim);font-weight:400;letter-spacing:0;text-transform:none}
.rooms{display:flex;flex-direction:column;gap:.6rem;min-height:3rem}
.room{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .9rem;
}
.room .rname{font-weight:700;flex:1;min-width:8rem}
.room .rcode{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--s1b);
  letter-spacing:.2em}
.badge{font-size:.75rem;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:.1rem .55rem;white-space:nowrap}
.badge.play{color:var(--ok);border-color:var(--ok)}
.badge.lock{color:var(--s1b);border-color:var(--s1)}
.hint{color:var(--dim);font-size:.84rem;margin-top:1rem}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:.2rem .8rem;font-size:.82rem;letter-spacing:.12em}

/* ---------- battle screen ---------- */
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0b1220}
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:.6rem .9rem;z-index:5;
  padding-top:max(.6rem, env(safe-area-inset-top))}
.hud-left,.hud-right{display:flex;gap:.4rem;align-items:center;flex:1}
.hud-right{justify-content:flex-end}
.hud-mid{display:flex;align-items:baseline;gap:.55rem;font-weight:700;font-size:1.5rem}
.score.s1{color:var(--s1)} .score.s2{color:var(--s2)}
.score-x{color:var(--dim);font-size:1rem}

.overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;
  justify-content:center;background:rgba(7,11,20,.72);
  overflow:auto;padding:4.2rem 1rem 2rem}
.overlay.center{padding:0}

.roompanel{width:min(760px,94vw)}
.roomhead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.roomname{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.code-tiles{display:flex;gap:.3rem}
.code-tiles b{
  display:grid;place-items:center;width:2.1rem;height:2.7rem;border-radius:7px;
  background:linear-gradient(#16233c,#0d1526);border:1px solid var(--line);
  font-size:1.4rem;color:var(--s1b);
  box-shadow:inset 0 -1.35rem 0 rgba(0,0,0,.25);
}
.qrbox{text-align:center}
.qr{background:#fff;border-radius:10px;padding:8px;display:inline-block;line-height:0}
.qr svg{width:132px;height:132px;display:block}
.qrlabel{font-size:.74rem;color:var(--dim);margin-top:.4rem;max-width:150px}
.linkrow{display:flex;gap:.5rem;margin:.9rem 0;flex-wrap:wrap}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:640px){.sides{grid-template-columns:1fr}}
.sidecol{border:1px solid var(--line);border-radius:10px;padding:.8rem;background:var(--panel2)}
.sidecol.s1{border-top:3px solid var(--s1)}
.sidecol.s2{border-top:3px solid var(--s2)}
.sidetitle{font-size:.78rem;letter-spacing:.2em;color:var(--dim);margin-bottom:.5rem}
.roster{display:flex;flex-direction:column;gap:.3rem;min-height:2.2rem}
.pl{display:flex;align-items:center;gap:.5rem;font-size:.92rem}
.pl .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--dim);flex:none}
.pl.ready .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pl.off{opacity:.45}
.pl .ptype{color:var(--dim);font-size:.78rem;margin-left:auto}
.npcrow{display:flex;align-items:center;gap:.55rem;margin-top:.7rem;font-size:.85rem;color:var(--dim)}
.npcrow b{min-width:1.4rem;text-align:center;color:var(--ink);font-size:1rem}
.startrow{display:flex;gap:.7rem;align-items:center;justify-content:flex-end;
  margin-top:1.1rem;flex-wrap:wrap}
#btn-start{width:auto;min-width:12rem}
.kbform{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.8rem;
  border-top:1px dashed var(--line);padding-top:.8rem}
.kbform input{width:9rem}.kbform select{width:auto}
.kbform .hint{margin:0;width:100%}

.countnum{font-size:min(34vw,13rem);font-weight:700;color:var(--s1b);
  text-shadow:0 0 60px rgba(245,165,36,.35);line-height:1}
.waittxt{color:var(--dim);margin-top:.6rem;font-size:1.05rem}

.resultpanel{width:min(680px,94vw)}
.restitle{font-size:1.6rem;font-weight:700;letter-spacing:.06em;margin-bottom:.9rem}
.restitle.s1{color:var(--s1)} .restitle.s2{color:var(--s2)} .restitle.s3{color:var(--dim)}
.restable{width:100%;border-collapse:collapse;font-size:.92rem}
.restable th{color:var(--dim);font-weight:600;text-align:right;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;
  border-bottom:1px solid var(--line)}
.restable th:nth-child(2){text-align:left}
.restable td{padding:.38rem .5rem;text-align:right;border-bottom:1px solid #16223a}
.restable td:nth-child(2){text-align:left;font-weight:600}
.restable .sq{display:inline-block;width:.6rem;height:.6rem;border-radius:2px}
.restable tr.me td{background:rgba(245,165,36,.07)}

.kbhud{position:absolute;left:.9rem;bottom:.9rem;z-index:6;background:rgba(13,21,38,.8);
  border:1px solid var(--line);border-radius:10px;padding:.45rem .8rem;font-size:.85rem}
.connnote{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:9;
  background:var(--panel);border:1px solid var(--s1);border-radius:999px;
  padding:.4rem 1rem;font-size:.85rem}

/* ---------- controller ---------- */
.cpage{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;
  padding:max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right))
          max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left))}
.cpage.center{align-items:center;justify-content:center;text-align:center}
.cwrap{width:min(560px,100%);margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.sidepick{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.btn.side{padding:.9rem;font-size:1.05rem;letter-spacing:.12em}
.btn.side em{display:block;font-size:.72rem;letter-spacing:.05em;margin-top:.15rem}
.btn.side.s1.sel{background:var(--s1);border-color:var(--s1);color:#131313}
.btn.side.s2.sel{background:var(--s2);border-color:var(--s2);color:#0b1220}
.planestrip{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .1rem .6rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pcard{
  flex:0 0 138px;scroll-snap-align:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:.7rem;cursor:pointer;
}
.pcard.sel{border-color:var(--s1);box-shadow:0 0 0 1px var(--s1),0 8px 24px rgba(245,165,36,.15)}
.pcard .pimg{height:52px;display:grid;place-items:center;margin-bottom:.4rem}
.pcard .pimg canvas{image-rendering:auto}
.pcard .pname{font-weight:700;font-size:.95rem;margin-bottom:.45rem}
.stat{display:grid;grid-template-columns:2.4rem 1fr;gap:.4rem;align-items:center;
  font-size:.62rem;color:var(--dim);letter-spacing:.08em;margin:.16rem 0}
.stat i{height:.32rem;border-radius:99px;background:#22335a;position:relative;display:block}
.stat i b{position:absolute;inset:0;border-radius:99px;background:var(--s1)}
.pcard .bombs{font-size:.7rem;color:var(--dim);margin-top:.3rem}
#c-ready.armed{background:var(--ok);border-color:var(--ok)}
#c-leave1,#c-leave2{align-self:center;margin-top:.4rem}

/* flight deck */
.flight{padding:0;overflow:hidden}
.fl-top{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;z-index:2;
  padding-top:max(.55rem, env(safe-area-inset-top))}
.hpwrap{flex:1;height:.7rem;background:var(--panel2);border:1px solid var(--line);
  border-radius:99px;overflow:hidden;min-width:5rem}
.hpbar{height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--s1),var(--ok));
  transition:width .2s}
.fl-stats{font-size:.85rem;color:var(--dim);white-space:nowrap}
.fl-stats span{color:var(--ink);font-weight:700}
.fl-btns{display:flex;gap:.3rem}
.fl-main{flex:1;display:grid;grid-template-columns:1fr 170px;gap:.8rem;
  padding:.4rem .9rem max(1rem, env(safe-area-inset-bottom));min-height:0}
.fl-main.swap{grid-template-columns:170px 1fr}
.fl-main.swap .steer{order:2}.fl-main.swap .wcol{order:1}
@media (orientation:portrait){
  .fl-main{grid-template-columns:1fr !important;grid-template-rows:1fr 150px}
  .fl-main .wcol{order:2 !important;flex-direction:row}
  .fl-main .steer{order:1 !important}
  .wbtn.fire{height:100% !important}
}
.steer{position:relative;width:min(34%,300px);min-width:150px;height:120px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden}
.steer-track{position:absolute;left:14%;right:14%;height:4px;background:#22335a;border-radius:99px}
.steer-thumb{position:absolute;top:50%;left:50%;width:56px;height:56px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(245,165,36,.16);
  border:2px solid var(--s1);box-shadow:0 0 24px rgba(245,165,36,.25);
  transition:background .1s}
.steer-label{position:absolute;bottom:.3rem;letter-spacing:.3em;font-size:.6rem;color:var(--dim)}
.tiltind{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tiltbubble{width:52px;height:52px;border-radius:50%;border:2px dashed var(--s2);
  transform:translateX(0)}
.wcol{display:flex;flex-direction:column;gap:.8rem}
.wbtn{border-radius:18px;border:2px solid var(--line);background:var(--panel2);
  font-weight:700;letter-spacing:.18em;cursor:pointer;touch-action:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.wbtn.fire{flex:1;font-size:1.25rem;border-color:var(--s1);color:var(--s1b)}
.wbtn.fire.on{background:rgba(245,165,36,.25);box-shadow:0 0 30px rgba(245,165,36,.3) inset}
.wbtn.bomb{height:96px;border-color:var(--s2);color:var(--s2b);font-size:.9rem;flex:none}
.wbtn.bomb b{font-size:1.4rem}
.wbtn.bomb:active{background:rgba(45,212,191,.2)}
.wbtn[disabled]{opacity:.35}
.deadov{position:absolute;inset:0;z-index:5;background:rgba(7,11,20,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.deadtxt{font-size:2rem;font-weight:700;color:var(--red);letter-spacing:.2em}

/* toast */
#toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:99;
  display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none}
#toast div{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:toastin .2s ease-out}
#toast div.err{border-color:var(--red);color:#ffd7d3}
@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ============================================================
   v3 additions
   ============================================================ */
/* bigger team labels + sudden death */
.scorewrap{display:flex;align-items:baseline;gap:.5rem;justify-content:center}
.teamlbl{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.14em;font-size:1.05rem}
.teamlbl.s1{color:var(--s1)}.teamlbl.s2{color:var(--s2)}
.hud-mid .score{font-size:1.75rem}
.sdtag{margin-top:.1rem;text-align:center;font-weight:700;letter-spacing:.22em;font-size:.8rem;
  color:var(--danger);animation:sdpulse 1s infinite}
@keyframes sdpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* battle settings panel */
.setpanel{width:min(380px,94vw)}
.settitle{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.14em;margin-bottom:.6rem}
.fld select{display:block;width:100%;margin-top:.3rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;color:var(--txt)}
.checkline{display:flex;align-items:center;gap:.5rem;color:var(--dim);font-size:.9rem;margin:.6rem 0}
.checkline input{width:18px;height:18px}
#set-summary{font-size:.8rem;margin-top:.35rem}
.btn.danger{border-color:var(--danger);color:var(--danger)}

/* controller: color swatches, control mode, mini roster, voice */
.optline{display:flex;align-items:center;gap:.7rem;margin:.55rem 0}
.optlbl{color:var(--dim);font-size:.82rem;min-width:76px}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatch.sel{border-color:#fff;box-shadow:0 0 0 2px var(--line)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.segbtn{background:var(--panel2);border:none;padding:.5rem .85rem;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--dim)}
.segbtn.sel{background:var(--s2);color:#04211d;font-weight:700}
#c-rosterbox{display:flex;gap:.6rem;margin:.55rem 0}
.minroster{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.4rem .55rem}
.minroster h4{margin:0 0 .25rem;font-size:.72rem;letter-spacing:.12em}
.minroster h4.mr1{color:var(--s1)}.minroster h4.mr2{color:var(--s2)}
.mrline{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--dim);margin:2px 0}
.mrline .dotc{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.mrline .ok{margin-left:auto;color:#38d17c;font-weight:700}
.readyrow{display:flex;gap:.8rem;align-items:stretch;margin-top:.4rem}
.readyrow #c-ready{flex:1}
.voicebtn{font-size:1.35rem;border-radius:50%;width:58px;height:58px;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;border:1px solid var(--s2);background:var(--panel2)}
.voicebtn.rec{background:var(--danger);border-color:var(--danger);animation:recpulse .9s infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(240,86,74,.5)}50%{box-shadow:0 0 0 14px rgba(240,86,74,0)}}
#c-auto{color:var(--s2);min-height:1.1em;font-size:.85rem;margin-top:.35rem}

/* flight deck v3: left zone holds steer or tilt plus the big mic */
.fl-main{grid-template-columns:1fr minmax(200px,36%)}
#lz{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.7rem;min-width:0}
.fl-main.swap{grid-template-columns:minmax(200px,36%) 1fr}
.fl-main.swap #lz{order:2;align-items:flex-end}
.fl-main.swap .wcol{order:1}
.steer.imu .steer-track,.steer.imu .steer-thumb,.steer.imu .steer-label{display:none}
.steer.imu{height:72px}
.tiltind{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bigmic{position:relative;z-index:10}
.wcol{gap:.7rem}
.wbtn{width:100%}
.wbtn.bomb{flex:0 0 96px;font-size:1.1rem}
.wbtn.fire{position:relative;overflow:hidden;font-size:1.55rem}
.wbtn.fire b{display:block;font-size:.85rem;font-weight:700;opacity:.85;margin-top:.1rem}
.wbtn.fire.reloading{color:#8a6a70}
#rel-bar{position:absolute;left:0;bottom:0;height:6px;width:0;background:var(--s2)}
#c-plane-view{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
#c-flight.gwarn::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  border:6px solid var(--danger);border-radius:6px;animation:gflash .6s ease-out forwards}
@keyframes gflash{0%{opacity:1}100%{opacity:0}}

/* portrait: controls in a bottom row */
@media (orientation:portrait){
  #lz{flex-direction:row;align-items:flex-end;justify-content:center;gap:1rem;order:1}
  .fl-main .wcol{order:2}

  .steer{align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){.sdtag,.voicebtn.rec,#c-flight.gwarn::after{animation:none}}


/* ============================================================
   v4 additions
   ============================================================ */
/* accent stays amber even though the sides went red and blue */
:root{--acc:#f5a524}
.btn.primary{background:var(--acc);border-color:var(--acc)}
.btn.side.s1.sel{background:var(--s1);color:#2b0705}
.btn.side.s1.sel em{color:#5c1512}
.btn.side.s2.sel{background:var(--s2);color:#04122b}
.btn.side.s2.sel em{color:#12305e}
.segbtn.sel{background:var(--acc);color:#231600}
.voicebtn{border-color:var(--acc)}
#c-auto{color:var(--acc)}

/* the FIRE stick: ammo fill drains as you shoot, refills on reload */
.wbtn.fire{padding-top:.2rem;padding-bottom:.2rem}
#ammo-fill{position:absolute;left:0;right:0;bottom:0;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,165,36,.10),rgba(245,165,36,.34));
  transition:height .12s linear}
.wbtn.fire.reloading #ammo-fill{background:linear-gradient(180deg,rgba(79,141,255,.12),rgba(79,141,255,.4))}
.wbtn.fire>span,.wbtn.fire>b{position:relative;z-index:1}
.fhint{display:block;font-size:.58rem;letter-spacing:.16em;opacity:.55;font-weight:700}
.fhint.up{margin-bottom:.1rem}
.fhint.dn{margin-top:.1rem}

/* the pilot's own plane, big and centered on the deck */
#c-plane-view{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:150px;height:110px;z-index:2;pointer-events:none;
  background:rgba(11,17,31,.5);border:1px solid var(--line);border-radius:16px}

/* portrait rescue: one tap to fullscreen landscape */
.rotpill{display:none;position:absolute;top:.5rem;left:50%;transform:translateX(-50%);
  z-index:12;background:var(--acc);border-color:var(--acc);color:#231600;font-weight:700}
@media (orientation:portrait){ #c-flight .rotpill{display:block} }

/* level 2 ground alarm flashes harder and faster */
#c-flight.gwarn2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  border:10px solid var(--danger);border-radius:6px;animation:gflash2 .34s ease-out forwards}
@keyframes gflash2{0%{opacity:1}100%{opacity:0}}

/* results: humans big and colored, NPCs quiet and small */
.restable tr.human td{font-weight:600}
.restable tr.npc td{font-size:.78rem;color:var(--dim)}
.restable tr.npc .sq{width:8px;height:8px;opacity:.6}
@media (prefers-reduced-motion:reduce){#c-flight.gwarn2::after{animation:none}}


/* ============================================================
   v5: the FIRE stick, contained overlays, votes, team labels
   ============================================================ */
/* the flight deck finally contains its own overlays */
/* pinned to the viewport (absolute honors inset:0, relative does not),
   and still the containing block for every overlay inside it */
#c-flight{position:absolute;inset:0;overflow:hidden}

.wcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem}
.ammorow{display:flex;gap:.5rem}
.chip2{background:var(--panel2);border:1px solid var(--line);border-radius:99px;
  padding:.18rem .65rem;font-size:.82rem;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.chip2 b{color:var(--acc)}

#fstick{position:relative;z-index:20;width:min(64%,132px);height:172px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line);touch-action:none;overflow:hidden;
  user-select:none;-webkit-user-select:none}
#fstick .fs-track{position:absolute;left:50%;top:16%;bottom:16%;width:4px;
  transform:translateX(-50%);background:var(--line);border-radius:2px}
#fs-thumb{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--panel);border:2px solid var(--acc);
  box-shadow:0 3px 10px rgba(0,0,0,.4);transition:transform .09s ease-out;z-index:2}
#fstick.fire #fs-thumb{border-color:var(--danger);background:rgba(240,86,74,.28);transition:none}
#fstick.bomb #fs-thumb{border-color:#ffd166;background:rgba(255,209,102,.28);transition:none}
#fstick .fs-lb{position:absolute;left:0;right:0;text-align:center;font-size:.58rem;
  letter-spacing:.16em;font-weight:700;opacity:.55;z-index:1;pointer-events:none}
#fstick .fs-lb.up{top:.5rem}
#fstick .fs-lb.dn{bottom:.5rem}
#fstick .fs-state{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:.6rem;letter-spacing:.22em;font-weight:700;
  color:var(--s2);z-index:3;pointer-events:none}
#fstick #ammo-fill{position:absolute;left:0;right:0;bottom:0;height:100%;z-index:0;
  background:linear-gradient(180deg,rgba(245,165,36,.06),rgba(245,165,36,.30));
  transition:height .12s linear;pointer-events:none}
#fstick.fire #ammo-fill{background:linear-gradient(180deg,rgba(240,86,74,.10),rgba(240,86,74,.34))}
#fstick.reloading #ammo-fill{background:linear-gradient(180deg,rgba(79,141,255,.10),rgba(79,141,255,.42))}

/* the own-plane view: small, centered, out of the thumb zones */
#c-plane-view{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:112px;height:84px;z-index:2;pointer-events:none;
  background:rgba(11,17,31,.45);border:1px solid var(--line);border-radius:14px}

/* phone rematch voting */
.voterow{width:min(92%,420px);margin:.4rem auto .1rem}
#c-vote-re.on,#c-vote-lo.on{outline:2px solid var(--acc);outline-offset:2px}

/* longer team names still fit */
.teamlbl{font-size:.95rem;letter-spacing:.08em}

@media (orientation:portrait){
  #fstick{height:150px}
  #fl-main{grid-template-rows:1fr 210px}
}


/* ============================================================
   v6: turbo, save pips, weapon zones, corner refresh, rotate
   ============================================================ */
#fzone{position:absolute;left:50%;right:0;top:52px;bottom:0;z-index:4;
  touch-action:none;background:transparent}

#btn-turbo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  z-index:30;padding:0;border:1px solid var(--line);border-radius:16px;
  background:rgba(11,17,31,.45);touch-action:manipulation;cursor:pointer}
#btn-turbo #c-plane-view{position:static;transform:none;display:block;
  width:112px;height:84px;background:none;border:none;pointer-events:none}
#btn-turbo .tlabel{position:absolute;left:0;right:0;bottom:.3rem;text-align:center;
  font-size:.58rem;letter-spacing:.24em;font-weight:700;color:var(--acc);
  opacity:.85;pointer-events:none}
#turbo-ring{position:absolute;inset:-5px;border-radius:20px;padding:3px;
  background:conic-gradient(var(--acc) var(--tp,0%),rgba(255,255,255,.08) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#btn-turbo.ready #turbo-ring{background:conic-gradient(var(--acc) 100%,transparent 0);
  animation:tglow 1.3s ease-in-out infinite}
#btn-turbo.boost{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.35)}
@keyframes tglow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}

.saves{display:inline-flex;gap:.28rem;align-items:center;margin-left:.4rem}
.saves i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:11px solid var(--acc);transition:opacity .25s}
.saves i.used{opacity:.15}

.cornerbtn{position:fixed;top:.45rem;right:.45rem;z-index:90;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:rgba(11,17,31,.6);
  color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer}
.cornerbtn:active{transform:rotate(90deg)}
#c-flight .fl-top{padding-right:2.6rem}

/* the rotate pill lives on the deck permanently, toggling both ways */


/* ============================================================
   v7: bottom bar trio, true centering, no overlaps
   ============================================================ */
/* the rotate/fullscreen pill: small, fixed to the bottom center,
   present in every situation */
.rotpill{display:block;position:fixed;top:auto;bottom:.5rem;left:50%;
  transform:translateX(-50%);z-index:85;padding:.3rem .62rem;font-size:.64rem;
  letter-spacing:.08em}

/* the big mic anchors bottom-left, freeing the steer column to center */
#c-flight .bigmic{position:absolute;left:.75rem;bottom:.6rem;z-index:40;margin:0}
#lz{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}

/* controller refresh moves to the bottom-right corner */

/* the screen's host buttons step left so its refresh owns the corner */
.hud-right{margin-right:2.4rem}

/* turbo button sits at the true vertical center of the deck */
#btn-turbo{top:50%}

@media (orientation:portrait){
  #c-flight .bigmic{bottom:auto;top:3.1rem;left:.6rem}
}


/* ============================================================
   v10: lock-on, roomier turbo, always-there pill, red flicker
   ============================================================ */
/* turbo rides higher and grows so its label clears the plane circle */
#btn-turbo{top:35%;padding:.2rem .25rem 1.15rem}
#btn-turbo .tlabel{bottom:.3rem}

/* the LOCK button mirrors the turbo box, below it */
#btn-lock{position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);
  z-index:30;border:1px solid var(--line);border-radius:16px;
  background:rgba(11,17,31,.45);touch-action:manipulation;cursor:pointer;
  width:118px;height:106px;padding:.2rem .25rem 1.15rem}
#btn-lock .lkglyph{display:block;font-size:2.5rem;line-height:1.15;
  color:#c9b2ff;pointer-events:none}
#btn-lock .tlabel{position:absolute;left:0;right:0;bottom:.3rem;text-align:center;
  font-size:.58rem;letter-spacing:.24em;font-weight:700;color:#c9b2ff;
  opacity:.85;pointer-events:none}
#lock-ring{position:absolute;inset:-5px;border-radius:20px;padding:3px;
  background:conic-gradient(#c9b2ff var(--lp,0%),rgba(255,255,255,.08) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#btn-lock.ready #lock-ring{background:conic-gradient(#c9b2ff 100%,transparent 0);
  animation:tglow 1.3s ease-in-out infinite}
#btn-lock.locked{border-color:#c9b2ff;box-shadow:0 0 18px rgba(201,178,255,.4)}

/* SHOT DOWN: the whole overlay flickers red a few times */
@keyframes deadflick{
  0%,100%{background:rgba(7,11,20,.82)}
  20%,60%{background:rgba(170,25,25,.7)}
  40%,80%{background:rgba(90,0,0,.78)}
}
.deadov.flick{animation:deadflick .42s linear 3}


/* ============================================================
   v11: eject, pilot hints
   ============================================================ */
.ejectbtn{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  z-index:46;padding:1rem 2.2rem;border-radius:18px;border:2px solid #ff5c55;
  background:rgba(120,10,10,.55);color:#ffe1de;font-weight:800;
  font-size:1.5rem;letter-spacing:.18em;cursor:pointer;
  animation:ejpulse .7s ease-in-out infinite;touch-action:manipulation}
@keyframes ejpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,85,.7)}
  50%{box-shadow:0 0 0 14px rgba(255,92,85,0)}}
.pilothint{position:absolute;left:50%;top:12%;transform:translateX(-50%);
  z-index:44;background:rgba(11,17,31,.7);border:1px solid var(--line);
  border-radius:99px;padding:.35rem .9rem;font-size:.8rem;font-weight:700;
  letter-spacing:.1em;white-space:nowrap}


/* v12: the settings panel scrolls instead of clipping its head */
.setpanel{max-height:88vh;overflow:auto;overscroll-behavior:contain;padding-bottom:.6rem}


/* ============================================================
   v13: the wordmark
   ============================================================ */
.brand{font-family:'Chakra Petch',sans-serif;font-weight:700;text-align:center;
  letter-spacing:.55em;color:var(--ink);opacity:.9;font-size:1.5rem;
  margin:1.1rem 0 .2rem;text-indent:.55em}
.brand.sm{font-size:.95rem;opacity:.55;margin:.7rem 0 0}
.cbrand{position:absolute;left:50%;top:3px;transform:translateX(-50%);
  z-index:3;font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:.66rem;letter-spacing:.5em;text-indent:.5em;color:var(--ink);
  opacity:.4;pointer-events:none;white-space:nowrap}


/* v14: the wordmark rides every screen */
.appbrand{position:fixed;top:2px;left:50%;transform:translateX(-50%);
  z-index:6;font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.5em;text-indent:.5em;color:var(--ink);
  opacity:.35;pointer-events:none;white-space:nowrap}


/* ============================================================
   v15: hud on top, the wordmark redesign, split settings with
   background previews, host crowns, phone host bar, device-aware
   lobby buttons
   ============================================================ */
/* the top buttons stay clickable through every overlay */
.hud{z-index:30}
.overlay{padding-top:4.6rem}

/* ---------- the split settings panel ---------- */
.setpanel2{width:min(760px,96vw)}
.linkline{margin:.2rem 0 .8rem;font-size:.92rem;color:var(--ink)}
.setcols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:640px){.setcols{grid-template-columns:1fr}}
.setgroup{border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  padding:.55rem .8rem .8rem;margin:0;min-width:0}
.setgroup legend{font-size:.72rem;letter-spacing:.22em;font-weight:700;
  padding:0 .45rem;color:var(--dim)}
.setgroup.pg{border-top:3px solid var(--acc)}
.setgroup.pg legend{color:var(--acc)}
.setgroup.ng{border-top:3px solid var(--s2)}
.setgroup.ng legend{color:var(--s2)}
.setgroup.gg{border-top:3px solid var(--s1);margin-top:.8rem}
.setgroup.gg legend{color:var(--s1)}
.setgroup .fld{margin:.5rem 0}
.setgroup .fld.lockd{opacity:.55}
.setgroup .fld.lockd input{border-style:dashed}

/* background picker with live previews */
.bgrow{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.4rem}
.bgcard{background:var(--panel);border:2px solid var(--line);border-radius:10px;
  padding:.3rem;cursor:pointer;display:flex;flex-direction:column;gap:.25rem;
  align-items:center;font:inherit;color:var(--dim)}
.bgcard canvas{border-radius:6px;display:block}
.bgcard span{font-size:.66rem;letter-spacing:.06em}
.bgcard.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.bgcard.sel span{color:var(--acc)}

/* host crowns in the roster */
.pl .crown{margin-left:.4rem;padding:.05rem .4rem;font-size:.85rem;line-height:1.2;
  border-radius:7px;color:var(--dim);flex:0 0 auto}
.pl .crown.on{color:#ffd166;border-color:#ffd166;background:rgba(255,209,102,.12)}
.hosttag{color:#ffd166;font-weight:400;margin-left:.2rem}

/* the co-host bar on the phone join page */
.hostbar{display:flex;align-items:center;gap:.55rem;justify-content:center;
  border:1px dashed #ffd166;border-radius:12px;padding:.5rem .7rem;
  background:rgba(255,209,102,.06)}
.hostbar .hostlbl{color:#ffd166;font-size:.78rem;letter-spacing:.18em;font-weight:700}

/* lobby: the natural role leads on each device */
.room .joinbig{padding:.6rem 1.15rem;font-size:.95rem;letter-spacing:.08em}


/* ============================================================
   v16: the scan-again page for removed joysticks. The wordmark is
   now one minimal style everywhere; the in-game copy is painted
   into the ground band of the canvas by screen.js.
   ============================================================ */
#view-scan{display:flex;align-items:center;justify-content:center}
.scanpanel{max-width:26rem;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;padding:2rem 1.6rem;margin:1rem}
.scanicon{color:var(--acc);opacity:.9;animation:scanpulse 2.6s ease-in-out infinite}
@keyframes scanpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
.scantitle{font-size:1.15rem;letter-spacing:.3em;text-indent:.3em;margin:0;font-weight:700}
.scantext{color:var(--dim);margin:0;line-height:1.5}
.scanwhy{color:var(--acc);font-size:.85rem;margin:0;min-height:1.2em}


/* ============================================================
   v17: the name prompt, the how-it-works strip, an unmissable
   team pick, the blinking READY, and the whole joystick join
   page on one screen with no scrolling
   ============================================================ */
/* the centered name prompt */
.namepanel{width:min(22rem,92vw);text-align:center;display:flex;
  flex-direction:column;gap:.7rem;padding:1.6rem 1.4rem}
.namefld span{font-size:.95rem;letter-spacing:.18em;font-weight:700;color:var(--acc)}
.namefld input{font-size:1.25rem;text-align:center;padding:.7rem}
.namehint{color:var(--dim);font-size:.85rem;margin:0;line-height:1.45}
#nm-go{margin-top:.2rem}

/* how it works, in three little pictures on the room screen */
.howto{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:.55rem 0 .2rem;padding:.55rem .4rem;border:1px dashed var(--line);
  border-radius:12px;flex-wrap:wrap}
.howstep{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--dim);font-size:.68rem;text-align:center;line-height:1.3}
.howstep svg{color:var(--acc)}
.howarrow{color:var(--dim);font-size:1.1rem;opacity:.7}

/* the team pick is impossible to miss */
.picklbl{font-size:.66rem;letter-spacing:.24em;color:var(--dim);
  text-align:center;font-weight:700}
.sidepick .side{padding:.7rem .4rem;font-size:.92rem;border-width:2px;
  display:flex;flex-direction:column;gap:.1rem;align-items:center;line-height:1.2}
.sidepick .side b{letter-spacing:.06em}
.sidepick .side em{font-size:.68rem;opacity:.8}
.sidepick .side.sel{transform:none;box-shadow:0 0 0 2px currentColor inset}
.sidepick .s1.sel{background:rgba(90,160,255,.18)}
.sidepick .s2.sel{background:rgba(240,86,74,.18)}
.sidepick .side.sel b::after{content:" \2713"}

/* the READY button asks to be pressed */
@keyframes readypulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,165,36,.55)}
  55%{box-shadow:0 0 0 11px rgba(245,165,36,0)}
}
#c-ready:not(.armed){animation:readypulse 1.15s ease-out infinite}

/* the whole join page fits one phone screen: fixed rows on top, the
   roster takes whatever is left and scrolls inside itself, READY and
   the rest stay pinned at the bottom */
#c-join{overflow:hidden}
#c-join .cwrap{display:flex;flex-direction:column;height:100dvh;
  max-height:100dvh;overflow:hidden;padding:.45rem .8rem .55rem;gap:.42rem}
#c-join .brand.small{margin:0;font-size:.8rem}
#c-join .fld{margin:0}
#c-join .cnamefld input{padding:.42rem .6rem}
#c-join .planestrip{margin:0}
#c-join .optline{margin:0}
#c-rosterbox{flex:1;min-height:2.6rem;overflow:auto;margin:0}
#c-join .readyrow{margin:0}
#c-join #c-ready{padding:.75rem}
#c-join .hint,#c-join .msg{min-height:0;margin:0;font-size:.72rem}
#c-leave1{align-self:center;padding:.2rem .8rem}
@media (max-height:560px){
  #c-join .brand.small{display:none}
  .picklbl{display:none}
}


/* ============================================================
   v18: the steer pinned to the side, plane tags, two-line lobby
   buttons, and the camera scanner
   ============================================================ */
/* the steer hugs the OUTER EDGE of the phone, vertically centered,
   always opposite the fire and bomb column. #lz is a flex COLUMN, so
   justify-content is the vertical axis (center) and align-items is
   the horizontal one (the edge). The old override pushed it UP by
   mistake; this is the correct pair. */
#lz{justify-content:center;align-items:flex-start;padding-left:8px}
.fl-main.swap #lz{align-items:flex-end;padding-left:0;padding-right:8px}
/* the stacked portrait fallback keeps its own bottom-row layout */
@media (max-width:520px) and (orientation:portrait){
  #lz{justify-content:center;align-items:flex-end;padding:0}
  .fl-main.swap #lz{align-items:flex-end;padding:0}
}

/* the plane's one-word identity */
.pcard .ptag{color:var(--acc);font-size:.58rem;letter-spacing:.14em;
  font-weight:700;margin-left:.25rem;vertical-align:1px}

/* two-line lobby buttons: the natural one is big and bright */
.room .btn.two{display:flex;flex-direction:column;gap:.05rem;line-height:1.15;
  align-items:center;padding:.5rem .9rem}
.room .btn.two span{font-size:.62rem;letter-spacing:.14em;opacity:.85}
.room .btn.two b{font-size:.92rem;letter-spacing:.08em}
.room .joinbig.two{padding:.6rem 1.2rem}
.room .joinbig.two b{font-size:1.02rem}

/* the camera scanner */
.campanel{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.8rem;width:min(26rem,94vw)}
#cam-video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);background:#000}
.camframe{position:absolute;top:18%;left:18%;right:18%;bottom:34%;
  border:3px solid var(--acc);border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.25);animation:scanpulse 2s ease-in-out infinite}
.camtext{color:var(--ink);margin:0;font-size:.9rem;text-shadow:0 1px 4px #000}


/* v19: the random-background switch dims the manual picker */
.bgrow.dim{opacity:.4;pointer-events:none}


/* ============================================================
   v20: the one-page join keeps a scrolling middle, the recording
   mic, the radio toggle, and its friendly blink
   ============================================================ */
/* a third of the page always belongs to the scrolling middle: team,
   planes, options and roster live inside it, so the plane cards are
   never covered by anything again */
#c-join .cmid{flex:1 1 auto;min-height:34dvh;overflow:auto;display:flex;
  flex-direction:column;gap:.42rem;margin:0 -.2rem;padding:0 .2rem}
#c-rosterbox{flex:0 0 auto;min-height:2.4rem;max-height:9rem;overflow:auto}
#c-join .planestrip{flex:0 0 auto}

/* the mic while it records: red, pulsing, unmistakable */
.voicebtn.rec{background:var(--red)!important;border-color:var(--red)!important;
  color:#fff!important;animation:recpulse .9s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(240,86,74,.6)}
  55%{box-shadow:0 0 0 10px rgba(240,86,74,0)}}

/* the hear-others switch */
.hearbtn.on{color:var(--ok);border-color:var(--ok)}
.hearbtn.blinky{animation:hearblink 1.6s ease-in-out infinite}
@keyframes hearblink{0%,100%{box-shadow:0 0 0 0 rgba(245,165,36,.5);color:var(--dim)}
  50%{box-shadow:0 0 0 7px rgba(245,165,36,0);color:var(--acc)}}
.resradio{display:flex;gap:.6rem;justify-content:center;align-items:center;margin:.3rem 0}


/* ============================================================
   v21: a slimmer top and READY give the scrolling middle room,
   the host bar lives inside it now
   ============================================================ */
#c-join .brand.small{font-size:.68rem;opacity:.7}
#c-join .cnamefld input{padding:.34rem .6rem;font-size:.95rem}
#c-join #c-ready{padding:.6rem;font-size:1rem}
#c-join .cmid{min-height:42dvh}
#c-join .hostbar{margin:0 0 .1rem;padding:.4rem .6rem}


/* ============================================================
   v22: the corner pair (Leave + fullscreen), the leave confirm,
   the READY urge, the themed QR frame, phone NPC steppers, the
   one-button auto-shoot stick, the play-on-phone deck with its
   radar, and the frozen results frame
   ============================================================ */
.joincorner{position:absolute;top:.45rem;right:.55rem;z-index:14;display:flex;gap:.35rem}
.joincorner .btn{padding:.26rem .55rem;font-size:.76rem}
#c-join .readyrow{margin-top:.25rem}
#c-join .cmid{min-height:46dvh}

.leavepanel{width:min(20rem,90vw);text-align:center;display:flex;
  flex-direction:column;gap:.8rem;padding:1.5rem 1.3rem}
.btn.danger.big{background:var(--red);border-color:var(--red);color:#fff;
  padding:.8rem;font-size:1rem;letter-spacing:.08em}

/* the READY urge after the host asks for takeoff */
@keyframes readyurge{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#c-ready.urge{animation:readyurge .5s ease-in-out infinite,
  readypulse .55s ease-out infinite;background:var(--acc);color:#231600}

/* the crisp QR on its white card with the game's frame OUTSIDE the
   quiet zone: amber crosshair corners, zero scan cost */
.qrwrap{position:relative;display:inline-block;background:#fff;
  padding:6px;border-radius:12px;line-height:0}
.qrwrap::before,.qrwrap::after{content:"";position:absolute;width:16px;height:16px;
  border:3px solid var(--acc);pointer-events:none}
.qrwrap::before{top:-7px;left:-7px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.qrwrap::after{bottom:-7px;right:-7px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.qrbox .qrlabel{margin-top:.55rem}

/* the phone host's NPC steppers */
.hostbar{flex-wrap:wrap}
.npcmini{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem}
.npcmini b{letter-spacing:.1em;font-size:.6rem}
.npcmini b.s1t{color:#5aa0ff}
.npcmini b.s2t{color:var(--red)}
.npcmini i{font-style:normal;min-width:1.1rem;text-align:center;font-weight:700}
.npcmini .btn.icon{padding:.14rem .5rem;font-size:.8rem;line-height:1}

/* auto-shoot: the whole weapon stick is one big BOMB button */
#fstick.auto .fs-lb.up,#fstick.auto .fs-lb.dn,#fstick.auto .fs-track,
#fstick.auto #fs-thumb{display:none}
#fstick.auto{border-color:rgba(255,209,102,.55)}
#fstick.auto::after{content:"\01F4A3  BOMB";position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:.8rem;letter-spacing:.2em;font-weight:700;color:#ffd166}
#fstick.auto:active{background:rgba(255,209,102,.14)}

/* the play-on-phone deck: the world behind everything, slim TURBO
   and LOCK bars above the steer, no plane preview */
.cworld{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:#0b1220}
#c-flight.phone .fl-top{position:relative}
#c-flight.pctl .wcol{position:relative;z-index:6}
#c-flight.pctl #lz{z-index:6;gap:.5rem}
#c-flight.pctl .steer,#c-flight.pctl #fstick{background:rgba(13,21,38,.72)}
#c-flight.pctl #btn-turbo,#c-flight.pctl #btn-lock{position:relative;
  left:auto;top:auto;transform:none;
  width:min(34%,300px);min-width:150px;height:40px;padding:0;border-radius:12px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.4rem;
  background:rgba(13,21,38,.72)}
#c-flight.phone #c-plane-view{display:none}
#c-flight.pctl #btn-turbo .tlabel,#c-flight.pctl #btn-lock .tlabel{position:static;
  font-size:.6rem}
#c-flight.pctl #btn-lock .lkglyph{font-size:1.05rem;line-height:1}
#c-flight.pctl #turbo-ring,#c-flight.pctl #lock-ring{inset:-4px;border-radius:19px}
@media (orientation:portrait){
  #c-flight.pctl #lz{flex-direction:column;align-items:center;justify-content:flex-end}
  #c-flight.pctl .steer{align-self:auto}
  #c-flight.pctl #btn-turbo,#c-flight.pctl #btn-lock{height:34px}
}

/* the frozen last frame shines through the results table */
#ov-result{background:rgba(6,10,18,.55)}


/* ============================================================
   v23: the phone deck cleaned up, STICK mode, the join chooser,
   the flight menu and the permission explainer
   ============================================================ */

/* THE MYSTERY RECTANGLE. In phone mode the LOCK and TURBO bars sit
   in #lz, a flex column. A focused button stretched to fill the
   column, and its focus outline (the lock accent, #c9b2ff) drew a
   tall rounded box across the deck. Pin every child to its own size
   and kill focus outlines while flying, and it is gone. */
#c-flight.pctl #lz > *{flex:0 0 auto;align-self:flex-start}
#c-flight.pctl .fl-main.swap #lz > *{align-self:flex-end}
#c-flight *:focus,#c-flight *:focus-visible{outline:none !important}

/* the page behind the letterboxed screen is the same dark backdrop
   everywhere, so the bars around a 16:9 canvas never look odd */
.stage{background:#0b1220}
body{background:#0b1220}

/* TURBO and LOCK bars stand taller so they are easy to hit */
#c-flight.pctl #btn-turbo,#c-flight.pctl #btn-lock{height:52px}
@media (orientation:portrait){
  #c-flight.pctl #btn-turbo,#c-flight.pctl #btn-lock{height:44px}
}

/* the voice button shrinks in phone mode so it stops covering the
   steer; the steer keeps its full width */
/* on the phone deck the radio sits center-bottom, out of everything's
   way, still the same circle as everywhere else */
#c-flight.phone .bigmic{left:50%;right:auto;top:auto;
  bottom:calc(.55rem + env(safe-area-inset-bottom));
  transform:translateX(-50%)}

/* only in phone mode, the FIRE/BOMB column hugs the right with a
   small margin, mirroring the steer's margin on the left; its own
   design is untouched */
#c-flight.pctl .wcol{align-items:flex-end}
#c-flight.pctl .fl-main.swap .wcol{align-items:flex-start}
#c-flight.pctl .fl-main{padding-left:.55rem;padding-right:.55rem}

/* the AUTO button in the flight bar, amber when it is on */
.autob{letter-spacing:.06em}
.autob.on{color:#ffd166;border-color:rgba(255,209,102,.6);
  background:rgba(255,209,102,.14)}

/* the QR button lives in the top bar now, on every page */

/* and on the phone deck the whole cluster lifts gently, keeping
   clear of the pilot name at the top */
#c-flight.pctl #lz{padding-bottom:7vh}

/* ---- STICK mode: a round joystick inside the steer ---- */
.stickwrap{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;touch-action:none;pointer-events:none}
.stickring{position:absolute;width:min(78%,116px);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(150,180,235,.4);background:radial-gradient(circle at 50% 50%,
  rgba(79,141,255,.10),rgba(79,141,255,.02) 70%)}
.stickthumb{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(245,165,36,.22);
  border:2px solid var(--s1b);box-shadow:0 0 22px rgba(245,165,36,.3);
  transition:transform .12s ease-out}
/* in stick mode the linear track and label step aside */
.steer.stick .steer-track,.steer.stick .steer-label{display:none}
.steer.stick{border-color:rgba(245,165,36,.35)}

/* ---- the phone results scoreboard ---- */
.crestable{width:min(94%,460px);margin:.6rem auto 0;max-height:42vh;overflow:auto}
.crestab{width:100%;border-collapse:collapse;font-size:.82rem}
.crestab th{font-size:.62rem;letter-spacing:.12em;color:var(--dim);
  text-align:right;padding:.2rem .35rem;font-weight:700}
.crestab th:nth-child(2){text-align:left}
.crestab td{padding:.24rem .35rem;text-align:right;border-top:1px solid rgba(32,48,78,.5)}
.crestab td:nth-child(2){text-align:left;max-width:9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.crestab tr.human td{font-weight:600;color:var(--ink)}
.crestab tr.npc td{color:var(--dim);font-size:.76rem}
.crestab .sqc{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle}
.crestab tr.npc .sqc{width:8px;height:8px;opacity:.7}

/* ---- co-host crown button in the phone hangar ---- */
.crownc{padding:.1rem .5rem;font-size:.8rem;line-height:1;margin-left:auto;
  border-radius:8px}
.crownc.on{color:#ffd166;border-color:#ffd166;background:rgba(255,209,102,.14)}

/* ---- the flight menu, the QR popup and the permission explainer ---- */
.fmenu,.qrpanel,.permpanel,.enterpanel{width:min(440px,92vw);display:flex;
  flex-direction:column;gap:.7rem;text-align:center}
.fmenu .btn.big,.enterbtn{width:100%}
.qrpanel #cqr-box{background:#fff;border-radius:12px;padding:12px;
  display:inline-block;margin:.2rem auto 0;line-height:0}
.qrpanel #cqr-box svg,.qrpanel #cqr-box img{width:min(56vw,230px);height:auto;display:block}
.permmsg{color:var(--dim);font-size:.92rem;line-height:1.5;margin:.2rem 0 .4rem}

/* the after-create device chooser: the first option leads for this
   device, and each button explains what it does */
.enterbtns{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.enterbtn{padding:.85rem 1rem;font-size:1.02rem;letter-spacing:.08em;text-align:left}
.enterbtn em{display:block;font-size:.72rem;letter-spacing:.02em;color:var(--dim);
  font-style:normal;margin-top:.2rem;font-weight:400}
.enterbtn.first{background:linear-gradient(180deg,#ffcf70,#f5a524);
  border-color:#f5a524;color:#1a1206}
.enterbtn.first em{color:rgba(26,18,6,.72)}
.enterbtn.s-screen{border-color:var(--s1)}
.enterbtn.s-phone{border-color:#ffd166}
.enterbtn.s-stick{border-color:var(--s2)}
#en-code{color:var(--s1b);letter-spacing:.12em}

/* the settings sliders: a full-width range with a dim hint line */
.sliderow span{display:block}
.sliderow span b{color:var(--s1b);margin-left:.4rem}
.sliderow span em{display:block;font-style:normal;font-size:.72rem;color:var(--dim);
  margin-top:.15rem;font-weight:400;letter-spacing:.01em}
.sliderow input[type=range]{width:100%;margin-top:.35rem}


/* ============================================================
   v24: ONE top bar on every joystick page, the screen matches,
   and the hangar uses the whole phone
   ============================================================ */

/* the bar: menu + refresh left; QR, game sound, voice, fullscreen
   right; flight extras (AUTO, mode, swap) slide in before them */
.ctlbar{position:absolute;top:0;left:0;right:0;z-index:44;display:flex;
  align-items:center;gap:.3rem;pointer-events:none;
  padding:.4rem .55rem;
  padding-top:max(.4rem, env(safe-area-inset-top));
  padding-left:max(.55rem, env(safe-area-inset-left));
  padding-right:max(.55rem, env(safe-area-inset-right))}
.ctlbar .btn{pointer-events:auto;background:rgba(11,17,31,.62)}
.ctgrow{flex:1}
.qrsvg{width:15px;height:15px;display:block}

/* the flight-only extras hide on every other page */
#view-ctrl:not([data-page="flight"]) .ctlf{display:none}

/* every joystick page starts below the bar */
#view-ctrl .cpage{padding-top:max(3.1rem, calc(env(safe-area-inset-top) + 2.6rem))}

/* the hangar: the scroll area reads as its own surface, and the
   READY row sits low and lean so the list gets the room */
#c-join .cmid{background:rgba(9,15,28,.6);border:1px solid rgba(32,48,78,.75);
  border-radius:14px;padding:.65rem .7rem;margin:0;-webkit-overflow-scrolling:touch}
#c-join .cwrap{display:flex;flex-direction:column;height:100%;min-height:0}
#c-join{overflow:hidden}
#c-join .readyrow{margin-top:.55rem}
#c-ready{padding:.6rem .9rem;font-size:1.05rem}
#c-join .brand.small{margin-bottom:.35rem}
#c-join .cnamefld{margin-bottom:.5rem}

/* the screen HUD: room for the new left-side buttons */
.hud-left .chip{margin-left:.15rem}
#ov-smenu,#ov-sqr{z-index:36}

/* results on a landscape phone: actions on one side, the full
   scoreboard on the other, everything visible at once */
@media (orientation:landscape) and (max-height:540px){
  #c-result{display:grid;column-gap:1rem;row-gap:.3rem;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"head table" "acts table";
    align-content:center;justify-items:center;overflow:hidden}
  #c-result .reshead{grid-area:head;align-self:end}
  #c-result .resacts{grid-area:acts;align-self:start;display:flex;
    flex-direction:column;align-items:center;gap:.3rem;min-width:0;width:100%}
  #c-result .crestable{grid-area:table;margin:0;width:100%;
    max-height:calc(100dvh - 4.2rem);align-self:center}
  #c-result .restitle{font-size:1.5rem}
}


/* ============================================================
   v27: SQUADRON RUN, the big NPC bar, pause and continue, and
   platform hardening for iOS and Samsung
   ============================================================ */

/* the squadron setup: NPC steppers, big and team-labelled, sitting
   right above the two team cards, with the ARCADE switch beside */
.npcbar{background:rgba(10,16,30,.55);border:1px solid rgba(32,48,78,.75);
  border-radius:12px;padding:.5rem .6rem;margin:.15rem 0 .45rem}
.npclbl{display:block;font-size:.68rem;letter-spacing:.22em;color:var(--dim);
  margin-bottom:.35rem}
.npcrow{display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center}
.npcbig{display:inline-flex;align-items:center;gap:.4rem}
.npcbig b{font-size:.72rem;letter-spacing:.08em}
.npcbig i{font-style:normal;font-weight:700;font-size:1.15rem;min-width:1.4ch;
  text-align:center}
.btn.npcstep{width:40px;height:40px;font-size:1.25rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.arcbtn{display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:.05rem;line-height:1.05;padding:.4rem .7rem;margin-left:auto}
.arcbtn b{font-size:.82rem;letter-spacing:.14em}
.arcbtn em{font-style:normal;font-size:.62rem;color:var(--dim);letter-spacing:.12em}
.arcbtn.on{background:linear-gradient(180deg,#ffcf70,#f5a524);
  border-color:#f5a524;color:#1a1206}
.arcbtn.on em{color:rgba(26,18,6,.72)}
.arcnote{font-size:.78rem;color:#ffd166;margin:.1rem 0 .4rem}

/* CONTINUE wears the green of a second chance */
.contbtn{border-color:#2f7d4f;color:#7ee081}
.contbtn:active{background:rgba(46,125,79,.25)}

/* in SQUADRON RUN the side pick sleeps: one squadron only */
#c-join.arcade .sidepick{opacity:.45}
#c-join.arcade .sidepick .btn{filter:saturate(.4)}

/* the arcade chips: wave, hearts, wings */
.arcchip{color:#ffd166;font-weight:700;letter-spacing:.06em}
.arcline{display:inline-block;margin-left:.6rem;color:#ffd166;font-weight:700}

/* icons inside the control-mode buttons */
.mico{width:14px;height:14px;display:inline-block;vertical-align:-2px;
  margin-right:.34em;flex:0 0 auto}
.segbtn{display:inline-flex;align-items:center;justify-content:center}
#c-tilt{display:inline-flex;align-items:center}
#c-tilt .mico{margin-right:.28em}

/* number fields in the settings panel */
.fld.numline{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.fld.numline input{width:5.2rem;text-align:center}

/* ---------- platform hardening ----------
   no pull-to-refresh mid-battle, no long-press callouts, no double
   tap zoom on the controls, on Android and iOS alike */
html,body{overscroll-behavior:none}
.btn,.segbtn,.enterbtn,.hud button{
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* the drag surfaces: the browser gets NO say over these gestures.
   This must stay AFTER any touch-action above it. */
.steer,#fstick,#fzone,#lz,#stickwrap,.bigmic,#btn-turbo,#btn-lock{
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}


/* ============================================================
   v29: the SQUADRON DOWN ceremony
   ============================================================ */
.ovover{background:rgba(4,7,13,.9);z-index:38}
.overwrap{text-align:center;max-width:min(560px,92vw);padding:1rem}
.over-small{font-size:clamp(.85rem,2.6vw,1.1rem);letter-spacing:.5em;
  text-indent:.5em;color:#9fb0cc;margin-bottom:.4rem}
.over-huge{font-size:clamp(3rem,14vw,6.5rem);font-weight:700;line-height:1;
  letter-spacing:.04em;text-shadow:0 0 42px currentColor,0 4px 0 rgba(0,0,0,.5);
  margin:.1rem 0 .5rem}
.over-line{color:#c9d4e8;font-size:clamp(.9rem,3vw,1.1rem);margin-bottom:1.1rem}
.overacts{justify-content:center;align-items:center}
#ov-ack{font-size:1.05rem;padding:.75rem 1.5rem}
#ov-ack:disabled{opacity:.75;filter:saturate(.6)}
.over-status{margin-top:.9rem;color:#8fa0be;font-size:.9rem;letter-spacing:.08em}
.ovover.onscreen .over-huge{font-size:clamp(4rem,12vw,8rem)}


/* ============================================================
   v30: WATCH from afar, slimmer boosters, ready check
   ============================================================ */
.watchpage{padding:0 !important;overflow:hidden;background:#0b1220}
#wcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.watchbar{position:absolute;left:0;right:0;display:flex;gap:.5rem;
  align-items:center;justify-content:center;pointer-events:none;
  bottom:max(.6rem, env(safe-area-inset-bottom))}
.watchbar .btn{pointer-events:auto;background:rgba(11,17,31,.7)}
.watchbar .chip{background:rgba(11,17,31,.7)}

/* TURBO and LOCK slim down on the phone deck: more sky, same rings
   (the rings are inset inside the buttons, so they follow along) */
#c-flight.pctl #btn-turbo,#c-flight.pctl #btn-lock{
  width:min(22%,150px);min-width:92px;font-size:.66rem;gap:.3rem}


/* ============================================================
   v31: clear-view for the fallen, richer pause, host powers
   ============================================================ */

/* SHOT DOWN, but the sky stays visible on demand */
.deadov{transition:background .25s ease}
.deadov.clear{background:rgba(7,11,20,.12)}
.deadov.clear .deadtxt{font-size:1.05rem;letter-spacing:.3em;opacity:.8}
.deadov.clear .hint{opacity:.55}
.dvclear{margin-top:.7rem;pointer-events:auto}

/* the pause panel grew a QR, a link and a door list */
.pzqr{width:132px;height:132px;margin:.5rem auto .4rem;background:#fff;
  border-radius:10px;padding:6px;box-sizing:border-box}
.pzqr svg,.pzqr img{width:100%;height:100%;display:block}
.pzpend{margin:.45rem 0 .15rem;color:#ffd166;font-size:.82rem;
  letter-spacing:.04em;line-height:1.7}
#pz-copy{margin-top:.15rem}

/* the host's ✕: small, red, unmistakable */
.kickx{margin-left:.45rem;width:20px;height:20px;line-height:1;padding:0;
  border-radius:6px;border:1px solid rgba(240,86,74,.55);
  background:rgba(240,86,74,.12);color:#f0564a;font-size:.7rem;
  cursor:pointer;vertical-align:middle}
.kickx:active{background:rgba(240,86,74,.3)}
.mrline .kickx{margin-left:auto}


/* ============================================================
   v32: one control geometry, fullscreen nudge, screen buttons
   ============================================================ */

/* the fullscreen invitation: one tap, bottom center, only when the
   device says we are not truly fullscreen during a battle */
#fs-nudge{position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(4.2rem, calc(env(safe-area-inset-bottom) + 3.6rem));
  z-index:46;padding:.5rem .9rem;border-radius:999px;
  background:rgba(11,17,31,.85);border:1px solid #f5a524;color:#ffd166;
  font:inherit;font-weight:700;letter-spacing:.06em}

/* the pause QR obeys its frame on every renderer */
.pzqr canvas{width:100%;height:100%;display:block}

/* the screen's own pause and arcade buttons */
#s-pause{min-width:34px}
#s-arc.on{background:linear-gradient(180deg,#ffcf70,#f5a524);
  border-color:#f5a524;color:#1a1206}


/* ============================================================
   v33: dead deck, centered plane, tidy pause, host door
   ============================================================ */

/* SHOT DOWN folds the controls away; the bar and the radio stay */
#c-flight.dead #lz,
#c-flight.dead #fzone,
#c-flight.dead #btn-eject{display:none}
#c-flight.dead .deadov{pointer-events:auto}

/* the plane preview stands in the center of the joystick deck */
#c-flight.pctl #c-plane-view{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:transparent;border:none;opacity:.92}
#c-flight.phone #c-plane-view{display:none}

/* fullscreen sits a small step from refresh */
.fsnear{margin-left:.35rem}

/* the pause panel, composed: nothing covers anything */
#ov-pause .panel{width:min(92vw,400px);max-height:min(92vh,640px);
  overflow:auto;display:flex;flex-direction:column;align-items:center;
  gap:.5rem;box-sizing:border-box}
#ov-pause .pzqr{width:140px;height:140px;margin:.2rem auto;flex:0 0 auto}
#ov-pause .pzqr svg{width:100%;height:100%;display:block}
.doorrow{display:inline-flex;align-items:center;gap:.3rem;margin:.15rem .5rem .15rem 0}
.okadm{color:#7ee08a;font-weight:700}
.admx{width:20px;height:20px;line-height:1;padding:0;border-radius:6px;
  border:1px solid rgba(126,224,138,.55);background:rgba(126,224,138,.12);
  color:#7ee08a;font-size:.7rem;cursor:pointer;vertical-align:middle}
.admx:active{background:rgba(126,224,138,.3)}

/* the first page never leaves the stage: tighter on small glass */
#view-login{overflow-x:hidden}
#view-login .login-card{padding:1rem .95rem}
@media (max-height:720px){
  #view-login > .brand{margin:.6rem 0 .5rem}
  #view-login .login-card{padding:.8rem .85rem}
  #view-login .login-card input,#view-login .login-card select{padding:.5rem .6rem}
}
@media (max-height:560px){
  #view-login > .brand{font-size:.9rem;margin:.4rem 0 .35rem}
}


/* ============================================================
   v35: the view law, the dead deck complete, the compact bar
   ============================================================ */

/* SHOT DOWN folds EVERYTHING that flies: the fire stick included.
   The radio and the top bar stay. */
#c-flight.dead #fstick{display:none}

/* the top bar never wraps: on narrow phones the icons slim down so
   the whole stage keeps its place and READY stays on the page */
#c-top{flex-wrap:nowrap}
@media (max-width:440px){
  #c-top{gap:.22rem}
  #c-top .btn.sm.icon{width:31px;height:31px;min-width:31px;padding:0;font-size:.86rem}
}
@media (max-width:360px){
  #c-top .btn.sm.icon{width:28px;height:28px;min-width:28px;font-size:.8rem}
}
/* and the join page always leaves room for its READY */
#c-join{padding-bottom:max(1rem, env(safe-area-inset-bottom))}


/* ============================================================
   v36: the dead deck hides its counters, the personal verdict
   ============================================================ */
#c-flight.dead .ammorow{display:none}
.resverdict{font-size:clamp(1.5rem,6vw,2.4rem);font-weight:700;
  letter-spacing:.12em;margin:.2rem 0 .5rem;
  text-shadow:0 0 24px currentColor,0 2px 0 rgba(0,0,0,.45)}


/* v37: the door is visible at the results too */
.respend{margin:.35rem 0 .1rem;color:#ffd166;font-size:.82rem;
  letter-spacing:.04em;line-height:1.7;min-height:0}


/* v38: the key law right under its button */
.kbkeys{flex-basis:100%;text-align:left;margin-top:.25rem;line-height:1.6}


/* v41: the brand fits its stage, a touch smaller */
#view-login > .brand{font-size:clamp(1.2rem,6vw,1.8rem);
  max-width:100%;white-space:nowrap;overflow:hidden}


/* ============================================================
   v43: the door on every glass, the squadron moment, pz options
   ============================================================ */
.sdoor{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:44;background:rgba(10,14,24,.92);
  border:1px solid #ffd16655;border-radius:10px;padding:.45rem .8rem;
  color:#ffd166;font-size:.85rem;letter-spacing:.04em;max-width:min(92vw,700px);
  line-height:1.9;text-align:center}
.sdoor .admx,.sdoor .kickx{margin-left:.25rem}
.csquad{position:fixed;inset:0;z-index:47;display:flex;flex-direction:column;
  gap:.4rem;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(9,4,8,.55)}
.csquad b{color:#ff5f66;font-size:clamp(1.6rem,8vw,2.6rem);font-weight:700;
  letter-spacing:.12em;text-shadow:0 0 26px #ff5f66}
.csquad span{color:#ffd166;font-size:clamp(.85rem,3.6vw,1.05rem);letter-spacing:.06em}
.pzrow2{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}


/* v44: the hp bar slimmer, team-colored (JS paints the fill) */
.hpwrap{max-width:110px}