:root {
  --bg: #16130f;
  --panel: #221d17;
  --ink: #ece5da;
  --muted: #9a9186;
  --accent: #d08c3c;
  --good: #7fa650;
  --bad: #c05b4d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  max-width: 46rem;
  margin: 0 auto;
}

header h1 { font-size: 1.1rem; margin: 0; letter-spacing: 0.06em; text-transform: uppercase; }
header nav { display: flex; gap: 0.5rem; }
header #sync-status { margin-left: auto; font-size: 0.8rem; }

main { max-width: 46rem; margin: 0 auto; }

button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid #3a322a;
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font: inherit;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #16130f; border-color: var(--accent); font-weight: 600; }

input, select { background: var(--panel); color: var(--ink); border: 1px solid #3a322a; border-radius: 6px; padding: 0.4rem; font: inherit; }

.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }

.board { width: min(90vw, 30rem); aspect-ratio: 1; margin: 1rem auto; }
.board.shake { animation: shake 0.25s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.solver-head {
  display: flex;
  justify-content: space-between;
  max-width: min(90vw, 30rem);
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}
#solver-timer { font-size: 1.3rem; }
#solver-feedback { text-align: center; min-height: 1.5rem; }

.card { background: var(--panel); border: 1px solid #3a322a; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat .value { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid #3a322a; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.field label { font-size: 0.8rem; color: var(--muted); }
.histogram { display: flex; align-items: flex-end; gap: 2px; height: 4rem; }
.histogram div { flex: 1; background: var(--accent); min-height: 1px; }

.curve { width: 100%; height: 10rem; }

button.link-puzzle {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
}
button.link-puzzle:hover { color: var(--accent); }

dialog#puzzle-viewer {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid #3a322a;
  border-radius: 10px;
  padding: 1rem;
  max-width: min(90vw, 32rem);
}
dialog#puzzle-viewer::backdrop { background: rgba(0, 0, 0, 0.6); }
.pv-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }