:root {
  --cell-size: 28px;
  /* Reserve the default footprint until saved board dimensions are loaded. */
  --board-width: 9;
  /* Classic Windows minesweeper palette, matching minesweeper.online's skin */
  --silver: #c0c0c0;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --bevel-size: calc(var(--cell-size) / 8);
}

* { box-sizing: border-box; }

/* Keep the scrollbar gutter reserved so a tall results panel appearing
   can't change the viewport width and nudge the centered board. */
html { scrollbar-gutter: stable; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #000000;
  margin: 0;
  padding: 24px;
}

/* Registered as lengths so layout code reads the resolved pixel widths. */
@property --game-sidebar-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 320px;
}
@property --game-data-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 360px;
}

#page-layout {
  display: grid;
  --game-sidebar-min-width: 320px;
  --game-sidebar-width: clamp(var(--game-sidebar-min-width), 30vw, 760px);
  --game-data-width: clamp(360px, 24vw, 760px);
  /* The board's clearance from its column's edges, the viewport, and the
     tabs; Justice callouts keep it from the column's edges too.
     applyBoardPosition constrains offsets with this same value, so a board
     resting at it with a zero offset is never clamped. */
  --board-edge-inset: 8px;
  grid-template-columns: auto minmax(0, 1fr) var(--game-sidebar-docked-width, var(--game-sidebar-width));
  align-items: start;
  gap: 18px;
  width: 100%;
}

main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  container-type: inline-size;
}

/*-------DIFFICULTY TABS-------*/

#difficulty-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  align-items: center;
  gap: 8px 22px;
  font-size: 15px;
}

#difficulty-tabs a {
  color: #157ba8;
  text-decoration: none;
}

#difficulty-tabs a:hover { text-decoration: underline; }

#difficulty-tabs a.active {
  color: #000000;
  font-weight: bold;
  cursor: default;
  text-decoration: none;
}

#zoom-label {
  margin-left: 20px;
  font-size: 13px;
  color: #000000;
}

#board-position-btn {
  border: 1px solid #c5d0da;
  border-radius: 3px;
  background: #f7f9fb;
  padding: 3px 8px;
  color: #000000;
  font: 11px Arial, Helvetica, sans-serif;
  cursor: pointer;
}

#board-position-btn:hover,
#board-position-btn[aria-expanded="true"] {
  border-color: #8aa0b5;
  background: #e3edf6;
}

#board-position-panel {
  position: fixed;
  z-index: 30;
  width: 350px;
  overflow: auto;
  border: 2px solid #417ca4;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 10px 9px;
  box-shadow: 0 3px 10px rgba(34, 56, 70, 0.16);
  color: #000000;
  font: 11px Arial, Helvetica, sans-serif;
  text-align: left;
}

#board-position-panel[hidden] { display: none; }

.board-position-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 7px;
  margin: 3px 0;
}

.board-position-row input[type="range"] {
  width: 100%;
  margin: 0;
}

.board-position-slider {
  min-width: 0;
}

.board-position-ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: -1px;
  color: #000000;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.board-position-ticks span::before {
  display: block;
  width: 1px;
  height: 4px;
  margin: 0 auto 1px;
  background: #7890a0;
  content: "";
}

.board-position-ticks span:first-child {
  text-align: left;
}

.board-position-ticks span:first-child::before {
  margin-left: 0;
}

.board-position-ticks span:last-child {
  text-align: right;
}

.board-position-ticks span:last-child::before {
  margin-right: 0;
}

.board-position-row input[type="number"] {
  width: 62px;
  font: inherit;
}

#board-position-actions {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 9px 0 7px;
  background: #ffffff;
  border-bottom: 1px solid #d5e1e9;
}

#board-position-title {
  margin-right: auto;
  font-size: 13px;
}

#board-position-actions button {
  border: 1px solid #c5d0da;
  border-radius: 3px;
  background: #f7f9fb;
  min-height: 32px;
  padding: 5px 12px;
  color: #000000;
  font: 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
}

#board-position-actions #board-position-done {
  border-color: #24648c;
  background: #24648c;
  color: #ffffff;
  font-weight: bold;
}

#scores-nav[hidden] { display: none; }

/* Review and display controls take space only in the side column. */
#scores-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  width: 100%;
  min-width: 0;
  overflow-anchor: none;
}

#replay-review { width: 100%; min-width: 0; }
#replay-review[hidden] { display: none; }
#replay-review > summary {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid #c9d4de;
  border-radius: 3px;
  background: #f7fafc;
  color: #000000;
  cursor: pointer;
}
#replay-review[open] > summary { margin-bottom: 8px; }

#scores-nav button {
  min-height: 25px;
  padding: 2px 9px;
  border: 1px solid #c9d4de;
  border-radius: 3px;
  background: #f7fafc;
  color: #000000;
  font: inherit;
  cursor: pointer;
}

#scores-nav button:hover,
#scores-nav button:focus-visible {
  border-color: #8aa8bb;
  background: #edf5fa;
  color: #000000;
}

#path-view-control {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #000000;
}

#path-view-control[hidden],
#path-view-legend[hidden],
#replay-controls[hidden] {
  display: none;
}

.path-view-heading {
  margin-right: 2px;
  font-size: 12px;
  font-weight: bold;
}

#path-view-control button {
  box-sizing: border-box;
  min-height: 25px;
  padding-inline: 7px;
  font-weight: normal;
  white-space: nowrap;
}

#path-view-control button[aria-pressed="true"] {
  border-color: #547f9a;
  background: #dcecf5;
  color: #000000;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* The complete key shares the sidebar's normal flow with the stats. */
#path-view-legend {
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid #000000;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
#path-view-legend[hidden] { display: none; }

.path-legend-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.path-legend-row + .path-legend-row { margin-top: 8px; }

.path-legend-title {
  padding-bottom: 2px;
  border-bottom: 1px solid #000000;
  color: #000000;
  font-size: 13px;
  font-weight: bold;
}

.path-legend-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.path-legend-means {
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.25;
}

.path-legend-detail {
  color: #000000;
  font-size: 11px;
  line-height: 1.3;
}

.path-gradient-scale {
  display: inline-grid;
  grid-template-columns: auto 112px auto;
  align-items: center;
  gap: 5px;
}

.path-gradient-bar {
  width: 112px;
  height: 7px;
  border: 1px solid #8093a1;
  border-radius: 2px;
  background: linear-gradient(90deg,
    hsl(220, 88%, 42%), hsl(110, 88%, 42%), hsl(0, 88%, 42%));
}

.path-gradient-bar.path-time-gradient {
  background: linear-gradient(90deg, hsl(211, 85%, 78%), hsl(211, 85%, 22%));
}

.path-gradient-mid {
  width: 112px;
  margin: -3px auto 0;
  color: #000000;
  font-size: 9px;
  text-align: center;
}

.path-legend-key {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Legend swatches take the shape the board draws for that encoding, at
   the size of a small board cell, so a reader matches form as well as
   color at a glance. --swatch-color is set per item. The swatch box is a
   fixed 22px column so the wording lines up down the whole key. */
.path-legend-swatch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 2px;
  background: linear-gradient(var(--swatch-color), var(--swatch-color))
    center / 100% 5px no-repeat;
}

/* Filled dot: the path views' click markers. */
.path-legend-swatch.dot {
  background: radial-gradient(circle at center,
    var(--swatch-color) 0 5px, #ffffff 5.5px 6.5px, #6f7d87 7px 7.5px,
    transparent 8px);
}

/* Hollow ring: the review mode numbered action markers. */
.path-legend-swatch.form-dot {
  background: radial-gradient(circle at center,
    #ffffff 0 4.5px, var(--swatch-color) 5px 8px, transparent 8.5px);
}

.path-legend-swatch.form-ring,
.path-legend-swatch.form-dashed,
.path-legend-swatch.form-dashed-thin,
.path-legend-swatch.form-fill {
  border-radius: 1px;
  background: #d9d9d9;
}

.path-legend-swatch.form-ring {
  box-shadow: inset 0 0 0 4px var(--swatch-color);
}

.path-legend-swatch.form-dashed {
  border: 3px dashed var(--swatch-color);
}

.path-legend-swatch.form-dashed-thin {
  border: 1px dashed var(--swatch-color);
}

.path-legend-swatch.form-fill {
  background: var(--swatch-color);
  border: 1px solid #6f7d87;
}

.path-legend-swatch.form-flag,
.path-legend-swatch.form-badge,
.path-legend-swatch.form-crosshair,
.path-legend-swatch.form-leader {
  background: #ffffff;
  color: var(--swatch-color);
  line-height: 1;
  text-align: center;
}

.path-legend-swatch.form-flag {
  border: 1px solid #6f7d87;
}

.path-legend-swatch.form-flag svg {
  display: block;
  width: 14px;
  height: 14px;
}

.path-legend-swatch.form-badge {
  border: 1px solid #6f7d87;
  font: 700 11px/1 Arial, sans-serif;
}

.path-legend-swatch.form-crosshair {
  font: 700 20px/1 Arial, sans-serif;
}

.path-legend-swatch.form-leader {
  font: 700 18px/1 Arial, sans-serif;
}

.path-legend-note {
  color: #000000;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
}

#replay-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  align-items: center;
  gap: 6px;
}
#replay-controls > button { grid-row: 2; }
#replay-controls > #replay-slider-wrap { grid-column: 1 / -1; grid-row: 1; }

#replay-controls button {
  min-width: 25px;
  padding-inline: 5px;
  font-size: 16px;
  line-height: 1;
}

/* The status line's values (action number, in-game time, action kind) are
   its most legible text; the words between them are secondary. */
#replay-status {
  box-sizing: border-box;
  flex: 1 0 100%;
  min-height: 20px;
  color: #000000;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.replay-status-value {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}

/* Review mode board overlay toggles: same look as the path-mode buttons. */
#replay-overlay-control {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #000000;
}

#replay-overlay-control[hidden] {
  display: none;
}

#replay-overlay-control button {
  box-sizing: border-box;
  min-height: 25px;
  padding-inline: 7px;
  font-weight: normal;
  white-space: nowrap;
}

#replay-overlay-control button[aria-pressed="true"] {
  border-color: #547f9a;
  background: #dcecf5;
  color: #000000;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* Game-history slider: notches for every action (thinned when crowded) and
   black numeric labels at both endpoints plus the interior quarters. The
   current value is spelled out in the status line beside it. */
