:root {
  --s: 3;
  --ink: #e9d9b8;
  --ink-dim: #9c8b70;
  --ember: #ff9a2e;
  --panel: rgba(18, 11, 8, 0.82);
  --panel-solid: rgba(16, 10, 7, 0.96);
  --edge: #5a3a22;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #050303;
  color: var(--ink);
  font-family: 'VT323', ui-monospace, monospace;
  overflow: hidden;
  user-select: none;
  font-variant-ligatures: none;
}

body { display: grid; place-items: center; }

#stage {
  position: relative;
  width: calc(320px * var(--s));
  height: calc(180px * var(--s));
}

#stage canvas#pix,
#stage canvas#light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#pix { image-rendering: pixelated; }

.hidden { display: none !important; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(1px * var(--s));
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
button:hover:not(:disabled) { border-color: var(--ember); color: #fff3d6; }
button:disabled { opacity: 0.4; cursor: default; }

#hud {
  position: absolute;
  left: calc(6px * var(--s));
  top: calc(4px * var(--s));
  font-size: calc(7px * var(--s));
  color: var(--ink-dim);
  text-shadow: 0 0 calc(2px * var(--s)) #000;
}

#menu {
  position: absolute;
  right: calc(5px * var(--s));
  top: calc(4px * var(--s));
  display: flex;
  gap: calc(2px * var(--s));
}
#menu button {
  font-size: calc(5px * var(--s));
  padding: 0 calc(3px * var(--s));
  color: var(--ink-dim);
  background: rgba(10, 6, 4, 0.6);
  border-color: #2e1f14;
}

#message {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(30px * var(--s));
  text-align: center;
  font-size: calc(7px * var(--s));
  text-shadow: 0 0 calc(3px * var(--s)) #000, 0 0 calc(1px * var(--s)) #000;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  padding: 0 calc(20px * var(--s));
}
#message.show { opacity: 1; }

#actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(9px * var(--s));
  display: flex;
  justify-content: center;
  gap: calc(4px * var(--s));
}
.act {
  font-size: calc(6.5px * var(--s));
  min-width: calc(42px * var(--s));
  padding: calc(1px * var(--s)) calc(4px * var(--s)) calc(2px * var(--s));
}
/* cooldown bar */
.act::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(1px * var(--s));
  width: var(--cd, 0%);
  background: var(--ember);
}

#dialogue {
  position: absolute;
  left: 50%;
  bottom: calc(8px * var(--s));
  transform: translateX(-50%);
  width: calc(230px * var(--s));
  display: flex;
  gap: calc(5px * var(--s));
  padding: calc(5px * var(--s));
  background: var(--panel-solid);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(2px * var(--s));
  box-shadow: 0 0 calc(12px * var(--s)) rgba(0, 0, 0, 0.8);
  animation: rise 0.35s ease-out;
}
#portrait {
  width: calc(32px * var(--s));
  height: calc(32px * var(--s));
  image-rendering: pixelated;
  flex: none;
  border: calc(1px * var(--s)) solid #2e1f14;
  background: #0b0807;
}
#dialogue .body { flex: 1; }
#dlgText {
  margin: 0 0 calc(4px * var(--s));
  font-size: calc(6.5px * var(--s));
  line-height: 1.05;
}
#dlgChoices { display: flex; flex-wrap: wrap; gap: calc(3px * var(--s)); }
#dlgChoices button {
  font-size: calc(6.5px * var(--s));
  padding: 0 calc(5px * var(--s));
}
#dlgChoices button .key { color: var(--ink-dim); }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 1, 0.85);
  display: grid;
  place-items: center;
}
.overlay .panel {
  width: calc(200px * var(--s));
  max-height: calc(150px * var(--s));
  display: flex;
  flex-direction: column;
  padding: calc(6px * var(--s));
  background: var(--panel);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(2px * var(--s));
}
.overlay .sub {
  margin: 0 0 calc(4px * var(--s));
  font-size: calc(5.5px * var(--s));
  color: var(--ink-dim);
}
.overlay h2 {
  margin: 0 0 calc(3px * var(--s));
  font-weight: normal;
  font-size: calc(8px * var(--s));
  color: var(--ember);
}
#journalList {
  list-style: none;
  margin: 0 0 calc(4px * var(--s));
  padding: 0 calc(2px * var(--s)) 0 0;
  overflow-y: auto;
  font-size: calc(6px * var(--s));
  line-height: 1.1;
  scrollbar-color: var(--edge) transparent;
}
#journalList li { padding: calc(1px * var(--s)) 0; color: var(--ink); }
#journalList li:nth-child(n + 6) { color: var(--ink-dim); }
#journalClose, #buildClose { align-self: flex-end; font-size: calc(6px * var(--s)); padding: 0 calc(5px * var(--s)); }

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, calc(6px * var(--s))); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

