/* Design 03: noir meets neon. Gunmetal and chrome, neon cyan, blood red, data rain.
   No external fonts or images. Everything is CSS, plus one canvas drawn by fx.js. */
:root {
  --black: #050608;
  --card: rgba(9, 12, 18, .80);
  --chrome-hi: #f4f7fa;
  --chrome: #b9c3cc;
  --chrome-lo: #4d5660;
  --steel-line: rgba(185, 195, 204, .35);
  --cyan: #00e5ff;
  --cyan-dim: rgba(0, 229, 255, .35);
  --red: #c4001f;
  --red-hi: #ff2a3d;
  --magenta: #ff2e88;
  --green: #39ff14;
  --amber: #ff9f1a;
  --text: #e6edf2;
  --text-dim: #93a1ad;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Playfair Display", "Constantia", "Cambria", Georgia, "Times New Roman", serif;
  --mono: "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --chrome-gradient: linear-gradient(180deg, var(--chrome-hi) 0%, #d7dee4 28%, #8c97a1 52%, #e9eef2 72%, var(--chrome-lo) 100%);
  --glow-cyan: 0 0 6px rgba(0, 229, 255, .8), 0 0 18px rgba(0, 229, 255, .4);
  --glow-red: 0 0 6px rgba(255, 42, 61, .85), 0 0 18px rgba(255, 42, 61, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 45% at 10% 105%, rgba(196, 0, 31, .20), transparent 70%),
    radial-gradient(ellipse 60% 40% at 92% 100%, rgba(0, 229, 255, .12), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(0, 229, 255, .08), transparent 65%),
    var(--black);
  background-attachment: fixed;
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }

/* ---------- atmosphere ---------- */
.rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .24;
  pointer-events: none;
}

.neon-haze {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 72%, rgba(196, 0, 31, .20), transparent 30%),
    radial-gradient(circle at 96% 30%, rgba(0, 229, 255, .10), transparent 28%);
  animation: haze 9s ease-in-out infinite alternate;
}
@keyframes haze {
  0% { opacity: .55; }
  45% { opacity: .9; }
  48% { opacity: .45; }
  50% { opacity: .95; }
  100% { opacity: .7; }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .7) 100%);
}

/* ---------- HUD bar ---------- */
.hud-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--steel-line);
  background: rgba(0, 0, 0, .5);
}
.hud-marker { color: var(--chrome); }
.hud-marker::before { content: "\25C6  "; color: var(--red-hi); text-shadow: var(--glow-red); }
.hud-ok::before { content: "\25CF  "; color: var(--green); text-shadow: 0 0 6px var(--green); }
.hud-alert { color: var(--red-hi); text-shadow: var(--glow-red); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- layout ---------- */
.wrapper {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 16px 26px;
}

/* ---------- header ---------- */
.est {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}
.diamond, .deco-rule span {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--red-hi);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 42, 61, .7);
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: .95;
}
.title-line {
  position: relative;
  display: block;
  font-size: clamp(2.5rem, 9.5vw, 5.3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: .14em; /* balance the trailing letter-spacing */
  color: var(--chrome);
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(0, 229, 255, .25));
}
/* Glitch slices borrowed from design 01, tuned down for noir. */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding-left: .14em;
  -webkit-text-fill-color: currentColor;
  background: none;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch::before {
  color: var(--red-hi);
  transform: translate(-3px, 0);
  clip-path: inset(0 0 100% 0);
  animation: glitch-a 5.5s infinite steps(1);
}
.glitch::after {
  color: var(--cyan);
  transform: translate(3px, 0);
  clip-path: inset(100% 0 0 0);
  animation: glitch-b 4.8s infinite steps(1);
}
@keyframes glitch-a {
  0%, 90%, 100% { clip-path: inset(0 0 100% 0); }
  91% { clip-path: inset(12% 0 58% 0); transform: translate(-6px, -1px); }
  93% { clip-path: inset(58% 0 18% 0); transform: translate(5px, 1px); }
  95% { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-b {
  0%, 93%, 100% { clip-path: inset(100% 0 0 0); }
  94% { clip-path: inset(68% 0 6% 0); transform: translate(6px, 1px); }
  96% { clip-path: inset(22% 0 62% 0); transform: translate(-5px, -1px); }
  97% { clip-path: inset(100% 0 0 0); }
}
.title-small {
  display: block;
  margin: 2px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 3.8vw, 1.55rem);
  letter-spacing: .3em;
  color: var(--text-dim);
}

.motto {
  margin: 6px 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  letter-spacing: .35em;
  color: var(--red-hi);
  text-shadow: var(--glow-red);
}

.deco-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 10px;
  max-width: 440px;
}
.deco-rule::before,
.deco-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 6px rgba(0, 229, 255, .5);
}

