:root {
  --bg: #140a08; /* Glut, damit beim Laden nichts aufblitzt */
  --panel: rgba(20, 22, 52, 0.78);
  --panel-border: rgba(150, 160, 255, 0.14);
  --text: #e8eaff;
  --muted: #8b90c4;
  --accent: #8b7bff;
  --accent2: #45e0d0;
  --title-a: #7ef0e2; --title-b: #a58bff; --title-c: #ff7ac8; --title-glow: rgba(150, 120, 255, 0.45);
  --button: rgba(255, 255, 255, 0.06); --button-border: rgba(255, 255, 255, 0.1); --button-hover: rgba(255, 255, 255, 0.12);
  --primary-a: #6d5cff; --primary-b: #3cc9c0; --primary-text: var(--text); --primary-glow: rgba(110, 92, 255, 0.45);
  --seg-track: rgba(0, 0, 0, 0.25); --seg-on: rgba(140, 123, 255, 0.35); --seg-on-text: var(--text); --seg-glow: rgba(140, 123, 255, 0.4);
  --note-a: #ffd76a; --note-b: #ff9ec7; --note-text: #1a1430; --note-glow: rgba(255, 215, 106, 0.5);
  --variant-on-a: rgba(110, 90, 255, 0.28); --variant-on-b: rgba(40, 200, 200, 0.12); --variant-on-border: rgba(140, 123, 255, 0.8); --variant-on-glow: rgba(130, 110, 255, 0.35);
  --hint: #ffe27a;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* Ältere Safari-Versionen (vor iOS 16.2) kennen color-mix nicht und nehmen jeweils den Wert davor.
   touch-action: manipulation schaltet das Zoomen per Doppeltipp ab, auch in iOS Safari.
   Es gilt für alles darin, Zoomen mit zwei Fingern bleibt erlaubt. */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
/* Langes Drücken (etwa für den Zahlenkreis) markiert keinen Text und öffnet kein Kontextmenü.
   Eingabefelder wie der Spielername bleiben markierbar. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Auf dem iPhone kann die Seite trotz overflow verrutschen und oben einen leeren Streifen lassen */
body { position: fixed; inset: 0; width: 100%; }

#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; }
#bg { z-index: 0; }
#fx { z-index: 50; pointer-events: none; }

#app {
  position: relative; z-index: 1; height: 100%;
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head head" "side stage" "side ctrl";
  gap: 12px; padding: 16px;
}

/* Das Brett läuft hinter der Kopfzeile weiter und bleibt dort klickbar, nur die Knöpfe liegen darüber */
header { grid-area: head; display: flex; align-items: baseline; gap: 18px; padding: 0 6px; position: relative; z-index: 2; pointer-events: none; }
header button { pointer-events: auto; }
h1 {
  margin: 0; font-size: 34px; letter-spacing: 0.02em; font-weight: 800;
  background: linear-gradient(90deg, var(--title-a), var(--title-b) 45%, var(--title-c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px var(--title-glow));
}
/* Wackelt einmal beim Laden und dann nur unter der Maus: Dauerhafte Animationen zwingen
   den Browser zu ständigem Neuzeichnen, auch wenn die Canvas-Schleife schläft. */
.logo { display: inline-block; transform: rotate(-8deg); animation: wobble 4s ease-in-out 1; }
h1:hover .logo { animation-iteration-count: infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-2px); } }
header h1 { margin-right: auto; }

