/* ============================================================
   DENKZAUBER · Gemeinsamer Stil für alle Spiele
   Wird von jedem Spiel eingebunden. Wenn du hier etwas änderst,
   ändert es sich in allen Spielen gleichzeitig.
   ============================================================ */

:root{
  --navy:#0f2735; --navy-deep:#0a1c28; --navy-tile:#16374b; --nacht:#081720;
  --gold:#d8b25a; --gold-soft:#e8cd8a; --gold-d:#c79a3a;
  --creme:#faf6ec; --creme-warm:#f3ecd9; --tinte:#22333e; --tinte-weich:#5a6a72;
  --hell:#f4eedd; --hell-dim:#a9bcc4;
  --richtig:#2f6b52; --richtig-hell:#7fc4a3;
  --falsch:#9c5233; --falsch-hell:#e0a184;
  --goldlinie:rgba(216,178,90,.55); --goldlinie-zart:rgba(216,178,90,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  background:radial-gradient(130% 100% at 50% 0%,#17394d 0%,var(--navy) 55%,var(--nacht) 100%);
  background-attachment:fixed;
  color:var(--hell);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.22;font-weight:700;text-wrap:balance}
svg.ic{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1240px,100%);margin:0 auto;padding:0 26px}
.schmal{width:min(820px,100%)}

/* ---------------- Kopfleiste ---------------- */
.dz-kopf{padding:20px 0;border-bottom:1px solid var(--goldlinie-zart);
  position:sticky;top:0;z-index:40;background:rgba(10,28,40,.9);backdrop-filter:blur(8px)}
.dz-kopf .innen{display:flex;align-items:center;gap:14px}
.dz-marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--hell)}
.dz-marke img{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold)}
.dz-marke b{font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.dz-marke b span{color:var(--gold)}
.dz-werkzeuge{margin-left:auto;display:flex;align-items:center;gap:9px}
.dz-knopf-leise{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  color:var(--hell-dim);font-family:inherit;font-weight:700;font-size:.87rem;padding:9px 16px;
  border-radius:999px;border:1px solid var(--goldlinie-zart);background:transparent;
  transition:all .15s;white-space:nowrap}
.dz-knopf-leise:hover{color:var(--gold-soft);border-color:var(--gold)}
.dz-knopf-leise.aus{opacity:.5}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:38px 0 54px}

/* ---------------- Überschriften ---------------- */
.kicker{display:inline-flex;align-items:center;gap:9px;color:var(--gold);
  text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:700;margin-bottom:12px}
