/* One look: a cold night with a warm camp (the franchise light story,
   Roles/Art Director/brands/risen-zeke/STYLE.md). Placeholder shapes only. */
:root {
  --night: #11151c;
  --night-2: #181d26;
  --night-3: #222936;
  --line: #354052;
  --text: #e4e8ef;
  --muted: #a3adbd;
  --fire: #f2a541;
  --ok: #7fd08a;
  --warn: #f0c64a;
  --bad: #ff8a80;
  --focus: #9cc7ff;
  color-scheme: dark;
  /* lib/games' dialog and sound button take RISEN!'s look from these. */
  --sg-bg: var(--night-2);
  --sg-text: var(--text);
  --sg-border: var(--line);
  --sg-btn-bg: var(--night-3);
  --sg-main-bg: var(--fire);
  --sg-main-text: #1a1209;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button, select, input { font: inherit; color: inherit; }
button {
  background: var(--night-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--muted); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--fire); color: #1a1206; border-color: var(--fire); font-weight: 600; }
button.small { padding: 2px 8px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
select, input[type="number"] {
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 6px;
  max-width: 100%;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--night-2);
}
.bar h1 { margin: 0; font-size: 20px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.bar h1 .logo { width: 32px; height: 32px; }
.bar .sub { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.version, .seed { font-size: 12px; color: var(--muted); }
.controls { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

.map-wrap { min-width: 0; }
/* The hovered (or keyboard-cursored) tile's one line. Its height is reserved so the map doesn't
   jump as the line appears and goes. */
.tile-hint { margin: 8px 0 0; min-height: 1.3em; color: var(--muted); font-size: 13px; }
#map { width: 100%; height: auto; display: block; background: var(--night); border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }


.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card { background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card h3 { margin: 10px 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.stats div { background: var(--night); border-radius: 6px; padding: 6px 8px; }
.stats dt { font-size: 12px; color: var(--muted); }
.stats dd { margin: 0; font-size: 18px; font-weight: 600; }
.forecast { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--night); border-left: 4px solid var(--ok); }
.forecast.warn { border-left-color: var(--warn); }
.forecast.bad { border-left-color: var(--bad); }

.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.people li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.people label { font-weight: 600; }
.people .msg { grid-column: 2; font-size: 13px; }
.chip { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 400; }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.bad { color: var(--bad); border-color: var(--bad); }

.lines { margin: 0; padding-left: 18px; }
.lines li { margin: 2px 0; }
.lines .ok { color: var(--ok); }
.lines .warn { color: var(--warn); }
.lines .bad { color: var(--bad); }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--bad); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.pack-row { display: grid; grid-template-columns: 4.5em 4em minmax(0, 1fr); gap: 6px; align-items: center; margin: 6px 0; }
.pack-row .btns { display: flex; flex-wrap: wrap; gap: 4px; }
.slots { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.slot { min-width: 48px; padding: 0 4px; white-space: nowrap; height: 26px; border: 1px dashed var(--line); border-radius: 4px; font-size: 11px; display: grid; place-items: center; color: var(--muted); }
.slot.food { background: #4d4a22; color: var(--text); border-style: solid; }
.slot.wood { background: #3b2f1f; color: var(--text); border-style: solid; }
.slot.scrap { background: #3a3f4c; color: var(--text); border-style: solid; }
.slot.medicine { background: #24402f; color: var(--text); border-style: solid; }

table.summary { width: 100%; border-collapse: collapse; font-size: 13px; }
table.summary th, table.summary td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
/* The night's one sentence, under the report: quieter than the lines, warmer than a hint. */
.flavour { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--fire); color: var(--muted); font-style: italic; }
.notice { margin: 0; border-left: 4px solid var(--fire); }
.slot.tool { background: #2e3a2e; color: var(--text); border-style: solid; }

/* Title screen: the promo art over the night, one button to start. */
.title-screen {
  position: fixed; inset: 0; z-index: 50;
  background: #07090d;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 16px;
}
.title-screen[hidden] { display: none; }
.title-screen img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 8px; }
.title-screen button { font-size: 18px; padding: 10px 32px; }

/* The night roster and the arms row under each morning task (v0.0.32). */
.people .arms { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.people .arms select.equip { max-width: 100%; font-size: 12px; }
.night-roster li { display: flex; flex-direction: column; gap: 2px; }
.night-roster .btns { display: flex; flex-wrap: wrap; gap: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The tile menu (right-click) and its hover preview (v0.0.33). */
.tile-pop, .tile-menu { position: absolute; z-index: 20; max-width: min(340px, calc(100vw - 16px)); background: var(--night-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.tile-pop { pointer-events: none; color: var(--muted); }
.tile-pop strong, .tile-menu strong { color: var(--text); }
.tile-pop[hidden], .tile-menu[hidden] { display: none; }
.tile-title { margin: 0 0 6px; color: var(--muted); }
.acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acts li { display: flex; flex-direction: column; gap: 3px; }
.acts .what { font-weight: 600; }
.acts .what .hint { font-weight: 400; margin: 0; }
.acts .btns, .people .task .btns { display: inline-flex; flex-wrap: wrap; gap: 4px; }
button.on { border-color: var(--fire); color: var(--fire); }
.people .task { grid-column: 2; }
.people .who { font-weight: 600; }


/* Music credits (v0.0.38): CC-BY tracks must be credited in the game. */
.credits { max-width: 1400px; margin: 8px auto 16px; padding: 0 16px; font-size: 11px; color: var(--muted); }
.credits a { color: var(--muted); }

/* The title screen says it's an in-development build (v0.0.39, for the web demo). */
.title-dev { margin: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-align: center; }