:root {
  --accent: #c0392b;
  --select: #f2c14e;
  --ok: rgba(70, 160, 90, 0.4);
  --bad: rgba(200, 60, 50, 0.4);
  --u: 48px; /* størrelse på én rute, settes fra JS */
}

/* ---------- Temaer (låses opp med milepæler) ----------
   Fargene settes på et element med data-theme, så de samme variablene
   også kan brukes til forhåndsvisningene i milepæl-vinduet. */

:root, [data-theme="standard"] {
  --bg: #efe8dc;
  --bg-image: none;
  --ink: #2c241f;
  --muted: #6b5d52;
  --frame: #2b2522;
  --cell: #ead6b5;
  --cell-line: #5c4836;
  --btn-bg: #fbf7f0;
  --btn-hover: #fff;
  --btn-border: #b9a894;
  --card: #fffaf2;
  --tile: #f6ecdc;
  --cal-empty: #e6dccd;
  --cal-started: #c9b8a3;
  --bar: #b9a894;
  --note: #fbeedd;
  --note-ok: #e3f1e4;
  --ok-ink: #2e7d32;
  --tray-line: rgba(92, 72, 54, 0.25);
  --overlay: rgba(30, 22, 16, 0.45);
  color-scheme: light;
}

[data-theme="skog"] {
  --bg: #dfe7d3;
  --bg-image: linear-gradient(180deg, #e9f0de, #c9d8b9);
  --ink: #1f2a1c;
  --muted: #4f5f48;
  --frame: #2d3a28;
  --btn-bg: #f3f7ee;
  --btn-border: #a3b394;
  --card: #f7faf2;
  --tile: #e4ecd9;
  --cal-empty: #d6e0ca;
  --cal-started: #b4c3a5;
  --bar: #a3b394;
  --note: #eef0d8;
  --note-ok: #d9ecd5;
  --tray-line: rgba(45, 58, 40, 0.25);
  --overlay: rgba(20, 30, 18, 0.45);
}

[data-theme="hav"] {
  --bg: #d6e6ee;
  --bg-image: linear-gradient(180deg, #e6f1f6, #b6d2e0);
  --ink: #15252e;
  --muted: #45606f;
  --frame: #1d3341;
  --btn-bg: #f0f6f9;
  --btn-border: #98b3c2;
  --card: #f4f9fb;
  --tile: #dfecf2;
  --cal-empty: #cadce5;
  --cal-started: #a7bfcc;
  --bar: #98b3c2;
  --note: #e6eef0;
  --note-ok: #d8ece0;
  --tray-line: rgba(29, 51, 65, 0.25);
  --overlay: rgba(12, 26, 36, 0.45);
}

[data-theme="solnedgang"] {
  --bg: #f4b9a0;
  --bg-image: linear-gradient(180deg, #ffe2b8 0%, #f7b39b 50%, #d39cc4 100%);
  --ink: #2e1a25;
  --muted: #5a3549;
  --frame: #3b2233;
  --btn-bg: rgba(255, 248, 244, 0.85);
  --btn-border: #c99aa8;
  --card: #fff5f0;
  --tile: #fbe3dc;
  --cal-empty: #f0d6cf;
  --cal-started: #d9b3b0;
  --bar: #d29aa4;
  --note: #fde8d8;
  --tray-line: rgba(59, 34, 51, 0.25);
  --overlay: rgba(40, 18, 30, 0.45);
}

[data-theme="natt"] {
  --bg: #151925;
  --bg-image:
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 23% 62%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 37% 8%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 52% 84%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 66% 22%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 78% 55%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 91% 11%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 95% 76%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 4% 90%, rgba(255, 255, 255, 0.6), transparent),
    linear-gradient(180deg, #1d2335, #0e1119);
  --ink: #e9e6e1;
  --muted: #a3a9b6;
  --frame: #3a2f28;
  --cell: #e0cba7;
  --btn-bg: #252b39;
  --btn-hover: #2f3647;
  --btn-border: #444d60;
  --card: #1e2330;
  --tile: #283041;
  --cal-empty: #2c3343;
  --cal-started: #4a5366;
  --bar: #6b7590;
  --note: #3a3326;
  --note-ok: #1f3a28;
  --ok-ink: #84d494;
  --tray-line: rgba(255, 255, 255, 0.14);
  --overlay: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Bakgrunner med foto eller mønster. --bg-size/--bg-pos styrer hvordan bildet fylles ut,
   og --plate legger et halvgjennomsiktig felt bak teksten som ligger rett på bakgrunnen. */
[data-theme="oksen"] {
  --bg: #3f78b8;
  --bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35)),
    url(bileter/oksen.jpg);
  --bg-size: cover;
  --bg-pos: 30% center;
  --plate: rgba(246, 250, 253, 0.86);
  --ink: #142333;
  --muted: #3c5368;
  --frame: #1c2f44;
  --btn-bg: rgba(246, 250, 253, 0.92);
  --btn-hover: #fff;
  --btn-border: #8ea8c0;
  --card: #f5f9fc;
  --tile: #e2ecf4;
  --cal-empty: #d3e0eb;
  --cal-started: #a9bfd1;
  --bar: #8ea8c0;
  --note: #e8eff5;
  --note-ok: #d8ece0;
  --tray-line: rgba(255, 255, 255, 0.75);
  --overlay: rgba(10, 24, 40, 0.5);
}

[data-theme="midtfjell"] {
  --bg: #2d3a2a;
  --bg-image:
    linear-gradient(180deg, rgba(14, 20, 14, 0.25), rgba(14, 20, 14, 0.55)),
    url(bileter/midtfjell.jpg);
  --bg-size: cover;
  --bg-pos: center;
  --plate: rgba(22, 30, 22, 0.8);
  --ink: #eef0e6;
  --muted: #c3cbb6;
  --frame: #2a2620;
  --cell: #e3d3b2;
  --btn-bg: rgba(30, 40, 30, 0.88);
  --btn-hover: #34452f;
  --btn-border: #5f7257;
  --card: #1f2a1e;
  --tile: #2b3829;
  --cal-empty: #2f3c2d;
  --cal-started: #4f6049;
  --bar: #7a9070;
  --note: #393425;
  --note-ok: #1f3a28;
  --ok-ink: #8fd99c;
  --tray-line: rgba(255, 255, 255, 0.55);
  --overlay: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

[data-theme="jul"] {
  /* Mønster: Satheesh Sankaran, Pixabay (se kreditering i milepæl-vinduet). */
  --bg: #02222c;
  --bg-image: url(bileter/satheeshsankaran-christmas-6809681_1280.png);
  --bg-size: 640px auto;
  --plate: rgba(2, 28, 36, 0.88);
  --ink: #f3efe6;
  --muted: #b9cbcc;
  --frame: #4a1a22;
  --cell: #f1e4c8;
  --cell-line: #6b4a2e;
  --btn-bg: #0b3440;
  --btn-hover: #11434f;
  --btn-border: #c9a24a;
  --card: #062b36;
  --tile: #0d3a46;
  --cal-empty: #10404c;
  --cal-started: #2c5f69;
  --bar: #c9a24a;
  --note: #3d1d24;
  --note-ok: #12443a;
  --ok-ink: #8fe0a8;
  --tray-line: rgba(243, 239, 230, 0.5);
  --overlay: rgba(0, 10, 14, 0.6);
  color-scheme: dark;
}

/* Forhåndsvisningene bruker små utgaver av fotoene, så milepæl-vinduet laster raskt. */
.theme-swatch[data-theme="oksen"] { --bg-image: url(bileter/oksen-liten.jpg); }
.theme-swatch[data-theme="midtfjell"] { --bg-image: url(bileter/midtfjell-liten.jpg); }
.theme-swatch[data-theme="jul"] { --bg-size: 200px auto; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-size: var(--bg-size, auto);
  background-position: var(--bg-pos, 0 0);
  background-attachment: fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--plate, transparent);
}

h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.04em; }
.goal { margin: 2px 0 0; color: var(--muted); }
.goal strong { color: var(--ink); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--btn-hover); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible { outline: 3px solid var(--select); outline-offset: 2px; }

.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 4.5ch;
  text-align: center;
}