#menuBtn { display: none; }
aside#variants {
  grid-area: side; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 4px; scrollbar-width: thin; scrollbar-color: rgba(140, 123, 255, 0.4) transparent;
}
.variant {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-border);
  color: var(--text); font: inherit;
  transition: transform .25s cubic-bezier(.2,1.6,.4,1), border-color .2s, background .2s, box-shadow .3s;
}
.variant:hover { transform: translateX(4px) scale(1.02); border-color: rgba(255, 255, 255, 0.3); border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.variant.on {
  border-color: var(--variant-on-border);
  background: linear-gradient(120deg, var(--variant-on-a), var(--variant-on-b));
  box-shadow: 0 0 24px var(--variant-on-glow), inset 0 0 18px var(--variant-inset, rgba(130, 110, 255, 0.15));
}
.variant img { width: 62px; height: 62px; flex: none; border-radius: 9px; }
.variant .vname { font-weight: 700; font-size: 15px; }
.variant .vtag { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.variant .vbest { font-size: 11px; color: var(--accent2); margin-top: 3px; }
.variant.child { margin-left: 16px; flex-shrink: 0; }
.variant .vchev { margin-left: auto; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.variant[aria-expanded="true"] .vchev { transform: rotate(90deg); }
aside#variants > .variant { flex-shrink: 0; }
.vheading { flex-shrink: 0; margin: 6px 0 -2px 18px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

main#stage { grid-area: stage; position: relative; min-height: 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#status {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 13px; color: var(--muted); white-space: nowrap; pointer-events: none;
  transition: opacity .25s; min-height: 18px;
}
#status.wrap { white-space: normal; width: min(92%, 560px); text-align: center; color: var(--hint); }
#status .chip {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 2px; border-radius: 8px;
  font-weight: 700; color: var(--bg); text-align: center;
}

#zoomCtl { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; gap: 6px; }
#zoomCtl[hidden] { display: none; }
/* Am Handy zoomt man mit zwei Fingern: Die Knöpfe erscheinen nur, wenn man sie in den Einstellungen einschaltet */
@media (max-width: 820px), (max-height: 500px) { body:not(.zoom-buttons) #zoomCtl { display: none; } }
@media (min-width: 821px) and (min-height: 501px) { #zoomBtnBox { display: none; } }
#zoomCtl button { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; background: var(--panel); }

#loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; pointer-events: none; opacity: 0; transition: opacity .3s;
}
#loader.on { opacity: 1; }
#loader span { margin-top: 90px; color: var(--muted); letter-spacing: .08em; }
#loader .orb {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent2); box-shadow: 0 0 20px var(--accent2);
}
#loader.on .orb { animation: orbit 1.1s linear infinite; }
#loader .orb:nth-child(2) { background: var(--accent); box-shadow: 0 0 20px var(--accent); animation-delay: -.37s; }
#loader .orb:nth-child(3) { background: var(--title-c); box-shadow: 0 0 20px var(--title-c); animation-delay: -.74s; }
@keyframes orbit { from { transform: rotate(0) translateX(38px) rotate(0); } to { transform: rotate(360deg) translateX(38px) rotate(-360deg); } }

#win {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6);
  opacity: 0; pointer-events: none; text-align: center;
  padding: 28px 44px; border-radius: 26px;
  background: var(--win-bg, rgba(14, 14, 40, 0.72)); border: 1px solid var(--win-border, rgba(180, 170, 255, 0.35));
  box-shadow: 0 0 60px var(--win-glow, rgba(140, 110, 255, 0.5));
  transition: transform .6s cubic-bezier(.2,1.6,.4,1), opacity .4s;
}
#win.on { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; backdrop-filter: blur(14px); }
.win-title {
  font-size: 54px; font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(90deg, var(--hint), var(--title-c), var(--title-b), var(--title-a));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#win.on .win-title { animation: shine 3s linear 4; }
@keyframes shine { to { background-position: 300% 0; } }
.win-stats { color: var(--muted); margin: 6px 0 18px; }

footer#controls {
  grid-area: ctrl; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-border);
}
.btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button {
  font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
  padding: 8px 14px; border-radius: 12px;
  background: var(--button); border: 1px solid var(--button-border);
  transition: transform .2s cubic-bezier(.2,1.8,.4,1), background .2s, box-shadow .2s;
}
button:hover { background: var(--button-hover); transform: translateY(-2px); }
button:active { transform: translateY(1px) scale(.97); }
button.primary {
  background: linear-gradient(120deg, var(--primary-a), var(--primary-b)); border: none; font-weight: 700; color: var(--primary-text);
  box-shadow: 0 4px 22px var(--primary-glow);
}
button.primary:hover { box-shadow: 0 6px 30px var(--primary-hover, rgba(110, 92, 255, 0.7)); }
button.ghost { background: transparent; }
#noteBtn.on {
  background: linear-gradient(120deg, var(--note-a), var(--note-b)); color: var(--note-text); font-weight: 700; border-color: transparent;
  box-shadow: 0 0 20px var(--note-glow);
}
body.note-mode #board { cursor: cell !important; }

