:root {
  --bg: #f4f6fb;
  --bg-grad: radial-gradient(1200px 800px at 50% -10%, #ffffff 0%, #eef1f8 55%, #e8ecf6 100%);
  --surface: #ffffff;
  --surface-2: #f0f3fa;
  --border: #e2e7f2;
  --border-strong: #d3daea;
  --text: #1a2035;
  --text-soft: #64708b;
  --text-faint: #9aa4bd;

  --accent: #2f6bff;
  --accent-soft: #6f9bff;
  --pipe-idle: #c3cbdc;
  --pipe-active: var(--accent);
  --source: #ff8a3d;

  --shadow-sm: 0 1px 2px rgba(24, 39, 75, 0.06);
  --shadow-md: 0 8px 30px rgba(24, 39, 75, 0.08);
  --shadow-lg: 0 24px 60px rgba(24, 39, 75, 0.14);

  --radius: 16px;
  --radius-sm: 11px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
    --bg: #0c0f1a;
    --bg-grad: radial-gradient(1200px 800px at 50% -10%, #182036 0%, #0f1424 55%, #0a0d18 100%);
    --surface: #141a2b;
    --surface-2: #1b2338;
    --border: #232c45;
    --border-strong: #2c375a;
    --text: #eef1f9;
    --text-soft: #98a3bf;
    --text-faint: #5f6b88;

    --accent: #5b8cff;
    --accent-soft: #7ba3ff;
    --pipe-idle: #38425f;
    --source: #ff9b52;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  min-height: 100%;
}

.app {
  width: 100%;
  max-width: 620px;
  padding: clamp(20px, 5vw, 44px) 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ---------- Header ---------- */
.topbar { text-align: center; }

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px 8px auto auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  top: 9px; left: 9px;
  opacity: 0.9;
}

.brand h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.subtitle {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 14.5px;
}

/* ---------- Controls ---------- */
.controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.seg {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.seg:hover { color: var(--text); }
.seg.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.stats {
  display: flex;
  gap: 8px;
}
.stat {
  min-width: 62px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.stat-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}
.stat-value {
  display: block;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.btn-new {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm), 0 4px 14px rgba(47, 107, 255, 0.28);
  transition: transform 0.14s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.btn-new:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 6px 18px rgba(47, 107, 255, 0.34); }
.btn-new:active { transform: translateY(0); }

/* ---------- Board ---------- */
.board-wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.board {
  --n: 7;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  touch-action: manipulation;
}

.cell {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cell::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 22%;
  background: transparent;
  transition: background 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
@media (hover: hover) {
  .cell:hover::before { background: var(--surface-2); }
}

.pipe {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.28s var(--ease);
  will-change: transform;
}
.pipe svg { display: block; width: 100%; height: 100%; overflow: visible; }

.wire {
  stroke: var(--pipe-idle);
  transition: stroke 0.3s var(--ease), filter 0.3s var(--ease);
}
.hub { fill: var(--pipe-idle); transition: fill 0.3s var(--ease); }
.plug {
  fill: var(--surface);
  stroke: var(--pipe-idle);
  transition: stroke 0.3s var(--ease), fill 0.3s var(--ease);
}

/* connected to source */
.cell.active .wire { stroke: var(--pipe-active); }
.cell.active .hub  { fill: var(--pipe-active); }
.cell.active .plug { stroke: var(--pipe-active); fill: var(--pipe-active); }

/* source cell */
.cell.source .hub { fill: var(--source); }
.cell.source .core { fill: var(--source); }
.core { fill: var(--pipe-idle); transition: fill 0.3s var(--ease); }

/* solved state pulse */
.board.solved .wire { stroke: var(--pipe-active); filter: drop-shadow(0 0 6px rgba(47,107,255,0.45)); }
.board.solved .hub { fill: var(--pipe-active); }
.board.solved .plug { stroke: var(--pipe-active); fill: var(--pipe-active); }
.board.solved .cell.source .hub,
.board.solved .cell.source .core { fill: var(--source); }
.board.solved { animation: solved-glow 0.6s var(--ease); }

@keyframes solved-glow {
  0% { box-shadow: var(--shadow-md); }
  50% { box-shadow: var(--shadow-md), 0 0 0 4px rgba(47,107,255,0.18); }
  100% { box-shadow: var(--shadow-md); }
}

/* ---------- Win overlay ---------- */
.win {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  z-index: 5;
  animation: fade 0.3s var(--ease);
}
.win[hidden] { display: none; }

.win-card {
  text-align: center;
  padding: 30px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  animation: pop 0.35s var(--ease);
}
.win-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: 0 8px 22px rgba(47,107,255,0.4);
}
.win-card h2 { font-size: 24px; letter-spacing: -0.02em; }
.win-card p { color: var(--text-soft); margin: 6px 0 18px; font-size: 14.5px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Footer ---------- */
.hint {
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 520px) {
  .controls { justify-content: center; }
  .actions { order: 3; }
  .hint span { display: inline-block; max-width: 260px; }
}

/* ---------- Actions (buttons group) ---------- */
.actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-icon:hover { color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-icon:active { transform: translateY(0); }

.btn-check {
  appearance: none;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s var(--ease), background 0.18s var(--ease);
}
.btn-check.ready {
  background: var(--accent);
  color: #fff;
  animation: pulse-btn 1.4s var(--ease) infinite;
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(47,107,255,0.35); }
  50% { box-shadow: var(--shadow-sm), 0 0 0 6px rgba(47,107,255,0); }
}

/* ---------- Settings toggle-driven board states ---------- */
body.hide-controls .controls { display: none; }
body.hide-timer #time-stat { display: none; }
body.no-anim .pipe { transition: none !important; }

.stat.personal { cursor: pointer; }
.stat.personal .stat-label::after { content: " ⏸"; font-size: 9px; opacity: 0.6; }
.stat.personal.paused .stat-value { color: var(--text-faint); }
.stat.personal.paused .stat-label::after { content: " ▶"; }

body.sticky-toolbar .controls {
  position: sticky;
  top: 8px;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.board.rotate-board { transform: rotate(90deg); }

/* Error / last-change / pin cell states */
.cell.error .wire { stroke: var(--error, #ef4757); }
.cell.error .hub  { fill: var(--error, #ef4757); }
.cell.error .plug { stroke: var(--error, #ef4757); fill: var(--error, #ef4757); }

.cell.last::before {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

.cell.pinned::before {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cell.pinned { cursor: default; }

/* Flood visualization delay is set inline per cell via --flood-delay */
body.visualize-flood .cell .wire,
body.visualize-flood .cell .hub,
body.visualize-flood .cell .plug {
  transition-delay: var(--flood-delay, 0ms);
}

/* ---------- Board coordinates ---------- */
.board-wrap { padding: 0; }
.board-wrap.has-coords { padding: 22px 0 0 22px; }

.coords {
  position: absolute;
  display: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.board-wrap.has-coords .coords { display: grid; }

.coords-top {
  top: 0; left: 22px; right: 0;
  height: 22px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0 10px;
}
.coords-left {
  left: 0; top: 22px; bottom: 0;
  width: 22px;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  padding: 10px 0;
}
.coords span { display: flex; align-items: center; justify-content: center; }

/* ---------- Settings panel ---------- */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 20, 36, 0.42);
  backdrop-filter: blur(3px);
  animation: fade 0.2s var(--ease);
}
.settings-overlay[hidden] { display: none; }

.settings-panel {
  width: min(440px, 100%);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slide-in 0.28s var(--ease);
}
@keyframes slide-in {
  from { transform: translateX(24px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.settings-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.settings-close:hover { color: var(--text); background: var(--surface-2); }

.settings-list {
  overflow-y: auto;
  padding: 6px 24px 28px;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-row.sub { padding-left: 34px; }
.set-label {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.3;
}

/* Toggle switch */
.tgl {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: #b8c0d2;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease);
}
:root[data-theme="dark"] .tgl { background: #414b66; }
.tgl-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.2s var(--ease);
}
.tgl-mark {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  width: 22px;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.15s var(--ease);
}
.tgl-mark.off { right: 4px; opacity: 0.9; }
.tgl-mark.on { left: 4px; opacity: 0; }

.tgl[aria-checked="true"] { background: #2ec16b; }
.tgl[aria-checked="true"] .tgl-knob { transform: translateX(22px); }
.tgl[aria-checked="true"] .tgl-mark.off { opacity: 0; }
.tgl[aria-checked="true"] .tgl-mark.on { opacity: 1; }

/* Night-mode toggle: always dark track with a moon */
.tgl.night { background: #1c2233; }
.tgl.night .tgl-mark.off,
.tgl.night .tgl-mark.on { opacity: 0; }
.tgl.night .moon {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  color: #cdd6ea;
  display: flex;
}
.tgl.night[aria-checked="true"] { background: #0b0f1c; }
.tgl.night[aria-checked="true"] .moon { right: auto; left: 8px; color: #ffd77a; }