/* Maxdle – Stil „kantig und plakativ“ (Retro) mit der Palette „Nachtradio“:
   harte Kanten, 2-px-Linien, versetzte Schatten in der Farbe der Schwierigkeit, Großbuchstaben. */
:root {
  --bg: #0c0d1a;
  --surface: #14162a;
  --surface-2: #1c1f38;
  --border: #282c4a;
  --text: #eceefd;
  --muted: #8a8fb4;
  --ink: #0c0d1a;          /* Schrift auf farbigen Flächen */
  --accent: #56d8f0;
  --correct: #5ee39b;
  --wrong: #ff5c74;
  --skip: #5a5f86;
  --line: 2px solid var(--text);

  --leicht: #5ee39b;
  --mittel: #ffd166;
  --schwer: #ff9a57;
  --experte: #ff5c74;
  --unmoeglich: #b48cff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Keine Rundungen – Ausnahmen (Platte, Kästchen, Punkte) setzen ihre eigene. */
body * { border-radius: 0; }

html, body { margin: 0; }

body {
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.45 ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.muted { color: var(--muted); }

h1 { font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 0 0 12px; }
.boards h2 { font-size: 14px; margin-bottom: 8px; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: var(--line);
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--text); text-decoration: none;
}
.logo-text { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.logo-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 2px solid var(--text);
  background: var(--accent); color: var(--ink); font-size: 15px;
}
.modes { display: flex; gap: 4px; margin-right: auto; }
.mode {
  background: none; border: 2px solid transparent;
  padding: 6px 12px; color: var(--muted);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.mode:hover { color: var(--text); }
.mode[aria-selected="true"] { background: var(--text); color: var(--bg); }
.icon-btn {
  background: none; border: 0; padding: 6px; color: var(--muted);
  display: grid; place-items: center;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }

/* ---- Layout ---- */
main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* ---- Difficulty tabs ---- */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.tab {
  --c: var(--accent);
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 4px;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .1s, box-shadow .1s;
}
.tab:hover { background: color-mix(in srgb, var(--c) 15%, transparent); }
.tab[aria-selected="true"] {
  background: var(--c); color: var(--ink); border-color: var(--c);
  box-shadow: 4px 4px 0 var(--text); transform: translate(-2px, -2px);
}
.tab .state { margin-left: 4px; font-size: 11px; }
.tab[data-state="won"] .state::after { content: "✓"; }
.tab[data-state="lost"] .state::after { content: "✗"; }

/* ---- Cards ---- */
.card {
  --c: var(--accent);
  background: var(--surface);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--c);
  padding: 20px;
}
.game-head { display: flex; justify-content: space-between; align-items: flex-start; }
.game-head p { margin: 2px 0 0; font-size: 14px; }

/* ---- Cover (normal: eckig; Standard: Schallplatte, siehe unten) ---- */
.cover {
  position: relative;
  width: min(180px, 50vw);
  aspect-ratio: 1;
  margin: 20px auto;
  display: grid; place-items: center;
  border: var(--line);
  box-shadow: 5px 5px 0 var(--c);
  background: var(--surface-2);
  color: var(--muted);
  overflow: hidden;
}
.cover .note { width: 40%; height: 40%; opacity: .6; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cover.revealed img { opacity: 1; }

/* Schallplatte: das eine runde Element. Nur Etikett und Albumcover drehen sich, solange der Schnipsel läuft –
   Rillen, Glanz und Schatten bleiben stehen wie bei einer echten Platte. Nach dem Aufdecken wird das Albumcover
   zur Platte. Tempo aus config.json (--vinyl-turn), „vinyl-still“ = steht. */
body[data-cover="vinyl"] #cover {
  width: min(210px, 56vw);
  border-radius: 50%;
  background:
    conic-gradient(from 30deg, transparent 0 8%, rgb(255 255 255 / .08) 13%, transparent 20% 50%, rgb(255 255 255 / .08) 63%, transparent 70%),
    repeating-radial-gradient(circle, #0f1024 0 2px, #1b1d36 2px 4px);
  box-shadow: 6px 6px 0 var(--c);
}
body[data-cover="vinyl"] #cover .note { display: none; }
body[data-cover="vinyl"] #cover::before { /* Etikett in der Farbe der Schwierigkeit, mit Streifen damit man die Drehung sieht */
  content: ""; position: absolute; inset: 31%; border-radius: 50%;
  border: 2px solid var(--ink);
  background:
    linear-gradient(var(--ink) 0 0) center 28% / 46% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) center 36% / 30% 3px no-repeat,
    var(--c);
}
body[data-cover="vinyl"] #cover::after { /* Mittelloch, auch über dem Albumcover */
  content: ""; position: absolute; z-index: 2; inset: 46.5%; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--text);
}
body[data-cover="vinyl"] #cover img { border-radius: 50%; }
body[data-cover="vinyl"] #cover::before, body[data-cover="vinyl"] #cover img { animation: record var(--vinyl-turn, 1.8s) linear infinite paused; }
body[data-cover="vinyl"] #cover.spinning::before, body[data-cover="vinyl"] #cover.spinning img { animation-play-state: running; }
body.vinyl-still[data-cover="vinyl"] #cover::before, body.vinyl-still[data-cover="vinyl"] #cover img { animation: none; }
@keyframes record { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body[data-cover="vinyl"] #cover::before, body[data-cover="vinyl"] #cover img { animation: none; } }

/* ---- Progress bar: leer = gesperrt, getönt = freigeschaltet, voll = gehört ---- */
.bar {
  position: relative;
  height: 14px;
  border: var(--line);
  overflow: hidden;
}
.bar-unlocked, .bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; }
.bar-unlocked { background: color-mix(in srgb, var(--c) 30%, transparent); transition: width .3s; }
.bar-fill { background: var(--c); }
.bar .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.bar.over .tick { display: none; }