#buildList {
  list-style: none;
  margin: 0 0 calc(4px * var(--s));
  padding: 0 calc(2px * var(--s)) 0 0;
  overflow-y: auto;
  scrollbar-color: var(--edge) transparent;
}
#buildList li {
  padding: calc(2px * var(--s)) 0;
  border-bottom: calc(0.5px * var(--s)) solid #2e1f14;
}
#buildList .row { display: flex; justify-content: space-between; align-items: center; }
#buildList .name { font-size: calc(7px * var(--s)); }
#buildList .dim { color: var(--ink-dim); font-size: calc(5.5px * var(--s)); }
#buildList button { font-size: calc(6px * var(--s)); padding: 0 calc(5px * var(--s)); }
#buildList .desc { font-size: calc(5.5px * var(--s)); color: var(--ink-dim); line-height: 1.05; }
#buildList .cost { font-size: calc(5.5px * var(--s)); color: var(--ember); }

/* ---- hud clock */
#clock { font-size: calc(5.5px * var(--s)); color: #7d6d58; margin-top: calc(1px * var(--s)); }

/* ---- what shows in which mode */
#stage:not([data-mode="playing"]) #actions,
#stage:not([data-mode="playing"]) #menu { display: none; }
#stage[data-mode="title"] #hud,
#stage[data-mode="title"] #message,
#stage[data-mode="ended"] #hud,
#stage[data-mode="ended"] #message { display: none; }