#replay-slider-wrap {
  position: relative;
  flex: 1 1 260px;
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 17px;
}

/* The current action number rides above the thumb, so the slider's value
   is readable at the slider itself, not only in the status line. */
#replay-slider-value {
  position: absolute;
  top: 0;
  /* JS sets --thumb (0–100%); the 8px insets match the notch scale's, so
     the label tracks the thumb across the track's travel. */
  left: calc(8px + (100% - 16px) * var(--thumb, 0.5));
  transform: translateX(-50%);
  min-width: 1.6em;
  padding: 0 3px;
  border: 1px solid #45657a;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
  font: bold 11px/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}

#replay-slider-value:empty { display: none; }

#replay-slider {
  width: 100%;
  margin: 0;
}

#replay-slider-scale {
  position: absolute;
  /* below the 15px value-label band plus the range input's own height */
  top: 36px;
  right: 8px;
  left: 8px;
  height: 16px;
  pointer-events: none;
}

.replay-slider-notch {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: #45657a;
  transform: translateX(-0.5px);
}

.replay-slider-label {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  color: #000000;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Interpretive legend chips: one per color class; hovering one spotlights
   its path segments, and hovering the path lights the matching chip. */
.path-bin-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 2px 6px;
  border: 1px solid #8093a1;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.path-bin-chip.hot {
  border-color: #173f57;
  background: #dcecf5;
  box-shadow: inset 0 0 0 1px #ffffff;
}

.path-tooltip {
  position: fixed;
  z-index: 60;
  padding: 3px 7px;
  border: 1px solid #000000;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.path-tooltip[hidden] {
  display: none;
}

#custom-form[hidden] { display: none; }

#custom-form {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
}

#custom-form input { width: 60px; }

/*-------BOARD LAB (the board-generation exploration mode)-------*/

#board-lab-panel[hidden] { display: none; }

#board-lab-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #000000;
}

#board-lab-note {
  margin: 0 0 2px;
  font-size: 12px;
  color: #000000;
}

.lab-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-name {
  width: 130px;
  text-align: right;
  color: #000000;
}

.lab-row input[type="range"] { width: 240px; }

.lab-value {
  width: 44px;
  text-align: left;
  font-weight: bold;
}

#board-lab-new {
  margin-top: 4px;
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  border: 1px solid #c9d4de;
  border-radius: 3px;
  background: #f7fafc;
  color: #000000;
  cursor: pointer;
}

/*-------GAME FRAME (classic chrome)-------*/

body.trial-offboard #game-frame {
  display: none !important;
}

#game-frame {
  display: block;
  width: max-content;
  margin-inline: auto;
  background: var(--silver);
  padding: calc(var(--cell-size) / 4);
  border: calc(var(--cell-size) / 8) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}

/* Beside a column holding game data, the board rests against its column's
   right edge instead of centering, and the saved position counts from there. */
#page-layout.board-beside-game-data #game-frame {
  margin-inline: auto var(--board-edge-inset);
}

/* Keep the frame measurable for layout restoration without inviting input
   before startup completes. Removing game-booting reveals and enables it in
   the same turn; neither visibility nor the status changes its footprint. */
.game-booting #game-frame {
  visibility: hidden;
}

.game-booting #board:empty {
  height: calc(9 * var(--cell-size) + 2 * var(--bevel-size));
}

#startup-status {
  display: none;
}

.game-booting #startup-status {
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: min(90vw, 360px);
  transform: translateX(-50%);
  color: #000000;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.startup-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #417ca4;
  box-shadow: 0 0 0 3px #e3edf6;
}

.game-booting #startup-status.startup-error {
  color: #8f1f0e;
}

/* The main script paints the LCD segments before storage completes. Reserve
   their exact footprint at first paint so that operation cannot resize the
   top panel. */
.game-booting .lcd {
  min-width: calc(
    3 * var(--cell-size) * 13 / 24
    + 2 * var(--cell-size) * 3 / 24
    + 2 * var(--cell-size) * 3 / 24
    + 2px);
  min-height: calc(
    var(--cell-size) * 23 / 24
    + 2 * var(--cell-size) * 2 / 24
    + 2px);
}

/* Event handlers are installed while IndexedDB is still opening. Keep the
   visibly loading chrome from accepting an action it cannot honor yet. */
.game-booting #difficulty-tabs,
.game-booting #top-right,
.game-booting #game-frame,
.game-booting #scores-nav,
.game-booting #backup {
  pointer-events: none;
}

/*-------JUSTICE (a just universe)-------*/

/* To the board's right, at game end only: a single chip counting the
   game's Justice survivals ("you won a forced coinflip"). Nothing pops
   up mid-game. Occupies no layout space, so the board never moves. */
#justice-live {
  position: absolute;
  left: calc(100% + 14px);
  top: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  pointer-events: none;
  z-index: 4;
}

#justice-live.justice-left {
  right: calc(100% + 14px);
  left: auto;
  align-items: flex-end;
}

#justice-live.justice-below {
  top: calc(100% + 8px);
  right: auto;
  left: 0;
  align-items: flex-start;
}

.justice-live-word {
  width: max-content;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #b3121b;
  border: 2px double #b3121b;
  border-radius: 4px;
  padding: 4px 8px;
  transform: rotate(-4deg);
  animation: justice-live-print 0.35s cubic-bezier(0.15, 1.35, 0.4, 1);
}

@keyframes justice-live-print {
  from { transform: rotate(-4deg) scale(2.2); opacity: 0; }
  to { transform: rotate(-4deg) scale(1); opacity: 1; }
}

#top-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--cell-size) / 6) calc(var(--cell-size) / 4);
  margin-bottom: calc(var(--cell-size) / 4);
  border: calc(var(--cell-size) / 12) solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  /* The whole panel restarts the game, not just the face button */
  cursor: pointer;
}

/*-------LCD COUNTERS-------*/

.lcd {
  display: flex;
  background: #000000;
  gap: calc(var(--cell-size) * 3 / 24);
  padding: calc(var(--cell-size) * 2 / 24) calc(var(--cell-size) * 3 / 24);
  border: 1px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

.lcd svg {
  width: calc(var(--cell-size) * 13 / 24);
  height: calc(var(--cell-size) * 23 / 24);
  display: block;
}

.lcd polygon { fill: #300000; }
.lcd polygon.on { fill: #ff0000; }

/*-------FACE BUTTON-------*/

#face-button {
  width: calc(var(--cell-size) * 26 / 24 + 2 * var(--bevel-size));
  height: calc(var(--cell-size) * 26 / 24 + 2 * var(--bevel-size));
  padding: 1px;
  background: var(--silver);
  border: var(--bevel-size) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
}

#face-button:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

#face-button svg { width: 100%; height: 100%; display: block; }

/*-------BOARD-------*/

#board {
  display: grid;
  grid-template-columns: repeat(var(--board-width), var(--cell-size));
  border: var(--bevel-size) solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  user-select: none;
}

/* Anchor for the after-game cursor-path overlay */
#board { position: relative; }

/* After-game cursor-path overlay: sits over the cells, never intercepts
   input. Sized and offset from JS to cover the board's border box (the
   geometry the trace's layout events measured). */
#path-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

/* Review mode board encodings. Colors come from REPLAY_ENCODINGS in
   game/replay-model.js, published as --replay-<key> custom properties, so the
   board, the legend swatches, and the canvas painter share one table.
   Solver deductions live on their own visual channel: dashed inner rings
   drawn by ::after. Player-action marks (choices, acted square) stay on
   box-shadow, so a square can carry both kinds at once without one mark
   silently replacing the other. */
.cell.replay-safe::after,
.cell.replay-chord-now::after,
.cell.replay-chord-after-marks::after,
.cell.replay-chord-after-marks-single::after,
.cell.replay-mine::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  pointer-events: none;
}

.cell.replay-safe::after {
  border: 2px dashed var(--replay-safe);
}

/* background-color (not the shorthand) so the gold action wash, which is a
   background-image, can stack on top when the same square was opened. */
.cell.replay-safe.replay-chord-open {
  background-color: var(--replay-chord-open);
}

.cell.replay-chord-now::after {
  border: 2px dashed var(--replay-chord-now);
}

/* Chordable once its proven mines are marked: the mark-mine + chord combo.
   A combo opening a single cell is a dominated option (never faster than
   that cell's raw click) and is drawn thin. */
.cell.replay-chord-after-marks::after {
  border: 2px dashed var(--replay-chord-after-marks);
}

.cell.replay-chord-after-marks-single::after {
  inset: 2px;
  border: 1px dashed var(--replay-chord-after-marks-single);
}

.cell.replay-mine::after {
  border: 2px dashed var(--replay-mine);
}

/* Mark-mine move: a mini flag badge on every unflagged proven mine, kept in
   the top-left corner so the mine glyph and the probability badge stay
   visible. */
.replay-flag-hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 1px;
  background: #ffffff;
  border-bottom-right-radius: 3px;
  pointer-events: none;
}

/* Three classes to outrank the later `.cell.hidden svg` flag sizing. */
.cell.hidden .replay-flag-hint svg {
  display: block;
  width: calc(var(--cell-size) * 0.34);
  height: calc(var(--cell-size) * 0.34);
}

/* Only the cell's own flag/mine glyph dims on a proven mine; the mark-mine
   hint (an svg inside its own span) stays at full strength. */
.cell.replay-mine > svg {
  opacity: 0.55;
}

.replay-prob {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 2px;
  background: #ffffff;
  border-top-left-radius: 3px;
  color: var(--replay-prob);
  font-family: Arial, sans-serif;
  font-size: calc(var(--cell-size) * 0.30);
  line-height: 1.3;
  font-weight: 700;
  -webkit-text-stroke: 0;
  pointer-events: none;
}

.cell.replay-choice {
  box-shadow: inset 0 0 0 3px var(--replay-choice);
}

/* The square the action was performed on (for a chord: the number that was
   clicked). Cells the action changed — e.g. the squares a chord opened —
   get a translucent gold wash instead of another ring. */
.cell.replay-trigger {
  box-shadow: inset 0 0 0 3px var(--replay-trigger), inset 0 0 0 5px #201500;
}