/* Solange der Song offen ist, spielt ein Klick auf einen freigeschalteten Abschnitt ab dessen Anfang. Die Knöpfe ragen
   über die schmale Leiste hinaus, damit man sie auch auf dem Handy trifft. */
.bar .seg { display: none; }
.bar.seekable { overflow: visible; }
.bar.seekable .seg {
  display: block; position: absolute; z-index: 1; top: -10px; bottom: -10px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
}
.bar.seekable .seg:disabled { cursor: default; }
.bar .seg::after { content: ""; position: absolute; inset: 10px 0; }
.bar .seg:hover:not(:disabled)::after { background: color-mix(in srgb, var(--text) 30%, transparent); }
.bar .seg:focus-visible { outline: none; }
.bar .seg:focus-visible::after { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---- Player: Zahnrad, Play (+ Neustart, wenn der Song vorbei ist), Zeit ---- */
.player {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 16px 0 20px;
}
.player-side { justify-self: start; display: flex; gap: 8px; }
.square-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: var(--line); background: var(--surface-2); color: var(--text);
  box-shadow: 3px 3px 0 var(--text); transition: transform .08s, box-shadow .08s;
}
.square-btn:hover { background: var(--border); }
.square-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text); }
.play-buttons { display: flex; gap: 14px; }
.play {
  width: 60px; height: 60px;
  border: var(--line); background: var(--c); color: var(--ink);
  box-shadow: 4px 4px 0 var(--text);
  display: grid; place-items: center;
  transition: transform .08s, box-shadow .08s;
}
.play:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--text); }
.play.restart { background: var(--surface-2); color: var(--text); }
.play .i-load { display: none; animation: spin 1s linear infinite; }
.play .i-pause { display: none; }
.play.playing .i-play { display: none; }
.play.playing .i-pause { display: block; }
.play.loading .i-play, .play.loading .i-pause { display: none; }
.play.loading .i-load { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.duration {
  justify-self: end;
  font: 800 17px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);
}

/* ---- Attempts ---- */
.attempts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.attempts li {
  display: flex; gap: 12px; align-items: center;
  min-height: 40px; padding: 8px 12px;
  border: 2px solid var(--border);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.attempts li::before { content: attr(data-n); color: var(--text); width: 1ch; font-weight: 900; }
.attempts li.wrong { border-color: var(--wrong); color: var(--wrong); }
.attempts li.skip { color: var(--skip); }
.attempts li.correct { border-color: var(--correct); color: var(--correct); background: color-mix(in srgb, var(--correct) 12%, transparent); }
.attempts li.current { border-color: var(--c); border-style: dashed; }

/* ---- Text inputs, search ---- */
.search { position: relative; }
.search input, .text-input {
  width: 100%;
  padding: 12px 14px;
  border: var(--line);
  background: var(--bg);
  font-weight: 600;
  outline: none;
}
.search input:focus, .text-input:focus { border-color: var(--c); box-shadow: 4px 4px 0 var(--c); }
#suggestions {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--surface-2);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--c);
  z-index: 5;
}
#suggestions li { padding: 8px 10px; cursor: pointer; font-size: 14px; }
#suggestions li span { color: var(--muted); }
#suggestions li[aria-selected="true"], #suggestions li:hover { background: var(--border); }
#suggestions .empty { color: var(--muted); cursor: default; }