.tagline {
  margin: 0 auto 16px;
  max-width: 860px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text-dim);
}
.tagline strong {
  font-style: italic;
  font-weight: 400;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}

/* ---------- cards: steel frame plus neon corner brackets ---------- */
.card {
  position: relative;
  margin: 0 auto 16px;
  padding: 20px 20px 16px;
  background: var(--card);
  border: 1px solid var(--steel-line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .75), inset 0 0 50px rgba(0, 229, 255, .04);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--cyan);
  filter: drop-shadow(0 0 5px var(--cyan));
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  padding-left: .4em;
}
h2::before { content: "// "; color: var(--red-hi); text-shadow: var(--glow-red); }

/* ---------- marker row: coin | heading | burn timer (one row, no extra height) ---------- */
.marker-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "coin head burn";
  align-items: center;
  gap: 0;
  margin: -6px -20px 12px; /* span the card's full width so the side columns start at its real edges */
}
/* centered in their side columns: equal space to the card edge and to the heading */
.marker-row .coin-wrap { grid-area: coin; justify-self: center; }
.marker-row h2 { grid-area: head; margin: 0 -.4em; } /* cancel the letter-spacing slack so both sides measure evenly */
.marker-row .burn { grid-area: burn; justify-self: center; }

/* ---------- burn timer: a red counter from an old switchboard room ---------- */
.burn {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 150px;
  padding: 7px 12px 8px;
  background: linear-gradient(180deg, #0b0d10, #050607);
  border: 1px solid #2b3036;
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 42, 61, .25), 0 0 18px rgba(255, 42, 61, .12);
  position: relative;
}
/* two tiny brass screws */
.burn::before,
.burn::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9aa3ab, #3b4248);
}
.burn::before { left: 5px; }
.burn::after { right: 5px; }
.burn-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-left: .3em;
}
.burn-digits {
  position: relative;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--red-hi);
  text-shadow: var(--glow-red);
  font-variant-numeric: tabular-nums;
}
/* unlit "88:88" segments behind the digits, like an old counter */
.burn-digits::before {
  content: attr(data-ghost);
  position: absolute;
  inset: 0;
  color: rgba(255, 42, 61, .08);
  text-shadow: none;
}
.burn-digits > span { position: relative; }
.burn-bar {
  --left: 1;
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .06);
}
.burn-bar > span {
  display: block;
  height: 100%;
  width: calc(var(--left) * 100%);
  background: var(--red-hi);
  box-shadow: 0 0 6px var(--red-hi);
  transition: width .25s linear;
}
.burn-bar.empty > span { width: 0; }
.burn.warning .burn-digits { animation: burn-flash .5s steps(2, start) infinite; }
.burn.warning { box-shadow: inset 0 0 0 1px #000, inset 0 2px 10px rgba(0, 0, 0, .9), 0 0 0 1px var(--red-hi), 0 0 24px rgba(255, 42, 61, .45); }
.burn.burned .burn-digits,
.burn.idle .burn-digits { color: rgba(255, 42, 61, .35); text-shadow: none; }
.burn.burned .burn-label { color: var(--red-hi); text-shadow: var(--glow-red); }
@keyframes burn-flash { to { opacity: .35; } }

/* ---------- the coin: the one gold thing on the page (inline SVG) ---------- */
.coin-wrap {
  perspective: 700px;
  width: 92px;
  height: 92px;
}
.coin {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .85), 0 0 34px rgba(212, 160, 40, .35), 0 0 0 1px rgba(255, 42, 61, .35);
  transform-style: preserve-3d;
}
.coin svg { display: block; width: 100%; height: 100%; }
.coin.flip { animation: coin-flip .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes coin-flip {
  0% { transform: translateY(0) rotateY(0); }
  40% { transform: translateY(-18px) rotateY(540deg); }
  100% { transform: translateY(0) rotateY(1080deg); }
}

/* ---------- the password ---------- */
.output {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 4.3vw, 2.15rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--chrome-hi);
  background: rgba(0, 0, 0, .78);
  border: 1px solid var(--cyan-dim);
  border-left: 3px solid var(--red-hi);
  border-right: 3px solid var(--red-hi);
  border-radius: 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 229, 255, .12);
  text-shadow: 0 0 10px rgba(0, 229, 255, .35);
  letter-spacing: .05em;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.2em; /* height is set by app.js to fit the password, in every browser */
  caret-color: transparent;
}
.output:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.output::placeholder { color: rgba(255, 42, 61, .55); font-size: .6em; letter-spacing: .2em; text-transform: uppercase; text-shadow: none; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; text-shadow: none; }
.btn:disabled:hover { background: transparent; color: var(--red-hi); }
.output.scrambling { color: var(--red-hi); text-shadow: var(--glow-red); }

