/* @file Fixed-viewport solo board: camera, subtitles, docked screens and internally scrolling panels. Shared base tokens retain the Tantale palette. */
:root {
  color-scheme: dark;
}
body {
  color: #d4d0c7;
  font-size: 14px;
  line-height: 1.65;
}
[hidden] {
  display: none !important;
}
button {
  text-transform: none;
  letter-spacing: 0;
  min-height: 44px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
button:disabled {
  opacity: 0.55;
}
.masthead {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  color: var(--amber);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.12em;
  text-decoration: none;
  line-height: 1;
}
.brand span {
  display: block;
  font-size: 8px;
  letter-spacing: 0.4em;
  margin-top: 8px;
}
.edition,
.eyebrow,
.reading-heading,
summary,
h2 {
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 400;
}
.edition {
  color: #aaa28f;
}
#connection {
  margin-left: auto;
  color: var(--cyan);
  font-size: 11px;
}
main {
  padding: 32px 32px 100px;
  max-width: 1800px;
  margin: auto;
}
h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.12;
  color: #eee7d7;
}
h2,
.eyebrow {
  color: var(--amber2);
  text-transform: uppercase;
}
p {
  margin: 0 0 20px;
}
.home {
  max-width: 1100px;
  margin: 8vh auto;
}
.intro {
  color: #a6a298;
  line-height: 1.9;
  margin: 30px 0 48px;
}
.slots-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
}
.slots-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: #a6a298;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.slot {
  border: 1px solid var(--line);
  padding: 24px;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
}
.slot h2 {
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: #e4ded0;
}
.slot.empty h2 {
  color: #8a8478;
}
.slot > p:not(.eyebrow) {
  color: #aaa28f;
  font-size: 12px;
  flex: 1;
}
.slot button {
  width: 100%;
  margin-top: 10px;
}
.boarding {
  max-width: 760px;
  margin: 24px auto 48px;
}
#sound-help {
  font-size: 12px;
  margin-top: 16px;
  color: var(--cyan);
}
.game {
  display: grid;
  gap: 48px;
  align-items: start;
}
.ship-column {
  min-width: 0;
}
summary {
  padding: 12px 0;
  color: var(--cyan);
  cursor: pointer;
}
summary span {
  float: right;
  color: #898e91;
  font-size: 9px;
}
.tv-shell {
  aspect-ratio: 16 / 9;
  border: 1px solid #28343a;
  background: #080a0c;
}
iframe {
  border: 0;
  display: block;
  background: #050505;
}
#tv {
  width: 100%;
  height: 100%;
}
.status {
  margin-top: 20px;
  border-bottom: 1px solid var(--line);
}
.location,
.orbit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}
.location strong {
  color: #eee7d7;
}
.location span {
  font-size: 11px;
  color: var(--cyan);
}
.orbit {
  color: var(--amber);
  font-size: 12px;
}
dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 24px 0 12px;
  gap: 8px;
}
dt {
  font-size: 10px;
  color: #a6a298;
}
dd {
  margin: 3px 0;
  color: #eee7d7;
  font-size: 17px;
}
.frozen {
  font-size: 10px;
  color: #898e91;
}
.crew {
  margin-top: 24px;
}
.companion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px solid #1b1c1d;
  font-size: 12px;
}
.companion small {
  color: var(--cyan);
}
.companion span {
  grid-column: 1 / -1;
  color: #9b9993;
}
.reading {
  max-width: 68ch;
  min-width: 0;
  width: 100%;
  margin: auto;
}
.reading-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  color: #a6a298;
}
#skip {
  font-size: 10px;
  border-color: #3d4144;
  color: #b6bcc0;
}
.entry {
  margin: 24px 0;
  overflow-wrap: anywhere;
}
.entry p {
  white-space: pre-wrap;
  margin: 0;
}
.entry header {
  font-size: 10px;
  color: var(--amber2);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.narration,
.read,
.epilogue > p:not(.eyebrow) {
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.8;
}
.read {
  border: 1px solid var(--line);
  background: var(--bg2);
  padding: 24px;
}
.read header {
  font-family: var(--mono);
}
.speech {
  border-left: 2px solid #687987;
  padding-left: 20px;
  color: #d7e2e7;
}
.ship {
  color: var(--cyan);
  padding: 16px;
  border: 1px solid #24404d;
  background: #091014;
}
.ship header,
.message header {
  color: var(--cyan);
}
.message {
  padding: 16px;
  background: #11171a;
}
.system {
  color: var(--amber);
  font-size: 12px;
}
.notice {
  color: #a8aaa9;
  font-size: 12px;
  padding: 12px 0;
}
.time-marker {
  margin: 32px 0 20px;
  color: #9b9993;
  font-size: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.roll {
  padding: 16px 20px;
  border: 1px solid #373533;
}
.dice {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
}
.dice strong {
  font-size: 36px;
  font-weight: 400;
  color: var(--cyan);
}
.failure .dice strong,
.risk {
  color: #ff7770;
}
.roll p {
  font-size: 12px;
  margin-top: 12px;
}
#progress {
  font-size: 11px;
  color: var(--cyan);
}
.choice-group {
  margin: 28px 0;
}
.choice {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 16px;
  border: 1px solid #35312a;
  background: #0d0d0b;
  margin: 8px 0;
  padding: 16px;
  color: #dad6cb;
}
.choice strong {
  font-weight: 400;
  color: var(--text);
}
.choice span span,
.choice small {
  display: block;
  font-size: 11px;
  margin-top: 6px;
}
.choice small {
  color: #aaa28f;
}
.choice-number {
  color: var(--cyan);
  font-size: 11px;
  padding-top: 2px;
}
.unavailable {
  color: #bbb;
}
/* --- The cards: ten archetypes dealt face up, a playing card each (63 × 88, like the kit's choice cards) --- */
.cast {
  max-width: 1100px;
  margin: 24px auto 0;
}
.cast-head {
  max-width: 640px;
  margin-bottom: 28px;
}
.cast-head h1 {
  margin: 8px 0 16px;
}
.cast-head p:not(.eyebrow) {
  color: #a6a298;
  line-height: 1.7;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.cast-card {
  --edge: rgba(255, 176, 0, 0.35);
  position: relative;
  aspect-ratio: 63 / 88;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 14px 18px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  border: 1px solid var(--amber2);
  border-radius: 10px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 176, 0, 0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #17120a, #0a0806);
  box-shadow:
    inset 0 0 0 5px #0b0906,
    inset 0 0 0 6px var(--edge),
    0 12px 28px rgba(0, 0, 0, 0.65);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  animation: deal 0.42s ease-out both;
  animation-delay: calc(var(--deal) * 45ms);
  overflow: hidden;
}
.cast-card:hover:not(:disabled) {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 176, 0, 0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1b150b, #0a0806);
  transform: translateY(-3px);
}
.cast-card[aria-pressed='true'] {
  --edge: var(--amber);
  border-color: var(--amber);
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 5px #0b0906,
    inset 0 0 0 6px var(--edge),
    0 0 0 2px var(--amber),
    0 0 32px rgba(255, 176, 0, 0.35),
    0 16px 32px rgba(0, 0, 0, 0.7);
}
.cast-grid.has-pick .cast-card:not([aria-pressed='true']) {
  opacity: 0.5;
}
.cast-card:disabled {
  cursor: default;
}
/* The card's index, top left and upside down bottom right, like a playing card. */
.cast-index,
.cast-card::after {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--amber2);
}
.cast-card::after {
  content: attr(data-index);
  position: absolute;
  right: 14px;
  bottom: 12px;
  transform: rotate(180deg);
}
.cast-card strong {
  margin-top: 18%;
  font-family: Georgia, serif;
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--amber);
  text-align: center;
}
.cast-rule {
  display: block;
  height: 1px;
  margin: 12px 18%;
  background: linear-gradient(90deg, transparent, var(--amber2), transparent);
}
.cast-traits {
  flex: 1;
  color: #d8cfbc;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.cast-card small {
  color: #8f938f;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.cast-card em {
  margin: 4px 0 10px;
  font-style: normal;
  color: var(--cyan);
  font-size: 12px;
  line-height: 1.4;
}
@keyframes deal {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cast-card {
    animation: none;
    transition: none;
  }
}
/* The picked card's confirmation, held at the bottom of the screen. */
.cast-confirm {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 28px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg) 40%);
}
.cast-confirm[hidden] {
  display: none;
}
.cast-confirm p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 20px;
  color: #eee7d7;
}
.cast-confirm button {
  background: var(--amber);
  color: #000;
  border-color: var(--amber);
  font-weight: 600;
  padding: 0.8em 1.2em;
}
.epilogue {
  padding: 24px 0;
}
.tools {
  position: fixed;
  right: 24px;
  bottom: 20px;
  display: flex;
  background: #090c0e;
  border: 1px solid #39434a;
  z-index: 5;
}
.tools button {
  border: none;
  color: var(--cyan);
  padding: 12px 20px;
}
dialog {
  color: #d4d0c7;
  background: #0b0d0e;
  border: 1px solid #39434a;
  padding: 20px;
  max-height: calc(100dvh - 24px);
}
dialog::backdrop {
  background: #000a;
}
.close {
  display: block;
  margin: 0 0 16px auto;
  border-color: #39434a;
  color: var(--cyan);
}
.phone-panel {
  margin: auto 20px auto auto;
  border-radius: 24px;
  max-width: calc(100vw - 24px);
}
.phone-shell {
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#phone {
  width: 390px;
  height: 800px;
  transform-origin: top left;
}
.journal-panel {
  width: min(760px, calc(100vw - 24px));
  padding: 24px;
}
#error {
  margin: 16px 32px;
  border: 1px solid #87413a;
  padding: 16px;
  color: #ffb3a9;
}
@media (min-width: 1100px) {
  .game {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .ship-column {
    position: sticky;
    top: 16px;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .cast-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ship-column {
    max-width: 820px;
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 699px) {
  .masthead {
    margin: 0 16px;
    padding: 18px 0;
    gap: 16px;
    flex-wrap: wrap;
  }
  main {
    padding: 16px 16px 100px;
  }
  .game {
    gap: 24px;
  }
  .home {
    margin: 32px auto;
  }
  .slot-grid {
    grid-template-columns: 1fr;
  }
  .slot {
    padding: 16px;
  }
  .slot h2 {
    margin: 4px 0 8px;
  }
  .cast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cast-card {
    padding: 12px 11px 14px;
    border-radius: 8px;
  }
  .cast-card strong {
    margin-top: 14%;
    font-size: 19px;
  }
  .cast-rule {
    margin: 9px 14%;
  }
  .cast-traits,
  .cast-card em {
    font-size: 11px;
  }
  .cast-card small {
    font-size: 9px;
  }
  .tools {
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tools button {
    flex: 1;
    padding: 14px 8px;
    font-size: 12px;
  }
  .phone-panel {
    margin: auto;
  }
  .read {
    padding: 16px;
  }
  .narration,
  .read,
  .epilogue > p:not(.eyebrow) {
    font-size: 18px;
  }
  summary span {
    display: none;
  }
  #error {
    margin: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.screen-retry {
  border: 0;
  padding: 4px 0;
  font-size: 10px;
  color: #929b9e;
}

/* --- Compact travel and real-time cinema --- */
.move-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.move-choice {
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
}
.move-choice small {
  margin: 0;
}
.move-choice .unavailable {
  font-size: 10px;
}
.wait-group .choice {
  border-color: transparent;
  background: transparent;
  padding: 8px;
  font-size: 12px;
}
.cinematic-caption,
.cinematic-hint {
  display: none;
}
.cinematic main {
  max-width: none;
  padding: 8px 16px 90px;
}
.cinematic .masthead {
  padding: 12px 0;
}
.cinematic .game {
  display: block;
}
.cinematic .ship-column {
  position: static;
  max-width: none;
}
.cinematic .tv-shell {
  height: calc(100dvh - 220px);
  min-height: 240px;
  aspect-ratio: auto;
}
.cinematic #scene > summary,
.cinematic #status,
.cinematic .crew,
.cinematic .reading {
  display: none;
}
.cinematic .cinematic-caption {
  display: block;
  text-align: center;
  color: #898e91;
  font-size: 12px;
  margin: 12px 0;
}
.cinematic .cinematic-hint {
  display: block;
  text-align: center;
  color: #5f6366;
  font-size: 11px;
  margin: 0;
}
#player-name {
  display: block;
  width: 100%;
  margin: 12px 0;
}
#new-game p {
  font-size: 12px;
  color: #aaa28f;
}

.cinematic .reading:has(#retry-turn) {
  display: block;
}

/* --- Decisions remain reachable on small screens --- */
#choices {
  scroll-margin-top: 20px;
  padding-bottom: 24px;
}
#choices:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 8px;
}
#show-choices {
  color: var(--amber);
}
.move-choice .route-detail,
.move-choice .risk {
  font-size: 11px;
  line-height: 1.5;
}
.phone-panel {
  width: min(432px, calc(100vw - 24px));
  overflow-x: hidden;
}
@media (max-width: 699px) {
  .tools button {
    min-width: 0;
    padding-inline: 6px;
    font-size: 11px;
  }
  .frozen {
    font-size: 11px;
  }
}