/* ---- Buttons ---- */
.actions { display: flex; gap: 8px; margin-top: 10px; }
.actions .btn { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px;
  border: var(--line);
  background: var(--surface-2);
  box-shadow: 3px 3px 0 var(--text);
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text); text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text); }
.btn.primary { background: var(--c); color: var(--ink); }
.btn:disabled { opacity: .45; box-shadow: none; }

/* ---- Reveal ---- */
.reveal { text-align: center; }
.reveal .result { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c); margin: 0 0 8px; }
.reveal .song-title { font-size: 24px; font-weight: 900; margin: 0; }
.reveal .muted { margin: 2px 0 6px; }

.next-level { display: flex; justify-content: flex-end; margin-top: 16px; }
.credit { text-align: center; font-size: 12px; margin-top: 24px; }

/* ---- Day summary (sechster Tab, sobald alle Tagessongs beendet sind) ---- */
.day-summary > p { margin: 2px 0 0; font-size: 14px; }
.sum-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.sum-stats > div { display: grid; gap: 2px; padding: 14px 16px; border: var(--line); }
.sum-stats strong { font-size: 34px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum-stats span { color: var(--muted); font-size: 13px; }
.sum-rows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.sum-rows li {
  display: grid; grid-template-columns: 76px auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px; border: 2px solid var(--border);
}
.sum-level { color: var(--c); font-weight: 600; font-size: 13px; }
.squares { display: flex; gap: 3px; }
.squares i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 2px solid var(--border); }
.squares i.correct { background: var(--correct); border-color: var(--correct); }
.squares i.wrong { background: var(--wrong); border-color: var(--wrong); }
.squares i.skip { background: var(--skip); border-color: var(--skip); }
.sum-detail { display: grid; justify-items: end; min-width: 0; font-size: 13px; }
.sum-detail .won { color: var(--correct); font-weight: 600; }
.sum-detail .lost { color: var(--wrong); font-weight: 600; }
.sum-detail .song { max-width: 100%; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Leaderboard ---- */
.boards > p { margin: 2px 0 16px; font-size: 14px; }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.board-rule { margin: -4px 0 8px; font-size: 12px; color: var(--muted); }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.board li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--border);
  font-size: 14px;
}
.board .rank { color: var(--muted); min-width: 2ch; flex: none; }
.board .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .detail { color: var(--muted); font-size: 12px; white-space: nowrap; }
.board strong { color: var(--c); font-variant-numeric: tabular-nums; }
.board li.me { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: 3px 3px 0 var(--c); }
.board .empty { color: var(--muted); border-style: dashed; }
.board .gap { justify-content: center; padding: 0; border: 0; color: var(--muted); line-height: 1; }
/* Ten rows visible (each 40 px + 4 px gap), the rest up to place 100 by scrolling; room on the right and below
   for the shadow of the own row. */
