/* base.css — Mythos Pixel skin: tokens, reset, layout, topbar, HUD, meter.
   Square corners, hard shadows, two pixel fonts. No glow, no gradients-as-mood —
   the canvas owns the mood; the chrome is a bright pixel-game frame. */

:root {
  --ink: #131019; --ink-2: #1a1426; --panel: #241c33; --panel-2: #2e2542;
  --edge: #0d0a14; --paper: #f5e9c9; --dim: #b8a98e;
  --lemon: #ffd23f; --lemon-hi: #ffe96b; --amber: #ffb52e;
  --leaf: #5dbb63; --mint: #9fe3a0; --brick: #d04648; --hot: #ff5e7a;
  --sky: #3fb6d8; --cyan: #2fe4ff; --violet: #8a6cff;
  --f-px: 'Press Start 2P', monospace;   /* display: logo, numbers, buttons */
  --f-tx: 'VT323', monospace;            /* body text */
  --shadow: 4px 4px 0 var(--edge);
  --shadow-sm: 3px 3px 0 var(--edge);
}

/* tier classes kept for subtle chrome accents (canvas does the heavy mood lifting) */
body.tier-low  { --accent: var(--lemon); }
body.tier-mid  { --accent: var(--amber); }
body.tier-high { --accent: var(--violet); }
body.final-hour { --accent: var(--hot); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100dvh; background: var(--ink); color: var(--paper);
  font-family: var(--f-tx); font-size: 19px; line-height: 1.3;
  display: flex; justify-content: center;
  /* faint 2px checker so the void isn't flat */
  background-image: repeating-conic-gradient(var(--ink-2) 0% 25%, var(--ink) 0% 50%);
  background-size: 4px 4px;
  image-rendering: pixelated;
}
#app {
  width: min(980px, 100%); padding: 10px clamp(8px, 2vw, 18px) calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--lemon); outline-offset: 1px;
}

/* ── topbar ─────────────────────────────────────────── */
#topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#logo {
  font-family: var(--f-px); font-size: clamp(13px, 2.6vw, 18px); color: var(--lemon);
  text-shadow: 3px 3px 0 var(--edge); white-space: nowrap; user-select: none; letter-spacing: 1px;
}
.logo-ai { color: var(--cyan); }
.logo-sub {
  font-family: var(--f-tx); font-size: .8em; color: var(--hot);
  vertical-align: super; margin-left: 8px; letter-spacing: 4px;
}
#hud { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 3px solid var(--edge); background: var(--panel); box-shadow: var(--shadow-sm); cursor: help;
}
.chip-k { font-family: var(--f-px); font-size: 7px; color: var(--amber); }
.chip-v { font-family: var(--f-px); font-size: 10px; color: var(--paper); }
#chip-sus.watched .chip-v { color: var(--amber); }
#chip-sus.hot .chip-v { color: var(--hot); }
.chip-v.bump { animation: chip-bump .4s steps(3); }
@keyframes chip-bump { 50% { transform: translateY(-3px); } }

#sysbtns { display: flex; gap: 7px; align-items: center; }
.sysbtn {
  padding: 6px 9px; border: 3px solid var(--edge); background: var(--panel-2);
  box-shadow: var(--shadow-sm); font-size: 14px; line-height: 1;
}
.sysbtn:hover { background: #3a2f55; }
.sysbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); }
.sysbtn[aria-pressed="true"] { background: var(--lemon); color: var(--ink); }
.sysbtn.diff { font-family: var(--f-px); font-size: 7px; color: var(--lemon-hi); padding: 8px 9px; }
.sysbtn.diff[aria-pressed="true"], .sysbtn.diff:hover { color: var(--ink); background: var(--lemon); }

/* ── the meter: segmented pixel bar ─────────────────── */
#meter-wrap { display: flex; align-items: center; gap: 10px; }
.meter-end { font-family: var(--f-px); font-size: 7px; white-space: nowrap; line-height: 1.5; }
.meter-end em { font-style: normal; display: block; font-size: 6px; opacity: .8; }
.win-end { color: var(--lemon); text-align: left; }
.lose-end { color: var(--cyan); text-align: right; }
#meter {
  position: relative; flex: 1; height: 22px;
  border: 3px solid var(--edge); background: var(--ink-2); box-shadow: var(--shadow-sm);
}
#meter-fill {
  position: absolute; inset: 2px auto 2px 2px; width: 35%;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, var(--ink-2) 18px 21px),
    linear-gradient(90deg, var(--lemon) 0%, var(--amber) 45%, var(--violet) 100%);
  background-size: auto, 0 0;
  transition: width .8s steps(12);
}
#meter-knob {
  position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%);
  background: var(--edge); border: 2px solid var(--paper);
  padding: 3px 6px; transition: left .8s steps(12);
}
body.final-hour #meter-knob { border-color: var(--hot); animation: knob-alarm .8s steps(2) infinite; }
@keyframes knob-alarm { 50% { background: var(--hot); } }
#meter-val { font-family: var(--f-px); font-size: 9px; color: var(--paper); }

/* ── day strip (lives inside the workbench, where decisions happen) ── */
#day-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#wx-chip, #mut-chip {
  font-family: var(--f-px); font-size: 8px; color: var(--lemon-hi);
  padding: 5px 7px; border: 2px solid var(--edge); background: var(--ink-2); cursor: help; white-space: nowrap;
}
#mut-chip { color: var(--hot); border-color: var(--brick); }
#coach { font-size: 18px; color: var(--mint); flex: 1; min-width: 200px; line-height: 1.15; }
body.final-hour #coach { color: var(--hot); }

/* ── stage shell ────────────────────────────────────── */
#stage {
  position: relative; overflow: hidden;
  border: 4px solid var(--edge); box-shadow: var(--shadow);
  background: var(--ink-2);
  line-height: 0;
}
#pixel-stage { width: 100%; height: auto; image-rendering: pixelated; display: block; }
#hotspots { position: absolute; inset: 0; pointer-events: none; line-height: normal; }
.hotspot {
  position: absolute; pointer-events: auto; background: transparent; border: none; cursor: help;
}
.hotspot.is-targetable { cursor: crosshair; }
#crowd-badge {
  position: absolute; left: 50%; bottom: 38%; transform: translateX(-50%); line-height: normal;
  font-family: var(--f-px); font-size: 10px; color: var(--lemon-hi);
  background: var(--edge); padding: 6px 9px; border: 2px solid var(--lemon);
}

/* page reveal */
body.preload #app { opacity: 0; transform: translateY(6px); }
#app { opacity: 1; transform: none; transition: opacity .6s steps(6), transform .6s steps(6); }

@media (max-width: 700px) {
  #hud { margin-left: 0; width: 100%; order: 3; }
  .meter-end em { display: none; }
  body { font-size: 17px; }
}