/* Frozen game durations, refreshed only with the server's turn. */
.ongoing {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}
.ongoing li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.ongoing strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ongoing .urgent {
  color: #ff817a;
}

/* The story and decisions scroll together without moving the ship screen. */
@media (min-width: 1100px) {
  .reading {
    max-height: calc(100dvh - 200px);
    margin: 0 auto;
    position: sticky;
    top: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline: 12px;
    overflow-anchor: none;
  }
}
#choices {
  display: flex;
  flex-direction: column;
}
#follow-story {
  color: var(--cyan);
}

/* --- Fixed viewport board: only the designated panels scroll --- */
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
.masthead {
  flex: 0 0 54px;
  padding: 8px 0;
  margin: 0 20px;
}
.brand {
  font-size: 24px;
}
main,
.cinematic main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 12px 20px;
  overflow: hidden;
}
.home,
.boarding {
  height: 100%;
  overflow: auto;
  margin: 0 auto;
  padding: 16px 0;
}
.home h1 {
  margin: 12px 0;
}
.intro {
  margin: 16px 0 24px;
}
.game,
.cinematic .game {
  height: 100%;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  grid-template-rows: 76px minmax(0, 1fr) 210px;
  gap: 12px;
  padding-bottom: 48px;
  align-items: stretch;
}
.status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  overflow: auto;
}
.status .location,
.status .orbit {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  white-space: nowrap;
}
.status dl {
  display: flex;
  gap: 24px;
  margin: 0;
}
.status dd {
  font-size: 17px;
}
.status .frozen {
  display: none;
}
.status .ongoing {
  width: auto;
  min-width: 140px;
}
.scene-column {
  grid-column: 2;
  grid-row: 2 / 4;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#exploration {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 100%;
}
#camera.cam {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}
#camera .hud.bottom {
  display: none;
}
.subtitles {
  position: absolute;
  bottom: 8px;
  left: 56px;
  right: 56px;
  z-index: 4;
  text-align: center;
  pointer-events: none;
}
#story {
  font-size: 22px;
  line-height: 1.35;
  background: #050505df;
  text-shadow: 0 1px 3px #000;
  pointer-events: auto;
  cursor: pointer;
}
#story .entry,
#story .time-marker {
  margin: 0;
  padding: 8px 16px;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
}
#story .entry p {
  font-size: inherit;
  line-height: inherit;
}
#story .entry header {
  margin: 0 0 4px;
}
#story .dice {
  justify-content: center;
}
#skip {
  pointer-events: auto;
  min-height: 28px;
  padding: 3px 8px;
  background: #050505df;
}
.crew {
  margin: 10px 0 0;
  overflow: auto;
  max-height: 100px;
  flex-shrink: 0;
}
.crew h2 {
  margin: 0;
}
#companions {
  display: flex;
  gap: 20px;
}
.companion {
  min-width: 150px;
  padding: 4px 0;
  font-size: 11px;
}
.ship-column,
.cinematic .ship-column {
  position: static;
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}
.tv-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.reading {
  grid-column: 1;
  grid-row: 2;
  overflow: auto;
  position: static;
  max-height: none;
  max-width: none;
  padding: 0 8px 0 0;
  margin: 0;
}
.choice-group {
  margin: 12px 0;
}
.choice {
  padding: 10px;
  gap: 8px;
}
#choices {
  padding: 0;
}
.tools {
  left: 20px;
  right: 20px;
  bottom: env(safe-area-inset-bottom, 0px);
  height: 46px;
  justify-content: center;
}
.tools button {
  padding: 6px 16px;
}
#follow-story {
  display: none;
}
.phone-panel:not(:modal) {
  position: fixed;
  inset: 152px 20px 66px auto;
  height: auto;
  width: 280px;
  margin: 0;
  padding: 8px;
  border-radius: 0;
}
.phone-panel:not(:modal) .close {
  display: none;
}
.phone-shell {
  margin: auto;
}
.phone-panel:modal,
.journal-panel {
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  padding: calc(12px + env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom));
  overflow: auto;
}
.journal-panel #journal {
  max-width: 760px;
  margin: auto;
}
#error {
  position: fixed;
  z-index: 40;
  top: 50px;
  left: 10px;
  right: 10px;
  background: #190b08;
}
.cast {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.cast-head {
  max-width: none;
  margin: 0;
  flex-shrink: 0;
}
.cast-head h1 {
  font-size: 32px;
  margin: 6px 0;
}
.cast-head p {
  margin-bottom: 12px;
}
.cast-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 4px;
}
.cast-confirm {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 0;
  min-height: 72px;
}
.cast-confirm[hidden] {
  display: flex !important;
  visibility: hidden;
}
.scene-tools {
  position: absolute;
  top: 28px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.scene-tools button {
  font-size: 10px;
  min-height: 32px;
  padding: 4px 8px;
  background: #050505bb;
}
.direction {
  position: absolute;
  z-index: 5;
  padding: 5px 12px;
  font-size: 24px;
  background: #050505ad;
  border-color: #ffb00055;
}
.direction.left {
  left: 4px;
  top: 40%;
}
.direction.right {
  right: 4px;
  top: 40%;
}
.direction.bottom {
  bottom: 4px;
  left: 4px;
}
.direction.grate {
  top: 25%;
  left: 4px;
}
.direction.down {
  bottom: 4px;
  right: 4px;
}
.direction.up {
  top: 4px;
  left: 44%;
}
.direction.outside {
  top: 25%;
  right: 4px;
}
.direction span {
  display: none;
  position: absolute;
  background: #050505ed;
  padding: 8px;
  width: 180px;
  font-size: 12px;
  left: 0;
  top: 100%;
}
.direction.right span,
.direction.down span,
.direction.outside span {
  left: auto;
  right: 0;
}
.direction.bottom span,
.direction.down span {
  top: auto;
  bottom: 100%;
}
.direction:hover span,
.direction:focus-visible span,
.direction.armed span {
  display: block;
}
.hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* A spot is only its dot (::after, below): the zone it answers to is never drawn, nor flashed by a touch. */
.hotspot {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: 0;
  outline: none;
  min-height: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hotspot span {
  position: absolute;
  left: 50%;
  top: calc(50% + 12px);
  transform: translateX(-50%);
  padding: 2px 6px;
  white-space: nowrap;
  opacity: 0;
  background: #050505ed;
  font-size: 11px;
  pointer-events: none;
}
.hotspot:hover,
.hotspot:active {
  background: transparent; /* not the buttons' tint (base.css): it would draw the zone */
}
.hotspot:focus-visible {
  outline: none; /* the dot lights up and the label shows instead */
}
.hotspot:hover span,
.hotspot:focus-visible span,
.observing .hotspot span {
  opacity: 1;
}
.cinematic #scene,
.video-playing #scene,
.tv-open #scene {
  position: fixed;
  inset: 0 0 48px;
  z-index: 10;
  background: #050505;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cinematic .tv-shell,
.video-playing .tv-shell,
.tv-open .tv-shell {
  height: auto;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}
.cinematic .cinematic-caption {
  position: absolute;
  bottom: 42px;
  width: 100%;
  font:
    20px Georgia,
    serif;
  color: #eee;
  background: #050505bb;
}
.cinematic .cinematic-hint {
  position: absolute;
  bottom: 18px;
  width: 100%;
}
.cinematic .screen-retry,
.video-playing .screen-retry,
.tv-open .screen-retry {
  position: absolute;
  top: 8px;
  left: 12px;
}
.video-playing .subtitles {
  position: fixed;
  bottom: 60px;
  left: 15%;
  right: 15%;
  z-index: 12;
}
.ended .reading {
  position: fixed;
  inset: 54px 0 48px;
  z-index: 8;
  padding: 24px max(24px, calc((100vw - 760px) / 2));
  background: #050505;
}
.ended .phone-panel:not(:modal) {
  display: none;
}
@media (max-height: 1000px), (max-width: 1099px) {
  .cast-grid {
    display: flex;
    gap: 18px;
    scroll-snap-type: x mandatory;
    align-items: center;
  }
  .cast-card {
    flex: 0 0 auto;
    width: min(280px, calc((100dvh - 310px) * 0.716));
    scroll-snap-align: center;
  }
}
@media (min-width: 1100px) and (min-height: 1001px) {
  .cast-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: center;
  }
}
@media (max-width: 1099px) {
  .masthead {
    flex-basis: 44px;
    margin: 0 12px;
    padding: 4px 0;
  }
  main {
    padding: 8px 12px;
  }
  .game {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 48px;
  }
  .status {
    flex: 0 0 auto;
    max-height: 70px;
    padding: 4px 8px;
    gap: 14px;
    font-size: 11px;
  }
  .status .location span,
  .status .orbit span,
  .status .ongoing {
    display: none;
  }
  .status dl {
    gap: 12px;
  }
  .status dt {
    font-size: 9px;
  }
  .status dd {
    font-size: 12px;
  }
  .status dl > div:last-child {
    display: none;
  }
  .scene-column {
    flex: 0 0 auto;
    width: min(100%, 660px);
    align-self: center;
  }
  #exploration {
    aspect-ratio: 3 / 2;
  }
  .crew {
    display: none;
  }
  .ship-column {
    position: fixed;
    left: -500px;
    width: 320px;
    top: 0;
  }
  .reading {
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--line);
    padding: 0 4px;
  }
  #story {
    font-size: 18px;
  }
  .subtitles {
    left: 46px;
    right: 46px;
    bottom: 6px;
  }
  #story .entry,
  #story .time-marker {
    padding: 6px 8px;
  }
  .tools {
    left: 0;
    right: 0;
  }
  .tools button {
    padding: 4px 8px;
    font-size: 10px;
  }
  .cast-head p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.45;
  }
  .cast-card {
    width: min(76vw, calc((100dvh - 300px) * 0.716));
  }
  .cast-confirm p {
    font-size: 17px;
  }
  .cast-confirm button {
    font-size: 12px;
  }
  .slot-grid {
    grid-template-columns: 1fr;
  }
  .slot {
    padding: 12px;
  }
  .home h1 {
    font-size: 36px;
  }
  .intro {
    font-size: 12px;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .game {
    display: flex;
  }
  .scene-column {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #camera canvas {
    opacity: 0.12;
  }
}
#camera canvas {
  pointer-events: none;
}
@media (min-width: 1100px) {
  #exploration {
    width: min(100%, calc((100dvh - 290px) * 1.5));
    align-self: center;
    flex-shrink: 0;
  }
}
@media (max-width: 699px) {
  .masthead {
    flex-wrap: nowrap;
  }
  #connection {
    max-width: 120px;
    font-size: 9px;
  }
  .cast-card {
    width: min(76vw, calc((100dvh - 360px) * 0.716));
  }
  .choices-folded:not(.ended) .reading {
    visibility: hidden;
  }
}
.cinematic #scene,
.video-playing #scene,
.tv-open #scene {
  width: auto;
  max-width: none;
}
.cinematic .tv-shell,
.video-playing .tv-shell,
.tv-open .tv-shell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  #camera canvas {
    visibility: hidden;
  }
  #camera .cam-scene {
    opacity: 1 !important;
  }
}

