/* STYLE GUIDE: style-guide.html loads this stylesheet and shows every HUD
   style and keyframe animation below. If you change a style or animation
   here, update style-guide.html in the same change (or flag it under
   "Style guide debt" in CHANGELOG.md). */

:root {
  --bg: #04051a;
  --you: #46d2ff;
  --enemy: #ff3d9a;
  --hud: #9dff3d;
  --text: #cfe8ff;
  --gain: #5dffb5;
  --loss: #ff5a7a;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

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

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud);
  text-shadow: 0 0 8px rgba(157, 255, 61, 0.7);
}

/* Live score, top left. On pace for the top 3 of the board (.top): it
   doubles in size and a medal badge in that rank's board color appears;
   moving up a place pops it. */
#score-box {
  position: absolute;
  left: calc(16px + env(safe-area-inset-left));
  top: calc(12px + env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
#dist {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  line-height: 1;
  transform-origin: left top;
  transition: font-size 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
#dist.top { font-size: 44px; }
#dist.top #score { color: #fff; text-shadow: 0 0 10px var(--badge), 0 0 24px var(--badge); }
#dist.rank-up { animation: rank-up 0.6s ease-out; }
@keyframes rank-up { 0% { scale: 1.35; } 100% { scale: 1; } }
#rank-badge { display: none; }
#dist { --badge: var(--hud); }
#dist.m0 { --badge: #ffd23d; } #dist.m1 { --badge: #ff8cc6; } #dist.m2 { --badge: #9dff3d; }
#dist.top #rank-badge {
  display: block;
  padding: 4px 8px 3px;
  font-family: 'Audiowide', sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--badge);
  border: 2px solid var(--badge);
  border-radius: 4px;
  text-shadow: 0 0 8px var(--badge);
  box-shadow: 0 0 10px var(--badge), inset 0 0 8px var(--badge);
  animation: badge-glow 1.2s ease-in-out infinite;
}
@keyframes badge-glow { 50% { box-shadow: 0 0 18px var(--badge), inset 0 0 12px var(--badge); } }

#best {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  top: calc(16px + env(safe-area-inset-top));
  font-size: 14px;
  opacity: 0.8;
}

/* Army count: fixed at the bottom center, clear of the army and the thumb.
   Gains ("+371") sit to its left, losses ("−45") to its right. */
#army-hud {
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  visibility: hidden;
}

#mute {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  top: calc(38px + env(safe-area-inset-top));
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
/* Pause sits left of mute; only shown during a run. */
#pause-btn {
  position: absolute;
  right: calc(48px + env(safe-area-inset-right));
  top: calc(38px + env(safe-area-inset-top));
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  visibility: hidden;
}
#pause-btn.show { visibility: visible; }
#mute svg, #pause-btn svg { width: 100%; height: 100%; fill: none; stroke: var(--hud); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(157, 255, 61, 0.7)); }
#pause-btn svg { stroke-width: 2.6; }
#mute .x { display: none; }
#mute.off .on { display: none; }
#mute.off .x { display: inline; }
#mute.off svg { opacity: 0.6; }

#count {
  position: relative;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 10px var(--you), 0 0 22px var(--you);
}

#count.pop { animation: pop 0.25s ease-out; }
@keyframes pop { 0% { scale: 1.3; } 100% { scale: 1; } }

/* Gains on the left of the count (green), losses on the right (red). Each
   is a running total that stays while changes keep coming, bumps on every
   change, then fades. Both can show at once. */
.delta {
  position: absolute;
  bottom: 4px;
  white-space: nowrap;
  font-size: 20px;
  opacity: 0;
}
#gain { right: 100%; margin-right: 12px; color: var(--gain); text-shadow: 0 0 8px var(--gain); }
#loss { left: 100%; margin-left: 12px; color: var(--loss); text-shadow: 0 0 8px var(--loss); }
.delta.live { opacity: 1; }
.delta.bump { animation: delta-bump 0.3s ease-out; }
.delta.fade { animation: delta-fade 0.6s ease-out forwards; }
@keyframes delta-bump { 0% { opacity: 1; scale: 1.45; } 100% { opacity: 1; scale: 1; } }
@keyframes delta-fade { from { opacity: 1; } to { opacity: 0; translate: 0 -10px; } }

