/* Zwölf Steine – Bühne, Touch-Ebene, Overlays.
   Das Spielbild selbst ist ein 320×180-Canvas, das js/kern/skalierung.js
   ganzzahlig (in Gerätepixeln) vergrößert und mittig platziert. */

:root {
  --blei: #17141f;
  --nacht: #231d36;
  --indigo: #34325e;
  --kalkhell: #d4c8b1;
  --weiss: #f6eedb;
  --gold: #f2b43d;
  --sand: #cfa766;
  --knopf: 64px;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--blei);
  color: var(--weiss);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

#buehne { position: fixed; inset: 0; }

#spiel canvas {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
}
/* Chrome kennt "pixelated", Firefox nimmt "crisp-edges" – beide stehen oben, pixelated gewinnt wo verfügbar */
@supports (image-rendering: pixelated) { #spiel canvas { image-rendering: pixelated; } }

/* ---------- Ladeanzeige ---------- */
#laedt {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--kalkhell); font-size: 15px; letter-spacing: 0.04em;
  background: var(--blei);
  transition: opacity 0.4s;
}
#laedt.weg { opacity: 0; pointer-events: none; }

/* ---------- Touch-Steuerung ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch[hidden] { display: none; }

#stick-feld {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  pointer-events: auto; touch-action: none;
}
#stick-ring {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%;
  border: 3px solid rgba(246, 238, 219, 0.28);
  background: rgba(23, 20, 31, 0.28);
  left: calc(env(safe-area-inset-left, 0px) + 92px); bottom: 0; top: auto;
  opacity: 0.55; transition: opacity 0.15s;
}
#stick-ring.aktiv { opacity: 1; }
/* In Menüs und Dialogen: Stick fest unten links als Steuerkreuz, Rest des Bildes frei zum Antippen */
#touch.ui-modus #stick-ring { pointer-events: auto; touch-action: none; }
#stick-knopf {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(246, 238, 219, 0.5);
  box-shadow: inset 0 -4px 0 rgba(23, 20, 31, 0.35);
}

#touch .aktion, #knopf-menue {
  position: absolute; pointer-events: auto; touch-action: none;
  border: 3px solid var(--blei);
  color: var(--blei);
  font: 700 22px/1 ui-rounded, system-ui, sans-serif;
  padding: 0;
}
#touch .aktion {
  width: var(--knopf); height: var(--knopf); border-radius: 50%;
  background: rgba(212, 200, 177, 0.62);
  box-shadow: inset 0 -5px 0 rgba(23, 20, 31, 0.3);
}
#touch .aktion.gedrueckt { background: rgba(242, 180, 61, 0.85); box-shadow: inset 0 3px 0 rgba(23, 20, 31, 0.3); }
/* A und B schräg wie beim Gameboy (A oben rechts, B unten links davon), eng
   beieinander, damit B möglichst wenig vom Spielbild verdeckt. */
#knopf-a { right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 50px); }
#knopf-b { right: calc(env(safe-area-inset-right, 0px) + 76px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
/* B zeigt das Werkzeug, das gerade darauf liegt */
#knopf-b.mit-werkzeug { background-repeat: no-repeat; background-position: 50% 44%; background-size: 34px 34px; image-rendering: pixelated; color: transparent; }
#knopf-b.mit-werkzeug::after { content: "B"; position: absolute; right: 7px; bottom: 5px; font-size: 13px; color: var(--blei); }
#knopf-b[data-anzahl]::before { content: attr(data-anzahl); position: absolute; left: 8px; top: 5px; font-size: 13px; color: var(--blei); }
#knopf-wechsel {
  position: absolute; pointer-events: auto; touch-action: none;
  right: calc(env(safe-area-inset-right, 0px) + 14px + (var(--knopf) - 38px) / 2);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 50px + var(--knopf) + 12px);
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 3px solid var(--blei); background: rgba(212, 200, 177, 0.5); color: var(--blei);
  font: 700 18px/1 ui-rounded, system-ui, sans-serif;
}
#knopf-wechsel[hidden] { display: none; }
#knopf-wechsel.gedrueckt { background: rgba(242, 180, 61, 0.85); }
#knopf-menue {
  right: calc(env(safe-area-inset-right, 0px) + 14px); top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: 44px; height: 38px; border-radius: 9px;
  background: rgba(212, 200, 177, 0.5);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
