:root {
  --cell-size: 28px;
  /* 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: #333333;
  margin: 0;
  padding: 24px;
}

#page-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  width: 100%;
}

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

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

#difficulty-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

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

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

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

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

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

#scores-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 4px;
  font-size: 11px;
}

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

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

#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: #333333;
}

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

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

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

.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: #2c5875;
  cursor: pointer;
}

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

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

#game-frame {
  display: inline-block;
  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);
}

/*-------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-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;
}

.cell {
  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-------*/

/* The board is the anchor; when room permits, the win summary + stats table
   sit at the far right of its row. On narrower layouts JS moves that compact
   block below the board so it cannot cover the cells. The action analysis
   and rank charts live below the game area in normal flow. */
#game-area { position: relative; }

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

#game-area.trial-no-board #results {
  position: static;
  transform: none;
  right: auto;
  width: auto;
  max-width: 28em;
  margin: 0 auto 12px;
}

#results {
  position: absolute;
  top: var(--results-top-clearance, 0px);
  transform: none;
  /* Fallback for older browsers, then the container-unit rule aligns the
     edge to the available main column rather than the full viewport (the
     in-page metrics panel consumes part of that viewport). */
  right: calc(50% - 50vw + 32px);
  right: calc(50% - 50cqw + 4px);
  width: 320px;
  text-align: left;
  /* Echo the chunky in-game numeral face throughout the results area */
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}

#game-area.results-below-board #results {
  position: static;
  right: auto;
  width: min(320px, 100%);
  margin: 12px auto 0;
}

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

/* Full after-game explanations need reading width, not the 320px stat
   sidebar. They sit centrally between the board row and rankings. The
   overflow variable clears a stat sidebar taller than the board. */
#result-analysis {
  box-sizing: border-box;
  width: min(920px, 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;
}
#result-analysis .result-verdicts {
  display: grid;
  gap: 10px;
}
#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: #333333;
  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;
  white-space: pre-line;
  color: #000000;
}

/* The game's stats as a small label/value tablechart */
#stats-grid {
  display: grid;
  width: max-content;
  grid-template-columns: max-content max-content;
  gap: 0 10px;
  margin: 4px 0;
  font-size: 12px;
}
#stats-grid .stat-label {
  text-align: left;
  color: #111111;
}
#stats-grid .stat-value {
  text-align: right;
  color: #000000;
}

/* Game-end evaluation (PRODUCT.md "Game-end evaluation"): 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: #222222;
  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: #222222;
}
.verdict-details { margin-top: 4px; color: #555555; }
.verdict-details div { margin: 2px 0; }
.verdict-mine { border-color: #1a1a1a; background: #efefef; }
.verdict-mine .verdict-title { color: #1a1a1a; }
.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: #666666; }
.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: #555555; 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: #555555; }
.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: #555555;
}
.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: #333333;
}
.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)-------*/

/* Pinned to the screen's upper-right corner: the player-state tags (menu
   dropping down in-page below) and the settings button (opening the
   full-height right-edge panel). Fixed, so the cluster occupies no layout
   space (the board cannot move) and stays put as the page scrolls. */
#top-right {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 10;
  width: 250px;
  text-align: right;
  font-size: 11px;
  color: #999999;
}

#play-mode,
#board-generator {
  margin-bottom: 8px;
  text-align: right;
}

#play-mode label,
#board-generator label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667788;
  font-size: 11px;
}

#play-mode-select,
#board-generator-select {
  font: inherit;
  font-size: 11px;
  color: #333333;
  background: #f7f9fb;
  border: 1px solid #c5d0da;
  padding: 2px 4px;
}

#board-generator-select:disabled {
  color: #99a5b0;
  background: #eef1f4;
}

#trial-progress,
#pregen-progress {
  margin-top: 4px;
  color: #333333;
  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: #333333;
  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: #333333;
  line-height: 1.45;
  white-space: normal;
  margin: 12px 0 0;
}

body.trial-offboard #result-ranks {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.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: #333333;
}

.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: #888888;
  font-size: 11px;
}

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

.trial-identity {
  min-width: 250px;
  max-width: 280px;
  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: #333333;
}

.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: #666666;
}

.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 PRODUCT.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: #3d4a2e;
  background: #eef2e4;
  border: 1px solid #6b7a4e;
  padding: 2px 8px;
  margin-bottom: 4px;
}

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

#states { margin-bottom: 4px; }

#states-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 5px;
}

#states-chips:empty { margin-bottom: 0; }

/* 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,
.return-to-game {
  font: inherit;
  font-size: 11px;
  color: #3f5668;
  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,
.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);
}

#settings-btn { margin-left: 10px; }

/* 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 {
  margin-top: 5px;
  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: #3f5668;
  font-size: 11px;
  font-weight: bold;
}

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

#states-close:hover { color: #3f5668; }

.state-option {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 11px;
  color: #667788;
  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: #555555;
  border: 1px solid #cccccc;
}

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

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

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

body.settings-page {
  min-height: 100vh;
  padding: 0;
  background: #f3f6f8;
  color: #263746;
  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: #526878;
  font-size: 13px;
  font-weight: bold;
}

#settings-layout {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 56px;
}

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

body.settings-page .return-to-game {
  padding: 7px 12px;
  border-color: #b9c8d2;
  background: #ffffff;
  color: #355a72;
  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: #243846;
  font-size: 30px;
  line-height: 1.15;
}

#settings-heading p {
  margin: 0;
  color: #7b8b96;
  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;
}

#settings-column {
  display: grid;
  gap: 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: #486273;
  font-size: 12px;
  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-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: #344b5a;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.35;
}

.setting-describe {
  color: #748590;
  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: #536671;
  font-size: 13px;
  cursor: pointer;
}

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

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

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

.setting-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 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: min(100% - 28px, 640px);
    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;
  }
}

/* This win's effect on its bucket's average time: a cell in the last grid
   row of the rankaverage chart, sitting in (and right-aligned with) the
   average-time column since the delta is itself a time. */