#btn-looks { position: relative; }
#btn-looks.has-new::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}

/* Kort melding nederst på skjermen, som synes også når statuslinjen er rullet ut av syne. */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--select);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
  z-index: 900;
  pointer-events: none; /* skal aldri stå i veien for brikkene under */
  animation: fade 0.25s ease;
}
.toast[hidden] { display: none; }

.consent {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--btn-border);
  font-size: 0.9rem;
  line-height: 1.45;
  z-index: 950;
  animation: fade 0.25s ease;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 10px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.privacy-note { font-size: 0.85rem; color: var(--muted); }
.privacy-note button { margin-left: 4px; padding: 2px 8px; font-size: 0.85rem; }

/* Får øye på knappen når spilleren ser ut til å lete etter den. */
.nudge { animation: nudge 0.8s ease-in-out 4; }
@keyframes nudge {
  50% { box-shadow: 0 0 0 4px var(--select); transform: scale(1.08); }
}

.toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }

main { padding: 0 16px 24px; }

#stage { display: flex; justify-content: center; }

#playfield {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Brett ---------- */

.board {
  position: absolute;
  padding: calc(var(--u) * 0.35);
  background: var(--frame);
  border-radius: calc(var(--u) * 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(7, var(--u));
  grid-template-rows: repeat(7, var(--u));
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cell);
  box-shadow: inset 0 0 0 0.5px var(--cell-line);
  font-size: calc(var(--u) * 0.36);
  color: #1e1712;
}
.cell.month { font-size: calc(var(--u) * 0.32); }