/* --- The eyes: the place's eye-level views (exploration.js, views.js), over the camera --- */
#eyes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  z-index: 2;
  --x: 50%;
  --y: 50%;
}
#eyes[hidden] {
  display: none;
}
#eyes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
#eyes .spots {
  position: absolute;
  inset: 0;
}
#eyes .torch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Emergency light: the room in red. */
#eyes.light-emergency img {
  filter: saturate(0.6) brightness(0.75);
}
#eyes.light-emergency .torch {
  background: rgba(150, 0, 0, 0.32);
  mix-blend-mode: multiply;
}
/* The dark: only what the hand lights. */
#eyes.light-dark img {
  filter: brightness(0.55) saturate(0.5);
}
#eyes.light-dark .torch {
  background: radial-gradient(
    circle at var(--x) var(--y),
    transparent 0,
    transparent 70px,
    rgba(0, 0, 0, 0.93) 190px
  );
}
#eyes .eyes-label {
  position: absolute;
  left: 10px;
  top: 8px;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--amber2);
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
#camera.behind {
  visibility: hidden;
}
.direction.ahead {
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}
.direction.ahead span {
  left: 50%;
  transform: translateX(-50%);
}
/* A spot's menu, when it carries several choices or on a touch screen. */
.spot-menu {
  position: absolute;
  z-index: 8;
  min-width: 200px;
  max-width: min(320px, 90%);
  padding: 8px;
  background: #070605f2;
  border: 1px solid var(--amber2);
  box-shadow: 0 10px 30px #000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spot-menu p {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--amber2);
  text-transform: uppercase;
}
.spot-menu button {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}
.spot-menu b {
  font-weight: 400;
  color: var(--text);
}
.spot-menu small {
  color: #a69d8a;
  font-size: 11px;
}
/* Once the turn is told, the last subtitle steps back: still readable, but the picture under it can be clicked,
   and it fades away while the player observes the scene or points into it. */