#knopf-menue[hidden], #knopf-vollbild[hidden] { display: none; }
#knopf-menue[hidden] ~ #knopf-vollbild { right: calc(env(safe-area-inset-right, 0px) + 14px); }
#knopf-vollbild {
  position: absolute; pointer-events: auto; touch-action: none;
  right: calc(env(safe-area-inset-right, 0px) + 66px); top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: 44px; height: 38px; border-radius: 9px; padding: 0;
  border: 3px solid var(--blei); background: rgba(212, 200, 177, 0.5);
}
/* Symbol: vier Ecken */
#knopf-vollbild i { position: absolute; width: 9px; height: 7px; border: 0 solid var(--blei); }
#knopf-vollbild i:nth-child(1) { left: 8px; top: 6px; border-left-width: 3px; border-top-width: 3px; }
#knopf-vollbild i:nth-child(2) { right: 8px; top: 6px; border-right-width: 3px; border-top-width: 3px; }
#knopf-vollbild i:nth-child(3) { left: 8px; bottom: 6px; border-left-width: 3px; border-bottom-width: 3px; }
#knopf-vollbild i:nth-child(4) { right: 8px; bottom: 6px; border-right-width: 3px; border-bottom-width: 3px; }
/* Karte: direkt unter dem Menüknopf */
#knopf-karte {
  position: absolute; pointer-events: auto; touch-action: none;
  right: calc(env(safe-area-inset-right, 0px) + 14px); top: calc(env(safe-area-inset-top, 0px) + 58px);
  width: 44px; height: 38px; border-radius: 9px; padding: 0;
  border: 3px solid var(--blei); background: rgba(212, 200, 177, 0.5); color: var(--blei);
  display: flex; align-items: center; justify-content: center;
}
#knopf-karte[hidden] { display: none; }
#knopf-karte.gedrueckt { background: rgba(242, 180, 61, 0.85); }
#knopf-menue span { display: block; width: 20px; height: 3px; background: var(--blei); border-radius: 2px; }
#knopf-menue.gedrueckt { background: rgba(242, 180, 61, 0.85); }

/* ---------- Drehhinweis ---------- */
#drehen {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--nacht); color: var(--weiss); text-align: center; font-size: 18px; padding: 24px;
}
#drehen[hidden] { display: none; }
.dreh-symbol {
  width: 44px; height: 76px; border: 4px solid var(--kalkhell); border-radius: 9px;
  animation: drehen 2.4s ease-in-out infinite;
}
@keyframes drehen { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* ---------- Bildtafel ---------- */
#tafel {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 31, 0.0);
  pointer-events: none;
  opacity: 0; transition: opacity 0.6s;
}
#tafel.sichtbar { opacity: 1; }
#tafel[hidden] { display: none; }
#tafel svg { display: block; max-width: 100%; max-height: 100%; }

/* ---------- Texteingabe ---------- */
#eingabe {
  position: fixed; inset: 0; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 31, 0.72);
}
#eingabe[hidden] { display: none; }
#eingabe form {
  background: var(--nacht); border: 3px solid var(--kalkhell); border-radius: 6px;
  padding: 16px 18px; width: min(360px, 88vw);
  box-shadow: 0 0 0 3px var(--blei);
}
#eingabe label { display: block; font-size: 16px; margin-bottom: 10px; color: var(--weiss); }
#eingabe input {
  width: 100%; box-sizing: border-box; font-size: 20px; padding: 8px 10px;
  border: 2px solid var(--kalkhell); border-radius: 4px; background: var(--weiss); color: var(--blei);
  letter-spacing: 0.06em; -webkit-user-select: text; user-select: text;
}
#eingabe p { min-height: 1.2em; font-size: 14px; color: var(--sand); margin: 8px 0 4px; }
#eingabe .knoepfe { display: flex; gap: 10px; justify-content: flex-end; }
#eingabe button {
  font-size: 16px; padding: 8px 16px; border-radius: 4px; border: 2px solid var(--blei);
  background: var(--kalkhell); color: var(--blei); font-weight: 600;
}
#eingabe button[type="submit"] { background: var(--gold); }
#eingabe button[hidden] { display: none; }
#eingabe-einfuegen { margin-right: auto; }

