/* ═══════════════════════════════════════════════════════════════
   Memovia Web — Design 1:1 nach der iOS-App (Theme.swift)
   Gold #D4A117 · Accent #C75440 · Grün #4D8C52
   Themes: Standard (4 Tagesphasen) · Tag · Nacht
   ═══════════════════════════════════════════════════════════════ */

:root {
  --gold: #D4A117;
  --accent: #C75440;
  --green: #4D8C52;
  --green-bright: #99E6A6;
  --red-soft: #FFB399;
  --glass: rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.16);
  --stroke: rgba(255,255,255,0.18);
  --stroke-soft: rgba(255,255,255,0.25);
  --text: #ffffff;
  --text-soft: rgba(255,255,255,0.75);
  --text-faint: rgba(255,255,255,0.55);
  --radius: 18px;
  --radius-s: 14px;
  --font-scale: 1;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Standard-Theme Tagesphase "Tag" als Ausgangswert */
  --bg-a: #294A6B;
  --bg-b: #4A3B6B;
}

/* Tagesphasen des Standard-Themes (Theme.swift dayGradient) */
body[data-theme="standard"][data-phase="0"] { --bg-a:#335780; --bg-b:#6B668C; } /* Morgen */
body[data-theme="standard"][data-phase="1"] { --bg-a:#294A6B; --bg-b:#4A3B6B; } /* Tag */
body[data-theme="standard"][data-phase="2"] { --bg-a:#4D3866; --bg-b:#734061; } /* Abend */
body[data-theme="standard"][data-phase="3"] { --bg-a:#1F2647; --bg-b:#2E2952; } /* Nacht */
body[data-theme="hell"]   { --bg-a:#8CA6D9; --bg-b:#AD99D1; }
body[data-theme="dunkel"] { --bg-a:#0A0A0F; --bg-b:#14141A; --glass:rgba(255,255,255,0.07); }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--sans);
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-a), var(--bg-b)) fixed;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.4;
  overscroll-behavior-y: none;
}
.serif { font-family: var(--serif); }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; font-size: inherit; }
input, textarea, select {
  font-family: inherit; font-size: max(16px, calc(16px * var(--font-scale))); color: var(--text);
  background: rgba(255,255,255,0.10); border: 1px solid var(--stroke);
  border-radius: 12px; padding: 12px 14px; width: 100%; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus { border-color: var(--stroke-soft); background: rgba(255,255,255,0.14); }
select option { color: #222; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══ Layout-Rahmen ═══ */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; }
.page {
  max-width: 560px; margin: 0 auto; padding: 14px 16px calc(112px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 900px) { .page { max-width: 640px; } }

/* ═══ Glas-Karten (ultraThinMaterial) ═══ */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 5px 10px rgba(0,0,0,0.18);
}
.card { padding: 16px; }
.card-eyebrow {
  font-size: calc(13px * var(--font-scale)); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px;
}
.card-foot { font-size: calc(13px * var(--font-scale)); color: var(--text-soft); margin-top: 10px; }
.chevron { color: rgba(255,255,255,0.5); font-size: 22px; }

/* ═══ Buttons ═══ */
.btn-primary {
  display: block; width: 100%; min-height: 48px; padding: 13px 18px;
  background: #2A2621; color: #F5F0E3; font-weight: 600;
  border-radius: 12px; font-size: calc(17px * var(--font-scale));
}
.btn-primary:active { opacity: 0.85; }
.btn-accent {
  display: inline-block; padding: 13px 26px; background: var(--accent); color: #fff;
  font-weight: 600; border-radius: 999px; font-size: calc(17px * var(--font-scale));
}
.btn-ghost {
  display: block; width: 100%; padding: 11px; color: var(--text-soft);
  border: 2px solid var(--stroke); border-radius: 12px; font-weight: 500;
}
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: calc(14px * var(--font-scale)); font-weight: 600;
}
.icon-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 50%;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 17px;
}
.icon-btn.big { font-size: 24px; width: 42px; height: 42px; }

/* ═══ Onboarding ═══ */
.overlay {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: linear-gradient(135deg, var(--bg-a), var(--bg-b));
}
.onboard-inner {
  min-height: 100dvh; max-width: 420px; margin: 0 auto; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px;
}
.onboard-logo { width: 84px; height: 84px; border-radius: 20px; }
.onboard-inner h1 { font-size: calc(30px * var(--font-scale)); font-weight: 700; }
.onboard-sub { color: var(--text-soft); }
.onboard-card { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.onboard-card label { font-weight: 600; font-size: calc(15px * var(--font-scale)); }
.onboard-note { font-size: calc(12px * var(--font-scale)); color: var(--text-faint); }

/* ═══ Start-Seite ═══ */
.home-header { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.home-brand { display: flex; align-items: center; gap: 10px; }
.home-logo { width: 46px; height: 46px; border-radius: 12px; }
.home-brand-name { font-size: calc(20px * var(--font-scale)); font-weight: 700; }
.home-header-actions { display: flex; gap: 8px; }

.greeting-phase { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.85); font-weight: 500; font-size: calc(15px * var(--font-scale)); }
.greeting-name { font-size: calc(30px * var(--font-scale)); font-weight: 700; margin-top: 2px; }

.orient-row { display: flex; align-items: center; gap: 16px; }
.orient-emoji { font-size: 44px; }
.orient-day { font-size: calc(20px * var(--font-scale)); font-weight: 700; }
.orient-date { font-size: calc(17px * var(--font-scale)); font-weight: 500; color: rgba(255,255,255,0.9); }
.orient-season { font-size: calc(13px * var(--font-scale)); color: var(--text-soft); margin-top: 2px; }

.today-stats { display: flex; align-items: stretch; }
.mini-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mini-icon { font-size: 15px; }
.mini-value { font-size: calc(22px * var(--font-scale)); font-weight: 700; }
.mini-label { font-size: calc(11px * var(--font-scale)); color: rgba(255,255,255,0.6); }
.vdivider { width: 1px; background: rgba(255,255,255,0.2); margin: 2px 0; }

.recommend { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; }
.recommend-icon {
  width: 60px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: rgba(255,255,255,0.15); border-radius: 50%;
}
.recommend-texts { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.recommend-texts .card-eyebrow, .recommend-texts .card-foot { margin: 0; }
.recommend-title { font-size: calc(21px * var(--font-scale)); font-weight: 700; }
.recommend-play { font-size: 30px; }

.overview-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.overview-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; text-align: left; border-radius: 16px; }
.tile-icon { font-size: 24px; }
.tile-title { font-weight: 600; font-size: calc(16px * var(--font-scale)); }
.tile-detail { font-size: calc(12px * var(--font-scale)); color: rgba(255,255,255,0.65); }

.stats-link { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }

/* ═══ Abschnitts-Header ═══ */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.section-header.center { justify-content: center; }
.section-header h2 { font-size: calc(22px * var(--font-scale)); font-weight: 700; }
.section-sub { font-size: calc(12px * var(--font-scale)); color: rgba(255,255,255,0.7); }

/* ═══ Tab-Leiste ═══ */
#tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; gap: 4px; max-width: 620px; margin: 0 auto;
  padding: 6px;
  background: rgba(16, 20, 34, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--stroke); border-radius: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px; border-radius: 999px; color: var(--text-faint);
  font-size: calc(10px * var(--font-scale)); font-weight: 500;
  white-space: nowrap; min-width: 0;
  transition: color 0.2s;
}
.tab .tab-icon { font-size: 18px; filter: grayscale(1) brightness(2.5); opacity: 0.6; }
.tab.active { color: var(--text); background: var(--glass); border: 1px solid var(--stroke-soft); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tab.active .tab-icon { filter: none; opacity: 1; }
.tab:not(.active) { border: 1px solid transparent; }

/* ═══ Fragen / Quiz ═══ */
.quiz-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 16px; }
.quiz-symbol {
  width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
  font-size: 40px; background: var(--glass); border: 1px solid var(--stroke); border-radius: 50%;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.quiz-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); }
.quiz-category {
  font-size: calc(12px * var(--font-scale)); font-weight: 600; padding: 5px 12px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 999px;
}
.quiz-prompt {
  font-family: var(--serif); font-size: calc(26px * var(--font-scale)); font-weight: 600;
  text-align: center; padding: 0 12px; white-space: pre-line;
}
.quiz-speak {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  background: var(--glass); border-radius: 999px; font-size: calc(13px * var(--font-scale)); font-weight: 600;
}
.quiz-options { width: 100%; display: flex; flex-direction: column; gap: 9px; padding: 0 8px; }
.quiz-options.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.answer-btn {
  min-height: 54px; padding: 13px 10px; width: 100%;
  font-family: var(--serif); font-size: calc(19px * var(--font-scale)); font-weight: 500;
  background: var(--glass); border: 2px solid var(--stroke-soft); border-radius: var(--radius-s);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background 0.15s, border-color 0.15s;
}
.answer-btn:not(:disabled):active { background: var(--glass-strong); }
.answer-btn.correct { background: rgba(77,140,82,0.55); border-color: var(--green); }
.answer-btn.wrong   { background: rgba(199,84,64,0.50); border-color: var(--accent); }
.answer-btn:disabled { cursor: default; }

.order-hint { font-size: calc(13px * var(--font-scale)); color: rgba(255,255,255,0.7); }
.order-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; text-align: left;
  background: var(--glass); border: 2px solid var(--stroke-soft); border-radius: var(--radius-s);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.order-badge {
  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.22); font-weight: 700; font-size: 16px;
}
.order-btn.picked { border-color: var(--accent); }
.order-btn.picked .order-badge { background: var(--accent); }
.order-btn.res-ok { background: rgba(77,140,82,0.5); border-color: var(--green); }
.order-btn.res-ok .order-badge { background: var(--green); }
.order-btn.res-bad { background: rgba(199,84,64,0.4); border-color: var(--accent); }
.order-btn.res-bad .order-badge { background: var(--accent); }
.order-label { font-family: var(--serif); font-size: calc(21px * var(--font-scale)); font-weight: 500; }