body:not(.telling) #story {
  pointer-events: none;
  cursor: default;
}
body:not(.telling) .subtitles {
  opacity: 0.8;
  transition: opacity 0.3s;
}
#exploration.observing .subtitles {
  opacity: 0.12;
}
/* With a mouse only: on a touch screen, a touch would leave the line faded. */
@media (hover: hover) {
  body:not(.telling) #exploration:hover .subtitles {
    opacity: 0.12;
  }
}
@media (max-width: 699px) {
  /* Below the scene's tools on a narrow screen. */
  .direction.ahead {
    top: 26%;
  }
}

/* ==========================================================================================================
   Immersive: the game takes the whole screen (landscape). The place fills it; the ship's status, the crew,
   the tools and the subtitles float over it; the decisions, the phone, the ship's screen and the journal open
   over it and close again. These rules come last and win over the board's above.
   ========================================================================================================== */
body.playing main {
  padding: 0;
  max-width: none;
}
body.playing .masthead {
  display: none;
}
body.playing #game {
  position: fixed;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  max-width: none;
  background: #000;
  overflow: hidden;
}
#game .scene-column {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#game #exploration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
#game #camera,
#game #camera.cam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}
#game .crew {
  display: none;
}
/* --- The picture: covering, never cropped too far, the rest filled by itself blurred (exploration.js) --- */
#game #eyes .stage {
  position: absolute;
  left: 0;
  top: 50%;
  transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
  will-change: transform;
}
#game #eyes.dragging .stage {
  transition: none;
}
#game #eyes {
  touch-action: none; /* a drag turns: the page itself never scrolls */
  cursor: grab;
}
#game #eyes.dragging {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  #game #eyes .stage {
    transition: none;
  }
}
#game #eyes .view {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
}
#game #eyes.light-emergency .view {
  filter: saturate(0.6) brightness(0.75);
}
#game #eyes.light-dark .view {
  filter: brightness(0.55) saturate(0.5);
}
#game #eyes .eyes-label {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  opacity: 0.7;
}
/* --- The ship's status: one thin line at the top, like the landing page's HUD --- */
#game #status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: calc(8px + env(safe-area-inset-top)) 16px 26px calc(16px + env(safe-area-inset-left));
  border: 0;
  background: linear-gradient(180deg, #000000d0, #00000000);
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
}
#game #status .location strong,
#game #status .orbit strong {
  color: var(--amber);
  font-size: 12px;
}
#game #status .location span,
#game #status .orbit span,
#game #status .frozen {
  display: none;
}
#game #status dl {
  display: flex;
  gap: 12px;
  margin: 0;
}
#game #status dl div {
  display: flex;
  gap: 5px;
}
#game #status dt {
  color: #a69d8a;
  font-size: 10px;
}
#game #status dd {
  margin: 0;
  color: #f3e6c4;
}
#game #status .ongoing {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cyan);
}
#game #status .ongoing li {
  display: flex;
  gap: 4px;
}
#game #status .ongoing .urgent {
  color: var(--red);
}
/* --- The tools: plain words in the top right corner --- */
body.playing #tools {
  position: fixed;
  top: calc(4px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  left: auto;
  bottom: auto;
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
}
body.playing #tools[hidden] {
  display: none;
}
body.playing #tools button,
#game .scene-tools button {
  flex: none;
  min-height: 28px;
  padding: 5px 8px;
  border: 0;
  background: none;
  color: #ffcf66b0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px #000;
}
body.playing #tools button:hover,
#game .scene-tools button:hover,
body.actions-open #tools #show-choices,
body.tv-open #tools #show-tv {
  color: var(--amber);
  background: none;
}
body.playing #tools #show-scene,
body.playing #tools #follow-story {
  display: none;
}
#game .scene-tools {
  position: absolute;
  top: calc(32px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 7;
  display: flex;
  gap: 2px;
}
/* --- The ways: faint chevrons at the edges, bright under the hand --- */
#game .direction {
  min-height: 0;
  padding: 18px 14px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 46px;
  line-height: 1;
  font-weight: 200;
  opacity: 0.38;
  text-shadow:
    0 0 10px #000,
    0 0 2px #000;
  transition:
    opacity 0.2s,
    color 0.2s;
}
#game .direction:hover,
#game .direction:focus-visible,
#game .direction.armed {
  opacity: 1;
  color: var(--amber);
  background: none;
}
#game .direction.left {
  left: calc(4px + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}
