/* Frame of the app: header, main area, buttons and common building blocks. */

* { box-sizing: border-box; }
/* Until Vue has mounted, the raw template stays hidden; !important wins over the display of .app-layout. */
[v-cloak] { display: none !important; }
[hidden] { display: none !important; }
/* Read by screen readers, not shown */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Loading notes appear only when loading takes noticeably long, so a quick answer does not flash them. */
.delayed-status { animation: delayed-appear 0s 300ms both; }
@keyframes delayed-appear { from { visibility: hidden; } }
/* A game, not a website: the app always fills the viewport and the page never scrolls; a screen that does not fit
   scrolls only inside one of its areas (a list, a panel). */
html, body { margin: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: var(--background); color: var(--text); font: var(--font-root)/1.5 var(--font); }
body { background: var(--sky); background-attachment: fixed; }
button, select { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

.app-layout { display: flex; flex-direction: column; height: 100%; }

/* Corner of small switches (fullscreen) at the bottom left of every screen, faint until pointed at. */
.corner-switches { position: fixed; left: 6px; bottom: 6px; z-index: 5; display: flex; gap: 4px; }
.corner-switch.button.icon { width: 28px; height: 28px; padding: 5px; opacity: 0.45; box-shadow: none; }
.corner-switch:hover, .corner-switch:focus-visible { opacity: 1; }

/* Header of a running game: way back on the left, date and the turn in the middle as the main action, pages on the right. */
.site-header {
  flex: none; height: var(--header-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 20px;
  position: relative; z-index: 3; background: var(--header-background); border-bottom: var(--surface-border); backdrop-filter: var(--blur);
}
.header-location { grid-column: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.crumb { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-soft); }
.crumb .symbol { width: 15px; height: 15px; align-self: center; }
@media (hover: hover) { .crumb:hover { text-decoration: underline; } }
.crumb-separator { color: var(--text-faint); }
.header-date { grid-column: 2; display: flex; align-items: center; gap: 16px; }
.header-nav { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
.header-nav .button.icon { position: relative; }
.nav-badge {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  font: 700 var(--text-xs)/20px var(--font-mono); text-align: center; background: var(--accent); color: var(--background);
}
.date { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--text-sm) var(--font-mono); color: var(--text-soft); white-space: nowrap; }
.date .symbol { width: 15px; height: 15px; }
.player-avatar { display: block; flex: none; overflow: hidden; border-radius: var(--radius); outline: var(--surface-border); }

/* Turn as a split button: the main part runs one day, the arrow opens the longer steps below it. */
.turn-button { height: 38px; padding: 0 16px; gap: 8px; font-size: 1.07rem; }

/* Calendar of the Prehistory: suns, moons and notches painted in ochre. */
.tally-calendar { display: inline-flex; align-items: center; color: var(--cave-paint); line-height: 0; }
.tally-calendar svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tally-calendar .sun { stroke-width: 1.8; }
.tally-calendar .moon-outline { stroke-width: 1.4; }
.tally-calendar .moon { fill: currentColor; stroke: none; }
.tally-calendar .place { fill: currentColor; stroke: none; opacity: 0.45; }

/* Dialogs over the game, e.g. the menus of the camp. */
.modal-dialog { padding: 0; width: 80vw; height: 80dvh; max-width: none; max-height: none; overflow: hidden; border: var(--surface-border); border-radius: var(--radius); background: var(--surface-solid); color: var(--surface-text); font: inherit; }
.modal-dialog::backdrop { background: var(--story-backdrop); backdrop-filter: blur(3px); }
.modal-content { position: relative; height: 100%; overflow: auto; padding: 56px 22px 22px; }
.modal-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-main { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.loading { padding: 40px; color: var(--text-soft); }
/* Why time stopped and running warnings, below the header */
.day-status {
  flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 4px 20px; font-size: var(--text-sm);
  background: var(--surface-deep); border-bottom: var(--surface-border);
}
.day-warning { color: var(--minus); }
.day-condition { color: var(--caution); }

.error-bar { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: var(--surface-deep); color: var(--minus); border-bottom: var(--surface-border); }

.surface {
  background: var(--surface); color: var(--surface-text); border: var(--surface-border); border-radius: var(--radius);
  backdrop-filter: var(--blur); box-shadow: var(--shadow);
}

.button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; white-space: nowrap;
  background: var(--button); color: var(--button-text); border: var(--button-border); border-radius: var(--radius-button); font-weight: 600;
  text-decoration: none; backdrop-filter: var(--blur);
}
@media (hover: hover) { .button:hover:not(:disabled) { background: var(--button-hover); border-color: var(--button-hover-border); } }
.button[aria-current="page"], .button[aria-current="page"]:hover { background: var(--button-active); color: var(--button-active-text); }
.button.action { background: var(--action); color: var(--action-text); border-color: var(--action-border); box-shadow: var(--glow); }
.button:disabled { opacity: 0.45; }
.button[aria-pressed="true"] { background: var(--button-active); color: var(--button-active-text); }
.button.icon { width: 32px; height: 32px; padding: 6px; justify-content: center; }
.symbol { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Floating navigation buttons directly above the content (grid of a scene, panel), icons only */
.float-nav { display: flex; gap: 8px; }
.float-nav .button.icon { width: 52px; height: 52px; padding: 12px; background: var(--float-nav); border-color: var(--button-hover-border); box-shadow: var(--shadow); }
@media (hover: hover) { .float-nav .button.icon:hover { background: var(--float-nav-hover); } }
.float-nav .symbol { width: 26px; height: 26px; }

/* Icon before a text */
.icon-text { display: flex; align-items: center; gap: 6px; }
.icon-text .symbol { width: 15px; height: 15px; }

.kicker { font: 700 var(--text-xs) var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--surface-faint); }
.plus { color: var(--plus); }
.minus { color: var(--minus); }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font: 700 var(--text-xs) var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--surface-faint); }
.field-input {
  padding: 9px 12px; font: inherit; font-size: 1.07rem; color: var(--surface-text); background: var(--surface);
  border: var(--button-border); border-radius: var(--radius-button);
}
.field-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* One field with its buttons in a line (common/view/name-form) */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inline-form label { width: 100%; font-size: var(--text-sm); color: var(--surface-soft); }
.inline-form input { flex: 1 1 140px; min-width: 0; }