.memorize-box {
  width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 16px;
}
.memorize-title { font-size: calc(21px * var(--font-scale)); font-weight: 600; color: rgba(255,255,255,0.85); }
.memorize-content {
  font-family: var(--serif); font-size: calc(44px * var(--font-scale)); font-weight: 700; line-height: 1.35;
  white-space: pre-line; width: 100%; padding: 30px 20px; text-align: left;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 22px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.memorize-note { font-size: calc(13px * var(--font-scale)); color: rgba(255,255,255,0.6); }

.quiz-feedback { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; width: 100%; }
.fb-correct { font-size: calc(18px * var(--font-scale)); font-weight: 600; color: var(--green-bright); }
.fb-wrong   { font-size: calc(18px * var(--font-scale)); font-weight: 600; color: var(--red-soft); }
.fb-solution { font-size: calc(15px * var(--font-scale)); color: rgba(255,255,255,0.8); }
.fb-auto { font-size: calc(11px * var(--font-scale)); color: rgba(255,255,255,0.6); }
.quiz-feedback .btn-primary { max-width: 260px; }

.skip-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; min-height: 44px;
  background: var(--glass); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
  font-size: calc(15px * var(--font-scale)); font-weight: 600; color: rgba(255,255,255,0.85);
}

/* Analoge Uhr */
.clock-wrap { width: 220px; height: 220px; }