.show-goal .cell.goal {
  box-shadow: inset 0 0 0 0.5px var(--cell-line), inset 0 0 0 calc(var(--u) * 0.06) var(--accent);
  font-weight: 700;
}

.brand {
  grid-column: 4 / span 4;
  grid-row: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfb3a6;
  font-weight: 700;
  font-size: calc(var(--u) * 0.28);
  letter-spacing: 0.05em;
}

.tray {
  position: absolute;
  border: 2px dashed var(--tray-line);
  border-radius: calc(var(--u) * 0.3);
}

/* ---------- Brikker ---------- */

.piece {
  position: absolute;
  pointer-events: none; /* bare selve rutene i brikken skal kunne klikkes */
  transition: left 0.15s ease, top 0.15s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  outline: none;
}
.piece svg { display: block; overflow: visible; }
.piece .hit { pointer-events: visiblePainted; cursor: grab; touch-action: none; }
.piece .edge { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.04; stroke-linecap: square; }

.piece.selected .edge { stroke: var(--select); stroke-width: 0.09; }
.piece:focus-visible .edge { stroke: var(--select); stroke-width: 0.12; }

.piece.dragging {
  transition: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4));
}
.piece.dragging .hit { cursor: grabbing; }

.piece.kbd { transition: left 0.08s ease, top 0.08s ease; }
.piece.kbd.invalid { opacity: 0.75; }
.piece.kbd.invalid .edge { stroke: var(--accent); stroke-width: 0.1; }

.piece .badge {
  font-size: 0.42px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.piece.flash-in { animation: flash-in 1.4s ease-out; }
.piece.flash-out { animation: flash-out 1.4s ease-out; }
@keyframes flash-in {
  0%, 60% { filter: drop-shadow(0 0 calc(var(--u) * 0.2) var(--select)) drop-shadow(0 0 calc(var(--u) * 0.1) var(--select)); }
}
@keyframes flash-out {
  0%, 60% { filter: drop-shadow(0 0 calc(var(--u) * 0.2) var(--accent)) drop-shadow(0 0 calc(var(--u) * 0.1) var(--accent)); }
}

.piece.shake { animation: shake 0.3s; }
@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.ghost {
  position: absolute;
  pointer-events: none;
}
.ghost rect { fill: var(--ok); }
.ghost.invalid rect { fill: var(--bad); }

/* ---------- Status og hjelp ---------- */

.status {
  width: fit-content;
  max-width: 100%;
  text-align: center;
  min-height: 1.5em;
  margin: 12px auto;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--plate, transparent);
  color: var(--muted);
}
.status:empty { background: none; }
.status.solved { color: var(--ok-ink); font-weight: 600; }

.help {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--plate, transparent);
  color: var(--muted);
  font-size: 0.95rem;
}
.help summary { cursor: pointer; text-align: center; }
.help ul { padding-left: 20px; }
.help li { margin: 4px 0; }

kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--btn-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--btn-bg);
  font-size: 0.85em;
}

/* ---------- Gratulasjon ---------- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
  z-index: 1000;
  animation: fade 0.25s ease;
}
.modal[hidden] { display: none; }

.modal-card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: pop 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-card h2 { margin: 4px 0 8px; font-size: 1.8rem; }
.modal-card p { margin: 0 0 20px; line-height: 1.5; }
.modal-emoji { font-size: 3rem; }
.modal-card .win-help {
  margin-top: -8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--note);
  font-weight: 600;
}
.modal-card .win-help.unaided { background: var(--note-ok); color: var(--ok-ink); }

.modal-card .win-streak { margin-top: -8px; font-weight: 600; }
.win-unlock {
  margin: -8px 0 20px;
  padding: 10px 12px;
  border: 2px solid var(--select);
  border-radius: 10px;
  background: var(--tile);
  line-height: 1.5;
}
.win-unlock button { margin-top: 8px; }
.win-intro { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--muted); }
.win-sync {
  margin: 0 0 20px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tile);
  font-size: 0.9rem;
  line-height: 1.5;
}
.win-sync .modal-actions { margin-top: 8px; }
.win-sync .error { display: block; margin-top: 8px; color: var(--accent); }
.modal-card .win-next { margin-top: -8px; font-size: 0.9rem; color: var(--muted); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- Statistikk ---------- */

