/* Sperrsteine — helles Wegenetz auf tiefem Indigo. Figuren in Bernstein und
   Türkis, die Sperren in Kalkweiß. Bewusst einthemig, alles explizit gefärbt. */

:root {
  --tisch: #171d2b;
  --tisch-2: #0d1119;
  --panel: #232c40;
  --panel-2: #2c374f;
  --naht: #38445e;
  --schrift: #eceff7;
  --schrift-dim: #aeb7ca;
  --schrift-blass: #808ca6;

  --brett: #eee9df;
  --brett-rand: #c3bbab;
  --linie: #c8c0b0;
  --feld: #fbf8f1;

  --rot: #d99327;              /* Bernstein — Spieler 0 */
  --rot-hell: #eeb04a;
  --blau: #2f9c95;             /* Türkis — Spieler 1 */
  --blau-hell: #4fc0b8;
  --gold: #8f6fd0;             /* Akzent: Violett, die Farbe dieses Spiels */
  --gut: #6aa96f;

  --stein: #fdfcf8;
  --stein-rand: #9a927f;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --r-md: 14px;
  --r-lg: 22px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }

body {
  background: var(--tisch);
  background-image:
    radial-gradient(120% 60% at 50% -10%, #26304a 0%, rgba(38, 48, 74, 0) 60%),
    linear-gradient(180deg, var(--tisch) 0%, var(--tisch-2) 100%);
  background-attachment: fixed;
  color: var(--schrift-dim);
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Gerüst ---------- */

#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }

.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; min-height: 0; }
.scrollbar { overflow-y: auto; max-height: 100dvh; }
.wrap { width: 100%; max-width: 560px; margin-inline: auto; padding: 22px 18px calc(18px + var(--safe-b)); }
.blatt { padding: calc(var(--safe-t) + 16px) 18px calc(18px + var(--safe-b)); width: 100%; max-width: 560px; margin-inline: auto; }

h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--schrift); margin: 0 0 6px; }
h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 24px 0 8px; }
p, li { font-size: 15px; line-height: 1.6; color: var(--schrift-dim); }
strong { color: var(--schrift); }
em { color: var(--gold); font-style: italic; }

.kopf {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 12px) 16px 10px;
  border-bottom: 1px solid var(--naht);
}
.kopf .titel { flex: 1; min-width: 0; }
.kopf .ober { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--schrift-blass); font-weight: 700; }
.kopf h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 23px;
  color: var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopf h1 .wer--0 { color: var(--rot-hell); }
.kopf h1 .wer--1 { color: var(--blau-hell); }
.werkzeuge { display: flex; gap: 7px; }
.werkzeug {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--naht); color: var(--schrift-dim); font-size: 15px;
}

/* ---------- Knöpfe ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 16px 18px; border-radius: var(--r-md);
  font-weight: 650; font-size: 16px; letter-spacing: -0.01em;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.3; transform: none; box-shadow: none; filter: saturate(0.5); }
.btn--filz { background: var(--gold); color: #120a22; box-shadow: 0 8px 26px rgba(143, 111, 208, 0.22); }
.btn--hell { background: var(--brett); color: #241c17; }
.btn--geist { background: var(--panel); color: var(--schrift); border: 1px solid var(--naht); }
.btn--leise { background: none; color: var(--schrift-blass); font-weight: 500; font-size: 15px; padding: 13px; }
.knopfsaeule { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.reihe { display: flex; gap: 10px; }
.reihe .btn { width: auto; flex: 1; }

/* ---------- Startbildschirm ---------- */

.start { justify-content: center; text-align: center; padding: 30px 20px calc(28px + var(--safe-b)); }
.wortmarke {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 13vw, 56px); line-height: 1.02; margin: 0;
  color: var(--schrift); letter-spacing: -0.02em;
}
.wortmarke em { font-style: italic; color: var(--gold); }
.unterzeile { color: var(--schrift-blass); margin: 10px 0 26px; }

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

/* Anders als bei den Ringspielen ist das Brett hoch, nicht quadratisch:
   11 Spalten auf 12 Reihen.
   Der helle Karton wird **im SVG** gezeichnet, nicht als CSS-Hintergrund. Sonst
   liegt er auf dem Element, das Zeichnen aber passt sich mit `meet` ein — und
   bei abweichendem Seitenverhältnis stünden oben und unten leere Kartonstreifen.
   So ist der Karton immer genau so groß wie das Brett. */
/* Kein `place-items: center`: das Feld soll sich über die ganze Fläche
   spannen, damit es eine **feste** Höhe bekommt. Zentriert wird die Zeichnung
   ohnehin von `preserveAspectRatio`. Mit zentriertem Element wäre die Höhe
   unbestimmt — dann nimmt der Browser die Eigengröße des SVG, und im Querformat
   schob das Brett die Seite über den Bildschirmrand hinaus. */