/* ═══ Spiele-Raster ═══ */
.games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game-tile {
  aspect-ratio: 1 / 0.92; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 4px; border-radius: var(--radius); min-width: 0;
}
.game-tile .emoji { font-size: 38px; line-height: 1; }
.game-tile .title {
  font-size: calc(14px * var(--font-scale)); font-weight: 600; text-align: center; padding: 0 4px;
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}
@media (min-width: 560px) { .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .games-grid { gap: 12px; } .game-tile .emoji { font-size: 44px; } }

/* ═══ Spiel-Vollbild ═══ */
.overlay.game { display: flex; flex-direction: column; z-index: 60; }
.game-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  max-width: 640px; width: 100%; margin: 0 auto;
}
.game-head h3 { flex: 1; text-align: center; font-family: var(--serif); font-size: calc(19px * var(--font-scale)); }
.game-body {
  flex: 1; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.game-status { text-align: center; font-weight: 600; font-size: calc(16px * var(--font-scale)); min-height: 1.4em; }
.game-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.howto { font-size: calc(14px * var(--font-scale)); color: var(--text-soft); }
.howto li { margin-left: 20px; margin-bottom: 4px; }

/* Bretter */
.board {
  display: grid; gap: 6px; width: 100%; max-width: 460px; margin: 0 auto;
  touch-action: manipulation;
}
.board .cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 10px;
  font-size: clamp(16px, 6vw, 30px); font-weight: 700; user-select: none;
  -webkit-user-select: none;
}
.board .cell.dark { background: rgba(0,0,0,0.28); }
.board .cell.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.board .cell.hint-move { box-shadow: 0 0 0 2px rgba(255,255,255,0.55) inset; }
.board.tight { gap: 3px; }
.board.tight .cell { border-radius: 7px; }