.board.scroll {
  max-height: calc(10 * 40px + 9 * 4px + 4px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 4px 4px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.board.scroll li { height: 40px; align-items: center; }

/* ---- Settings dialog ---- */
dialog {
  background: var(--surface);
  color: var(--text);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--accent);
  padding: 20px;
  width: min(360px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog .btn { width: 100%; --c: var(--accent); }
/* Settings: the options scroll, "Ton neu starten" and "Fertig" always stay visible at the bottom */
#settings { padding: 0; overflow: hidden; max-height: min(760px, calc(100dvh - 32px)); }
#settings[open] { display: flex; flex-direction: column; }
.settings-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 4px; scrollbar-width: none; }
.settings-scroll::-webkit-scrollbar { display: none; } /* scrolls by wheel, touch and keyboard, without a visible bar */
.settings-footer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 14px 20px 20px; border-top: var(--line); background: var(--surface);
}
.settings-footer .btn { padding: 11px 4px; letter-spacing: .02em; white-space: nowrap; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.audio-status { margin: 0 0 8px; font-size: 13px; }

/* Optionen sind kantige Kacheln: die gewählte bekommt Akzentrahmen und harten Schatten. Auswahlpunkte sind eckige
   Kästchen – Radio mit gefülltem Quadrat, Checkbox mit Haken. */
.radio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 2px solid var(--border); margin-bottom: 6px;
  cursor: pointer; font-weight: 600; transition: border-color .1s, box-shadow .1s;
}
.radio:hover:not(.disabled) { border-color: var(--muted); }
.radio:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 3px 3px 0 var(--accent);
}
.radio.disabled { color: var(--muted); cursor: default; font-weight: 400; }
.radio input {
  -webkit-appearance: none; appearance: none;
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--text); background: var(--bg);
  cursor: inherit;
}
.radio input::before { content: ""; transform: scale(0); transition: transform .1s; }
.radio input[type="radio"]::before { width: 10px; height: 10px; background: var(--accent); }
.radio input[type="checkbox"]::before {
  width: 12px; height: 12px; background: var(--ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.radio input:checked::before { transform: scale(1); }
.radio input[type="checkbox"]:checked { background: var(--accent); }
.radio input:disabled { border-color: var(--muted); }
.radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.soon {
  margin-left: auto; font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--muted); color: var(--muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

/* Lautstärke und Erscheinungsjahr: umrandete Spur mit Skalenstrichen, eckige Schieber mit hartem Schatten */
.volume-setting { padding: 10px 12px; border: 2px solid var(--border); margin-bottom: 10px; }
.vinyl-speed { margin: 10px 0 0; }
.retro-range {
  --fill: 70%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 30px; margin: 6px 0 0; padding: 0;
  background: none; cursor: pointer;
}
.retro-range::-webkit-slider-runnable-track {
  height: 16px; border: var(--line); border-radius: 0;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / var(--fill) 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, var(--border) 9px 11px),
    var(--bg);
}
.retro-range::-moz-range-track {
  height: 12px; border: var(--line); border-radius: 0;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / var(--fill) 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, var(--border) 9px 11px),
    var(--bg);
}
.retro-range::-webkit-slider-thumb, .dual-range input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 28px; border-radius: 0;
  background: var(--text); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--accent);
}
.retro-range::-moz-range-thumb, .dual-range input::-moz-range-thumb {
  width: 12px; height: 24px; border-radius: 0;
  background: var(--text); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--accent);
}
.retro-range::-webkit-slider-thumb { margin-top: -8px; }
.retro-range:focus-visible, .dual-range input:focus-visible { outline: none; }
.retro-range:focus-visible::-webkit-slider-thumb, .dual-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.retro-range:focus-visible::-moz-range-thumb, .dual-range input:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Year range with two handles (training settings) */
.year-range { padding: 10px 12px; border: 2px solid var(--border); }
.year-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.year-range p { margin: 0; font-size: 13px; line-height: 1.5; }
.year-range p strong { color: var(--text); }
.dual-range { position: relative; height: 32px; margin: 8px 0 6px; }
.dual-track {
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 16px; transform: translateY(-50%);
  border: var(--line);
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--border) 9px 11px), var(--bg);
}
.dual-fill { position: absolute; top: 0; bottom: 0; background: var(--accent); }
.dual-range input {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 32px; margin: 0; padding: 0;
  background: none; pointer-events: none; /* only the handles react, so both sliders can share one track */
  -webkit-appearance: none; appearance: none;
}
.dual-range input::-webkit-slider-runnable-track { height: 32px; background: none; }
.dual-range input::-moz-range-track { height: 32px; background: none; }
.dual-range input::-webkit-slider-thumb { pointer-events: auto; margin-top: 2px; cursor: grab; }
.dual-range input::-moz-range-thumb { pointer-events: auto; cursor: grab; }

/* Report window (training): what should change, then the difficulty (within the song's language) or the shift */
.report-intro { margin: 0 0 12px; font-size: 14px; }
.report-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
dialog .report-choice .btn { padding: 10px 6px; font-size: 12px; }
.report-choice .btn[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.report-panel { margin-bottom: 14px; }
.report-label { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.report-levels { display: grid; gap: 6px; }
.report-level {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-align: left;
  border: 2px solid var(--c); background: transparent; color: var(--c);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.report-level strong { font-size: 16px; line-height: 1; width: 1ch; }
.report-level:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 15%, transparent); }
.report-level[aria-pressed="true"] { background: var(--c); color: var(--ink); box-shadow: 3px 3px 0 var(--text); }
.report-level:disabled { opacity: .4; }
.report-delete { --c: var(--wrong); margin-top: 6px; }
#report .actions .btn { width: auto; }
#report .report-listen { margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  border: 2px solid var(--bg); box-shadow: 4px 4px 0 var(--accent);
  padding: 10px 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  z-index: 10;
}