/* ---- full-stage screens: title and ending */
.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 70%, rgba(20, 8, 4, 0.25), rgba(3, 1, 1, 0.78));
}
.title-inner { text-align: center; width: calc(210px * var(--s)); }
.screen h1 {
  margin: 0;
  font-weight: normal;
  font-size: calc(30px * var(--s));
  letter-spacing: calc(1.5px * var(--s));
  line-height: 1;
  color: #ffcf6a;
  text-shadow: 0 0 calc(4px * var(--s)) #ff7a2a, 0 0 calc(14px * var(--s)) rgba(232, 85, 28, 0.6);
  animation: flicker 3.2s infinite;
}
.screen .tag {
  margin: calc(1px * var(--s)) 0 calc(10px * var(--s));
  font-size: calc(7px * var(--s));
  color: var(--ink-dim);
}
.menu-col { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); }
.menu-col button, .subpanel .backBtn {
  font-size: calc(7.5px * var(--s));
  min-width: calc(90px * var(--s));
  padding: 0 calc(6px * var(--s)) calc(1px * var(--s));
}
.menu-col button:focus-visible, .subpanel button:focus-visible, .end-panel button:focus-visible { border-color: var(--ember); outline: none; }
.subpanel {
  background: var(--panel-solid);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(2px * var(--s));
  padding: calc(5px * var(--s)) calc(7px * var(--s));
  text-align: left;
}
.subpanel h2, .end-panel h2 {
  margin: 0 0 calc(3px * var(--s));
  font-weight: normal;
  font-size: calc(9px * var(--s));
  color: var(--ember);
}
.how { margin: 0; padding-left: calc(6px * var(--s)); font-size: calc(6px * var(--s)); line-height: 1.1; }
.how li { margin-bottom: calc(1.5px * var(--s)); }
.how b { font-weight: normal; color: #ffcf6a; }
.keys { font-size: calc(5px * var(--s)); color: var(--ink-dim); margin: calc(3px * var(--s)) 0; }
.subpanel .backBtn { min-width: 0; float: right; font-size: calc(6px * var(--s)); }

/* ---- leaderboard */
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(7px * var(--s));
  min-width: calc(120px * var(--s));
}
.board li { display: grid; grid-template-columns: 2.2em 3.5em 1fr auto; gap: calc(2px * var(--s)); align-items: baseline; }
.board .rank { color: var(--ink-dim); }
.board .pts { text-align: right; color: #ffcf6a; }
.board .sun { color: #f0d8a0; text-align: right; white-space: nowrap; letter-spacing: -0.05em; }
.board li.mine { color: #fff3d6; background: rgba(255, 154, 46, 0.15); animation: flicker 1.2s infinite; }
.board li.empty { display: block; color: var(--ink-dim); }

/* ---- ending */
.end-panel {
  width: calc(170px * var(--s));
  max-height: calc(170px * var(--s));
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(6px * var(--s)) calc(8px * var(--s));
  background: var(--panel-solid);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(2px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--s));
}
.end-panel h2 { font-size: calc(14px * var(--s)); margin: 0; }
#endText { margin: 0; font-size: calc(6px * var(--s)); color: var(--ink-dim); white-space: pre-line; }
#endScore { border-collapse: collapse; font-size: calc(6px * var(--s)); width: 100%; }
#endScore td { padding: 0; }
#endScore .n { color: var(--ink-dim); text-align: right; padding-right: calc(4px * var(--s)); }
#endScore .pts { text-align: right; width: 4em; }
#endScore tr.total td { border-top: calc(0.5px * var(--s)) solid var(--edge); font-size: calc(8px * var(--s)); color: #ffcf6a; padding-top: calc(1px * var(--s)); }
#initials { display: flex; align-items: center; gap: calc(3px * var(--s)); font-size: calc(6px * var(--s)); color: #ffcf6a; }
#initialsInput {
  width: 3.4em;
  font: inherit;
  font-size: calc(8px * var(--s));
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.2em;
  color: #fff3d6;
  background: #0b0807;
  border: calc(1px * var(--s)) solid var(--ember);
  border-radius: calc(1px * var(--s));
}
#initials button { font-size: calc(6px * var(--s)); padding: 0 calc(4px * var(--s)); }


@keyframes flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 0.92; }
  45% { opacity: 0.75; }
  48% { opacity: 0.95; }
  70% { opacity: 0.88; }
}

/* ---- round 4: hunger, trips, the hand, death */
#hunger { font-size: calc(6px * var(--s)); color: #7d6d58; margin-top: calc(1px * var(--s)); }
#hunger.warn { color: #a8c8e8; }
#hunger.bad { color: #e0f0ff; text-shadow: 0 0 calc(2px * var(--s)) #6aa0e0; animation: flicker 0.8s infinite; }

#strike {
  position: absolute;
  left: 50%;
  top: calc(84px * var(--s));
  transform: translateX(-50%);
  font-size: calc(8px * var(--s));
  padding: calc(1px * var(--s)) calc(8px * var(--s)) calc(2px * var(--s));
  color: #fff3d6;
  background: rgba(90, 14, 8, 0.9);
  border-color: #ff5a40;
  animation: flicker 0.5s infinite;
}
#strike .dim { color: #e0a090; font-size: calc(5.5px * var(--s)); }
#strike::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(1px * var(--s));
  width: var(--cd, 100%);
  background: #ff5a40;
}

#away {
  position: absolute;
  left: 50%;
  bottom: calc(10px * var(--s));
  transform: translateX(-50%);
  width: calc(150px * var(--s));
  text-align: center;
  padding: calc(4px * var(--s)) calc(6px * var(--s));
  background: var(--panel-solid);
  border: calc(1px * var(--s)) solid var(--edge);
  border-radius: calc(2px * var(--s));
}
#away p { margin: 0 0 calc(3px * var(--s)); font-size: calc(7px * var(--s)); color: var(--ink-dim); }
#away .bar { height: calc(2px * var(--s)); background: #1a100a; margin-bottom: calc(3px * var(--s)); }
#awayBar { height: 100%; width: 0; background: var(--ember); }
#runBack { font-size: calc(6px * var(--s)); padding: 0 calc(5px * var(--s)); }