/* Close to losing: the count turns enemy-pink and beats like a heart. */
#count.danger {
  color: #ffd0e6;
  text-shadow: 0 0 10px var(--enemy), 0 0 22px var(--enemy);
  animation: heartbeat 0.9s ease-out infinite;
}
@keyframes heartbeat { 0%, 45%, 100% { scale: 1; } 12% { scale: 1.2; } 28% { scale: 1.08; } }

/* Danger vignette; opacity is driven from JS by how close you are to losing. */
#danger {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 61, 154, 0.38) 100%);
}

#debug {
  display: none;
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(64px + env(safe-area-inset-top));   /* below the score and level tag */
  font-size: 11px;
  color: var(--text);
  text-shadow: none;
  opacity: 0.8;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  pointer-events: none;
  text-align: center;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--text);
  background: radial-gradient(ellipse at center, rgba(4, 5, 26, 0.15), rgba(4, 5, 26, 0.7));
}

.hidden { display: none; }

/* Game over sits on a darker backdrop so the recap and board read over the scene. */
#over { background: radial-gradient(ellipse at center, rgba(4, 5, 26, 0.62), rgba(4, 5, 26, 0.85)); }

/* Game over, pause and extra life scroll on short phones: content stays
   centered when it fits (auto margins) and scrolls from the top when it
   doesn't. main.js keeps the game's own touch handling off them. */
#over, #pause, #continue, #entry-screen {
  pointer-events: auto;
  justify-content: flex-start;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#over > *, #continue > *, #entry-screen > * { flex-shrink: 0; }
#over > :first-child, #continue > :first-child, #entry-screen > :first-child { margin-top: auto; }
#over > :last-child, #continue > :last-child, #entry-screen > :last-child { margin-bottom: auto; }
/* The initials screen (made the board): the score, then the entry. */
#entry-screen { background: radial-gradient(ellipse at center, rgba(4, 5, 26, 0.7), rgba(4, 5, 26, 0.92)); animation: pause-in 0.2s ease-out; }
#entry-screen .recap { margin-bottom: 4px; }
.saved-note { margin: 10px 0 0; font-size: 13px; letter-spacing: .1em; color: var(--hud); }

.overlay h1 {
  margin: 0 0 8px;
  font-family: 'Audiowide', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 13vw, 76px);
  line-height: 1;
  text-transform: uppercase;
  color: #9ff0ff;
  text-shadow: 0 0 12px var(--you), 0 0 36px var(--you);
}

.overlay h2 {
  margin: 0 0 16px;
  font-family: 'Audiowide', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 9vw, 44px);
  color: #ff8cc6;
  text-shadow: 0 0 12px var(--enemy), 0 0 30px var(--enemy);
}

