/* ============================================================
   spiel.css — Karten-Look des Trainingsbereichs (Pilot, E38)
   Anlehnung an das Spielkarten-Redesign (standalone/sprache-der-
   neuen-rechten_redesign.html): warmes Papier, Gold-Akzent, eine
   Karte pro Bildschirm (mobile-first), 3D-Flip mit settled-Fix.
   Eigenständig — wird NUR von den Spielseiten geladen, zusätzlich
   zu webapp.css (Header/Grundlagen kommen von dort).
   ============================================================ */
:root{
  --sp-paper:#fffdf8; --sp-paper-2:#fbf5e9;
  --sp-ink:#2c2a24; --sp-ink-soft:#56514a; --sp-ink-mute:#8a8478;
  --sp-line:#e6ddca; --sp-line-soft:#efe8d9;
  --sp-accent:#b07d12; --sp-accent-fill:#e7c267; --sp-accent-ink:#3a2c05;
  --sp-correct:#2f9163; --sp-correct-bg:#e7f5ec;
  --sp-wrong:#cc5b34; --sp-wrong-bg:#fbeae2;
  --sp-dark:#3b3630; --sp-dark-ink:#f5efe2; --sp-dark-mute:#cfc7b4;
}
body.spielseite{
  background:radial-gradient(135% 95% at 50% -8%, #fdf9f0, #f3ead7 78%) fixed;
  color:var(--sp-ink);
}
/* — Bühne: eine Karte, mittig, volle mobile Höhe — */
.sp-buehne{max-width:560px;margin:0 auto;padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;min-height:calc(100dvh - 120px)}
.sp-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.sp-kopf .sp-zurueck{font-size:.85rem;color:var(--sp-accent);text-decoration:none;font-weight:700}
.sp-kopf .sp-zurueck:hover{text-decoration:underline}
.sp-punkte{margin-left:auto;font-weight:700;font-size:.95rem;color:var(--sp-ink);
  background:var(--sp-paper);border:1px solid var(--sp-line);border-radius:99px;padding:.25rem .8rem}
.sp-punkte .plus{color:var(--sp-correct)} .sp-punkte .minus{color:var(--sp-wrong)}
.sp-perlen{display:flex;gap:3px;flex-wrap:wrap;width:100%}
.sp-perle{width:10px;height:10px;border-radius:50%;background:var(--sp-line);border:1px solid var(--sp-line)}
.sp-perle.fertig{background:var(--sp-accent-fill);border-color:var(--sp-accent)}
.sp-perle.angefangen{background:var(--sp-line);border-color:var(--sp-accent)}
.sp-perle.aktiv{background:var(--sp-paper);border-color:var(--sp-accent);box-shadow:0 0 0 2px rgba(176,125,18,.25)}
.sp-perle.klickbar{cursor:pointer}

/* — Die Karte — */
.sp-karte{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--sp-paper);
  border-radius:20px;padding:1.25rem 1.25rem 1rem;
  box-shadow:0 16px 44px rgba(70,52,16,.16),0 2px 8px rgba(70,52,16,.08),inset 0 0 0 1px var(--sp-line-soft)}
