* { margin: 0; padding: 0; box-sizing: border-box; }

/* Street Fighter '87 arcade UI palette + the blocky cabinet font stack used for
   every label/number in the chrome (no web fonts — Impact gives the squat,
   heavy arcade look on every platform). */
:root {
  --arcade: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --sf-yellow: #ffd21e;
  --sf-orange: #ff7a00;
  --sf-blue:   #2b3f8f;
  --sf-blue-lo:#16204a;
  --sf-cyan:   #6fd8ff;
  --sf-ink:    #06070f;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0a0d;
  font-family: "Courier New", monospace;
  color: #e8e2d6;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* iOS Safari hardening for touch play: kill the long-press callout/share
     sheet, the grey tap flash, and the per-element text inflation Safari still
     applies on orientation change / overlay open on top of the viewport clamp.
     NOTE: these (and user-select:none) suppress selection + the callout but NOT
     the long-press magnifier loupe over *text* — that's why the touch buttons
     use SVG icons, not text glyphs (see touch.js). */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#view3d {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#view {
  display: block;
  position: fixed;
  inset: 0;
  cursor: crosshair;
  image-rendering: pixelated;
}

/* ============================================================
   HUD — Street Fighter '87 arcade chrome
   ============================================================ */
#hud {
  position: fixed;
  /* Offset under the notch / Dynamic Island when run full-bleed in the native
     wrappers; env(safe-area-inset-*) is 0 in a normal browser tab (no-op). */
  top: max(10px, env(safe-area-inset-top)); left: 0; right: 0;
  z-index: 10;
  pointer-events: none;
}
#hud-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
}

/* --- the health panel: nameplate + the big yellow energy bar --- */
#hp-panel { width: clamp(190px, 46vw, 320px); }

.nameplate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 6px;
  background: linear-gradient(var(--sf-blue), var(--sf-blue-lo));
  border: 2px solid #000;
  box-shadow: 0 0 0 1px var(--sf-cyan) inset;
  font-family: var(--arcade);
}
.np-tag {
  color: var(--sf-ink);
  background: var(--sf-yellow);
  padding: 0 5px;
  font-size: 15px;
  letter-spacing: 1px;
}
.np-name {
  flex: 1;
  color: #fff;
  font-size: 15px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
}
.np-lv {
  color: var(--sf-cyan);
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}
.np-lv #level { color: #fff; }

/* The iconic SF energy bar: yellow→orange fill that drains to expose the dark
   track, wrapped in a heavy black-on-cyan arcade frame. The ::after overlay
   paints the segment ticks + a top sheen so it reads as a lit arcade meter. */
#hpwrap {
  position: relative;
  width: 100%; height: 20px;
  margin-top: 3px;
  border: 2px solid #000;
  background: #2a0a0c;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 2px 0 #000;
}
#hpbar {
  height: 100%; width: 100%;
  background:
    linear-gradient(180deg,
      #fff6c0 0%, var(--sf-yellow) 28%, var(--sf-orange) 78%, #c24400 100%);
  transition: width 0.12s linear;
}
#hpwrap::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0 30%, transparent 31%),
    repeating-linear-gradient(90deg,
      transparent 0 18px, rgba(0,0,0,0.55) 18px 20px);
}

/* XP (green) + Tension (amber) ride below as slim companion meters in the
   same arcade frame. */
#submeters {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
#xpwrap, #tenswrap {
  position: relative;
  width: 100%; height: 7px;
  border: 2px solid #000;
  box-shadow: 0 0 0 1px rgba(111,216,255,0.4) inset;
}
#xpwrap { background: #07210e; }
#tenswrap { background: #2a1e06; }
#xpbar {
  height: 100%; width: 0%;
  background: linear-gradient(180deg, #9dffba, #2faf57);
  transition: width 0.1s linear;
}
#tensbar {
  height: 100%; width: 0%;
  background: linear-gradient(180deg, #ffe08a, #f0a020);
  transition: width 0.08s linear;
}
#tenswrap.full {
  border-color: var(--sf-yellow);
  box-shadow: 0 0 8px 1px rgba(255, 210, 74, 0.9);
  animation: tens-pulse 0.5s steps(2, end) infinite;
}
@keyframes tens-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- centre TIME box: arcade round-clock numerals. Anchored to the viewport
   (position:fixed) so it never inherits the HUD row's width — the iconic SF
   centred placement. In portrait it pins top-right, clear of the pause button
   (see media query below). --- */
