:root {
  /* Brutalist zine palette (DOM only — shader palette is untouched). */
  --paper:         #fafaf5;
  --ink:           #0a0a0a;
  --highlight:     #ffe600;
  --highlight-hot: #ffd000;
  --danger:        #e53935;

  /* Legacy Y2K vars retained so the shader-side code and any unstyled
   * fallback still resolve, but no DOM rule below uses them. */
  --bg-black:    #050007;
  --y2k-cyan:    #00e5ff;
  --y2k-pink:    #ff4bd8;
  --y2k-silver:  #e8e8f0;
  --y2k-purple:  #8a2be2;

  --border:        3px solid var(--ink);
  --border-thin:   2px solid var(--ink);
  --shadow-hard:   6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-press:  2px 2px 0 var(--ink);

  --font-display: "Archivo Black", "Impact", system-ui, sans-serif;
  --font-mono:    "Space Mono", "Courier New", ui-monospace, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-black);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font-mono);
}

canvas {
  /* Full-viewport canvas: the shader samples bg.png (with beer-driven warp)
   * for every pixel outside the card, so the zine bg now fills the whole
   * window instead of showing only as a CSS frame around the card. */
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* Menu / summary screens own the viewport — hide gameplay chrome so
   the zine card doesn't compete with HUD / receipt / vitals / shop
   buttons bleeding through underneath. Canvas stays visible so the
   bg.png texture frames the menu card. */
body.ui-overlay #hud,
body.ui-overlay #vitals,
body.ui-overlay #receipt,
body.ui-overlay #buy-beer,
body.ui-overlay #buy-nicotine,
body.ui-overlay #buy-burger,
body.ui-overlay #buy-condom,
body.ui-overlay #next-ticket,
body.ui-overlay #fps { display: none !important; }

/* ─── FPS overlay (tiny, top-left above HUD — deprioritised) ────────── */
#fps {
  position: fixed;
  top: 2px; left: 6px;
  padding: 1px 5px;
  font: 700 9px/1.1 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 12;
}
#fps.good { background: #b9ff66; }
#fps.warn { background: var(--highlight); }
#fps.bad  { background: var(--danger); color: var(--paper); }

/* ─── Audio mute pill (v0.0.12) ─────────────────────────────────────── */
/* Sits below the FPS overlay top-left. Same zine-brutalist slab as the
   HUD / receipt cards. Hidden while the menu or summary screens are up
   so the paper cards don't compete with this tiny button. */
#audio-mute {
  position: fixed;
  top: 22px; left: 6px;
  width: 28px; height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-thin);
  box-shadow: var(--shadow-press);
  cursor: pointer;
  z-index: 12;
  user-select: none;
}
#audio-mute:hover  { background: var(--highlight); }
#audio-mute:active { transform: translate(2px, 2px); box-shadow: none; }
body.ui-overlay #audio-mute { display: none !important; }

/* Menu settings row: SOUND checkbox sits below START button, above RECORDS. */
#menu-settings {
  display: flex;
  justify-content: center;
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 0.1em;
  user-select: none;
}
#menu-settings label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
#menu-settings input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: var(--border-thin);
  background: var(--paper);
  cursor: pointer;
  position: relative;
}
#menu-settings input[type="checkbox"]:checked {
  background: var(--highlight);
}
#menu-settings input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── HUD ───────────────────────────────────────────────────────────── */
#hud {
  position: fixed;
  top: 22px; left: 16px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px 8px;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  transform: rotate(-1.2deg);
  font: 700 14px/1.15 var(--font-mono);
  color: var(--ink);
  z-index: 10;
  user-select: none;
}
.hud-row { display: flex; gap: 10px; align-items: baseline; }
.hud-row .label {
  font: 400 10px/1 var(--font-display);
  letter-spacing: 0.15em;
  color: var(--ink);
  opacity: 0.75;
  min-width: 66px;
  text-transform: uppercase;
}
.hud-row .value {
  font: 700 18px/1 var(--font-mono);
  color: var(--ink);
}