.cell.replay-choice.replay-trigger {
  box-shadow: inset 0 0 0 3px var(--replay-trigger), inset 0 0 0 5px #201500,
    inset 0 0 0 8px var(--replay-choice);
}

.cell.replay-selected {
  background-image: linear-gradient(
    color-mix(in srgb, var(--replay-selected) 38%, transparent),
    color-mix(in srgb, var(--replay-selected) 38%, transparent));
}

#replay-choice-areas {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

#replay-choice-areas svg {
  position: absolute;
  inset: 0 auto auto 0;
  overflow: visible;
}

.replay-area-leader {
  fill: none;
  stroke: var(--replay-area);
  stroke-width: 1.5;
}

.replay-area-label {
  position: absolute;
  width: max-content;
  padding: 2px 4px;
  border: 1px solid #8a72b6;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.96);
  color: #3f286c;
  box-shadow: 0 1px 2px rgba(35, 22, 58, 0.18);
  font: bold 10px/1.25 Arial, sans-serif;
  white-space: nowrap;
}

.cell {
  /* anchor for replay overlay rings and the mine-probability badge */
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Heavy blocky digits like the original bitmap numbers; the text stroke
     fattens glyphs even when no true black-weight font is installed */
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--cell-size) * 0.66);
  -webkit-text-stroke: calc(var(--cell-size) / 26) currentColor;
  line-height: 1;
  background: var(--silver);
}

.cell.hidden {
  border: var(--bevel-size) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}

.cell.pressed,
.cell.revealed {
  border: 0;
  border-top: 1px solid var(--bevel-dark);
  border-left: 1px solid var(--bevel-dark);
}

.cell svg {
  width: calc(var(--cell-size) * 0.72);
  height: calc(var(--cell-size) * 0.72);
  display: block;
}

.cell.hidden svg {
  /* flag icon sits inside the bevel */
  width: calc(var(--cell-size) * 0.62);
  height: calc(var(--cell-size) * 0.62);
}

.cell.mine-hit { background: #ff0000; }

/* The dots number display: the count lives only in the classic color,
   inherited from the cell's nN class via currentColor. */
.cell .num-dot {
  width: calc(var(--cell-size) * 0.45);
  height: calc(var(--cell-size) * 0.45);
  border-radius: 50%;
  background: currentColor;
}

/* Classic number colors */
.cell.n1 { color: #0000ff; }
.cell.n2 { color: #008000; }
.cell.n3 { color: #ff0000; }
.cell.n4 { color: #000080; }
.cell.n5 { color: #800000; }
.cell.n6 { color: #008080; }
.cell.n7 { color: #000000; }
.cell.n8 { color: #808080; }

/*-------RESULTS-------*/

/* Board offsets affect the board area, never the separate stats column. */
#game-area {
  width: 100%;
  min-width: 0;
  position: relative;
  transform: translate(
    var(--board-position-applied-x, 0px),
    var(--board-position-applied-y, 0px));
  margin-bottom: var(--board-position-flow-clearance, 0px);
}

#board-position-drag-surface {
  position: absolute;
  z-index: 20;
  border: 3px dashed #417ca4;
  background: rgba(65, 124, 164, 0.08);
  cursor: move;
  touch-action: none;
}

#board-position-drag-surface[hidden] { display: none; }

#board-position-drag-surface:focus-visible {
  outline: 3px solid #0d5d8c;
  outline-offset: 3px;
}

#game-area.trial-no-board {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#results {
  min-width: 0;
  width: 100%;
  text-align: left;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}
#results[hidden] { display: none; }

#results p {
  font-size: 13px;
  color: #000000;
  margin: 2px 0;
}

/* Full action explanations and rankings follow the board in normal flow. */
#result-analysis {
  box-sizing: border-box;
  width: calc(100% - 24px);
  margin: calc(14px + var(--result-overflow, 0px)) auto 4px;
  text-align: left;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}
#result-analysis:empty { display: none; }
.report-scope-control {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  border: 1px solid #8b8b8b;
  border-radius: 4px;
  background: #ffffff;
  padding: 6px 9px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.report-scope-control select {
  max-width: min(52vw, 260px);
  font: inherit;
  font-weight: normal;
}

#results .report-scope-control {
  width: min(100%, max-content);
  margin: 8px 0 0;
  padding: 5px 7px;
  font-size: 12px;
}
#result-analysis .result-verdicts {
  display: grid;
  gap: 10px;
}
#result-analysis .verdict-category {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  align-items: start;
  gap: 10px;
}
#result-analysis .verdict-category-title { grid-column: 1 / -1; margin-bottom: 0; }
#result-analysis .verdict-block {
  margin: 0;
  padding: 10px 14px;
}
#result-analysis .verdict-title {
  margin-bottom: 5px;
  font-size: 15px;
}
#result-analysis .verdict-body,
#result-analysis .verdict-details,
#result-analysis .verdict-facts {
  font-size: 14px;
  line-height: 1.5;
}
#result-analysis .evaluation-position { margin-top: 10px; }
#result-analysis .evaluation-legend {
  margin-top: 7px;
  font-size: 12px;
}

#trial-stage {
  max-width: 28em;
  margin: 56px auto 16px;
  text-align: center;
}

#trial-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #000000;
  line-height: 1.45;
  white-space: pre-line;
}

#trial-start-btn {
  margin-top: 14px;
  font: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 20px;
}

/* Outcome, mode, and end date each on their own line */
#result-summary {
  font-weight: bold;
  line-height: 1.3;
  white-space: pre-line;
  color: #000000;
}
.result-summary-lead { font-size: 17px; }
.result-summary-context {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}
.result-summary-when { font-variant-numeric: tabular-nums; }

/* The game's stats as a small label/value tablechart */
#stats-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) fit-content(55%);
  gap: 0 10px;
  margin: 4px 0;
  font-size: 12px;
}
#stats-grid .stat-label {
  text-align: left;
  color: #000000;
}
#stats-grid .stat-value {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  color: #000000;
}
#stats-grid.immediate-stats {
  align-items: baseline;
  margin-top: 6px;
}
#stats-grid.immediate-stats .stat-label {
  font-size: 12px;
  font-weight: bold;
  color: #000000;
}
#stats-grid.immediate-stats .stat-value {
  font-size: 22px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.result-loading {
  margin-top: 7px;
  color: #000000;
  font-size: 11px;
}

