:root {
  --face: oklch(0.17 0.008 250);
  --lamp: oklch(0.82 0.16 75);
  --paper: oklch(0.975 0.003 240);
  --paper-ink: oklch(0.2 0.01 250);
  --paper-rule: oklch(0.80 0.01 250);
  --paper-mute: oklch(0.45 0.01 250);
  --sky-top: oklch(0.46 0.075 245);
  --sky-mid: oklch(0.70 0.09 40);
  --sky-low: oklch(0.86 0.09 65);
  --num: "tnum" 1;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--face);
  color: var(--paper);
  font: 400 1rem/1.5 "Noto Sans JP", system-ui, sans-serif;
  font-feature-settings: var(--num);
}
::selection { background: var(--lamp); color: var(--face); }

.cab { height: 100%; position: relative; }

.window {
  position: absolute;
  inset: 0;
  /* The literal evening sky behind the transparent WebGL canvas; fog matches --sky-low at the horizon. */
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 55%, var(--sky-low) 72%);
}
.window canvas { display: block; width: 100%; height: 100%; }

.mute, .staff-go {
  font: inherit;
  cursor: pointer;
  border-radius: 3px;
}
.info {
  position: absolute;
  top: 0;
  right: 0;
  width: 15rem;
  background: oklch(0.2 0.02 255);
  color: oklch(0.95 0.01 255);
  padding: 0.6rem 0.9rem 0.8rem;
  border-bottom-left-radius: 4px;
}
.info dl { margin: 0; }
.info div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid oklch(0.32 0.02 255); }
.info dt { font-size: 0.8rem; color: oklch(0.75 0.02 255); }
.info dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.info dd.close { color: var(--lamp); }
.mute {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  color: var(--paper-ink);
  background: var(--paper);
  border: 0;
}
.mute:hover { background: oklch(0.9 0.004 240); }
.mute[aria-pressed="true"] { color: var(--paper-mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--face); outline-offset: 2px; }

/* The run's record is a driver's staff card (スタフ) clipped over the window, filled in station by station. */
.staff {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  translate: -50% 0;
  width: min(30rem, calc(100% - 2rem));
  background: var(--paper);
  color: var(--paper-ink);
  padding: 1.25rem 1.5rem 1.4rem;
  border-radius: 2px;
  box-shadow: 0 6px 18px oklch(0.2 0.02 260 / 0.35);
}
.staff[hidden] { display: none; }
.staff-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--paper-ink); padding-bottom: 0.5rem; }
.staff h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.staff-head p { margin: 0; color: var(--paper-mute); font-size: 0.85rem; }
.staff table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-size: 0.92rem; }
.staff th, .staff td { padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--paper-rule); text-align: right; }
.staff th:first-child, .staff td:first-child { text-align: left; }
.staff thead th { font-weight: 500; font-size: 0.75rem; color: var(--paper-mute); }
.staff td.empty { color: var(--paper-rule); }
.staff tr.latest td { font-weight: 700; }
.staff .err { font-weight: 700; }
.staff-intro p { margin: 1rem 0 0.75rem; font-size: 0.9rem; }
.keys { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1.5rem; font-size: 0.85rem; }
.keys div { display: flex; gap: 0.6rem; }
.keys dt { font-weight: 700; min-width: 3.6rem; }
.keys dd { margin: 0; color: var(--paper-mute); }
.staff-go {
  margin-top: 1.1rem;
  width: 100%;
  padding: 0.65rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--paper-ink);
  border: 0;
}
.staff-go:hover { background: oklch(0.32 0.01 250); }
.staff-go kbd { font: inherit; font-weight: 400; font-size: 0.8rem; opacity: 0.75; margin-left: 0.4rem; }
.staff-go:focus-visible { outline-color: var(--paper-ink); }
.staff-go:disabled { cursor: default; background: oklch(0.45 0.01 250); }

@media (max-width: 760px) {
  .keys { grid-template-columns: 1fr; }
}