/* TIER chip: black slab with yellow text — echoes the "KOUVOLA BETON" blocks. */
#hud-tier {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--highlight);
  font: 400 14px/1.15 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hud-stat .value { display: inline-flex; align-items: center; gap: 6px; }
.hud-stat .stat-emoji {
  font-size: 16px;
  filter: drop-shadow(2px 2px 0 var(--ink));
}

/* Badge flash: hard 4-step invert pulse, no blur/glow. */
.hud-row.badge-flash {
  animation: badge-flash 500ms steps(4) 1;
}
@keyframes badge-flash {
  0%   { background-color: transparent; color: var(--ink); transform: scale(1); }
  25%  { background-color: var(--ink);  color: var(--paper); transform: scale(1.15); }
  75%  { background-color: var(--ink);  color: var(--paper); transform: scale(1.06); }
  100% { background-color: transparent; color: var(--ink); transform: scale(1); }
}

/* ─── Item drops ────────────────────────────────────────────────────── */
#item-drops {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 28;
}
.item-drop {
  position: fixed;
  top: 50%; left: 50%;
  font-size: 96px;
  line-height: 1;
  will-change: transform, opacity, filter;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(3px 3px 0 var(--ink));
}
/* Per-kind classes collapse to the same flat shadow for zine-style uniformity. */
.item-drop.clover,
.item-drop.burger,
.item-drop.coins,
.item-drop.beer {
  filter: drop-shadow(3px 3px 0 var(--ink));
}

/* ─── NEXT TICKET button (bottom-right; always rendered, :disabled until reveal) */
#next-ticket {
  position: fixed;
  bottom: 44px; right: 20px;
  padding: 10px 18px;
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  z-index: 11;
  transform: rotate(1.1deg);
}
#next-ticket:hover:not(:disabled) { background: var(--highlight-hot); }
#next-ticket:active:not(:disabled) {
  transform: rotate(1.1deg) translate(3px, 3px);
  box-shadow: var(--shadow-press);
}
#next-ticket:disabled {
  background: var(--paper);
  color: var(--ink);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── BUY BEER button (bottom-left, always visible unless game over) ── */
#buy-beer {
  position: fixed;
  bottom: 44px; left: 20px;
  padding: 10px 18px;
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  z-index: 11;
  transform: rotate(-1.2deg);
}
#buy-beer:hover:not(:disabled) { background: var(--highlight-hot); }
#buy-beer:active:not(:disabled) {
  transform: rotate(-1.2deg) translate(3px, 3px);
  box-shadow: var(--shadow-press);
}
#buy-beer:disabled {
  background: var(--paper);
  color: var(--ink);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── BUY NICOTINE button (stacks above BUY BEER) ───────────────────── */
#buy-nicotine {
  position: fixed;
  bottom: 92px; left: 20px;
  padding: 10px 18px;
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  z-index: 11;
  transform: rotate(1.1deg);
}
#buy-nicotine:hover:not(:disabled) { background: var(--highlight-hot); }
#buy-nicotine:active:not(:disabled) {
  transform: rotate(1.1deg) translate(3px, 3px);
  box-shadow: var(--shadow-press);
}
#buy-nicotine:disabled {
  background: var(--paper);
  color: var(--ink);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── BUY BURGER (+fat) and BUY CONDOM (+luck) — stack above NICOTINE ──
   Same visual language as BUY BEER / BUY NICOTINE, alternating rotation
   for zine-shake. Each button disables when you can't afford it OR when
   the underlying stat is already at the STAT_MAX cap (so you don't drop
   €8 on a burger that does nothing). */