.memory-card { perspective: 500px; }
.memory-inner { position: relative; width: 100%; height: 100%; transition: transform 0.3s; transform-style: preserve-3d; }
.memory-card.open .memory-inner { transform: rotateY(180deg); }
.memory-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px;
}
.memory-back { background: rgba(255,255,255,0.16); border: 1px solid var(--stroke); }
.memory-front { background: rgba(255,255,255,0.28); border: 1px solid var(--stroke-soft); transform: rotateY(180deg); }
.memory-card.done .memory-front { background: rgba(77,140,82,0.45); }

.score-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.score-chip {
  padding: 8px 14px; background: var(--glass); border: 1px solid var(--stroke);
  border-radius: 999px; font-size: calc(14px * var(--font-scale)); font-weight: 600;
}
.score-chip.active { border-color: var(--gold); }

/* Vier gewinnt */
.c4-disc { width: 82%; height: 82%; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid var(--stroke); }
.c4-disc.p1 { background: #E4574C; border-color: #E4574C; }
.c4-disc.p2 { background: #F2C230; border-color: #F2C230; }

/* Stroop */
.stroop-word { font-size: clamp(44px, 14vw, 76px); font-weight: 800; text-align: center; padding: 24px 0; }
.color-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; width: 100%; }
.color-btn { min-height: 56px; border-radius: var(--radius-s); font-weight: 700; font-size: calc(18px * var(--font-scale)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.35); }

/* SuperHirn */
.sh-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sh-peg { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--stroke-soft); background: rgba(255,255,255,0.08); }
.sh-peg.small { width: 30px; height: 30px; }
.sh-pins { display: grid; grid-template-columns: 14px 14px; gap: 3px; margin-left: 8px; }
.sh-pin { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.sh-pin.black { background: #111; border: 1px solid #666; }
.sh-pin.white { background: #fff; }

/* Reaktionsspiel */
.reaction-pad {
  width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1/0.9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 22px; font-size: calc(22px * var(--font-scale)); font-weight: 700;
  background: var(--glass); border: 2px solid var(--stroke); user-select: none; -webkit-user-select: none;
}
.reaction-pad.wait { background: rgba(199,84,64,0.45); }
.reaction-pad.go { background: rgba(77,140,82,0.75); border-color: var(--green); }

/* Schere Stein Papier */
.rps-row { display: flex; gap: 12px; justify-content: center; }
.rps-btn { font-size: 44px; width: 84px; height: 84px; border-radius: 20px; background: var(--glass); border: 1px solid var(--stroke); }
.rps-stage { display: flex; justify-content: center; gap: 30px; font-size: 58px; min-height: 76px; align-items: center; }

/* Sudoku */
.sudoku-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; max-width: 460px; width: 100%; margin: 0 auto; border: 2px solid rgba(255,255,255,0.75); border-radius: 8px; overflow: hidden; }
.sudoku-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(15px, 4.4vw, 24px); font-weight: 600;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
}
.sudoku-cell.blockR { border-right: 2px solid rgba(255,255,255,0.65); }
.sudoku-cell.blockB { border-bottom: 2px solid rgba(255,255,255,0.65); }
.sudoku-cell.given { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.13); }
.sudoku-cell.user { color: var(--gold); }
.sudoku-cell.sel { background: rgba(212,161,23,0.35); }
.sudoku-cell.err { color: #FF8A70; }
.numpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 460px; width: 100%; margin: 0 auto; }
.numpad button { height: 52px; border-radius: 12px; background: var(--glass); border: 1px solid var(--stroke); font-size: 20px; font-weight: 700; }

