:root {
  --ida-bg: #0b0c10;
  --ida-panel: #11131a;
  --ida-text: #e6e6ea;
  --ida-muted: #9aa3b2;
  --ida-accent: #60a5fa;
  --ida-core: #8b5cf6;
  --ida-good: #34d399;
  --ida-bad: #ef4444;
  --ida-border: #1f2330;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --ida-bg: #f7f7fb;
    --ida-panel: #ffffff;
    --ida-text: #0f172a;
    --ida-muted: #6b7280;
    --ida-accent: #2563eb;
    --ida-core: #7c3aed;
    --ida-good: #16a34a;
    --ida-bad: #dc2626;
    --ida-border: #e6e8ef;
    color-scheme: light;
  }
}
html[data-theme="light"] :root, html[data-theme="light"] {
  --ida-bg: #f7f7fb;
  --ida-panel: #ffffff;
  --ida-text: #0f172a;
  --ida-muted: #6b7280;
  --ida-accent: #2563eb;
  --ida-core: #7c3aed;
  --ida-good: #16a34a;
  --ida-bad: #dc2626;
  --ida-border: #e6e8ef;
  color-scheme: light;
}
html[data-theme="dark"] :root, html[data-theme="dark"] {
  --ida-bg: #0b0c10;
  --ida-panel: #11131a;
  --ida-text: #e6e6ea;
  --ida-muted: #9aa3b2;
  --ida-accent: #60a5fa;
  --ida-core: #8b5cf6;
  --ida-good: #34d399;
  --ida-bad: #ef4444;
  --ida-border: #1f2330;
  color-scheme: dark;
}

/* ==== Scoped App Styles ==== */
#ida-root {
  min-height: 100svh;
  background: var(--ida-bg);
  color: var(--ida-text);
  font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

#ida-root * { box-sizing: border-box; }

#ida-root .ida-header {
  display:flex; align-items:center; justify-content: space-between;
  padding: .75rem 1rem; gap:.75rem; max-width: 1024px; margin:0 auto;
}
#ida-root .ida-brand { display:flex; align-items:center; gap:.5rem; }
#ida-root .ida-logo { width:32px; height:32px; }
#ida-root .ida-svg-accent { fill: var(--ida-accent); opacity:.25; }
#ida-root .ida-svg-core { fill: var(--ida-core); opacity:.9; }
#ida-root .ida-title { margin:0; font-size:1.125rem; }

#ida-root .ida-controls { display:flex; align-items:center; gap:.5rem; flex-wrap: wrap; }
#ida-root .ida-toggle input { display:none; }
#ida-root .ida-toggle span {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.5rem;
  background: var(--ida-panel); border:1px solid var(--ida-border);
}
#ida-root .ida-toggle input:checked + span { outline:2px solid var(--ida-accent); }

#ida-root .ida-btn {
  background: var(--ida-core); color: white; border:none; padding:.55rem .8rem;
  border-radius:.6rem; cursor:pointer; font-weight:600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#ida-root .ida-btn.ida-ghost { background: transparent; color: var(--ida-text); border:1px solid var(--ida-border); }
#ida-root .ida-btn.ida-primary { background: var(--ida-accent); }
#ida-root .ida-btn:focus-visible { outline:2px solid var(--ida-accent); outline-offset:2px; }

#ida-root .ida-hud {
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding: .25rem 1rem .75rem; flex-wrap: wrap; max-width:1024px; margin:0 auto;
}
#ida-root .ida-hud-item {
  background: var(--ida-panel); border:1px solid var(--ida-border);
  border-radius:.5rem; padding:.35rem .55rem; color: var(--ida-muted);
}

#ida-root .ida-stage {
  max-width:1024px; margin:0 auto; padding: 0 1rem 1rem;
  display:grid; place-items:center; gap:.75rem;
}

#ida-root .ida-board {
  --cell: 64px;
  width: calc(var(--cols) * var(--cell));
  height: calc(var(--rows) * var(--cell));
  background: var(--ida-panel);
  border: 1px solid var(--ida-border);
  border-radius: 1rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  overflow: hidden;
}
@media (min-width: 860px) {
  #ida-root .ida-board { --cell: 72px; }
}

#ida-root .ida-cell {
  position: relative; display:grid; place-items:center;
  border-right: 1px solid var(--ida-border);
  border-bottom: 1px solid var(--ida-border);
  outline: none;
}
#ida-root .ida-cell:nth-child(odd) { background: rgba(255,255,255,.02); }
html[data-theme="light"] #ida-root .ida-cell:nth-child(odd) { background: rgba(0,0,0,.03); }
#ida-root .ida-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--ida-accent); }
#ida-root .ida-cell.ida-block { background: #1a1d27; }
html[data-theme="light"] #ida-root .ida-cell.ida-block { background: #e9ebf3; }

#ida-root .ida-highlight::after {
  content:""; position:absolute; inset:8px; border-radius:.6rem; border:2px dashed var(--ida-accent);
  animation: ida-pulse 1s ease-in-out infinite alternate;
}
@keyframes ida-pulse { from{opacity:.5;} to{opacity:1;} }

#ida-root .ida-target svg .ida-svg-core { fill: var(--ida-good); }
#ida-root .ida-knight svg .ida-svg-core { fill: var(--ida-accent); }

#ida-root .ida-instructions { color: var(--ida-muted); text-align:center; margin:0; }

#ida-root .ida-overlay {
  position: fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.55);
}
/* Make sure hidden attribute actually hides the overlay in all cases */
#ida-root .ida-overlay[hidden] { display: none !important; }

html[data-theme="light"] #ida-root .ida-overlay { background: rgba(0,0,0,.35); }
#ida-root .ida-modal {
  position:relative; width:min(90vw, 460px); background: var(--ida-panel);
  border:1px solid var(--ida-border); border-radius:1rem; padding:1.25rem; text-align:center;
}
#ida-root .ida-close {
  position:absolute; top:.5rem; right:.5rem; width:2rem; height:2rem; border-radius:.5rem;
  background: transparent; color: var(--ida-text); border:1px solid var(--ida-border);
  cursor:pointer; font-size:1.25rem; line-height:1;
}

#ida-root .ida-footer { text-align:center; color: var(--ida-muted); padding:.75rem 1rem; }