#buy-burger, #buy-condom {
  position: fixed;
  left: 20px;
  padding: 10px 18px;
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  z-index: 11;
}
#buy-burger { bottom: 140px; transform: rotate(-0.6deg); }
#buy-condom { bottom: 188px; transform: rotate(0.6deg); }
#buy-burger:hover:not(:disabled),
#buy-condom:hover:not(:disabled) { background: var(--highlight-hot); }
#buy-burger:active:not(:disabled) {
  transform: rotate(-0.6deg) translate(3px, 3px);
  box-shadow: var(--shadow-press);
}
#buy-condom:active:not(:disabled) {
  transform: rotate(0.6deg) translate(3px, 3px);
  box-shadow: var(--shadow-press);
}
#buy-burger:disabled, #buy-condom:disabled {
  background: var(--paper);
  color: var(--ink);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Soulslike blackout backdrop ───────────────────────────────────── */
/* Content-less since v0.0.10; the summary card (#summary) paints on top
   of this fade for every end reason. Background + opacity only. */
#blackout {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.0);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: background 2500ms ease-in, opacity 2500ms ease-in;
}
#blackout.active {
  background: rgba(0, 0, 0, 0.92);
  opacity: 1;
  pointer-events: all;
}

/* ─── Vitals panel (bottom-right, stacked above NEXT TICKET — keeps
     the centre of the canvas clear of HUD chrome) ───────────────────── */
#vitals {
  position: fixed;
  bottom: 100px; right: 20px;
  width: 210px;
  padding: 8px 12px 6px;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  transform: rotate(-0.8deg);
  z-index: 10;
  user-select: none;
  font-family: var(--font-mono);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vital {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
}
.vital .label {
  grid-row: 1 / span 2;
  font: 400 11px/1 var(--font-display);
  letter-spacing: 0.12em;
}
.vital .value {
  font: 700 12px/1 var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vital .bar {
  display: block;
  height: 6px;
  background: rgba(10, 10, 10, 0.15);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.vital .fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #2a9d48;
  transition: width 120ms linear, background 200ms linear;
  will-change: filter;
}
/* Consumption feedback: filter-only flash so neither the bar nor its
   fill box changes shape — only the pixels inside brighten and wash
   to near-white, then settle back to the JS-driven colour. Triggered
   by toggling .pulse on and off from JS on each successful buy. */
.vital .fill.pulse {
  animation: vital-pulse 350ms ease-out;
}
@keyframes vital-pulse {
  0%   { filter: brightness(2.6) saturate(0.0); }
  40%  { filter: brightness(1.8) saturate(0.6); }
  100% { filter: brightness(1.0) saturate(1.0); }
}

/* BEER is display-only since v0.0.7; styling falls through to .hud-row /
   .hud-stat like POUCH / MULT / INFL so the row reads as "just another stat". */

/* ─── Menu + Summary screens (v0.0.10 meta-loop) ────────────────────── */
/* Both sit in the screen-sized overlay space above the canvas; only one
   is visible at any time. Zine-brutalist palette mirrors the receipt
   + HUD cards (paper bg, ink border, hard shadow, slight rotate). */
.screen {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-0.8deg);
  width: min(520px, 92vw);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 42;
}
.screen h1 {
  margin: 0;
  font: 400 40px/1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.screen h2 {
  margin: 12px 0 4px;
  padding: 2px 10px;
  align-self: flex-start;
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.2em;
  color: var(--highlight);
  background: var(--ink);
  text-transform: uppercase;
}
.screen button {
  padding: 10px 20px;
  font: 400 16px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  align-self: flex-start;
}
.screen button:hover { background: var(--highlight-hot); }
.screen button:active {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-press);
}

