:root{
  --bg:#f6f5f0;
  --surface:#ffffff;
  --surface-2:#eeece3;
  --ink:#20241f;
  --ink-soft:#5c6459;
  --ink-faint:#8b9188;
  --border:#e2dfd3;
  --border-strong:#cac5b5;
  --accent:#3a4fd0;
  --accent-ink:#ffffff;
  --success:#1f8a6e;
  --danger:#c23b3b;
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#181a17;
    --surface:#212420;
    --surface-2:#282b26;
    --ink:#eceae3;
    --ink-soft:#a9ada3;
    --ink-faint:#767b71;
    --border:#34372f;
    --border-strong:#454940;
    --accent:#8b9bff;
    --accent-ink:#12141a;
    --success:#5fcfa9;
    --danger:#e78787;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}
a{ color:var(--accent); }

.page{ max-width:920px; margin:0 auto; padding:40px 20px 80px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 10px;
}
h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,4vw,36px);
  letter-spacing:-.01em;
  margin:0 0 10px;
}
.lede{ color:var(--ink-soft); max-width:65ch; margin:0 0 32px; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card h2{
  font-family:var(--font-display);
  font-size:20px;
  margin:0;
}
.card p{ color:var(--ink-soft); font-size:14px; margin:0; flex:1; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-faint);
}
select, button{
  font-family:var(--font-body);
  font-size:14px;
  padding:9px 14px;
  border-radius:8px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
}
button.primary{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
  font-weight:600;
}
button:disabled{ opacity:.5; cursor:not-allowed; }
button:hover:not(:disabled){ border-color:var(--accent); }

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:20px 0 24px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.toolbar .spacer{ flex:1; }
.timer{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:15px;
  color:var(--ink-soft);
}
.badge{
  font-family:var(--font-mono);
  font-size:11px;
  padding:3px 8px;
  border-radius:100px;
  border:1px solid var(--border-strong);
  color:var(--ink-soft);
}

.message{
  min-height:20px;
  font-size:14px;
  margin-bottom:16px;
  padding:0 2px;
}
.message.ok{ color:var(--success); }
.message.error{ color:var(--danger); }

.board-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  display:flex;
  justify-content:center;
  overflow-x:auto;
}

/* Sudoku */
.sudoku-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(30px,42px));
  grid-template-rows:repeat(9,minmax(30px,42px));
  gap:1px;
  background:var(--border-strong);
  border:2px solid var(--ink);
}
.sudoku-cell{
  background:var(--surface);
  border:none;
  text-align:center;
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--ink);
  padding:0;
}
.sudoku-cell.given{
  background:var(--surface-2);
  font-weight:700;
  color:var(--ink);
}
.sudoku-cell:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
.sudoku-cell.box-right{ border-right:2px solid var(--ink); }
.sudoku-cell.box-bottom{ border-bottom:2px solid var(--ink); }
.sudoku-cell.hint{ background:#ffe9a8; color:#1a1a1a; }

/* Lights Out */
.lightsout-grid{ display:grid; gap:6px; }
.lightsout-cell{
  width:52px; height:52px;
  border-radius:8px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  cursor:pointer;
  transition:background .1s;
}
.lightsout-cell.lit{ background:#ffcf5c; border-color:#e0ac2c; }
.lightsout-cell.hint{ box-shadow:0 0 0 3px var(--accent) inset; }

/* Maze */
#maze-canvas{ display:block; max-width:100%; }

/* Sokoban */
.sokoban-grid{
  display:grid;
  gap:2px;
  background:var(--border-strong);
  border:2px solid var(--ink);
}
.sokoban-cell{
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  position:relative;
}
.sokoban-cell.wall{ background:var(--ink-soft); }
.sokoban-cell.target::after{
  content:'';
  width:12px; height:12px;
  border-radius:50%;
  border:2px solid var(--accent);
  position:absolute;
  z-index:1;
}
.sokoban-cell.hint{ box-shadow:0 0 0 3px var(--accent) inset; }
.sokoban-box{
  width:26px; height:26px;
  border-radius:6px;
  background:#c9a227;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
  position:relative;
  z-index:2;
}
.sokoban-box.on-target{ background:var(--success); }
.sokoban-player{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--accent);
  position:relative;
  z-index:3;
}

footer.foot{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
}

.back-link{
  display:inline-block;
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:13px;
  text-decoration:none;
}