#timebox {
  position: fixed;
  top: max(10px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  min-width: 64px;
  text-align: center;
  padding: 2px 10px 4px;
  background: linear-gradient(var(--sf-blue), var(--sf-blue-lo));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 2px 0 #000;
}

/* Portrait: no room to centre TIME without colliding with the energy bar — pin
   it to the top-right, just clear of the pause button (which sits at right:12,
   40px wide). */
@media (max-aspect-ratio: 1/1) {
  #timebox { left: auto; right: 58px; transform: none; }
}
.time-label {
  font-family: var(--arcade);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--sf-cyan);
  text-shadow: 1px 1px 0 #000;
}
#clock {
  font-family: var(--arcade);
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: 2px;
  color: var(--sf-yellow);
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,210,30,0.35);
}

/* --- score-plate stat line under the bar --- */
#stats {
  margin: 6px 0 0 12px;
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--arcade);
  font-size: 15px;
  letter-spacing: 2px;
  color: #cfe0ff;
  background: rgba(8, 12, 30, 0.7);
  border: 2px solid #000;
  box-shadow: 0 0 0 1px var(--sf-cyan) inset;
  text-shadow: 1px 1px 0 #000;
}
#kills { color: var(--sf-yellow); }

/* active surge timers — small draining pips under the stat line */
#buffs {
  margin: 6px 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.buff { width: 130px; }
.buff.hidden { display: none; }
.buff-label {
  font-family: var(--arcade);
  font-size: 12px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.buff-bar {
  height: 5px;
  margin-top: 1px;
  border: 2px solid #000;
  box-shadow: 0 0 0 1px rgba(111,216,255,0.35) inset;
}
.buff-bar > div {
  height: 100%; width: 100%;
  transition: width 0.1s linear;
}

/* owned-weapon level pips — wider, brighter, with a live level readout */
.buff.power { width: 170px; }
.buff.power .buff-label { font-size: 13px; }
.buff.power .power-secs {
  float: right;
  font-family: var(--arcade);
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.buff.power .buff-bar { height: 7px; }

#hint {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center;
  font-family: var(--arcade);
  font-size: 13px;
  letter-spacing: 3px;
  color: #7a8398;
  z-index: 10;
  pointer-events: none;
  text-shadow: 1px 1px 0 #000;
}

#dead {
  position: fixed; inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px max(24px, env(safe-area-inset-left)) 24px max(24px, env(safe-area-inset-right));
  box-sizing: border-box;
  text-align: center;
  background: rgba(10, 0, 2, 0.78);
  backdrop-filter: blur(2px);
}
#dead.hidden { display: none; }
#dead h1 {
  font-family: var(--arcade);
  font-size: clamp(28px, 9vw, 64px);
  letter-spacing: clamp(2px, 1.5vw, 8px);
  max-width: 100%;
  color: #e23b46;
  -webkit-text-stroke: 2px #000;
  text-shadow: 4px 4px 0 #000, 0 0 22px rgba(226,59,70,0.5);
}
#dead p { color: #c9bfa8; letter-spacing: 1px; max-width: 100%; }
#again {
  margin-top: 8px;
  padding: 12px 30px;
  font-family: var(--arcade);
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--sf-ink);
  background: linear-gradient(var(--sf-yellow), var(--sf-orange));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 3px 0 #000;
  cursor: pointer;
}
#again:hover { background: #fff; }