#endHint { margin: 0; font-size: calc(6px * var(--s)); color: #c8a070; }
#endHint::before { content: 'hint: '; color: var(--ink-dim); }
.end-buttons { display: flex; justify-content: center; gap: calc(4px * var(--s)); margin-top: calc(2px * var(--s)); }
.end-buttons button { font-size: calc(7.5px * var(--s)); min-width: calc(60px * var(--s)); padding: 0 calc(6px * var(--s)) calc(1px * var(--s)); }
#ending.died { background: radial-gradient(ellipse at 50% 50%, rgba(30, 0, 0, 0.6), rgba(0, 0, 0, 0.95)); }
#ending.died .end-panel { border-color: #5a1010; }
#ending.died h2 { color: #c8281e; text-shadow: 0 0 calc(6px * var(--s)) rgba(200, 20, 10, 0.6); font-size: calc(18px * var(--s)); }

/* ---- round 6: icon bar, title sound toggle */
#res { display: flex; gap: calc(5px * var(--s)); align-items: center; }
#res .item { display: inline-flex; align-items: center; gap: calc(1.5px * var(--s)); color: var(--ink); }
#res canvas { width: calc(7px * var(--s)); height: calc(7px * var(--s)); image-rendering: pixelated; }
#menu { z-index: 10; }
#stage[data-mode="title"] #menu { display: flex; }
#stage[data-mode="title"] #menu button:not(#soundBtn) { display: none; }

/* ---- phones and touch screens */
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  height: 100dvh;
}
.touch-only { display: none; }
body.touch .touch-only { display: list-item; }

/* bigger tap targets on touch screens */
body.touch .act { min-height: calc(20px * var(--s)); font-size: calc(7px * var(--s)); padding: 0 calc(4px * var(--s)); }
body.touch #actions { bottom: calc(5px * var(--s)); }
body.touch #message { bottom: calc(29px * var(--s)); }
body.touch #menu button { min-height: calc(12px * var(--s)); font-size: calc(6px * var(--s)); padding: 0 calc(4px * var(--s)); }
body.touch #dlgChoices button, body.touch .menu-col button, body.touch .end-buttons button { min-height: calc(16px * var(--s)); }
body.touch #dlgChoices button { padding: calc(1.5px * var(--s)) calc(5px * var(--s)); }
body.touch #runBack, body.touch #journalClose, body.touch #buildClose, body.touch #buildList button { padding: calc(1px * var(--s)) calc(6px * var(--s)); }
body.touch #strike { padding: calc(3px * var(--s)) calc(10px * var(--s)); }
body.touch .key { display: none; }
body.touch #howPanel .keys { display: none; }

#rotate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #050303;
  color: var(--ink);
  font-size: 24px;
  text-align: center;
}
#rotate.hidden { display: none; }
#rotate p { margin: 0; }
#rotate .dim { font-size: 18px; color: var(--ink-dim); }
#rotate .phone {
  width: 34px;
  height: 58px;
  border: 3px solid var(--ember);
  border-radius: 6px;
  margin-bottom: 14px;
  animation: turn 2.4s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 122, 42, 0.4);
}
@keyframes turn {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}

/* ---- night recap and all-time tally */
.recap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(8px * var(--s));
  font-size: calc(5.5px * var(--s));
  color: var(--ink-dim);
}
.recap li { display: flex; justify-content: space-between; gap: calc(3px * var(--s)); }
.recap .v { color: var(--ink); }
.tally { margin: 0; font-size: calc(5.5px * var(--s)); color: var(--ink-dim); }