.settings { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; }
.setting { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.setting[hidden] { display: none; }
.seg { display: flex; padding: 3px; border-radius: 13px; background: var(--seg-track); }
.seg button { border: none; background: transparent; padding: 6px 12px; border-radius: 10px; color: var(--muted); }
.seg button:hover { transform: none; color: var(--text); }
.seg button[hidden] { display: none; }
.seg button.on { background: var(--seg-on); color: var(--seg-on-text); box-shadow: 0 0 12px var(--seg-glow); }
/* Im Raum gewählt, gilt aber erst mit „Neu“ */
.seg button.pending { outline: 1.5px dashed var(--seg-on-text); outline-offset: -3px; }
#newBtn.armed { animation: armed 1.6s ease-in-out infinite; }
@keyframes armed {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-hover, rgba(110, 92, 255, 0.7)); }
  50% { box-shadow: 0 0 0 5px var(--primary-hover, rgba(110, 92, 255, 0.7)), 0 0 22px var(--primary-hover, rgba(110, 92, 255, 0.7)); }
}
@media (prefers-reduced-motion: reduce) { #newBtn.armed { animation: none; box-shadow: 0 0 0 3px var(--primary-hover, rgba(110, 92, 255, 0.7)); } }

.toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle[hidden] { display: none; }
.toggle span { width: 34px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.12); position: relative; transition: background .2s; }
.toggle span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::after { transform: translateX(14px); }