#menu-title {
  font-size: clamp(28px, 6vw, 44px);
  line-height: 0.95;
}
#menu-start {
  align-self: center;
  padding: 14px 28px;
  font-size: 18px;
}
#menu-records { display: flex; flex-direction: column; gap: 6px; }
#menu-records .menu-records-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-left: 6px;
  /* h2 uses --highlight on ink, keep sub inline in the same chip. */
}
#menu-records-list {
  list-style: none;
  margin: 0; padding: 0;
  font: 700 13px/1.3 var(--font-mono);
}
#menu-records-list .rec-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(10, 10, 10, 0.2);
  align-items: baseline;
}
#menu-records-list .rec-row .rank { color: var(--ink); opacity: 0.6; }
#menu-records-list .rec-row .label { letter-spacing: 0.04em; }
#menu-records-list .rec-row .tag {
  padding: 0 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.1em;
}
#menu-records-list .rec-row .tag.curfew   { background: #4a6a8a; }
#menu-records-list .rec-row .tag.bac      { background: var(--danger); }
#menu-records-list .rec-row .tag.nic      { background: #7a3ea0; }
#menu-records-list .rec-row .tag.bankrupt { background: var(--ink); color: var(--highlight); }
#menu-records-list .empty {
  padding: 12px 0;
  text-align: center;
  font: 700 12px/1 var(--font-mono);
  opacity: 0.55;
  letter-spacing: 0.08em;
}
#menu-records-stats {
  font: 700 12px/1.5 var(--font-mono);
  opacity: 0.75;
}
#menu-records-wipe {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 11px;
  background: var(--paper);
  border: var(--border-thin);
  box-shadow: none;
}
#menu-records-wipe:hover { background: var(--danger); color: var(--paper); }
#menu-version {
  align-self: flex-end;
  margin-top: auto;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* Summary is the same .screen shell but stacks above #blackout (z-40). */
#summary {
  z-index: 42;
  transform: translate(-50%, -50%) rotate(0.8deg);
}
#summary-headline {
  align-self: flex-start;
  padding: 4px 14px;
  font-size: clamp(28px, 7vw, 44px);
  color: var(--paper);
  background: var(--danger);       /* default — reason 2 (BAC) hits this */
  border: var(--border-thin);
}
/* Headline tint per death cause. Curfew = amber (sunrise), nicotine =
   deep purple (tox), broke = ink slab with highlight text. BAC stays
   on the default danger red. */
#summary-headline[data-reason="1"] { background: #f2a93b; color: var(--ink); }
#summary-headline[data-reason="3"] { background: #5e2a82; }
#summary-headline[data-reason="4"] { background: var(--ink);  color: var(--highlight); }
#summary-sub {
  margin: 0;
  font: 700 13px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
#summary-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 8px 0 0;
  padding: 10px 0;
  border-top: 1px dashed var(--ink);
  border-bottom: 1px dashed var(--ink);
  font: 700 13px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#summary-stats dt {
  font: 400 11px/1 var(--font-display);
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
  align-self: center;
}
#summary-stats dd { margin: 0; text-align: right; }
#summary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#summary-actions button { align-self: auto; }

/* v0.0.13 — Global leaderboard submission row on summary screen. */
#submit-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 4px;
}
#submit-row input#nick {
  font: 600 14px/1 var(--font-display);
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  min-width: 140px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#submit-row input#nick:focus { outline: 2px solid var(--highlight); }
#submit-row button#submit-btn {
  font: 600 14px/1 var(--font-display);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#submit-row button#submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#submit-row #submit-status {
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.02em;
  min-height: 14px;
}
/* Populated status renders as an ink chip with paper text — same
   reversed-palette treatment as the active leaderboard tab, so
   "Rank #12" / "Rejected: …" read as white-on-black response chips. */
#submit-row #submit-status:not(:empty) {
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
}
#submit-row #submit-status.ok  { color: var(--highlight); }
#submit-row #submit-status.err { color: #ff8b87; }

/* v0.0.13 — Tulostaulu (global leaderboard) overlay. */
#tulostaulu {
  padding: 24px;
  overflow-y: auto;
  max-height: 100vh;
}
#tulostaulu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
#tulostaulu-head h1 {
  margin: 0;
  font: 600 28px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#tulostaulu-back {
  font: 600 14px/1 var(--font-display);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.04em;
}
#tulostaulu-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#tulostaulu-tabs button {
  flex: 1 0 auto;
  font: 600 13px/1 var(--font-display);
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.03em;
}
#tulostaulu-tabs button.active {
  background: var(--ink);
  color: var(--paper);
}
#tulostaulu-content {
  border: 2px solid var(--ink);
  padding: 8px 12px;
  font: 400 14px/1.4 var(--font-display);
}
#tulostaulu-content .tulostaulu-msg {
  margin: 12px 0;
  opacity: 0.7;
  text-align: center;
}
#tulostaulu-content ol.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) auto auto;
  gap: 2px 10px;
  align-items: baseline;
}
#tulostaulu-content ol.board li {
  display: contents;
}
#tulostaulu-content ol.board .rank  { opacity: 0.5; font-weight: 600; }
#tulostaulu-content ol.board .nick  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tulostaulu-content ol.board .value { font-weight: 600; text-align: right; }
#tulostaulu-content ol.board .date  { opacity: 0.5; font-size: 11px; text-align: right; }