#game .direction.right {
  right: calc(4px + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
}
#game .direction.ahead {
  left: 50%;
  top: 46px;
  transform: translateX(-50%);
}
#game .direction.bottom {
  left: 50%;
  bottom: 2px;
  top: auto;
  transform: translateX(-50%);
}
#game .direction span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: none;
  width: max-content;
  max-width: 220px;
}
/* --- The subtitles: low on the picture, as in a film --- */
#game .subtitles {
  left: 50%;
  right: auto;
  bottom: calc(46px + env(safe-area-inset-bottom));
  width: min(920px, 76%);
  transform: translateX(-50%);
}
#game #story {
  background: none;
  font-size: clamp(17px, 2.1vw, 25px);
  text-shadow:
    0 2px 6px #000,
    0 0 3px #000,
    0 0 1px #000;
}
#game #story .entry header {
  color: var(--amber);
  font-size: 0.55em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#game #skip {
  background: none;
  border: 0;
  color: #ffcf66a0;
  font-size: 10px;
}
/* --- The crew: faces on the left, a card beside the one touched --- */
#game #party {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  top: calc(52px + env(safe-area-inset-top));
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#party .member {
  position: relative;
}
#party .face {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: 0;
}
#party .face img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid #ffb00066;
  border-radius: 50%;
  filter: grayscale(0.6) brightness(0.65);
  transition:
    filter 0.2s,
    border-color 0.2s;
}
#party .here .face img {
  filter: none;
  border-color: var(--amber);
}
#party .gone .face img {
  filter: grayscale(1) brightness(0.35);
  border-color: #555;
}
#party .face span {
  color: #f3e6c4;
  font-size: 11px;
  text-shadow: 0 1px 4px #000;
  opacity: 0;
  transition: opacity 0.2s;
}
#party .face:hover span,
#party .open .face span,
#exploration.observing ~ #party .face span {
  opacity: 1;
}
#party .open .face img {
  box-shadow:
    0 0 0 2px var(--amber),
    0 0 18px #ffb00055;
}
#party .member-card {
  position: absolute;
  left: 62px;
  top: 0;
  width: min(300px, 46vw);
  max-height: calc(100dvh - 120px);
  overflow: auto;
  padding: 12px;
  background: #070605ee;
  border: 1px solid var(--amber2);
  box-shadow: 0 12px 30px #000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#party .member-card p {
  margin: 0;
}
#party .member-card .who {
  font-family: Georgia, serif;
  font-size: 18px;
  color: #eee7d7;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