.meta { display: flex; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
#timer { font-size: 20px; font-weight: 700; color: var(--accent2); min-width: 56px; text-align: right; }
#best { font-size: 12px; color: var(--muted); }

.modal {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal.on { opacity: 1; pointer-events: auto; backdrop-filter: blur(6px); }
.modal .card {
  max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  margin: 16px; padding: 26px 30px; border-radius: 22px;
  background: var(--modal-bg, rgba(20, 20, 50, 0.9)); border: 1px solid var(--panel-border);
  box-shadow: 0 0 50px var(--modal-glow, rgba(120, 100, 255, 0.3));
  transform: translateY(20px) scale(.95); transition: transform .4s cubic-bezier(.2,1.6,.4,1);
  line-height: 1.5;
}
.modal.on .card { transform: none; }
.modal h2 { margin-top: 0; }
.modal h3 { margin: 16px 0 4px; font-size: 15px; }
.modal ul { padding-left: 18px; color: var(--muted); font-size: 14px; }
.modal b { color: var(--accent2); }
.modal .card { width: min(calc(100vw - 32px), 520px); }
/* Regeln: je Mechanik ein Bild aus dem Spiel und ein kurzer Satz (Bilder: video/rules-shots.mjs).
   Reihen brechen um, eine unvollständige letzte Reihe steht mittig. */
#rules .card { width: min(calc(100vw - 32px), 760px); max-width: none; }
#rules h3 { margin: 22px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rules-lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.rules-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rule { flex: 0 0 calc((100% - 24px) / 3); display: flex; flex-direction: column; padding: 10px 12px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--panel-border); }
.rule-main { flex-basis: 100%; }
.rule-pic { flex: 1; display: grid; place-items: center; min-height: 92px; margin-bottom: 8px; }
.rule-pic img { display: block; max-width: 100%; max-height: 130px; height: auto; }
.rule-main .rule-pic img { max-height: 120px; }
.rule-board .rule-pic img { max-height: 190px; }
.rule strong, .rule-ctl strong { display: block; color: var(--text); font-size: 15px; }
.rule span, .rule-ctl span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.rule-sum { margin: -2px 0 8px; text-align: center; color: var(--muted); font-size: 13px; }
.rule-sum em { font-style: normal; font-weight: 700; color: var(--text); }
.rules-ctls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rule-ctl { flex: 0 0 calc((100% - 30px) / 4); display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--panel-border); }
.rule-ctl strong { font-size: 14px; }
.rule-ctl span { font-size: 13px; }
.rule-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--hint); font-size: 18px; }
.rules-keys { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.rules-keys kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--panel-border); background: rgba(255, 255, 255, 0.05); color: var(--text); font: 12px ui-monospace, monospace; }
#rulesClose { display: block; margin: 22px auto 0; }
@media (pointer: coarse) { .rules-keys { display: none; } } /* Ohne Tastatur nutzlos */
@media (max-width: 680px) { .rule { flex-basis: calc((100% - 12px) / 2); } .rule-ctl { flex-basis: calc((100% - 20px) / 3); } }
@media (max-width: 500px) { #rules .card { padding: 22px 16px; } .rule-ctl { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 440px) { .rule { flex-basis: 100%; } }
/* Der längere Name braucht auf kleinen Handys den Platz des Symbols */
@media (max-width: 400px) { .logo { display: none; } }
#qualityBox { margin-top: 10px; }
#qualityNote { flex-basis: 100%; min-height: 1.2em; font-size: 12px; }
#fpsMeter { position: fixed; left: 6px; bottom: 6px; z-index: 1000; padding: 3px 7px; border-radius: 7px; background: rgba(0, 0, 0, 0.75); color: #fff; font: 12px ui-monospace, monospace; pointer-events: none; }
.settings-toggles { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
.modal-intro { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.modal .setting { flex-wrap: wrap; font-size: 14px; }
.coop-name { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
#coopName { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--button-border); background: var(--seg-track); color: var(--text); font: inherit; }
.coop-circle { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 14px auto 0; }
.coop-circle h3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: 28%; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.coop-rooms { position: absolute; inset: 0; }
.coop-rooms button {
  position: absolute; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.15;
}
.coop-room-icon { font-size: 26px; line-height: 1.1; }
.coop-room-name { font-size: 13px; font-weight: 700; }
.coop-room-count { font-size: 11px; color: var(--muted); min-height: 13px; }
.coop-rooms button.busy { border-color: var(--accent2); box-shadow: 0 0 14px var(--accent2); }
.coop-rooms button.busy .coop-room-count { color: var(--accent2); font-weight: 700; }
.coop-rooms button.wanted { box-shadow: 0 0 0 3px var(--accent); }
.coop-rooms button:disabled { opacity: .45; cursor: default; transform: none; }
.coop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coop-room-actions { margin-top: 12px; }
#coopInsight { margin: 0 0 12px; color: var(--muted); font-size: 14px; font-style: italic; }
#coopInsight:empty { display: none; }
.coop-player { padding: 2px 10px; border: 1px solid; border-radius: 10px; font-weight: 700; overflow-wrap: anywhere; }
/* Einladung über einen Link: nur Name und ein Knopf für den Raum */
#coopInvite { text-align: center; margin: 0 0 14px; }
.coop-invite-icon { font-size: 40px; line-height: 1.1; }
#coopInviteTitle { margin: 6px 0 0; font-size: 17px; }
#coopInviteActions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
#coopInvite[hidden], #coopInviteActions[hidden] { display: none; }
#coopInviteJoin { padding: 12px 16px; font-size: 16px; font-weight: 700; }
#coopInviteJoin:disabled { opacity: .45; cursor: default; }
.coop-other { align-self: center; background: none; border: none; box-shadow: none; color: var(--muted); font-size: 13px; text-decoration: underline; padding: 4px 8px; }
.coop-other:hover { color: var(--text); }
#coopNote { margin: 12px 0 0; color: var(--accent2); font-size: 14px; overflow-wrap: anywhere; }
#coopNote:empty { display: none; }
#coopBtn.together { color: var(--accent2); border-color: var(--accent2); }
#coopBtn[hidden] { display: none; }
#coopBtnCount:empty { display: none; }
header button { white-space: nowrap; }
.hicon { display: none; }
#coopToast {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: 80%;
  padding: 5px 12px; border-radius: 12px; font-size: 13px; color: var(--text); text-align: center;
  background: var(--panel); border: 1px solid var(--panel-border); pointer-events: none;
}
#coopToast:empty { display: none; }
#coopVote {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 6; width: max-content; max-width: min(96%, 460px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; text-align: center; color: var(--text);
  background: var(--modal-bg, rgba(20, 20, 50, 0.97)); border: 1px solid var(--variant-on-border); box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}
#coopVote[hidden] { display: none; }
.coop-vote-actions { display: flex; gap: 8px; }
.coop-vote-actions button { padding: 6px 12px; font-size: 13px; }
.coop-vote-actions button[hidden] { display: none; }
.lesson-step { color: var(--accent2); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin-bottom: 4px; }
.lesson-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-dots button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 13px; }
/* Desktop: Während eines Spiels ist die Rätselliste eingeklappt, der Knopf neben dem Logo klappt sie über dem Brett auf */
@media (min-width: 821px) and (min-height: 501px) {
  body.playing #app { grid-template-columns: 0 1fr; column-gap: 0; }
  body.playing aside#variants { display: none; }
  body.playing header h1 { margin-right: 0; }
  body.playing header #menuBtn { display: block; margin-right: auto; align-self: center; }
  #menuBtn[aria-expanded="true"] { background: rgba(140, 123, 255, 0.35); }
  body.playing.menu-open aside#variants {
    display: flex; position: absolute; z-index: 20; left: 16px; top: 76px; width: 280px; max-height: calc(100% - 180px);
    padding: 8px; border-radius: 18px;
    background: var(--modal-bg, rgba(20, 20, 50, 0.97)); border: 1px solid var(--panel-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

/* Desktop: Die Bedienleiste passt möglichst in eine Zeile. Die Beschriftungen stehen klein über den Schaltern.
   Reicht die Breite nicht, stehen die Einstellungen oben und Knöpfe und Uhr gemeinsam darunter (Klasse stack). */
@media (min-width: 821px) and (min-height: 501px) {
  footer#controls { gap: 8px 16px; padding: 8px 14px; }
  .settings { gap: 8px 14px; }
  .setting { flex-direction: column; gap: 2px; align-items: center; }
  .setting > span { font-size: 11px; line-height: 1.1; }
  .seg button { padding: 5px 11px; }
  .btns button { padding: 7px 12px; }
  footer#controls.stack .settings { flex-basis: 100%; }
}

.lesson-dots button.done { color: var(--accent2); border-color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 55%, transparent); }
.lesson-dots button.on { background: var(--seg-on); background: color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 90%, white); }
.lesson-dots button:disabled { opacity: .35; cursor: default; transform: none; background: rgba(255, 255, 255, 0.04); }

@media (max-width: 820px), (max-height: 500px) {
  #app {
    grid-template-columns: minmax(0, 1fr); /* Inhalt darf die Seite nicht breiter als den Bildschirm machen */
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head" "stage" "ctrl";
    height: 100dvh; /* ohne die ein- und ausfahrende Adressleiste des Handys */
    /* Die Seite läuft bis unter Notch und Home-Balken, nur die Bedienelemente halten Abstand */
    padding: calc(8px + env(safe-area-inset-top)) 0 calc(8px + env(safe-area-inset-bottom)); gap: 6px;
  }
  /* Nur das Brett läuft über die volle Breite, alles andere behält einen Rand */
  header { gap: 6px; padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); justify-content: space-between; align-items: center; }
  h1 { font-size: 20px; letter-spacing: 0; flex: none; }
  header h1 { margin-right: 0; }
  header button { padding: 4px 10px; font-size: 13px; flex: none; }
  /* Am Handy reichen die Symbole, im Raum zeigt der Knopf die Spielerzahl */
  header .hlabel { display: none; }
  header .hicon { display: inline; }
  #coopBtnCount { margin-left: 3px; }
  /* Die Rätseltypen klappen über dem Brett auf, damit man sie nicht aus Versehen antippt */
  header #menuBtn {
    display: block; flex: 0 1 auto; min-width: 0; margin-left: auto;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #menuBtn[aria-expanded="true"] { background: rgba(140, 123, 255, 0.35); }
  aside#variants {
    display: none; grid-area: stage; position: relative; z-index: 20; align-self: start;
    max-height: 100%; margin: 0 16px; padding: 8px; border-radius: 18px;
    background: var(--modal-bg, rgba(20, 20, 50, 0.97)); border: 1px solid var(--panel-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
  body.menu-open aside#variants { display: flex; }
  /* Die Höhe geht ans Brett: die Bedienleiste so flach wie möglich */
  footer#controls { margin: 0 8px; gap: 6px; padding: 6px; }
  .btns { gap: 4px 6px; justify-content: center; }
  .btns button { padding: 6px 9px; font-size: 13px; }
  .seg button { padding: 4px 10px; font-size: 13px; }
  .toggle { font-size: 12px; gap: 5px; }
  #timer { font-size: 16px; min-width: 0; }
  #best { display: none; }
  .variant { padding: 6px 10px 6px 6px; gap: 8px; }
  .variant:hover { transform: none; }
  .variant img { width: 40px; height: 40px; border-radius: 7px; }
  footer#controls { gap: 8px; padding: 8px; }
}

