/* Die Leitungen von Aeryndor — Stil.
   Layout: eine schmale Werkbank-Spalte — Kapitelkopf, Spielfeld als Steinplatte mit Lichtschicht, Steinvorrat, darunter die Erzählung. Bewusst eine einzige dunkle Welt. */
:root {
  --night: #12141f;
  --slab: #1d2030;
  --slab-2: #24283b;
  --rim: #33384f;
  --ink: #ece6d6;
  --ink-soft: #a8a497;
  --brass: #e0a93f;
  --danger: #e2553f;
  --vita: #63c46f;
  --font-display: "Marcellus SC", "Trajan Pro", Georgia, serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", sans-serif;
  --beam: #ffd56b;
  --beam-bad: #ff6a4d;
  --beam-core: #fffaf0;
  --beam-green: #7fe08a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: radial-gradient(120% 55% at 50% -10%, #2b2542 0%, var(--night) 62%) fixed, var(--night);
  color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 40px;
}
.wrap { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
header { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--rim); padding-bottom: 12px; }
.brand { font-family: var(--font-display); font-size: .8rem; letter-spacing: .18em; color: var(--ink-soft); text-transform: uppercase; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0; color: var(--brass); text-wrap: balance; }
.levels { display: flex; gap: 6px; flex-wrap: wrap; }
.lv { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rim); background: var(--slab); color: var(--ink-soft); font-family: var(--font-display); cursor: pointer; font-variant-numeric: tabular-nums; }
.lv.done { border-color: var(--brass); color: var(--brass); }
.lv.cur { background: var(--brass); color: #1a1408; border-color: var(--brass); }
.lv:disabled { opacity: .3; cursor: default; }
button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.story { margin: 0; color: var(--ink); }
.rule { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.rule b { color: var(--ink); font-weight: 500; }

.boardwrap { position: relative; margin: 0 auto; width: min(100%, calc(var(--cols) * 60px)); border-radius: 10px; overflow: hidden; border: 1px solid var(--rim); background: var(--slab); }
.board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.cell { aspect-ratio: 1; border: none; background: transparent; padding: 0; position: relative; display: grid; place-items: center; cursor: pointer; }
.cell:nth-child(odd) { background: rgba(255,255,255,.015); }
.cell.fixed { cursor: default; }
.cell::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.035); pointer-events: none; }
.socket { width: 22%; height: 22%; border-radius: 50%; background: #0d0f18; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.rock { position: absolute; inset: 3px; border-radius: 6px; background: linear-gradient(145deg, #3a3d4e, #232533); box-shadow: inset 2px 2px 0 rgba(255,255,255,.06), inset -2px -3px 0 rgba(0,0,0,.35); }
.beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stone { width: 64%; height: 64%; border-radius: 50%; position: relative; display: grid; place-items: center; box-shadow: inset -4px -6px 9px rgba(0,0,0,.45), inset 3px 4px 7px rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.5); z-index: 2; }
.s-ignis { background: radial-gradient(circle at 35% 30%, #fff1bd, #e8b23a 45%, #9a6512); }
.s-tempest { background: radial-gradient(circle at 35% 30%, #d6ecff, #3f8fd8 45%, #173f72); }
.s-lumen { background: radial-gradient(circle at 35% 30%, #ffffff, #f1eee4 50%, #b6b1a3); }
.s-umbra { background: radial-gradient(circle at 35% 30%, #6f6290, #2c2540 50%, #0b0912); }
.s-gravitas { border-radius: 26%; background: radial-gradient(circle at 35% 30%, #c9a27e, #7a5236 50%, #3a2617); }
.s-chrona { background: radial-gradient(circle at 35% 30%, #ffffff, #c3cad6 45%, #6d7685); }
.bar { position: absolute; width: 120%; height: 14%; border-radius: 4px; background: #eaf5ff; box-shadow: 0 0 6px #9fd0ff; }
.diamond { width: 30%; height: 30%; background: #fff; transform: rotate(45deg); box-shadow: 0 0 8px #fff; }
.ring { width: 46%; height: 46%; border-radius: 50%; border: 3px solid #5b6474; }
.chev { width: 0; height: 0; border-left: 9px solid #4a2c00; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.seed { width: 34%; height: 34%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #bfeec2, #3f8a49 60%, #1e4a25); border: 2px solid #2a5a31; z-index: 2; transition: transform .3s, box-shadow .3s; }
.lit .seed { transform: scale(1.5); box-shadow: 0 0 14px 4px rgba(99,196,111,.75); background: radial-gradient(circle at 40% 35%, #f0fff0, #7fe08a 55%, #2e7a3a); }
.crack { position: absolute; inset: 12%; z-index: 1; }
.crack path { stroke: #7a3b33; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lit .crack path { stroke: var(--danger); filter: drop-shadow(0 0 4px var(--danger)); }
.placed .stone { animation: drop .2s ease-out; }
@keyframes drop { from { transform: scale(.5); opacity: .2; } to { transform: scale(1); opacity: 1; } }
/* Neue Strahlstücke wachsen Zelle für Zelle von der Quelle aus */
.beam .grow path { stroke-dasharray: 5 5; stroke-dashoffset: 5; animation: grow .09s linear forwards; animation-delay: calc(var(--d) * 28ms); }
@keyframes grow { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .placed .stone { animation: none; } .seed { transition: none; } .beam .grow path { animation: none; stroke-dashoffset: 0; } }

.status { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.status .bad { color: var(--danger); }
.status .good { color: var(--vita); }

.tray { display: flex; gap: 8px; flex-wrap: wrap; }
.tool { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rim); background: var(--slab); color: var(--ink); cursor: pointer; font-family: var(--font-body); font-size: .95rem; text-align: left; }
.tool .stone { width: 30px; height: 30px; flex: none; }
.tool .bar { height: 4px; }
.tool .count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tool.sel { border-color: var(--brass); background: var(--slab-2); box-shadow: 0 0 0 1px var(--brass) inset; }
.tool:disabled { opacity: .35; cursor: default; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font-family: var(--font-display); font-size: .95rem; letter-spacing: .05em; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--rim); background: var(--slab); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #1a1408; }

.panel { border: 1px solid var(--brass); border-radius: 10px; background: rgba(36,40,59,.85); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.panel h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0; color: var(--brass); }
.panel p { margin: 0; }
.panel .after { font-style: italic; }
.cta { color: var(--brass); font-weight: 700; text-decoration: none; }
.cta:hover { text-decoration: underline; }
.proto { font-size: .72rem; color: var(--ink-soft); text-align: center; letter-spacing: .1em; text-transform: uppercase; }

[hidden] { display: none !important; }
html, body { margin: 0; }
.chapters { display: flex; gap: 6px; flex-wrap: wrap; }
.ch { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rim); background: var(--slab); color: var(--ink-soft); font-family: var(--font-display); font-size: .8rem; letter-spacing: .04em; cursor: pointer; }
.ch.done { border-color: var(--brass); color: var(--brass); }
.ch.cur { background: var(--brass); border-color: var(--brass); color: #1a1408; }
.ch:disabled { opacity: .3; cursor: default; }

/* Konto, Anmeldung, Fuß */
.notice { margin: 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--slab); font-size: .92rem; }
.notice.good { border-color: var(--vita); }
.notice.bad { border-color: var(--danger); }
.login { display: flex; flex-direction: column; gap: 10px; }
.login label { font-size: .9rem; color: var(--ink-soft); }
.login input[type=email] { font: inherit; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--night); color: var(--ink); width: 100%; }
.login input[type=email]:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.login .check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: .9rem; cursor: pointer; }
.login .check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brass); flex: none; }
.small { font-size: .85rem; color: var(--ink-soft); }
.msg { color: var(--danger); font-size: .9rem; min-height: 1em; }
.msg:empty { display: none; }
.panel a, .foot a { color: var(--brass); }
.linkbtn { background: none; border: none; padding: 0; font: inherit; color: var(--brass); text-decoration: underline; cursor: pointer; }
.foot { border-top: 1px solid var(--rim); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.foot p { margin: 0; }
.foot #footEmail { color: var(--ink); overflow-wrap: anywhere; }
.foot .langs { display: flex; justify-content: center; align-items: center; gap: 8px; }
.foot .langs select { font: inherit; color: var(--ink); background: var(--slab, #1d2030); border: 1px solid var(--rim); border-radius: 6px; padding: 4px 8px; }
.reader .storylang { color: var(--ink-soft); font-style: italic; }
.legalpage p, .legalpage li { color: var(--ink); }
.legalpage .todo { border: 1px dashed var(--brass); padding: 10px 12px; border-radius: 6px; }
.passkey-login { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rim); padding-top: 10px; }
.pklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pklist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--rim); border-radius: 6px; background: var(--night); }
.pklist .pkname { color: var(--ink); overflow-wrap: anywhere; }
.pklist .pkmeta { display: block; font-size: .8rem; color: var(--ink-soft); }
.pklist .empty { color: var(--ink-soft); justify-content: flex-start; border-style: dashed; }

/* Vorgeschichte: Leseansicht statt Spielfeld */
.play { display: flex; flex-direction: column; gap: 18px; }
.reader { display: none; flex-direction: column; gap: 14px; }
.reading .reader { display: flex; }
/* Beim Lesen breiter als das Spielfeld: etwa 70 Zeichen pro Zeile, auf dem Handy volle Breite */
.reading .wrap { max-width: 720px; }
.reading .play, .reading #title, .reading #levels, .reading #account, .reading #passkeys,
.reading #newsletterPanel, .reading #emailPanel, .reading #keyPanel { display: none !important; }
.reader-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reader-head .brand { margin: 0; }
.reader-head .linkbtn { font-size: .9rem; flex: none; }
.reader h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; margin: 0; color: var(--brass); text-wrap: balance; }
.reader h2:focus { outline: none; }
.reader-text p { margin: 0 0 1em; font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.7; hyphens: auto; }
.reader-text em { color: var(--brass); }
.storylist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.storylist .linkbtn { text-align: left; }
.storylist .linkbtn:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; }

/* Impressum und Datenschutz */
.legalpage h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--brass); margin: 10px 0 -8px; }
.legalpage h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin: 0 0 -10px; }
.legalpage p, .legalpage ul { margin: 0; }
.legalpage ul { padding-left: 1.2em; }

/* Admin-Übersicht */
.adminpage { max-width: 720px; }
.adminpage h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--brass); margin: 6px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.kpi { border: 1px solid var(--rim); border-radius: 8px; background: var(--slab); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: .8rem; color: var(--ink-soft); }
.kpi-value { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: var(--ink-soft); min-height: 1em; }
.stat { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.stat th { text-align: left; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--rim); padding: 6px 8px 6px 0; }
.stat td { border-bottom: 1px solid rgba(255,255,255,.05); padding: 5px 8px 5px 0; white-space: nowrap; }
.stat td:first-child { white-space: normal; }
.stat .barcell { width: 30%; }
.statbar { display: block; height: 8px; border-radius: 4px; background: var(--brass); min-width: 2px; }
.stat tr.hot td { color: var(--brass); }

/* Spielende: Hinweis auf die Bücher */
.bookbox { border-top: 1px solid var(--rim); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bookbox i { color: var(--ink); }
a.btn { text-decoration: none; display: inline-block; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.quiet { margin-left: auto; color: var(--ink-soft); }

/* Spätere Kapitel: Wasser, Eis, Tore und Platten, schlafende Glutsteine, Glutsplitter */
.water { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,120,170,.35), rgba(30,70,120,.55)); box-shadow: inset 0 2px 0 rgba(160,210,255,.18); }
.water::after { content: ""; position: absolute; left: 18%; right: 18%; top: 38%; height: 2px; border-radius: 2px; background: rgba(170,215,255,.35); box-shadow: 0 6px 0 rgba(170,215,255,.2); }
.lit .water { background: linear-gradient(180deg, rgba(90,160,210,.45), rgba(40,90,140,.6)); }
.cell .stone { z-index: 2; }
.ice { position: absolute; inset: 3px; border-radius: 4px; background: linear-gradient(135deg, rgba(220,240,255,.35), rgba(150,200,235,.18)); border: 1px solid rgba(200,230,255,.35); }
.lit .ice { background: linear-gradient(135deg, rgba(235,248,255,.6), rgba(170,215,245,.3)); box-shadow: 0 0 8px rgba(190,230,255,.6); }
.melted .ice { background: rgba(80,120,160,.25); border-color: var(--danger); }
.melted .crack path { stroke: var(--danger); }
.gate { position: absolute; inset: 4px; border-radius: 3px; display: flex; justify-content: space-evenly; align-items: stretch; background: rgba(20,22,32,.6); border: 2px solid var(--gate); }
.gate i { width: 3px; background: var(--gate); border-radius: 2px; }
.gate.open { background: transparent; border-style: dashed; opacity: .45; }
.gate.open i { display: none; }
.plate { width: 56%; height: 56%; border-radius: 50%; border: 2px solid var(--gate); background: rgba(20,22,32,.6); box-shadow: inset 0 0 0 4px rgba(0,0,0,.25); }
.plate.on { background: var(--gate); box-shadow: 0 0 12px var(--gate); }
.g-g { --gate: #d9a441; } .g-h { --gate: #4fb7a8; } .g-i { --gate: #a07ad6; } .g-j { --gate: #d9718c; }
.stone.asleep { filter: grayscale(.85) brightness(.55); }
.s-splitter { background: radial-gradient(circle at 35% 30%, #ffe1b0, #f07a2a 50%, #8a2f0c); }
.shard { width: 34%; height: 46%; background: #fff3d6; clip-path: polygon(50% 0, 100% 45%, 55% 100%, 0 55%); box-shadow: 0 0 6px #ffd38a; }

/* Wertung: Sterne unter den Rätselnummern und im Gewinnfeld */
.levels { row-gap: 14px; }
.lv { position: relative; }
.lv[data-stars]::after { content: attr(data-stars); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 9px; line-height: 1; letter-spacing: -1px; color: var(--brass); white-space: nowrap; margin-top: 1px; }
.panel .score { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; }
#clock { font-variant-numeric: tabular-nums; }

.adminpage select { font: inherit; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--night); color: var(--ink); width: 100%; }
.adminpage .msg.good { color: var(--vita); }
.adminpage input[type=email] { font: inherit; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--night); color: var(--ink); width: 100%; }

/* Zwischentexte im Gewinnfeld und in der Übersicht */
.panel .after { display: flex; flex-direction: column; gap: 8px; }
.panel .after p { line-height: 1.55; }
.storylist li.sub { padding-left: 1.2em; font-size: .92rem; }
.storylist li:not(.sub) { margin-top: 6px; font-weight: 500; }

/* Drehungen als Klassen (keine style-Attribute wegen der Content-Security-Policy) */
.rot0 { transform: rotate(0deg); } .rot90 { transform: rotate(90deg); } .rot180 { transform: rotate(180deg); } .rot270 { transform: rotate(270deg); }
.rot45 { transform: rotate(45deg); } .rot-45 { transform: rotate(-45deg); }

/* Hinweise */
.hintmsg { margin: 0; padding: 8px 12px; border-radius: 6px; border: 1px dashed var(--brass); font-size: .92rem; color: var(--ink); }
.cell.hint::before { content: ""; position: absolute; inset: 2px; border-radius: 8px; border: 2px solid var(--brass); box-shadow: 0 0 10px rgba(224,169,63,.6); z-index: 3; pointer-events: none; animation: hintpulse 1.4s ease-in-out infinite; }
@keyframes hintpulse { 50% { opacity: .35; } }
.ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cell.hint::before { animation: none; } }

/* Startbildschirm für neue Besucher */
.landing { display: none; flex-direction: column; gap: 14px; }
body.landing-open .landing { display: flex; }
body.landing-open header, body.landing-open .play, body.landing-open .reader, body.landing-open #account, body.landing-open #passkeys,
body.landing-open #newsletterPanel, body.landing-open #emailPanel, body.landing-open #keyPanel { display: none !important; }
body.landing-open .wrap { max-width: 640px; }
.landing h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); line-height: 1.1; margin: 0; color: var(--brass); text-wrap: balance; }
.landing h1:focus { outline: none; }
.landing h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 10px 0 -4px; color: var(--brass); }
.landing .brand { margin: 0; }
.landing p { margin: 0; line-height: 1.6; }
.landing-art { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.landing-lead { font-size: 1.15rem; }
.landing-actions .btn { padding: 12px 18px; }
.landing-facts { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }

/* Buch-Schlüssel */
.login input[type=text] { font: inherit; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--night); color: var(--ink); width: 100%; }
.login input[type=text]:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.ch.key { border-style: dashed; color: var(--brass); }

/* Dritter Teil: zwei Zeiten, Schutt, Zeitblasen, Knoten, runde Platte */
.times { display: flex; gap: 6px; }
.times[hidden] { display: none; }
.time { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rim); background: var(--slab); color: var(--ink-soft); font-family: var(--font-display); letter-spacing: .06em; cursor: pointer; font-variant-numeric: tabular-nums; }
.time[aria-pressed="true"] { border-color: var(--brass); color: var(--ink); background: var(--slab-2); box-shadow: 0 0 0 1px var(--brass) inset; }
.time.good { color: var(--vita); }
.time.bad { color: var(--danger); }
.timemsg { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.timemsg[hidden] { display: none; }
.traynote { margin: 0; font-size: .92rem; color: var(--ink-soft); }
/* Damals: wärmerer, hellerer Stein; die Halle ist noch sauber */
.boardwrap.damals { background: #262234; border-color: #4a4160; }
.boardwrap.damals .rock { background: linear-gradient(145deg, #4a4458, #2d2a3a); }
.cell.later::before { content: ""; position: absolute; inset: 4px; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(150,130,100,.16) 0 3px, transparent 3px 7px); pointer-events: none; }
.cell.past .stone { box-shadow: 0 0 0 2px rgba(214,190,140,.45); }
.rubble { position: absolute; inset: 2px; border-radius: 5px; background: linear-gradient(160deg, #4b4336, #2b261f); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.rubble i { position: absolute; border-radius: 40%; background: #5e5444; }
.rubble i:nth-child(1) { left: 14%; top: 18%; width: 34%; height: 28%; }
.rubble i:nth-child(2) { right: 12%; top: 40%; width: 30%; height: 26%; background: #6a5f4d; }
.rubble i:nth-child(3) { left: 30%; bottom: 12%; width: 28%; height: 22%; background: #534a3c; }
.ghost.buried { opacity: .28; z-index: 1; filter: grayscale(.6); }
.bubble { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 38% 34%, rgba(230,220,255,.35), rgba(150,130,220,.16) 55%, rgba(120,100,200,.05)); border: 1px solid rgba(200,185,255,.4); animation: bubble 3.2s ease-in-out infinite; }
.lit .bubble { box-shadow: 0 0 10px rgba(200,185,255,.55); }
@keyframes bubble { 50% { transform: scale(.92); opacity: .75; } }
.knot { width: 64%; height: 64%; border-radius: 50%; border: 3px solid #b48a3c; background: radial-gradient(circle, #1a1c28 45%, #2a2c3a); display: grid; place-items: center; z-index: 2; }
.knot i { width: 36%; height: 36%; border-radius: 50%; background: #11131c; }
.knot.half i { background: rgba(255,213,107,.35); }
.knot.on { border-color: var(--beam); box-shadow: 0 0 14px 4px rgba(255,213,107,.6); }
.knot.on i { background: radial-gradient(circle, #fffaf0, #ffd56b); }
.disc { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3c3a48, #1c1c26); border: 2px solid #5a5466; box-shadow: inset 0 0 0 5px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
.cell.taken .socket { opacity: .15; }

/* Vierter Teil: Weckpunkt, Glutsteine am Weckpunkt, Lücke, verdrehte Steine */
.wake { width: 66%; height: 66%; border-radius: 50%; border: 3px solid var(--gate, var(--brass)); background: radial-gradient(circle, #1a1c28 50%, #2a2c3a); display: grid; place-items: center; z-index: 2; position: relative; }
.wake i { width: 70%; height: 3px; border-radius: 2px; background: var(--gate, var(--brass)); opacity: .7; }
.wake.hit { box-shadow: 0 0 14px 4px rgba(255,213,107,.55); }
.wake.hit i { opacity: 1; box-shadow: 0 0 6px var(--beam); }
.stone.bound { box-shadow: 0 0 0 2px #1a1c28, 0 0 0 4px var(--brass); }
.groups { position: absolute; bottom: 6%; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; z-index: 3; pointer-events: none; }
.groups i { width: 7px; height: 7px; border-radius: 50%; background: var(--gate); border: 1px solid #12141f; }
.gap { position: absolute; inset: 8%; border-radius: 4px; background: radial-gradient(circle, #050608 40%, #0d0f18); box-shadow: inset 0 0 6px #000; }
/* Verdrehte Steine sitzen im Mörtel: grauer Sockel, Stein matter, O in Messing */
.fest { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.fest::before { content: ""; position: absolute; inset: 6%; border-radius: 5px; background: repeating-linear-gradient(45deg, #34313d 0 4px, #2b2833 4px 8px); border: 1px solid #5a5466; }
.fest .stone { filter: saturate(.55) brightness(.85); }
.fest b { position: absolute; right: 9%; bottom: 4%; font: 700 .72rem var(--font-display); color: var(--brass); z-index: 3; text-shadow: 0 0 3px #000; }

/* Schlüssel-Feld: Spruch, Fundstelle im Buch */
.keypanel h2 { font-style: italic; }
.keysource { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); letter-spacing: .06em; color: var(--brass); font-size: .9rem; }
.keysource #keyWhere { color: var(--ink); }

/* Fünfter Teil: zarte und starke Keime, Setzling */
.seed.zart { background: radial-gradient(circle at 40% 35%, #ffffff, #dfe8d8 60%, #9aa894); border-color: #8a9784; }
.lit .seed.zart { transform: none; box-shadow: none; background: radial-gradient(circle at 40% 35%, #ffffff, #dfe8d8 60%, #9aa894); }
.grown .seed.zart { transform: scale(1.4); box-shadow: 0 0 12px 3px rgba(127,224,138,.7); background: radial-gradient(circle at 40% 35%, #f6fff2, #b9f0bf 55%, #5fae68); }
.burnt .seed.zart { transform: none; background: radial-gradient(circle at 40% 35%, #8a6a4a, #4a3424 70%); border-color: var(--danger); box-shadow: 0 0 8px rgba(226,85,63,.6); }
.seed.stark { width: 44%; height: 44%; border: 3px solid var(--brass); }
.lit .seed.stark { transform: none; box-shadow: none; background: radial-gradient(circle at 40% 35%, #bfeec2, #3f8a49 60%, #1e4a25); }
.grown .seed.stark { transform: scale(1.35); box-shadow: 0 0 16px 5px rgba(255,213,107,.55), 0 0 8px 2px rgba(127,224,138,.7); background: radial-gradient(circle at 40% 35%, #fffbe8, #b4ec8a 50%, #3e8a3c); }
.s-setzling { background: radial-gradient(circle at 35% 30%, #e7f7d9, #6fae4a 50%, #2d5a1c); }
.sprout { width: 30%; height: 46%; background: #e6ffd8; clip-path: polygon(50% 0, 85% 35%, 55% 40%, 55% 100%, 45% 100%, 45% 40%, 15% 35%); }

/* Admin: Kontenliste */
.adminpage .tablewrap { overflow-x: auto; }
.adminpage table.users { min-width: 560px; font-size: .88rem; }
.adminpage table.users td { white-space: nowrap; }
.adminpage table.users .linkbtn { text-align: left; }
.adminpage input.filter { font: inherit; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--rim); background: var(--night); color: var(--ink); width: 100%; }

/* Teile über der Kapitelwahl */
/* Eine Zeile; bei vielen Teilen oder schmalem Bildschirm seitlich scrollbar */
.parts, .chapters { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px; position: relative; }
.parts::-webkit-scrollbar, .chapters::-webkit-scrollbar { display: none; }
.chapters .ch { flex: none; white-space: nowrap; }
.parts[hidden] { display: none; }
.pt { flex: none; white-space: nowrap; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--rim); background: var(--slab); color: var(--ink-soft); font-family: var(--font-display); font-size: .85rem; letter-spacing: .05em; cursor: pointer; }
.pt.done { border-color: var(--brass); color: var(--brass); }
.pt.cur { background: var(--slab-2); border-color: var(--brass); color: var(--ink); box-shadow: 0 0 0 1px var(--brass) inset; }
.pt.key { border-style: dashed; color: var(--brass); }
.pt.key::before { content: "🔒"; font-size: .7em; margin-right: 3px; }
.pt:disabled { opacity: .3; cursor: default; }

/* Sechster Teil: offener Raum, verborgene Felder, Schattentore, festliegende Steine, markierter Stein im Vorrat */
.open { position: absolute; inset: 0; background: radial-gradient(circle, rgba(10,11,18,.0), rgba(10,11,18,.55)); }
.fog { position: absolute; inset: 0; background: #07080d; box-shadow: inset 0 0 8px #000; }
.cell.hidden::after { border-color: rgba(255,255,255,.015); }
.g-m { --gate: #6d6a8c; } .g-n { --gate: #8c6a7a; }
.gate.shadow { background: rgba(8,8,14,.85); }
.plate.shadow { background: #0b0c14; box-shadow: inset 0 0 0 4px rgba(0,0,0,.5); }
.plate.shadow.on { background: var(--gate); box-shadow: 0 0 10px var(--gate); }
.cell.locked .stone { box-shadow: 0 0 0 2px #1a1c28, 0 0 0 3px var(--ink-soft); }
.tool small.marked { display: block; font-size: .72rem; color: var(--danger); }