/* ---- Account (icon in the top bar, account page) ---- */
.icon-btn.signed-in { color: var(--accent); }
.back-link { margin-left: auto; padding: 6px 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--text); }
main.account { display: grid; gap: 20px; }
.account .card > p { margin: 10px 0 0; font-size: 14px; }
.account .card > p strong { color: var(--text); }
.account h2 { font-size: 14px; margin: 24px 0 8px; }
.account .card > p + .btn { margin-top: 12px; }
.profile-boards h2 { margin: 24px 0 4px; }
.profile-boards h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.profile-boards > .board-rule { margin: 0 0 12px; }
#pb-tabs { margin-bottom: 16px; }
.account form { display: grid; gap: 10px; margin-top: 16px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.account-actions .btn { flex: 1 1 140px; }
.account form .account-actions { margin-top: 4px; }
.account-kicker { margin: 0 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; }
.account-footer { margin-top: 28px; padding-top: 18px; border-top: var(--line); }
.card.security { --c: var(--skip); }
.security h1 { font-size: 20px; }
.security h2:first-of-type { margin-top: 20px; }
.account .btn.danger { background: transparent; border-color: var(--wrong); color: var(--wrong); box-shadow: 3px 3px 0 var(--wrong); }
.link-btn {
  display: block; margin-top: 14px; padding: 0; border: 0; background: none;
  color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }
/* "?" next to a heading with a hint below it (hover, focus or tap) */
.with-tip { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tip-btn {
  flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--text); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 900; box-shadow: 2px 2px 0 var(--accent); cursor: help;
}
.tip {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
  padding: 10px 12px; border: var(--line); background: var(--bg); box-shadow: 4px 4px 0 var(--accent);
  font-size: 13px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--text);
}
.with-tip:hover .tip, .tip-btn:focus-visible + .tip, .with-tip.open .tip { display: block; }
.code-list {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.code-list li {
  padding: 8px 10px; border: 2px solid var(--border); background: var(--bg);
  font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-align: center;
}
.passkey-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.passkey-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid var(--border); }
.passkey-list .info { flex: 1; min-width: 0; font-size: 14px; }
.passkey-list .sub { color: var(--muted); font-size: 12px; }
.passkey-list .btn { padding: 6px 10px; font-size: 12px; box-shadow: 2px 2px 0 var(--text); }

/* ---- Small screens ---- */
/* Logo, three modes and three icons need about 640 px: below that the modes get their own row. */
@media (max-width: 680px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .logo { margin-right: auto; }
  .modes { order: 3; flex-basis: 100%; margin: 0; }
  .mode { flex: 1; }
}
@media (max-width: 520px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  /* Six tabs (overall or result + five difficulties): two tidy rows of three. */
  .tabs:has(#tab-gesamt:not([hidden])), .tabs:has(#tab-ergebnis:not([hidden])), #pb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .code-list { grid-template-columns: minmax(0, 1fr); }
  .tabs { gap: 4px; }
  .tab { font-size: 10px; letter-spacing: 0; }
  /* Two buttons in the middle: everything a bit narrower, so "Ganzer Clip" fits on one line */
  .play-buttons { gap: 10px; }
  .play { width: 52px; height: 52px; }
  /* Training: gear and report button left of play, plus restart – a little smaller, with room in between */
  .player { column-gap: 6px; }
  .player-side { gap: 6px; }
  .square-btn { width: 38px; height: 38px; }
  .duration { font-size: 13px; white-space: nowrap; }
  /* Day summary lines: narrower label and squares, so result and song keep their room */
  .sum-rows li { grid-template-columns: 62px auto minmax(0, 1fr); gap: 8px; padding: 8px; }
  .sum-level { font-size: 12px; }
  .squares { gap: 2px; }
  .squares i { width: 10px; height: 10px; border-radius: 3px; }
  .sum-detail { font-size: 12px; }
}