#party .member-card .who small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
}
#party .member-card .how,
#party .member-card .far {
  font-size: 12px;
  color: #b8ae99;
  margin-bottom: 4px;
}
#party .member-card > * {
  flex-shrink: 0; /* the card scrolls; its lines never squeeze into each other */
}
#party .member-card button {
  min-height: 0;
  height: auto;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 10px;
}
#party .member-card button b {
  font-weight: 400;
  color: var(--text);
}
#party .member-card button small {
  color: #a69d8a;
  font-size: 11px;
}
#party .member-card button.leave {
  border-color: var(--line);
}
/* --- The decisions: a panel from the right, opened by « Décisions » or by what the scene cannot show --- */
#game .reading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 8;
  width: min(400px, 48vw);
  max-height: none;
  margin: 0;
  padding: calc(64px + env(safe-area-inset-top)) 16px 16px;
  overflow: auto;
  background: #050505ee;
  border: 0;
  border-left: 1px solid var(--line);
  transform: translateX(105%);
  transition: transform 0.25s ease;
  visibility: visible;
}
body.actions-open #game .reading,
body.ended #game .reading {
  transform: none;
}
body.ended #game .reading {
  width: 100%;
  border: 0;
}
/* --- The ship's screen: out of sight but alive (its sound), in front for a video or on demand --- */
#game #scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  visibility: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
body.tv-open #game #scene,
body.video-playing #game #scene,
body.cinematic #game #scene {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  visibility: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000;
}
body.tv-open #game .tv-shell,
body.video-playing #game .tv-shell,
body.cinematic #game .tv-shell {
  width: min(100%, calc(100dvh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: auto;
}
/* --- The phone: beside the scene on a computer, over it on a phone --- */
#game ~ .phone-panel:not(:modal),
.phone-panel:not(:modal) {
  inset: calc(40px + env(safe-area-inset-top)) 12px 12px auto;
  width: 300px;
  z-index: 9;
  background: #050505f0;
  border: 1px solid var(--amber2);
}
.phone-panel:not(:modal) .close {
  display: block;
}
/* --- A phone held upright: turn it --- */
#rotate {
  display: none;
}
@media (orientation: portrait) and (max-width: 900px) {
  body.playing:has(#game:not([hidden])) #rotate {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    background: #050505;
    color: #f3e6c4;
  }
}
#rotate p {
  margin: 0;
}
#rotate .rotate-icon {
  width: 30px;
  height: 50px;
  margin-bottom: 18px;
  border: 2px solid var(--amber);
  border-radius: 6px;
  animation: turn-phone 2.4s ease-in-out infinite;
}
#rotate .rotate-why {
  color: #a69d8a;
  font-size: 12px;
}
@keyframes turn-phone {
  0%,
  30% {
    transform: rotate(0);
  }
  60%,
  100% {
    transform: rotate(-90deg);
  }
}
/* --- Small landscape screens (a phone on its side) --- */
@media (max-height: 500px) {
  #game #status {
    font-size: 10px;
    gap: 10px;
    padding-top: calc(5px + env(safe-area-inset-top));
  }
  #game #status dl div:nth-child(4) {
    display: none;
  }
  #party .face img {
    width: 40px;
    height: 40px;
  }
  #game #party {
    top: calc(38px + env(safe-area-inset-top));
    gap: 6px;
  }
  #party .member-card {
    left: 48px;
    width: min(270px, 44vw);
    max-height: calc(100dvh - 50px);
    padding: 8px;
    gap: 4px;
  }
  #party .member-card .who {
    font-size: 15px;
  }
  #party .member-card button {
    font-size: 11px;
    padding: 5px 8px;
  }
  #party .member-card button small {
    font-size: 10px;
  }
  body.playing #tools button,
  #game .scene-tools button {
    padding: 4px 6px;
    font-size: 9px;
  }
  #game .direction {
    font-size: 38px;
    padding: 12px 10px;
  }
  #game .direction.ahead {
    top: 34px;
  }
  #game .subtitles {
    bottom: calc(30px + env(safe-area-inset-bottom));
    width: 70%;
  }
  #game #story {
    font-size: 16px;
  }
}
/* --- The phone's panel: on the screen, or in the hand by its QR code --- */
.phone-modes {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0 0 10px;
}
.phone-modes button {
  flex: 1;
  min-height: 0;
  padding: 6px 8px;
  font-size: 10px;
  border-color: var(--line);
  color: #a69d8a;
}
.phone-modes button[aria-pressed='true'] {
  border-color: var(--amber);
  color: var(--amber);
}
#phone-pair {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #d8cfbc;
}
#phone-pair[hidden] {
  display: none;
}
#phone-qr {
  display: block;
  width: min(220px, 70%);
  height: auto;
  margin: 8px auto 12px;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
}
#phone-url {
  font-size: 10px;
  color: var(--cyan);
  word-break: break-all;
}
#phone-pair .pair-note {
  color: #8f877a;
  font-size: 11px;
}
/* --- Installing the game (install.js) --- */
.install-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -24px 0 28px;
  font-size: 12px;
  color: #a6a298;
}
.install-hint button[hidden] {
  display: none;
}
#game #status dd {
  font-size: 12px;
}
#game #eyes .eyes-label {
  left: auto;
  right: calc(14px + env(safe-area-inset-right));
  top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: none;
  opacity: 0.5;
}
/* --- Boarding: how the game is played (also the « Aide » panel) --- */
.guide ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.guide li {
  padding-left: 16px;
  border-left: 2px solid var(--line);
  color: #c9bfab;
  line-height: 1.6;
  font-size: 13px;
}
.guide li b {
  color: var(--amber);
  font-weight: 600;
}
#help .guide {
  max-width: 760px;
  margin: auto;
}
/* --- The sound, when the browser refused to start it by itself: a touch anywhere --- */
#sound-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: #050505e6;
  color: #f3e6c4;
  cursor: pointer;
}
#sound-gate[hidden] {
  display: none;
}
#sound-gate p {
  margin: 0;
}
#sound-gate .sound-why {
  max-width: 460px;
  color: #a69d8a;
  font-size: 12px;
}
/* A headset, drawn. */
#sound-gate .headset {
  width: 46px;
  height: 30px;
  margin-bottom: 14px;
  border: 3px solid var(--amber);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  position: relative;
}
#sound-gate .headset::before,
#sound-gate .headset::after {
  content: '';
  position: absolute;
  bottom: -14px;
  width: 12px;
  height: 18px;
  border-radius: 4px;
  background: var(--amber);
}
#sound-gate .headset::before {
  left: -7px;
}
#sound-gate .headset::after {
  right: -7px;
}
/* --- The notebook (« Objectifs ») and its notices over the scene --- */
#goals {
  max-width: 760px;
  margin: auto;
}
.goals-hours {
  color: var(--amber);
  letter-spacing: 0.08em;
}
.goal {
  padding: 12px 16px;
  margin-bottom: 12px;
  border-left: 2px solid var(--amber2);
  background: #0d0b07;
}
.goal.done {
  border-color: var(--green);
  opacity: 0.7;
}
.goal h3 {
  margin: 0 0 6px;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  color: #eee7d7;
}
.goal p {
  margin: 0 0 6px;
  font-size: 13px;
  color: #c9bfab;
  line-height: 1.6;
}
.goal ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #c9bfab;
  line-height: 1.8;
}
.goal li.done {
  color: var(--green);
}
#toast {
  position: fixed;
  left: 50%;
  top: calc(44px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  padding: 8px 16px;
  background: #050505e8;
  border: 1px solid var(--amber2);
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 0.06em;
  pointer-events: none;
}
#toast[hidden] {
  display: none;
}
#place-card {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 5;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: 0.04em;
  color: #f3e6c4;
  text-shadow:
    0 2px 20px #000,
    0 0 4px #000;
  opacity: 0;
  pointer-events: none;
}
#place-card.shown {
  animation: place-card 3.2s ease forwards;
}
@keyframes place-card {
  0% {
    opacity: 0;
  }
  15%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #place-card.shown {
    animation: none;
  }
}
/* The scene's own tools (Observer, Caméra, Plan) in the bottom left corner: never under the top line's words. */
#game .scene-tools {
  top: auto;
  right: auto;
  left: calc(8px + env(safe-area-inset-left));
  bottom: calc(6px + env(safe-area-inset-bottom));
}