.tischplatte { flex: 1; display: grid; padding: 8px 12px 0; min-height: 0; }
.brett {
  width: 100%; height: 100%; min-height: 0;
  /* Die Deckelung in dvh ist nicht Zierde, sondern Notwendigkeit: `height: 100%`
     hängt von der Höhe des Elternteils ab, die wiederum vom Inhalt — also vom
     Brett selbst. Der Browser löst diesen Ring auf, indem er die Eigengröße des
     SVG nimmt, und die schob die Seite im Querformat über den Bildschirmrand.
     Ein Maß, das nur am Fenster hängt, bricht den Ring. */
  max-height: 78dvh;
  background: none; border: 0; display: block;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5));
}
.brett .karton { fill: var(--brett); stroke: var(--brett-rand); stroke-width: 1.6; }

.brett .weg { stroke: var(--linie); stroke-width: 1.1; stroke-linecap: round; }
.brett .weg--heim0 { stroke: #e6c99a; }
.brett .weg--heim1 { stroke: #9fd4d0; }

.brett .loch { fill: var(--feld); stroke: var(--linie); stroke-width: 0.5; }
.brett .loch--heim0 { fill: #f8e7c6; stroke: var(--rot); }
.brett .loch--heim1 { fill: #d5eeec; stroke: var(--blau); }
.brett .loch--ziel { fill: #ece2fb; stroke: var(--gold); stroke-width: 0.9; }
.brett .zielstern { fill: var(--gold); }

.brett .stein {
  fill: var(--stein); stroke: var(--stein-rand); stroke-width: 0.55;
  filter: drop-shadow(0 0.6px 0.6px rgba(0, 0, 0, 0.35));
}
.brett .steinkuppe { fill: #ffffff; opacity: 0.85; }

.brett .figur { stroke: rgba(0, 0, 0, 0.4); stroke-width: 0.45; transition: transform 0.18s ease; }
.brett .figur--0 { fill: var(--rot); }
.brett .figur--1 { fill: var(--blau); }
.brett .figur--wahl { cursor: pointer; }
.brett .figur--gewaehlt { stroke: var(--gold); stroke-width: 1; }
.brett .ring {
  fill: none; stroke: var(--gold); stroke-width: 0.9;
  animation: pochen 1.1s ease-in-out infinite;
}
.brett .zielpunkt { fill: var(--gold); opacity: 0.8; cursor: pointer; }
.brett .zielpunkt--schlag { fill: #d24b3e; opacity: 0.95; }
.brett .zielpunkt--stein { fill: #2b8f5e; opacity: 0.95; }
.brett .tippfeld { fill: transparent; cursor: pointer; }
.brett .setzfeld { fill: var(--gold); opacity: 0.28; cursor: pointer; }
@keyframes pochen { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .brett .ring { animation: none; }
  .brett .figur { transition: none; }
}

/* ---------- Würfel und Leiste ---------- */

.leiste {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(12px + var(--safe-b));
  max-width: 560px; margin-inline: auto; width: 100%;
}
.wuerfel {
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: 16px;
  background: var(--feld); border: 2px solid var(--brett-rand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 9px; gap: 2px;
}
.wuerfel:disabled { opacity: 0.45; box-shadow: none; }
.wuerfel .auge { width: 100%; height: 100%; border-radius: 50%; background: #1e2233; }
.wuerfel .auge--leer { background: none; }
.wuerfel--rollt { animation: schuetteln 0.4s ease; }
@keyframes schuetteln {
  25% { transform: rotate(-9deg) scale(1.05); }
  75% { transform: rotate(9deg) scale(1.05); }
}
.wuerfel--frage { display: grid; place-items: center; font-size: 26px; color: #1e2233; font-weight: 700; }

.sagt { flex: 1; min-width: 0; }
.sagt .zeile1 { color: var(--schrift); font-size: 15px; line-height: 1.35; }
.sagt .zeile2 { color: var(--schrift-blass); font-size: 13px; margin-top: 2px; }
.sagt .warnung { color: var(--gold); }

/* ---------- Punktetafel ---------- */

.tafel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; background: var(--panel); border: 1px solid var(--naht);
  border-radius: var(--r-lg); padding: 16px 14px; margin: 16px 0;
}
.tafel .seite { text-align: center; min-width: 0; }
.tafel .wer { font-size: 12px; color: var(--schrift-blass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tafel .zahl { font-family: var(--font-num); font-size: 34px; font-weight: 800; line-height: 1.1; }
.tafel .seite--0 .zahl { color: var(--rot-hell); }
.tafel .seite--1 .zahl { color: var(--blau-hell); }
.tafel .strichlein { width: 1px; height: 40px; background: var(--naht); }

.feld {
  background: var(--panel); border: 1px solid var(--naht);
  border-radius: var(--r-md); padding: 14px; color: var(--schrift); font-size: 16px;
  user-select: text; -webkit-user-select: text; width: 100%;
}
.feld::placeholder { color: var(--schrift-blass); }
.feld--code {
  width: 100%; text-align: center; letter-spacing: 0.3em;
  font-family: var(--font-num); font-size: 28px; text-transform: uppercase; margin-top: 8px;
}
.feldlabel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schrift-blass); font-weight: 700; text-align: left; margin: 18px 0 7px; }
.warnton { color: var(--rot-hell); }

/* ---------- Overlays ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--tisch-2);
  display: flex; flex-direction: column; animation: einblenden 0.18s ease-out;
}
@keyframes einblenden { from { opacity: 0; } }

.jubel {
  justify-content: center; align-items: center; text-align: center;
  padding: 26px calc(24px + var(--safe-b));
  /* Deckende Grundfarbe muss hier noch einmal stehen: das Verlaufsbild allein
     ließe das Brett durchscheinen. */
  background-color: var(--tisch-2);
  background-image: radial-gradient(90% 50% at 50% 40%, #2b2350 0%, rgba(43, 35, 80, 0) 70%);
}
.jubel p { max-width: 30ch; }
.jubel .btn { width: min(340px, 100%); max-width: 340px; }
.jubel .krone { font-size: 46px; }
.jubel .name { font-family: var(--font-display); font-size: clamp(30px, 9vw, 44px); color: var(--schrift); line-height: 1.1; margin: 6px 0; }

/* ---------- Kopplung per QR ---------- */

.qrfeld { display: grid; place-items: center; background: var(--brett); border-radius: 14px; padding: 14px; margin: 16px 0; }
.qrfeld canvas { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; display: block; }

.scanfenster {
  position: relative; overflow: hidden; border-radius: 14px; background: #000;
  aspect-ratio: 1; margin: 16px 0; border: 1px solid var(--naht);
}
.scanfenster video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanfenster::after {
  content: ""; position: absolute; inset: 16%;
  border: 2px solid var(--gold); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
}

.raumcode {
  font-family: var(--font-num); font-size: clamp(38px, 13vw, 58px); font-weight: 800;
  letter-spacing: 0.14em; text-align: center; padding: 18px 10px; margin: 16px 0;
  border-radius: 14px; user-select: all; -webkit-user-select: all;
  background: var(--panel); color: var(--schrift); border: 2px solid var(--gold);
}

.codeklappe { margin-top: 6px; }
.codeklappe summary { font-size: 13px; color: var(--schrift-blass); cursor: pointer; padding: 8px 0; list-style: none; }
.codeklappe summary::before { content: "▸ "; }
.codeklappe[open] summary::before { content: "▾ "; }
.codeklappe .btn { margin-top: 8px; }
.codefeld {
  width: 100%; min-height: 84px; resize: vertical; margin-top: 6px;
  background: var(--panel); border: 1px solid var(--naht); border-radius: 10px;
  padding: 10px; color: var(--schrift-blass); font-family: var(--font-num); font-size: 11px;
  word-break: break-all; user-select: text; -webkit-user-select: text;
}
.lage { margin-top: 12px; font-size: 12px; line-height: 1.55; opacity: 0.62; word-break: break-word; }

/* ---------- Legende unter dem Brett ---------- */

.legende {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--schrift-blass); padding: 2px 16px 0;
}
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.legende i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legende .l-zug { background: var(--gold); }
.legende .l-schlag { background: #d24b3e; }
.legende .l-stein { background: #2b8f5e; }

/* ---------- Quer: Brett links, Bedienung rechts ---------- */

@media (orientation: landscape) and (max-height: 560px) {
  .screen--spiel { flex-direction: row; align-items: stretch; }
  .screen--spiel .kopf { display: none; }
  .tischplatte { padding: 6px; }
  .brett { max-width: 52vw; max-height: 92dvh; justify-self: center; }
  .leiste { flex-direction: column; align-items: stretch; justify-content: center; max-width: 320px; padding: 10px 14px; }
  .leiste .wuerfel { align-self: center; }
  .legende { display: none; }
}

/* ---------- Fassungswahl auf dem Startbildschirm ---------- */

.wahlliste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wahl {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--naht); border-radius: 13px; padding: 13px 15px;
}
.wahl--an { border-color: var(--gold); background: var(--panel-2); }
.wahl .haupt { flex: 1; min-width: 0; }
.wahl .oben { color: var(--schrift); font-weight: 650; }
.wahl .unten { font-size: 13px; color: var(--schrift-blass); }
.wahl .haken { color: var(--gold); font-size: 18px; }