.sp-karte.dunkel{background:var(--sp-dark);color:var(--sp-dark-ink);
  box-shadow:0 16px 44px rgba(20,14,4,.35),inset 0 0 0 1px #55503f}
.sp-karte.dunkel .sp-etikett{color:var(--sp-accent-fill)}
/* KEIN overscroll-behavior:contain hier: die Bühne wächst mit dem Inhalt
   (min-height), .sp-scroll läuft also nie selbst über — gescrollt wird die
   SEITE. contain blockierte am Rechner das Mausrad über der Liste, weil der
   nicht-scrollbare Container die Weitergabe schluckte (Peter 2026-07-10). */
.sp-scroll{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding-right:.2rem;
  scrollbar-width:none;-ms-overflow-style:none}   /* scrollbar unsichtbar, Scrollen bleibt (wie im Redesign) */
.sp-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.sp-fuss{flex-shrink:0;margin-top:.7rem;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.sp-etikett{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sp-accent);font-weight:700;margin-bottom:.25rem}
.sp-titel{font-family:Georgia,serif;font-size:1.3rem;font-weight:700;line-height:1.2;margin:0 0 .5rem}
.sp-frage{font-size:1.05rem;font-weight:500;line-height:1.5;margin:.4rem 0 .6rem}

/* — Szene — */
.sp-ort{font-size:.8rem;color:var(--sp-ink-mute);margin-bottom:.5rem}
.sp-rede{border:1px solid var(--sp-line);border-radius:13px;background:var(--sp-paper-2);
  padding:13px 15px;font-size:1.04rem;line-height:1.55;margin:6px 0;color:var(--sp-ink)}
.sp-rede .sp-sprecher{display:block;font-weight:700;font-size:.85rem;color:var(--sp-accent);margin-bottom:4px}
.sp-zitatblock{border-left:3px solid var(--sp-accent);padding:6px 12px;margin:8px 0;font-style:italic;line-height:1.55}
.sp-herkunft{margin-top:auto;border-top:1px dashed var(--sp-line);padding-top:8px;
  font-size:.78rem;color:var(--sp-ink-mute);line-height:1.5}

/* — Antwort-/Optionskarten — */
.sp-option{display:block;width:100%;text-align:left;border:1px solid var(--sp-line);border-radius:13px;
  background:var(--sp-paper-2);padding:13px 15px;margin:8px 0;font:inherit;font-size:.98rem;line-height:1.5;
  color:var(--sp-ink);cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent}
.sp-option:hover{border-color:var(--sp-accent);transform:translateY(-1px);box-shadow:0 4px 14px rgba(80,60,20,.1)}
.sp-option:disabled{cursor:default;transform:none;box-shadow:none}
.sp-option.gut{border-color:var(--sp-correct);background:var(--sp-correct-bg)}
.sp-option.schlecht{border-color:var(--sp-wrong);background:var(--sp-wrong-bg)}
/* neutral »gewählt« (Gold): markiert die Wahl OHNE richtig/falsch vorwegzunehmen —
   für Runden, deren Auflösung erst später kommt (z. B. Werkstatt-Unterbau) */
.sp-option.gewaehlt{border-color:var(--sp-accent);background:#faf3df;
  box-shadow:inset 0 0 0 1px var(--sp-accent)}
.sp-option.blass{opacity:.55}
.sp-option .op-punkte{float:right;font-weight:700;margin-left:8px}
.sp-option .op-punkte.plus{color:var(--sp-correct)} .sp-option .op-punkte.minus{color:var(--sp-wrong)}
.sp-erkl{border-radius:11px;padding:10px 13px;margin:6px 0 2px;font-size:.88rem;line-height:1.5;
  background:var(--sp-paper-2);border:1px solid var(--sp-line);color:var(--sp-ink)}
.sp-erkl.gut{background:var(--sp-correct-bg);border-color:var(--sp-correct)}
.sp-erkl.schlecht{background:var(--sp-wrong-bg);border-color:var(--sp-wrong)}

/* — Technik-Chips — */
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sp-chip{border:1px solid var(--sp-line);border-radius:99px;background:var(--sp-paper);
  padding:.45rem .9rem;font:inherit;font-size:.88rem;color:var(--sp-ink);cursor:pointer;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.sp-chip:hover{border-color:var(--sp-accent)}
.sp-chip.gewaehlt{background:var(--sp-accent-fill);border-color:var(--sp-accent);color:var(--sp-accent-ink);font-weight:700}
.sp-chip.gut{background:var(--sp-correct-bg);border-color:var(--sp-correct)}
.sp-chip.schlecht{background:var(--sp-wrong-bg);border-color:var(--sp-wrong)}
.sp-chip.fehlt{border-style:dashed;border-color:var(--sp-correct);color:var(--sp-correct)}

/* — Bausteine ordnen — */
.sp-baustein{position:relative}
.sp-baustein .bs-nr{position:absolute;top:-8px;left:-6px;width:26px;height:26px;border-radius:50%;
  background:var(--sp-accent-fill);color:var(--sp-accent-ink);font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(80,60,20,.25)}

/* — Türöffner — */
.sp-tuer{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:.82rem;color:var(--sp-ink-mute)}
.sp-tuer .t-stufen{display:flex;gap:4px}
.sp-tuer .t-seg{width:26px;height:9px;border-radius:5px;background:var(--sp-line)}
.sp-tuer .t-seg.an{background:var(--sp-correct)}
.sp-tuer .t-label{font-weight:700;color:var(--sp-ink)}
/* dunkle Karte (Kampagne): sp-tuer/sp-ort/t-label setzen helle-Karten-Tinte ohne
   eigenen Hintergrund → ohne diese Varianten unlesbar auf var(--sp-dark)
   (Kontrast-Fehlerklasse, s. docs/CODE_REVIEW_2026-07-09.md Befund 2.1) */
.sp-karte.dunkel .sp-tuer,.sp-karte.dunkel .sp-ort{color:var(--sp-dark-mute)}
.sp-karte.dunkel .sp-tuer .t-label{color:var(--sp-accent-fill)}

/* — Publikums-/Wirkungs-Balken (Werkstatt) — */
.sp-balken{height:12px;border-radius:7px;background:var(--sp-line-soft);overflow:hidden;margin:4px 0 10px}
.sp-balken>span{display:block;height:100%;background:linear-gradient(90deg,var(--sp-accent-fill),var(--sp-wrong));
  width:0;transition:width .5s cubic-bezier(.2,.8,.25,1)}

/* — Buttons — */
.sp-btn{border:1px solid var(--sp-accent);border-radius:99px;background:var(--sp-paper);color:var(--sp-accent);
  font:inherit;font-weight:700;font-size:.95rem;padding:.6rem 1.4rem;cursor:pointer;
  transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.sp-btn:hover{background:var(--sp-accent-fill);color:var(--sp-accent-ink);border-color:var(--sp-accent-fill)}
.sp-btn.voll{background:var(--sp-accent-fill);color:var(--sp-accent-ink);border-color:var(--sp-accent-fill)}
.sp-btn.voll:hover{filter:brightness(1.05)}
.sp-btn:disabled{opacity:.45;cursor:default}
.sp-btn.leise{border-color:var(--sp-line);color:var(--sp-ink-mute)}

/* — Flipkarte (Auflösung) — preserve-3d + settled-Fix wie im Redesign — */
.sp-flip{flex:1;min-height:0;perspective:1900px;display:flex}
.sp-flip-inner{position:relative;flex:1;transition:transform .8s cubic-bezier(.2,.75,.25,1);transform-style:preserve-3d;display:flex}
.sp-flip.gedreht .sp-flip-inner{transform:rotateY(180deg)}
.sp-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;border-radius:20px;padding:1.25rem 1.25rem 1rem;background:var(--sp-paper);
  box-shadow:0 16px 44px rgba(70,52,16,.16),inset 0 0 0 1px var(--sp-line-soft)}
.sp-face-hinten{transform:rotateY(180deg)}
.sp-flip.ruhig .sp-flip-inner{transform:none;transition:none;transform-style:flat}
.sp-flip.ruhig .sp-face{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;position:relative}
.sp-flip.ruhig:not(.gedreht) .sp-face-hinten{display:none}
.sp-flip.ruhig.gedreht .sp-face-vorn{display:none}

/* — Auflösung / Spiegel — */
.sp-spiegel{border:1px solid #55503f;border-radius:13px;background:var(--sp-dark);color:var(--sp-dark-ink);
  padding:13px 15px;margin:8px 0;font-size:.98rem;line-height:1.6;font-style:italic}
.sp-spiegel .sp-sprecher{display:block;font-style:normal;font-weight:700;font-size:.8rem;color:var(--sp-accent-fill);margin-bottom:4px}
.sp-quelle{font-size:.82rem;color:var(--sp-ink-mute);line-height:1.5;margin-top:6px}
.sp-quelle a{color:var(--sp-accent)}
.sp-anker{color:var(--sp-accent);font-weight:700}
.sp-muster{border:1px solid var(--sp-correct);background:var(--sp-correct-bg);border-radius:13px;
  padding:13px 15px;margin:8px 0;font-size:.98rem;line-height:1.55;
  color:var(--sp-ink)}  /* eigener heller Hintergrund → IMMER eigene Tinte (Kontrast-Fehlerklasse) */

/* — Album — */
.sp-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0}
.sp-albumkarte{border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-paper);padding:12px;
  display:flex;flex-direction:column;gap:6px;min-height:110px}