.latest-win-stats-title {
  margin: 8px 0 2px;
  font-size: 11px;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Game-end evaluation (docs/product/game-end-evaluation.md): action analysis
   and the Justice recap. The title keeps the results area's chunky face;
   the justification prose switches to a
   plain face for legibility. Accent colors follow the endings-chart
   palette; the Justice block echoes the Justice survival chip (double
   border, its red). */
.result-verdicts { margin: 6px 0; }
.verdict-block {
  border: 2px solid #888888;
  border-left-width: 6px;
  border-radius: 4px;
  background: #f4f4f0;
  padding: 6px 8px;
  margin: 6px 0;
}
.verdict-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.verdict-body,
.verdict-details,
.verdict-facts {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000000;
  line-height: 1.4;
}
.verdict-facts {
  display: grid;
  gap: 2px;
}
.verdict-fact {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
}
.verdict-fact-label {
  font-weight: bold;
  color: #000000;
}
.verdict-details { margin-top: 4px; color: #000000; }
.verdict-details div { margin: 2px 0; }
.verdict-aggregate > summary {
  margin-bottom: 0;
  cursor: pointer;
}
.verdict-aggregate[open] > summary { margin-bottom: 7px; }
.verdict-aggregate-instances {
  border-top: 1px solid rgba(22, 130, 184, 0.28);
}
.verdict-aggregate-instance {
  padding: 9px 2px 4px;
}
.verdict-aggregate-instance + .verdict-aggregate-instance {
  border-top: 1px solid rgba(22, 130, 184, 0.2);
}
.verdict-mine { border-color: #1a1a1a; background: #efefef; }
.verdict-mine .verdict-title { color: #000000; }
.verdict-chord { border-color: #7a3ca8; background: #f3edf8; }
.verdict-chord .verdict-title { color: #7a3ca8; }
.verdict-needless { border-color: #b82c14; background: #f9efec; }
.verdict-needless .verdict-title { color: #b82c14; }
.verdict-forced { border-color: #e07020; background: #faf1e8; }
.verdict-forced .verdict-title { color: #a85510; }
.verdict-angel { border-color: #d4a017; background: #fbf6e4; }
.verdict-angel .verdict-title { color: #8a6a0a; }
.verdict-unjudged { border-color: #999999; background: #f2f2f2; }
.verdict-unjudged .verdict-title { color: #000000; }
.verdict-mistake { border-color: #b82c14; background: #fff8f5; }
.verdict-mistake .verdict-title { color: #8f1f0e; }
.verdict-category { min-width: 0; }
.verdict-category-title {
  margin: 4px 0 5px;
  border-bottom: 2px solid #222222;
  padding: 0 2px 3px;
  font-size: 16px;
  line-height: 1.2;
}
.verdict-category-gameLoss .verdict-category-title { color: #8f1f0e; border-color: #8f1f0e; }
.verdict-category-gameRisk .verdict-category-title { color: #9a4b00; border-color: #d06a00; }
.verdict-category-timeLoss .verdict-category-title { color: #075f8f; border-color: #1682b8; }
.verdict-category-lifeMaximization .verdict-category-title { color: #66308f; border-color: #8651ad; }
.verdict-category-measurementNotes .verdict-category-title { color: #000000; border-color: #777777; }
.verdict-category-gameLoss .verdict-block {
  border-color: #8f1f0e;
  background: #f9efec;
}
.verdict-category-gameRisk .verdict-block {
  border-color: #d06a00;
  background: #fff7ed;
}
.verdict-category-gameRisk .verdict-title { color: #8f4800; }
.verdict-category-timeLoss .verdict-block {
  border-color: #1682b8;
  background: #f1f8fc;
}
.verdict-category-timeLoss .verdict-title { color: #075f8f; }
.verdict-category-lifeMaximization .verdict-block {
  border-color: #8651ad;
  background: #f8f3fc;
}
.verdict-category-lifeMaximization .verdict-title { color: #66308f; }
.verdict-category-measurementNotes .verdict-block {
  border-color: #777777;
  background: #f5f5f5;
}
.verdict-category-measurementNotes .verdict-title { color: #000000; }
.evaluation-position { margin-top: 7px; }
.evaluation-crop-note {
  margin: 0 0 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #000000;
}
.evaluation-board-scroll {
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border: 1px solid #b8b8b8;
  background: #d8d8d8;
}
.evaluation-board {
  display: block;
  image-rendering: pixelated;
}
.evaluation-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  font: 11px/1.35 Arial, Helvetica, sans-serif;
  color: #000000;
}
.evaluation-key::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 2px solid #d17a00;
  vertical-align: -1px;
}
.evaluation-key-selected::before { border-color: #d00000; }
.evaluation-key-safe-reveal::before { border-color: #008000; }
.evaluation-key-lower-risk-reveal::before,
.evaluation-key-higher-modeled-life-reveal::before { border-color: #0066cc; }
.trial-action-report {
  margin: 5px 0 8px 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.trial-action-report > summary {
  cursor: pointer;
  color: #8f1f0e;
  font-size: 12px;
  font-weight: bold;
}
.verdict-justice {
  border-style: double;
  border-width: 4px;
  border-color: #b3121b;
  background: #fdf4ee;
}
.verdict-justice .verdict-title { color: #b3121b; letter-spacing: 2px; }

/*-------TOP-RIGHT SCREEN CHROME (session tags + settings)-------*/

/* Options, final stats, and the legend own one grid column. Its scroll
   stays independent of the board and history, regardless of content height. */
#game-sidebar {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--game-sidebar-docked-width, var(--game-sidebar-width));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 8px;
  border: 0;
  margin: 0;
  background: #fff;
}
/* Game setup packs into wrapping rows: the two selects share a row when the
   column is wide enough, then tags and settings follow, right-aligned. */
#top-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 10px;
  text-align: right;
  font-size: 11px;
  color: #000000;
}
#game-sidebar-button, #game-sidebar-close {
  border: 1px solid #c5d0da;
  border-radius: 3px;
  background: #f7f9fb;
  padding: 4px 8px;
  color: #000000;
  font: 11px Arial, sans-serif;
  cursor: pointer;
}
#game-sidebar-button[hidden], #game-sidebar-close[hidden] { display: none; }
#game-sidebar-close { align-self: flex-end; }
#page-layout.compact-sidebar { grid-template-columns: auto minmax(0, 1fr); }
/* Game data's own full-height column beside the board column. It is
   reserved before a win and stays empty during play and after losses. */
#page-layout.game-data-docked {
  grid-template-columns: auto minmax(0, 1fr) var(--game-data-docked-width) var(--game-sidebar-docked-width);
}
#game-data-column { display: none; }
#page-layout.game-data-docked #game-data-column {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100dvh - 24px);
  overflow-y: auto;
}
#page-layout.game-data-docked #game-sidebar { grid-column: 4; }
#game-data-column > .board-time-profile-host {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
#game-data-column .board-time-profile { flex: 1 1 auto; height: auto; }
#game-sidebar[popover] { display: none; }
#game-sidebar[popover]:popover-open {
  display: flex;
  position: fixed;
  inset: 12px 12px auto auto;
  width: min(calc(100vw - 24px), max(420px, 45vw));
  padding: 12px;
  border: 1px solid #a5b7c3;
  border-radius: 5px;
  box-shadow: 0 4px 20px #0002;
}

#play-mode,
#board-generator {
  flex: 1 1 135px;
  min-width: 0;
  text-align: right;
}

#play-mode label,
#board-generator label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #000000;
  font-size: 11px;
}

#play-mode-select,
#board-generator-select {
  min-width: 0;
  width: 100%;
  font: inherit;
  font-size: 11px;
  color: #000000;
  background: #f7f9fb;
  border: 1px solid #c5d0da;
  padding: 2px 4px;
}

#board-generator-select:disabled {
  color: #000000;
  background: #e3e8ed;
  border-style: dashed;
}

#trial-progress,
#pregen-progress,
#endgame-drill-info {
  margin-top: 4px;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
}

#trial-progress button {
  margin-left: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: normal;
  cursor: pointer;
}

.trial-verdict {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  text-align: left;
  line-height: 1.4;
  white-space: normal;
  margin: 0;
}

#trial-verdict {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #000000;
  line-height: 1.45;
  white-space: normal;
  margin: 12px 0 0;
}

.trial-session-summary {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0 0 20px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #000000;
}

.trial-session-summary > * {
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

.trial-meet-table {
  display: grid;
  grid-template-columns: 36px 48px 40px 72px 56px;
  gap: 2px 8px;
  margin: 8px 0;
  font-size: 12px;
}

.trial-meet-head {
  color: #000000;
  font-size: 11px;
}

.trial-warmup-note {
  font-size: 12px;
  color: #000000;
  line-height: 1.4;
}

.trial-identity {
  flex: 1 1 250px;
  min-width: 250px;
  padding: 8px 10px;
  border: 1px solid #e0e6ec;
  background: #fbfcfd;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.trial-identity summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
}

.trial-identity-body {
  margin-top: 6px;
  font-size: 12px;
}

.overlay-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 8px;
  font-size: 10px;
}

.overlay-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  vertical-align: middle;
}

.overlay-chart-label {
  margin-top: 8px;
  font-size: 11px;
}

.trial-speed-bucket {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  font-size: 11px;
  color: #000000;
}

.trial-speed-bucket input[type="range"] {
  width: 140px;
  margin: 0;
}

/* The measured music state: shown while the machine is playing audio
   (asked of the local base system, see docs/product/per-game-stats.md
   "Music playing").
   Display only — a measured fact, not a player tag, so no x and no
   click; olive (the measured-fact accent of the guess chips), never
   the player-tag blue. */
#music-indicator {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  background: #eef2e4;
  border: 1px solid #6b7a4e;
  padding: 2px 8px;
}

#music-indicator[hidden] { display: none; }

/* Shown only when the archive folder is paused or failing; a click resumes
   or retries. Error red stays legible on its light fill. */
#archive-chip {
  font: inherit;
  font-size: 11px;
  font-weight: bold;
  color: #8d3030;
  background: #fff5f5;
  border: 1px solid #c77;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}

#archive-chip[hidden] { display: none; }

#states {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 6px;
}

#states:has(> #states-menu:not([hidden])) { flex-basis: 100%; }

#states-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

#states-chips:empty { display: none; }

/* An active state: the me-row highlight (bold black on light blue), with
   its trailing x signaling one click takes it off. */
.state-chip {
  font: inherit;
  font-size: 11px;
  color: #000000;
  font-weight: bold;
  background: #d8ebfa;
  border: 1px solid #8aa0b5;
  border-radius: 9px;
  padding: 2px 8px;
  cursor: pointer;
}

.state-chip:hover { background: #c4dff5; }

/* The two top-right openers are real, obvious buttons (2026-08-23; they
   were dotted-underline text before). "settings" is a plain link to the
   settings page dressed as the same button; "+ state" holds its pressed
   look via .open while its menu is up. The settings page's return-to-game
   links wear the identical dress — the shared piece of titlebar. */
#states-add-btn,
#settings-btn,
#self-check-btn,
#training-btn,
#problems-btn,
.return-to-game {
  font: inherit;
  font-size: 11px;
  color: #000000;
  background: #f7f9fb;
  border: 1px solid #c5d0da;
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

#states-add-btn:hover,
#settings-btn:hover,
#self-check-btn:hover,
#training-btn:hover,
#problems-btn:hover,
.return-to-game:hover { background: #e3edf6; }

#states-add-btn.open {
  background: #dcebf7;
  border-color: #8aa0b5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* The menu of inactive states: click a name to put it on, its x to delete
   it from the list; the field at the bottom creates (and puts on) a new
   state. */
#states-menu {
  flex: 1 0 100%;
  padding: 6px 8px;
  background: #f7f9fb;
  border: 1px solid #e0e6ec;
}

#states-menu[hidden] { display: none; }

#states-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

#states-menu-head span {
  color: #000000;
  font-size: 11px;
  font-weight: bold;
}

#states-close {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: #000000;
  background: none;
  border: none;
  padding: 1px 4px;
  cursor: pointer;
}

#states-close:hover { background: #e3edf6; }

.state-option {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 11px;
  color: #000000;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-align: right;
}

.state-option:hover {
  color: #000000;
  background: #eaf2fa;
}

.state-remove {
  margin-left: 5px;
  color: #b05050;
  font-weight: bold;
}

#states-add-form { margin-top: 5px; }

#states-add-form input {
  width: 100px;
  font-size: 11px;
  color: #000000;
  border: 1px solid #cccccc;
}

#states-add-form input::placeholder { color: #000000; opacity: 1; font-style: italic; }

#states-add-form button {
  font: inherit;
  color: #000000;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  text-decoration: underline dotted;
}

#states-status {
  margin: 4px 0 0;
  color: #b05050;
}

/* On narrow viewports the formerly fixed chrome enters normal flow. This
   guarantees that it and the board controls cannot cover one another; the
   board-position preference is still applied inside the remaining space. */
@media (max-width: 720px) {
  #top-right {
    position: static;
    width: 100%;
    margin-bottom: 14px;
    justify-content: center;
    text-align: center;
  }

  #play-mode,
  #board-generator {
    text-align: center;
  }

  #states,
  #states-chips {
    justify-content: center;
  }
}

/*-------SETTINGS PAGE-------*/

body.settings-page {
  min-height: 100vh;
  padding: 0;
  background: #f3f6f8;
  color: #000000;
  text-align: left;
}

body.settings-page input[type="checkbox"],
body.settings-page input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: #417ca4;
}

#settings-titlebar {
  padding: 11px 24px;
  border-bottom: 1px solid #dbe3e8;
  background: #ffffff;
}

#settings-titlebar-name {
  color: #000000;
  font-size: 13px;
  font-weight: bold;
}

#settings-layout {
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 30px 0 56px;
}
#settings-status, #settings-column { align-self: stretch; }

#settings-page-header {
  margin-bottom: 28px;
}

body.settings-page .return-to-game {
  padding: 7px 12px;
  border-color: #b9c8d2;
  background: #ffffff;
  color: #000000;
  font-size: 12px;
}

#settings-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
}

#settings-heading h1 {
  margin: 0;
  color: #000000;
  font-size: 30px;
  line-height: 1.15;
}