/* ---- day 2 */
#slam {
  position: absolute;
  left: 50%;
  top: calc(100px * var(--s));
  transform: translateX(-50%);
  font-size: calc(8px * var(--s));
  padding: calc(1px * var(--s)) calc(8px * var(--s)) calc(2px * var(--s));
  color: #f0f4e0;
  background: rgba(40, 50, 20, 0.92);
  border-color: #b4c878;
  animation: flicker 0.5s infinite;
}
#slam::after { content: ''; position: absolute; left: 0; bottom: 0; height: calc(1px * var(--s)); width: var(--cd, 100%); background: #b4c878; }
#res .salt-item { display: none; }
#res.has-salt .salt-item { display: inline-flex; }
#res .cured-item { display: none; }
#res.has-cured .cured-item { display: inline-flex; }
#day { background: radial-gradient(ellipse at 30% 30%, rgba(200, 200, 220, 0.08), rgba(10, 8, 8, 0.55)); }
.day-panel h2 { color: #e8e4d8; }
.day-text { margin: 0; font-size: calc(6px * var(--s)); color: var(--ink-dim); }
#dayHours { color: #ffcf6a; }
#dayList { list-style: none; margin: 0; padding: 0; }
#dayList li { padding: calc(1.5px * var(--s)) 0; border-bottom: calc(0.5px * var(--s)) solid #2e1f14; }
#dayList .row { display: flex; justify-content: space-between; align-items: center; }
#dayList .name { font-size: calc(6.5px * var(--s)); }
#dayList .desc { font-size: calc(5px * var(--s)); color: var(--ink-dim); line-height: 1.05; }
#dayList button { font-size: calc(6px * var(--s)); padding: 0 calc(5px * var(--s)); min-width: calc(24px * var(--s)); }
#dayLog { list-style: none; margin: 0; padding: 0; font-size: calc(5.5px * var(--s)); color: #c8b890; max-height: calc(34px * var(--s)); overflow-y: auto; }
#dayLog li { padding: calc(0.5px * var(--s)) 0; }
body.touch #dayList button { min-height: calc(14px * var(--s)); }

.end-buttons { flex-wrap: wrap; }
.end-buttons button { min-width: calc(50px * var(--s)); }
#dayBtn { border-color: var(--ember); color: #ffcf6a; }

/* ---- the economy round: blaze, woodshed, spoilage */
#douse {
  position: absolute;
  left: 50%;
  top: calc(68px * var(--s));
  transform: translateX(-50%);
  font-size: calc(8px * var(--s));
  padding: calc(1px * var(--s)) calc(8px * var(--s)) calc(2px * var(--s));
  color: #fff3d6;
  background: rgba(120, 30, 8, 0.92);
  border-color: #ffb040;
  animation: flicker 0.4s infinite;
}
#douse .dim { color: #f0c0a0; font-size: calc(5.5px * var(--s)); }
#douse::after { content: ''; position: absolute; left: 0; bottom: 0; height: calc(1px * var(--s)); width: var(--cd, 100%); background: #ffb040; }
#shed {
  position: absolute;
  right: calc(5px * var(--s));
  top: calc(64px * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1px * var(--s));
  padding: calc(2px * var(--s));
  background: rgba(10, 6, 4, 0.7);
  border: calc(0.5px * var(--s)) solid #2e1f14;
  border-radius: calc(2px * var(--s));
}
.shed-count { font-size: calc(5.5px * var(--s)); color: var(--ink-dim); }
#stage:not([data-mode="playing"]) #shed { pointer-events: none; }
#res .item.full .n { color: #ffb040; }
#res .item.spoiling .n { color: #9ab060; animation: flicker 0.9s infinite; }
.day-warn { margin-top: calc(3px * var(--s)); color: #c87a5a; }
#endScore tr.fold { cursor: pointer; }
#endScore tr.fold:hover td:first-child, #endScore tr.fold:focus td:first-child { color: #ffcf6a; }
#endScore tr.sub td { color: var(--ink-dim); font-size: calc(5.5px * var(--s)); }
#endScore tr.sub td:first-child { padding-left: calc(8px * var(--s)); }
#endScore tr.hidden { display: none; }
#version { position: absolute; right: calc(3px * var(--s)); bottom: calc(2px * var(--s)); font-size: calc(4.5px * var(--s)); color: rgba(200, 180, 150, 0.35); pointer-events: none; z-index: 50; }
.dev-note { font-size: calc(5.5px * var(--s)); color: var(--ink-dim); max-width: 60ch; margin: 0 auto calc(4px * var(--s)); }
#res .fur-item { display: none; }
#res.has-fur .fur-item { display: inline-flex; }
#cold { font-size: calc(6px * var(--s)); color: #8aa0b8; }
#cold.warn { color: #a8c8e8; }
#cold.bad { color: #e0f0ff; text-shadow: 0 0 calc(2px * var(--s)) #6aa0e0; animation: flicker 0.8s infinite; }

/* ---- achievements */
.ach-count { font-size: calc(6px * var(--s)); color: var(--ink-dim); margin-left: calc(3px * var(--s)); }
.ach-list { list-style: none; margin: 0 0 calc(3px * var(--s)); padding: 0; max-height: calc(118px * var(--s)); overflow-y: auto; width: calc(210px * var(--s)); scrollbar-color: #5a3a22 transparent; }
.ach-list li { display: grid; grid-template-columns: calc(7px * var(--s)) 1fr; column-gap: calc(2px * var(--s)); font-size: calc(5.5px * var(--s)); line-height: 1.15; padding: calc(0.75px * var(--s)) 0; }
.ach-list li.group { display: block; color: var(--ember); font-size: calc(6px * var(--s)); margin-top: calc(2px * var(--s)); border-bottom: calc(0.5px * var(--s)) solid var(--edge); }
.ach-list .mark { grid-row: span 2; color: var(--ink-dim); }
.ach-list .name { color: var(--ink-dim); }
.ach-list .desc { grid-column: 2; color: #5d5246; font-size: calc(5px * var(--s)); }
.ach-list li.got .mark, .ach-list li.got .name { color: #ffcf6a; }
.ach-list li.got .desc { color: var(--ink-dim); }
.ach-list li.later { opacity: 0.5; }
#toast {
  position: absolute; right: calc(6px * var(--s)); top: calc(22px * var(--s)); z-index: 60; pointer-events: none;
  display: grid; max-width: calc(110px * var(--s)); padding: calc(2px * var(--s)) calc(4px * var(--s));
  background: var(--panel-solid); border: calc(1px * var(--s)) solid #8a6a2a; border-radius: calc(2px * var(--s));
  opacity: 0; transform: translateY(calc(-4px * var(--s))); transition: opacity 0.35s, transform 0.35s;
}
#toast.show { opacity: 1; transform: none; }
#toast .k { font-size: calc(4.5px * var(--s)); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
#toast .name { font-size: calc(7px * var(--s)); color: #ffcf6a; }
#toast .desc { font-size: calc(5px * var(--s)); color: var(--ink-dim); }
.ach-list::-webkit-scrollbar { width: calc(2px * var(--s)); }
.ach-list::-webkit-scrollbar-track { background: transparent; }
.ach-list::-webkit-scrollbar-thumb { background: #5a3a22; border-radius: calc(1px * var(--s)); }

/* ---- everything fits on the stage: panels scroll inside it, their buttons stay in view */
.scroll-y, #dlgText, .subpanel .how, .board, .ach-list, #dayList, .end-panel {
  scrollbar-width: thin; scrollbar-color: #5a3a22 transparent;
}
#dialogue { max-height: calc(166px * var(--s)); }
#dialogue .body { display: flex; flex-direction: column; min-height: 0; }
#dlgText { overflow-y: auto; min-height: calc(10px * var(--s)); flex: 0 1 auto; }
#dlgChoices { flex: none; }
#dlgChoices.list { flex-direction: column; flex-wrap: nowrap; gap: calc(1.5px * var(--s)); }
#dlgChoices.list button { text-align: left; padding: calc(0.5px * var(--s)) calc(4px * var(--s)); }
#dlgChoices .cdesc { display: block; font-size: calc(5px * var(--s)); color: var(--ink-dim); line-height: 1; padding-left: calc(6px * var(--s)); }

/* the title: smaller while a panel is open; the panel scrolls, the back button stays */
#title.sub h1 { font-size: calc(14px * var(--s)); }
#title.sub .tag { display: none; }
.title-inner .subpanel { max-height: calc(150px * var(--s)); display: flex; flex-direction: column; }
.title-inner .subpanel > .how, .title-inner .subpanel > .board, .title-inner .subpanel > .ach-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; max-height: none; }
.title-inner .subpanel .backBtn { float: none; align-self: flex-end; margin-top: calc(2px * var(--s)); flex: none; }

/* the ending: the buttons stay at the bottom of the panel while the rest scrolls */
.end-panel .end-buttons { position: sticky; bottom: calc(-6px * var(--s)); background: var(--panel-solid); padding: calc(2px * var(--s)) 0; margin-top: auto; }

/* the day: below the resource bar so you can always see what you have */
#day { place-items: end center; padding-bottom: calc(4px * var(--s)); }
#day .day-panel { max-height: calc(140px * var(--s)); }
#stage.dlg #message { opacity: 0; }
#day .day-panel { width: calc(236px * var(--s)); }
#day .day-warn { font-size: calc(5.5px * var(--s)); line-height: 1.05; }

/* ---- building in place: an ember over each spot you could build at, and a card for it */
#spots { position: absolute; inset: 0; pointer-events: none; }
#stage:not([data-mode="playing"]) #spots, #stage:not([data-mode="playing"]) #spotCard { display: none; }
.spot {
  position: absolute; pointer-events: auto;
  width: calc(5px * var(--s)); height: calc(5px * var(--s)); margin: calc(-2.5px * var(--s)) 0 0 calc(-2.5px * var(--s));
  padding: 0; border: none; border-radius: 50%;
  background: radial-gradient(circle, #ffd890 0 30%, #ff9a2e 45%, rgba(232, 85, 28, 0.35) 70%, rgba(232, 85, 28, 0) 100%);
  box-shadow: 0 0 calc(3px * var(--s)) rgba(255, 140, 40, 0.55);
  animation: ember 1.8s ease-in-out infinite;
}
.spot::after { content: ''; position: absolute; inset: calc(-4px * var(--s)); }   /* a bigger target to tap */
.spot:hover { box-shadow: 0 0 calc(5px * var(--s)) rgba(255, 170, 60, 0.9); }
@keyframes ember { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
#spotCard {
  position: absolute; z-index: 40; width: calc(110px * var(--s));
  max-height: calc(120px * var(--s)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a3a22 transparent;
  padding: calc(3px * var(--s)) calc(4px * var(--s));
  background: var(--panel-solid); border: calc(1px * var(--s)) solid var(--edge); border-radius: calc(2px * var(--s));
  box-shadow: 0 0 calc(8px * var(--s)) rgba(0, 0, 0, 0.8);
}
#spotCard .opt + .opt { border-top: calc(0.5px * var(--s)) solid #2e1f14; margin-top: calc(2px * var(--s)); padding-top: calc(2px * var(--s)); }
#spotCard .row { display: flex; justify-content: space-between; align-items: center; gap: calc(3px * var(--s)); }
#spotCard .name { font-size: calc(6.5px * var(--s)); color: #ffcf6a; }
#spotCard button { font-size: calc(6px * var(--s)); padding: 0 calc(4px * var(--s)); }
#spotCard .desc { font-size: calc(5px * var(--s)); color: var(--ink-dim); line-height: 1.05; margin-top: calc(1px * var(--s)); }
#spotCard .cost { font-size: calc(5.5px * var(--s)); color: var(--ember); }

/* the build and journal panels: the list scrolls, the close button always shows */
.overlay .panel { max-height: calc(164px * var(--s)); min-height: 0; }
#buildList, #journalList { flex: 1 1 auto; min-height: 0; }
#buildClose, #journalClose, .overlay .sub, .overlay h2 { flex: none; }
#saltFlare {
  position: absolute; left: 50%; top: calc(68px * var(--s)); transform: translateX(-50%);
  font-size: calc(7px * var(--s)); padding: calc(1px * var(--s)) calc(7px * var(--s)) calc(2px * var(--s));
  color: #eef4ff; background: rgba(30, 40, 60, 0.9); border-color: #a8c8e8; animation: flicker 0.9s infinite;
}
#saltFlare .dim { color: #b8c8d8; font-size: calc(5.5px * var(--s)); }
.title-inner .subpanel > .menu-col { overflow-y: auto; min-height: 0; flex: 1 1 auto; }

/* ---- difficulty and scares */
.diff-list { display: flex; flex-direction: column; gap: calc(3px * var(--s)); width: calc(200px * var(--s)); }
.diff-list button { display: grid; text-align: left; padding: calc(2px * var(--s)) calc(5px * var(--s)); }
.diff-list .name { font-size: calc(8px * var(--s)); color: #ffcf6a; }
.diff-list .desc { font-size: calc(5px * var(--s)); color: var(--ink-dim); line-height: 1.05; }
.diff-list button[data-diff="insane"] .name { color: #e05040; }
.board-tabs { display: flex; gap: calc(2px * var(--s)); margin-bottom: calc(2px * var(--s)); }
.board-tabs button { font-size: calc(5.5px * var(--s)); padding: 0 calc(4px * var(--s)); }
.board-tabs button.on { border-color: var(--ember); color: #ffcf6a; }

/* ---- quick-time buttons beside what they're for (positioned from main.js); smaller so they fit there */
#strike, #slam, #swat { font-size: calc(6.5px * var(--s)); padding: calc(0.5px * var(--s)) calc(5px * var(--s)) calc(1.5px * var(--s)); white-space: nowrap; z-index: 30; }
#swat {
  position: absolute; transform: translateX(-50%);
  color: #fff3d6; background: rgba(60, 40, 20, 0.92); border-color: #e0a050; animation: flicker 0.4s infinite;
}
#swat::after { content: ''; position: absolute; left: 0; bottom: 0; height: calc(1px * var(--s)); width: var(--cd, 100%); background: #e0a050; }
/* the playtest starts: day and night side by side, two to a row */
.menu-col.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2.5px * var(--s)) calc(4px * var(--s)); align-items: stretch; }
.menu-col.dev-grid button { min-width: 0; font-size: calc(6.5px * var(--s)); white-space: nowrap; }
.dev-diff { display: block; font-size: calc(6px * var(--s)); color: var(--ink-dim); margin-bottom: calc(3px * var(--s)); }
.dev-diff select { font: inherit; font-size: calc(6px * var(--s)); background: var(--panel-solid); color: var(--ink); border: calc(0.5px * var(--s)) solid var(--edge); }

/* the death lab: the scene on the left, its panel on the right (under it on a narrow screen) */
body.lab { padding-right: 300px; }
body.lab #stage #hud, body.lab #stage #menu, body.lab #stage #actions, body.lab #stage #message, body.lab #stage #toast,
body.lab #stage #spots, body.lab #stage #spotCard, body.lab #stage #away, body.lab #stage #dialogue,
body.lab #stage #slam, body.lab #stage #swat, body.lab #stage #strike, body.lab #stage #douse, body.lab #stage #saltFlare { display: none !important; }
#lab {
  position: fixed; top: 0; right: 0; bottom: 0; width: 300px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 16px;
  background: var(--panel-solid); border-left: 1px solid var(--edge); font-size: 18px; overflow-y: auto; overflow-x: hidden;
}
#lab.hidden { display: none !important; }
#lab h2 { margin: 0; font-size: 28px; font-weight: normal; color: var(--ember); letter-spacing: 1px; }
#lab h3 { margin: 8px 0 2px; font-size: 16px; font-weight: normal; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; }
#lab .lab-note { margin: 0; font-size: 15px; color: var(--ink-dim); }
#lab button { font-size: 18px; border-width: 1px; border-radius: 3px; padding: 3px 8px; }
#lab button.on { border-color: var(--ember); color: #fff3d6; }
#labList { scrollbar-color: var(--edge) transparent; flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
#labList > * { flex: none; }
#labList button { text-align: left; }
.lab-now { display: flex; justify-content: space-between; gap: 8px; }
#labTime { color: var(--ink-dim); white-space: nowrap; }
#labScrub { width: 100%; accent-color: var(--ember); }
.lab-row { display: flex; gap: 6px; }
.lab-row button { flex: 1; }
.lab-btn { margin-top: calc(3px * var(--s)); }
@media (max-width: 760px) {
  body.lab { padding-right: 0; padding-bottom: 46vh; }
  #lab { top: auto; left: 0; width: auto; height: 46vh; border-left: 0; border-top: 1px solid var(--edge); }
}