/* ---------- buttons ---------- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.btn {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.btn-primary {
  font-size: clamp(1.1rem, 3.8vw, 1.35rem);
  letter-spacing: .3em;
  padding: 15px 30px 15px calc(30px + .3em);
  color: var(--cyan);
  background: rgba(0, 0, 0, .7);
  border: 1px solid var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(0, 229, 255, .15);
  text-shadow: var(--glow-cyan);
}
.btn-primary:hover { color: #001216; background: var(--cyan); text-shadow: none; box-shadow: 0 0 28px rgba(0, 229, 255, .6); }
.btn-secondary {
  font-size: 1.05rem;
  letter-spacing: .3em;
  padding: 15px 24px 15px calc(24px + .3em);
  color: var(--red-hi);
  background: transparent;
  border: 1px solid var(--red-hi);
  text-shadow: var(--glow-red);
}
.btn-secondary:hover { background: var(--red); color: #fff; text-shadow: none; box-shadow: 0 0 24px rgba(196, 0, 31, .7); }
.copy-status:empty { margin: 0; } /* takes no space until there is a message */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.copy-status {
  margin: 8px 0 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cyan);
}

/* ---------- threat level ---------- */
.readout {
  margin: 6px auto 6px;
  max-width: 700px;
  text-align: left;
}
.readout-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 1rem;
}
.readout-label {
  white-space: nowrap;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.readout-value { color: var(--cyan); font-weight: 600; text-align: right; }
.readout .readout-row { align-items: center; }

/* "THREAT" as a crooked red kill-order stamp with a red glow; "LEVEL" stays quiet. */
.threat-label { display: inline-flex; align-items: center; gap: .55em; letter-spacing: normal; }
.threat-glow {
  display: inline-block;
  /* the glow lives on a wrapper so it follows the stamp's inked shape instead of being clipped by the mask */
  filter: drop-shadow(0 0 4px rgba(255, 42, 61, .9)) drop-shadow(0 0 12px rgba(255, 42, 61, .5));
}
.threat {
  display: inline-block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Bahnschrift Condensed", "Franklin Gothic Heavy", "Arial Black", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-hi);
  padding: 3px 8px 1px calc(8px + .14em);
  border: 3px double var(--red-hi);
  transform: rotate(-4deg);
  opacity: .95;
  box-shadow: inset 0 0 6px rgba(255, 42, 61, .35);
  -webkit-mask: repeating-linear-gradient(15deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px); /* worn ink (Safari) */
  mask: repeating-linear-gradient(15deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px);
}
.threat-label .level {
  font-size: .9rem;
  letter-spacing: .3em;
  color: var(--text-dim);
}
.readout-dim { color: var(--text-dim); font-weight: 400; }
#strength, #possibilities { white-space: nowrap; } /* on narrow screens, wrap between the two parts, never inside one */
.segments {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 4px;
  margin: 8px 0 6px;
  height: 14px;
}
.segments i {
  display: block;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(185, 195, 204, .15);
  transform: skewX(-20deg);
}
.segments i.on { background: currentColor; border-color: currentColor; box-shadow: 0 0 8px currentColor; }
.segments.weak { color: var(--red-hi); }
.segments.fair { color: var(--amber); }
.segments.strong { color: var(--cyan); }
.segments.max { color: var(--green); }

.aftermath { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(1.3rem, 4vw, 1.6rem); line-height: 1.35; color: var(--text-dim); }
.aftermath strong { font-style: italic; font-weight: 400; color: var(--red-hi); text-shadow: var(--glow-red); }

/* ---------- arsenal (always open, compact) ---------- */
.options-panel { text-align: left; padding: 16px 20px 12px; }
.options-panel h2 { text-align: center; margin-bottom: 14px; }
#options {
  display: grid;
  gap: 10px 12px;
  /* five settings in one row; Ending gets the most room */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, .85fr);
  margin: 0 0 10px;
}
@media (max-width: 760px) {
  #options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  #options { grid-template-columns: minmax(0, 1fr); }
}
#options label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
#options label span {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(0, 0, 0, .75);
  border: 1px solid var(--steel-line);
  border-radius: 0;
  padding: 8px 10px;
}
select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); }
select option { background: #0b0f15; color: var(--text); }
.prefs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 229, 255, .18);
}
.hint { flex: 1 1 280px; font-size: .92rem; color: var(--text-dim); margin: 0; }
.btn-reset {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--steel-line);
  border-radius: 0;
  padding: 6px 12px;
  cursor: pointer;
}
.btn-reset:hover { color: var(--red-hi); border-color: var(--red-hi); text-shadow: var(--glow-red); }
.btn-reset:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- house rules ---------- */
.how { text-align: left; }
.how h2 { text-align: center; }
.rules { list-style: none; margin: 0; padding: 0; font-size: 1.05rem; }
.rules li {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed rgba(0, 229, 255, .18);
}
.rules li:first-child { border-top: 0; }
.numeral {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: right;
  color: var(--red-hi);
  text-shadow: var(--glow-red);
}