/* ---- level-up draft ---- */
#draft {
  position: fixed; inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(2px);
}
#draft.hidden { display: none; }
#draft-level {
  font-family: var(--arcade);
  font-size: 44px;
  letter-spacing: 6px;
  color: var(--sf-yellow);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,210,30,0.4);
}
#draft-cards {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92vw;
}
.draft-card {
  position: relative;
  width: 190px;
  min-height: 150px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  text-align: left;
  color: #e8e2d6;
  background: linear-gradient(160deg, #20284a 0%, #121626 100%);
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-blue) inset, 0 4px 0 #000;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, background 0.06s;
}
.draft-card:hover,
.draft-card.selected {
  transform: translateY(-4px);
  background: linear-gradient(160deg, #2a335c 0%, #1a1f33 100%);
  box-shadow: 0 0 0 2px var(--sf-yellow) inset, 0 4px 0 #000;
}
.draft-card.selected {
  box-shadow: 0 0 0 2px var(--sf-yellow) inset, 0 0 20px rgba(255, 210, 30, 0.45), 0 4px 0 #000;
}
.dc-key {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  font-family: var(--arcade);
  font-size: 15px;
  color: var(--sf-ink);
  background: var(--sf-yellow);
  border: 2px solid #000;
}
.dc-icon {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  align-self: center;
}
.dc-tag {
  font-size: 11px;
  letter-spacing: 2px;
  color: #8b93a8;
}
.dc-tag-stat { color: #8b93a8; }    /* core stat level-up */
.dc-tag-weapon { color: #b78bff; }  /* weapon level-up */
.dc-name {
  font-family: var(--arcade);
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.dc-desc {
  font-size: 13px;
  color: #b9b2a3;
  line-height: 1.4;
}
#draft-tip {
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b6356;
}
#draft-count {
  color: #ffd24a;
  font-weight: bold;
}
#draft-timer {
  width: min(420px, 80vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
#draft-timer-bar {
  width: 100%;
  height: 100%;
  background: #ffd24a;
}

/* Narrow phones: the fixed-width cards don't fit side-by-side and overflow the
   screen. Stack them in a single fitted column and trim the chrome down. */
@media (max-width: 520px) {
  #draft { gap: 14px; padding: 12px; box-sizing: border-box; }
  #draft-level { font-size: min(40px, 10vw); }
  #draft-cards {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    max-width: 340px;
  }
  .draft-card {
    width: 100%;
    min-height: 0;
    padding: 12px 14px;
    box-sizing: border-box;
  }
  .dc-name { font-size: 20px; }
  .dc-desc { font-size: 12px; }

  /* KEY BINDINGS rows: on a narrow card the inline flavor note plus two key
     slots overflow the right edge. The action labels carry the meaning, so drop
     the notes here and keep the keys snug against the right. */
  #bind-list .ctl-note { display: none; }
  #bind-list .ctl-keys { flex-wrap: nowrap; }
  .pause-card h1 { font-size: min(40px, 11vw); letter-spacing: 4px; }
}

/* ---- pause / controls ---- */
#pausebtn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  z-index: 15;
  width: 40px; height: 40px;
  font-family: var(--arcade);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--sf-cyan);
  background: linear-gradient(var(--sf-blue), var(--sf-blue-lo));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 2px 0 #000;
  cursor: pointer;
}
#cambtn {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px); right: max(12px, env(safe-area-inset-right));
  z-index: 15;
  width: 40px; height: 40px;
  padding: 0;
  font-family: var(--arcade);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--sf-cyan);
  background: linear-gradient(var(--sf-blue), var(--sf-blue-lo));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 2px 0 #000;
  cursor: pointer;
}
#cambtn:hover { color: var(--sf-yellow); box-shadow: 0 0 0 2px var(--sf-yellow) inset, 0 2px 0 #000; }
#pausebtn:hover { color: var(--sf-yellow); box-shadow: 0 0 0 2px var(--sf-yellow) inset, 0 2px 0 #000; }