/* Wortsuche */
.ws-grid { display: grid; gap: 2px; max-width: 460px; width: 100%; margin: 0 auto; touch-action: none; }
.ws-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border-radius: 6px;
  font-weight: 700; font-size: clamp(11px, 3.4vw, 19px); user-select: none; -webkit-user-select: none;
}
.ws-cell.sel { background: rgba(212,161,23,0.5); }
.ws-cell.found { background: rgba(77,140,82,0.5); }
.ws-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ws-word { padding: 5px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke); font-size: calc(13px * var(--font-scale)); font-weight: 600; }
.ws-word.found { text-decoration: line-through; opacity: 0.55; background: rgba(77,140,82,0.4); }

/* Galgenmännchen */
.hang-word { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-family: var(--serif); font-size: clamp(24px, 7vw, 38px); font-weight: 700; letter-spacing: 2px; }
.hang-letter { min-width: 26px; border-bottom: 3px solid rgba(255,255,255,0.6); text-align: center; padding-bottom: 2px; }
.keyboard { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 480px; margin: 0 auto; }
.key { width: 40px; height: 46px; border-radius: 9px; background: var(--glass); border: 1px solid var(--stroke); font-weight: 700; font-size: 17px; }
.key:disabled { opacity: 0.3; }
.key.good { background: rgba(77,140,82,0.55); }
.key.bad { background: rgba(199,84,64,0.5); }

/* Zahlenjagd */
.nh-field { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/1.05; margin: 0 auto; }
.nh-bubble {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.5);
}

/* Schiebepuzzle */
.slide-tile { background: rgba(255,255,255,0.16); font-family: var(--serif); }
.slide-tile.empty { background: transparent; border-color: transparent; }
.slide-tile.ok { background: rgba(77,140,82,0.4); }

/* Linienrätsel */
.os-svg { width: 100%; max-width: 440px; margin: 0 auto; display: block; touch-action: none; }

/* Wortkette */
.wc-log { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; padding: 4px; }
.wc-item { padding: 9px 14px; border-radius: 12px; max-width: 82%; font-weight: 600; }
.wc-item.you { align-self: flex-end; background: rgba(212,161,23,0.35); border: 1px solid rgba(212,161,23,0.5); }
.wc-item.ai { align-self: flex-start; background: var(--glass); border: 1px solid var(--stroke); }

/* Kniffel */
.dice-row { display: flex; gap: 10px; justify-content: center; }
.die {
  width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.92); color: #222;
  font-size: 30px; display: flex; align-items: center; justify-content: center; font-weight: 800;
  border: 2px solid transparent;
}
.die.held { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,161,23,0.35); }
.ktable { width: 100%; max-width: 460px; margin: 0 auto; border-collapse: collapse; font-size: calc(14px * var(--font-scale)); }
.ktable td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.ktable .pick { color: var(--gold); font-weight: 700; }
.ktable .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Schiffe versenken */
.bs-cell.hit { background: rgba(199,84,64,0.65) !important; }
.bs-cell.miss { background: rgba(90,140,200,0.4) !important; }
.bs-cell.ship { background: rgba(255,255,255,0.35); }
.bs-cell.sunk { background: rgba(120,30,20,0.8) !important; }

/* Mühle */
.mill-svg { width: 100%; max-width: 440px; margin: 0 auto; display: block; }

/* ═══ Sheets (Einstellungen etc.) ═══ */
.overlay.sheet { z-index: 55; }
.sheet-inner { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet-head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 10px 0 8px; padding-top: calc(10px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--bg-a) 60%, transparent);
}
.sheet-head h2 { flex: 1; text-align: center; font-family: var(--serif); font-size: calc(19px * var(--font-scale)); }
.sheet-done { font-weight: 600; padding: 8px 16px; border: 1px solid var(--stroke-soft); border-radius: 999px; background: var(--glass); }

.setting-h { font-size: calc(17px * var(--font-scale)); font-weight: 600; margin-top: 10px; }
.setting-sub { font-size: calc(14px * var(--font-scale)); color: var(--text-soft); }