/* --- The way from place to place (passage.js): darkness, the way's door from the front, opening, the place --- */
#passage {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
#passage.shown {
  display: block;
  opacity: 1;
}
#passage.arrived {
  opacity: 0;
  transition: opacity 0.45s;
}
#passage .door {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The picture covers the screen, whatever its shape (3 : 2). */
  width: max(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition:
    opacity 0.35s,
    transform 1.2s ease-out;
}
/* A slow step toward the closed door, then on through it as it opens (transitions: no jump between the two). */
#passage.door-shown .door {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}
#passage.opening .door {
  transform: translate(-50%, -50%) scale(1.9);
  transition:
    opacity 0.35s,
    transform var(--open-ms, 2000ms) cubic-bezier(0.5, 0, 0.75, 1);
}
#passage .frame,
#passage .leaf {
  position: absolute;
  background-repeat: no-repeat;
}
#passage .frame {
  inset: 0;
  background-size: 100% 100%;
}
#passage .leaf {
  transition: transform var(--open-ms, 2000ms) cubic-bezier(0.55, 0, 0.35, 1);
}
#passage.opening .leaf.left {
  transform: translateX(-100%);
}
#passage.opening .leaf.right {
  transform: translateX(100%);
}
#passage .leaf.hatch {
  border-radius: 50%;
  transition:
    transform var(--open-ms, 2000ms) cubic-bezier(0.6, 0, 0.4, 1),
    filter var(--open-ms, 2000ms);
}
/* The hatch: its wheel turns it a little, then it swings away into the dark. */
#passage.opening .leaf.hatch {
  animation: passage-hatch var(--open-ms, 2000ms) forwards;
}
@keyframes passage-hatch {
  0% {
    transform: rotate(0);
    filter: brightness(1);
  }
  35% {
    transform: rotate(-28deg);
    filter: brightness(1);
  }
  100% {
    transform: perspective(900px) rotate(-28deg) rotateY(-75deg) translateX(-30%);
    filter: brightness(0.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  #passage .door,
  #passage .leaf {
    animation: none !important;
    transition: none !important;
  }
}

/* --- The subtitles as a title: at the top of the picture, large, the story's words first --- */
#game .subtitles {
  top: calc(40px + env(safe-area-inset-top));
  bottom: auto;
  left: 50%;
  width: min(1040px, 74%);
  transform: translateX(-50%);
  padding: 10px 0 18px;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, #000000a8, #00000000 75%);
}
#game #story {
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: #f3e6c4;
  text-shadow:
    0 2px 14px #000,
    0 0 4px #000,
    0 0 1px #000;
}
#game #story .entry header {
  font-family: var(--mono, monospace);
  margin-bottom: 6px;
}
/* A companion's words and the ship's: the title keeps the voice's colour, smaller than the story. */
#game #story .entry.ship p,
#game #story .entry.message p,
#game #story .entry.system p,
#game #story .entry.notice p {
  font-family: var(--mono, monospace);
  font-size: 0.72em;
  color: #ffd27a;
}
#game #story:focus {
  outline: none;
}
/* Under the title: the way ahead. */
#game .direction.ahead {
  top: max(24%, 130px);
}
@media (max-height: 520px) {
  #game .subtitles {
    top: calc(30px + env(safe-area-inset-top));
    width: 72%;
  }
  #game #story {
    font-size: 17px;
  }
}

