:root {
  --bg: #e9ecf1;
  --panel: #ffffff;
  --ink: #1a1e29;
  --muted: #5d6474;
  --line: #1a1e29;
  --bad: #d8182b;
  --board: min(100vw - 32px, 520px);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161c;
    --panel: #20242e;
    --ink: #eef0f5;
    --muted: #a0a7b8;
    --line: #0a0b0f;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c;
  --panel: #20242e;
  --ink: #eef0f5;
  --muted: #a0a7b8;
  --line: #0a0b0f;
}
/* Colour themes (Settings > Colours). Rosé Pine Moon (rosepinetheme.com/palette) is the
   default; the colours above are "shelvacu mode", which also follows light/dark. */
:root:not([data-palette]), :root[data-palette="moon"] {
  color-scheme: dark;
  --bg: #232136;     /* base */
  --panel: #2a273f;  /* surface */
  --ink: #e0def4;    /* text */
  --muted: #908caa;  /* subtle */
  --line: #393552;   /* overlay */
  --bad: #eb6f92;    /* love */
  --accent: #c4a7e7; /* iris */
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  line-height: 1.45;
}
main {
  width: var(--board);
  margin: 0 auto;
  padding: 24px 0 40px;
}
/* Desktop: leaderboard | game | achievements, the side panels sticking as you scroll.
   Narrower (or two boards side by side, which need the width): stacked under the game. */