.stats-card, .looks-card {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 20px;
}
.stats-card h3, .looks-card h3 {
  margin: 20px 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.modal-card .stats-empty { margin: 16px 0 24px; color: var(--muted); }
.modal-card .stats-note { margin: 16px 0; font-size: 0.85rem; color: var(--muted); }
.modal-card .credits { margin-top: -8px; font-size: 0.75rem; }
.credits a { color: inherit; }

.backup { margin: 20px 0; padding-top: 4px; border-top: 1px solid var(--cal-empty); }
.backup .stats-note { margin: 0 0 12px; }
.modal-card .backup-status { margin: 12px 0 0; font-weight: 600; color: var(--ink); }
.modal-card .backup-status.error { color: var(--accent); }
.backup + .backup { margin-top: 0; }
.modal-card .sync-user { margin: 0 0 4px; word-break: break-word; }
.modal-card .sync-privacy { margin: 12px 0 0; font-size: 0.78rem; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.tile { padding: 10px 4px; border-radius: 10px; background: var(--tile); }
.tile-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-label { font-size: 0.78rem; color: var(--muted); line-height: 1.2; }

.bars { display: grid; gap: 4px; text-align: left; font-size: 0.85rem; }
.bar-row { display: grid; grid-template-columns: 5.5em 1fr 2.5em; align-items: center; gap: 8px; }
.bar-label { color: var(--muted); white-space: nowrap; }
.bar-track { height: 14px; }
.bar { display: block; height: 100%; border-radius: 4px; background: var(--bar); }
.bar-row.today .bar { background: var(--accent); }
.bar-row.today .bar-label { color: var(--ink); font-weight: 600; }
.bar-count { text-align: right; font-variant-numeric: tabular-nums; }

.calendar {
  display: inline-grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 3px;
}
.cal-day { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--cal-empty); }
.cal-day.unaided { background: #4c9a5b; }
.cal-day.aided { background: #e0a43a; }
.cal-day.started { background: var(--cal-started); box-shadow: inset 0 0 0 2px var(--cal-empty); }
.cal-day.is-today { outline: 2px solid var(--ink); outline-offset: 1px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .cal-day { width: 11px; height: 11px; }

/* ---------- Milepæler ---------- */

.looks-card { max-width: 520px; }
.modal-card .looks-summary { margin: 0 0 8px; }

.progress { display: block; height: 6px; border-radius: 3px; background: var(--cal-empty); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.progress.total { height: 10px; border-radius: 5px; }

.looks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  text-align: left;
}

.look {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--tile);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: left;
}
button.look:hover:not(:disabled) { background: var(--tile); border-color: var(--btn-border); }
.look[aria-pressed="true"], button.look[aria-pressed="true"]:hover { border-color: var(--accent); }

.look-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cal-empty);
}
.look-preview svg { height: 70%; }
.look.locked .look-preview > :not(.look-lock) { filter: grayscale(0.85); opacity: 0.5; }
.look-lock { position: absolute; font-size: 1.4rem; }
.look[aria-pressed="true"] .look-preview::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.theme-swatch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-size: var(--bg-size, auto);
  background-position: var(--bg-pos, 0 0);
}
.mini-board {
  width: 36px;
  height: 36px;
  border: 5px solid var(--frame);
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, var(--cell-line) 5px 6px),
    repeating-linear-gradient(0deg, transparent 0 5px, var(--cell-line) 5px 6px),
    var(--cell);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.look-name { font-size: 0.9rem; font-weight: 600; }
.look-new {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--select);
  color: #2c241f;
  font-size: 0.7rem;
  vertical-align: 1px;
}
.look-req { color: var(--muted); }
.look-count { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }

#confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1001;
}

/* ---------- Mobil ---------- */

@media (max-width: 600px) {
  .top { padding: 8px 12px; gap: 6px 16px; }
  h1 { font-size: 1.15rem; }
  .goal { font-size: 0.9rem; }
  .toolbar { gap: 6px; font-size: 0.9rem; }
  .toolbar button { padding: 5px 9px; }
  main { padding: 0 12px 24px; }
  .status { margin: 8px 0; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .piece, .piece.kbd { transition: none; }
  .nudge { animation: none; box-shadow: 0 0 0 4px var(--select); }
  .modal, .modal-card { animation: none; }
}