#settings-heading p {
  margin: 0;
  color: #000000;
  font-size: 13px;
}

#settings-status {
  margin: 0 0 18px;
  border: 1px solid #d6a2a2;
  border-radius: 7px;
  background: #fff5f5;
  padding: 12px 14px;
  color: #8d3030;
  font-size: 13px;
}

/* 760px keeps a switch row's name, hint, and checkbox on one line. */
#settings-column {
  columns: 760px;
  column-gap: 18px;
}
#settings-column > .settings-group {
  break-inside: avoid;
  margin-bottom: 18px;
}

.settings-group {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  border: 1px solid #d9e2e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 27px 30px;
  box-shadow: 0 1px 2px rgba(34, 56, 70, 0.04);
}

.settings-group-heading {
  margin: 3px 0 0;
  color: #000000;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.settings-group-body {
  min-width: 0;
}

.setting-row {
  min-height: 58px;
  border-bottom: 1px solid #e8edf0;
}

.setting-toggle-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr) auto;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
  cursor: pointer;
}

.setting-toggle-row > input {
  grid-column: 3;
}

.setting-toggle-row:not(:has(.setting-describe)) > .setting-name {
  grid-column: 1 / 3;
}

.setting-choice-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
  align-items: center;
  gap: 24px;
  padding: 10px 0;
}

.settings-group-body > .setting-row:last-child {
  border-bottom: none;
}

.setting-name {
  min-width: 0;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.35;
}

.setting-describe {
  color: #000000;
  font-size: 13px;
  line-height: 1.45;
}

.setting-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setting-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #cdd8df;
  border-radius: 7px;
  background: #ffffff;
  padding: 8px 10px;
  color: #000000;
  font-size: 13px;
  cursor: pointer;
}

.setting-choice:has(input:checked) {
  border-color: #7ba3bc;
  background: #edf5fa;
  color: #000000;
}

.settings-subgroup {
  margin-top: 22px;
  border-top: 1px solid #dfe7eb;
  padding-top: 22px;
}

.settings-subheading {
  margin: 0 0 13px;
  color: #000000;
  font-size: 13px;
  font-weight: bold;
}

.setting-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.setting-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border: 1px solid #dce4e9;
  border-radius: 7px;
  background: #f9fbfc;
  padding: 10px 12px;
  cursor: pointer;
}

.setting-option:has(input:checked) {
  border-color: #b5cbd8;
  background: #f1f7fa;
}

.setting-option .setting-name {
  font-size: 13px;
  font-weight: normal;
}

.setting-row:focus-within,
.setting-option:focus-within {
  outline: 2px solid #417ca4;
  outline-offset: 2px;
}

#settings-page-footer {
  margin-top: 28px;
}

@media (max-width: 760px) {
  #settings-layout {
    width: calc(100% - 28px);
    padding-top: 20px;
  }

  #settings-heading {
    display: block;
    margin-top: 26px;
  }

  #settings-heading h1 {
    font-size: 26px;
  }

  #settings-heading p {
    margin-top: 7px;
  }

  .settings-group {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 22px 20px;
  }

  .settings-group-heading {
    margin: 0;
  }

  .setting-toggle-row {
    grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1.2fr) auto;
    gap: 14px;
  }

  .setting-choice-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 0;
  }

  .setting-options-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #settings-titlebar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .setting-toggle-row {
    grid-template-columns: minmax(100px, 0.8fr) minmax(120px, 1.2fr) auto;
    gap: 10px;
  }
}

/* One ranked-list column per time window; the new score is bolded */
#result-ranks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: calc(8px + var(--result-overflow, 0px));
  font-size: 13px;
  color: #000000;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}

/* Normal results are sectioned by meaning. Trial summaries still use the
   legacy direct flex stream above; regular win/score views use one vertical
   stack whose children each wrap internally, so unrelated chart families
   can never become accidental visual neighbors. */
#result-ranks.sectioned-results {
  display: block;
  width: 100%;
}

.result-chart-section {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 26px;
}

.result-chart-section:last-child { margin-bottom: 0; }

.result-chart-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  width: calc(100% - 24px);
  margin: 0 auto 10px;
  border-bottom: 1px solid #d9e2e8;
  padding-bottom: 4px;
}