.layout { display: grid; grid-template-areas: "main" "left" "right"; justify-content: center; padding: 0 16px; }
.layout > main { grid-area: main; }
.side-left { grid-area: left; }
.side-right { grid-area: right; }
.side { width: var(--board); margin: 0 auto 24px; }
@media (min-width: 1180px) {
  body:not(.split) .layout { grid-template-areas: "left main right"; grid-template-columns: minmax(250px, 300px) auto minmax(250px, 300px); column-gap: 32px; align-items: start; }
  body:not(.split) .side { width: auto; margin: 0; position: sticky; top: calc(24px + env(safe-area-inset-top, 0px)); padding-top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-chip { padding: 6px 12px; white-space: nowrap; }
.panel { padding: 14px 16px; background: var(--panel); border-radius: 16px; }
.ach-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ach-list li { padding: 6px 10px; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--accent, var(--ink)); }
.ach-list li.locked { border-left-color: var(--line); opacity: 0.55; }
.ach-list b { display: block; font-size: 0.95em; }
.ach-list small { color: var(--muted); }
h1 {
  margin: 0;
  font-size: min(2.6rem, 14vw);  /* big text on a narrow screen still fits "Hundred" */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lede { margin: 8px 0 20px; color: var(--muted); }

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-weight: 600;
}
/* Segmented size switch, and the level grid (Levels button). */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); }
.seg button { font: inherit; font-weight: 700; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent, var(--ink)); color: var(--bg); }
.seg button:focus-visible { outline: 3px solid var(--bad); outline-offset: 1px; }
.level-pick { padding: 5px 12px; }
dialog.wide { width: min(100vw - 32px, 640px); max-height: calc(100vh - 32px); }
.level-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 0.9em; }
.level-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85em; margin: 10px 0 !important; }
.level-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--grade); }
.g-E { --grade: #9ccfd8; } .g-M { --grade: #f6c177; } .g-H { --grade: #ea9a97; } .g-X { --grade: #c4a7e7; }
.level-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.level-tile {
  position: relative; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg);
  border: 2px solid var(--line); border-bottom: 4px solid var(--grade); border-radius: 10px;
  padding: 8px 0; cursor: pointer; font-variant-numeric: tabular-nums;
}
.level-tile.done::after { content: "✓"; position: absolute; top: 1px; right: 4px; font-size: 0.7em; color: #7fcf95; }
.level-tile.current { background: var(--accent, var(--ink)); color: var(--bg); border-color: var(--accent, var(--ink)); border-bottom-color: var(--grade); }
.level-tile:focus-visible { outline: 3px solid var(--bad); outline-offset: 2px; }
.level-tile.daily, .level-tile.endless { grid-column: span 5; padding: 10px 8px; }
@media (max-width: 520px) {
  .level-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.grade-tag { align-self: center; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 0.85em; }
.bar select { font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px; }
.pickers { display: flex; flex-wrap: wrap; gap: 8px; }
#time { font-variant-numeric: tabular-nums; }

.board {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 18px;
  background: var(--panel);
}
.cell.hidden-line { opacity: 0.12; }
/* Other players' pointers in a lobby; inset by the board's padding so 0..1 spans the squares. */
.board-wrap { position: relative; }
/* A split lobby shows the other board, live and read-only, beside yours (below it on phones). */
.boards { display: grid; gap: 20px; }
body.split main { --board: min(calc((100vw - 52px) / 2), 520px); width: calc(var(--board) * 2 + 20px); }
body.split .boards { grid-template-columns: 1fr 1fr; }
/* Side by side, boards sit in A-then-B order so each lines up under its tab. */
body.split.on-b .my-col { order: 2; }
.stack > * + * { margin-top: 8px; }
.welcome { margin: 0 0 10px; padding: 8px 12px; background: var(--panel); border-radius: 12px; font-weight: 600; }
.global-board { margin: 0; }
.gb-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.gb-head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.gb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-tabs .seg button { padding: 3px 9px; font-size: 0.85em; white-space: nowrap; }
.seg-label { align-self: center; padding: 0 4px 0 8px; color: var(--muted); font-size: 0.85em; font-weight: 700; }
.gb-rows { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 2px; counter-reset: rank; }
.gb-rows li { display: flex; gap: 10px; align-items: baseline; padding: 5px 8px; border-radius: 8px; counter-increment: rank; }
.gb-rows li::before { content: counter(rank); width: 1.6em; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-rows li:nth-child(-n+3)::before { content: counter(rank) ""; color: var(--accent, var(--ink)); }
.gb-rows li.me { background: var(--bg); font-weight: 800; }
.gb-rows .gb-name { flex: 1; overflow-wrap: anywhere; }
.gb-rows .gb-value { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-rows .empty::before { content: none; }
.gb-you { margin: 0; color: var(--muted); }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.achievement { padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 2px solid var(--accent, var(--ink)); }
.achievement.locked { border-color: var(--line); opacity: 0.55; }
.achievement b { display: block; }
.achievement small { color: var(--muted); }
.toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 5; pointer-events: none; width: min(100vw - 32px, 360px); }
.toast { padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); animation: toast-in 0.3s ease-out; }
.toast small { display: block; font-weight: 600; opacity: 0.8; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } }
.rated-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; background: var(--panel); border-radius: 12px; font-weight: 600; }
.link-btn { font: inherit; color: var(--accent, var(--ink)); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
#time.over { color: var(--bad); }
body.rated .level-pick { display: none; }
.table-wrap { overflow-x: auto; margin: 0 0 14px; }
.leaderboard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.leaderboard th, .leaderboard td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.leaderboard tr.me td { color: var(--accent, var(--ink)); font-weight: 800; }
.race-list { list-style: none; margin: 0 0 10px; padding: 8px 12px; background: var(--panel); border-radius: 12px; display: grid; gap: 4px; }
.race-list li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.race-list .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
/* The race winner's "End the race" button: big, gold and shimmering. */
.btn.shiny { display: block; width: 100%; margin: 0 0 10px; padding: 14px 18px; font-size: 1.15rem; font-weight: 800;
  color: #3b2400; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(110deg, #f6c445 0%, #ffe9a3 22%, #f6c445 40%, #e8a317 100%); background-size: 250% 100%;
  box-shadow: 0 4px 18px rgba(246, 196, 69, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: shimmer 2.4s linear infinite; }
.btn.shiny:hover { filter: brightness(1.06); transform: translateY(-1px); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .btn.shiny { animation: none; } }
.race-list .status { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--ink);
  font-size: calc(var(--board) * 0.3);
  font-weight: 800;
  pointer-events: none;
}
/* Before "Go!" the board is fully covered, so nobody can start solving it in their head. */
.countdown.veil { background: var(--bg); box-shadow: 0 0 0 2px var(--bg); }
.name-row { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 4px 0 12px; }
.name-row .text-input { flex: 1; min-width: 0; }
.remote-cursor .cursor-name { position: absolute; left: 18px; top: 18px; padding: 1px 6px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lobby-list .lobby-names { display: block; color: var(--muted); font-size: 0.85em; }
.link-row { display: flex; gap: 8px; }
.link-row .text-input { flex: 1; min-width: 0; }
.qr { display: block; width: 160px; height: 160px; margin: 12px auto 0; padding: 6px; background: #fff; border-radius: 10px; }
.mode-pick { border: 0; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mode-pick legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.mode-pick label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mode-pick input { width: 18px; height: 18px; flex: none; accent-color: var(--accent, var(--ink)); }
.other-caption { margin: 6px 0 0; text-align: center; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) {
  body.split main { --board: min(100vw - 32px, 520px); width: var(--board); }
  body.split .boards { grid-template-columns: 1fr; }
  body.split.on-b .my-col { order: 0; }
  .other-col { --board: calc(min(100vw - 32px, 520px) * 0.7); width: var(--board); margin: 0 auto; }
}
.board-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.board-tabs .btn { flex: 1; }
.cursors { position: absolute; inset: 8px; pointer-events: none; }
.remote-cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -3px 0 0 -3px;
  transition: left 0.06s linear, top 0.06s linear, opacity 0.4s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.cell {
  appearance: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22%;
  overflow: hidden;
  font: inherit;
  font-size: calc(var(--board) / var(--n) * 0.5);
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.cell.mark { font-size: calc(var(--board) / var(--n) * 0.7); font-weight: 800; }
.cell.bad { box-shadow: inset 0 0 0 3px var(--bad), inset 0 0 0 5px #fff; }
.cell.stuck {
  box-shadow: inset 0 0 0 3px var(--bad), inset 0 0 0 5px #fff;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.45) 6px 9px);
}
.cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.cell:disabled { cursor: default; opacity: 1; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 6px; }
.slot { display: flex; gap: 3px; min-width: 0; }
.slot .btn { padding: 6px 4px; font-size: 0.9em; white-space: nowrap; }
.slot .btn:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slot .btn.empty { border-style: dashed; color: var(--muted); }
.btn {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent, var(--ink)) 25%, var(--panel)); }
.btn.primary { background: var(--accent, var(--ink)); border-color: var(--accent, var(--ink)); color: var(--bg); }
.btn:focus-visible, select:focus-visible { outline: 3px solid var(--bad); outline-offset: 2px; }
#msg { min-height: 1.5em; margin: 0; color: var(--muted); }

.text-input {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 14px;
}
.text-input:focus-visible { outline: 3px solid var(--bad); outline-offset: 2px; }
#roomStatus { min-height: 1.5em; margin: 10px 0 0; color: var(--muted); }
.lobby-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 40vh; overflow-y: auto; }
.lobby-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.lobby-list .lobby-name { font-weight: 600; overflow-wrap: anywhere; }
.lobby-list .lobby-meta { display: block; color: var(--muted); font-size: 0.9em; }
.lobby-list .empty { color: var(--muted); border: 0; }
[hidden] { display: none !important; }

.palette-title { margin: 22px 0 8px; font-weight: 600; }
.palette { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.swatch { aspect-ratio: 1; border-radius: 3px; opacity: 0.3; }
.swatch.used { opacity: 1; outline: 2px solid var(--ink); outline-offset: 0; z-index: 1; }

.setting-row { margin: 12px 0; }
.muted { color: var(--muted); }
.setting-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.setting-row input { width: 20px; height: 20px; flex: none; accent-color: var(--ink); cursor: pointer; }

details { margin-top: 22px; }
summary { cursor: pointer; font-weight: 600; }
details ul { margin: 8px 0 0; padding-left: 1.2em; color: var(--muted); }

dialog {
  width: min(100vw - 32px, 380px);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  --board: min(100vw - 78px, 334px);
}
@keyframes tut-pulse { 50% { box-shadow: inset 0 0 0 4px var(--accent, var(--ink)), 0 0 0 4px var(--accent, var(--ink)); } }
.cell.tut-target { animation: tut-pulse 1.1s ease-in-out infinite; }
@keyframes tut-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-7px) rotate(-3deg); } 40% { transform: translateX(7px) rotate(3deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.cell.tut-target.tut-nudge { animation: tut-nudge 0.45s ease-in-out, tut-pulse 1.1s ease-in-out 0.45s infinite; }
/* The tutorial's board stays in view above its buttons, even on a short phone screen. */
#tutBoard { width: min(100%, max(200px, 100vh - 290px)); width: min(100%, max(200px, 100dvh - 290px)); margin: 0 auto; }
/* Watch it solve: the squares the current rule is about get a ring; the ones it changes pulse. */
.cell.why { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px var(--bg); z-index: 1; }
.watch-text { min-height: 4.5em; }
.watch-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.watch-controls select { flex: 1 1 140px; width: auto; }
@keyframes confetti-fall {
  from { transform: translate(0, -10vh) rotate(0); opacity: 1; }
  to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: 0.9; }
}
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: 0; width: 10px; height: 14px; border-radius: 2px; font-size: 22px; line-height: 1; animation: confetti-fall 2s cubic-bezier(.25, .6, .4, 1) forwards; }
dialog .board { background: var(--bg);
}
dialog::backdrop { background: rgba(10, 11, 15, 0.6); }
dialog h2 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
dialog p { margin: 4px 0 14px; color: var(--muted); }
dialog .actions { margin-bottom: 0; }

/* Colour-blind help (Settings): every colour region gets its own pattern, so regions can
   be told apart without seeing the colours. --pat is a light or dark ink
   per square, whichever shows up on its colour. */
.cell { position: relative; }
body.colour-help .cell[data-pat="1"] { background-image: radial-gradient(var(--pat) 22%, transparent 24%); background-size: 25% 25%; }
body.colour-help .cell[data-pat="2"] { background-image: repeating-linear-gradient(0deg, var(--pat) 0 3px, transparent 3px 10px); }
body.colour-help .cell[data-pat="3"] { background-image: repeating-linear-gradient(90deg, var(--pat) 0 3px, transparent 3px 10px); }
body.colour-help .cell[data-pat="4"] { background-image: repeating-linear-gradient(45deg, var(--pat) 0 3px, transparent 3px 10px); }
body.colour-help .cell[data-pat="5"] { background-image: repeating-linear-gradient(-45deg, var(--pat) 0 3px, transparent 3px 10px); }
body.colour-help .cell[data-pat="6"] { background-image: repeating-linear-gradient(45deg, var(--pat) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, var(--pat) 0 2px, transparent 2px 9px); }
body.colour-help .cell[data-pat="7"] { background-image: repeating-linear-gradient(0deg, var(--pat) 0 2px, transparent 2px 9px), repeating-linear-gradient(90deg, var(--pat) 0 2px, transparent 2px 9px); }
body.colour-help .cell[data-pat="8"] { background-image: radial-gradient(transparent 30%, var(--pat) 32% 42%, transparent 44%); background-size: 50% 50%; }

/* Admin tools */
.admin-table { max-height: 40vh; overflow: auto; }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover, .admin-table tbody tr.picked { background: var(--bg); }
.admin-table tbody tr.picked td { color: var(--accent, var(--ink)); font-weight: 700; }
.admin-detail { margin-bottom: 14px; display: grid; gap: 8px; background: var(--bg); }
.admin-detail select { flex: 1; min-width: 0; }
.admin-lobbies { list-style: none; padding: 0; display: grid; gap: 6px; }
.admin-lobbies .btn { padding: 2px 10px; margin-left: 6px; }

/* "This level": your best and everyone's, above the leaderboard */
.side-left { display: grid; gap: 16px; align-content: start; }
.level-stats h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.ls-you { margin: 0 0 4px; font-weight: 700; }
.level-stats .gb-rows { margin-top: 8px; }

/* More themes, from each palette's published colours. */
:root[data-palette="mocha"] {   /* Catppuccin Mocha */
  color-scheme: dark;
  --bg: #1e1e2e; --panel: #313244; --ink: #cdd6f4; --muted: #a6adc8; --line: #45475a; --bad: #f38ba8; --accent: #cba6f7;
}
:root[data-palette="latte"] {   /* Catppuccin Latte */
  color-scheme: light;
  --bg: #eff1f5; --panel: #e6e9ef; --ink: #4c4f69; --muted: #6c6f85; --line: #bcc0cc; --bad: #d20f39; --accent: #8839ef;
}
:root[data-palette="dracula"] { /* Dracula */
  color-scheme: dark;
  --bg: #282a36; --panel: #343746; --ink: #f8f8f2; --muted: #a9b1d6; --line: #44475a; --bad: #ff5555; --accent: #bd93f9;
}
:root[data-palette="gruvbox-dark"] {  /* Gruvbox dark */
  color-scheme: dark;
  --bg: #282828; --panel: #3c3836; --ink: #ebdbb2; --muted: #a89984; --line: #504945; --bad: #fb4934; --accent: #fabd2f;
}
:root[data-palette="gruvbox-light"] { /* Gruvbox light */
  color-scheme: light;
  --bg: #fbf1c7; --panel: #ebdbb2; --ink: #3c3836; --muted: #7c6f64; --line: #d5c4a1; --bad: #9d0006; --accent: #b57614;
}

/* Cat skins in Settings */
.skin-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.skin { font-size: 26px; line-height: 1; width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); cursor: pointer; }
.skin.picked { border-color: var(--accent, var(--ink)); box-shadow: 0 0 0 2px var(--accent, var(--ink)); }
.skin:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); }