/* ---------- Hilfe (DOM-Fenster über dem Spiel) ---------- */
#hilfe {
  position: fixed; inset: 0; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 31, 0.78);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 12px);
}
#hilfe[hidden] { display: none; }
#hilfe .kasten {
  background: var(--nacht); border: 3px solid var(--kalkhell); border-radius: 6px;
  padding: 12px 16px; width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--blei); color: var(--weiss);
}
#hilfe h2 { margin: 0 0 6px; font-size: 17px; color: var(--gold); }
#hilfe p { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
#hilfe .knoepfe { display: flex; justify-content: flex-end; margin-top: 8px; }
#hilfe .links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
#hilfe .links a {
  font-size: 15px; font-weight: 600; padding: 7px 12px; border-radius: 4px; text-decoration: none;
  background: var(--kalkhell); color: var(--blei); border: 2px solid var(--blei);
}
#hilfe p.klein { font-size: 12px; color: var(--sand); }
#hilfe button {
  font-size: 16px; padding: 8px 18px; border-radius: 4px; border: 2px solid var(--blei);
  background: var(--gold); color: var(--blei); font-weight: 600;
}

/* ---------- Speichercode mitnehmen ---------- */
#code-fenster {
  position: fixed; inset: 0; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 31, 0.78);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 12px);
}
#code-fenster[hidden] { display: none; }
#code-fenster .kasten {
  background: var(--nacht); border: 3px solid var(--kalkhell); border-radius: 6px;
  padding: 12px 16px; width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--blei); color: var(--weiss);
}
#code-fenster h2 { margin: 0 0 6px; font-size: 17px; color: var(--gold); }
#code-fenster p { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
#code-wert {
  margin: 8px 0; padding: 8px 10px; border-radius: 4px;
  background: var(--weiss); color: var(--blei); border: 2px solid var(--kalkhell);
  font: 700 19px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.05em; text-align: center;
  word-break: break-word; -webkit-user-select: all; user-select: all;
}
#code-meldung { min-height: 1.35em; color: var(--gold); }
#code-fenster .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
#code-fenster button {
  font-size: 16px; padding: 8px 16px; border-radius: 4px; border: 2px solid var(--blei);
  background: var(--kalkhell); color: var(--blei); font-weight: 600;
}
#code-fenster button[hidden] { display: none; }
#code-ok { background: var(--gold) !important; }

/* ---------- Der eigene Stein (Kapitel 12) ---------- */
#zeichner {
  position: fixed; inset: 0; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 31, 0.82);
  padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 6px) calc(env(safe-area-inset-left, 0px) + 12px);
}
#zeichner[hidden] { display: none; }
#zeichner .kasten {
  background: var(--nacht); border: 3px solid var(--kalkhell); border-radius: 6px;
  padding: 10px 14px; width: min(620px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--blei); color: var(--weiss);
}
#zeichner.ansehen .kasten { width: auto; max-width: 100%; }
#zeichner h2 { margin: 0 0 4px; font-size: 17px; color: var(--gold); }
#zeichner p { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
#zeichner p.klein { font-size: 12px; color: var(--sand); }
.zeichner-inhalt { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
#zeichner-leinwand {
  display: block; image-rendering: pixelated; touch-action: none; cursor: crosshair;
  border: 3px solid var(--blei); border-radius: 10px 10px 4px 4px; box-shadow: 0 0 0 2px var(--kalkhell);
}
.zeichner-seite { flex: 1; min-width: 150px; }
.zeichner-seite[hidden] { display: none; }
#zeichner-vorlagen { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
#zeichner-vorlagen button {
  width: 40px; height: 40px; padding: 2px; border-radius: 4px; border: 2px solid var(--blei);
  background: var(--kalkhell); cursor: pointer;
}
#zeichner-vorlagen canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
#zeichner-satz { color: var(--gold); font-style: italic; margin-top: 8px !important; }
#zeichner-satz[hidden] { display: none; }
#zeichner .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 8px; }
#zeichner .knoepfe button {
  font-size: 16px; padding: 8px 16px; border-radius: 4px; border: 2px solid var(--blei);
  background: var(--kalkhell); color: var(--blei); font-weight: 600;
}
#zeichner .knoepfe button[hidden] { display: none; }
#zeichner-ok { background: var(--gold) !important; }
#zeichner-abbrechen { margin-right: auto; }

/* ---------- Beamer-Modus (aus dem Leitungsmodus) ---------- */
body.beamer #touch, body.beamer #drehen { display: none !important; }