:root {
  color-scheme: dark;
  --bg: #0d0a18;
  --bg-2: #171229;
  --panel: rgba(27, 22, 44, 0.82);
  --panel-strong: rgba(21, 18, 36, 0.96);
  --ink: #f4f0ff;
  --muted: #b6acd9;
  --accent: #8f7cff;
  --accent-2: #59e1d7;
  --accent-3: #ffd36e;
  --danger: #ff8ea8;
  --wall: #2f2947;
  --floor: #1a1530;
  --floor-alt: #201a39;
  --glow: 0 22px 64px rgba(0, 0, 0, 0.36);
  --cell-size: min(13vw, 72px);
  --gap: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(143, 124, 255, 0.24), transparent 36%),
    linear-gradient(180deg, #100c1c 0%, #0a0812 100%);
}

button { font: inherit; }
.shell { width: min(1120px, calc(100% - 24px)); margin: 0 auto; padding: 16px 0 32px; }
.topnav, .eyebrow, .mini, .label { letter-spacing: 0.08em; text-transform: uppercase; }
.topnav { display: flex; gap: 10px; justify-content: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
.topnav a { color: inherit; text-decoration: none; }
.panel {
  background: linear-gradient(180deg, rgba(33, 27, 56, 0.96), rgba(20, 17, 33, 0.96));
  border: 1px solid rgba(159, 144, 227, 0.16);
  border-radius: 24px;
  box-shadow: var(--glow);
}
.hero { padding: 24px; text-align: center; }
.hero h1, .side-panel h2, .board-head h2 { margin: 0; }
.subtitle, .objective-copy, .hint-copy, .progress-copy, .rules { color: var(--muted); }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.stat { padding: 14px 16px; }
.stat strong { display: block; margin-top: 6px; font-size: 1.15rem; }
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
  gap: 14px;
}
.board-panel { padding: 18px; }
.board-head, .button-row, .controls, .middle-row { display: flex; }
.board-head { align-items: center; justify-content: space-between; gap: 12px; }
.button-row { flex-wrap: wrap; gap: 10px; }
button {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  padding: 10px 14px;
  cursor: pointer;
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button.primary, .move-btn.accent { background: linear-gradient(135deg, var(--accent), #6855d7); }
.status { min-height: 1.6em; color: var(--accent-2); margin: 14px 0; }
.board {
  display: grid;
  gap: var(--gap);
  justify-content: center;
  margin: 0 auto;
  touch-action: manipulation;
}
.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--floor-alt), var(--floor));
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cell.wall { background: linear-gradient(145deg, #352f4f, #241f37); }
.cell.exit::before,
.cell.prism::before,
.cell.shard::before {
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-weight: 800;
}
.cell.exit::before { content: "◌"; border: 2px dashed rgba(255, 211, 110, 0.8); color: var(--accent-3); }
.cell.prism::before { content: "✦"; background: rgba(89, 225, 215, 0.12); color: var(--accent-2); }
.cell.shard::before { content: "◆"; background: rgba(143, 124, 255, 0.14); color: #c7baff; }
.cell.collected::before { opacity: 0.2; }
.actor {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12), 0 8px 20px rgba(0,0,0,0.28);
}
.actor.thief { background: linear-gradient(145deg, #9c87ff, #6655da); }
.actor.echo { background: linear-gradient(145deg, #6bf2e7, #1e9d98); color: #07211f; }
.cell.exit .actor { outline: 2px solid rgba(255, 211, 110, 0.85); outline-offset: -5px; }
.controls { flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.middle-row { gap: 10px; }
.move-btn { width: 64px; height: 64px; padding: 0; font-size: 1.5rem; }
.side-column { display: grid; gap: 14px; }
.side-panel { padding: 18px; }
.level-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.level-pill { border-radius: 16px; padding: 10px; text-align: center; background: rgba(255,255,255,0.06); }
.level-pill.active { background: rgba(143,124,255,0.24); }
.level-pill.done { box-shadow: inset 0 0 0 1px rgba(89,225,215,0.7); }
.rules { padding-left: 18px; margin: 10px 0 0; line-height: 1.5; }
.hint-copy { color: var(--accent-3); }
.flash { animation: pulse 0.28s ease; }
@keyframes pulse { from { transform: scale(0.94); } to { transform: scale(1); } }

@media (max-width: 860px) {
  .stats, .layout { grid-template-columns: 1fr; }
  .board-head { flex-direction: column; align-items: stretch; }
  .button-row { justify-content: center; }
}