/* NEONWAKE — synthwave HUD + screens.
   Palette: near-black #05070d, cyan #5ff7ff (arcade house), magenta #ff3cac,
   violet/electric-blue accents. The 3D canvas + bloom do the heavy lifting;
   the DOM layer stays thin neon glass. */

:root {
  --bg:        #05070d;
  --cyan:      #5ff7ff;
  --magenta:   #ff3cac;
  --violet:    #9b5cff;
  --blue:      #4d7bff;
  --hull:      #ff3cac;
  --shield:    #5ff7ff;
  --ink:       #cfe9ff;
  --dim:       #6f86a8;
  --panel:     rgba(8, 14, 28, 0.62);
  --panel-bd:  rgba(95, 247, 255, 0.28);
  --glow-cyan: 0 0 10px rgba(95,247,255,.6), 0 0 22px rgba(95,247,255,.35);
  --glow-mag:  0 0 10px rgba(255,60,172,.6), 0 0 22px rgba(255,60,172,.35);
  --font:      'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono:      ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

#game-root { position: fixed; inset: 0; z-index: 0; }
#game-canvas { display: block; width: 100%; height: 100%; }

/* ---------- full-screen flashes ---------- */
.full-flash {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  transition: opacity .18s ease-out;
}
#flash-damage { box-shadow: inset 0 0 220px 60px rgba(255,60,90,.85); background: rgba(255,40,80,.08); }
#flash-boost  { box-shadow: inset 0 0 200px 70px rgba(95,247,255,.55); }
.full-flash.on { opacity: 1; transition: none; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8,10,24,.78), rgba(3,4,10,.95));
  backdrop-filter: blur(3px);
}
.overlay.active { display: flex; }

/* ---------- title / mission select ---------- */
.title-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background:
    linear-gradient(rgba(95,247,255,.05) 1px, transparent 1px) 0 0 / 100% 38px,
    linear-gradient(90deg, rgba(255,60,172,.05) 1px, transparent 1px) 0 0 / 38px 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 70%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 70%);
  transform: perspective(420px) rotateX(58deg) scale(2.2);
  transform-origin: bottom center;
}
.title-inner {
  position: relative; z-index: 1;
  width: min(940px, 94vw); max-height: 94vh; overflow-y: auto;
  text-align: center; padding: 22px;
}
.title-head { margin-bottom: 6px; }
.title-glyph {
  font-size: 50px; color: var(--cyan);
  text-shadow: var(--glow-cyan); line-height: 1;
}
.title-logo {
  margin: 4px 0 2px; font-size: clamp(40px, 8vw, 78px);
  letter-spacing: .14em; font-weight: 800;
  background: linear-gradient(95deg, var(--cyan), var(--magenta) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(95,247,255,.4)) drop-shadow(0 0 22px rgba(255,60,172,.3));
}
.title-tag { margin: 0; color: var(--cyan); letter-spacing: .32em; font-size: 12px; text-transform: uppercase; }
.title-greeting { color: var(--magenta); font-size: 14px; min-height: 16px; margin: 8px 0 0; text-shadow: var(--glow-mag); }
.title-lore { max-width: 640px; margin: 12px auto 6px; color: var(--dim); font-size: 14px; line-height: 1.55; }

