/* Layout: a single cockpit — the view on top, an instrument strip below, every screen overlays the view */
:root{
  --bg:#0c0e0d; --panel:#151917; --panel-2:#1d221f; --line:#2b322e;
  --fg:#ebe5d3; --muted:#8c9389; --accent:#f0a830; --on-accent:#1b1404;
  --danger:#e5493f; --ok:#6cc779;
  --display:'Saira Stencil One',Impact,'Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:12px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.game{width:min(100%,calc((100vh - 140px)*1.6));width:min(100%,calc((100dvh - 140px)*1.6));min-width:0;display:flex;flex-direction:column}
.view{position:relative;width:100%;max-width:100%;aspect-ratio:16/10;background:#000;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;cursor:crosshair;touch-action:none}
#view{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease-out}
.toast{position:absolute;left:50%;top:12px;transform:translate(-50%,-10px);opacity:0;pointer-events:none;
  background:rgba(21,25,23,.92);border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:12px;letter-spacing:.04em;white-space:nowrap;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* instrument strip */
.hud{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:0 0 14px 14px}
.cell{flex:1 1 0;min-width:0;padding:9px 12px;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--line)}
.cell:last-child{border-right:0}
.cell.wide{flex:2.2 1 0}
.lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.val{font-family:var(--display);font-size:24px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-row{display:flex;align-items:center;gap:8px}
.bar{flex:1;height:7px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--ok);border-radius:4px;transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
.chip{font-size:10px;font-weight:800;letter-spacing:.12em;padding:2px 7px;border-radius:6px;background:var(--panel-2);color:var(--ok);transition:color .3s}
.chip.hurt{color:var(--accent)} .chip.crit{color:var(--danger);animation:pulse 1s ease-in-out infinite}
.slots{display:flex;gap:4px}
.slot{font-size:11px;font-weight:600;padding:3px 7px;border-radius:8px;border:1px solid var(--line);color:#4a514c;transition:background-color .2s,color .2s,border-color .2s}
.slot.own{color:var(--fg)} .slot.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.keyc{width:26px;height:16px;border-radius:4px;border:1px dashed #3d4540;transition:all .3s}
.keyc.on{background:var(--accent);border:1px solid var(--accent);box-shadow:0 0 12px rgba(240,168,48,.55)}

/* screens */
.screen{position:absolute;inset:0;display:grid;place-items:center;padding:20px;overflow:auto;
  background:radial-gradient(ellipse at 50% 40%,rgba(12,14,13,.45),rgba(12,14,13,.94) 75%);animation:fade .35s ease both}
.card{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.logo{font-family:var(--display);font-size:clamp(38px,10vw,92px);line-height:.88;margin:0;letter-spacing:.01em;text-wrap:balance}
.h2{font-family:var(--display);font-size:clamp(28px,6vw,52px);line-height:.95;margin:0;text-wrap:balance}
.hazard{height:8px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--accent) 0 10px,#1b1404 10px 20px);max-width:260px}
.lede{color:#c7c1b0;line-height:1.55;margin:0;max-width:52ch}
.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;font-size:12px;color:var(--muted)}
.keys div{display:flex;gap:8px;align-items:center;min-width:0}
kbd{font-family:var(--mono);font-size:11px;color:var(--fg);background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;white-space:nowrap}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{height:42px;padding:0 24px;border-radius:21px;border:0;cursor:pointer;font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);transition:transform .15s ease,box-shadow .2s ease,background-color .2s}
.btn:hover{box-shadow:0 6px 18px rgba(240,168,48,.3);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.tonal{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}
.btn.tonal:hover{box-shadow:none;background:#262c28}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0}
.stats div{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stats dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:0;font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.best{font-size:12px;color:var(--muted)}

/* touch */
.touch{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.tz{position:relative}
.stick{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid rgba(235,229,211,.25);pointer-events:none}
.stick i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(235,229,211,.3)}
.tbtns{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:12px;display:flex;gap:10px;align-items:flex-end}
.tb{width:56px;height:56px;border-radius:50%;border:1px solid rgba(235,229,211,.25);background:rgba(21,25,23,.55);color:var(--fg);font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em}
.tb.fire{width:72px;height:72px;background:rgba(240,168,48,.35);border-color:var(--accent)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.45}}
@media (max-width:640px){
  .cell{flex:1 1 30%;border-bottom:1px solid var(--line)}
  .cell.wide{flex:1 1 60%}
  .val{font-size:19px}
  .keys{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}