@font-face { font-family: 'Michroma'; font-weight: 400; src: url('../assets/fonts/michroma-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 400; src: url('../assets/fonts/barlow-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 500; src: url('../assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 600; src: url('../assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; src: url('../assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; src: url('../assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; font-weight: 400; src: url('../assets/fonts/vt323-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #D9DAD4;
  --panel: #EFEEE8;
  --panel-raised: #F8F7F2;
  --text: #1C2028;
  --text-muted: #565E6B;
  --bar: #1C2028;
  --bar-text: #F8F7F2;
  --rule: #1C2028;
  --line: #A9ACA8;
  --red: #C4402E;
  --blue: #2B6CA3;
  --yellow: #E0A92E;
  --title: 'Michroma', sans-serif;
  --body: 'Barlow', sans-serif;
  --label: 'Barlow Condensed', sans-serif;
}
:root[data-band='night'] {
  --ink: #15181E;
  --panel: #1F232B;
  --panel-raised: #292E37;
  --text: #EFEEE8;
  --text-muted: #A5A9A6;
  --bar: #EFEEE8;
  --bar-text: #1C2028;
  --rule: #6C6E6C;
  --line: #3E434C;
  --red: #E0604A;
  --blue: #8DB8DE;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--text-muted);
  font: 500 17px/1.3 var(--body);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.smallcaps { font: 600 12px/1.3 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

#app {
  width: 100%;
  max-width: 390px;
  height: min(100dvh, 844px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.top { padding: 6px 14px 4px; }
.titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
h1 { font: 400 14px/30px var(--title); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
#clock { font: 600 13px/1 var(--label); letter-spacing: 0.06em; color: var(--text); white-space: nowrap; }
#strip { display: block; width: 100%; padding: 2px 0 3px; text-align: left; white-space: nowrap; overflow: hidden; }
.cell { margin-right: 12px; color: var(--text); }
.cell::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: var(--marker, var(--text)); }
.cell:nth-child(1) { --marker: var(--blue); }
.cell:nth-child(2) { --marker: var(--yellow); }
.cell:nth-child(3) { --marker: var(--text-muted); }
.cell.warn { color: var(--red); --marker: var(--red); }
.cell.quiet { color: var(--text-muted); }

#view { min-height: 0; overflow: hidden; }

.stage { height: 100%; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.scene { position: relative; flex: none; width: 388px; height: 560px; }
.art { position: absolute; display: block; image-rendering: pixelated; user-select: none; }
.room { inset: 0; width: 388px; height: 560px; }
.can { left: 272px; top: 472px; width: 36px; height: 24px; }
.bot { position: absolute; left: 152px; top: 388px; width: 128px; height: 136px; animation: bob 1200ms steps(1) infinite; }
.frame { inset: 0; width: 128px; height: 136px; }
.blink { opacity: 0; animation: blink 3300ms steps(1) infinite; }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blink { 0% { opacity: 0; } 95.5% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bot, .blink { animation: none; } }

#action { padding: 8px 14px 6px; min-height: 58px; }
.primary {
  display: block;
  width: 100%;
  height: 44px;
  background: var(--bar);
  color: var(--bar-text);
  font: 400 14px/1 var(--title);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 8px 0 0 var(--red);
}

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--rule); }
.tabs button { height: 46px; font: 600 13px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); border-right: 1px solid var(--line); }
.tabs button:last-child { border-right: 0; }
.tabs button.active { background: var(--bar); color: var(--bar-text); }

.card-wrap { height: 100%; padding: 10px 14px 0; }
.card {
  height: 100%;
  overflow-y: auto;
  padding: 0 14px 14px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--rule);
}
.card h2 { margin: 14px 0 8px; font: 400 16px/1.3 var(--title); letter-spacing: 0.02em; text-transform: uppercase; }
.card p + p { margin-top: 10px; }
.kicker { margin: 0 -14px 12px; padding: 7px 14px; background: var(--bar); color: var(--bar-text); font: 600 13px/1 var(--label); }
.kicker::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--red); vertical-align: -1px; }
.prompt { font-size: 18px; font-weight: 600; }
.prompt.small { font-size: 16px; font-weight: 400; color: var(--text-muted); }
.written {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0 2px;
  border: 0;
  resize: none;
  color: var(--blue);
  font: 500 17px/28px var(--body);
  background: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px);
  outline: none;
}
.written::placeholder { color: var(--text-muted); }
.written-back { color: var(--blue); }
.card h3 { margin-top: 14px; font: 700 13px/1 var(--label); letter-spacing: 0.14em; color: var(--text); }
.card h3 + p { margin-top: 4px; }
.explanation { font-size: 16px; font-weight: 400; margin-top: 10px; color: var(--text-muted); }
.source { font: 600 13px/1.35 var(--label); letter-spacing: 0.04em; color: var(--text-muted); overflow-wrap: anywhere; }
.tally { margin-top: 14px; color: var(--text); }
.verdict { margin-top: 10px; font-weight: 600; }
.verdict.right { color: var(--blue); }
.verdict.wrong { color: var(--red); }

.points { display: grid; gap: 8px; margin-top: 6px; }
.point { position: relative; padding: 8px 10px 8px 32px; text-align: left; line-height: 1.3; border: 2px solid var(--rule); background: var(--panel-raised); color: var(--text); }
.point::before { content: ''; position: absolute; left: 9px; top: 10px; width: 13px; height: 13px; border: 2px solid var(--text); }
.point.hit { background: var(--bar); color: var(--bar-text); }
.point.hit::before { background: var(--yellow); border-color: var(--yellow); }
.full-answer { margin-top: 12px; }
.full-answer summary { cursor: pointer; color: var(--text-muted); }
.full-answer p { margin-top: 4px; }

.options { display: grid; gap: 8px; margin-top: 14px; }
.option { padding: 9px 10px; text-align: left; line-height: 1.3; border: 2px solid var(--rule); background: var(--panel-raised); color: var(--text); }

.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grade { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; background: var(--bar); color: var(--bar-text); font: 700 15px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; }
.grade small { font: 600 12px/1 var(--label); }

.settings {
  margin: auto;
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border: 2px solid var(--rule);
  background: var(--panel);
  color: var(--text);
}
.settings::backdrop { background: rgba(0, 0, 0, 0.6); }
.settings h2 { font: 400 16px/1.3 var(--title); text-transform: uppercase; margin-bottom: 12px; }
.settings label { display: block; color: var(--text); }
.settings input { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 2px solid var(--rule); background: var(--panel-raised); color: var(--text); font: 500 16px var(--body); }
.hint { margin-top: 8px; font-size: 15px; font-weight: 400; color: var(--text-muted); }
.status { margin-top: 8px; font: 600 14px/1.3 var(--label); letter-spacing: 0.04em; color: var(--blue); }
.row { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.row .primary { flex: 1; }
.quiet { padding: 0 8px; height: 44px; color: var(--text-muted); font: 600 13px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }

.plant { position: absolute; width: 104px; height: 136px; }
.cell-art { position: absolute; left: 0; top: 0; image-rendering: pixelated; background-repeat: no-repeat; }
.can { z-index: 125; }
.thirst-drop { position: absolute; left: 48px; top: 0; width: 8px; height: 12px; background: var(--day-blue, #2B6CA3); box-shadow: 0 -4px 0 -2px #2B6CA3; }
.water-drop { position: absolute; width: 8px; height: 12px; background: #9FD8FF; box-shadow: 0 0 0 2px #1C2028; }
.moving { animation: none; }

.slip {
  position: absolute;
  left: 34px;
  top: 14px;
  z-index: 150;
  max-width: 300px;
  padding: 6px 10px;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--rule);
  font: 400 19px/1.05 'VT323', monospace;
  transform: rotate(-1.5deg);
}

.room-nav { position: absolute; left: 22px; right: 22px; bottom: 6px; z-index: 145; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.room-arrow { width: 34px; height: 30px; background: var(--bar); color: var(--bar-text); font: 700 20px/1 var(--label); pointer-events: auto; }
.room-label { padding: 5px 8px; background: var(--bar); color: var(--bar-text); }

.herbarium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; padding: 10px 14px; overflow-y: auto; align-content: start; }
.sheet { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px 8px; background: var(--panel); color: var(--text); border: 2px solid var(--rule); }
.sheet-art { position: relative; display: block; width: 78px; height: 102px; }
.sheet-name { font: 600 12px/1.1 var(--body); letter-spacing: -0.01em; text-align: center; overflow-wrap: break-word; max-width: 100%; }
.sheet-state.dry { color: var(--red); }
.specimen { position: relative; width: 130px; height: 170px; margin: 4px auto 0; }
.latin { font-style: italic; font-weight: 400; color: var(--text-muted); }
.back-link { display: block; height: 26px; padding: 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 10px; align-items: baseline; }
.facts dd { margin: 0; color: var(--text); }
.facts dd::first-letter { text-transform: uppercase; }
.papers { margin: 6px 0 0; padding-left: 16px; font-size: 15px; font-weight: 400; }
.papers li + li { margin-top: 4px; }
.primary:disabled { background: var(--line); color: var(--text-muted); box-shadow: none; }

/* Pixel materials: the interface shares the scene's 4 px grid, textures and light. */
:root { --plate: url('../art/out/ui_day_plate.png'); --panel-tex: url('../art/out/ui_day_panel.png'); --hi: rgba(255,255,255,.75); --lo: rgba(28,32,40,.32);
  --notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
:root[data-band='morning'] { --ink: #D9D6C8; --panel: #EFEADA; --panel-raised: #F8F2E2; --plate: url('../art/out/ui_morning_plate.png'); --panel-tex: url('../art/out/ui_morning_panel.png'); }
:root[data-band='golden'] { --ink: #D9CBB4; --panel: #EFE2CE; --panel-raised: #F8ECDA; --line: #A99C84; --text-muted: #5E5244; --plate: url('../art/out/ui_golden_plate.png'); --panel-tex: url('../art/out/ui_golden_panel.png'); --hi: rgba(255,236,204,.75); --lo: rgba(60,34,16,.36); }
:root[data-band='night'] { --plate: url('../art/out/ui_night_plate.png'); --panel-tex: url('../art/out/ui_night_panel.png'); --hi: rgba(170,186,220,.3); --lo: rgba(0,0,0,.5); }

body, .card, .settings, .sheet { image-rendering: pixelated; }
body { background: var(--ink) var(--plate) 0 0 / 384px 384px; }
.tabs, .top, #action { background: none; }
.stage { box-shadow: inset 0 4px 0 var(--bar), inset 0 8px 0 var(--lo), inset 0 -4px 0 var(--bar); position: relative; }
.stage .scene { z-index: 0; }

.card, .settings, .sheet {
  background: var(--panel) var(--panel-tex) 0 0 / 256px 256px;
  border: 4px solid var(--rule);
  clip-path: var(--notch);
}
.card { box-shadow: inset 4px 4px 0 var(--hi), inset -4px -4px 0 var(--lo); padding: 0 16px 14px; }
.sheet { box-shadow: inset 4px 4px 0 var(--hi), inset -4px -4px 0 var(--lo); }
.kicker { margin: 0 -16px 12px; padding: 8px 16px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.kicker::before { width: 12px; height: 12px; vertical-align: -2px; }

.primary, .grade, .room-arrow {
  clip-path: var(--notch);
  box-shadow: inset 8px 0 0 var(--red), inset 0 4px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.35);
}
.primary:active, .grade:active { box-shadow: inset 8px 0 0 var(--red), inset 0 4px 0 rgba(0,0,0,.35), inset 0 -4px 0 rgba(255,255,255,.1); }
.room-arrow { box-shadow: inset 0 4px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.35); }
.room-label { clip-path: var(--notch); padding: 6px 10px; }

.point, .option, .settings input { border-width: 4px; background: var(--panel-raised); clip-path: var(--notch); box-shadow: inset 4px 4px 0 var(--hi); }
.point { padding: 8px 10px 8px 34px; }
.point::before { left: 10px; top: 10px; width: 12px; height: 12px; border-width: 4px; }
.point.hit { box-shadow: inset 4px 4px 0 rgba(0,0,0,.35); }

.tabs { border-top: 4px solid var(--rule); box-shadow: inset 0 4px 0 var(--hi); }
.tabs button { border-right: 4px solid var(--lo); }
.tabs button.active { box-shadow: inset 4px 4px 0 rgba(0,0,0,.35); }

.cell::before { width: 8px; height: 8px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.35); }
.slip { border-width: 4px; clip-path: var(--notch); background: var(--panel) var(--panel-tex) 0 0 / 256px 256px; box-shadow: inset 4px 4px 0 var(--hi), inset -4px -4px 0 var(--lo); }
.written { background: repeating-linear-gradient(transparent 0 26px, var(--line) 26px 28px); }

.window-fx { position: absolute; left: 0; top: 0; z-index: 1; width: 388px; height: 560px; image-rendering: pixelated; pointer-events: none; }
.pokeable { cursor: pointer; }
.moving .blink { display: none; }
.spark { position: absolute; width: 8px; height: 8px; background: #E0A92E; box-shadow: inset 2px 2px 0 #F8F7F2; }

.detail { position: absolute; width: 264px; height: 120px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 1320px 120px; pointer-events: none; }
.room.view { z-index: 1; }
.reward { margin-top: 14px; font-weight: 600; color: var(--blue); }
.reward-link { display: block; width: 100%; margin-top: 12px; padding: 10px; background: var(--bar); color: var(--bar-text); font: 600 14px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; clip-path: var(--notch); }
.sound-toggle { display: block; padding: 0; margin-top: 10px; height: 26px; }

.journal { height: 100%; padding: 10px 14px; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.page { padding: 12px 14px 14px; background: var(--panel) var(--panel-tex) 0 0 / 256px 256px; color: var(--text); border: 4px solid var(--rule); clip-path: var(--notch); box-shadow: inset 4px 4px 0 var(--hi), inset -4px -4px 0 var(--lo); }
.page-number { margin-bottom: 6px; }
.page-text { font: 400 21px/1.15 'VT323', monospace; }
.weeks { padding: 4px 2px; }
.weeks h3 { margin-bottom: 6px; color: var(--text); }
.week-row { display: grid; gap: 2px; padding: 8px 0; border-top: 4px solid var(--lo); }
.week-row .smallcaps { color: var(--text); }
.week-stats { font-size: 15px; font-weight: 400; color: var(--text-muted); }