.result-chart-section-title {
  width: calc(100% - 24px);
  margin: 0 auto 10px;
  border-bottom: 1px solid #d9e2e8;
  padding-bottom: 4px;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.result-chart-section-head .result-chart-section-title {
  width: auto;
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.result-chart-section-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

/* Float the tall summary so successive rows of time/streak tables can use
   the space beside it, then continue at full width underneath. */
.result-chart-section-tables > .result-chart-section-items {
  display: flow-root;
  text-align: left;
  font-size: 0;
  margin-bottom: -18px;
}
.result-chart-section-tables > .result-chart-section-items > .rank-list {
  display: inline-block;
  vertical-align: top;
  margin: 0 18px 18px 0;
}
.result-chart-section-tables > .result-chart-section-items > .recent-placements {
  float: left;
}

.result-chart-section-boardTables > .result-chart-section-items { justify-content: flex-start; }

.result-chart-section-boardTables > .result-chart-section-title {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.board-metric-status {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  text-align: left;
  font-size: 12px;
  color: #000000;
}
.board-metric-backfill { align-self: flex-start; font-size: 12px; }
.board-metric-backfill-panel {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: #000000;
}
.board-metric-backfill-panel progress { width: 120px; height: 12px; }
.board-metric-backfill-error { flex-basis: 100%; color: #a52121; }

.board-time-profile-host {
  flex: 0 0 100%;
  min-width: 0;
}
/* --band-x is the band center measured from the chart's left edge. Layout
   sets it from the labels' one-line widths; every horizontal position on
   both sides (band, leaders, dots, labels, side headings) derives from it. */
.board-time-profile {
  --band-x: 50%;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #ffffff;
  color: #000000;
  font: 400 12px Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 48px);
  text-align: left;
  container-type: inline-size;
}
.board-time-profile figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.board-time-profile h4 { margin: 0; font-size: 16px; font-weight: 400; color: #000000; }
.board-time-profile .chart-help-label { font-weight: 400; }
.board-time-profile-sides {
  display: grid;
  grid-template-columns: max(0px, calc(var(--band-x) - 30px)) minmax(0, 1fr);
  column-gap: 60px;
  margin-bottom: 2px;
  color: #000000;
  font-size: 14px;
  flex-shrink: 0;
}
.board-time-profile-sides > span:first-child { text-align: right; }
.board-trait-line-view { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.board-trait-line { position: relative; width: 100%; }
.board-trait-line > svg {
  position: absolute;
  top: 0;
  left: calc(var(--band-x) + 16px);
  width: 14px;
  height: 100%;
  overflow: visible;
}
.board-trait-line > svg[data-side="performance"] {
  left: calc(var(--band-x) - 30px);
  transform: scaleX(-1);
}
.board-trait-line-axis {
  position: absolute;
  left: calc(var(--band-x) - 16px);
  width: 32px;
  border-radius: 4px;
  background: linear-gradient(#d8f0da, #d9ebfa 50%, #fad8d8);
  box-shadow: 0 0 0 1px #cad9e0;
}
.board-trait-line-tick {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  color: #000000;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.board-trait-line-tick::before, .board-trait-line-tick::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 1px;
  background: #56798b;
}
.board-trait-line-tick::before { left: 0; }
.board-trait-line-tick::after { right: 0; }
.board-trait-line-connector {
  fill: none;
  stroke: #58798d;
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.board-trait-line-connector[data-displaced="true"] {
  stroke: #355d75;
  stroke-width: 2;
}
.board-trait-line-dot {
  box-sizing: border-box;
  position: absolute;
  left: calc(var(--band-x) + 16px);
  width: 5px;
  height: 5px;
  border: 1.4px solid #355d75;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.board-trait-line-dot[data-side="performance"] { left: calc(var(--band-x) - 16px); }
.board-trait-line .board-trait-line-label {
  display: flex;
  position: absolute;
  left: calc(var(--band-x) + 30px);
  max-width: max(0px, calc(100% - var(--band-x) - 30px));
  transform: translateY(-50%);
  font-size: inherit;
}
.board-trait-line .board-trait-line-label[data-side="performance"] {
  left: auto;
  right: calc(100% - var(--band-x) + 30px);
  max-width: max(0px, calc(var(--band-x) - 30px));
  justify-content: flex-end;
}
.board-time-profile .board-trait-name { white-space: normal; }
.board-time-profile .board-trait-value,
.board-time-profile .board-trait-scope { white-space: nowrap; }
.board-time-profile.game-data-values-hidden .board-trait-value { display: none; }
.board-time-profile .board-trait-value { font-variant-numeric: tabular-nums; color: inherit; }
.board-trait-line-measuring .board-trait-line-label,
.board-trait-line-measuring .board-trait-line-label[data-side="performance"] { max-width: none; }
.board-time-profile.board-trait-line-measuring .board-trait-line-label .chart-help-label,
.board-trait-line-measuring .board-trait-line-label .board-trait-name,
.board-trait-line-measuring .board-time-profile-sides > span { white-space: nowrap; }
.board-trait-line-measuring .board-time-profile-sides > span { justify-self: start; }
.board-trait-line .board-trait-line-label .chart-help-label {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 1px 2px;
  border: 0;
  border-radius: 0;
  background: var(--trait-tint);
  color: inherit;
  text-align: left;
  text-decoration: none;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.board-trait-line .board-trait-line-label[data-side="performance"] .chart-help-label { text-align: right; }
.board-trait-line-label .chart-help-label:hover,
.board-trait-line-label .chart-help-label:focus-visible {
  outline: 1px solid #819eaf;
  outline-offset: 2px;
}
.board-time-profile select { font: inherit; color: inherit; max-width: 100%; }
.board-time-profile button:not(.chart-help) {
  font: inherit;
  color: #000000;
  background: #f7f9fb;
  border: 1px solid #c5d0da;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}
.board-time-profile button:disabled { background: #e3e8ed; border-style: dashed; cursor: default; }
.board-time-profile figcaption > button { margin-left: auto; }
.game-data-controls, .game-data-history-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  flex-shrink: 0;
  padding-top: 5px;
}
.game-data-controls { border-top: 1px solid #d9e2e8; }
.game-data-controls label { display: inline-flex; align-items: center; gap: 3px; }
.game-data-controls input { margin: 0; }
.game-data-config {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
.game-data-config table { border-collapse: collapse; width: 100%; }
.game-data-config th, .game-data-config td { font-weight: 400; padding: 5px 2px; border-bottom: 1px solid #d9e2e8; text-align: center; }
.game-data-config td:first-child, .game-data-config th:first-child { text-align: left; }
.game-data-config th label { white-space: nowrap; }
.game-data-config th input { margin-inline: 0 2px; }
.game-data-config > button { align-self: flex-start; }
.game-data-history { flex: 1; min-height: 0; overflow: auto; }
.game-data-history table { border-collapse: collapse; width: 100%; font-size: inherit; }
.game-data-history caption { text-align: left; padding: 8px 0; }
.game-data-history th, .game-data-history td { font-weight: 400; text-align: right; padding: 5px; border-bottom: 1px solid #d9e2e8; white-space: nowrap; }
.game-data-history th:first-child, .game-data-history td:first-child { text-align: left; }
.game-data-history thead { color: #000000; }

.motion-metric-group {
  flex-basis: 100%;
}

.motion-metric-group > .metrics-group-head {
  width: calc(100% - 24px);
  margin: 0 auto 6px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 2px;
}

.motion-metric-group-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

/* Spatial pace bias: a 3x3 heatmap of the board's regions. The residual
   values are the data and stay the most legible thing in each cell; the
   click counts are secondary. */
.spatial-bias-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 110px));
  gap: 3px;
  justify-content: center;
  margin: 4px auto;
}

.spatial-bias-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fafafa;
}

.spatial-bias-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #000000;
}

.spatial-bias-count {
  font-size: 10px;
  color: #000000;
}

.spatial-bias-caption {
  max-width: 560px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 11px;
  color: #000000;
}

#pregen-charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: calc(8px + var(--result-overflow, 0px));
  color: #000000;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}

#pregen-charts[hidden] { display: none; }

.pregen-chart-panel,
.pregen-progress-panel {
  width: 270px;
  text-align: left;
}

.pregen-chart-panel > h4,
.pregen-progress-panel > h4 {
  margin: 0 0 3px;
  font-size: 12px;
  color: #000000;
}

.pregen-progress-panel table {
  width: 100%;
  border-collapse: collapse;
  color: #000000;
  font: 12px ui-monospace, "Cascadia Mono", "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.pregen-progress-panel th,
.pregen-progress-panel td {
  padding: 2px 6px;
  border-bottom: 1px solid #eeeeee;
  text-align: right;
}

.pregen-progress-panel th {
  color: #000000;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: normal;
}

.pregen-progress-panel tr.loss td { color: #aa3333; }
.pregen-progress-panel tr.me td {
  color: #000000;
  background: #d8ebfa;
  font-weight: bold;
}
.pregen-progress-outcome {
  font-family: Arial, sans-serif;
  font-size: 10px;
}

.pregen-chart-waiting {
  box-sizing: border-box;
  width: 270px;
  height: 210px;
  margin: 4px 0 0;
  border: 1px solid #dddddd;
  display: grid;
  place-items: center;
  color: #000000;
  background: #fbfbfb;
  font: bold 12px Arial, sans-serif;
}

.rank-list {
  text-align: left;
  font-size: 12px;
  color: #000000;
}

.rank-list h4 {
  margin: 0 0 3px;
  font-size: 14px;
  color: #000000;
}

/* Rank, time, age-count, and age-unit line up as four columns. Rank, time,
   and age-count are right-aligned so widths like #9/#10, 5.961s/10.220s, and
   0s/15m/1.0h stay vertically comparable. Spacing uses cell padding, not gaps, so
   the me-row highlight reads as one continuous bar. Auto tracks at 100%
   width stretch each row to fill the list (whose width the heading sets)
   instead of clumping left. */
.rank-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, auto);
}

.rank-row { display: contents; }

.rank-row span {
  white-space: nowrap;
  padding: 0 4px;
}

.rank-row .rank-cell,
.rank-row .time-cell,
.rank-row .age-num-cell {
  text-align: right;
}

/* Timings use tabular fixed-width glyphs so decimals compare vertically. */
.rank-row .time-cell,
.rank-row .avg-cell {
  font-family: ui-monospace, "Cascadia Mono", "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Counts end on one shared edge and every unit letter starts at the same
   x right beside them (left-aligned, 2026-08-30). Right-aligning units
   let wide glyphs ("m") hug their count while narrow ones ("h") floated
   apart — the misalignment complaint. */
.rank-row .age-num-cell { padding-right: 0; }
.rank-row .age-unit-cell {
  min-width: 2ch;
  padding-left: 2px;
  text-align: left;
}

/* Markless games (no flags placed): a small (m) rides before the time
   wherever an individual game's time is shown. Olive-branch green, fixed
   explicitly so it survives the me-row's black text override. */
.markless-time::before {
  content: "(m) ";
  font-size: 0.75em;
  color: #2e7d32;
}

/* The game that just finished says "this" across the whole age area,
   right-flush with the other rows' age labels */
.rank-row .age-just-cell {
  grid-column: span 2;
  text-align: right;
}

/* Scatter plots: derived mouse metrics vs outcomes, this game highlighted.
   The charts carry no titles; the axis labels and tick values render at
   what was the title size (12px bold) and do the naming themselves. */
.scatter-svg {
  width: 270px;
  height: 210px;
  display: block;
  margin-top: 4px;
}
.scatter-plot { fill: #fbfbfb; stroke: #dddddd; }
.scatter-grid { stroke: #eeeeee; }
.scatter-minor { stroke: #bbbbbb; }
.scatter-tick {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: #000000;
}
.tick-x { text-anchor: middle; }
.tick-y { text-anchor: end; }
/* Dots take the age-unit palette (same as rank-list ages); the current game
   is the black-ringed dot with its today-rank tag beside it. */
.scatter-svg .age-dot-s  { fill: #39ff14; }
.scatter-svg .age-dot-m  { fill: #008000; }
.scatter-svg .age-dot-h  { fill: #0000ff; }
.scatter-svg .age-dot-d  { fill: #ff0000; }
.scatter-svg .age-dot-w  { fill: #000080; }
.scatter-svg .age-dot-mo { fill: #800000; }
.scatter-svg .age-dot-y  { fill: #008080; }
.scatter-me { stroke: #000000; stroke-width: 1; }
/* The y = x floor on clicks vs 3BV: a game on the line used only the
   board's minimum clicks */
.scatter-ideal { stroke: #b0b8c0; stroke-dasharray: 4 3; }
/* The Theil–Sen trend lines on the average charts, both dashed (dashing
   marks them as fits, not data) and colored by the age palette's
   color:recency sense: the all-data fit in the years teal (deep
   history), today's fit in the hours blue. Same hexes as the age dots
   and age-unit text. */
.scatter-trend { fill: none; stroke-width: 1.3; opacity: 0.85; stroke-dasharray: 5 3; }
.trend-all { stroke: #008080; }
.trend-today { stroke: #0000ff; }
.scatter-me-label {
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  fill: #000000;
}
.scatter-outlier-note {
  font-family: Arial, sans-serif;
  font-size: 9px;
  fill: #000000;
  text-anchor: end;
}
.scatter-me-label.flip-left { text-anchor: end; }
.scatter-axis-label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: #000000;
  text-anchor: middle;
}
.scatter-legend {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: #000000;
}
.scatter-legend .legend-item { margin-left: 8px; }

/* Recent placements ("ranks won in session"): one row per longer chart,
   listing the top-tenth ranks earned within the session. */
.recent-placements-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, auto);
}

.recent-placements-grid .recent-window-cell { text-align: right; }
.recent-placements-grid .recent-ranks-cell { max-width: 28ch; white-space: normal; }

.recent-placements-grid .recent-of-cell {
  font-size: 11px;
  color: #000000;
}

/* Every reported achievement gets its rank treatment, including earlier
   games. Only the current game gets the blue identity edge and "this". */
.recent-placements-grid .recent-rank-run {
  padding: 0 2px;
  background: var(--rank-tint);
  color: #000000;
  font-weight: bold;
}

.recent-placements-grid .recent-current-rank {
  box-shadow: inset 2px 0 #245b8b;
  padding-left: 4px;
}

.recent-placements-grid .recent-current-label { padding: 0; font-size: 10px; }
.recent-standing-cell { font-size: 11px; }

.recent-placements-none {
  padding: 0 4px;
  font-size: 11px;
  color: #000000;
}

/* History counts stay centered; selected ranks split their full pool and
   percentage across the same reserved footer line. */
.rank-total {
  padding: 0 4px;
  font-size: 11px;
  color: #000000;
  text-align: center;
}

.rank-total.rank-standing {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
}

.rank-standing-label { font-weight: bold; }

/*-------SELF-CHECK PAGE (self-check.html)-------*/

body.self-check-page {
  min-height: 100vh;
  padding: 0;
  background: #f3f6f8;
  color: #000000;
  text-align: left;
}

#self-check-titlebar {
  padding: 11px 24px;
  border-bottom: 1px solid #dbe3e8;
  background: #ffffff;
}

#self-check-titlebar-name {
  font-size: 13px;
  font-weight: bold;
}

/* Block flow instead of the game page's centered flex column, so every card
   and the test box span the full width. */
#self-check-layout {
  display: block;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 30px 0 56px;
}

body.self-check-page .return-to-game {
  padding: 7px 12px;
  border-color: #b9c8d2;
  background: #ffffff;
  font-size: 12px;
}

#self-check-header h1 {
  margin: 34px 0 0;
  font-size: 30px;
  line-height: 1.15;
}

/* The test shows nothing but its box. */
body.vigilance-running #self-check-titlebar,
body.vigilance-running #self-check-header {
  display: none;
}

#self-check-status {
  margin: 18px 0 0;
  border: 1px solid #d6a2a2;
  border-radius: 7px;
  background: #fff5f5;
  padding: 12px 14px;
  color: #8d3030;
  font-size: 13px;
}

.self-check-card {
  margin-top: 18px;
  border: 1px solid #d9e2e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 22px 26px;
}

.self-check-card h2 {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.3;
}

.self-check-card p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}

.self-check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.self-check-actions button {
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  background: #edf5fa;
  border: 1px solid #7ba3bc;
  border-radius: 7px;
  padding: 10px 18px;
  cursor: pointer;
}

.self-check-actions button:hover { background: #dcebf7; }

/* Unavailable stays black: the dashed outline marks it, not faded text. */
.self-check-actions button:disabled {
  background: #ffffff;
  border-style: dashed;
  cursor: not-allowed;
}

#sleepiness-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.sleepiness-choice {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid #cdd8df;
  border-radius: 7px;
  background: #ffffff;
  padding: 8px 12px;
  color: #000000;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.sleepiness-choice b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.sleepiness-choice:hover { background: #f1f7fa; }

.sleepiness-choice[aria-checked="true"] {
  border-color: #417ca4;
  background: #dcebf7;
  box-shadow: inset 0 0 0 1px #417ca4;
}

.self-check-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: bold;
}

.self-check-field input {
  font: inherit;
  font-weight: normal;
  color: #000000;
  border: 1px solid #b9c8d2;
  border-radius: 5px;
  padding: 6px 8px;
}

#self-check-sleep-hours { width: 6em; }
#self-check-note { flex: 1 1 320px; }

.self-check-error {
  margin-top: 12px;
  color: #8d3030;
  font-weight: bold;
}

#self-check-test { margin-top: 24px; }

#vigilance-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
  min-height: 280px;
  border-radius: 12px;
  background: #000000;
  user-select: none;
  cursor: default;
}

#vigilance-counter {
  color: #ffffff;
  font-size: 110px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.self-check-table-scroll { overflow-x: auto; }
#self-check-history-table { width: 100%; }

.self-check-table {
  border-collapse: collapse;
  font-size: 14px;
}

.self-check-table th {
  padding: 8px 14px 8px 0;
  border-bottom: 2px solid #c5d0da;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}

.self-check-table td {
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid #e8edf0;
  vertical-align: baseline;
}

.self-check-table td.self-check-value {
  font-size: 16px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#self-check-result-table td.self-check-value { font-size: 24px; }

.self-check-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
}

#self-check-download { font-size: 14px; font-weight: bold; color: #000000; }

#self-check-transfer-status {
  margin: 12px 0 0;
  font-size: 14px;
}

#self-check-archive-status {
  margin: 16px 0 0;
  font-weight: bold;
}

@media (max-width: 760px) {
  #self-check-layout { width: calc(100% - 28px); padding-top: 20px; }
  #self-check-header h1 { margin-top: 26px; font-size: 26px; }
  .self-check-card { padding: 18px 16px; }
  #vigilance-counter { font-size: 72px; }
}

/*-------BACKUP (subtle export/import controls)-------*/

#backup {
  margin-top: 30px;
  text-align: center;
  font-size: 11px;
  color: #000000;
}

#backup button,
#backup a {
  font: inherit;
  color: #157ba8;
  background: none;
  border: none;
  padding: 0;
  margin: 0 6px;
  cursor: pointer;
  text-decoration: underline dotted;
}

#import-panel { margin-top: 6px; }

/* Data-format panel: a raisable reference card documenting the export
   structure and the per-game record fields. */
#format-panel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 10px;
  text-align: left;
}

#format-panel[hidden] { display: none; }

.format-block {
  flex: 1 1 320px;
  font-size: 11px;
  color: #000000;
}

.format-block h4 {
  margin: 0 0 4px;
  font-size: 11px;
  color: #000000;
}

.format-block pre {
  margin: 0;
  padding: 6px 8px;
  background: #f7f9fb;
  border: 1px solid #e0e6ec;
  font-size: 11px;
  color: #000000;
}

.format-block table {
  border-collapse: collapse;
  background: #f7f9fb;
  border: 1px solid #e0e6ec;
}

.format-block td {
  padding: 2px 8px;
  vertical-align: top;
}

.format-block td:first-child {
  font-family: monospace;
  color: #000000;
}

.format-block td:nth-child(2) {
  font-family: monospace;
  text-align: right;
  color: #000000;
}

.format-block p {
  margin: 5px 0 0;
  line-height: 1.4;
}

.settings-format-block {
  flex: 2 1 640px;
  min-width: 0;
}

.settings-format-block table {
  width: 100%;
  table-layout: fixed;
  overflow-wrap: anywhere;
}

.settings-format-block td:first-child { width: 26%; }
.settings-format-block td:nth-child(2) { width: 24%; }

#site-footer {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
}

#site-footer a {
  color: #157ba8;
  text-decoration: underline dotted;
}

#import-panel textarea {
  width: 340px;
  vertical-align: middle;
  font-size: 11px;
  color: #000000;
  border: 1px solid #cccccc;
}

/* Age colors by unit, following the board-number palette: seconds
   hyper-fluorescent green, bold on a black chip because the green is
   illegible on white, then 2-green, 1-blue, 3-red, 4-navy, 5-maroon,
   6-teal. Shared by the rank-list age cells and the scatter legend; the
   me-row override replaces the chip with the row tint. */
.age-u-s  {
  color: #39ff14;
  font-weight: bold;
  background: #000000;
  padding: 0 3px;
  border-radius: 3px;
}
.rank-row .age-num-cell.age-u-s { border-radius: 3px 0 0 3px; }
.rank-row .age-unit-cell.age-u-s { border-radius: 0 3px 3px 0; }
.age-u-m  { color: #008000; }
.age-u-h  { color: #0000ff; }
.age-u-d  { color: #ff0000; }
.age-u-w  { color: #000080; }
.age-u-mo { color: #800000; }
.age-u-y  { color: #008080; }

/* Percentage tint covers the selected row; absolute podium place colors
   only its rank. The blue edge means latest game at every standing. */
.rank-highlight { --rank-tint: color-mix(in srgb, var(--rank-tone) 85%, #ffffff); }
.rank-highlight[data-rank-band="top1"] { --rank-tone: #4fcca0; }
.rank-highlight[data-rank-band="top2"] { --rank-tone: #84d6bc; }
.rank-highlight[data-rank-band="top5"] { --rank-tone: #acdccc; }
.rank-highlight[data-rank-band="top10"] { --rank-tone: #cae5dc; }
.rank-highlight[data-rank-band="top25"] { --rank-tone: #d5e2e9; }
.rank-highlight[data-rank-band="top50"],
.rank-highlight[data-rank-band="middle"],
.rank-highlight[data-rank-band="only"] { --rank-tone: #e0e4e7; }
.rank-highlight[data-rank-band="lower50"] { --rank-tone: #e6ded4; }
.rank-highlight[data-rank-band="bottom10"] { --rank-tone: #d7c9b9; }
.rank-highlight[data-rank-band="last"] { --rank-tone: #bfb3a5; }
.rank-highlight[data-rank-podium="1"] { --rank-podium: #efc558; }
.rank-highlight[data-rank-podium="2"] { --rank-podium: #c9d2dc; }
.rank-highlight[data-rank-podium="3"] { --rank-podium: #dbaf87; }

.rank-row.me > span,
.rank-row.recent-row-ranked > span {
  font-weight: bold;
  color: #000000;
  background: var(--rank-tint);
}

.rank-row.me > .rank-cell,
.rank-row.recent-row-current > .recent-window-cell {
  box-shadow: inset 2px 0 #245b8b;
}

.rank-highlight:not([data-rank-podium="0"]) > .rank-cell,
.recent-rank-run.rank-highlight:not([data-rank-podium="0"]) {
  background: var(--rank-podium);
}

.rank-highlight[data-rank-band="last"] > .rank-cell,
.recent-rank-run.rank-highlight[data-rank-band="last"] {
  text-decoration: underline double;
  text-underline-offset: 2px;
}

/*-------METRICS PANEL (live / final mouse-dynamics column)-------*/

/* An in-page left column: one row per metric (label, current value,
   sparkline of the value over the game). It occupies layout width rather
   than covering the page, and stays available while its own tall contents
   scroll. */
#metrics-panel {
  position: sticky;
  top: 6px;
  align-self: start;
  max-height: calc(100vh - 12px);
  /* Default only: the real width is the metricsPanelWidth setting, set
     by dragging the panel's right edge and applied inline on render.
     Wide enough for the session charts' full axis treatment. */
  width: 316px;
  background: #fbfbfb;
  border: 1px solid #dddddd;
  font-size: 11px;
}

#metrics-panel-content {
  max-height: calc(100vh - 14px);
  overflow-y: auto;
  overflow-anchor: none;
  padding: 4px 8px;
}

#metrics-panel .metric-row {
  margin: 4px 0 2px;
}

#metrics-panel .metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#metrics-panel .metric-label {
  color: #000000;
}

#metrics-panel .metric-value {
  font-family: monospace;
  color: #000000;
}

/* When tucked away via its own toggler, the panel shrinks to a small
   restore chip in the same corner. */
#metrics-panel.collapsed {
  bottom: auto;
  width: auto;
}

#metrics-panel.collapsed #metrics-panel-content {
  padding: 2px 4px;
}

#metrics-panel .metrics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#metrics-panel .metrics-panel-head .metrics-toggle { margin-left: auto; }
#metrics-panel .metrics-panel-head[hidden] { display: none; }

#metrics-panel .metric-phase {
  font-weight: bold;
  color: #000000;
}

.metrics-toggle {
  font: inherit;
  font-size: 11px;
  color: #000000;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
}

/* Section header naming a measurement system, in the live panel and
   between the after-game chart groups alike. */
.metrics-group-head {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#metrics-panel .metrics-group-head {
  margin: 10px 0 2px;
  border-bottom: 1px solid #e5e5e5;
}

/* Session controls are intentionally compact beneath the dominant section
   heading: players can reshape the dataset without opening Settings. */
.session-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 8px;
}
.session-control,
.session-scope-select {
  min-height: 24px;
  border: 1px solid #c7d1d9;
  border-radius: 3px;
  background: #f8fafb;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.session-control { max-width: 126px; }
/* The page's one session picker rides the session heading, so the chosen
   window reads as the heading's value: "SESSION today". */
#metrics-panel .session-scope-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding-bottom: 2px;
}
.session-scope-select { font-size: 14px; }

/* The panel's right-edge resize grip belongs to the in-page panel. */
.metrics-resize {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
}
.metrics-resize:hover { background: #dde6ee; }

/* Session charts reuse the scatter plots' visual grammar (plot frame,
   gridlines, tick classes) at panel width. */
.session-chart {
  display: block;
  margin-top: 0;
}
.session-chart .scatter-tick,
.session-chart .scatter-axis-label {
  font-size: 12px;
  font-weight: bold;
  fill: #000000;
}
.session-game-line {
  stroke-width: 1;
  opacity: 0.34;
  pointer-events: none;
  shape-rendering: crispEdges;
}
/* Real-world provenance: strip blocks per wall-clock stretch, one hue per
   calendar day, plus the dashed day-change mark repeated in every chart. */
.session-when-strip {
  display: block;
}
.session-when-block {
  stroke: #37474f;
  stroke-width: 0.75;
}
.session-when-label {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  fill: #000000;
}
.session-day-boundary {
  stroke: #1a1a1a;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.session-when-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 3px 0 4px 54px;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.session-when-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.session-when-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid #37474f;
  border-radius: 2px;
}
.session-game-line.active {
  stroke-width: 1.5;
  opacity: 0.9;
}
.session-game-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  box-sizing: border-box;
  padding: 5px 7px;
  color: #000000;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #aebbad;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font: 11px/1.25 Arial, sans-serif;
  white-space: nowrap;
}
.session-game-tooltip[hidden] { display: none; }
.session-game-tooltip-primary {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.session-game-tooltip-time {
  color: #000000;
  font-size: 15px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.session-game-tooltip-rank {
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.session-game-tooltip-rank-chip {
  padding: 1px 4px;
  border-radius: 2px;
  background: #000000;
}
.session-game-tooltip-accolade {
  padding: 1px 4px;
  border-radius: 2px;
  background: #173f57;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
}
.session-game-tooltip-inference {
  padding: 1px 4px;
  border-radius: 2px;
  background: #c2185b;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
}
.session-game-tooltip-when {
  margin-top: 2px;
  color: #000000;
  font-size: 10px;
}
.session-metric-row .metric-head {
  justify-content: flex-start;
  margin: 0 0 0 54px;
}
#metrics-panel .session-metric-row .metric-label {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.05;
}
.session-point-value {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: #000000;
  stroke: #ffffff;
  stroke-width: 3px;
  paint-order: stroke fill;
}

/* Game-endings lines (one cumulative percent line per ending kind) and
   their legend. The per-kind color travels inline from SESSION_END_SPECS
   (line stroke, last-point dot fill, legend swatch background); only the
   shared geometry lives here. */
.end-line { fill: none; stroke-width: 1.6; }
/* Per-line current values in the line's own color (fill set inline);
   the white halo keeps them readable over gridlines and other lines. */
.rate-point-value {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  stroke: #ffffff;
  stroke-width: 3px;
  paint-order: stroke fill;
}
.rate-label-leader {
  fill: none;
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
  opacity: 0.72;
}
.session-end-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  margin: 2px 0 4px 54px;
}
.end-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.end-swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
}
.session-end-empty { color: #000000; }

/* Hovering a series' legend entry or in-plot value label spotlights that
   series: everything else in the chart fades, the hovered line thickens. */
.series-hotspot { cursor: pointer; }
.end-legend-item.series-hotspot:hover { text-decoration: underline; }
.session-chart.series-focus .end-line:not(.hot),
.session-chart.series-focus .end-dot:not(.hot),
.session-chart.series-focus .rate-label-leader:not(.hot) {
  opacity: 0.16;
}
.session-chart .end-line.hot { stroke-width: 2.6; }

/* The (?) after a chart name: hover/focus it for a plain-language
   explanation of the metric. Pure black on white per the contrast rule. */
.chart-help-wrap {
  position: relative;
  display: inline-block;
  margin-left: 6px;
}
.chart-help {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid #000000;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  font: bold 10px/13px Arial, sans-serif;
  cursor: help;
  vertical-align: 2px;
}
.chart-help-label-wrap { margin-left: 0; }
.chart-help.chart-help-label {
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-decoration: underline dotted #84939f;
  text-underline-offset: 3px;
  vertical-align: baseline;
}
/* The tip is one shared body-level element, fixed-positioned beside
   whichever (?) is active and clamped to the viewport (an inline tip
   would be clipped by the scrollable metrics panel). */
.chart-help-tip {
  position: fixed;
  margin: 0;
  inset: auto;
  z-index: 60;
  width: 290px;
  max-width: 78vw;
  padding: 8px 10px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.3);
  font: normal 12px/1.45 Arial, sans-serif;
  text-align: left;
  white-space: normal;
}
.chart-help-tip p { margin: 0 0 7px; }
.chart-help-tip p:last-child { margin-bottom: 0; }
.chart-help-tip b { font-weight: bold; }

/* The help tips' miniature board fragments: classic covered bevels, the
   digit palette, and the real mine glyph, with a probability note
   riding the cell's bottom edge. */
.help-board-wrap { margin: 6px 0 8px; }
.help-board {
  display: grid;
  width: max-content;
  border: 1px solid #808080;
}
.help-cell {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 15px/1 Arial, sans-serif;
  background: #c0c0c0;
  box-sizing: border-box;
}
.help-covered {
  border: 3px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}
.help-number,
.help-mine,
.help-blank {
  border: 1px solid #9a9a9a;
}
.help-mine { background: #ff4444; }
.help-mine svg {
  width: 16px;
  height: 16px;
  display: block;
}
.help-n1 { color: #0000ff; }
.help-n2 { color: #008000; }
.help-n3 { color: #ff0000; }
.help-n4 { color: #000080; }
.help-cell-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  font: bold 9px/1.15 Arial, sans-serif;
  color: #000000;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
}
.help-board-caption {
  font-size: 11px;
  color: #000000;
  margin-top: 4px;
  line-height: 1.4;
}

/* One average / distribution / winrate control per chart group. */
.avg-mode-select {
  font: 14px Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  background: #ffffff;
}

/* The after-game charts sit inline among the bottom charts; the head
   line (label + canonical value) doubles as the chart's title. */
.motion-chart {
  width: 230px;
  font-size: 11px;
}

.motion-chart .metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.motion-chart .metric-label {
  color: #000000;
}

.motion-chart .metric-value {
  font-family: monospace;
  color: #000000;
}

.spark { display: block; overflow: hidden; }
.spark-frame { fill: #ffffff; stroke: #e5e5e5; }
.spark-line { fill: none; stroke: #446688; stroke-width: 1; }
.spark-dot { fill: #446688; }
.spark-line.spark-line-0 { stroke: #e8b84a; stroke-width: 1.3; }
.spark-dot.spark-dot-0, .spark-bar-0 { fill: #e8b84a; }
.spark-line.spark-line-1 { stroke: #e07020; stroke-width: 1.6; }
.spark-dot.spark-dot-1, .spark-bar-1 { fill: #e07020; }
.spark-line.spark-line-2 { stroke: #b82c14; stroke-width: 1.9; }
.spark-dot.spark-dot-2, .spark-bar-2 { fill: #b82c14; }
.spark-line.spark-line-3 { stroke: #2a0e0c; stroke-width: 2.2; }
.spark-dot.spark-dot-3, .spark-bar-3 { fill: #2a0e0c; }
.spark-label {
  font-family: Arial, sans-serif;
  font-size: 8px;
  fill: #000000;
}
.spark-label-big { font-size: 11px; }

/* Review controls keep their geometry as frames and legend text change. */
#replay-status {
  grid-column: 1 / -1;
  height: 36px;
  overflow-y: auto;
  text-align: left;
  line-height: 1.5;
  padding: 0;
  background: transparent;
  border-radius: 3px;
}
#replay-controls #replay-first, #replay-controls #replay-last { font-size: 12px; }
#replay-slider-wrap { min-width: 0; }
#replay-overlay-control, #path-view-control { justify-content: flex-start; }
.path-view-heading { flex-basis: 100%; margin: 3px 0; text-align: left; }
#review-display { width: 100%; text-align: left; }
#review-display[hidden] { display: none; }
#review-display summary {
  padding: 8px 10px;
  border: 1px solid #c9d4de;
  border-radius: 3px;
  background: #f7fafc;
  color: #000000;
  cursor: pointer;
  font-size: 12px;
}
#review-display-content { padding: 10px; border: 1px solid #c9d4de; border-top: 0; }
.review-display-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px 14px; margin-top: 12px; }
.review-display-options label { display: flex; align-items: center; gap: 6px; }
.review-display-options input { margin: 0; }
#review-display .report-scope-control { flex-wrap: wrap; margin: 0; }
@media (max-width: 700px) {
  #page-layout, #page-layout.compact-sidebar { grid-template-columns: minmax(0, 1fr); }
  main { grid-column: 1; grid-row: 2; }
  #metrics-panel {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: 100% !important;
    max-height: 220px;
  }
  #metrics-panel-content { max-height: 218px; }
  body { padding: 12px; }
  #difficulty-tabs { flex-wrap: wrap; justify-content: center; gap: 10px; }
  #zoom-label { margin-left: 0; }
}

/* Display options open in the top layer, leaving rankings in place. */
#review-options-button[hidden] { display: none; }
#review-options {
  position: fixed;
  inset: auto 16px 16px auto;
  width: min(460px, calc(100vw - 32px));
  max-height: min(650px, calc(100dvh - 32px));
  overflow-y: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid #a5b7c3;
  border-radius: 5px;
  background: #fff;
  color: #000000;
  box-shadow: 0 4px 20px #0002;
  font: 12px Arial, sans-serif;
}
.review-options-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#review-options #replay-overlay-control, #review-options #path-view-control { margin-bottom: 12px; }
#review-options #review-display { margin-top: 10px; }

/* Reserve the early-session geometry before any measurements exist. */
#metrics-panel-content { scrollbar-gutter: stable; }
.session-when-row { height: 112px; overflow-y: auto; }
.session-endings-row > .session-end-legend { height: 72px; overflow-y: auto; }
.session-metric-row > .session-end-empty { min-height: 16px; }

#metrics-panel .session-chart, #metrics-panel .session-when-strip { max-width: 100%; }


#preferences-import-form {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

#preferences-import-text {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  font: 12px monospace;
}

#preferences-import-form button { justify-self: start; }

#archive-status-text,
#storage-persistence-text {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.45;
}

#archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}