:root {
  --bg: #f6f1e7; --fg: #23301f; --card: #fffdf8; --accent: #1f3d2b; --accent-fg: #fff;
  --muted: #7a7f70; --locked: #e4ddcc; --gold: #b8924a;
  --font: Georgia, "Times New Roman", serif;
  --radius: 14px;
}
[data-theme="jana"] {
  --bg: #fbeff0; --fg: #4a1424; --card: #fffafa; --accent: #8e1b3a; --accent-fg: #fff;
  --muted: #9a6a74; --locked: #f0d9dc; --gold: #c9946a;
}
[data-theme="jens"] {
  --bg: #0b0f12; --fg: #c8ffe0; --card: #11181d; --accent: #00e5ff; --accent-fg: #001417;
  --muted: #5f8b78; --locked: #151d22; --gold: #39ff88;
  --font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius: 4px;
}
[data-theme="andrea"] {
  --bg: #f4f0e4; --fg: #1d2f22; --card: #fffdf6; --accent: #1f3d2b; --accent-fg: #fff;
  --muted: #6f7a68; --locked: #e2dcc8; --gold: #b8924a;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
  min-height: 100vh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
main { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; }
header { text-align: center; margin-bottom: 24px; }
h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--accent); }
#subtitle { margin: 0; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; }
.door {
  aspect-ratio: 1; border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); font: inherit; font-size: 1.6rem; font-weight: 700;
  cursor: pointer; position: relative; transition: transform .15s;
}
.door:hover:not(:disabled) { transform: translateY(-2px); }
.door:disabled { background: var(--locked); border-color: var(--locked); color: var(--muted); cursor: not-allowed; }
.door.open { background: var(--card); color: var(--accent); }
.door.done::after { content: "✓"; position: absolute; top: 4px; right: 8px; font-size: .9rem; color: var(--gold); }
.door.today { outline: 3px solid var(--gold); outline-offset: 2px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal[hidden] { display: none; }
.card {
  background: var(--card); color: var(--fg); border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; position: relative;
  border: 1px solid var(--gold);
}
.close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 2rem; color: var(--muted); cursor: pointer; }
.day-label { margin: 0; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
h2 { margin: 4px 0 16px; color: var(--accent); }
.text { white-space: pre-wrap; line-height: 1.55; }
.terminal { background: #000; color: #39ff88; padding: 14px; border-radius: 4px; white-space: pre-wrap; font-family: var(--font); }
.btn, .field {
  font: inherit; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--accent);
}
.btn { background: var(--accent); color: var(--accent-fg); cursor: pointer; }
.btn:disabled { opacity: .55; cursor: default; }
.field { background: var(--card); color: var(--fg); width: 100%; margin: 8px 0; }
.row { display: flex; gap: 8px; margin-top: 8px; }
.row .field { margin: 0; }
.voucher { border: 2px dashed var(--gold); padding: 16px; border-radius: var(--radius); text-align: center; }
.voucher.used { opacity: .6; }
.notice { color: var(--muted); font-size: .9rem; }
.reward { margin-top: 14px; padding: 12px; border-left: 4px solid var(--gold); }
.error { color: #b3261e; text-align: center; }
audio { width: 100%; margin-top: 8px; }
ul.ingredients { padding-left: 20px; }

/* Andrea: Serifen für Überschriften, Sans-Serif für Fließtext */
[data-theme="andrea"] body, [data-theme="andrea"] .card { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
[data-theme="andrea"] h1, [data-theme="andrea"] h2, [data-theme="andrea"] h3 { font-family: Georgia, "Times New Roman", serif; }
[data-theme="andrea"] .door { background: var(--accent); border-color: var(--gold); }
[data-theme="andrea"] .door.open { background: var(--card); border-color: var(--accent); }

.btn.link { display: inline-block; text-decoration: none; }
.steps { padding-left: 22px; line-height: 1.5; }
.steps li, .ingredients li { margin-bottom: 6px; }
.slide { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; min-height: 140px; }
.slide h3 { margin: 0 0 8px; color: var(--accent); }
.row.nav { justify-content: space-between; align-items: center; }
.q { margin: 18px 0; }

@media print {
  body * { visibility: hidden; }
  .card, .card * { visibility: visible; }
  .modal { position: static; background: none; }
  .card { position: absolute; inset: 0; border: 0; max-height: none; overflow: visible; }
  .close, .btn { display: none; }
}

/* Widgets */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.scratch { position: relative; width: 100%; max-width: 320px; margin: 12px auto; }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); transition: opacity .4s; cursor: crosshair; }
.voucher.golden { border-style: solid; background: linear-gradient(135deg, #fff5d6, #f1d38a); color: #4a3200; }
.wheel-wrap { text-align: center; }
.wheel { max-width: 100%; height: auto; }
.game-wrap { text-align: center; margin: 12px 0; }
.game { max-width: 100%; height: auto; border: 2px solid var(--accent); background: #0b0f12; }
.m3 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: 320px; margin: 0 auto; }
.gem { font-size: 1.6rem; aspect-ratio: 1; border: 2px solid transparent; background: var(--locked); border-radius: 8px; cursor: pointer; }
.gem.sel { border-color: var(--accent); }
.matrix-wrap { position: relative; }
.matrix { width: 100%; height: 100%; position: absolute; inset: 0; opacity: .5; }
.overlay { position: relative; background: rgba(0,0,0,.6); min-height: 240px; }
.sudoku { display: grid; grid-template-columns: repeat(4, 56px); gap: 4px; justify-content: center; margin: 12px 0; }
.cell { width: 56px; height: 56px; text-align: center; font: inherit; font-size: 1.4rem; text-transform: uppercase; border: 2px solid var(--accent); background: var(--card); color: var(--fg); }
.cell.given { background: var(--locked); font-weight: 700; }
.cell:nth-child(4n+2), .cell:nth-child(4n) { margin-left: 0; }
.cell:nth-child(n+5):nth-child(-n+8), .cell:nth-child(n+13) { margin-top: 0; }
.cases { list-style: none; padding: 0; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.cases .ok { color: #39ff88; } .cases .bad { color: #ff6b6b; }
.river div { margin: 4px 0; }
.choices { display: grid; gap: 8px; margin-top: 8px; }
.choice { text-align: left; }
.finale { text-align: center; padding: 12px; border: 2px solid var(--gold); border-radius: var(--radius); }
pre.terminal { margin: 8px 0; overflow-x: auto; }

/* Admin */
.admin-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.admin-bar .btn.active { outline: 3px solid var(--gold); }
.admin-info { white-space: pre-wrap; margin-top: 16px; padding: 10px 12px; border: 2px dashed #c62828; color: #c62828; background: rgba(198,40,40,.07); font-family: ui-monospace, Menlo, monospace; font-size: .85rem; border-radius: 6px; }