/* --- The wake (mode play, `turn.wake`): nothing to do but listen; the scene waits under the story --- */
body.waking #exploration > :not(.subtitles),
body.waking #party,
body.waking #status,
body.waking #tools {
  pointer-events: none;
}
body.waking #camera,
body.waking #eyes,
body.waking #directions {
  filter: brightness(0.3) blur(3px);
  transition: filter 1.2s;
}
body.waking #place-card {
  display: none;
}
body.waking #party,
body.waking #tools,
body.waking .scene-tools,
body.waking #status {
  opacity: 0.15;
  transition: opacity 0.8s;
}
body.waking #game .subtitles {
  top: 50%;
  width: min(1100px, 82%);
  transform: translate(-50%, -50%);
  background: none;
}
body.waking #game #story {
  font-size: clamp(22px, 2.9vw, 38px);
}
body.waking #game .subtitles::after {
  content: 'Le réveil · écoute';
  display: block;
  margin-top: 26px;
  font: 11px var(--mono, monospace);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber2);
  animation: waking-breath 2.4s ease-in-out infinite;
}
@keyframes waking-breath {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}

/* --- The corridor's signs (signs.js): its blank panels, written on, in perspective --- */
#eyes .stage .signs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#eyes .sign {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  box-sizing: border-box;
  background: #00000059;
  color: #ffb000;
  font-family: var(--mono, monospace);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-shadow:
    0 0 6px #ffb000aa,
    0 0 1px #000;
}
#eyes .sign .main {
  font-size: 26px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
#eyes .sign .sub {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #ffcf66cc;
}

/* --- A place's short film (presentation.js), full screen before its words --- */
#clip {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#clip[hidden] {
  display: none;
}
#clip video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- « Passer › »: the films and the prologue are skipped with this button only, never by a click on them --- */
.pass-film {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 46;
  padding: 10px 18px;
  border: 1px solid #f3e6c455;
  border-radius: 6px;
  background: #050505cc;
  color: #f3e6c4;
  font:
    600 15px/1 system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.pass-film:hover,
.pass-film:focus-visible {
  background: #f3e6c4;
  color: #050505;
}
.pass-film[hidden] {
  display: none;
}
.cinematic #tv,
.video-playing #tv {
  pointer-events: none;
}

/* --- The corridor, a step at a time (exploration.js stride): what was ahead comes nearer and passes --- */
#game #eyes .view.ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 42%;
}
#game #eyes .stage > .view:not(.ghost) {
  transform-origin: 50% 42%;
}
#game #eyes .hotspot.along {
  cursor: n-resize;
}

/* --- Spots: found without being given away --- */
.hotspot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid #f0d3a2;
  border-radius: 50%;
  background: radial-gradient(circle, #f0d3a2 0 2px, #f0d3a222 3px);
  box-shadow: 0 0 8px #f0d3a266;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
  animation: spot-glint 5s ease-in-out infinite;
}
.hotspot:hover::after,
.hotspot:focus-visible::after,
.observing .hotspot::after {
  opacity: 0.95;
  animation: none;
}
.hotspot:disabled {
  cursor: not-allowed;
}
.hotspot:disabled::after {
  opacity: 0.25;
  animation: none;
}
/* The torch overlays the stage. Suppress idle glints in darkness so none leak through its translucent edge. */
#eyes:is(.light-dark, .light-off) .hotspot::after {
  opacity: 0;
  animation: none;
}
@keyframes spot-glint {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot::after {
    animation: none;
  }
}

/* --- The cards on a phone: off the screen's edges (and its notch); on its side, the words on the left and the
   cards, as tall as the screen allows, on the right --- */
body.playing #cast {
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@media (max-height: 520px) and (orientation: landscape) {
  .cast {
    display: grid;
    grid-template-columns: minmax(170px, 30%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 18px;
  }
  .cast-head {
    grid-area: 1 / 1;
    align-self: center;
  }
  .cast-head .eyebrow {
    font-size: 10px;
  }
  .cast-head h1 {
    margin: 4px 0 8px;
    font-size: 24px;
  }
  .cast-head p:not(.eyebrow) {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
  }
  .cast-confirm {
    grid-area: 2 / 1;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 8px 0 0;
    background: none;
  }
  .cast-confirm p {
    font-size: 16px;
  }
  .cast-grid {
    grid-area: 1 / 2 / 3 / 3;
    padding: 10px 4px;
  }
  .cast-card {
    width: calc((100dvh - 48px) * 0.716);
  }
}