.rank-delta { font-size: 11px; }
.delta-improved { color: #008000; }
.delta-worsened { color: #ff0000; }
.delta-same { color: #666666; }
.delta-new { color: #0000ff; }

/* 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: #666666;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}

#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: #666666;
  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: #333333;
}

.pregen-progress-panel table {
  width: 100%;
  border-collapse: collapse;
  color: #555555;
  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: #999999;
  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: #999999;
  background: #fbfbfb;
  font: bold 12px Arial, sans-serif;
}

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

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

/* 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;
}

/* The unit hugs its count, while every age string ends on one shared edge. */
.rank-row .age-num-cell { padding-right: 0; }
.rank-row .age-unit-cell {
  min-width: 2ch;
  padding-left: 1px;
  text-align: right;
}

/* 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. */
.flex-break { flex-basis: 100%; height: 0; }
.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: #333333;
}
.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: #999999;
  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: #333333;
  text-anchor: middle;
}
.scatter-legend {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: #888888;
}
.scatter-legend .legend-item { margin-left: 8px; }

/* Rankaverage charts: rank, stat value, average time, win count. The count
   column is right-aligned with its multiplication sign trailing ("12x"),
   so ones/tens/hundreds places line up down the column. */
.rankavg-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, auto);
}
.rank-row .val-cell { text-align: right; }
.rank-row .avg-cell { text-align: right; }
.rank-row .cnt-cell { text-align: right; }

/* Rankaverage sort headers: a quiet row of clickable column names; the
   active order is the only dark one. */
.rank-row .sort-cell {
  font-size: 10px;
  font-weight: normal;
  color: #aabbcc;
  cursor: pointer;
  user-select: none;
}
.rank-row .sort-cell:hover { text-decoration: underline; }
.rank-row .sort-cell.active {
  color: #333333;
  font-weight: bold;
}

/* The value header doubles as the chart's title (rankaverage charts carry
   no h4), so it renders dark and bold at heading size — while staying
   clickable to sort, like its neighbors. */
.rank-row .sort-cell.val-cell {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
}

/* Recent placements: one row per longer time window, listing the
   top-tenth ranks earned within the chosen recent window. The window
   selector rides the heading line. */
.recent-placements-select {
  margin-left: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: normal;
  color: #555555;
}

.recent-placements-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, auto);
}

.recent-placements-grid .recent-window-cell { text-align: right; }

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

/* Within a ranks-won row, mark the ordinal earned by the game that just
   finished exactly like its highlighted row in the full tablechart. */
.recent-placements-grid .recent-rank-run {
  padding: 0;
}

.recent-placements-grid .recent-current-rank {
  padding: 0 2px;
  font-weight: bold;
  color: #000000;
  background: #d8ebfa;
}

/* Lifetime's near-miss rank (the closest rank when none made the top
   tenth) renders muted: it is context, not an earned top placement. */
.recent-placements-grid .recent-near-cell { color: #999999; }

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

/* The "of N" completing the highlighted "#x" rank above it, at the foot of
   every tablechart. */
.rank-total {
  padding: 0 4px;
  font-size: 11px;
  color: #999999;
}

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

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

#backup button,
#backup a {
  font: inherit;
  color: #8aa0b5;
  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 {
  max-width: 380px;
  font-size: 11px;
  color: #777777;
}

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

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

.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: #446688;
}

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

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

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

#site-footer a {
  color: #8aa0b5;
  text-decoration: underline dotted;
}

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

/* Age colors by unit, following the board-number palette: seconds
   hyper-fluorescent green (always bolded — it's too light to read thin),
   then 2-green, 1-blue, 3-red, 4-navy, 5-maroon, 6-teal. Shared by the
   rank-list age cells and the scatter legend. */
.age-u-s  { color: #39ff14; font-weight: bold; }
.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; }

/* The me-row stays black-on-highlight: ultralight blue text would be
   unreadable on the light blue bar (this rule wins on specificity). */
.rank-row.me span {
  font-weight: bold;
  color: #000000;
  background: #d8ebfa;
}

/*-------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: #999999;
}

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

/* 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;
}

/* The live marker is grey: live numbers are transient readings. */
#metrics-panel .metric-phase {
  font-weight: bold;
  color: #999999;
}

.metrics-toggle {
  font: inherit;
  font-size: 11px;
  color: #8aa0b5;
  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: 11px;
  font-weight: bold;
  color: #667788;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

/* The session section's bucket-size selector rides its header line; the
   header's uppercase styling must not leak into the option labels. */
.session-bucket-select {
  float: right;
  font: inherit;
  font-size: 10px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

/* 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: #111111;
}
.session-win-line {
  stroke: #2e7d32;
  stroke-width: 1;
  opacity: 0.34;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.session-win-line.active {
  stroke-width: 1.5;
  opacity: 0.9;
}
.session-win-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  box-sizing: border-box;
  padding: 3px 5px;
  color: #222222;
  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-win-tooltip[hidden] { display: none; }
.session-win-tooltip-result { font-weight: bold; }
.session-win-tooltip-when {
  margin-top: 1px;
  color: #666666;
  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;
}
.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: #888888; }

/* 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: #999999;
}

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

.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: #999999;
}
.spark-label-big { font-size: 11px; }