.overlay .sub { margin: 0; font-size: 15px; opacity: 0.85; }
.blink { margin-top: 28px; font-size: 18px; color: var(--hud); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.recap { width: min(300px, 100%); font-size: 15px; }
.recap .score { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.recap .score .label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.recap .score .big { font-size: 46px; line-height: 1.1; color: #fff; text-shadow: 0 0 12px var(--you), 0 0 28px var(--you); }
.recap .new-best { color: var(--hud); text-shadow: 0 0 8px var(--hud); font-size: 14px; }
.recap .section { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; text-align: left; margin: 4px 0 2px; }
.recap .kills { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-bottom: 10px; }
.recap .kill { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; }
.recap .kill canvas { width: 48px; height: 48px; grid-row: span 2; }
.recap .kill .n { font-size: 24px; color: #fff; line-height: 1; align-self: end; }
.recap .kill .pts { font-size: 12px; color: var(--hud); align-self: start; }
.recap .kill.none { opacity: .35; }
.recap .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(70, 210, 255, 0.2); }
.recap .row span:last-child { color: #fff; text-align: right; }
.recap .row.small { font-size: 12px; }

/* ---- 80s high score board ---- */
.board-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hud);
  text-shadow: 0 0 10px var(--hud);
  margin-bottom: 8px;
}
.board { list-style: none; margin: 0 auto; padding: 0; width: min(290px, 100%); font-size: 19px; }
.board li { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.board .rank { width: 44px; text-align: left; }
.board .ini { letter-spacing: .18em; white-space: pre; color: #fff; }
.board .lead { flex: 1; border-bottom: 2px dotted currentColor; opacity: .45; transform: translateY(-5px); }
.board .sc { color: #fff; }
/* Classic per-rank colors, cycling through the palette. */
.board li { color: var(--you); text-shadow: 0 0 6px currentColor; }
.board .r0 { color: #ffd23d; } .board .r1 { color: #ff8cc6; } .board .r2 { color: #9dff3d; }
.board .r3, .board .r6, .board .r9 { color: #7fe8ff; } .board .r4, .board .r7 { color: #c69bff; } .board .r5, .board .r8 { color: #ff9a5a; }
.board .me { animation: board-me 0.5s steps(2, start) infinite; }
.board .me .ini, .board .me .sc { color: inherit; }
@keyframes board-me { to { color: #fff; text-shadow: 0 0 12px #fff; } }

/* ---- Initials entry ---- */
#entry { pointer-events: auto; margin-top: 6px; }
.entry-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  animation: entry-title 0.6s steps(2, start) infinite;
}
@keyframes entry-title { from { color: #ffd23d; text-shadow: 0 0 10px #ffd23d; } to { color: #ff8cc6; text-shadow: 0 0 10px #ff8cc6; } }
.entry-rank { font-size: 13px; opacity: .8; margin: 2px 0 6px; }
/* Generous spacing and big touch targets: the ▲▼ buttons, the letters and
   ENTER sit well apart so a thumb doesn't hit the wrong one. */
.slots { display: flex; justify-content: center; gap: 30px; margin: 6px 0; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slot button, .entry-ui .enter {
  font: inherit;
  color: var(--hud);
  background: none;
  border: 0;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 20px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.slot .ch {
  width: 46px;
  font-size: 46px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 10px var(--you);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.slot.cur .ch { border-bottom-color: var(--hud); animation: cursor 0.8s steps(2, start) infinite; }
@keyframes cursor { to { border-bottom-color: transparent; } }
.entry-ui .enter {
  display: block;
  margin: 22px auto 0;
  padding: 8px 26px;
  font-size: 18px;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 2px solid var(--hud);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(157, 255, 61, 0.5), inset 0 0 10px rgba(157, 255, 61, 0.3);
}

/* ---- Title attract mode: logo and high scores take turns ---- */
/* Logo and board share one grid cell so the prompt below never moves. */
.title-stage { display: grid; align-items: center; justify-items: center; min-height: 340px; }
#title-logo, #title-board { grid-area: 1 / 1; transition: opacity 0.5s; }
#title-board { opacity: 0; }
#title.show-board #title-logo { opacity: 0; }
#title.show-board #title-board { opacity: 1; }

/* ---- Pause menu: the recap so far plus the board, Continue / Quit ---- */
#pause {
  pointer-events: auto;
  justify-content: flex-start;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  touch-action: pan-y;
  background: radial-gradient(ellipse at center, rgba(4, 5, 26, 0.7), rgba(4, 5, 26, 0.9));
  animation: pause-in 0.2s ease-out;
}
@keyframes pause-in { from { opacity: 0; } to { opacity: 1; } }
#pause > * { flex-shrink: 0; }
#pause > :first-child { margin-top: auto; }
#pause > :last-child { margin-bottom: auto; }
.overlay h1.paused { margin-bottom: 14px; animation: paused-glow 2.4s ease-in-out infinite; }
@keyframes paused-glow { 50% { text-shadow: 0 0 6px var(--you), 0 0 18px var(--you); opacity: .82; } }
.pause-body { display: grid; justify-items: center; width: min(300px, 100%); }
.pause-body > * { grid-area: 1 / 1; width: 100%; }
.pause-body .pause-board { visibility: hidden; }
.pause-body.show-board .recap { visibility: hidden; }
.pause-body.show-board .pause-board { visibility: visible; }
#pause-pace { margin-top: 10px; font-size: 14px; color: var(--hud); text-shadow: 0 0 8px rgba(157, 255, 61, 0.7); }
/* Phones: a two-tab switch between the run and the board. */
.pause-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.pause-tabs button {
  font: inherit;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .55;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 4px 10px;
  cursor: pointer;
}
.pause-tabs button.on { opacity: 1; color: var(--hud); border-bottom-color: var(--hud); text-shadow: 0 0 8px rgba(157, 255, 61, 0.7); }
/* Wide screens: run and board side by side, no tabs. */
@media (min-width: 680px) {
  .pause-tabs { display: none; }
  .pause-body { display: flex; align-items: flex-start; gap: 48px; width: auto; }
  .pause-body > * { width: 300px; }
  .pause-body .pause-board, .pause-body.show-board .recap { visibility: visible; }
}
.pause-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.btn {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  min-width: 200px;
  padding: 10px 26px;
  font-size: 18px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
  background: none;
  border: 2px solid rgba(207, 232, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
}
.btn.primary {
  padding: 14px 34px;
  font-size: 22px;
  color: var(--hud);
  border-color: var(--hud);
  text-shadow: 0 0 8px rgba(157, 255, 61, 0.7);
  box-shadow: 0 0 12px rgba(157, 255, 61, 0.5), inset 0 0 12px rgba(157, 255, 61, 0.3);
}
.btn:active { scale: 0.96; }

/* ---- Version, keyboard hints, beta experiments ---- */
/* Version: small and quiet along the bottom of the title and pause screens. */
.version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .4;
  pointer-events: none;
}
#pause .version { position: static; margin-top: 16px; }
/* Keyboard hints show only once a key is pressed (body.kb); touch hides them. */
.kb-hint, .kb-only { display: none; }
body.kb .kb-hint { display: block; }
body.kb .kb-only { display: inline; }
body.kb .touch-only { display: none; }
.kb-hint { margin: 10px 0 0; font-size: 13px; color: var(--text); opacity: .65; letter-spacing: .06em; }
/* Pause-menu experiments (beta): small toggles under the main buttons. */
.pause-lab { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.pause-lab button {
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--you);
  background: none;
  border: 1px dashed rgba(70, 210, 255, 0.5);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

/* ---- Level banner ("LEVEL 1", "LEVEL 1 COMPLETE") ----
   Sweeps in across the upper screen, holds, fades (ANIM.toastLife 2.4s). */
#toast {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
#toast .t1 {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(30px, 10vw, 54px);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px var(--you), 0 0 32px var(--you);
}
#toast .t2 { margin-top: 6px; font-size: 15px; color: var(--text); text-shadow: 0 0 6px rgba(70, 210, 255, 0.6); }
#toast.show { animation: toast 2.4s ease-out forwards; }
/* With a new enemy: the banner stays a little longer and the sprite (64px,
   no words) fades in under the line after ~0.9s. */
#toast.show.foe { animation-duration: 3.1s; }
#toast .t3 { display: none; width: 64px; height: 64px; margin: 10px auto 0; opacity: 0; }
#toast.foe .t3 { display: block; }
#toast.show.foe .t3 { animation: toast-foe 3.1s ease-out forwards; }
@keyframes toast-foe { 0%, 28% { opacity: 0; scale: 0.6; } 40% { opacity: 1; scale: 1.1; } 48% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes toast {
  0% { opacity: 0; translate: 0 12px; letter-spacing: .3em; }
  12% { opacity: 1; translate: 0 0; letter-spacing: 0; }
  75% { opacity: 1; }
  100% { opacity: 0; translate: 0 -8px; }
}

/* ---- New-enemy levels: mini-boss health bar ---- */
/* Boss bar: thin, across the top under the score, in the enemy's pink. */
#boss-bar {
  position: absolute;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top));
  width: min(260px, 60vw);
  height: 8px;
  transform: translateX(-50%);
  border: 1px solid var(--enemy);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 61, 154, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
#boss-bar.on { opacity: 1; animation: boss-in 1s ease-out; }
/* The bar fills in slowly as the mini-boss appears (then the gates shatter). */
@keyframes boss-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#boss-bar .fill { height: 100%; width: 100%; background: var(--enemy); box-shadow: 0 0 8px var(--enemy); transition: width 0.12s; }

/* ---- Title: mode buttons (Story is the main CTA) ---- */
#title-modes { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; pointer-events: auto; }
#title-modes .mode-note { margin: 2px 0 0; font-size: 12px; letter-spacing: .08em; opacity: .6; }

/* Debug panel (?debug only, src/debugPanel.js): a gear button top-right
   opens a scrollable panel of run controls and difficulty sliders. */
#dbg {
  position: fixed;
  right: 8px;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 50;
  font: 11px/1.3 ui-monospace, Menlo, monospace;
  color: var(--text);
  text-shadow: none;
}
#dbg .dbg-toggle {
  float: right;
  width: 30px; height: 30px;
  border: 1px solid rgba(207, 232, 255, 0.35);
  border-radius: 6px;
  background: rgba(4, 5, 26, 0.75);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
#dbg .dbg-body {
  display: none;
  clear: both;
  margin-top: 6px;
  width: min(280px, calc(100vw - 32px));
  /* Fit the visible viewport: dvh excludes the phone browser's toolbars
     (100vh doesn't). 112px = the panel's top (64) + gear (30) + gap (6) + a 12px margin below. */
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(207, 232, 255, 0.25);
  border-radius: 8px;
  background: rgba(4, 5, 26, 0.88);
  touch-action: pan-y;
}
#dbg.open .dbg-body { display: block; }
#dbg .dbg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#dbg .dbg-live { color: var(--hud); }
#dbg .dbg-sec { margin: 10px 0 4px; color: var(--you); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
#dbg .dbg-row { display: block; margin: 4px 0 6px; cursor: help; }
#dbg .dbg-row span { display: flex; justify-content: space-between; }
#dbg .dbg-row.changed span { color: var(--hud); }
#dbg .dbg-v { font-style: normal; opacity: 0.9; }
#dbg input[type=range] { width: 100%; margin: 2px 0 0; accent-color: var(--you); }
#dbg .dbg-ctl { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
#dbg .dbg-ctl input[type=range] { flex: 1; min-width: 0; margin: 0; }
#dbg .dbg-ctl button.dbg-nudge { flex: none; width: 24px; height: 22px; padding: 0; font-size: 14px; line-height: 1; touch-action: none; }
#dbg .dbg-check { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
#dbg .dbg-btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
#dbg button:not(.dbg-toggle), #dbg select {
  padding: 3px 7px;
  border: 1px solid rgba(207, 232, 255, 0.35);
  border-radius: 4px;
  background: rgba(70, 210, 255, 0.08);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
/* Copy values / Reset tweaks stay pinned to the bottom while the sliders scroll. */
#dbg .dbg-foot {
  position: sticky;
  bottom: -8px;            /* flush with the panel's bottom edge (its padding) */
  margin: 10px -10px -8px;
  padding: 8px 10px;
  background: rgba(4, 5, 26, 0.96);
  border-top: 1px solid rgba(207, 232, 255, 0.2);
  z-index: 1;
}

/* Challenge mode is locked until World 1 is beaten in Story mode: greyed
   out with a lock icon (main.js syncChallengeLock). */
.btn.locked {
  color: rgba(207, 232, 255, 0.35);
  border-color: rgba(207, 232, 255, 0.18);
  cursor: not-allowed;
}
.btn.locked:active { scale: 1; }
.btn .lock {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Extra life (story, new-enemy levels): the team was wiped; continue the
   mini-boss fight or retreat. */
#continue {
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(4, 5, 26, 0.6), rgba(4, 5, 26, 0.88));
  animation: pause-in 0.2s ease-out;
}
#continue .sub { max-width: 300px; margin-top: 8px; }
#quit-confirm .sub { margin: 0 0 4px; }
#over-quit { margin-top: 18px; pointer-events: auto; }
.btn.danger { color: #ff8cc6; border-color: var(--enemy); text-shadow: 0 0 8px rgba(255, 61, 154, 0.7); }
.pause-actions.hidden { display: none; }   /* .pause-actions sets display after .hidden */

/* Level tag under the live score ("Level 3"; Challenge: "Gate 12"), with a
   small bomb mark while a bomb is ready (hud.setLevel). */
#level-tag {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 8px;
}
#level-tag:empty { display: none; }
/* Power buttons: the bomb (bottom left, orange) and focus fire (bottom
   right, cyan), shown once unlocked. An outline ring fills in their color as
   enemies are shot down (hud.setPower sets its dash length); full, the button
   fills in and pulses: tap it (B / F on a keyboard). Focus fire's ring drains
   while its lasers fire (.active). */
#bomb-btn, #focus-btn {
  position: absolute;
  bottom: calc(64px + env(safe-area-inset-bottom));   /* above the army count row, clear of its +/− tags */
  width: 88px;
  height: 88px;
  padding: 0;
  display: none;
  border: none;
  border-radius: 50%;
  background: rgba(4, 5, 26, 0.45);
  pointer-events: auto;
  cursor: default;
  --pc: 255, 180, 61;      /* the button's color (RGB) */
  --pc-deep: 255, 110, 20;
}
#bomb-btn { left: calc(18px + env(safe-area-inset-left)); }
#focus-btn { right: calc(18px + env(safe-area-inset-right)); --pc: 70, 210, 255; --pc-deep: 20, 120, 255; }
#bomb-btn.show, #focus-btn.show { display: block; }
#bomb-btn .ring, #focus-btn .ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; }
#bomb-btn .ring .track, #focus-btn .ring .track { stroke: rgba(var(--pc), 0.22); stroke-width: 2.2; }
#bomb-btn .ring .fill, #focus-btn .ring .fill { stroke: rgb(var(--pc)); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 126; filter: drop-shadow(0 0 3px rgba(var(--pc), 0.8)); transition: stroke-dasharray 0.25s ease-out; }
#bomb-btn .icon, #focus-btn .icon { position: absolute; inset: 20%; width: 60%; height: 60%; fill: none; stroke: rgb(var(--pc)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
#focus-btn .icon .dot { fill: rgb(var(--pc)); }
#bomb-btn .icon .spark, #focus-btn .icon .spark { display: none; }
#bomb-btn.ready, #focus-btn.ready { cursor: pointer; background: radial-gradient(circle, rgba(var(--pc), 0.95), rgba(var(--pc-deep), 0.85) 70%); box-shadow: 0 0 20px rgba(var(--pc), 0.8); animation: power-ready 1s ease-in-out infinite; }
#bomb-btn.ready .icon, #focus-btn.ready .icon { stroke: #fff; opacity: 1; }
#focus-btn.ready .icon .dot { fill: #fff; }
#bomb-btn.ready .icon .spark { display: inline; animation: blink 0.3s steps(2, start) infinite; }
#focus-btn.active { box-shadow: 0 0 24px rgba(var(--pc), 0.9); }
#focus-btn.active .icon { opacity: 1; animation: blink 0.15s steps(2, start) infinite; }
#bomb-btn.fresh, #focus-btn.fresh { animation: power-in 0.5s ease-out, power-ready 1s ease-in-out 0.5s infinite; }
#bomb-btn.ready:active, #focus-btn.ready:active { scale: 0.9; }
@keyframes power-in { 0% { scale: 1.6; } 100% { scale: 1; } }
@keyframes power-ready { 50% { box-shadow: 0 0 38px rgba(var(--pc), 1); } }