@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* The four looks the room can pick. Each one sets the same tokens; components use only the tokens. */
:root, [data-look="night"] {
  --bg: #0b0b0c; --surface: #16161a; --line: #2a2a30; --fg: #f3f2ef; --mute: #9a9994; --accent: #e23b3b; --on-accent: #fff;
  --font: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --radius: 10px; color-scheme: dark;
}
[data-look="notebook"] {
  --bg: #f6f4ee; --surface: #ffffff; --line: #d9d5c9; --fg: #1d1c1a; --mute: #6c6a63; --accent: #2457c5; --on-accent: #fff;
  --radius: 6px; color-scheme: light;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #e3e0d6 31px 32px);
}
[data-look="arcade"] {
  --bg: #0a0f24; --surface: #121a3a; --line: #26315f; --fg: #eef2ff; --mute: #8f9bc7; --accent: #36e2c4; --on-accent: #06121f;
  --font: "Geist Mono", ui-monospace, monospace; --radius: 4px; color-scheme: dark;
}
[data-look="game-day"] {
  --bg: #0f3d24; --surface: #145030; --line: #2b6b47; --fg: #ffffff; --mute: #b9d7c4; --accent: #c8102e; --on-accent: #fff;
  --radius: 8px; color-scheme: dark;
  background-image: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.08) 79px 81px);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: inherit; color: var(--fg); font: 400 17px/1.5 var(--font);
  padding-block: 20px 40px;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px));
  max-width: 640px; margin-inline: auto;
}
.prepared { margin: 0 0 14px; padding: 10px 12px; border: 2px dashed var(--accent); border-radius: var(--radius); font: 600 14px var(--mono); text-align: center; }
.eyebrow { margin: 0; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
h1 { margin: 6px 0 4px; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.01em; }
.tagline { margin: 0; color: var(--mute); }
.app { display: grid; gap: 18px; margin-top: 22px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input[type="text"] {
  flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
button {
  min-height: 44px; padding: 10px 16px; font: 600 16px var(--font); border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
button.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--mute); }
.foot { margin-top: 32px; display: grid; gap: 12px; color: var(--mute); font-size: 14px; }
.foot p { margin: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Survival Kit */
.tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tasks li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.tasks li.done span { color: var(--mute); text-decoration: line-through; }
.tick { flex: none; width: 32px; min-height: 32px; height: 32px; padding: 0; background: transparent; color: var(--accent); border: 2px solid var(--line); font-size: 18px; line-height: 1; }
.tasks li.done .tick { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.count { margin: 12px 0 0; font-size: 14px; }
.clock { margin: 4px 0 14px; font-size: clamp(56px, 18vw, 88px); line-height: 1; letter-spacing: -0.04em; }