/* Handy im Hochformat: Unten bleibt nur eine schmale Zeile. Der Rest klappt über dem Brett auf, das dabei stehen bleibt. */
#moreBtn { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  #app { grid-template-rows: auto minmax(0, 1fr) 47px; }
  /* Das Brett reicht bis an die Leiste, die Statuszeile liegt darüber und braucht einen eigenen Grund */
  /* Lange Hinweise samt bis zu neun Zahlen passen nicht in eine Zeile: umbrechen statt über den Rand laufen */
  #status { bottom: 4px; padding: 3px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.72); background: color-mix(in srgb, var(--bg) 78%, transparent); max-width: calc(100% - 24px); width: max-content; white-space: normal; text-align: center; line-height: 1.6; }
  #status:empty { display: none; }
  /* Die Zeile hat eine feste Höhe, das Aufgeklappte wächst daraus nach oben */
  footer#controls {
    position: relative; z-index: 30; align-self: end;
    gap: 6px 4px; padding: 5px 6px;
  }
  .btns { display: contents; }
  .settings { order: 1; flex: 1 1 100%; }
  #newBtn, #resetBtn { order: 2; flex: 1 1 calc(50% - 2px); }
  .meta { order: 3; flex: none; padding: 0 3px; }
  #noteBtn, #hintBtn, #undoBtn { order: 4; flex: 1 1 0; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hintBtn { flex-grow: 1.4; min-width: 0 !important; } /* Sein Text wird lang: „Korrigieren“. Die Breite gibt die Zeile vor, nicht die Sperre des Tipp-Knopfs */
  #moreBtn { display: block; order: 5; flex: none; width: 34px; padding: 6px 0; line-height: 1.2; }
  #moreBtn::before { content: '▴'; }
  #moreBtn[aria-expanded="true"]::before { content: '▾'; }
  #moreBtn[aria-expanded="true"] { background: rgba(140, 123, 255, 0.35); }
  body:not(.bar-open) .settings, body:not(.bar-open) #newBtn, body:not(.bar-open) #resetBtn { display: none; }
  body.bar-open footer#controls { background: var(--modal-bg, rgba(20, 20, 50, 0.97)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); }
}
@media (max-width: 374px) and (orientation: portrait) {
  #noteBtn, #hintBtn, #undoBtn { font-size: 12px; padding: 6px 2px; }
}
@media (max-width: 350px) and (orientation: portrait) {
  .meta { display: none; }
}