@media (max-width: 480px) {
  #tulostaulu { padding: 14px; }
  #tulostaulu-head h1 { font-size: 22px; }
  #tulostaulu-tabs button { padding: 8px 6px; font-size: 11px; }
  #tulostaulu-content { font-size: 12px; }
  #tulostaulu-content ol.board .date { display: none; }
}

/* ─── Prize reveal overlay ──────────────────────────────────────────── */
#prize {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
}
#prize span {
  display: inline-block;
  padding: 10px 24px;
  font: 400 92px/1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  transform: rotate(-1.2deg);
}
#prize.slam span {
  animation: prize-slam 360ms steps(3) 1;
}
@keyframes prize-slam {
  0%   { transform: rotate(-1.2deg) scale(0);   opacity: 0; }
  60%  { transform: rotate(-1.2deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(-1.2deg) scale(1);   opacity: 1; }
}

/* ─── LEVEL UP flash ────────────────────────────────────────────────── */
#level-up {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  animation: flash 500ms steps(4) 1;
}
#level-up span {
  display: inline-block;
  padding: 10px 20px;
  font: 400 76px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  animation: levelup-scale 500ms steps(4) 1;
}
@keyframes flash {
  0%   { background: rgba(255, 230, 0, 0.85); }
  50%  { background: rgba(255, 230, 0, 0.55); }
  100% { background: rgba(255, 230, 0, 0);    }
}
@keyframes levelup-scale {
  0%   { transform: rotate(-1.2deg) scale(0.4); opacity: 0; }
  30%  { transform: rotate(-1.2deg) scale(1.2); opacity: 1; }
  70%  { transform: rotate(-1.2deg) scale(1);   opacity: 1; }
  100% { transform: rotate(-1.2deg) scale(1);   opacity: 0; }
}

/* ─── Debug panel ───────────────────────────────────────────────────── */
#debug {
  position: fixed;
  top: 40px; right: 12px;
  width: 280px;
  padding: 12px 16px;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  color: var(--ink);
  font: 700 12px/1.4 var(--font-mono);
  z-index: 15;
  display: flex; flex-direction: column; gap: 10px;
}
#debug h3 {
  margin: 0;
  padding: 3px 10px;
  font: 400 12px/1 var(--font-display);
  letter-spacing: 0.2em;
  color: var(--highlight);
  background: var(--ink);
  align-self: flex-start;
  text-transform: uppercase;
}
#debug label { display: flex; flex-direction: column; gap: 4px; }
#debug input[type="range"] { width: 100%; accent-color: var(--ink); }
#debug button {
  padding: 7px 10px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border-thin);
  box-shadow: var(--shadow-press);
  cursor: pointer;
}
#debug button:hover { background: var(--highlight-hot); }
#debug button:active { transform: translate(2px, 2px); box-shadow: none; }

/* ─── WebGPU-unsupported fallback ───────────────────────────────────── */
.unsupported {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
}
.unsupported h1 {
  margin: 0 0 16px;
  padding: 6px 14px;
  font: 400 28px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--highlight);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}
.unsupported p {
  margin: 0;
  max-width: 36ch;
  font: 700 14px/1.5 var(--font-mono);
  color: var(--ink);
}

/* ─── Touch-device tweaks ───────────────────────────────────────────── */
@media (hover: none) {
  #debug { display: none !important; }
}

