* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --bg: #16313b;
  --panel: #10242d;
  --panel-2: #203c44;
  --ink: #f7f0df;
  --muted: #bed8d6;
  --line: rgba(247, 240, 223, .18);
  --accent: #5ee7df;
  --gold: #f5d45f;
  --good: #74e6b2;
  --bad: #ff8b8b;
}
html, body { min-height: 100%; }
body {
  margin: 0;
  background: linear-gradient(145deg, #16313b, #10242d 58%, #151514);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { font: inherit; }
.shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 30px; }
.topbar, .meta, .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar { justify-content: space-between; min-height: 56px; margin-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 22px; font-weight: 900; text-decoration: none; }
.brand span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--accent); color: #151514; }
.meta span { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: rgba(0, 0, 0, .22); font-weight: 850; }
.layout { display: grid; grid-template-columns: minmax(0, 700px) minmax(320px, 430px); gap: 18px; align-items: start; }
.canal-panel, .ledger { border: 1px solid var(--line); border-radius: 8px; background: rgba(16, 36, 45, .92); box-shadow: 0 24px 70px rgba(0, 0, 0, .36); padding: clamp(18px, 3vw, 28px); }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(34px, 7vw, 62px); line-height: .95; }
h2 { font-size: clamp(24px, 4vw, 38px); line-height: 1; }
h3 { margin: 18px 0 8px; color: var(--gold); font-size: 14px; text-transform: uppercase; }
.canal-grid {
  --cols: 5;
  --rows: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  width: min(100%, 650px);
  aspect-ratio: var(--cols) / var(--rows);
  margin-top: 22px;
  border: 1px solid rgba(247, 240, 223, .16);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(21, 21, 20, .28);
  background: var(--hue);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .03);
}
.cell.filled { box-shadow: inset 0 0 0 4px rgba(247, 240, 223, .72), 0 0 16px rgba(94, 231, 223, .34); z-index: 1; }
.cell strong { border-radius: 999px; padding: 4px 7px; background: rgba(21, 21, 20, .72); color: var(--ink); font-size: 11px; font-weight: 900; }
.palette-list, .move-list { display: grid; gap: 8px; }
.palette-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palette-list button, .move-list li, .rule-list li {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .045);
  color: var(--muted);
  font-weight: 850;
}
.palette-list button { border-color: color-mix(in srgb, var(--hue), var(--line) 55%); cursor: pointer; }
.palette-list button::before { content: ""; width: 16px; height: 16px; border-radius: 999px; background: var(--hue); }
.palette-list button:disabled { opacity: .42; cursor: not-allowed; }
.move-list { list-style: none; margin: 0; padding: 0; }
.move-list strong { color: var(--hue); }
.rule-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.rule-list .ok { color: var(--good); border-color: rgba(116, 230, 178, .55); }
.rule-list .bad { color: var(--bad); border-color: rgba(255, 139, 139, .6); }
.controls button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  color: #151514;
  background: var(--accent);
  font-weight: 900;
  cursor: pointer;
}
.controls button:nth-child(2) { background: #f7f0df; }
#undo-button { background: var(--gold); }
#hint-button { background: var(--good); }
.status { min-height: 48px; color: #fffdf4; font-weight: 760; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .shell { width: min(100% - 18px, 720px); }
  .palette-list { grid-template-columns: 1fr; }
}