:root {
  --bg: #0f1115;
  --panel: #151923;
  --ink: #e9eef7;
  --accent: #3da9fc;
  --good: #38d39f;
  --warn: #ffb74d;
  --bad: #ff6b6b;
  --grid: #222838;
  --wall: #2b3246;
  --trail: rgba(61,169,252,0.18);
  --solve: rgba(56,211,159,0.75);
  --replay-start: #3da9fc;
  --replay-end:   #e85dff;
}

html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
}

#stage, #ui { height: 100vh; }

#stage {
  position: relative;
  display: grid;
  /* Center canvas both axes */
  place-items: center;
  overflow: hidden;
  background: radial-gradient(1200px 900px at 30% 20%, #0f1421 0%, var(--bg) 60%);
}

canvas {
  background: transparent;
  box-shadow: 0 0 0 1px #0c0f18 inset;
  border-radius: 18px;
  align-self: center;
}

#ui {
  background: var(--panel);
  border-left: 1px solid #0f1421;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 12px;
  gap: 12px;
  align-self: stretch;
}

h1 {
  font-size: 18px;
  margin: 0 0 8px 0;
  letter-spacing: .3px;
  color: #cfe6ff;
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 12px; color: #b9c4d6; }

input[type="number"], select, button, input[type="range"] {
  background: #0f1421;
  color: var(--ink);
  border: 1px solid #1a2133;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
}

input[type="range"] {
  padding: 8px 10px; height: 38px;
}
.range-readout {
  font-size: 12px; opacity: .8; margin-top: 2px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

button {
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
button:hover { border-color: #273149; }
button:active { transform: translateY(1px) scale(0.99); }

.accent { background: #11253a; border-color: #264b70; }
.good   { background: #0f2a22; border-color: #2b8067; }
.warn   { background: #2a2413; border-color: #6d5b1e; }
.bad    { background: #2b1717; border-color: #7d3030; }

.toggles { display: flex; gap: 12px; align-items: center; }
.toggle { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; opacity: .9; }
.toggle input { width: 18px; height: 18px; }

.meter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.stat {
  background: #0f1421;
  border: 1px solid #1a2133;
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.badge { font-size: 11px; opacity: .7; }
.value { text-align: right; font-weight: 700; }

.legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: .85; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 6px; background: var(--accent); opacity: .6; }
.dot.player { background: #e85dff; }
.dot.goal { background: var(--good); }
.dot.solve { background: var(--solve); }
.line { width: 18px; height: 3px; background: linear-gradient(90deg, var(--replay-start), var(--replay-end)); border-radius: 2px; display: inline-block; }

.sep { height: 1px; background: #101522; margin: 6px 0; }
.help { font-size:12px; opacity:.8; line-height:1.5 }

.dpad {
  margin-top: auto;
  display: grid;
  grid-template-columns: 64px 64px 64px;
  gap: 8px;
  place-items: center;
  align-self: center;
}
.dpad button { width: 64px; height: 64px; font-size: 18px; border-radius: 16px; }

footer { font-size: 12px; opacity: .6; text-align: center; padding-top: 6px; }

@media (max-width: 1000px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
  }
  #stage, #ui { height: auto; }
  #stage { min-height: 50vh; }
  #ui { border-left: none; border-top: 1px solid #0f1421; }
}