.sp-albumkarte h4{margin:0;font-family:Georgia,serif;font-size:.95rem;line-height:1.25}
.sp-albumkarte .stempel{display:flex;gap:6px;margin-top:auto}
.sp-stempel{width:26px;height:26px;border-radius:50%;border:1.5px dashed var(--sp-line);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--sp-ink-mute)}
.sp-stempel.hat{border-style:solid;border-color:var(--sp-accent);background:var(--sp-accent-fill);color:var(--sp-accent-ink)}

/* — Hub-Kacheln — */
.sp-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.sp-hubkarte{display:flex;flex-direction:column;gap:8px;border:1px solid var(--sp-line);border-radius:16px;
  background:var(--sp-paper);padding:18px;text-decoration:none;color:var(--sp-ink);
  box-shadow:0 6px 20px rgba(70,52,16,.08);transition:transform .12s,box-shadow .15s,border-color .15s}
.sp-hubkarte:hover{border-color:var(--sp-accent);transform:translateY(-2px);box-shadow:0 10px 26px rgba(70,52,16,.14)}
.sp-hubkarte .hk-ico{width:42px;height:42px;border-radius:12px;background:var(--sp-accent-fill);color:var(--sp-accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.sp-hubkarte h3{margin:0;font-family:Georgia,serif;font-size:1.15rem}
.sp-hubkarte p{margin:0;font-size:.88rem;color:var(--sp-ink-soft);line-height:1.5}
.sp-hubkarte .hk-stand{font-size:.78rem;color:var(--sp-ink-mute);margin-top:auto}
.sp-hubkarte.gesperrt{opacity:.6;pointer-events:none}
.sp-hubkarte.gesperrt .hk-ico{background:var(--sp-line-soft);color:var(--sp-ink-mute)}
.sp-hubkarte.dunkelkarte{background:var(--sp-dark);color:var(--sp-dark-ink)}
.sp-hubkarte.dunkelkarte p{color:var(--sp-dark-mute)}
.sp-hubkarte.dunkelkarte h3{color:var(--sp-dark-ink)}

@media (max-width:640px){
  .sp-buehne{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  .sp-karte,.sp-face{padding:1rem .95rem .85rem;border-radius:16px}
}

/* — Grade/Übersicht + Badges (DESIGN_spielmodi_gui.md) — */
.sp-grad-titel{font-family:Georgia,serif;font-size:1.05rem;margin:14px 0 6px;color:var(--sp-ink)}
.sp-karte.dunkel .sp-grad-titel{color:var(--sp-dark-ink)}
.sp-gesperrt{font-size:.88rem;color:var(--sp-ink-mute);border:1px dashed var(--sp-line);
  border-radius:11px;padding:10px 13px;margin:4px 0}
.sp-karte.dunkel .sp-gesperrt{color:var(--sp-dark-mute);border-color:#55503f}
.sp-badge-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;
  background:var(--sp-dark);color:var(--sp-dark-ink);border:1px solid var(--sp-accent);
  border-radius:14px;padding:10px 20px;z-index:99;transition:transform .35s,opacity .35s;
  text-align:center;font-size:.92rem;box-shadow:0 10px 30px rgba(20,14,4,.35)}
.sp-badge-toast.zeigen{transform:translate(-50%,0);opacity:1}
.sp-badge-toast .bt-ico{font-size:1.5rem;display:block}
.sp-albumkarte.badge-offen{opacity:.55;border-style:dashed}
.sp-modus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}

/* — Album-Kacheln: lange Technik-Namen umbrechen (iPhone-Fix, Peter 2026-07-10) — */
.sp-album{grid-auto-rows:auto}
.sp-albumkarte{min-width:0}
.sp-albumkarte h4{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.sp-albumkarte span{overflow-wrap:anywhere}

/* — Badge-Overlay + Teilen — */
.sp-overlay{position:fixed;inset:0;background:rgba(30,25,15,.55);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:20px}
.sp-overlay-karte{background:var(--sp-paper);color:var(--sp-ink);border-radius:18px;
  max-width:400px;width:100%;padding:26px 22px;text-align:center;
  box-shadow:0 20px 60px rgba(20,14,4,.4);position:relative}
.sp-overlay-karte .ov-ico{font-size:3rem;display:block;margin-bottom:6px}
.sp-overlay-karte h3{font-family:Georgia,serif;margin:.2rem 0 .5rem}
.sp-overlay-karte p{font-size:.92rem;line-height:1.55;color:var(--sp-ink-soft)}
.sp-overlay-zu{position:absolute;top:10px;right:14px;border:0;background:none;
  font-size:1.3rem;cursor:pointer;color:var(--sp-ink-mute)}
.sp-albumkarte.klickbar{cursor:pointer;transition:transform .12s,border-color .15s}
.sp-albumkarte.klickbar:hover{transform:translateY(-2px);border-color:var(--sp-accent)}

/* ---- Grad-Akkordeon der Auswahl-Übersicht (Peter 2026-07-10): Sektionen
   geschlossen, gesperrte Grade mit 🔒 im Titel nicht öffenbar ---- */
.sp-akk{border:1px solid var(--sp-line);border-radius:10px;margin:0 0 10px;overflow:hidden;background:rgba(255,255,255,.35)}
.sp-akk-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:100%;
  padding:11px 14px;background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.sp-akk-titel{font-family:Georgia,serif;font-size:1.02rem;font-weight:700}
.sp-akk-pfeil{margin-left:auto;color:var(--sp-ink-mute);transition:transform .2s}
.sp-akk.offen .sp-akk-pfeil{transform:rotate(180deg)}
.sp-akk-sperre{flex-basis:100%;font-size:.78rem;line-height:1.45;color:var(--sp-ink-mute)}
.sp-akk.gesperrt .sp-akk-kopf{cursor:default}
.sp-akk.gesperrt .sp-akk-titel{color:var(--sp-ink-mute)}
.sp-akk-inhalt{padding:2px 10px 10px}
.sp-karte.dunkel .sp-akk{border-color:#55503f;background:rgba(0,0,0,.18)}
.sp-karte.dunkel .sp-akk-pfeil,.sp-karte.dunkel .sp-akk-sperre,
.sp-karte.dunkel .sp-akk.gesperrt .sp-akk-titel{color:var(--sp-dark-mute)}

/* Spielerprofil (Peter 2026-07-10): Badges auf dem iPhone kompakter —
   mehr Spalten, kleinere Karten; Prominenz bleibt (Sektion offen oben). */
@media (max-width:640px){
  #pf-badges .sp-album{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  #pf-badges .sp-albumkarte{padding:8px;border-radius:10px}
  #pf-badges .sp-albumkarte h4{font-size:.76rem;overflow-wrap:break-word}
  #pf-badges .sp-albumkarte span{font-size:.7rem !important}
  /* break-word statt anywhere: erst Silbentrennung (hyphens) versuchen,
     nicht mitten im Wort ohne Strich brechen */
  #pf-badges .sp-albumkarte h4,#pf-badges .sp-albumkarte span{overflow-wrap:break-word}
}