.option-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: 16px; background: var(--glass); border: 2px solid transparent;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.option-row.selected { border-color: rgba(212,161,23,0.5); }
.option-row .o-icon { font-size: 22px; width: 32px; text-align: center; color: var(--gold); flex: none; }
.option-row .o-texts { flex: 1; }
.option-row .o-title { font-weight: 600; font-size: calc(16px * var(--font-scale)); }
.option-row .o-sub { font-size: calc(12px * var(--font-scale)); color: var(--text-soft); margin-top: 2px; }
.option-row .o-check { font-size: 22px; color: var(--text-faint); }
.option-row.selected .o-check { color: var(--gold); }

/* Toggle-Schalter */
.switch { position: relative; width: 52px; height: 31px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 2; }
.switch .knob {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,0.4);
  transition: background 0.2s;
}
.switch .knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .knob { background: var(--accent); }
.switch input:checked + .knob.gold { background: var(--gold); }
.switch input:checked + .knob::after { transform: translateX(21px); }

/* Slider (Demenz-Stadium) */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.35); border-radius: 4px; border: none; padding: 0; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); cursor: pointer;
}
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
.stage-top { display: flex; align-items: baseline; gap: 8px; }
.stage-num { font-family: var(--serif); font-size: calc(38px * var(--font-scale)); font-weight: 700; }
.stage-of { color: var(--text-soft); }
.stage-chip { margin-left: auto; font-size: calc(13px * var(--font-scale)); font-weight: 600; padding: 5px 10px; background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: 999px; }
.stage-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); }
.stage-desc { font-size: calc(13px * var(--font-scale)); color: var(--text-soft); margin-top: 4px; }

/* Kategorien-Liste */
.cat-list { border-radius: 16px; overflow: hidden; }
.cat-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 16px; background: rgba(255,255,255,0.08);
  border: none; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.cat-row:last-child { border-bottom: none; }
.cat-row .c-emoji { width: 26px; text-align: center; }
.cat-row .c-name { flex: 1; }
.cat-row .c-check { color: var(--gold); font-weight: 800; font-size: 18px; width: 22px; text-align: center; }
.cat-row .c-stat { font-size: calc(12px * var(--font-scale)); color: rgba(255,255,255,0.7); }
body[data-theme="hell"] .cat-row .c-check { color: #1a1a1a; }

/* ═══ Statistik ═══ */
.kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.kpi { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 6px; border-radius: 16px; }
.kpi .k-icon { font-size: 18px; }
.kpi .k-value { font-family: var(--serif); font-size: calc(26px * var(--font-scale)); font-weight: 700; }
.kpi .k-unit { font-size: 11px; color: rgba(255,255,255,0.6); }
.kpi .k-label { font-size: calc(12px * var(--font-scale)); font-weight: 500; color: rgba(255,255,255,0.85); }

.week-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.week-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.week-bar { width: 100%; border-radius: 6px; background: rgba(199,84,64,0.8); min-height: 8px; }
.week-bar.zero { background: rgba(199,84,64,0.2); }
.week-num { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); }
.week-day { font-size: 11px; color: rgba(255,255,255,0.7); }

.month-chart { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.month-bar { flex: 1; border-radius: 3px; background: rgba(212,161,23,0.8); min-height: 4px; }
.month-bar.zero { background: rgba(255,255,255,0.14); }

.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.rank-row:last-child { border-bottom: none; }
.rank-emoji { width: 26px; text-align: center; }
.rank-name { flex: 1; font-size: calc(15px * var(--font-scale)); }
.rank-val { font-size: calc(13px * var(--font-scale)); color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }

/* ═══ Notizen ═══ */
.note-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; }
.note-symbol { font-size: 26px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); border-radius: 12px; flex: none; }
.note-title { font-weight: 600; font-size: calc(16px * var(--font-scale)); }
.note-body { font-size: calc(14px * var(--font-scale)); color: var(--text-soft); margin-top: 3px; white-space: pre-line; }
.empty-state { text-align: center; padding: 46px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state .e-icon { font-size: 52px; opacity: 0.7; }
.empty-state h3 { font-family: var(--serif); font-size: calc(22px * var(--font-scale)); }
.empty-state p { color: var(--text-soft); max-width: 340px; }
.empty-state .e-cta { color: var(--accent); font-weight: 600; filter: brightness(1.35); }

.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.symbol-pick { font-size: 24px; aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,0.08); border: 2px solid transparent; }
.symbol-pick.selected { border-color: var(--gold); background: rgba(212,161,23,0.25); }