/* Start page; the computer view (development) reuses the centred panel. */
.start-page { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.start-panel { width: min(420px, 100%); margin-block: auto; flex-shrink: 0; padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.start-panel-wide { width: min(900px, 100%); }
.start-head { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.start-body { display: flex; flex-direction: column; gap: 14px; }
.start-body h2 { font-size: 1.29rem; }
.start-body p { color: var(--surface-soft); }
.start-note { font: 500 var(--text-xs) var(--font-mono); color: var(--surface-soft); }
.start-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Saved games and a new game use the whole main area: on a desktop nothing scrolls but the list of saved games. */
.start-screen { align-items: stretch; padding: 12px; }
.start-screen > .start-panel { width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; display: grid; gap: 20px 40px; padding: 28px 32px; }
.start-button { justify-content: center; padding: 14px 40px; font-size: 1.14rem; font-weight: 600; }

.start-saves { grid-template-rows: auto minmax(0, 1fr); justify-items: start; }
.start-save-area { justify-self: stretch; min-height: 0; overflow: auto; }
.save-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 12px; }
.save-entry { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: var(--surface-border); border-radius: var(--radius); background: var(--surface-deep); }
.save-open { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.save-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.save-text strong { font-size: 1.14rem; }
.save-status { font: 600 var(--text-xs) var(--font-mono); text-transform: uppercase; }
.save-status.won { color: var(--plus); }
.save-status.lost { color: var(--minus); }
.save-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.save-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

/* New game, step 1: the types as a list over the full height, the story of the chosen one beside it.
   Step 2: a large portrait with its button beside name and type. The actions stay at the bottom. */
.start-new { grid-template-rows: minmax(0, 1fr) auto; }
.start-type { grid-template: "question question" auto "list story" minmax(0, 1fr) "actions actions" auto / minmax(16rem, 24rem) minmax(0, 1fr); }
.start-question { grid-area: question; margin: 0; }
.start-person { grid-template: "portrait identity" minmax(0, 1fr) "actions actions" auto / minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.start-new .start-actions { grid-area: actions; }
.start-new .start-actions .button { padding: 10px 24px; }
.portrait-large { width: clamp(160px, 42vh, 380px); height: clamp(160px, 42vh, 380px); }

/* Type list: native radios keep the arrow keys; the tile shows selection and focus. */
.alignment-list { grid-area: list; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 10px; min-height: 0; min-width: 0; border: 0; padding: 0; margin: 0; }
.alignment-tile {
  display: flex; align-items: center; gap: 16px; min-height: 0; padding: 6px 16px; overflow: hidden;
  border: var(--button-border); border-radius: var(--radius-button); background: var(--surface-deep); cursor: pointer;
}
.alignment-tile .player-avatar { width: auto; height: min(64px, 100%); aspect-ratio: 1; }
@media (hover: hover) { .alignment-tile:hover { border-color: var(--button-hover-border); } }
.alignment-tile.selected { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.alignment-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.alignment-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alignment-tile-text strong { font-size: 1.14rem; }
.alignment-tile.selected strong { color: var(--accent); }
.alignment-tile-text small { font: 500 var(--text-xs) var(--font-mono); color: var(--surface-soft); text-transform: uppercase; }

.alignment-story {
  grid-area: story; display: flex; align-items: center; gap: 40px; min-height: 0; overflow: auto; padding: 32px 40px;
  border: var(--surface-border); border-radius: var(--radius); background: var(--surface-deep);
}
.alignment-story-text { display: flex; flex-direction: column; gap: 18px; max-width: 46rem; }
.alignment-story h2 { font-size: 1.86rem; }
.alignment-narrative { font-size: 1.14rem; line-height: 1.6; }
.alignment-effects { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-weight: 600; }

.person-portrait { grid-area: portrait; display: flex; flex-direction: column; align-items: center; gap: 16px; justify-self: end; }
.person-portrait .portrait-large { width: clamp(200px, 55vh, 560px); height: clamp(200px, 55vh, 560px); }
.person-identity { grid-area: identity; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: min(100%, 32rem); }
.person-identity .field-input { width: 100%; padding: 12px 16px; font-size: 1.43rem; }
.person-type {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; font: inherit; color: inherit; cursor: pointer;
  border: var(--button-border); border-radius: var(--radius-button); background: var(--surface-deep);
}
@media (hover: hover) { .person-type:hover { border-color: var(--button-hover-border); } }

/* Narrow screens stack everything and scroll the page. */
@media (max-width: 900px) {
  .start-screen > .start-panel { min-height: auto; margin-block: auto; padding: 20px; }
  .start-type { grid-template: "question" "list" "story" "actions" / minmax(0, 1fr); }
  .start-person { grid-template: "portrait" "identity" "actions" / minmax(0, 1fr); }
  .alignment-list { grid-auto-rows: auto; }
  .alignment-story { flex-direction: column; align-items: flex-start; padding: 20px; }
  .person-portrait { justify-self: center; }
  .person-identity { justify-self: center; }
}

/* Pages of text and figures (statistics, help, result, development) scroll inside the main area while they do not fit. */
.result-page { height: 100%; padding: 24px 16px; overflow: auto; }
.result-panel { width: min(900px, 100%); margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.result-panel h1 { font-size: 2.29rem; font-weight: 300; }

/* Key figures */
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.figure { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface-deep); border-radius: calc(var(--radius) * 0.66); min-width: 0; }
.figure-name { font: 700 var(--text-xs)/1.4 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--surface-faint); }
.figure-value { font: 600 1.29rem/1.35 var(--font-mono); }
.figure-note { font-size: var(--text-sm); color: var(--surface-soft); overflow-wrap: anywhere; }

/* Lists of bodies (common/view/body-list) */
.body-list { display: flex; flex-direction: column; gap: 2px; }
.body-list-entry {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: calc(var(--radius) / 2);
  color: var(--surface-text); text-decoration: none;
}
@media (hover: hover) { a.body-list-entry:hover { background: var(--surface-deep); } }
.body-list-entry.disabled { opacity: 0.6; }
.body-list-entry > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.body-list-entry strong { font-size: var(--text-sm); }
.body-list-entry small { font-size: var(--text-xs); color: var(--surface-soft); }
.colony-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; padding: 1px 7px; font: 700 var(--text-xs) var(--font); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--colony); border-radius: 10px; color: var(--colony);
}
.colony-tag .symbol { width: 12px; height: 12px; }

/* Line charts of a history (common/view/line-chart) */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.line-chart { min-width: 0; margin: 0; padding: 12px 14px; background: var(--surface-deep); border-radius: calc(var(--radius) * 0.66); }
.line-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--text-xs); color: var(--surface-soft); }
.chart-legend li, .chart-tooltip > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-mark { width: 12px; height: 0; border-top: 2px solid var(--series); }
.legend-mark.dashed { border-top-style: dashed; }
.line-chart-area { position: relative; }
.line-chart svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--divider-soft); }
.chart-grid.base { stroke: var(--divider); }
.chart-label { font: 500 var(--text-xs) var(--font-mono); fill: var(--surface-faint); dominant-baseline: middle; }
.chart-line { fill: none; stroke: var(--series); stroke-width: 1.8; stroke-linejoin: round; }
.chart-line.dashed { stroke-dasharray: 5 4; }
.chart-crosshair { stroke: var(--surface-faint); stroke-dasharray: 2 3; }
.chart-hit { fill: transparent; }
.chart-tooltip {
  position: absolute; top: 4px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  font-size: var(--text-sm); white-space: nowrap; pointer-events: none;
}
.chart-tooltip.right { transform: translateX(12px); }
.chart-tooltip.left { transform: translateX(calc(-100% - 12px)); }
.chart-tooltip b { font: 600 var(--text-sm) var(--font-mono); margin-left: auto; padding-left: 10px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font: 700 var(--text-xs) var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--surface-faint); padding: 6px 10px; border-bottom: 1px solid var(--divider); }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--divider-soft); }
.table .number { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.empty { color: var(--surface-soft); }

/* Small body pictures */
.disc { display: block; overflow: visible; flex: none; }
.planet-disc { fill: var(--planet-fill); stroke: var(--planet-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.planet-disc.gasGiant { fill: var(--giant-fill); stroke-dasharray: 4 3; }
.star-disc { fill: var(--star-fill); stroke: var(--star-stroke); stroke-width: 2; vector-effect: non-scaling-stroke; filter: var(--star-glow); }
.planet-disc { filter: var(--planet-glow); }

@media (max-width: 759px) {
  /* Phones: the way back gets a row of its own (only parent and current place), the pages follow the turn or wrap below it. */
  .site-header { height: auto; min-height: var(--header-height); padding: 8px 12px; gap: 8px 12px; display: flex; flex-wrap: wrap; }
  .header-location { flex-basis: 100%; }
  .header-location > :not(:nth-last-child(-n + 3)) { display: none; }
  .header-date { gap: 10px; }
  .header-nav { margin-left: auto; }
}