#pause {
  position: fixed; inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(2px);
}
#pause.hidden { display: none; }
.pause-card {
  width: min(92vw, 420px);
  padding: 26px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #1a1d28;
  border: 2px solid #3a3f52;
  border-bottom-width: 5px;
}
.pause-card h1 {
  font-family: var(--arcade);
  font-size: 44px;
  letter-spacing: 8px;
  color: var(--sf-yellow);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000;
  text-align: center;
}
.ctl-list { display: flex; flex-direction: column; gap: 10px; }
.ctl-head {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd24a;
  margin-top: 2px;
}
.ctl-head:first-child { margin-top: 0; }
.ctl-tip {
  font-size: 12px;
  line-height: 1.5;
  color: #b9b2a3;
}
.ctl-tip b { color: #ffd24a; font-weight: normal; }
.ctl-tip kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  color: #e8e2d6;
  background: #0e1018;
  border: 1px solid #3a3f52;
  border-radius: 3px;
}
.ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #2a2e3c;
}
.ctl-act {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b93a8;
}
.ctl-keys { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ctl-keys kbd {
  font-family: inherit;
  font-size: 13px;
  min-width: 24px;
  padding: 3px 8px;
  text-align: center;
  color: #e8e2d6;
  background: #0e1018;
  border: 1px solid #3a3f52;
  border-bottom-width: 3px;
  border-radius: 3px;
}
.ctl-or { color: #6b6356; font-size: 12px; }
.ctl-note { color: #6b6356; font-size: 11px; font-style: italic; }
/* Only the active sub-screen card shows; pause.js toggles `.hidden`. */
.pause-card.hidden { display: none; }

/* Main screen's button stack + the back/reset rows on sub-screens. */
.pause-menu { display: flex; flex-direction: column; gap: 10px; }
.pause-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pause-row .pause-nav { flex: 1; }

#pause-resume {
  padding: 12px 28px;
  font-family: var(--arcade);
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--sf-ink);
  background: linear-gradient(var(--sf-yellow), var(--sf-orange));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 3px 0 #000;
  cursor: pointer;
}
#pause-resume:hover { background: #fff; }

/* Sub-screen routers (KEY BINDINGS / AUDIO / CREDITS / BACK) — steel arcade
   plates, secondary to RESUME but still legible. */
.pause-nav {
  padding: 10px 18px;
  font-family: var(--arcade);
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--sf-cyan);
  background: linear-gradient(var(--sf-blue), var(--sf-blue-lo));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--sf-cyan) inset, 0 2px 0 #000;
  cursor: pointer;
}
.pause-nav:hover { color: var(--sf-yellow); box-shadow: 0 0 0 2px var(--sf-yellow) inset, 0 2px 0 #000; }

/* Subdued ghost button — never competes with the plates. Used by Reset and the
   cache-clear (which wipes browser-side caches + storage and reloads; pause.js). */
.pause-ghost,
#pause-clearcache {
  padding: 9px 16px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  color: #8a8a93;
  background: transparent;
  border: 1px solid #3a3f52;
  cursor: pointer;
}
.pause-ghost:hover,
#pause-clearcache:hover { color: #fff; border-color: #6a6a72; }
.pause-ghost { flex: 1; }
#pause-clearcache:disabled { opacity: 0.5; cursor: default; }

/* Rebindable key buttons inside a controls row (replace the static <kbd>s). */
.bind-key {
  font-family: inherit;
  font-size: 13px;
  min-width: 30px;
  padding: 3px 8px;
  text-align: center;
  color: #e8e2d6;
  background: #0e1018;
  border: 1px solid #3a3f52;
  border-bottom-width: 3px;
  border-radius: 3px;
  cursor: pointer;
}
.bind-key:hover { border-color: var(--sf-cyan); color: #fff; }
.bind-key.bind-empty { color: #5a5a66; }
.bind-key.bind-capturing {
  color: var(--sf-ink);
  background: var(--sf-yellow);
  border-color: var(--sf-yellow);
}

/* CONTROLS device tabs (Keyboard / Controller). */
.menu-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.menu-tab {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 14px;
  color: #b9b2a3;
  background: #0e1018;
  border: 1px solid #3a3f52;
  border-bottom-width: 3px;
  border-radius: 3px;
  cursor: pointer;
}
.menu-tab:hover { color: #fff; border-color: var(--sf-cyan); }
.menu-tab.active {
  color: var(--sf-ink);
  background: var(--sf-yellow);
  border-color: var(--sf-yellow);
}

/* Audio settings — labelled slider rows + a mute toggle. */
.opt-list { display: flex; flex-direction: column; gap: 16px; }
.opt-row { display: flex; align-items: center; gap: 12px; }
.opt-row label {
  font-family: var(--arcade);
  font-size: 16px;
  letter-spacing: 2px;
  color: #c9c2b3;
  min-width: 64px;
}
.opt-row input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #0e1018;
  border: 1px solid #3a3f52;
  border-radius: 3px;
  cursor: pointer;
}
.opt-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--sf-yellow);
  border: 2px solid #000;
  cursor: pointer;
}
.opt-row input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--sf-yellow);
  border: 2px solid #000;
  cursor: pointer;
}
.opt-val { min-width: 42px; text-align: right; font-size: 13px; color: #8b93a8; }
.opt-toggle label { min-width: 0; flex: 1; }
.opt-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--sf-orange); }

/* Credits — quiet body text with cyan links. */
.credits { display: flex; flex-direction: column; gap: 12px; }
.credits p { font-size: 13px; line-height: 1.5; color: #b9b2a3; }
.credits b { color: var(--sf-yellow); font-weight: normal; }
.credits a { color: var(--sf-cyan); text-decoration: none; }
.credits a:hover { text-decoration: underline; }
#pause-clearcache:disabled { opacity: 0.5; cursor: default; }