.kicker::before{content:'';width:24px;height:2px;background:var(--gold);border-radius:2px}
h1.spieltitel{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--creme);margin-bottom:14px}
h1.spieltitel span{background:linear-gradient(180deg,#f0dca6,var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vorspann{color:var(--hell-dim);max-width:42rem;margin-bottom:14px}
.vorspann b{color:var(--gold-soft)}

/* ---------------- Knöpfe ---------------- */
.gross{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:1rem;color:#2a2410;
  text-decoration:none;background:linear-gradient(120deg,var(--gold-d),var(--gold));
  box-shadow:0 6px 20px rgba(199,154,58,.34);transition:background .15s,transform .1s}
.gross:hover{background:var(--gold-soft)}
.gross:active{transform:translateY(1px)}
.leise{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  cursor:pointer;font-family:inherit;font-weight:700;font-size:.95rem;text-decoration:none;
  background:transparent;color:var(--hell-dim);border:1px solid var(--goldlinie-zart);
  transition:all .15s}
.leise:hover{color:var(--gold-soft);border-color:var(--gold)}
.knopfzeile{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------------- Stufenwahl ---------------- */
.stufen{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.stufen button{padding:11px 20px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:.92rem;color:var(--hell);border:1px solid var(--goldlinie-zart);
  background:rgba(255,255,255,.05);transition:all .15s}
.stufen button:hover{border-color:var(--gold);color:var(--gold-soft)}
.stufen button.aktiv{background:linear-gradient(120deg,var(--gold-d),var(--gold));
  border-color:transparent;color:#2a2410;box-shadow:0 4px 14px rgba(199,154,58,.3)}

/* ---------------- Spielfeld-Rahmen ---------------- */
.brett{background:rgba(255,255,255,.045);border:1px solid var(--goldlinie-zart);
  border-radius:22px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.32)}
.anzeige{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.anzeige .feld{padding:10px 18px;border-radius:12px;border:1px solid var(--goldlinie-zart);
  background:linear-gradient(90deg,rgba(216,178,90,.12),rgba(216,178,90,.03));min-width:96px}
.anzeige .feld b{display:block;color:var(--gold-soft);font-size:1.35rem;line-height:1.15}
.anzeige .feld span{color:var(--hell-dim);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}

/* ---------------- Luna ---------------- */
/* Links unten, damit sie die Knöpfe an der rechten Seite nicht verdeckt. */
.luna-ecke{position:fixed;left:22px;bottom:22px;z-index:70;display:flex;align-items:flex-end;
  gap:14px;pointer-events:none;opacity:0;transform:translateY(18px);
  transition:opacity .4s ease,transform .4s ease}
.luna-ecke.da{opacity:1;transform:translateY(0)}
.luna-ecke img{order:-1;width:104px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
  animation:luna-wippen 3.4s ease-in-out infinite}
@keyframes luna-wippen{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.luna-blase{max-width:270px;background:var(--creme);color:var(--tinte);
  border-radius:16px 16px 16px 4px;padding:14px 18px;font-size:.95rem;font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,.34);position:relative}
.luna-blase::after{content:'';position:absolute;left:-8px;bottom:12px;width:0;height:0;
  border-right:10px solid var(--creme);border-top:8px solid transparent;border-bottom:8px solid transparent}
@media(prefers-reduced-motion:reduce){.luna-ecke img{animation:none}}
@media(max-width:640px){.luna-ecke img{width:74px}.luna-blase{max-width:190px;font-size:.88rem}}

/* ---------------- Funken ---------------- */
#funken{position:fixed;inset:0;pointer-events:none;z-index:80}

/* ---------------- Erfolgs-Fenster ---------------- */
.fenster{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  padding:26px;background:rgba(4,14,20,.78);backdrop-filter:blur(5px)}
.fenster.offen{display:flex}
.fenster-karte{width:min(520px,100%);max-height:92vh;overflow:auto;text-align:center;
  background:linear-gradient(160deg,#16374b,#0d2231);border:1px solid var(--goldlinie);
  border-radius:24px;padding:38px 34px;box-shadow:0 26px 70px rgba(0,0,0,.55);
  animation:fenster-auf .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes fenster-auf{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
.fenster-karte .stern{width:64px;height:64px;margin:0 auto 16px;color:var(--gold);
  animation:stern-dreh 5s linear infinite}
@keyframes stern-dreh{to{transform:rotate(360deg)}}
.fenster-karte h2{font-size:1.7rem;color:var(--creme);margin-bottom:10px}
.fenster-karte p{color:var(--hell-dim);margin-bottom:8px}
.fenster-karte .zahlzeile{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 4px}
.fenster-karte .zahlzeile div{padding:10px 18px;border-radius:12px;
  border:1px solid var(--goldlinie-zart);background:rgba(216,178,90,.09)}
.fenster-karte .zahlzeile b{display:block;color:var(--gold-soft);font-size:1.4rem;line-height:1.15}
.fenster-karte .zahlzeile span{color:var(--hell-dim);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.fenster-karte .knopfzeile{justify-content:center;margin-top:26px}
@media(prefers-reduced-motion:reduce){
  .fenster-karte{animation:none}.fenster-karte .stern{animation:none}
}

/* ---------------- Hilfe-Fenster ---------------- */
.fenster-karte.links{text-align:left}
.fenster-karte.links h2{margin-bottom:14px}
.fenster-karte.links ol{margin:0 0 6px 20px;color:var(--hell-dim)}
.fenster-karte.links li{margin-bottom:9px}
.fenster-karte.links .knopfzeile{justify-content:flex-start}

/* ---------------- Fuß ---------------- */
.dz-fuss{padding:24px 0 32px;border-top:1px solid rgba(216,178,90,.16);
  color:#7b8c95;font-size:.8rem}

/* ============================================================
   HANDY
   ------------------------------------------------------------
   Die Spiele waren für den großen Bildschirm gebaut. Was am
   Handy anders läuft — vor allem: Die drei Knöpfe oben rechts
   haben die ganze Seite auseinandergeschoben. Dort steht jetzt
   nur noch das Zeichen, die Beschriftung wird ausgeblendet.
   ============================================================ */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .dz-kopf{padding:12px 0}
  .dz-kopf .innen{gap:10px}
  .dz-werkzeuge{gap:6px}
  .dz-knopf-leise{padding:9px 12px}
  .dz-knopf-leise .wort{display:none}
  .dz-marke img{width:34px;height:34px}
  .dz-marke b{font-size:12.5px;letter-spacing:.12em}

  main{padding:26px 0 40px}
  h1.spieltitel{font-size:1.75rem}
  .vorspann{font-size:.97rem}
  .brett{padding:18px;border-radius:18px}
  .brett .brett{padding:16px}
  .knopfzeile{gap:9px}
  .gross{padding:13px 22px;font-size:.95rem}
  .leise{padding:12px 18px;font-size:.9rem}

  /* Stufenknöpfe brechen um, statt seitlich abgeschnitten zu werden */
  .stufen{flex-wrap:wrap;gap:7px}
  .stufen button{padding:9px 14px;font-size:.85rem}

  .anzeige{gap:8px}
  .anzeige .feld{min-width:0;flex:1 1 auto;padding:9px 13px}
  .anzeige .feld b{font-size:1.15rem}
  .anzeige .feld span{font-size:.66rem;letter-spacing:.06em}

  .fenster-karte{padding:28px 22px 24px}
  .fenster-karte h2{font-size:1.35rem}
  .fenster-karte .knopfzeile{flex-direction:column;align-items:stretch}
  .fenster-karte .knopfzeile .gross,
  .fenster-karte .knopfzeile .leise{justify-content:center}
}