/* ─── RECEIPT panel (top-right across every viewport; width flexes) ─── */
#receipt {
  position: fixed;
  top: 22px; right: 16px;
  /* clamp(140px, 22vw, 210px) keeps the receipt in the top-right corner
     at every size without overlapping the centred ticket card or the
     top-left HUD: ≥ 900 px → 210, mid 600–900 → ~22vw, ≤ 600 → 140. */
  width: clamp(140px, 22vw, 210px);
  max-height: 60dvh;
  padding: 10px 12px 8px;
  background: #faf6e8;
  border: var(--border);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  color: var(--ink);
  transform: rotate(0.8deg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  user-select: none;
}
#receipt-head {
  font: 700 11px/1.15 var(--font-display);
  letter-spacing: 0.18em;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ink);
}
#receipt-lines {
  list-style: none;
  margin: 0; padding: 6px 0 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
.receipt-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 6px;
  padding: 2px 0;
  font: 600 12px/1.2 var(--font-mono);
  align-items: baseline;
}
.receipt-row .t { color: var(--ink); opacity: 0.6; font-size: 11px; }
.receipt-row .l { text-transform: uppercase; letter-spacing: 0.04em; }
.receipt-row .a { text-align: right; font-variant-numeric: tabular-nums; }
.receipt-row .a.neg { color: var(--danger); }
.receipt-row .a.pos { color: #0a7a2e; }
.receipt-row .a.tier { color: var(--ink); background: var(--highlight); padding: 0 4px; }

@media (max-width: 600px) {
  /* canvas stays 100vw × 100dvh on mobile too — no need to resize. */
  #hud { top: 18px; left: 10px; gap: 2px; padding: 8px 10px 6px; }
  #vitals {
    bottom: 68px; right: 10px;
    width: clamp(140px, 50vw, 170px);
    padding: 6px 10px 4px;
    transform: rotate(-0.4deg);
  }
  .vital .label { font-size: 10px; }
  .vital .value { font-size: 11px; }
  .hud-row .label { font-size: 9px; min-width: 40px; }
  .hud-row .value { font-size: 14px; }
  #hud-tier { font-size: 11px; padding: 1px 6px; }
  #fps { font-size: 9px; top: 2px; left: 4px; padding: 0 4px; }
  /* Receipt stays top-right on mobile too — nudge padding/rotation down
     and clamp the height so it never reaches the card. Width stays
     driven by the clamp() on the base rule. */
  #receipt {
    top: 18px; right: 8px;
    max-height: 28dvh;
    padding: 6px 10px 6px;
    transform: rotate(0.3deg);
  }
  #receipt-head { font-size: 9px; padding-bottom: 4px; }
  .receipt-row { font-size: 11px; grid-template-columns: 40px 1fr auto; }
  .receipt-row .t { font-size: 10px; }
  #next-ticket { bottom: 24px; right: 10px; padding: 8px 12px; font-size: 12px; }
  #buy-beer     { bottom: 24px; left: 10px; padding: 8px 12px; font-size: 12px; }
  #buy-nicotine { bottom: 64px;  left: 10px; padding: 8px 12px; font-size: 12px; }
  #buy-burger   { bottom: 104px; left: 10px; padding: 8px 12px; font-size: 12px; }
  #buy-condom   { bottom: 144px; left: 10px; padding: 8px 12px; font-size: 12px; }
  #prize span { font-size: 56px; padding: 8px 16px; }
  #level-up span { font-size: 48px; padding: 8px 14px; }
  .item-drop { font-size: 68px; }

  /* Menu + summary: tighten padding and scale the headline down so
     the card fits inside iPhone SE (375 px) without scroll. */
  .screen { padding: 20px 22px 18px; width: 94vw; gap: 10px; }
  .screen h1 { font-size: 30px; }
  #menu-title { font-size: 28px; }
  #menu-start { padding: 12px 22px; font-size: 16px; }
  #summary-stats { font-size: 12px; gap: 3px 10px; padding: 8px 0; }
  #summary-stats dt { font-size: 10px; }
  #summary-actions button { padding: 10px 16px; font-size: 14px; }
}