/* Stinkwater — UI chrome. The world is canvas; everything else is DOM.
   Wood-and-parchment panels (Stardew), black-and-white dialogue (Undertale). */
:root {
  --ink: #26181e;
  --night: #120c14;
  --wood: #6b3f26;
  --wood-hi: #9a6238;
  --wood-lo: #43261a;
  --parch: #f3e2b8;
  --parch-lo: #e2c993;
  --text: #3a2418;
  --muted: #7d5e44;
  --gold: #f2c443;
  --heart: #e0485a;
  --stink: #9ab04a;
  --court: #7cc46a;
  --quest: #f0d070;
  --white: #fbf7ee;
  --font: "Pixelify Sans", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); overflow: hidden; }
body { font-family: var(--font); color: var(--white); -webkit-font-smoothing: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; }
#view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; image-rendering: crisp-edges; background: var(--night); }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.ico { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; }
.nojs { color: var(--white); padding: 24px; }
button { font-family: var(--font); }

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--parch);
  color: var(--text);
  border: 3px solid var(--wood);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--parch-lo), 0 0 0 2px var(--wood-lo), 0 4px 0 2px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud[hidden] { display: none; }
.hud-clock { position: absolute; top: 12px; right: 12px; padding: 6px 12px 8px; min-width: 132px; text-align: right; font-size: 18px; line-height: 1.25; }
.hud-day { font-weight: 700; color: var(--wood-lo); }
.hud-time { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.hud-time .ico, .hud-gold .ico { width: 24px; height: 24px; }
.hud-gold { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #8a5a10; font-weight: 700; border-top: 2px dashed var(--parch-lo); margin-top: 3px; padding-top: 3px; }
.hud-vitals { position: absolute; top: 12px; left: 12px; padding: 6px 10px; display: grid; gap: 4px; }
.hud-hearts { display: flex; gap: 2px; }
.hud-hearts .ico { width: 24px; height: 24px; }
.hud-energy, .hud-stink, .hud-focus { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.hud-focus b { font-weight: normal; min-width: 34px; }
.hud-energy .ico { width: 20px; height: 20px; }
.bar { width: 110px; height: 10px; background: var(--wood-lo); border: 2px solid var(--wood-lo); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(#8ee06a, #4caa48); transition: width .3s; }
.bar.low i { background: linear-gradient(#f0a050, #c05a2a); }
.bar.stink i { background: linear-gradient(#c8d860, #6a8a2a); }
.bar.focus i { background: linear-gradient(#8ac8ff, #3a70c0); }
.hud-stink[hidden], .hud-focus[hidden] { display: none; }
.hud-wanted { font-size: 12px; color: #e0705a; letter-spacing: .04em; text-transform: uppercase; }
.hud-wanted[hidden] { display: none; }
.hud-keys { position: absolute; bottom: 10px; right: 12px; display: flex; align-items: center; gap: 3px 4px; font-size: 13px; color: rgba(251,247,238,.6); text-shadow: 0 1px 0 #000; }
.hud-keys kbd { font-size: 11px; padding: 0 4px; margin: 0 0 0 8px; opacity: .75; box-shadow: 0 1px 0 #9a8a7a; text-shadow: none; }
body.touch .hud-keys { display: none; }

#prompt {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  background: rgba(18,12,20,.82); color: var(--white); padding: 4px 12px; border-radius: 4px; font-size: 17px;
  border: 2px solid rgba(251,247,238,.35); white-space: nowrap; pointer-events: none;
}
#prompt[hidden] { display: none; }
kbd { display: inline-block; background: var(--white); color: var(--ink); border-radius: 3px; padding: 0 5px; font-family: var(--font); font-weight: 700; margin-right: 4px; box-shadow: 0 2px 0 #9a8a7a; }

#banner {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: 32px; font-weight: 700; color: var(--white);
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink); opacity: 0; pointer-events: none; white-space: nowrap;
}
#banner.show { animation: banner 2.8s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- dialogue (Undertale) */
#dialog { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); width: min(880px, 94vw); z-index: 20; }
#dialog[hidden] { display: none; }
.dlg-box {
  position: relative; display: flex; gap: 16px; align-items: flex-start; min-height: 148px; padding: 18px 22px;
  background: #000; border: 5px solid var(--white); color: var(--white); font-size: 25px; line-height: 1.35; cursor: pointer;
}
.dlg-box::before { content: attr(data-tag); position: absolute; top: -14px; left: 18px; font-size: 14px; background: #000; padding: 0 8px; color: var(--quest); letter-spacing: .04em; }
.dlg-box[data-tag=""]::before { display: none; }
.dlg-portrait { flex: none; width: 120px; height: 120px; border: 3px solid var(--white); background: #1a1420; }
.dlg-portrait[hidden] { display: none; }
.dlg-portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.dlg-body { flex: 1; min-width: 0; }
.dlg-name { color: var(--gold); font-size: 20px; margin-bottom: 4px; }
.dlg-name[hidden] { display: none; }
.dlg-text { white-space: pre-wrap; min-height: 3.6em; }
.dlg-box.narration .dlg-text::before { content: "* "; }
.dlg-next { position: absolute; right: 14px; bottom: 8px; font-size: 18px; animation: bob .7s steps(2) infinite; }
.dlg-next[hidden] { display: none; }
@keyframes bob { 50% { transform: translateY(3px); } }
.dlg-choices { list-style: none; margin: 0; padding: 12px 22px 14px; background: #000; border: 5px solid var(--white); border-top: 0; font-size: 23px; }
.dlg-choices[hidden] { display: none; }
.dlg-choices li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; cursor: pointer; color: var(--white); }
.dlg-choices li .heart { color: var(--heart); visibility: hidden; width: 1em; }
.dlg-choices li.sel { color: var(--gold); }
.dlg-choices li.sel .heart { visibility: visible; }
.dlg-choices li.locked { color: #6a6070; }
.dlg-choices li.locked.sel { color: #9a8aa0; }
.dlg-choices .req { margin-left: auto; font-size: 15px; color: #c0a0a0; border: 1px solid #5a4a50; padding: 0 6px; }

/* ---------------------------------------------------------------- toasts */
#toasts { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 30; }
.toast { background: rgba(18,12,20,.9); border: 2px solid rgba(251,247,238,.4); color: var(--white); padding: 5px 12px; border-radius: 4px; font-size: 17px; max-width: 80vw; text-align: center; animation: tin .25s ease; transition: opacity .5s, transform .5s; }
.toast.out { opacity: 0; transform: translateY(-8px); }

/* ---------------------------------------------------------------- staged scenes (js/world/scene.js) */
.scene-layer { position: absolute; inset: 0; display: none; z-index: 15; }
.scene-layer.on { display: block; cursor: pointer; }
.scene-layer.on::after { content: "Enter / tap: skip ahead"; position: absolute; left: 14px; bottom: 12px; font-size: 14px; color: rgba(251,247,238,.55); }
.shout {
  position: absolute; transform: translate(-50%, -100%); z-index: 16; pointer-events: none; white-space: nowrap;
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; padding: 1px 9px 3px; font-size: 19px; font-weight: 700;
  animation: shoutIn .18s steps(3) backwards;
}
.shout::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -5px; border: 5px solid transparent; border-top: 5px solid var(--ink); }
@keyframes shoutIn { from { transform: translate(-50%, -80%) scale(.6); } }
.scene-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; white-space: nowrap;
  font-size: 34px; font-weight: 700; color: var(--quest); letter-spacing: .04em; animation: fadeIn .4s ease-out;
}
@media (max-width: 600px) { .shout { font-size: 15px; padding: 0 6px 2px; } .scene-card { font-size: 24px; white-space: normal; text-align: center; width: 86vw; } }
.toast .ico { width: 20px; height: 20px; margin-right: 4px; }
.toast.good { border-color: #8ee06a; }
.toast.bad { border-color: #e0485a; }
.toast.love { border-color: #f08aa0; color: #ffd0da; }
.toast.quest { border-color: var(--quest); color: #fff0c0; }
.toast.end { border-color: var(--gold); background: rgba(40,26,8,.95); color: #fff0c0; font-size: 18px; }
.toast.court { border-color: var(--court); background: rgba(14,24,10,.95); color: #d8f0c0; }
.toast.meta { border-color: #b08ae0; color: #e8d8ff; }
.toast.stink { border-color: var(--stink); color: #e0f0a0; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- menus
   Four sections on a wood header (icon, name, key), a section's pages as pills under it, a parchment
   page, and a wood foot of live key caps. Lists sit beside a detail card. Pause is a small card. */
#menu { position: absolute; inset: 0; background: rgba(10,6,12,.6); display: grid; place-items: center; z-index: 40; }
#menu[hidden] { display: none; }
.menu-panel { width: min(860px, 96vw); height: min(640px, 92vh); display: flex; flex-direction: column; background: var(--parch); color: var(--text); border: 4px solid var(--wood); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--parch-lo), 0 0 0 3px var(--wood-lo), 0 8px 0 2px rgba(0,0,0,.4); overflow: hidden; }
.menu-panel.pause { width: min(440px, 94vw); height: auto; max-height: 92vh; }
.menu-panel.pause.pg-chronicle, .menu-panel.pause.pg-controls { width: min(760px, 96vw); height: min(640px, 92vh); }
.menu-tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: var(--wood); box-shadow: inset 0 -3px 0 var(--wood-lo); }
.menu-tabs[hidden], .menu-pages[hidden] { display: none; }
.menu-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--wood-lo); color: var(--parch); padding: 6px 10px 7px; font-size: 18px; border-radius: 6px 6px 0 0; cursor: pointer; min-width: 0; }
.menu-tabs button .ico { width: 24px; height: 24px; flex: none; }
.menu-tabs button .face { width: 26px; height: 26px; image-rendering: pixelated; border-radius: 3px; background: #2a2030; }
.menu-tabs button .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-tabs button kbd { font-size: 14px; margin: 0 0 0 auto; opacity: .55; box-shadow: 0 2px 0 #6a5a4a; }
.menu-tabs button.on { background: var(--parch); color: var(--wood-lo); font-weight: 700; box-shadow: inset 0 3px 0 var(--wood-hi); }
.menu-tabs button.on kbd { opacity: 1; }
.menu-pages { display: flex; align-items: center; gap: 6px; padding: 8px 14px 0; flex-wrap: wrap; }
.menu-pages kbd { font-size: 13px; margin: 0; opacity: .7; }
.menu-pages button { border: 2px solid var(--parch-lo); background: #fff8e4; color: var(--muted); font-size: 16px; padding: 2px 12px; border-radius: 12px; cursor: pointer; }
.menu-pages button.on { background: var(--wood); border-color: var(--wood-lo); color: var(--parch); font-weight: 700; }
.menu-title { margin: 0; padding: 10px 18px 8px; background: var(--wood); color: var(--parch); font-size: 22px; box-shadow: inset 0 -3px 0 var(--wood-lo); }
.menu-title[hidden] { display: none; }
.menu-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px; font-size: 17px; line-height: 1.35; scrollbar-color: var(--wood-hi) var(--parch-lo); }
.menu-body:has(> .split), .menu-body:has(> .strip + .split), .menu-body:has(> .skills-top + .split), .menu-body:has(> .shopkeep + .split) { display: flex; flex-direction: column; overflow: hidden; }
.menu-body h3 { margin: 14px 0 6px; font-size: 19px; color: var(--wood-lo); border-bottom: 2px dashed var(--parch-lo); }
.menu-body h3 small { color: var(--muted); font-weight: 400; font-size: 15px; }
.menu-body h3:first-child { margin-top: 0; }
.menu-body h4 { margin: 10px 0 4px; color: var(--muted); }
.menu-foot { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; padding: 6px 14px; background: var(--wood); color: var(--parch); font-size: 14px; box-shadow: inset 0 3px 0 var(--wood-lo); }
.menu-foot kbd { font-size: 12px; margin-right: 2px; }
.empty { color: var(--muted); font-style: italic; }

/* a list beside its detail card */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 14px; }
.split > .list { overflow-y: auto; padding-right: 4px; scrollbar-color: var(--wood-hi) var(--parch-lo); }
.detail { background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.detail .dh { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--wood-lo); }
.detail .dh .ico { width: 48px; height: 48px; flex: none; background: var(--parch); border: 2px solid var(--parch-lo); border-radius: 6px; padding: 4px; }
.detail .dd p { margin: 0 0 6px; }
.detail .where { color: var(--muted); font-size: 15px; }
.detail .act { margin-top: auto; align-self: stretch; flex: none; font-size: 17px; padding: 6px 10px; border: 3px solid var(--wood); border-radius: 6px; background: var(--parch); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 2px var(--parch-lo), 0 3px 0 var(--wood-lo); }
.detail .act:hover { background: #fff3d0; border-color: var(--gold); }
.detail .act kbd { font-size: 13px; }
.detail .act + .act { margin-top: 6px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.list li .ico { width: 32px; height: 32px; flex: none; }
.list li .nm { flex: 1; min-width: 0; }
.list li .ct { color: var(--muted); }
.list li .rt { color: var(--muted); font-size: 15px; min-width: 40px; text-align: right; }
.list li .rt .worn { color: #2a6a3a; }
.list li .rt .dear { color: #b04040; }
.list li.sel { background: #fff3d0; border-color: var(--wood-hi); }
.list li.grp { cursor: default; padding: 8px 4px 2px; font-size: 14px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; border: 0; border-bottom: 2px dashed var(--parch-lo); border-radius: 0; margin-bottom: 2px; }
.list li.grp:first-child { padding-top: 0; }
.list li.off { opacity: 0.45; }

/* the Bag */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 10px; padding: 6px 10px; background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; color: var(--wood-lo); font-weight: 700; }
.strip span { display: inline-flex; align-items: center; gap: 6px; }
.strip .ico { width: 20px; height: 20px; }
.strip .wearing { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 15px; gap: 4px; }

/* you */
.you-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.you-head .face { width: 80px; height: 80px; image-rendering: pixelated; border: 3px solid var(--wood); border-radius: 6px; background: #2a2030; flex: none; }
.you-head h3 { margin: 0; border: 0; font-size: 26px; }
.you-head p { margin: 2px 0 0; }
.you-head .title { color: var(--wood-hi); font-weight: 700; }
.you-origin { color: var(--muted); font-size: 15px; }
.keys { color: var(--muted); font-size: 15px; }
.you-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.card h4 { margin: 0 0 4px; color: var(--wood-lo); }
.card .perks { margin: 0; padding-left: 18px; font-size: 15px; }
.card .gear { margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.card .gear .ico { width: 24px; height: 24px; }
.numbers { display: flex; justify-content: space-around; text-align: center; }
.numbers b { display: block; font-size: 20px; color: var(--wood-lo); }
.numbers small { color: var(--muted); }
.stat { display: grid; grid-template-columns: 64px 1fr; gap: 0 10px; padding: 3px 0; align-items: center; }
.stat small { grid-column: 2; color: var(--muted); font-size: 14px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 12px; height: 12px; border-radius: 2px; background: var(--parch-lo); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.pips i.on { background: var(--wood-hi); }
.stat.heart .pips i.on { background: var(--heart); }
.stat.stink .pips i.on { background: var(--stink); }
.rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rel { display: flex; align-items: center; gap: 10px; background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; padding: 6px 8px; }
.rel img { width: 48px; height: 48px; image-rendering: pixelated; border: 2px solid var(--wood); border-radius: 4px; background: #2a2030; flex: none; }
.rel b { display: block; }
.rel small { display: block; color: var(--muted); font-size: 13px; line-height: 1.2; }
.rel .h { display: flex; gap: 2px; margin-top: 3px; }
.rel .h i { width: 8px; height: 8px; background: var(--heart); clip-path: polygon(50% 100%, 0 40%, 0 10%, 25% 0, 50% 20%, 75% 0, 100% 10%, 100% 40%); }
.rel .h.neg i { background: #6a5a7a; }

/* skills and spells */
.skills-top { margin: 0 0 8px; color: var(--wood-lo); }
.list.skills li { padding: 0 6px; font-size: 16px; line-height: 22px; }
.list.skills .nm { flex: 0 0 96px; }
.list.skills .sk-lv { flex: 0 0 22px; text-align: right; font-weight: 700; color: var(--wood-lo); }
.list.skills .sk-lv.zero { color: var(--muted); font-weight: 400; }
.list.skills .sk-bar { flex: 1; height: 6px; background: var(--parch-lo); border-radius: 3px; overflow: hidden; }
.list.skills .sk-bar i { display: block; height: 100%; background: var(--wood-hi); }
.list.skills .sk-gate { flex: 0 0 52px; text-align: right; color: var(--muted); font-size: 13px; white-space: nowrap; }
.list.skills .sk-gate.ready { color: #2a6a9a; font-weight: 700; }
.list.spells .nm { flex: 1; }
.list.spells .nm.locked { color: var(--muted); }
.list.spells .sp-cost { flex: 0 0 26px; text-align: right; color: #3a70c0; font-weight: 700; }
.list.spells .sp-cost::after { content: 'F'; font-size: 11px; font-weight: 400; }
.list.spells .sk-gate { flex: 0 0 84px; }
.list.spells .sk-gate.on { color: #2a6a3a; font-weight: 700; }

/* the journal */
.jr { padding: 6px 8px; margin-bottom: 6px; border-left: 4px solid var(--quest); background: #fff8e4; }
.jr p { margin: 2px 0; }
.jr small { color: var(--muted); }
.fin { list-style: none; padding: 0; margin: 0; }
.fin li { padding: 3px 8px; border-left: 4px solid var(--wood-hi); margin-bottom: 3px; color: var(--muted); font-size: 15px; }
.fin li b { color: var(--text); margin-right: 6px; }
.meter { height: 8px; background: var(--parch-lo); border-radius: 4px; overflow: hidden; margin: 4px 0; position: relative; }
.meter i { display: block; height: 100%; background: var(--stink); }
.meter.rep::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.meter.rep i { position: absolute; top: 0; background: #4a8a3a; }
.meter.rep i.neg { background: #b04040; }
.court-intro { color: var(--muted); margin-top: 0; }
.court { display: grid; gap: 8px; }
.cm { display: flex; gap: 10px; padding: 8px; background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; }
.cm.overlord { border-color: #b08a2a; background: #fff1c8; }
.cm.warlord { border-color: #8a7a6a; }
.cm.ally { border-color: #4caa48; }
.cm img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; background: #2a2030; border-radius: 4px; }
.cm b { display: block; }
.cm small { display: block; color: var(--muted); }
.traits { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.trait { font-size: 13px; padding: 0 6px; border-radius: 3px; background: #e8d8b0; }
.trait.strength { background: #f0c8b0; }
.trait.weakness { background: #c8e8b0; }
.trait.fear { background: #c8d0f0; }
.trait.unk { background: #ddd; color: #777; }
.tag { display: inline-block; font-size: 12px; padding: 0 6px; margin-right: 4px; border-radius: 3px; color: #fff; }
.tag.ally { background: #4caa48; } .tag.hunt { background: #c03a3a; } .tag.grudge { background: #8a4a2a; } .tag.turn { background: #6a8a2a; }
.scar { font-style: italic; }
.mem { color: #6a4a8a !important; }
.news { padding-left: 18px; }
.news li { margin: 2px 0; }

/* pause, options, controls, chronicle */
.pause-sum { margin: 0 0 10px; padding: 8px 10px; text-align: center; background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; color: var(--muted); }
.pause-sum b { color: var(--wood-lo); }
.opts li { justify-content: space-between; font-size: 19px; padding: 5px 10px; }
.opts li small { color: var(--muted); font-size: 14px; }
.opts li.gap { margin-top: 12px; }
.slider { display: inline-flex; align-items: center; gap: 6px; }
.slider kbd { font-size: 12px; margin: 0; }
.slider .track { display: flex; gap: 2px; }
.slider .track i { width: 10px; height: 14px; background: var(--parch-lo); border-radius: 2px; }
.slider .track i.on { background: var(--wood-hi); }
.slider b { min-width: 44px; text-align: right; color: var(--wood-lo); }
.controls { width: 100%; border-collapse: collapse; font-size: 16px; }
.controls th, .controls td { padding: 4px 8px; border-bottom: 2px dashed var(--parch-lo); text-align: left; }
.controls thead th { color: var(--muted); font-size: 14px; }
.controls tbody th { color: var(--wood-lo); white-space: nowrap; }
.controls kbd { font-size: 13px; }
.controls .pad { color: var(--muted); }
.chron-top { display: flex; gap: 10px; flex-wrap: wrap; }
.chron-top div { flex: 1; min-width: 110px; text-align: center; background: #fff8e4; border: 2px solid var(--parch-lo); border-radius: 6px; padding: 6px; }
.chron-top b { font-size: 26px; color: var(--wood-lo); }
.chron-top small { display: block; color: var(--muted); }
.chron { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
.chron li { display: flex; justify-content: space-between; gap: 6px; font-size: 15px; }
.chron li span { color: var(--muted); }
.chron li.unseen { color: #b0a080; }
.runs, .meta { padding-left: 18px; }

/* shops */
.shopkeep { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.shopkeep img { width: 48px; height: 48px; image-rendering: pixelated; border: 2px solid var(--wood); border-radius: 4px; background: #2a2030; }
.shopkeep .gold { margin-left: auto; font-weight: 700; color: #8a5a10; display: inline-flex; align-items: center; gap: 6px; }
.shopkeep .gold .ico { width: 20px; height: 20px; }

/* the map */
.map-wrap { display: flex; justify-content: center; }
.map-wrap canvas { max-width: 100%; max-height: 56vh; image-rendering: pixelated; border: 3px solid var(--wood-lo); border-radius: 4px; }
.map-key { text-align: center; font-size: 15px; margin: 6px 0 0; }
.map-key .me { color: #d8382a; } .map-key .new { color: #b88a00; } .map-key .carry { color: #2a6a9a; }

/* phones: icon-only sections, the detail card under its list */
@media (max-width: 700px) {
  .menu-panel { width: 100vw; height: 100vh; border-radius: 0; border-width: 0; }
  .menu-panel.pause { width: 94vw; border-width: 4px; border-radius: 8px; }
  .menu-tabs button { padding: 6px 4px 7px; }
  .menu-tabs button .nm, .menu-tabs button kbd { display: none; }
  .menu-tabs button .ico, .menu-tabs button .face { width: 30px; height: 30px; }
  .menu-pages kbd { display: none; }
  .menu-body { padding: 10px 12px; }
  .split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .detail { max-height: 40vh; }
  .you-cols { grid-template-columns: 1fr; }
  .strip .wearing { margin-left: 0; }
  .menu-foot { display: none; }
  .controls .pad { display: none; }
}
@media (max-height: 520px) and (min-width: 701px) {
  .menu-panel { height: 96vh; }
  .menu-foot { padding: 3px 14px; }
}
.menu-panel { position: relative; }
.menu-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 6px; background: var(--wood-lo); color: var(--parch); font-size: 18px; line-height: 1; cursor: pointer; }
.menu-x:hover { background: var(--heart); }
.menu-tabs, .menu-title { padding-right: 48px; }

/* ---------------------------------------------------------------- full screens */
#screen { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; overflow-y: auto; padding: 16px; }
#screen[hidden] { display: none; }
#screen.title { background: radial-gradient(ellipse at 50% 40%, rgba(18,12,20,.15), rgba(18,12,20,.75)); }
#screen.origins, #screen.intro, #screen.morning, #screen.death, #screen.epilogue { background: var(--night); }
.title-card { text-align: center; }
.logo { margin: 0; font-size: clamp(54px, 11vw, 112px); line-height: .9; color: var(--stink); letter-spacing: .02em; text-shadow: 0 6px 0 var(--ink), 6px 0 0 var(--ink), -6px 0 0 var(--ink), 0 -6px 0 var(--ink), 6px 6px 0 var(--ink), -6px 6px 0 var(--ink); }
.logo span { color: var(--parch); }
.sub { margin: 10px 0 0; font-size: 20px; color: var(--parch); text-shadow: 0 2px 0 var(--ink); }
.rax { width: 96px; height: 96px; image-rendering: pixelated; margin: 14px auto 4px; display: block; border: 4px solid var(--white); background: #2a2030; animation: bob 1.2s steps(2) infinite; }
.title-menu { display: grid; gap: 8px; width: min(320px, 80vw); margin: 14px auto 0; }
.title-menu button, .origin {
  font-size: 21px; padding: 8px 14px; border: 3px solid var(--wood); border-radius: 6px; background: var(--parch); color: var(--text); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--parch-lo), 0 4px 0 var(--wood-lo);
}
.title-menu button.sel, .origin.sel { background: #fff3d0; border-color: var(--gold); transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 0 var(--wood-lo); }
.title-menu button:disabled { opacity: .45; cursor: default; }
.foot { color: var(--parch); opacity: .8; margin-top: 16px; font-size: 16px; text-shadow: 0 2px 0 var(--ink); }
.hint { color: rgba(251,247,238,.5); font-size: 14px; }
.origins-card, .intro-card, .morning-card, .death-card, .epilogue-card { width: min(720px, 94vw); }
.origins-card h2, .morning-card h2, .death-card h2, .epilogue-card h2 { font-size: 34px; margin: 0 0 6px; color: var(--parch); }
.origins-card > p { color: rgba(251,247,238,.7); }
.origin-list { display: grid; gap: 10px; margin-top: 14px; }
.origin { text-align: left; display: grid; gap: 4px; }
.origin b { font-size: 22px; }
.origin span { font-size: 17px; }
.origin small { font-size: 15px; color: var(--muted); }
.origin.slot.empty { opacity: .6; }
.origin.slot.empty:disabled { opacity: .35; }
.intro-card p { font-size: 22px; line-height: 1.45; color: var(--parch); }
.cont { color: var(--gold) !important; animation: bob 1s steps(2) infinite; margin-top: 18px; font-size: 18px; }
.morning-card { background: var(--parch); color: var(--text); border: 4px solid var(--wood); border-radius: 8px; padding: 18px 24px; box-shadow: inset 0 0 0 3px var(--parch-lo), 0 0 0 3px var(--wood-lo); }
.morning-card h2 { color: var(--wood-lo); font-size: 40px; }
.morning-card h3 { color: var(--wood-lo); margin: 12px 0 4px; }
.morning-card ul { margin: 4px 0; padding-left: 20px; font-size: 17px; }
.morning-card .wx { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.morning-card .wx .ico { width: 32px; height: 32px; }
.morning-card .bad { color: #a02a2a; }
.morning-card .warn { color: #a05a10; font-weight: 700; }
.morning-card .mail { color: #2a6a9a; font-weight: 700; }
.morning-card .keys { font-size: 15px; opacity: 0.8; }
.morning-card .omen { font-style: italic; color: #5a4a6a; }
.morning-card .stinkwarn { color: #7a6a10; font-weight: 600; }
.morning-card .court-news li { color: #3a6a2a; }
.morning-card .cont { color: var(--wood-hi) !important; }
.death-card { text-align: center; color: var(--parch); font-size: 20px; }
.death-card h2 { color: #e0485a; }
.death-card .court-word { color: var(--court); }
.epilogue-card { color: var(--parch); }
.epilogue-card h2 { font-size: 40px; color: var(--gold); }
.endrun { font-size: 22px; font-style: italic; }
.ending-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.ending-list li { background: rgba(251,247,238,.06); border-left: 4px solid var(--gold); padding: 6px 10px; }
.ending-list b { display: block; }
.ending-list span { color: rgba(251,247,238,.75); }
.tally { color: rgba(251,247,238,.6); }

/* ---------------------------------------------------------------- hotbar
   Eight slots, bottom centre. The picked one is ringed in gold and lifted; a slot that can't go now
   is greyed. The line above says what F does here. */
#hotbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 16; pointer-events: none; }
#hotbar[hidden] { display: none; }
.hb-say { font-size: 15px; color: var(--white); background: rgba(18,12,20,.78); border: 2px solid rgba(251,247,238,.25); border-radius: 4px; padding: 2px 10px; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.hb-say kbd { font-size: 12px; padding: 0 4px; margin-right: 6px; }
.hb-say b { color: var(--gold); font-weight: 700; }
.hb-say em { font-style: normal; color: #b8acc0; margin-left: 4px; }
.hb-slots { display: flex; gap: 4px; padding: 4px; background: rgba(43,26,20,.82); border: 3px solid var(--wood); border-radius: 6px; box-shadow: 0 0 0 2px var(--wood-lo), 0 4px 0 2px rgba(0,0,0,.35); pointer-events: auto; }
.hb-slot { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: rgba(18,12,20,.7); border: 2px solid var(--wood-lo); border-radius: 4px; cursor: pointer; overflow: hidden; transition: transform .12s var(--ease, ease-out), border-color .12s; }
.hb-slot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.hb-slot img:not([src]) { visibility: hidden; }
.hb-slot b { position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 700; color: rgba(251,247,238,.75); text-shadow: 0 1px 0 #000; pointer-events: none; }
.hb-slot i { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-style: normal; font-weight: 700; color: var(--white); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; pointer-events: none; }
.hb-slot[data-school="arcana"] i { color: #9ad8ff; }
.hb-slot[data-school="faith"] i { color: #ffe890; }
.hb-slot[data-school="rot"] i { color: #b8e070; }
.hb-slot[data-school="song"] i { color: #f8b0e8; }
.hb-slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(18,12,20,.6); pointer-events: none; }
.hb-slot.empty { background: rgba(18,12,20,.4); border-style: dashed; border-color: rgba(154,98,56,.45); }
.hb-slot.off img { filter: grayscale(1) brightness(.6); }
.hb-slot.off i { color: #e0705a; }
.hb-slot:hover:not(.sel) { border-color: var(--wood-hi); }
.hb-slot.sel { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--wood-lo), 0 3px 0 0 rgba(0,0,0,.4); background: rgba(70,46,30,.92); }
.hb-slot.sel[data-school="arcana"] { box-shadow: 0 0 0 1px var(--wood-lo), 0 0 8px 1px rgba(138,216,255,.55); }
.hb-slot.sel[data-school="faith"] { box-shadow: 0 0 0 1px var(--wood-lo), 0 0 8px 1px rgba(255,232,144,.55); }
.hb-slot.sel[data-school="rot"] { box-shadow: 0 0 0 1px var(--wood-lo), 0 0 8px 1px rgba(134,192,58,.55); }
.hb-slot.sel[data-school="song"] { box-shadow: 0 0 0 1px var(--wood-lo), 0 0 8px 1px rgba(240,160,224,.55); }
/* the key strip steps up out of the bar's way on a narrower screen */
@media (max-width: 1180px) { body.has-bar .hud-keys { bottom: 92px; } }
/* touch: smaller slots; on a narrow phone the bar sits above the buttons */
body.touch .hb-slot { width: 36px; height: 36px; }
body.touch .hb-slot img { width: 26px; height: 26px; }
body.touch .hb-say { font-size: 13px; }
@media (max-width: 640px) { body.touch #hotbar { bottom: 212px; } }
/* the E prompt stays above the bar */
body.has-bar #prompt { bottom: max(22%, 96px); }
@media (max-width: 640px) { body.touch.has-bar #prompt { bottom: 296px; } }
@media (max-width: 420px) { .hb-slot { width: 36px; height: 36px; } .hb-slot img { width: 26px; height: 26px; } .hb-slots { gap: 3px; padding: 3px; } }

/* ---------------------------------------------------------------- touch */
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 15; display: none; }
body.touch #touch { display: block; }
#touch .stick-zone { position: absolute; left: 0; bottom: 0; width: 50%; height: 60%; pointer-events: auto; }
#touch .stick-base { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: rgba(251,247,238,.12); border: 3px solid rgba(251,247,238,.3); left: 90px; top: calc(100% - 110px); }
#touch .stick-base.on { background: rgba(251,247,238,.2); }
#touch .stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(251,247,238,.55); }
#touch .btns { position: absolute; right: 14px; bottom: 14px; width: 210px; height: 190px; pointer-events: none; }
#touch button { position: absolute; pointer-events: auto; width: 62px; height: 62px; border-radius: 50%; border: 3px solid rgba(251,247,238,.5); background: rgba(18,12,20,.55); color: var(--white); font-size: 22px; }
#touch button.on { background: rgba(240,196,67,.6); }
#touch .b-a { right: 0; bottom: 64px; background: rgba(76,170,72,.55); }
#touch .b-b { right: 70px; bottom: 10px; background: rgba(192,58,58,.55); }
#touch .b-r { right: 140px; bottom: 30px; width: 52px; height: 52px; font-size: 18px; }
#touch .b-x { right: 0; bottom: 0; width: 52px; height: 52px; font-size: 18px; }
#touch .b-m { right: 70px; bottom: 120px; width: 46px; height: 46px; font-size: 18px; }
#touch .b-j { right: 130px; bottom: 120px; width: 46px; height: 46px; font-size: 18px; }
#touch .b-t { right: 196px; bottom: 74px; width: 46px; height: 46px; font-size: 18px; display: none; background: rgba(90,70,160,.55); }
body.has-bar #touch .b-t { display: block; }

@media (max-width: 700px), (max-height: 520px) {
  .dlg-box { font-size: 18px; min-height: 104px; padding: 12px 14px; gap: 10px; }
  .dlg-portrait { width: 72px; height: 72px; }
  .dlg-choices { font-size: 17px; padding: 8px 14px; }
  .dlg-name { font-size: 16px; }
  .hud-clock { font-size: 14px; min-width: 100px; padding: 4px 8px; }
  .hud-hearts .ico { width: 18px; height: 18px; }
  .bar { width: 70px; }
  #banner { font-size: 22px; }
  #toasts { top: 84px; }
  .toast { font-size: 14px; }
}

/* ================================================================ motion
   House rules: UI eases out in 120-200 ms; ambient motion is slow; one accent per event.
   Enter animations only: exits are emptied ghosts, so no stale text lingers in the DOM. */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

/* dialogue */
#dialog:not([hidden]) .dlg-box { animation: dlgIn .17s var(--ease) backwards; transform-origin: 50% 100%; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scaleY(.92); } }
.dlg-ghost { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); width: min(880px, 94vw); z-index: 19; pointer-events: none; }
.dlg-ghost .dlg-box { animation: dlgOut .15s ease-in forwards; transform-origin: 50% 100%; }
@keyframes dlgOut { to { opacity: 0; transform: translateY(12px) scaleY(.94); } }
.tw { animation: twIn .14s ease-out backwards; }
@keyframes twIn { from { opacity: .2; color: var(--gold); } }
.dlg-next { animation: nextBob .9s ease-in-out infinite; }
@keyframes nextBob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
.dlg-choices li { transition: color .1s, transform .14s var(--ease); animation: choiceIn .18s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes choiceIn { from { opacity: 0; transform: translateX(-14px); } }
.dlg-choices li.sel { transform: translateX(5px); }
.dlg-choices li.sel .heart { animation: heartIn .2s var(--ease); }
@keyframes heartIn { from { opacity: 0; transform: translateX(-9px) scale(.4); } 60% { transform: translateX(1px) scale(1.3); } }

/* toasts */
.toast { animation: tin .2s var(--ease) backwards; max-height: 200px; overflow: hidden; transition: opacity .2s ease-in, transform .2s ease-in, max-height .2s ease-in, padding .2s ease-in, border-width .2s, margin .2s; }
.toast.out { opacity: 0; transform: translateY(-10px) scale(.97); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -6px; }
@keyframes tin { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* menus */
#menu:not([hidden]) { animation: fadeIn .14s ease-out backwards; }
#menu:not([hidden]) .menu-panel { animation: panelIn .18s var(--ease) backwards; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.965); } }
.menu-ghost { position: absolute; inset: 0; background: rgba(10,6,12,.6); display: grid; place-items: center; z-index: 39; pointer-events: none; animation: fadeOut .16s ease-in forwards; }
.menu-ghost .menu-panel { animation: panelOut .16s ease-in forwards; }
@keyframes panelOut { to { transform: translateY(8px) scale(.98); } }
.menu-body.slide-r { animation: slideR .18s var(--ease) backwards; }
.menu-body.slide-l { animation: slideL .18s var(--ease) backwards; }
@keyframes slideR { from { opacity: 0; transform: translateX(28px); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-28px); } }
.menu-tabs button { transition: background .12s, color .12s, transform .12s var(--ease); }
.menu-tabs button:hover:not(.on) { transform: translateY(-2px); }
.menu-tabs button.on { animation: tabOn .16s var(--ease); }
@keyframes tabOn { from { transform: translateY(4px); } }
.list li { transition: background .1s, border-color .1s, transform .12s var(--ease); }
.list li.sel { transform: translateX(3px); }

/* HUD */
.bar i { transition: width .24s var(--ease); }
.bar.low i { animation: lowPulse .9s ease-in-out infinite alternate; }
@keyframes lowPulse { from { opacity: .65; } }
.hud-hearts .ico { transform-origin: 50% 60%; }
.hud-hearts.low .full { animation: lowBeat 1.2s ease-in-out infinite; }
@keyframes lowBeat { 0%, 36%, 100% { transform: scale(1); } 12% { transform: scale(1.2); } 24% { transform: scale(1.08); } }
.hud-hearts .hurt { animation: heartHurt .32s ease-out; }
@keyframes heartHurt { 0% { transform: scale(1.3); filter: brightness(2.4); } 25% { transform: translateX(-3px) scale(1.15); } 50% { transform: translateX(3px); } 75% { transform: translateX(-1px); } 100% { transform: none; filter: none; } }
.hud-hearts .heal { animation: heartHeal .36s var(--ease); }
@keyframes heartHeal { 0% { transform: scale(.6); } 50% { transform: scale(1.4); filter: brightness(1.5) saturate(1.3); } 100% { transform: scale(1); } }
.hud-gold.gain span { animation: goldGain .5s ease-out; }
.hud-gold.spend span { animation: goldSpend .5s ease-out; }
@keyframes goldGain { from { color: #2f9a24; } }
@keyframes goldSpend { from { color: #b02a2a; } }
#prompt:not([hidden]) { animation: promptIn .14s var(--ease) backwards; }
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 6px); } }

/* title: drifting fireflies, rising stink, a floating logo */
#screen.title { overflow: hidden; }
#screen.title::before, #screen.title::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 3px; pointer-events: none; }
#screen.title::before { box-shadow: 0vw 88vh 0 0 rgba(190,255,110,.85),
    28vw 20vh 0 0 rgba(190,255,110,.85),
    71vw 51vh 0 0 rgba(190,255,110,.85),
    32vw 72vh 0 0 rgba(190,255,110,.85),
    74vw 52vh 0 0 rgba(190,255,110,.85),
    67vw 61vh 0 0 rgba(190,255,110,.85),
    80vw 23vh 0 0 rgba(190,255,110,.85),
    37vw 68vh 0 0 rgba(190,255,110,.85),
    68vw 5vh 0 0 rgba(190,255,110,.85),
    67vw 45vh 0 0 rgba(190,255,110,.85),
    90vw 78vh 0 0 rgba(190,255,110,.85); animation: ffDrift 11s ease-in-out infinite alternate, ffBlink 3.4s ease-in-out infinite; }
#screen.title::after { box-shadow: 12vw 49vh 0 0 rgba(255,238,170,.8),
    90vw 66vh 0 0 rgba(255,238,170,.8),
    63vw 55vh 0 0 rgba(255,238,170,.8),
    89vw 87vh 0 0 rgba(255,238,170,.8),
    36vw 32vh 0 0 rgba(255,238,170,.8),
    82vw 32vh 0 0 rgba(255,238,170,.8),
    15vw 29vh 0 0 rgba(255,238,170,.8),
    42vw 28vh 0 0 rgba(255,238,170,.8),
    92vw 54vh 0 0 rgba(255,238,170,.8),
    71vw 84vh 0 0 rgba(255,238,170,.8); animation: ffDrift 15s ease-in-out -6s infinite alternate-reverse, ffBlink 4.6s ease-in-out -2s infinite; }
@keyframes ffDrift { from { transform: translate(-14px, 8px); } to { transform: translate(18px, -16px); } }
@keyframes ffBlink { 0%, 100% { opacity: .12; } 45%, 60% { opacity: 1; } }
.title-card { position: relative; }
.logo { position: relative; animation: logoIn .5s var(--ease) backwards, logoFloat 5s ease-in-out .5s infinite; }
@keyframes logoIn { from { opacity: 0; transform: translateY(-18px) scale(.95); } }
@keyframes logoFloat { 50% { transform: translateY(-4px); } }
.logo span { animation: shimmer 4s ease-in-out infinite; }
@keyframes shimmer { 50% { color: #fff4d0; } }
.logo::before, .logo::after { content: ''; position: absolute; top: 4px; width: 6px; height: 6px; background: rgba(154,176,74,.7); pointer-events: none; animation: fumes 3.8s ease-out infinite; }
.logo::before { left: 18%; box-shadow: 60px -6px 0 rgba(154,176,74,.5), 130px 4px 0 rgba(154,176,74,.6); }
.logo::after { left: 40%; animation-delay: -1.9s; box-shadow: 70px 2px 0 rgba(154,176,74,.5), 150px -8px 0 rgba(154,176,74,.55); }
@keyframes fumes { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(6px, -38px); } }
.sub { animation: fadeIn .6s ease-out .2s backwards; }
.title-menu button { transition: transform .12s var(--ease), background .12s, box-shadow .12s; animation: rise .26s var(--ease) backwards; }
.origin { transition: transform .12s var(--ease), background .12s, box-shadow .12s; animation: rise .26s var(--ease) backwards; }
.title-menu button:nth-child(1) { animation-delay: 0.25s; }
.title-menu button:nth-child(2) { animation-delay: 0.32s; }
.title-menu button:nth-child(3) { animation-delay: 0.39s; }
.title-menu button:nth-child(4) { animation-delay: 0.46s; }
.title-menu button:nth-child(5) { animation-delay: 0.53s; }
.origin:nth-child(1) { animation-delay: 0.10s; }
.origin:nth-child(2) { animation-delay: 0.16s; }
.origin:nth-child(3) { animation-delay: 0.22s; }
.origin:nth-child(4) { animation-delay: 0.28s; }
.origin:nth-child(5) { animation-delay: 0.34s; }
.origin:nth-child(6) { animation-delay: 0.40s; }
.origin:nth-child(7) { animation-delay: 0.46s; }
.origin:nth-child(8) { animation-delay: 0.52s; }
#screen:not([hidden]) { animation: fadeIn .2s ease-out backwards; }

/* morning card reveal, death, season end */
.morning-card { animation: cardIn .26s var(--ease) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.morning-card > :not(.cont), .death-card > :not(.cont), .epilogue-card > :not(.cont) { animation: rise .26s var(--ease) backwards; }
.morning-card > :not(.cont):nth-child(1) { animation-delay: 0.10s; }
.morning-card > :not(.cont):nth-child(2) { animation-delay: 0.17s; }
.morning-card > :not(.cont):nth-child(3) { animation-delay: 0.24s; }
.morning-card > :not(.cont):nth-child(4) { animation-delay: 0.31s; }
.morning-card > :not(.cont):nth-child(5) { animation-delay: 0.38s; }
.morning-card > :not(.cont):nth-child(6) { animation-delay: 0.45s; }
.morning-card > :not(.cont):nth-child(7) { animation-delay: 0.52s; }
.morning-card > :not(.cont):nth-child(8) { animation-delay: 0.59s; }
.morning-card > :not(.cont):nth-child(9) { animation-delay: 0.66s; }
.morning-card > :not(.cont):nth-child(10) { animation-delay: 0.73s; }
.death-card > :not(.cont):nth-child(1) { animation-delay: 0.10s; }
.death-card > :not(.cont):nth-child(2) { animation-delay: 0.22s; }
.death-card > :not(.cont):nth-child(3) { animation-delay: 0.34s; }
.death-card > :not(.cont):nth-child(4) { animation-delay: 0.46s; }
.death-card > :not(.cont):nth-child(5) { animation-delay: 0.58s; }
.death-card > :not(.cont):nth-child(6) { animation-delay: 0.70s; }
.death-card > :not(.cont):nth-child(7) { animation-delay: 0.82s; }
.death-card > :not(.cont):nth-child(8) { animation-delay: 0.94s; }
.epilogue-card > :not(.cont):nth-child(1) { animation-delay: 0.10s; }
.epilogue-card > :not(.cont):nth-child(2) { animation-delay: 0.18s; }
.epilogue-card > :not(.cont):nth-child(3) { animation-delay: 0.26s; }
.epilogue-card > :not(.cont):nth-child(4) { animation-delay: 0.34s; }
.epilogue-card > :not(.cont):nth-child(5) { animation-delay: 0.42s; }
.epilogue-card > :not(.cont):nth-child(6) { animation-delay: 0.50s; }
.epilogue-card > :not(.cont):nth-child(7) { animation-delay: 0.58s; }
.epilogue-card > :not(.cont):nth-child(8) { animation-delay: 0.66s; }
.epilogue-card > :not(.cont):nth-child(9) { animation-delay: 0.74s; }
.epilogue-card > :not(.cont):nth-child(10) { animation-delay: 0.82s; }
.morning-card li { animation: rise .22s var(--ease) backwards; }
.morning-card li:nth-child(1) { animation-delay: 0.30s; }
.morning-card li:nth-child(2) { animation-delay: 0.36s; }
.morning-card li:nth-child(3) { animation-delay: 0.42s; }
.morning-card li:nth-child(4) { animation-delay: 0.48s; }
.morning-card li:nth-child(5) { animation-delay: 0.54s; }
.morning-card li:nth-child(6) { animation-delay: 0.60s; }
.morning-card li:nth-child(7) { animation-delay: 0.66s; }
.morning-card li:nth-child(8) { animation-delay: 0.72s; }
.ending-list li { animation: slideEnding .3s var(--ease) backwards; }
@keyframes slideEnding { from { opacity: 0; transform: translateX(-22px); } }
.ending-list li:nth-child(1) { animation-delay: 0.45s; }
.ending-list li:nth-child(2) { animation-delay: 0.55s; }
.ending-list li:nth-child(3) { animation-delay: 0.65s; }
.ending-list li:nth-child(4) { animation-delay: 0.75s; }
.ending-list li:nth-child(5) { animation-delay: 0.85s; }
.ending-list li:nth-child(6) { animation-delay: 0.95s; }
.ending-list li:nth-child(7) { animation-delay: 1.05s; }
.ending-list li:nth-child(8) { animation-delay: 1.15s; }
.ending-list li:nth-child(9) { animation-delay: 1.25s; }
.ending-list li:nth-child(10) { animation-delay: 1.35s; }
.ending-list li:nth-child(11) { animation-delay: 1.45s; }
.ending-list li:nth-child(12) { animation-delay: 1.55s; }
.ending-list li:nth-child(13) { animation-delay: 1.65s; }
.ending-list li:nth-child(14) { animation-delay: 1.75s; }
.cont { animation: fadeIn .4s ease-out .8s backwards, bob 1s steps(2) infinite; }

/* nobody asked for motion: keep the fades, drop the movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #banner.show { animation: bannerFade 2.8s linear forwards !important; }
  @keyframes bannerFade { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }
  #screen.title::before, #screen.title::after { opacity: .5; }
  .dlg-ghost, .menu-ghost { display: none; }
}