.mission-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 16px auto; max-width: 860px;
}
@media (max-width: 720px) { .mission-grid { grid-template-columns: 1fr; } }
.mission-card {
  position: relative; cursor: pointer; text-align: left;
  border: 1px solid var(--panel-bd); border-radius: 12px;
  background: var(--panel); padding: 14px 14px 16px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s;
  overflow: hidden;
}
.mission-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--cyan), var(--magenta)); opacity: .8;
}
.mission-card:hover { transform: translateY(-3px); box-shadow: var(--glow-cyan); border-color: var(--cyan); }
.mission-card.selected { border-color: var(--magenta); box-shadow: var(--glow-mag); }
.mission-card.locked { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.mission-card.locked:hover { transform: none; box-shadow: none; }
.mc-no { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: .2em; }
.mc-name { font-size: 19px; font-weight: 700; margin: 3px 0 5px; color: #eaf6ff; }
.mc-desc { font-size: 12.5px; color: var(--dim); line-height: 1.45; min-height: 34px; }
.mc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.mc-stars { color: #ffd66e; font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(255,214,110,.5); }
.mc-stars .empty { color: #2a3550; text-shadow: none; }
.mc-lock { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.mc-status { font-size: 11px; font-family: var(--mono); color: var(--magenta); }

.title-skins { margin: 6px 0 14px; }
.skins-label { font-size: 11px; letter-spacing: .25em; color: var(--dim); margin-bottom: 8px; }
.skin-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.skin-chip {
  cursor: pointer; border: 1px solid var(--panel-bd); border-radius: 10px;
  background: var(--panel); padding: 8px 12px; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .14s, box-shadow .14s, transform .1s;
}
.skin-chip:hover { transform: translateY(-2px); }
.skin-chip.selected { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.skin-swatch { width: 34px; height: 18px; border-radius: 4px; box-shadow: 0 0 10px currentColor; }
.skin-name { font-size: 11px; color: var(--ink); letter-spacing: .08em; }

.title-actions { display: flex; gap: 12px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.title-foot { margin-top: 16px; font-size: 11px; color: var(--dim); letter-spacing: .06em; }

/* ---------- buttons ---------- */
.nw-btn {
  cursor: pointer; font-family: var(--font); font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); background: rgba(8,16,30,.7);
  border: 1px solid var(--cyan); border-radius: 9px;
  padding: 11px 20px; transition: all .14s ease;
}
.nw-btn:hover { background: rgba(95,247,255,.14); box-shadow: var(--glow-cyan); }
.nw-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; background: rgba(8,16,30,.5); }
.nw-btn.primary { color: #05070d; background: linear-gradient(95deg, var(--cyan), var(--magenta)); border-color: transparent; }
.nw-btn.primary:hover { filter: brightness(1.12); box-shadow: var(--glow-cyan), var(--glow-mag); }
.nw-btn.primary:disabled { background: rgba(50,60,80,.5); color: var(--dim); filter: none; }
.nw-btn.danger { color: var(--magenta); border-color: var(--magenta); }
.nw-btn.danger:hover { background: rgba(255,60,172,.14); box-shadow: var(--glow-mag); }

.hud-btn {
  cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--cyan); background: var(--panel); border: 1px solid var(--panel-bd);
  border-radius: 7px; padding: 6px 10px; letter-spacing: .05em;
}
.hud-btn:hover { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.hud-btn.small { padding: 5px 9px; font-size: 14px; }

/* ---------- briefing ---------- */
.brief-inner {
  width: min(640px, 92vw); border: 1px solid var(--panel-bd); border-radius: 14px;
  background: var(--panel); backdrop-filter: blur(8px);
  padding: 26px 28px; box-shadow: var(--glow-cyan);
}
.brief-tag { font-family: var(--mono); color: var(--cyan); letter-spacing: .28em; font-size: 12px; }
.brief-title { font-size: 32px; margin: 4px 0 12px; color: #eaf6ff;
  text-shadow: 0 0 16px rgba(95,247,255,.4); }
.brief-body { color: var(--ink); line-height: 1.6; font-size: 15px; margin: 0 0 16px; }
.brief-objectives { border-top: 1px solid rgba(95,247,255,.16); padding-top: 12px; }
.brief-obj-label { font-size: 11px; letter-spacing: .25em; color: var(--magenta); margin-bottom: 8px; }
#brief-obj-list { margin: 0; padding-left: 18px; color: var(--dim); font-size: 14px; line-height: 1.7; }
.brief-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#hud .hud-btn, #hud .pad-indicator, #hud button { pointer-events: auto; }
.hidden { display: none !important; }

.hud-panel {
  background: var(--panel); border: 1px solid var(--panel-bd);
  border-radius: 10px; backdrop-filter: blur(6px);
}

/* Objective list — left side, pushed DOWN clear of SDK lobby+help (top-left 12px) */
#objectives {
  position: absolute; left: 12px; top: 64px; width: 252px;
  padding: 10px 12px;
}
.obj-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.obj-mission { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--cyan); }
.obj-list { list-style: none; margin: 0; padding: 0; }
.obj-list li {
  font-size: 13px; color: var(--ink); padding: 3px 0 3px 20px; position: relative; line-height: 1.35;
}
.obj-list li::before {
  content: '○'; position: absolute; left: 2px; top: 2px; color: var(--dim); font-size: 12px;
}
.obj-list li.done { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(95,247,255,.5); }
.obj-list li.done::before { content: '◉'; color: var(--cyan); text-shadow: var(--glow-cyan); }
.obj-list li .obj-prog { color: var(--magenta); font-family: var(--mono); font-size: 11px; }

/* Target frame top-center */
.target-frame {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 220px; text-align: center;
}
.target-name { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--magenta); margin-bottom: 4px; text-shadow: var(--glow-mag); }
.target-bar { height: 6px; background: rgba(255,60,172,.15); border: 1px solid rgba(255,60,172,.4); border-radius: 4px; overflow: hidden; }
.target-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--magenta), #ff8ad0); box-shadow: var(--glow-mag); transition: width .12s; }

/* Top-right cluster */
#hud-topright {
  position: absolute; right: 12px; top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.score-chip { font-family: var(--mono); font-size: 12px; color: var(--ink); letter-spacing: .08em;
  background: var(--panel); border: 1px solid var(--panel-bd); border-radius: 7px; padding: 6px 10px; }
.score-chip b { color: var(--cyan); }

.pad-indicator {
  font-family: var(--mono); font-size: 11px; cursor: pointer;
  color: var(--dim); background: var(--panel); border: 1px solid var(--panel-bd);
  border-radius: 7px; padding: 6px 10px; letter-spacing: .04em;
}
.pad-indicator.pad-on { color: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.pad-indicator.pad-wait { color: #ffce5c; border-color: rgba(255,206,92,.4); }

/* Crosshair */
.crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; pointer-events: none;
}
.ch-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  background: var(--cyan); border-radius: 50%; box-shadow: var(--glow-cyan); }
.ch-ring { position: absolute; inset: 18px; border: 1px solid rgba(95,247,255,.45); border-radius: 50%; }
.ch-ring::before, .ch-ring::after { content: ''; position: absolute; background: rgba(95,247,255,.6); }
.ch-ring::before { left: 50%; top: -8px; width: 1px; height: 6px; margin-left: -.5px; }
.ch-ring::after  { left: 50%; bottom: -8px; width: 1px; height: 6px; margin-left: -.5px; }
.lock-reticle {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px;
  margin: -25px 0 0 -25px; border: 2px solid var(--magenta); border-radius: 6px;
  box-shadow: var(--glow-mag); animation: lockpulse .6s ease-in-out infinite alternate;
}
.lock-reticle.locked { border-style: solid; animation: none; box-shadow: 0 0 16px var(--magenta); }
@keyframes lockpulse { from { transform: rotate(0deg) scale(1); opacity: .7; } to { transform: rotate(45deg) scale(.82); opacity: 1; } }

/* Edge arrows (off-screen indicators) */
#edge-arrows { position: absolute; inset: 0; pointer-events: none; }
.edge-arrow {
  position: absolute; width: 0; height: 0; will-change: transform;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 16px solid var(--magenta);
  filter: drop-shadow(0 0 6px rgba(255,60,172,.8));
}
.edge-arrow.objective { border-bottom-color: var(--cyan); filter: drop-shadow(0 0 6px rgba(95,247,255,.8)); }
.edge-arrow.boss { border-bottom-color: #ffae3c; filter: drop-shadow(0 0 8px rgba(255,174,60,.9)); }

/* Vitals (bottom-left) */
#vitals { position: absolute; left: 14px; bottom: 16px; width: 230px; display: flex; flex-direction: column; gap: 8px; }
.bar { position: relative; height: 20px; border-radius: 6px; overflow: hidden;
  background: rgba(8,14,28,.7); border: 1px solid var(--panel-bd); }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .18s ease; }
.bar-shield .bar-fill { background: linear-gradient(90deg, #2bd6ff, var(--shield)); box-shadow: var(--glow-cyan); }
.bar-hull .bar-fill   { background: linear-gradient(90deg, #ff2e6e, var(--magenta)); box-shadow: var(--glow-mag); }
.bar-label { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 0 8px; font-family: var(--mono); font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.bar-tag { opacity: .85; letter-spacing: .1em; }

/* Bottom-center readouts */
#readouts {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--panel-bd); border-radius: 10px;
  padding: 8px 16px; backdrop-filter: blur(6px);
}
.ro { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ro-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--dim); }
.ro-meter { width: 80px; height: 6px; background: rgba(95,247,255,.12); border-radius: 3px; overflow: hidden; }
.ro-meter-fill { height: 100%; width: 50%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: var(--glow-cyan); transition: width .1s; }
.ro-pips { color: var(--magenta); font-size: 14px; letter-spacing: 1px; text-shadow: var(--glow-mag); }
.ro-pips .spent { color: #33405e; text-shadow: none; }
.ro-lock-state { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ro-lock-state.locking { color: #ffce5c; }
.ro-lock-state.locked { color: var(--magenta); text-shadow: var(--glow-mag); }

/* Boost meter bottom-right */
#boost-wrap { position: absolute; right: 14px; bottom: 16px; width: 150px; text-align: right; }
.boost-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--dim); margin-bottom: 5px; }
.boost-bar { height: 8px; background: rgba(95,247,255,.12); border: 1px solid var(--panel-bd); border-radius: 5px; overflow: hidden; }
.boost-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: var(--glow-cyan); transition: width .12s; }
.boost-fill.low { background: linear-gradient(90deg, #6a3a3a, #ff7a7a); box-shadow: none; }

/* Banners */
#banner-layer { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; width: 80%; }
.banner {
  font-size: 24px; font-weight: 800; letter-spacing: .12em; color: var(--cyan);
  text-shadow: var(--glow-cyan); margin: 6px 0; opacity: 0;
  animation: bannerflash 2s ease-out forwards;
}
.banner.warn { color: var(--magenta); text-shadow: var(--glow-mag); }
.banner.good { color: #8dffc6; text-shadow: 0 0 14px rgba(141,255,198,.7); }
@keyframes bannerflash {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(1.02); }
}

/* ---------- pause ---------- */
.pause-inner { display: flex; flex-direction: column; gap: 12px; width: min(320px, 86vw); text-align: center; }
.pause-title { font-size: 36px; letter-spacing: .2em; color: var(--cyan); text-shadow: var(--glow-cyan); margin: 0 0 8px; }

/* ---------- results ---------- */
.result-inner { width: min(560px, 92vw); text-align: center; padding: 28px;
  border: 1px solid var(--panel-bd); border-radius: 16px; background: var(--panel); backdrop-filter: blur(8px); }
.result-glyph { font-size: 56px; line-height: 1; margin-bottom: 6px; }
.result-glyph.good { color: var(--cyan); text-shadow: var(--glow-cyan); }
.result-glyph.bad  { color: var(--magenta); text-shadow: var(--glow-mag); }
.result-inner h1 { font-size: 30px; letter-spacing: .08em; margin: 4px 0 10px;
  background: linear-gradient(95deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-line { color: var(--ink); line-height: 1.55; font-size: 14.5px; margin: 0 auto 16px; max-width: 440px; }
.stars { font-size: 40px; letter-spacing: 6px; margin: 8px 0 14px; color: #ffd66e; text-shadow: 0 0 16px rgba(255,214,110,.6); }
.stars .empty { color: #2a3550; text-shadow: none; }
.result-stats { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 8px 0 20px; font-family: var(--mono); font-size: 13px; }
.result-stats .stat { color: var(--dim); }
.result-stats .stat b { color: var(--cyan); display: block; font-size: 20px; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- toast ---------- */
#toast-layer { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  font-size: 13px; color: var(--ink); background: rgba(8,14,28,.9);
  border: 1px solid var(--panel-bd); border-left: 3px solid var(--cyan);
  border-radius: 7px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
  animation: toastin .25s ease, toastout .4s ease 2.4s forwards;
}
.toast.warn { border-left-color: var(--magenta); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@keyframes toastout { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- controls modal (built by controls_modal.js) ---------- */
.controls-wrap { width: min(680px, 94vw); max-height: 90vh; overflow-y: auto;
  position: relative; padding: 24px; border: 1px solid var(--panel-bd); border-radius: 14px;
  background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--glow-cyan); }
.modal-close { position: absolute; right: 14px; top: 12px; cursor: pointer; background: none; border: none;
  color: var(--dim); font-size: 26px; line-height: 1; }
.modal-close:hover { color: var(--magenta); }
.modal-title { font-size: 22px; letter-spacing: .1em; color: #eaf6ff; margin: 0 0 14px; }
.pad-info-header { border: 1px solid rgba(95,247,255,.18); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; background: rgba(8,16,30,.5); }
.pad-info-name { font-size: 15px; color: var(--cyan); font-weight: 700; }
.pad-info-name.pad-info-empty { color: var(--dim); }
.pad-info-sub { font-size: 11px; color: var(--dim); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 8px; }
.pad-info-tag code { color: var(--magenta); }
.sub-title { font-size: 12px; letter-spacing: .18em; color: var(--magenta); margin: 0 0 8px; text-transform: uppercase; }
.ctl-hint { font-size: 11px; color: var(--dim); margin-top: 6px; line-height: 1.4; }
.pad-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pad-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid rgba(95,247,255,.14); border-radius: 8px; padding: 8px 10px; background: rgba(8,16,30,.4); }
.pad-row.active { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.pad-name { font-size: 13px; color: var(--ink); }
.pad-raw { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.pad-none, .pad-visual-placeholder { font-size: 12px; color: var(--dim); padding: 10px; text-align: center; line-height: 1.5; }
.pill { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 6px; letter-spacing: .1em; }
.pill-on { background: rgba(95,247,255,.15); color: var(--cyan); border: 1px solid var(--cyan); }
.vendor-btn { cursor: pointer; font-size: 11px; color: var(--cyan); background: rgba(8,16,30,.6);
  border: 1px solid var(--panel-bd); border-radius: 6px; padding: 5px 10px; }
.vendor-btn:hover { border-color: var(--cyan); }
.bind-list { display: flex; flex-direction: column; gap: 5px; }
.bind-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 10px; align-items: center;
  border: 1px solid rgba(95,247,255,.1); border-radius: 8px; padding: 7px 10px; background: rgba(8,16,30,.35); }
.bind-row.capturing { border-color: var(--magenta); box-shadow: var(--glow-mag); }
.bind-action { font-size: 12.5px; color: var(--ink); }
.bind-current { font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.bind-controls { display: flex; gap: 6px; }
.controls-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.pad-visual-wrap { margin-top: 14px; }
.pad-svg { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.pad-svg .pb { fill: rgba(95,247,255,.08); stroke: rgba(95,247,255,.4); stroke-width: 1.5; transition: fill .05s; }
.pad-svg .pb.pressed { fill: var(--magenta); stroke: var(--magenta); }
.pad-svg .pl { fill: var(--dim); font-size: 9px; font-family: var(--mono); }
.pad-svg .stickdot { fill: var(--cyan); }

/* slim scrollbars */
.title-inner::-webkit-scrollbar, .controls-wrap::-webkit-scrollbar { width: 8px; }
.title-inner::-webkit-scrollbar-thumb, .controls-wrap::-webkit-scrollbar-thumb { background: rgba(95,247,255,.3); border-radius: 4px; }

/* mobile hint */
@media (max-width: 640px) {
  #readouts { gap: 10px; padding: 6px 10px; }
  #vitals, #boost-wrap { width: 150px; }
  #objectives { width: 200px; }
}