/* The replay, re-toned for the Daybook's night. Only tokens and layout are
   overridden here; the town's own stylesheet still draws every control. */

.replay {
  --surface-page: #14152a;
  --surface-raised: #1d1e36;
  --surface-sunken: #101122;
  --surface-deep: #0c0d1a;
  --surface-hover: #22233d;
  --surface-solid: #1d1e36;
  --surface-voice: #1a1b31;
  --ink: #f4ece2;
  --ink-secondary: #d8cfe0;
  --ink-muted: #b3a9c2;
  --ink-disabled: #6f6880;
  --line: rgb(244 236 226 / .12);
  --line-firm: rgb(244 236 226 / .22);
  --line-heavy: rgb(244 236 226 / .34);
  --edge: rgb(244 236 226 / .4);
  --accent: #f2a93b;
  --accent-bright: #f2a93b;
  --accent-wash: rgb(242 169 59 / .18);
  --attention-wash: rgb(162 180 255 / .12);
  --clay-raise: 0 1px 0 rgb(255 255 255 / .06) inset, 0 10px 30px -12px rgb(0 0 0 / .6);
  --clay-raise-sm: 0 1px 0 rgb(255 255 255 / .06) inset, 0 6px 16px -8px rgb(0 0 0 / .6);
  --clay-sink: inset 0 1px 3px rgb(0 0 0 / .5);
  --clay-press: inset 0 1px 3px rgb(0 0 0 / .6);
  --radius-lg: 0px;
  color-scheme: dark;
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif; /* Town sign, as on the page around it */
  background: #14152a; color: var(--ink);
  margin: 0; height: 100vh; overflow: hidden;
}
.replay .mono, .replay .clockface, .replay #pos { font-family: "Baloo 2", ui-rounded, system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }

.replay-main { position: relative; height: 100vh; width: 100vw; overflow: hidden; }
.replay .townmap { position: absolute; inset: 0; display: grid; place-items: center; }
.replay .townmap svg { width: 100%; height: 100%; max-height: 100vh; }
.replay .townmap.is3d .stage3d { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }

/* The controls float at the foot of the frame, like a player's. */
.replay .controls {
  /* the town's stylesheet makes this a sticky bar with a top; here it floats at the foot, so the top is cleared */
  position: absolute; top: auto; left: 50%; bottom: 1.25rem; translate: -50% 0; z-index: 5; height: auto;
  display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem; width: min(56rem, calc(100% - 2rem));
  padding: .6rem .8rem; margin: 0; border-radius: 999px;
  background: rgb(20 21 42 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(244 236 226 / .14); box-shadow: 0 20px 60px -20px rgb(0 0 0 / .7);
}
.replay .controls input[type=range] { flex: 1; min-width: 6rem; }
.replay .controls button, .replay .controls select { border-radius: 999px; }
.replay .sidetoggle { white-space: nowrap; font: 700 .875rem/1 "Baloo 2", ui-rounded, sans-serif; padding: .55rem .8rem; }

/* The map's own zoom and 2D/3D buttons sit under A's top bar when the frame is at the top of the window, so they move down. */
.replay .mapui, .replay .viewpick { top: 4.25rem; }

/* Residents and the feed live in a drawer, out of the town's way. */
.replay .townside {
  position: absolute; top: 1rem; right: 1rem; bottom: 5.5rem; width: min(22rem, calc(100% - 2rem)); z-index: 4;
  overflow: auto; padding: 1rem 1.1rem; border-radius: 18px;
  background: rgb(20 21 42 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(244 236 226 / .12);
}
.replay .townside[hidden] { display: none; }
.replay .townside h2 { font: 800 1.05rem/1 "Baloo 2", ui-rounded, sans-serif; color: var(--ink); margin: .5rem 0 .75rem; }
.replay .feed { max-height: none; }

@media (max-width: 40rem) {
  .replay .controls { bottom: .6rem; gap: .4rem; padding: .45rem .55rem; }
  .replay #pos, .replay .sidetoggle { display: none; }
}