/* Your best time on each level tile */
.level-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.tile-best { font-size: 0.62em; font-weight: 700; opacity: 0.75; font-variant-numeric: tabular-nums; }
.ls-rows { max-height: 50vh; overflow-y: auto; }

/* The daily calendar */
.level-tile.calendar { grid-column: span 2; padding: 10px 4px; }
.level-tile.daily { grid-column: span 4; }
.level-tile.endless { grid-column: span 4; }
@media (max-width: 520px) {
  .level-tile.daily { grid-column: span 3; }
  .level-tile.endless { grid-column: span 5; }
}
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-nav .btn { padding: 2px 12px; }
.cal-nav #calMonth { min-width: 9em; text-align: center; }
.cal-nav .seg { margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; color: var(--muted); font-size: 0.8em; font-weight: 700; }
.cal-day {
  position: relative; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--line);
  border-bottom: 4px solid var(--grade, var(--line)); border-radius: 10px; padding: 6px 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.cal-day small { color: var(--muted); font-size: 0.7em; }
.cal-day.done::after { content: "✓"; position: absolute; top: 1px; right: 4px; font-size: 0.7em; color: #7fcf95; }
.cal-day.today { border-color: var(--accent, var(--ink)); }
.cal-day:disabled { opacity: 0.25; cursor: default; }
.cal-blank { visibility: hidden; }

/* The stats page */
/* (A modal dialog is already a containing block for the chart tooltip: it is position: fixed.) */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }
.stat-tile { padding: 10px 12px; border-radius: 12px; background: var(--bg); display: grid; gap: 2px; }
.stat-tile small, .stat-tile span { color: var(--muted); font-size: 0.8em; }
.stat-tile b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#statsDialog h3 { margin: 14px 0 6px; font-size: 1rem; }
.times-chart { width: 100%; height: auto; display: block; }
.times-chart .grid { stroke: var(--line); stroke-width: 1; }
.times-chart .axis { fill: var(--muted); font-size: 11px; }
.times-chart .trend { fill: none; stroke: var(--accent, var(--ink)); stroke-width: 2; stroke-linejoin: round; }
.times-chart .dot { fill: var(--muted); stroke: var(--panel); stroke-width: 2; cursor: default; }
.times-chart .dot.hinted { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; }
.times-chart .dot:hover, .times-chart .dot:focus { fill: var(--ink); outline: none; }
.chart-legend { color: var(--muted); font-size: 0.8em; margin: 4px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.key { display: inline-block; vertical-align: middle; }
.trend-key { width: 16px; height: 2px; background: var(--accent, var(--ink)); }
.dot-key { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.hint-key { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
.hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3px; overflow-x: auto; }
.hm { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.hm.l0 { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.hm.l1 { background: color-mix(in srgb, var(--accent, var(--ink)) 30%, var(--panel)); }
.hm.l2 { background: color-mix(in srgb, var(--accent, var(--ink)) 55%, var(--panel)); }
.hm.l3 { background: color-mix(in srgb, var(--accent, var(--ink)) 78%, var(--panel)); }
.hm.l4 { background: var(--accent, var(--ink)); }
.best-worst { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.best-worst ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.best-worst small { color: var(--muted); }
.stats-table { max-height: 260px; overflow: auto; }
.chart-tip { position: absolute; transform: translate(-50%, -100%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 0.8em; font-weight: 700; pointer-events: none; white-space: nowrap; z-index: 2; }

.gb-rows .gb-name[tabindex] { cursor: pointer; }
.gb-rows .gb-name[tabindex]:hover, .gb-rows .gb-name[tabindex]:focus-visible { text-decoration: underline; outline: none; }
.ach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 6px; }
.forgot { margin: 2px 0 0; font-size: 0.9em; }

/* Popups never run off the screen: they fit the visible height (dvh leaves out a phone's
   address bar) and scroll inside, without scrolling the page behind them. */
dialog { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
dialog.wide { max-height: calc(100dvh - 32px); }
html:has(dialog[open]) { overflow: hidden; }
/* On phones they become sheets along the bottom of the screen: full width, the top always in
   view, and the buttons stuck to the bottom edge so Done/Close is always one tap away. */
@media (max-width: 600px) {
  dialog, dialog.wide {
    --pad-b: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: 100%; margin: auto 0 0; inset: auto 0 0 0;
    max-height: calc(100vh - 10px); max-height: calc(100dvh - 10px);
    border-width: 3px 0 0; border-radius: 20px 20px 0 0;
    padding: 18px 16px var(--pad-b);
    --board: min(100vw - 40px, 360px);
  }
  dialog[open] { animation: sheet-up 0.2s ease-out; }
  dialog > .actions:last-child, dialog > form > .actions:last-child {
    position: sticky; bottom: calc(-1 * var(--pad-b)); z-index: 2;
    margin: 10px -16px calc(-1 * var(--pad-b)); padding: 10px 16px var(--pad-b);
    background: var(--panel); box-shadow: 0 -10px 12px -12px rgba(0, 0, 0, 0.6);
  }
  dialog h2 { font-size: 1.55rem; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }

/* Keyboard shortcuts in Settings */
.keys-section { margin-top: 14px; }
.key-list { display: grid; gap: 6px; margin: 6px 0 4px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.key-btn { min-width: 6.5em; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.key-btn.capturing { background: var(--accent, var(--ink)); color: var(--bg); }
#keysReset { margin-top: 4px; }

/* The Boss tile and grade */
.g-B { --grade: #eb6f92; }
.level-tile.boss { grid-column: 1 / -1; padding: 12px 8px; background: linear-gradient(135deg, #2a1420, #3b1830); color: #ffd7e4; border-color: #eb6f92; }
.level-tile.boss.current { background: #eb6f92; color: #1a0a12; }
/* Five board sizes still fit in one row on a phone. */
.seg { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 520px) {
  .seg button { padding: 4px 7px; font-size: 0.92em; }
}
#tutTitle:focus { outline: none; }
/* Large text (low vision): the size picker wraps into a rounded box rather than a lopsided
   pill, the title never runs off the side, and the tutorial's buttons don't sit on top of
   its board (scrolling down to Skip is fine). */
.seg { border-radius: 1.1em; }

@media (max-width: 600px) {
  #tutorialDialog > .actions:last-child { position: static; box-shadow: none; margin-bottom: 0; padding-bottom: 0; }
}
h2, h3 { overflow-wrap: anywhere; hyphens: auto; }  /* "Achievements" in big text on a narrow phone */

/* Custom levels: the list, and the editor */
.custom-list { list-style: none; margin: 0 0 12px; padding: 0; }
.custom-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); flex-wrap: wrap; }
.custom-info { flex: 1 1 140px; min-width: 0; }
.custom-name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.custom-meta { display: block; color: var(--muted); font-size: 0.9em; }
.custom-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.custom-actions .btn { padding: 6px 10px; }
.mini-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 52px; height: 52px; flex: none; gap: 1px; padding: 2px; border-radius: 6px; background: var(--bg); }
.mini-board span { border-radius: 1px; }
.level-tile.custom { grid-column: 1 / -1; padding: 10px 8px; }
@media (min-width: 601px) { #editorDialog { width: min(100vw - 32px, 600px); --board: min(100vw - 78px, 520px); } }
#editorDialog .level-head h2 { flex: 1; white-space: nowrap; }
.ed-brushes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ed-brush {
  font: inherit; font-weight: 800; font-size: 0.85em; min-width: 40px; height: 40px; padding: 0 6px;
  border: 3px solid transparent; border-radius: 10px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ed-brush.picked { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg); transform: translateY(-2px); }
.ed-brush.eraser { background: var(--bg); color: var(--ink); border: 3px dashed var(--line); }
.ed-brush.eraser.picked { border: 3px solid var(--ink); }
.ed-recolour { margin-bottom: 10px; }
.ed-recolour summary { font-size: 0.9em; color: var(--muted); }
.ed-all { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.ed-swatch { aspect-ratio: 1; border: 0; border-radius: 3px; padding: 0; cursor: pointer; min-width: 0; }
.ed-swatch.used { opacity: 0.35; }
.ed-swatch.picked { opacity: 1; outline: 3px solid var(--ink); outline-offset: 1px; z-index: 1; }
@media (max-width: 520px) { .ed-all { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
#edBoard { width: min(100%, var(--board)); margin: 0 auto; touch-action: none; }
#edBoard .cell { cursor: crosshair; }
#edBoard .cell.ed-blank { background: var(--panel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 25%, transparent); }
#edBoard .cell.ed-cat { font-size: calc(var(--board) / var(--n) * 0.5); }
#edBoard .cell.ed-diff, #edBoard .cell.ed-alt { box-shadow: inset 0 0 0 3px var(--bad), inset 0 0 0 5px #fff; }
#edBoard .cell.ed-alt { font-weight: 800; font-size: calc(var(--board) / var(--n) * 0.55); }
.ed-status { min-height: 3em; margin: 10px 0 !important; }
.ed-status.good { color: #7fcf95 !important; font-weight: 700; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ed-tools .btn { padding: 6px 10px; }
.ed-tools .btn:disabled, #editorDialog .actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ed-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ed-check input { width: 18px; height: 18px; accent-color: var(--accent, var(--ink)); }
.ed-name { display: block; font-weight: 600; margin-bottom: 4px; }
.ed-name .text-input { margin-top: 4px; }

/* --- The arcade: the games menu on every page, the games page, and Way Out --- */
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -8px 0 10px; font-size: 0.9rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--accent, var(--ink)); font-weight: 700; }
.site-nav a:first-child { color: var(--ink); font-weight: 800; }
.muted { color: var(--muted); }
.game-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.game-list a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; border: 2px solid transparent; }
.game-list a:hover, .game-list a:focus-visible { border-color: var(--accent, var(--ink)); }
.game-list strong { font-size: 1.3rem; }
.game-list span { color: var(--muted); }
.arrows-wrap { position: relative; width: var(--board); margin: 0 0 14px; }
.arrows-scroll { overflow: auto; max-height: min(78vh, 78dvh); padding: 8px; background: var(--panel); border-radius: 16px; overscroll-behavior: contain; }
.arrows-scroll.fits .arrows-board { margin: 0 auto; }
.arrows-board { display: block; overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.arrows-sub { margin-top: -6px; }
.arrows-sub .zoom { display: inline-flex; gap: 4px; }
.arrows-sub .zoom .btn { padding: 2px 10px; }
.arrows-board .dot { fill: var(--muted); opacity: 0.35; }
.arrows-board .arrow { cursor: pointer; color: var(--ink); }
.arrows-board .arrow .body { fill: none; stroke: currentColor; stroke-width: 0.24; stroke-linecap: round; stroke-linejoin: round; }
.arrows-board .arrow .hit { fill: none; stroke: transparent; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.arrows-board .arrow .head { fill: currentColor; }
.arrows-board .arrow:hover { color: var(--accent, var(--ink)); }
.arrows-board .arrow.leaving { pointer-events: none; color: var(--accent, var(--ink)); }
.arrows-board .arrow.crash, .arrows-board .arrow.bumped { color: var(--bad); }
.arrows-board .arrow.hinted { animation: arrow-hint 0.6s ease-in-out 3; color: var(--accent, var(--ink)); }
@keyframes arrow-hint { 50% { opacity: 0.25; } }
.arrows-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 20px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); border-radius: 16px; }
.arrows-over h2 { margin: 0; font-size: 2rem; font-weight: 800; }
.arrows-over p { margin: 0 0 8px; color: var(--muted); }
.arrows-over .actions { justify-content: center; }
#hearts { color: var(--bad); font-size: 1.3rem; letter-spacing: 2px; }
#hearts.low { animation: arrow-hint 1s ease-in-out infinite; }
.arrows-board-list { margin: 8px 0 0; padding-left: 1.6em; }
.arrows-board-list li.me { color: var(--accent, var(--ink)); font-weight: 700; }

/* --- Carpool --- */
.kerb { display: grid; gap: 8px; margin-bottom: 8px; padding: 10px; background: var(--panel); border-radius: 16px; }
.queue { display: flex; align-items: center; gap: 4px; min-height: 26px; flex-wrap: nowrap; overflow: hidden; }
.person { width: 16px; height: 22px; flex: none; background: currentColor; border-radius: 8px 8px 4px 4px; position: relative; }
.person::before { content: ""; position: absolute; left: 3px; top: -9px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.person.front { transform: scale(1.25); margin: 0 6px 0 4px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.queue .more { font-weight: 700; margin-left: 4px; }
.queue { padding-top: 10px; }
.bays { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
.bays.nope { animation: bays-nope 0.3s; }
@keyframes bays-nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bay { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 2px dashed var(--line); border-radius: 10px; }
.bay:not(.empty) { border-style: solid; border-color: currentColor; }
.bay .van { width: 70%; height: 18px; border-radius: 6px; background: currentColor; }
.bay .seats { font-size: 0.7rem; letter-spacing: -1px; line-height: 1; word-break: break-all; text-align: center; }
.lot { display: block; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.lot .ground { fill: var(--bg); }
.lot .bay-line { stroke: var(--line); stroke-width: 0.04; }
.lot .car { cursor: pointer; transition: transform 0.26s ease-in, opacity 0.26s ease-in; }
.lot .car .body { fill: currentColor; }
.lot .car .glass { fill: var(--bg); opacity: 0.55; }
.lot .car .roof { fill: var(--bg); opacity: 0.6; }
.lot .car.leaving { pointer-events: none; opacity: 0; }
.lot .car.nope { animation: car-nope 0.3s; }
.lot .car.hinted { animation: arrow-hint 0.6s ease-in-out 3; }
@keyframes car-nope { 25% { transform: translateX(-0.08px); } 75% { transform: translateX(0.08px); } }
.carpool-wrap .arrows-scroll { max-height: none; }