.notice {
  border: 1px solid var(--red-hi);
  padding: 12px;
  background: rgba(196, 0, 31, .15);
}

footer { margin-top: 14px; }
footer p {
  margin: 0;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-left: .4em;
}
footer p::before { content: "<< "; color: var(--red-hi); }
footer p::after { content: " >>"; color: var(--red-hi); }

/* ---------- 404 ---------- */
.notfound { padding-top: 40px; }
.notfound .title-line { font-size: clamp(2rem, 8.5vw, 4.6rem); letter-spacing: .1em; padding-left: .1em; }
.nf-card { max-width: 640px; }
.nf-text { margin: 0 0 12px; font-family: var(--serif); font-size: 1.2rem; color: var(--text); }
.nf-dim { color: var(--text-dim); font-size: 1.05rem; }
.nf-card .buttons { margin-top: 18px; }
a.btn { display: inline-block; text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .marker-row {
    /* equal gaps at both card edges and between the coin and timer */
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-areas: ". coin . burn ." "head head head head head";
    gap: 8px 0;
  }
  .marker-row .coin-wrap { justify-self: center; }
  .marker-row .burn { justify-self: center; }
  .marker-row h2 { text-align: center; }
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .coin-wrap, .coin { width: 76px; height: 76px; }
  .burn { min-width: 130px; }
  .burn-digits { font-size: 1.7rem; }
  .buttons { gap: 10px; flex-wrap: nowrap; }
  .btn-primary { font-size: 1rem; letter-spacing: .12em; padding: 13px 14px 13px calc(14px + .12em); }
  .btn-secondary { font-size: .95rem; letter-spacing: .12em; padding: 13px 14px 13px calc(14px + .12em); }
  .readout-row { flex-wrap: wrap; gap: 0 10px; }
  .readout-label { white-space: nowrap; }
  .readout-value { text-align: left; }
  .hud-bar { font-size: .68rem; gap: 4px 12px; }
  .title-line, .glitch::before, .glitch::after { letter-spacing: .08em; padding-left: .08em; }
  .card { padding: 28px 14px 22px; }
  .marker-row { margin-left: -14px; margin-right: -14px; }
  .motto { letter-spacing: .2em; }
  h2 { letter-spacing: .25em; }
  .readout-row { font-size: .86rem; } /* fits the default strength line on one row at ~410px phones */
}

@media (prefers-reduced-motion: reduce) {
  .neon-haze, .coin.flip, .glitch::before, .glitch::after, .hud-alert, .burn.warning .burn-digits { animation: none; }
  .burn-bar > span { transition: none; }
  .rain { display: none; }
  .btn { transition: none; }
}