/* Handy im Querformat: Das Brett hat die ganze Breite und steht in der Mitte. Unten rechts schwebt nur eine kleine
   Leiste mit Uhr, Tipp und dem Knopf, der den Rest als Seitenleiste über dem Brett aufklappt. */
@media (max-height: 500px) and (orientation: landscape) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head" "stage";
    padding: calc(6px + env(safe-area-inset-top)) 0 0;
  }
  aside#variants { margin-left: calc(16px + env(safe-area-inset-left)); }
  #status { bottom: 4px; padding: 3px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.72); background: color-mix(in srgb, var(--bg) 78%, transparent); max-width: calc(100% - 260px); font-size: 11px; line-height: 1.25; white-space: normal; text-align: center; }
  #status:empty { display: none; }
  footer#controls {
    position: fixed; z-index: 30; margin: 0;
    right: calc(8px + env(safe-area-inset-right)); bottom: calc(6px + env(safe-area-inset-bottom));
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 4px;
  }
  .btns { display: contents; }
  .meta { order: 1; padding: 0 6px 0 4px; }
  #hintBtn { order: 2; padding: 5px 10px; font-size: 12px; white-space: nowrap; min-width: 0 !important; }
  #moreBtn { display: block; order: 3; flex: none; width: 34px; padding: 5px 0; line-height: 1.2; }
  #moreBtn::before { content: '▴'; }
  #moreBtn[aria-expanded="true"]::before { content: '▾'; }
  #moreBtn[aria-expanded="true"] { background: rgba(140, 123, 255, 0.35); }
  body:not(.bar-open) .settings, body:not(.bar-open) #newBtn, body:not(.bar-open) #noteBtn,
  body:not(.bar-open) #undoBtn, body:not(.bar-open) #resetBtn { display: none; }
  /* Aufgeklappt: eine Seitenleiste rechts über dem Brett, zwei Knöpfe je Zeile */
  body.bar-open footer#controls {
    top: calc(50px + env(safe-area-inset-top)); width: 210px; overflow-y: auto; /* unter der Kopfzeile, deren Knöpfe bleiben erreichbar */
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px; padding: 8px;
    background: var(--modal-bg, rgba(20, 20, 50, 0.97)); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  }
  body.bar-open .settings { order: 0; grid-column: 1 / -1; flex-direction: column; gap: 4px; align-items: stretch; }
  .setting { flex-direction: column; gap: 1px; align-items: center; }
  .setting > span { font-size: 11px; }
  .seg { width: 100%; justify-content: space-between; }
  .seg button { flex: 1 1 auto; padding: 6px 3px; font-size: 11.5px; }
  body.bar-open .btns button { padding: 6px 4px; font-size: 12px; min-width: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.bar-open #newBtn, body.bar-open #resetBtn { order: 1; }
  body.bar-open #noteBtn, body.bar-open #undoBtn { order: 2; }
  body.bar-open #hintBtn { order: 3; grid-column: 1 / -1; }
  body.bar-open .meta { order: 4; justify-self: start; align-self: center; }
  body.bar-open #moreBtn { order: 4; justify-self: end; }
}

