: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;
}
/* Rosé Pine Moon (rosepinetheme.com/palette), the default. The colours above are
   "shelvacu mode", kept for anyone who'd rather have them (Settings). */
:root:not([data-palette="shelvacu"]) {
  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: 2.6rem;
  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; }
.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;
}
.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 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 an outline and 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-edges]::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  border: 0 solid var(--ink);
}
body.colour-help .cell[data-edges~="t"]::before { border-top-width: 4px; }
body.colour-help .cell[data-edges~="b"]::before { border-bottom-width: 4px; }
body.colour-help .cell[data-edges~="l"]::before { border-left-width: 4px; }
body.colour-help .cell[data-edges~="r"]::before { border-right-width: 4px; }
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; }