/* ===== Theming ========================================================== */
/* Default = Light. Dark überschreibt via :root[data-theme="dark"]
   und via prefers-color-scheme wenn KEIN explizites data-theme="light" gesetzt ist. */

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0d1220;
  --muted:#667085;
  --line:rgba(15,18,32,.08);
  --elev: 0 6px 24px rgba(15,18,32,.06);
  --elev2: 0 12px 40px rgba(15,18,32,.08);
  --accent:#9ddc41;
  --accent2:#d4af37;
  --accentText:#0b0e14;
  --ok:#2ecc71;
  --warn:#ffb020;
  --danger:#ff5a5f;
  --ring: 0 0 0 3px rgba(157,220,65,.35);
  color-scheme: light;
}

/* explizit dunkel */
:root[data-theme="dark"]{
  --bg:#0f1115;
  --card:#161a22;
  --text:#e6e8ee;
  --muted:#aab1c2;
  --line:rgba(255,255,255,.12);
  --elev: 0 8px 30px rgba(0,0,0,.35);
  --elev2: 0 18px 70px rgba(0,0,0,.45);
  --accent:#9ddc41;
  --accent2:#d4af37;
  --accentText:#0b0e14;
  --ok:#2ecc71;
  --warn:#ffcc66;
  --danger:#ff6b6b;
  --ring: 0 0 0 3px rgba(212,175,55,.35);
  color-scheme: dark;
}

/* Auto (System): wenn nicht explizit light, setze dark auf system-dark */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1115;
    --card:#161a22;
    --text:#e6e8ee;
    --muted:#aab1c2;
    --line:rgba(255,255,255,.12);
    --elev: 0 8px 30px rgba(0,0,0,.35);
    --elev2: 0 18px 70px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* ===== Base ============================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header{
  position: sticky; top: 0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.15) blur(8px);
}

.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:40px; height:40px; display:grid; place-items:center; font-size:22px;
  background: var(--card); border-radius:12px; border:1px solid var(--line);
  box-shadow: var(--elev);
}
.brand h1{ font-size:18px; margin:0; line-height:1.2; }
.muted{ color:var(--muted); font-size:12px; }

.header-actions{ display:flex; gap:10px; align-items:center; }

/* Theme segmented */
.theme-switch{ display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:var(--elev); overflow:hidden; }
.theme-switch .seg{
  border:0; background:transparent; padding:8px 10px; cursor:pointer; color:var(--muted);
  font-size:14px; line-height:1;
}
.theme-switch .seg[aria-pressed="true"]{
  color:var(--accentText);
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}

.pill{ border-radius:999px; padding:8px 12px; background:var(--card);
  border:1px solid var(--line); color:var(--text); cursor:pointer; box-shadow:var(--elev);
  transition: transform .06s ease, box-shadow .2s ease;
}
.pill:hover{ transform: translateY(-1px); box-shadow: var(--elev2); }

.main{ display:grid; place-items:center; padding:24px 16px; }
.stage-card{
  width:min(1100px, 94vw);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--elev);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.stage-meta{ display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.badge{
  background: color-mix(in oklab, var(--card) 85%, transparent);
  border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; font-weight:600;
}
.timer{ font-feature-settings:'tnum' 1; font-variant-numeric: tabular-nums; opacity:.85; }

.stage-root{ min-height:420px; display:grid; place-items:center; padding:12px; }

.nav-actions{ display:flex; gap:10px; justify-content:flex-end; }
.btn{
  border:1px solid var(--line); background:var(--card); color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow:var(--elev);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--elev2); }
.btn.primary{
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color: var(--accentText); font-weight:800; letter-spacing:.2px; border:0;
}

.feedback{ min-height:1.4em; color: var(--ok); margin-top:10px; font-weight:600; }

.site-footer{
  display:flex; justify-content:space-between; padding:14px 16px;
  color:var(--muted); border-top:1px solid var(--line);
}

/* Cards, boards, inputs */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--elev);
}

.board{ display:grid; gap:6px; }

.cell{
  width:50px; height:50px; display:grid; place-items:center;
  border:1px solid var(--line); background: color-mix(in oklab, var(--card) 92%, var(--bg));
  border-radius:12px; font-size:18px; color:var(--text);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.cell:focus{ outline:none; box-shadow: var(--ring); transform: translateY(-1px); }
.cell.revealed{ background: color-mix(in oklab, var(--card) 80%, var(--bg)); }

/* Inputs inside grid */
input.cell{
  text-align:center; font-size:18px;
  caret-color: var(--accent);
}

/* Modals */
.modal-card{
  background: var(--card); color: var(--text); border:1px solid var(--line);
  padding:16px; border-radius:12px; width:min(520px,92vw); box-shadow: var(--elev2);
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.num{ font-size:28px; font-weight:800; }
.lbl{ color:var(--muted); }

/* Morph overlay */
#morphOverlay{ position:fixed; inset:0; pointer-events:none; z-index:9999; display:grid; place-items:center; }
#morphOverlay svg{
  width:min(70vmin,700px); height:auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
  opacity:0; transform:scale(.86);
  transition: opacity .45s ease, transform .45s ease;
}
#morphOverlay.go svg{ opacity:.95; transform:scale(1); }
#morphOverlay.go.shrink svg{ opacity:0; transform:scale(.76); }

/* Small screens ---------------------------------------------------------- */
@media (max-width: 720px){
  .cell{ width:44px; height:44px; font-size:16px; border-radius:10px; }
  .stage-root{ min-height:360px; }
  .theme-switch .seg{ padding:7px 9px; }
}