/* The Prehistory as a game board: the valley fills the screen, marks of painted stone lie over it. Loaded after the
   theme: it turns the whole game to warm paper and dark ink, so that start page, dialogs and camp are of one piece. */
:root {
  --ink: #2d1c10;
  --paper: #fff7e3;
  --paper-deep: #f4e4bc;
  --ochre: #a2461f;
  --task-food: #e0862b;
  --task-wood: #5a9a3a;
  --task-stone: #8c8178;
  --task-construction: #b5532f;
  --task-research: #5672c9;
  --task-exploration: #1f929c;
  --task-idle: #d1a53f;
  --font-game: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;

  --background: #fbefd2;
  --sky: linear-gradient(#bfe3f7, #fbefd2 62%);
  --text: var(--ink);
  --surface: var(--paper);
  --surface-solid: var(--paper);
  --surface-text: var(--ink);
  --surface-deep: var(--paper-deep);
  --surface-border: 3px solid var(--ink);
  --radius: 20px;
  --button: var(--paper);
  --button-text: var(--ink);
  --button-border: 3px solid var(--ink);
  --button-hover: #ffe9b0;
  --button-hover-border: var(--ink);
  --radius-button: 14px;
  --action: #8f3a17;
  --action-text: #fff7e3;
  --action-border: var(--ink);
  --accent: var(--ochre);
  --font: var(--font-game);
  --story-backdrop: rgb(45 28 16 / 0.55);
}
.button { box-shadow: 0 3px 0 var(--ink); font-weight: 700; transition: transform 0.08s, box-shadow 0.08s; }
.button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.button.icon { box-shadow: 0 2px 0 var(--ink); }
/* ---------- Dialogs: picture cards on paper ---------- */
.modal-dialog, .picture-card { border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 10px 0 rgb(45 28 16 / 0.45); background: var(--paper); color: var(--ink); font: inherit; }
.modal-dialog::backdrop, .picture-card::backdrop { background: var(--story-backdrop); backdrop-filter: none; }
.modal-dialog[open], .picture-card[open] { animation: card-in 0.24s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
/* The one small cross of every dialog, in its corner; a click beside the dialog closes it too. */
.card-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 38px; height: 38px; font-size: 16px; }
.modal-content { padding: 22px; }
.modal-dialog.chronicle { width: min(880px, 94vw); height: fit-content; max-height: 88dvh; }
.modal-dialog.chronicle .modal-content { height: auto; max-height: calc(88dvh - 8px); padding: 62px 22px 24px; }

.picture-card { padding: 0; width: min(900px, 94vw); height: fit-content; max-width: none; max-height: 94dvh; overflow: hidden; }
.card-sheet { position: relative; display: flex; flex-direction: column; max-height: calc(94dvh - 8px); }
.card-image { display: block; width: 100%; aspect-ratio: 2; min-height: 0; flex: 0 1 auto; max-height: 52dvh; object-fit: cover; border-bottom: 4px solid var(--ink); background: #bfe3f7; }
.card-copy { min-height: 4.5rem; overflow: auto; padding: 20px clamp(20px, 4vw, 40px) 8px; }
.card-copy:last-child { padding-bottom: 28px; }
.card-title { margin: 0 0 8px; font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--font-game); letter-spacing: -0.01em; text-transform: none; }
.card-title:focus, .card-text:focus { outline: none; }
.card-text { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; font-weight: 500; }
.card-detail { margin-top: 12px; padding: 10px 14px; font-weight: 700; line-height: 1.45; background: var(--paper-deep); border-radius: 14px; }
.card-turn { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 20px 20px; }
.card-turn .pebble { width: 46px; height: 46px; font-size: 18px; }
.card-turn .pebble:disabled { opacity: 0.3; box-shadow: none; }
.card-turn .pebble.go { background: #ffd257; }
.card-dots { display: flex; gap: 8px; }
.card-dots i { width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background 0.2s, transform 0.2s; }
.card-dots i.on { background: var(--ochre); transform: scale(1.25); }
.card-tag { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 4px 14px; font-weight: 800; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 3px 0 var(--ink); }
.card-choices { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px clamp(20px, 4vw, 40px) 26px; list-style: none; }
.card-choice {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 16px; text-align: left; color: var(--ink); font: inherit;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.card-choice strong { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.card-choice span { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; opacity: 0.85; }
.card-choice:disabled { background: #e9dfcb; box-shadow: none; }
.card-choice:disabled strong { opacity: 0.55; }
.card-choice:disabled span { color: #b01a22; opacity: 1; }
.card-choice:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.card-choice:focus-visible, .picture-card .pebble:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }
@media (hover: hover) { .card-choice:hover:not(:disabled) { background: #ffe9b0; transform: translateY(-2px); } }
@media (max-width: 700px) { .card-choices { grid-auto-flow: row; } .card-image { max-height: 34dvh; } }

/* A new invention: its painting on the wall of the cave, its name and what it brings. */
.modal-dialog.discovery { width: min(620px, 94vw); height: fit-content; max-height: 94dvh; }
.modal-dialog.discovery .modal-content { height: auto; padding: 0; }
.discovery-wall {
  position: relative; display: grid; place-items: center; height: min(300px, 38dvh); overflow: hidden; border-bottom: 4px solid var(--ink);
  background: radial-gradient(circle at 50% 50%, rgb(255 247 227 / 0.9), transparent 46%), url("../images/wall-paintings.svg") center / cover, #ecd6aa;
}
.discovery-wall svg { grid-area: 1 / 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.discovery-rays { width: min(280px, 35dvh); height: min(280px, 35dvh); stroke: var(--ochre); stroke-width: 5; opacity: 0.55; animation: sun-turn 50s linear infinite; }
.discovery-glyph { width: min(130px, 17dvh); height: min(130px, 17dvh); overflow: visible; stroke: #8a3513; stroke-width: 2.7; animation: discovery-in 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s both; }
.discovery-results { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.discovery-results li { padding: 5px 14px; font-weight: 800; color: #1f6b25; background: #e2f2d2; border: 3px solid var(--ink); border-radius: 20px; }
.modal-dialog.discovery .card-copy { padding-bottom: 28px; }
@keyframes discovery-in { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } }

/* Chronicle: every told moment as a small picture card. */
.chronicle-entries { gap: 12px; }
.chronicle-entry {
  width: 100%; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 18px 8px 8px; text-align: left; color: var(--ink); font: inherit; cursor: pointer;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.chronicle-thumb { display: block; width: 150px; aspect-ratio: 2; object-fit: cover; border: 3px solid var(--ink); border-radius: 13px; background: var(--paper-deep); }
.chronicle-words { display: grid; gap: 2px; min-width: 0; }
.chronicle-words strong { font-size: 1.15rem; font-weight: 800; }
.chronicle-excerpt { font-weight: 500; line-height: 1.4; -webkit-line-clamp: 2; }
.chronicle-date { color: var(--ochre); }
.chronicle-entry.unread { background: #ffe9b0; }
.chronicle-entry:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.chronicle-empty { padding: 28px; font-weight: 700; }
@media (hover: hover) { .chronicle-entry:hover { background: #ffe9b0; } }
@media (max-width: 680px) { .chronicle-entry { grid-template-columns: 96px minmax(0, 1fr); } .chronicle-thumb { width: 96px; } .chronicle-date { display: none; } }

/* ---------- Title screen: the valley behind the saved games ---------- */
.start-screen { background: url("../images/valley.svg") center bottom / cover no-repeat; }
.start-screen:has(> .start-saves) { padding: 0; }
.start-screen > .start-saves { grid-template-rows: auto auto auto minmax(0, 1fr); justify-items: center; align-content: start; gap: 22px; padding: clamp(18px, 5dvh, 56px) 20px 20px; }
.start-title {
  font: 800 clamp(2.6rem, 7vw, 5.4rem)/1 var(--font-game); letter-spacing: -0.02em; color: var(--paper); text-align: center;
  -webkit-text-stroke: 0.14em var(--ink); paint-order: stroke fill; text-shadow: 0 0.09em 0 var(--ink);
}
.start-saves .start-button { padding: 16px 56px; font-size: 1.5rem; font-weight: 800; border-radius: 22px; box-shadow: 0 6px 0 var(--ink); }
.start-saves .start-save-area { justify-self: center; width: min(34rem, 100%); }
.start-saves .save-list { grid-template-columns: 1fr; padding: 0 4px 10px; }
.start-saves .save-entry { background: var(--paper); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
.start-saves .save-text strong { font-size: 1.4rem; font-weight: 800; }
.save-status { font-family: var(--font-game); }
.start-note { font-family: var(--font-game); font-weight: 700; }
/* The signed-in account under the button of a new game, on the valley like the title. */
.start-account { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 0; padding: 6px 14px; border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); font: 700 var(--text-sm) var(--font-game); }

/* New game: a sheet of paper over the valley; the passions as cards, the chosen one told beside them. */
.player-avatar { border: 3px solid var(--ink); border-radius: 22%; background: #9fd4f5; }
.start-screen { padding: clamp(10px, 3dvh, 28px) clamp(10px, 3vw, 40px); }
.start-screen > .start-new { position: relative; border: 4px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 rgb(45 28 16 / 0.45); background: var(--paper); padding: 26px clamp(18px, 3vw, 36px); gap: 18px 32px; }
.start-question { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--font-game); letter-spacing: -0.01em; padding-right: 56px; }
.alignment-list { gap: 12px; }
.alignment-tile { gap: 14px; padding: 6px 16px 6px 8px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); transition: transform 0.1s, box-shadow 0.1s, background 0.12s; }
.alignment-tile .player-avatar { height: min(72px, 100%); border-radius: 16px; }
.alignment-tile-text strong { font-size: 1.3rem; font-weight: 800; }
.alignment-tile-text small { font: 700 var(--text-xs) var(--font-game); letter-spacing: 0.06em; opacity: 0.75; }
.alignment-tile.selected { background: #ffd257; border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); transform: translateY(3px); }
.alignment-tile.selected strong { color: var(--ink); }
.alignment-tile:focus-within { outline: 3px solid var(--ochre); outline-offset: 3px; }
@media (hover: hover) { .alignment-tile:hover:not(.selected) { background: #ffe9b0; } }
.alignment-story { gap: clamp(20px, 3vw, 44px); padding: clamp(18px, 3vw, 36px); border: 3px solid var(--ink); border-radius: 24px; background: var(--paper-deep); }
.alignment-story .portrait-large { flex: none; box-shadow: 0 8px 0 var(--ink); border-width: 4px; border-radius: 36px; animation: card-in 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
.alignment-story h2 { font: 800 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--font-game); letter-spacing: -0.01em; }
.alignment-narrative { font-weight: 500; line-height: 1.55; }
.alignment-effects { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.alignment-effects li { padding: 5px 14px; font-weight: 800; border: 3px solid var(--ink); border-radius: 20px; }
.alignment-effects .plus { color: #1f6b25; background: #e2f2d2; }
.alignment-effects .minus { color: #b01a22; background: #ffd9d2; }
.start-new .start-actions { align-items: center; gap: 18px; }
.stone-button.go { background: #ffd257; }
.sun-button.start-sun { position: static; width: 104px; height: 104px; font-size: 18px; flex: none; }
.person-portrait { position: relative; }
.person-portrait .portrait-large { border-width: 5px; border-radius: 44px; box-shadow: 0 10px 0 var(--ink); }
.person-portrait .portrait-dice { position: absolute; right: -22px; bottom: -18px; font-size: 16px; }
.person-identity .field-input { padding: 14px 20px; font: 800 1.7rem var(--font-game); color: var(--ink); background: #fff; border: 4px solid var(--ink); border-radius: 20px; box-shadow: inset 0 4px 0 rgb(45 28 16 / 0.12); }
.person-identity .field-input:focus { outline: 4px solid #ffd257; outline-offset: 2px; }
.person-type { gap: 12px; padding: 6px 18px 6px 6px; border: 3px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-weight: 600; }
.person-type .player-avatar { width: 44px; height: 44px; border-radius: 14px; }
.save-open .player-avatar { border-radius: 18px; }

/* ---------- The picture ---------- */
.camp { position: absolute; inset: 0; }
.camp-stage { position: absolute; inset: 0; overflow: hidden; font: 800 clamp(12px, 1.18vw, 19px)/1 var(--font-game); color: var(--ink); user-select: none; }
.valley { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.valley {
  --sky-top: #58aef0; --sky-low: #fdf3d2; --far: #a7b4de; --ridge: #86bfa6; --hill: #5fa350; --ground: #8ccb5c; --ground-near: #76b74b;
  --leaf-a: #3f9547; --leaf-b: #5cae4b; --leaf-c: #2c7d58; --lake-far: #7fd0ee; --lake-near: #2f93d2; --square: #f1dca8; --square-light: #f9eac2;
}
.valley.season-spring { --ground: #a2d868; --ground-near: #8bc957; --hill: #74b55c; --leaf-a: #62b04d; --leaf-b: #f5a9c4; --sky-top: #6dbdf2; }
.valley.season-autumn { --ground: #c2bb58; --ground-near: #b0a94a; --hill: #a59d49; --leaf-a: #e38b2a; --leaf-b: #c84e29; --ridge: #a5b58f; --sky-top: #6aa9dc; --sky-low: #fde6c4; }
.valley.season-winter {
  --ground: #f4f8fc; --ground-near: #e2ebf4; --hill: #d7e3ee; --ridge: #c3d2de; --far: #b4bfdc; --leaf-a: #b9cdd2; --leaf-b: #d3e1e5; --leaf-c: #5c9084;
  --lake-far: #e0f0f7; --lake-near: #b5d7ea; --square: #ece4d2; --square-light: #f6f0e2; --sky-top: #8ebde4; --sky-low: #f4f7fb;
}
.valley-sky-top { stop-color: var(--sky-top); }
.valley-sky-low { stop-color: var(--sky-low); }
.valley-lake-far { stop-color: var(--lake-far); }
.valley-lake-near { stop-color: var(--lake-near); }
.valley-far { fill: var(--far); stroke: var(--far); stroke-width: 14; stroke-linejoin: round; }
.valley-cap { fill: #fff; opacity: 0.9; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.valley-ridge { fill: var(--ridge); }
.valley-hill { fill: var(--hill); }
.valley-ground { fill: var(--ground); }
.valley-ground-near { fill: var(--ground-near); }
.valley-shimmer { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0.6; animation: valley-shimmer 5s ease-in-out infinite alternate; }
.valley-river { fill: var(--lake-near); stroke: var(--lake-far); stroke-width: 6; }
.valley-rock { fill: #c7b394; }
.valley-rock-low { fill: #b9a585; }
.valley-rock-light { fill: #e2d3b6; }
.valley-rock-shine { fill: #f1e6cf; }
.valley-rock-mid { fill: #b29d80; }
.valley-rock-dark { fill: #a08b70; }
.valley-rock-line { fill: none; stroke: rgb(45 28 16 / 0.22); stroke-width: 4; stroke-linecap: round; }
.valley-cave-rim { fill: #8a7459; }
.valley-cave { fill: #4a3323; }
.valley-cave-deep { fill: #2a1a11; }
.valley-cave-glow { fill: #ffb347; opacity: 0.45; }
.valley-paint { fill: var(--ochre); stroke: var(--ochre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.valley-paint path { fill: none; }
.valley-shade { fill: rgb(45 28 16 / 0.2); }
.valley-tree .trunk { fill: #7b5331; }
.valley .leaf-a { fill: var(--leaf-a); }
.valley .leaf-b { fill: var(--leaf-b); }
.valley .leaf-c { fill: var(--leaf-c); }
.valley .leaf-hi { fill: #fff; opacity: 0.2; }
.valley.season-winter .leaf-hi { opacity: 0.75; }
.valley-bush .berry { fill: #d1273f; }
.valley.season-winter .valley-bush .berry { fill: #8a5a6a; }
.valley-boulder .stone { fill: #a79d94; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.valley-boulder .stone-hi { fill: #cfc7bf; }
.valley-path { fill: none; stroke: var(--square); stroke-width: 26; stroke-linecap: round; opacity: 0.75; }
.valley-square { fill: var(--square); }
.valley-square-light { fill: var(--square-light); }
.valley-tufts path { fill: none; stroke: rgb(45 28 16 / 0.28); stroke-width: 4; stroke-linecap: round; }
/* Sun and moon follow the time of the day in small steps; darkness follows the height of the sun. */
.valley-sun, .valley-moon { transition: opacity 0.45s, transform 0.25s linear; }
.valley-stars, .valley-dusk, .valley-horizon-glow { transition: opacity 0.45s; pointer-events: none; }
.valley-moon-dark { fill: #fff; opacity: 0.28; }
.valley-moon-light { fill: #fff; opacity: 0.85; }
.valley-stars { fill: #fff; opacity: 0; }
.valley-cloud path { fill: #fff; opacity: 0.92; }
.valley-cloud { animation: valley-drift 46s ease-in-out infinite alternate; }
.valley-cloud.slow { animation-duration: 70s; animation-direction: alternate-reverse; }
.valley-fog ellipse { fill: #fff; opacity: 0.96; }
.valley-fog g { transition: transform 1.6s ease-in-out; }
.valley-dusk { fill: #14204d; opacity: 0; pointer-events: none; }
.valley-night-fire { opacity: 0; transition: opacity 0.45s; pointer-events: none; }
.valley.night .valley-night-fire { opacity: 1; }

.valley-flame-outer { fill: #f2622b; }
.valley-flame-inner { fill: #ffd257; }
.valley-flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: valley-flicker 0.42s ease-in-out infinite alternate; }
.valley-smoke circle { fill: #fff; opacity: 0.5; animation: valley-smoke 3.2s linear infinite; }
.valley-smoke circle:nth-child(2) { animation-delay: -1.1s; }
.valley-smoke circle:nth-child(3) { animation-delay: -2.2s; }


.valley-ground-shade { fill: rgb(45 28 16 / 0.07); }
.valley-flowers .flower-0 { fill: #fff; }
.valley-flowers .flower-1 { fill: #ffd94a; }
.valley-flowers .flower-2 { fill: #f39ac0; }
.valley-flowers .flower-eye { fill: #e0862b; }
.valley.season-winter .valley-flowers, .valley.season-autumn .valley-flowers { display: none; }
.valley-moss { fill: var(--leaf-b); }
.valley.season-spring .valley-moss { fill: var(--leaf-a); }
.valley.season-winter .valley-moss { fill: #fff; }
.valley-rubble { fill: #a8957a; }
.valley-birds { animation: valley-fly 70s linear infinite; }
.valley-birds path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.valley.night .valley-birds { opacity: 0; }
.valley-front .front-a { fill: color-mix(in srgb, var(--leaf-c) 78%, #10301f); }
.valley-front .front-b { fill: var(--leaf-a); }
.valley.season-winter .valley-front .front-a { fill: #c3d3df; }
.valley-gain { font: 800 34px var(--font-game); text-anchor: middle; fill: #1f6b25; stroke: var(--paper); stroke-width: 7; paint-order: stroke; stroke-linejoin: round; animation: valley-gain 1.9s ease-out both; pointer-events: none; }
.valley-gain.person { font-size: 44px; fill: #7a4d2a; }
/* The question at the cave wall while no invention is chosen. */
.valley-ask { cursor: pointer; outline: none; }
.valley-ask-bubble { animation: valley-ask 1.4s ease-in-out infinite; }
.valley-ask path { fill: var(--paper); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.valley-ask text { font: 800 44px var(--font-game); text-anchor: middle; fill: #d1273f; }
.valley-ask:focus-visible path { fill: #ffd257; }
@media (hover: hover) { .valley-ask:hover path { fill: #ffe9b0; } }
@keyframes valley-ask { 50% { transform: translateY(-8px); } }
/* At work the residents sway, at the fire they only breathe. */
.valley-figure:not(.task-idle):not(.resting) .valley-figure-body { animation: valley-work 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

/* Residents: they walk when their task changes. */
.valley-figure { transition: transform 1.5s cubic-bezier(0.45, 0.05, 0.3, 1), opacity 0.6s; pointer-events: none; }
/* At night they walk to the door of the cave or their hut and go in; in the morning they step out there. */
.valley-snore text { font: 800 30px var(--font-game); fill: #f4ecff; stroke: #2a2440; stroke-width: 5; paint-order: stroke; stroke-linejoin: round; opacity: 0; animation: valley-snore 2.4s ease-in-out 2s infinite; }
.valley-snore .z2 { font-size: 24px; animation-delay: 2.4s; }
.valley-snore .z3 { font-size: 19px; animation-delay: 2.8s; }
@keyframes valley-snore { 0% { opacity: 0; transform: translateY(8px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.valley-figure.asleep { opacity: 0; transition: transform 1.5s cubic-bezier(0.45, 0.05, 0.3, 1), opacity 0.6s 1.4s; }
.valley-figure-body { animation: valley-bob 1.5s ease-in-out infinite; }
.valley-figure .coat { fill: var(--task); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.valley-figure .head { fill: #f0c49a; stroke: var(--ink); stroke-width: 2.2; }
.valley-figure:nth-of-type(3n) .head { fill: #c98f62; }
.valley-figure:nth-of-type(4n + 1) .head { fill: #8f5d3d; }
.valley-figure .hair { fill: #3a2416; }
.valley-figure:nth-of-type(5n + 2) .hair { fill: #b9772e; }
.task-food { --task: var(--task-food); }
.task-wood { --task: var(--task-wood); }
.task-stone { --task: var(--task-stone); }
.task-construction { --task: var(--task-construction); }
.task-research { --task: var(--task-research); }
.task-exploration { --task: var(--task-exploration); }
.task-idle { --task: var(--task-idle); }

/* Building places and orders */
.valley-plot { outline: none; }
.valley-plot:not(.built) { cursor: pointer; }
.valley-plot-ground { fill: rgb(45 28 16 / 0.1); stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 7; stroke-linecap: round; }
.valley-plot-stakes { stroke: #8a5a30; stroke-width: 5; stroke-linecap: round; }
.valley-plot-plus { stroke: var(--paper); stroke-width: 7; stroke-linecap: round; paint-order: stroke; filter: drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1.5px var(--ink)); animation: valley-pulse 1.8s ease-in-out infinite; }
.valley-ghost { opacity: 0.3; filter: saturate(0.3); }
.valley-order-badge > circle:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.valley-order-badge .ring { fill: none; stroke: var(--task-construction); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.5s; }
.valley-badge-icon { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.valley-plot:focus-visible .valley-plot-ground, .valley-plot.selected .valley-plot-ground { fill: rgb(255 247 227 / 0.75); stroke-dasharray: none; }
@media (hover: hover) { .valley-plot:not(.built):hover .valley-plot-ground { fill: rgb(255 247 227 / 0.75); } }

@keyframes valley-work { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg) translateY(-2px); } }
@keyframes valley-fly { from { transform: translate(-120px, 250px); } to { transform: translate(1760px, 90px); } }
@keyframes valley-gain { from { opacity: 0; transform: translateY(14px) scale(0.6); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: scale(1); } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-46px); } }
@keyframes valley-bob { 50% { transform: translateY(-2.5px); } }
@keyframes valley-flicker { from { transform: scale(0.92, 1.06); } to { transform: scale(1.06, 0.9); } }
@keyframes valley-smoke { from { transform: translateY(20px) scale(0.5); opacity: 0.55; } to { transform: translateY(-60px) scale(1.5); opacity: 0; } }
@keyframes valley-drift { from { transform: translateX(-40px); } to { transform: translateX(90px); } }
@keyframes valley-shimmer { from { transform: translateX(-12px); opacity: 0.35; } to { transform: translateX(12px); opacity: 0.7; } }
@keyframes valley-pulse { 50% { opacity: 0.45; } }

/* ---------- Marks over the picture ---------- */
.hud { position: absolute; z-index: 2; display: flex; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.hud .symbol { width: 1.5em; height: 1.5em; stroke-width: 2; }
.hud-stock { top: 1em; left: 1em; flex-direction: column; align-items: flex-start; }
.hud-people { top: 1em; left: 50%; transform: translateX(-50%); align-items: center; }
.hud-time { top: 1em; right: 1em; align-items: center; }
.hud-menu { bottom: 1.1em; left: 1.1em; gap: 0.8em; align-items: flex-end; }

.mark {
  position: relative; display: flex; align-items: center; gap: 0.45em; height: 2.9em; padding: 0 1em 0 0; white-space: nowrap; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 0.18em solid var(--ink); border-radius: 2em; box-shadow: 0 0.22em 0 var(--ink);
}
.mark strong { font-size: 1.55em; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mark-disc {
  position: relative; display: grid; place-items: center; width: 2.9em; height: 2.9em; margin: -0.18em 0 -0.18em -0.18em; flex: none;
  border-radius: 50%; border: 0.18em solid var(--ink); background: var(--mark, var(--paper-deep)); color: #fff;
}
.mark-ring { position: absolute; inset: -0.02em; width: 100%; height: 100%; fill: none; stroke-width: 7; }
.mark-ring .track { stroke: rgb(45 28 16 / 0.28); }
.mark-ring .fill { stroke: #fff; stroke-linecap: butt; transition: stroke-dasharray 0.6s; }
.mark-ring + .symbol { width: 1.25em; height: 1.25em; }
.res-food { --mark: var(--task-food); }
.res-wood { --mark: var(--task-wood); }
.res-stone { --mark: var(--task-stone); }
.mark-change { font-size: 0.95em; font-weight: 800; }
.mark-change.plus, .mark-delta { color: #1f6b25; }
.mark-change.minus, .mark-delta.minus { color: #b01a22; }
.mark.full strong { color: #9a5a00; }
.mark.hungry { background: #ffd9d2; animation: mark-alarm 1s ease-in-out infinite; }
.mark-delta { position: absolute; left: calc(100% + 0.5em); top: 0.3em; font-size: 1.5em; font-weight: 800; pointer-events: none; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); animation: mark-rise 1.6s ease-out both; }
.mark.small { height: 2.3em; padding-right: 0.7em; gap: 0.3em; }
.mark.small .mark-disc { width: 2.3em; height: 2.3em; }
.mark.small strong { font-size: 1.2em; }
.mark.small .mark-ring + .symbol { width: 1.05em; height: 1.05em; }
.mark-trend { width: 0.9em !important; height: 0.9em !important; stroke-width: 3.5 !important; margin-left: -0.15em; }
.mark-trend.up { color: #1f6b25; }
.mark-trend.down { color: #b01a22; }
.gauge-health { --mark: #d8415a; }
.gauge-morale { --mark: #e2a51f; }
.mark.level-low { background: #ffe9b0; }
.mark.level-bad { background: #ffd9d2; animation: mark-alarm 1s ease-in-out infinite; }
.mark.people { --mark: #7a4d2a; height: 3.4em; padding-right: 1.1em; }
.mark.people .mark-disc { width: 3.4em; height: 3.4em; }
.mark.people strong { font-size: 2em; }
.mark.people .mark-ring .fill { stroke: #ffd257; }
.mark-limit { display: inline-flex; align-items: center; gap: 0.15em; font-size: 1em; font-weight: 800; opacity: 0.75; }
.mark-limit .symbol { width: 1.1em; height: 1.1em; }
.mark.people.crowded .mark-limit { opacity: 1; color: #b01a22; }
.mark.people.blocked .mark-ring .fill { stroke: #ff9a8a; }
.mark.alarm { --mark: #b01a22; background: #ffd9d2; }
.mark.alarm.deadly { animation: mark-alarm 0.7s ease-in-out infinite; }
.mark.condition { --mark: #5d7f9c; }
.mark.calendar { padding: 0 0.9em; }
.mark.calendar .tally-calendar { display: block; line-height: 0; }
.mark.calendar .tally-calendar svg { height: 1.9em; width: auto; }
.mark.outcome { padding: 0 1em; }
.mark.outcome.won { background: #ffd257; }
.mark.outcome.lost { background: #ffd9d2; }
.pebble {
  display: grid; place-items: center; width: 2.4em; height: 2.4em; padding: 0; flex: none; color: var(--ink); background: var(--paper);
  border: 0.16em solid var(--ink); border-radius: 50%; box-shadow: 0 0.18em 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s;
}
.pebble .symbol { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.pebble:active:not(:disabled), .stone-button:active:not(:disabled) { transform: translateY(0.2em); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { .pebble:hover:not(:disabled), .stone-button:hover:not(:disabled) { background: #ffe9b0; } }

@keyframes mark-rise { from { opacity: 0; transform: translateY(0.4em); } 15% { opacity: 1; } 70% { opacity: 1; } to { opacity: 0; transform: translateY(-1.4em); } }
@keyframes mark-alarm { 50% { background: #ffb3a6; } }

/* Menus at the foot */
.stone-button {
  position: relative; display: grid; place-items: center; width: 4.4em; height: 4.4em; padding: 0; color: var(--ink); background: var(--paper);
  border: 0.2em solid var(--ink); border-radius: 1.4em; box-shadow: 0 0.3em 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s;
}
.stone-button > .symbol { width: 2.3em; height: 2.3em; stroke-width: 1.9; }
.stone-button.open { background: #ffd257; }
.stone-button:disabled { opacity: 0.55; }
.stone-button .mark-ring { inset: 0.25em; width: calc(100% - 0.5em); height: calc(100% - 0.5em); stroke-width: 5; }
.stone-button .mark-ring .fill { stroke: var(--task-research); stroke-linecap: round; }
.stone-button.research > .symbol { width: 2em; height: 2em; }
.stone-button.nudge { animation: stone-nudge 1.6s ease-in-out infinite; }
.stone-badge {
  position: absolute; top: -0.55em; right: -0.55em; min-width: 1.75em; height: 1.75em; padding: 0 0.35em; display: grid; place-items: center;
  font-size: 1em; color: #fff; background: var(--task-construction); border: 0.16em solid var(--ink); border-radius: 1em;
}
.stone-badge.none { background: #8c8178; }
.stone-badge.alert { background: #d1273f; font-size: 1.15em; animation: badge-hop 1s ease-in-out infinite; }
@keyframes badge-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.35em) scale(1.15); } }
@keyframes stone-nudge { 50% { background: #ffb3a6; } }

/* The work of the people lies around the fire while asked for: one stone per task with its residents, minus and plus send them. */
.valley-fire { cursor: pointer; }
.valley-fire-spot { fill: transparent; }
.fire-mark {
  position: absolute; z-index: 2; transform: translate(-50%, -4.9em); display: flex; align-items: center; gap: 0.35em; height: 2.5em; padding: 0 0.8em 0 0; color: var(--ink); font: inherit;
  background: var(--paper); border: 0.18em solid var(--ink); border-radius: 2em; box-shadow: 0 0.22em 0 var(--ink); --task: var(--task-idle); transition: background 0.15s;
}
.fire-mark .tray-disc { width: 2.5em; height: 2.5em; margin: -0.18em 0 -0.18em -0.18em; }
.fire-mark strong { font-size: 1.4em; font-variant-numeric: tabular-nums; }
.fire-mark.enough { --task: #4d9a3e; }
.fire-mark.open { background: #ffd257; }
.fire-mark::after { content: ""; position: absolute; left: 50%; bottom: -0.62em; width: 0.7em; height: 0.7em; background: inherit; border: solid var(--ink); border-width: 0 0.18em 0.18em 0; transform: translateX(-50%) rotate(45deg); }
@media (hover: hover) { .fire-mark:hover { background: #ffe9b0; } }
.tray-disc { position: relative; display: grid; place-items: center; width: 2.7em; height: 2.7em; flex: none; color: #fff; background: var(--task); border: 0.17em solid var(--ink); border-radius: 50%; }
.tray-disc .symbol { width: 1.5em; height: 1.5em; stroke-width: 2.1; }
.tray-sleep { position: absolute; top: -0.5em; right: -0.5em; font-style: italic; font-size: 1.1em; color: var(--ink); animation: valley-pulse 1.6s ease-in-out infinite; }
.work-ring { position: absolute; z-index: 2; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.ring-task { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); animation: ring-out 0.26s cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--i) * 0.03s); }
/* The stone rests on a pivot and tips to the side that is pressed. */
.ring-task::after { content: ""; position: absolute; left: 50%; bottom: -0.95em; transform: translateX(-50%); border: solid transparent; border-width: 0 0.75em 0.8em; border-bottom-color: var(--ink); }
.rocker {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 12.2em; padding: 0.4em 0;
  background: linear-gradient(90deg, rgb(45 28 16 / 0.13), transparent 30%, transparent 70%, rgb(45 28 16 / 0.13)), color-mix(in srgb, var(--task) 22%, var(--paper));
  border: 0.2em solid var(--ink); border-radius: 2.6em; box-shadow: 0 0.28em 0 var(--ink); transition: transform 0.32s cubic-bezier(0.3, 2.2, 0.5, 1);
}
.rocker.left, .rocker:has(.rock.left:active:not(:disabled)) { transform: rotate(-9deg); transition-duration: 0.07s; }
.rocker.right, .rocker:has(.rock.right:active:not(:disabled)) { transform: rotate(9deg); transition-duration: 0.07s; }
.rock { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; padding: 0 0.7em; color: var(--ink); background: none; border: 0; }
.rock.left { left: 0; justify-content: flex-start; border-radius: 2.4em 0 0 2.4em; }
.rock.right { right: 0; justify-content: flex-end; border-radius: 0 2.4em 2.4em 0; }
.rock .symbol { width: 2em; height: 2em; stroke-width: 3.4; opacity: 0.7; transition: transform 0.12s, opacity 0.12s; }
.rock:disabled .symbol { opacity: 0.15; }
.rock:focus-visible { outline: 0.2em solid #fff; outline-offset: -0.3em; }
@media (hover: hover) {
  .rock.left:hover:not(:disabled) { background: linear-gradient(90deg, color-mix(in srgb, var(--task) 55%, transparent), transparent 85%); }
  .rock.right:hover:not(:disabled) { background: linear-gradient(270deg, color-mix(in srgb, var(--task) 55%, transparent), transparent 85%); }
  .rock.left:hover:not(:disabled) .symbol { opacity: 1; transform: translateX(-0.15em); }
  .rock.right:hover:not(:disabled) .symbol { opacity: 1; transform: translateX(0.15em); }
}
/* The place of work as a large disc: its sign above, the residents working there as a large number. */
.ring-core.tray-disc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 4.9em; height: 4.9em; pointer-events: none; border-width: 0.2em; }
.ring-core.tray-disc .symbol { width: 1.5em; height: 1.5em; margin-top: -0.1em; }
.ring-core strong { font-size: 2.3em; line-height: 0.95; font-variant-numeric: tabular-nums; text-shadow: 0 0.06em 0 rgb(45 28 16 / 0.45); }
.ring-task.empty .ring-core { background: color-mix(in srgb, var(--task) 50%, var(--paper)); }
.ring-task.empty .ring-core strong { opacity: 0.75; }
.fire-mark:focus-visible { outline: 0.2em solid #fff; outline-offset: 0.15em; }
@keyframes ring-out { from { opacity: 0; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.3); } }

/* The sun shows how far the day has gone; the start page uses it as button. */
.sun-button {
  position: absolute; z-index: 2; right: 1.1em; bottom: 1em; width: 7.4em; height: 7.4em; padding: 0; border: 0; background: none; border-radius: 50%;
  filter: drop-shadow(0 0.3em 0 var(--ink)); transition: transform 0.12s, filter 0.12s;
}
.sun-button svg { width: 100%; height: 100%; overflow: visible; }
.sun-rays { fill: #ffb62e; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; transform-origin: 0 0; animation: sun-turn 40s linear infinite; }
.sun-disc { fill: #ffd94a; stroke: var(--ink); stroke-width: 3; }
.sun-arrow { fill: var(--ink); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.sun-passed { fill: none; stroke: #f2853a; stroke-width: 28; opacity: 0.75; transition: stroke-dasharray 0.25s linear; }
.sun-clock { cursor: default; transition: transform 0.4s, filter 0.4s; }
.sun-clock.still { opacity: 0.6; }
.sun-clock.still .sun-rays { animation: none; }
.sun-button:active:not(:disabled) { transform: translateY(0.3em); filter: none; }
.sun-button:disabled { opacity: 0.6; }
.sun-button:focus-visible, .stone-button:focus-visible, .pebble:focus-visible, .card:focus-visible { outline: 0.2em solid #fff; outline-offset: 0.15em; }
@media (hover: hover) { .sun-button:hover:not(:disabled) .sun-rays { animation-duration: 6s; } .sun-button:hover:not(:disabled) .sun-disc { fill: #ffe57a; } }
@keyframes sun-turn { to { transform: rotate(360deg); } }

/* Building cards */
.drawer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 6.8em; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7em; padding: 0 1em; pointer-events: none; animation: drawer-rise 0.22s ease-out both; }
.drawer > * { pointer-events: auto; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35em; width: 8.6em; padding: 0.6em 0.5em 0.7em; color: var(--ink); font: inherit;
  background: var(--paper); border: 0.2em solid var(--ink); border-radius: 1.3em; box-shadow: 0 0.3em 0 var(--ink); transition: transform 0.1s;
}
.card-picture { width: 6.2em; height: 6.2em; border-radius: 1em; background: linear-gradient(#cfeafb 58%, #8ccb5c 58%); }
.card strong { font-size: 1.05em; line-height: 1.15; text-align: center; }
.card.locked { background: #e9dfcb; }
.card.locked .card-picture { filter: grayscale(1); opacity: 0.55; }
.card.locked strong { opacity: 0.6; }
.card-count, .card-lock { position: absolute; top: -0.6em; right: -0.6em; display: grid; place-items: center; min-width: 1.9em; height: 1.9em; color: #fff; background: var(--task-wood); border: 0.16em solid var(--ink); border-radius: 1em; }
.card-lock { width: 1.9em !important; height: 1.9em !important; padding: 0.3em; background: #8c8178; stroke-width: 2.4 !important; }
@media (hover: hover) { .card:hover:not(:disabled) { transform: translateY(-0.4em) rotate(-1.5deg); background: #ffe9b0; } }
.card:active:not(:disabled) { transform: translateY(0.2em); box-shadow: 0 0.1em 0 var(--ink); }
.camp-costs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.6em; font-weight: 800; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.camp-costs > span { display: inline-flex; align-items: center; gap: 0.15em; }
.camp-costs .symbol { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.camp-costs .minus { color: #b01a22; }
@keyframes drawer-rise { from { opacity: 0; transform: translateY(1.5em); } }

.bubble {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 0.8em)); display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0.6em 0.5em 0.9em;
  background: var(--paper); border: 0.2em solid var(--ink); border-radius: 2em; box-shadow: 0 0.3em 0 var(--ink);
}
.bubble-progress { display: block; width: 7em; height: 0.9em; border: 0.16em solid var(--ink); border-radius: 1em; background: #fff; overflow: hidden; }
.bubble-progress span { display: block; height: 100%; background: var(--task-construction); }

/* ---------- The painted wall of the cave ---------- */
.modal-dialog.wall {
  width: 92vw; height: 90dvh;
  background:
    radial-gradient(ellipse 30% 22% at 18% 24%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(ellipse 34% 28% at 78% 70%, rgb(120 78 40 / 0.2), transparent),
    radial-gradient(ellipse 22% 30% at 62% 18%, rgb(162 70 31 / 0.1), transparent),
    radial-gradient(ellipse 40% 26% at 30% 84%, rgb(120 78 40 / 0.16), transparent),
    #ecd6aa;
}
.modal-dialog.wall .modal-content { background: url("../images/wall-paintings.svg") center / cover no-repeat; }
.modal-dialog.wall .modal-content { padding: 16px; overflow: hidden; }
.cave-wall { height: 100%; }
.cave-wall > svg { display: block; width: 100%; height: 100%; font-family: var(--font-game); }
.wall-link { fill: none; stroke: var(--ochre); stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
.wall-link.open { stroke-dasharray: 1 13; opacity: 0.6; }
.wall-node { outline: none; }
.wall-stain { fill: rgb(162 70 31 / 0.14); }
.wall-glyph { overflow: visible; fill: none; stroke: #8a3513; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.wall-name { font-size: 18px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.wall-days { font-size: 16px; font-weight: 700; text-anchor: middle; fill: #7a4d2a; }
.wall-node:not(.known) { cursor: pointer; }
.wall-node:not(.known) .wall-stain { fill: rgb(255 247 227 / 0.6); stroke: rgb(45 28 16 / 0.45); stroke-width: 3; stroke-dasharray: 7 7; }
.wall-node:not(.known) .wall-glyph { stroke: #6f5a45; }
.wall-node.chosen .wall-stain { fill: var(--paper); stroke: var(--ink); stroke-dasharray: none; }
.wall-node.chosen .wall-glyph { stroke: var(--task-research); }
.wall-ring-track { fill: none; stroke: rgb(45 28 16 / 0.18); stroke-width: 9; }
.wall-ring { fill: none; stroke: var(--task-research); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 0.6s; }
.wall-node.locked { cursor: default; opacity: 0.55; }
.wall-lock { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wall-node:focus-visible .wall-stain { stroke: var(--ink); stroke-width: 5; stroke-dasharray: none; }
@media (hover: hover) {
  .wall-node:not(.known, .locked):hover .wall-stain { fill: #ffe9b0; stroke: var(--ink); stroke-dasharray: none; }
  .wall-node:not(.known, .locked):hover .wall-glyph { stroke: var(--ochre); }
}

/* Narrow screens: smaller marks, the people move below the stock. */
@media (max-width: 759px) {
  .camp-stage { font-size: 11px; }
  .work-ring { font-size: 0.78em; }
  .hud-menu { bottom: 0.8em; left: 0.6em; }
  .sun-button { bottom: 0.8em; right: 0.6em; width: 6em; height: 6em; }
  .drawer { bottom: 7em; }
  .hud-stock { top: 0.6em; left: 0.6em; }
  .hud-people { top: 11.4em; left: 0.6em; transform: none; flex-direction: column; align-items: flex-start; }
  .hud-time { top: 0.6em; right: 0.6em; }
  .modal-dialog.wall { width: 100vw; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .valley *, .sun-rays, .stone-button.nudge, .mark { animation: none !important; }
  .valley-figure { transition: none; }
}