/* Helles Design: Flächen und Schatten, die sonst auf dunklen Grund ausgelegt sind */
html[data-scheme="light"] { color-scheme: light; }
html[data-scheme="light"] .toggle input:not(:checked) + span { background: rgba(90, 60, 30, 0.16); }
html[data-scheme="light"] .rule, html[data-scheme="light"] .rule-ctl { background: rgba(90, 60, 30, 0.05); }
html[data-scheme="light"] .rule-ico, html[data-scheme="light"] .rules-keys kbd { background: rgba(90, 60, 30, 0.06); }
html[data-scheme="light"] .variant:hover { border-color: rgba(90, 60, 30, 0.3); }
/* Sechs Designs: zwei Reihen à drei, damit die Auswahl auch auf dem Handy passt */
#theme { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Zahlenleiste am unteren Rand: verdeckt nicht die Sichtlinie des gewählten Feldes.
   Spaltenzahl und Tastengröße rechnet das Spiel aus (--cols, --key, --gap). */
#numBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--gap, 4px);
  /* Feste Zeilenbreite für genau --cols Tasten, eine angebrochene letzte Zeile steht dadurch mittig */
  padding-inline: max(6px, calc((100% - var(--cols, 11) * var(--key, 48px) - (var(--cols, 11) - 1) * var(--gap, 4px)) / 2));
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--modal-bg, rgba(20, 20, 50, 0.97));
  border-top: 1px solid var(--panel-border); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
