/* The dark theme of the holo table, with one accent color. */

:root {
  --bg: #05070b;
  --panel: rgba(12, 17, 25, 0.78);
  --line: rgba(120, 160, 200, 0.12);
  --text: #d9e2ec;
  --muted: #7d8a9b;
  --accent: #4fd8ff;
  --accent-dim: rgba(79, 216, 255, 0.16);
  --red: #ff5c61;
  --blue: #5c99ff;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --step-0: 11px;
  --step-1: 13px;
  --step-2: 15px;
  --step-3: 20px;
  --radius: 10px;
  /* The windows: fully opaque in the dark color of the page, because an alpha of 0.96 still showed map text, with a thin border and a soft shadow. */
  --window: rgb(10, 14, 21);
  --window-solid: rgb(10, 14, 21);
  --window-line: rgba(120, 160, 200, 0.2);
  --window-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-1)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The body is at least the height of the window, and it grows past it when the window is short, so the page scrolls and no section lies over another. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

h1, h2, p { margin: 0; }

/* MARK: - The header */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand > div { min-width: 0; }

.mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 14px var(--accent-dim), inset 0 0 8px var(--accent-dim);
}

h1 {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub {
  color: var(--muted);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The top bar holds one button for each viewer, pressed while the viewer is open. */
.viewers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; }
/* The reset of the windows is an action and not a viewer, so a wider gap and an icon set it apart from the viewer buttons. */
.viewers-reset { margin-left: 8px; }
.status { display: flex; align-items: center; gap: 18px; flex: none; }

.stat { display: flex; flex-direction: column; align-items: flex-end; }
.label { color: var(--muted); font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; }
.value { font: 600 var(--step-2) var(--mono); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--step-0);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill[data-state="live"] { color: var(--accent); border-color: var(--accent-dim); }
.pill[data-state="live"] i { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: beat 2s ease-in-out infinite; }
.pill[data-state="retrying"] i, .pill[data-state="stalled"] i, .pill[data-state="unsupported"] i { background: #ffb547; }

@keyframes beat { 50% { opacity: 0.35; } }

/* MARK: - The layout */

/* The layout takes the free height of the window, and never less than its minimum.
   Above the phone width the map is the one cell, and the scoreboard, the chat, the events, and the console float over it. */
.layout {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 460px;
}

.stage {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #0b1522 0%, var(--bg) 70%);
}

#table, #labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#labels { touch-action: none; cursor: grab; }
#labels:active { cursor: grabbing; }

/* MARK: - The windows */

/* Each viewer is a window of one kind: a head that stays, with the title, the controls of its content, the expand button, and the close button,
   and a body that scrolls. Its background is opaque, with no blur behind it, for the cost of the frame. */
.win { display: flex; flex-direction: column; overflow: hidden; z-index: var(--win-z, 10); border-radius: var(--radius); background: var(--window); border: 1px solid var(--window-line); box-shadow: var(--window-shadow); }
.win > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 8px 6px 12px; background: var(--window-solid); border-bottom: 1px solid var(--line); }
.win > header h2 { margin: 0; }
.win-expand { margin-left: auto; }
.win-body { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 8px 12px; }

/* Above the phone width each window lies over the map at its own place and size, and the viewer drags it by its head.
   A window is out of the flow and not seen before its first place, so the map has its full size when the first places are measured. */
@media (min-width: 861px) {
  .side { display: contents; }
  .win {
    position: fixed;
    left: var(--win-x);
    top: var(--win-y);
    width: var(--win-w);
    height: var(--win-h);
    min-width: 260px;
    min-height: 160px;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .win:not(.windowed) { visibility: hidden; }
  .win > header { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
  .win > header button { cursor: pointer; }
  .win > header input { cursor: text; }
  .win:not(.expanded) > .win-grip { display: block; }
}

/* An expanded window covers the page at any width, and the window that the viewer pressed last stays on top, also above it. */
.win.expanded {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--window-solid);
}

h2 {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-scores { display: flex; gap: 6px; font: 600 var(--step-2) var(--mono); }
.team-scores span { padding: 0 8px; border-radius: 6px; }
.team-scores .red { color: var(--red); background: rgba(255, 92, 97, 0.12); }
.team-scores .blue { color: var(--blue); background: rgba(92, 153, 255, 0.12); }

/* MARK: - The scoreboard */

.scoreboard { width: 100%; border-collapse: collapse; }
.scoreboard th { color: var(--muted); font-size: var(--step-0); font-weight: 500; text-align: left; padding: 0 0 6px; }
.scoreboard td { padding: 5px 0; border-top: 1px solid var(--line); }
.scoreboard tbody tr { cursor: pointer; }
.scoreboard tbody tr:hover td { color: #fff; }
.scoreboard .number { text-align: right; font-family: var(--mono); width: 56px; padding-left: 10px; }
.scoreboard .name { max-width: 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreboard .name i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.scoreboard tr.dead td { opacity: 0.5; }
.scoreboard tr.spectator td { color: var(--muted); font-style: italic; }
.scoreboard tr.followed td { color: var(--accent); }

/* MARK: - The chat */

.chat { list-style: none; margin: 0; }
.chat-line { padding: 4px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; animation: arrive 0.4s ease-out; }
.chat-line time { color: var(--muted); font: var(--step-0) var(--mono); margin-right: 8px; }
.chat-line b { font-weight: 600; margin-right: 6px; }
.chat:empty::before { content: "No chat yet"; color: var(--muted); font-size: var(--step-0); }

/* MARK: - The events */

.events { list-style: none; margin: 0; }

.event {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  animation: arrive 0.4s ease-out;
}

.event time { color: var(--muted); font: var(--step-0)/1.9 var(--mono); flex: none; width: 34px; }
.event b { color: var(--accent); font-weight: 600; }
.event-join span, .event-leave span, .event-team span { color: var(--muted); }
.event-death span { color: #ffb0b2; }
.event-duel span { color: #ffd666; }

@keyframes arrive { from { opacity: 0; transform: translateX(6px); } }

/* MARK: - The server console */

.console-note { color: var(--muted); font-size: var(--step-0); }
.console {
  background: #020305;
  font: var(--step-0)/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* MARK: - The overlays of the stage */

.overlay { position: absolute; pointer-events: none; }

.empty {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.empty .headline { color: var(--text); font-size: var(--step-2); font-weight: 500; }

.signal {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid rgba(255, 181, 71, 0.4);
  border-radius: 6px;
  background: rgba(30, 20, 5, 0.6);
  color: #ffb547;
  font: 600 var(--step-0) var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: flicker 0.9s steps(2) infinite;
}

@keyframes flicker { 50% { opacity: 0.55; } }

.notice {
  inset: auto 20px 50% 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
  pointer-events: auto;
}

[hidden] { display: none !important; }

.hint {
  position: absolute;
  top: 14px;
  left: 18px;
  color: var(--muted);
  font-size: var(--step-0);
  pointer-events: none;
  opacity: 0.7;
}

.follow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 210px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--player, var(--accent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.follow-name { font-size: var(--step-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-weapon { color: var(--muted); font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.follow dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.follow dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.follow dd { margin: 0; font: 600 var(--step-1) var(--mono); }

/* MARK: - The instant replay */

.replay {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.replay button {
  flex: none;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 var(--step-0) var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

#replay-play { width: 28px; position: relative; }
#replay-play::before { content: ""; position: absolute; inset: 0; margin: auto; }
#replay-play[data-icon="replay"]::before { width: 12px; height: 12px; border: 2px solid var(--text); border-left-color: transparent; border-radius: 50%; }
#replay-play[data-icon="play"]::before { width: 0; height: 0; border-left: 10px solid var(--text); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateX(2px); }
#replay-play[data-icon="pause"]::before { width: 10px; height: 12px; border-left: 3px solid var(--text); border-right: 3px solid var(--text); }
.replay button:hover { background: rgba(255, 255, 255, 0.06); }
.replay .live { padding: 0 12px; color: var(--muted); border: 1px solid var(--line); }
.replay[data-mode="live"] .live { color: var(--accent); border-color: var(--accent-dim); }
.replay[data-mode="replay"] { border-color: rgba(255, 181, 71, 0.35); }

.replay-label { flex: none; min-width: 92px; text-align: right; font: var(--step-0) var(--mono); color: var(--muted); }

#scrubber {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 100%), rgba(255, 255, 255, 0.12) var(--fill, 100%));
  cursor: pointer;
}

#scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); }
#scrubber::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); }

/* MARK: - The camera modes and the inspector */

.toolbar {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.segmented button, .tool, .icon {
  font: 500 var(--step-0) var(--sans);
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { color: var(--bg); background: var(--accent); }
.segmented button:disabled { opacity: 0.35; cursor: default; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.tool[aria-expanded="true"] { color: var(--accent); border-color: var(--accent-dim); }
.segmented button:not(:disabled):hover, .tool:hover, .icon:hover { color: #fff; }
.segmented button[aria-pressed="true"]:hover { color: var(--bg); }

.hint { top: 48px; }

.inspector-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector-title span { color: var(--muted); font-family: var(--mono); }
.inspector-title b { font-weight: 600; }
.icon { font-size: 18px; line-height: 1; padding: 2px 8px; text-transform: none; }
.inspector-body h3 { margin: 12px 0 4px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.inspector-body h4 { margin: 12px 0 2px; color: var(--accent); font-size: var(--step-0); font-weight: 600; }
.inspector-note { color: var(--muted); font-size: var(--step-0); margin: 6px 0; }
.origin-history { list-style: none; margin: 0; padding: 0; }
.origin-history li { font: var(--step-0)/1.7 var(--mono); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.origin-history time { color: var(--muted); margin-right: 8px; }
.origin-history li.now { color: #fff; }
.fields { width: 100%; border-collapse: collapse; font: var(--step-0)/1.6 var(--mono); }
.fields td { padding: 1px 0; border-top: 1px solid var(--line); vertical-align: top; }
.field-name { color: var(--muted); padding-right: 10px !important; white-space: nowrap; }
.field-value { width: 100%; overflow-wrap: anywhere; }
.changed { animation: changed 1.6s ease-out; }
@keyframes changed { from { background: rgba(79, 216, 255, 0.35); } to { background: transparent; } }

.stage[data-camera="eye"] #labels, .stage[data-camera="fly"] #labels { cursor: crosshair; }

/* MARK: - The table views */

/* The hit zones of a window: thin sides and larger corners at the edge of the panel, above its content.
   The top zone is thin, so a press on the head below it moves the window. */
.win-grip { display: none; position: absolute; z-index: 5; touch-action: none; }
.win-grip-n { top: 0; left: 12px; right: 12px; height: 4px; cursor: ns-resize; }
.win-grip-s { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.win-grip-e { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.win-grip-w { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.win-grip-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.win-grip-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.win-grip-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.win-grip-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }

/* The tables need room for their tabs and the filter in the head. */
@media (min-width: 861px) {
  .tables { min-width: 420px; }
}
.tables-tabs button { font-size: 11px; }
#tables-filter { flex: 1; min-width: 140px; max-width: 320px; font: var(--step-0) var(--sans); color: var(--text); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
#tables-filter:focus { outline: none; border-color: var(--accent-dim); }
.tables-note { color: var(--muted); font-size: var(--step-0); font-family: var(--mono); white-space: nowrap; }
.tables-columns { position: absolute; top: 46px; right: 48px; z-index: 4; max-height: 60%; overflow-y: auto; padding: 8px 12px; columns: 3 160px; background: var(--window-solid); box-shadow: var(--window-shadow); border: 1px solid var(--line); border-radius: 8px; font: var(--step-0)/1.8 var(--mono); }
.tables-columns label { display: block; white-space: nowrap; cursor: pointer; }
.tables-columns input { margin-right: 6px; accent-color: var(--accent); }
.tables-columns-all { column-span: all; display: block; margin: 2px 0 8px; font-size: 11px; }
.tables-columns-note { margin: 4px 0; max-width: 360px; color: var(--muted); font-family: var(--sans); white-space: normal; }
.tables-body { display: flex; padding: 0; }
.tables-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; overflow-anchor: none; }
.tables-header { position: sticky; top: 0; z-index: 1; display: grid; background: var(--window-solid); border-bottom: 1px solid var(--line); }
.tables-head-cell { text-align: left; padding: 5px 8px; border: 0; background: none; color: var(--accent); font: 600 var(--step-0) var(--mono); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tables-head-cell:hover { color: #fff; }
.tables-spacer { position: relative; }
.tables-row { position: absolute; top: 0; left: 0; display: grid; height: 24px; align-items: center; border-bottom: 1px solid var(--line); font: var(--step-0) var(--mono); cursor: pointer; }
.tables-row[hidden] { display: none; }
.tables-row span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 23px; }
.tables-row:hover { background: rgba(255, 255, 255, 0.04); }
.tables-row.selected { color: var(--accent); background: rgba(79, 216, 255, 0.08); }
.tables-world { flex: 1; overflow: auto; padding: 4px 12px 12px; }
.tables-world h4 { margin: 12px 0 2px; color: var(--accent); font-size: var(--step-0); font-weight: 600; }
.tables-world .fields { width: auto; min-width: 50%; }
.tables-world .field-name { width: 180px; }
.tables-clients th { text-align: left; color: var(--muted); font-weight: 600; padding-right: 16px; }
.tables-clients td { padding-right: 16px; }
.flash-a { animation: changed-a 1s ease-out; }
.flash-b { animation: changed-b 1s ease-out; }
@keyframes changed-a { from { background: rgba(79, 216, 255, 0.35); } to { background: transparent; } }
@keyframes changed-b { from { background: rgba(79, 216, 255, 0.35); } to { background: transparent; } }

/* MARK: - The game files */

/* The panel of the game files opens under the camera bar, opaque as the windows are. */
.map-files {
  position: absolute;
  top: 46px;
  left: 14px;
  z-index: 6;
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 140px);
  overflow-y: auto;
  padding: 8px 12px 12px;
  border-radius: var(--radius);
  background: var(--window-solid);
  border: 1px solid var(--window-line);
  box-shadow: var(--window-shadow);
}
.map-files-head { display: flex; align-items: center; gap: 8px; }
.map-files-head h2 { flex: 1; margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.map-files-note { margin: 6px 0; color: var(--muted); font-size: var(--step-0); }
.map-files-actions { display: flex; gap: 8px; margin: 8px 0; }
.map-files-list { list-style: none; margin: 0; padding: 0; font: var(--step-0) var(--mono); }
.map-files-list li { display: flex; align-items: center; gap: 10px; padding: 3px 0; border-top: 1px solid var(--line); }
.map-files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-files-size, .map-files-expiry { color: var(--muted); white-space: nowrap; }
#map-files-button[data-attention="true"] { color: var(--accent); border-color: var(--accent-dim); }
[data-platform="apple"] .map-files-head h2 { order: 1; }

/* MARK: - The window buttons */

/* On Apple systems the window buttons lead the head, close first and then expand, as on macOS.
   The back arrow of the inspector follows them, before the title.
   On each other system the head keeps its order: expand, then close at the far right, as on Windows. */
[data-platform="apple"] .win-close { order: -2; }
[data-platform="apple"] .win-expand { order: -1; margin-left: 0; }

/* MARK: - The folds */

.fold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.fold::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.fold[aria-expanded="false"]::before { transform: rotate(-45deg); }
.fold:hover { color: #fff; }
.fold:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* MARK: - A phone */

@media (max-width: 860px) {
  /* The layout keeps the height of its content, so the stage does not cover the console under it. */
  .layout { grid-template-columns: 1fr; grid-template-rows: auto auto; flex: none; min-height: 0; }
  .stage { height: 62dvh; min-height: 340px; }
  /* The scoreboard, the chat, the events, and the console stay in the flow of the page under the map, and a closed one leaves the flow.
     They are already as wide as the page, so they have no expand button there. */
  .side { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .events-panel { min-height: 160px; max-height: 40dvh; }
  .chat-panel { min-height: 120px; max-height: 32dvh; }
  .console-panel { height: 260px; margin: 0 8px 8px; }
  .side .win-expand, .console-panel .win-expand { display: none; }
  .hint { display: none; }
  .follow { top: 52px; right: 10px; left: auto; width: 200px; }
  .toolbar { top: 10px; left: 10px; }
  /* The inspector lies over the lower part of the map, and its expand button gives it the full screen. */
  .inspector { position: absolute; left: 8px; right: 8px; bottom: 62px; height: 52%; }
  /* The tables take the full screen, above every other layer, so the expand button has no use there. */
  .tables { position: fixed; inset: 0; border-radius: 0; border: 0; background: var(--window-solid); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tables .win-expand { display: none; }
  #tables-filter { max-width: none; }
  .tables-columns { top: 90px; left: 8px; right: 8px; columns: 2 140px; }
  /* At the phone width the viewer buttons take a row of their own under the name and the status, and the row scrolls sideways. */
  .bar { padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; }
  .viewers { order: 3; flex: 1 0 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .viewers .tool { flex: none; }
  .stat .label { display: none; }
  .replay-label { min-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
}