/* ═══ Angehörige ═══ */
.segmented { display: flex; background: rgba(255,255,255,0.10); border-radius: 12px; padding: 3px; }
.seg { flex: 1; padding: 9px 4px; border-radius: 9px; font-weight: 600; font-size: calc(14px * var(--font-scale)); color: var(--text-soft); }
.seg.active { background: rgba(255,255,255,0.22); color: var(--text); }

.person-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; }
.person-avatar {
  width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: rgba(255,255,255,0.16); border: 1px solid var(--stroke);
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-name { font-weight: 600; font-size: calc(17px * var(--font-scale)); }
.person-rel { font-size: calc(13px * var(--font-scale)); color: var(--gold); font-weight: 600; }
.person-note { font-size: calc(13px * var(--font-scale)); color: var(--text-soft); margin-top: 2px; }

.insight-list { display: flex; flex-direction: column; gap: 8px; }
.insight-item { display: flex; gap: 8px; font-size: calc(14px * var(--font-scale)); }
.insight-item .dot { color: var(--gold); }

.form-label { font-weight: 600; font-size: calc(14px * var(--font-scale)); margin-top: 6px; }
.form-hint { font-size: calc(12px * var(--font-scale)); color: var(--text-faint); }
.danger-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 16px; color: #FF8A70; background: rgba(255,80,60,0.12); border: 1px solid rgba(255,80,60,0.4); border-radius: 12px; font-weight: 600; }
.photo-preview { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--stroke-soft); }
.file-btn { display: inline-block; padding: 10px 16px; background: var(--glass); border: 1px solid var(--stroke); border-radius: 12px; font-weight: 600; cursor: pointer; }
.file-btn input { display: none; }

/* ═══ Streak-Belohnung ═══ */
#streakOverlay { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 70; }
.streak-card { text-align: center; padding: 34px 28px; max-width: 320px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.streak-flame { font-size: 64px; animation: pop 0.5s ease; }
.streak-days { font-family: var(--serif); font-size: 34px; font-weight: 800; }
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Version */
.version-line { text-align: center; font-size: 11px; color: var(--text-faint); padding-top: 20px; }

/* ── Ergänzungen: Sudoku-Umfeld, Schiebepuzzle-Raster, Zahlenjagd,
     Schiffe versenken, Kniffel-Tabelle ── */
.sudoku-cell.same { background: rgba(255,255,255,0.08); }
.numpad button:disabled { opacity: 0.35; }

.slide-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-width: 380px; width: 100%; margin: 0 auto;
}
.slide-grid .slide-tile {
  aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--stroke);
  font-size: clamp(22px, 6vw, 32px); font-weight: 700;
}

.hunt-field {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  height: min(62vh, 460px); border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--stroke);
  overflow: hidden;
}
.hunt-bubble {
  position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.hunt-bubble:active { transform: scale(0.92); }

.bs-grid {
  display: grid; gap: 3px; max-width: 420px; width: 100%; margin: 0 auto;
}
.bs-cell {
  aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(30,60,110,0.45); color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.bs-cell.mine { cursor: default; }
.bs-grid + .setting-h { margin-top: 6px; }

.score-table { padding: 6px 14px; }
.st-row {
  display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px;
  padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: center; font-size: 16px;
}
.st-row:last-child { border-bottom: none; }
.st-row span:nth-child(2), .st-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.st-head { font-weight: 700; opacity: 0.8; font-size: 14px; }
.st-total { font-weight: 800; border-top: 2px solid rgba(255,255,255,0.35); }
.st-dim { opacity: 0.55; }
.st-row.pickable { cursor: pointer; color: var(--gold); }
.st-row.pickable:hover { background: rgba(212,161,23,0.12); border-radius: 8px; }

/* ── Mobile/iOS-Härtung ── */
html, body { overflow-x: hidden; }
button, .tab, svg, .os-svg { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
.hunt-field { height: min(62dvh, 460px); }