#numBar[hidden] { display: none; }
/* Steuerkreuz des Sperrsteins: feste Stelle unten in der Mitte, die Knöpfe zeigen in die Richtungen im Bild */
#stonePad {
  position: fixed; left: 50%; width: 140px; height: 140px; margin-left: -70px; z-index: 61; border-radius: 50%;
  background: var(--modal-bg, rgba(20, 20, 50, 0.85)); border: 1px solid var(--panel-border); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
#stonePad[hidden] { display: none; }
#stonePad button {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
}
#numBar button {
  display: grid; place-items: center; flex: none; width: var(--key, 48px); height: var(--key, 48px);
  padding: 0; border: none; border-radius: 0; background: none;
}
#numBar button:hover, #numBar button:active { transform: none; background: none; }
#numBar canvas { display: block; }
/* Große Tasten: Notizen und Löschen klein in den Ecken, frei über dem Spiel oberhalb der ersten Zahlenzeile */
#numBar button.mini { position: absolute; top: -40px; width: 32px; height: 32px; }
#numBar button.mini[data-tool="note"] { left: 10px; }
#numBar button.mini[data-tool="clear"] { right: 10px; }
/* Bedienung im Regelfenster: je nach Einstellung Zahlenring oder Zahlenleiste */
body:not(.num-bar) .ctl-bar, body.num-bar .ctl-ring { display: none; }

/* iOS tickt nur beim Antippen eines echten Schalters: Er liegt unsichtbar über dem Knopf und nimmt den Finger auf */
.haptic-host { position: relative; }
.haptic-over { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0.01; cursor: inherit; z-index: 1; }
.haptics-off .haptic-over, button:disabled > .haptic-over { display: none; }

/* Spendenlink zu Ko-fi: dezent unten links am Brett (nur Desktop), als letzter Eintrag im Menü und in den Einstellungen */
.kofi-corner {
  position: absolute; left: 4px; bottom: 2px; z-index: 5; display: none; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; opacity: .6; transition: opacity .2s, color .2s, border-color .2s, background .2s;
}
.kofi-corner:hover, .kofi-corner:focus-visible { opacity: 1; color: var(--text); background: var(--panel); border-color: var(--panel-border); }
@media (min-width: 821px) and (min-height: 501px) { .kofi-corner { display: inline-flex; } }
.kofi-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  font-size: 20px; background: var(--seg-track);
}
.kofi-row {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 12px; border-radius: 14px;
  color: var(--text); text-decoration: none; border: 1px solid var(--panel-border); transition: border-color .2s, background .2s;
}
.kofi-row:hover, .kofi-row:focus-visible { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.kofi-row b { display: block; font-size: 14px; }
.kofi-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
a.variant.kofi-variant { text-decoration: none; margin-top: auto; opacity: .85; }
a.variant.kofi-variant:hover { opacity: 1; }
.kofi-variant .kofi-icon { width: 62px; height: 62px; border-radius: 9px; font-size: 26px; }

#lessonSkip[hidden] { display: none; }

/* Reglerfeld für den Spiegelstrich (nur mit ?regler) */
#mirrorTune {
  position: fixed; right: 12px; top: 190px; z-index: 80; width: 270px; max-height: calc(100vh - 345px); overflow: auto;
  padding: 10px 12px 12px; border-radius: 14px; background: var(--modal-bg, rgba(20, 20, 50, 0.95)); color: var(--text);
  border: 1px solid var(--panel-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font-size: 13px;
}
#mirrorTune .mt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#mirrorTune .mt-head button { padding: 0 9px; min-width: 0; line-height: 22px; }
#mirrorTune.folded .mt-body { display: none; }
#mirrorTune .mt-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; margin: 7px 0; }
#mirrorTune .mt-row input { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; }
#mirrorTune output { color: var(--text-dim, inherit); opacity: 0.8; font-variant-numeric: tabular-nums; }
#mirrorTune .mt-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#mirrorTune .mt-foot button { padding: 5px 9px; font-size: 12px; }
#mirrorTune .mt-note { flex-basis: 100%; font-size: 11px; word-break: break-all; opacity: 0.8; }