:root {
  color-scheme: dark;
  --bg: #0d0f14;
  --panel: #171a22;
  --text: #eceef2;
  --muted: #8b90a0;
  --accent: #ffb703;
  --wall: #2b2f3a;
  --start: #2ec4b6;
  --end: #e63946;
  --visited: #1d3557;
  --path: #ffb703;
  --weighted: #6b4226;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 2.5rem;
}

header {
  text-align: center;
  max-width: 640px;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.8rem;
}

.subtitle {
  margin: 0;
  color: var(--muted);
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 1100px;
}

.controls {
  background: var(--panel);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 260px;
  /* Without an explicit basis, a flex item's default (auto) one is its max-content width — for
     a panel containing a long, unwrapped-for-measurement paragraph (.hint), that's the width
     of its longest line laid out on one line, which can balloon to nearly the whole row and
     starve .grid of space. Fixing .controls to a set width sidesteps that entirely. */
}

.control-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button {
  background: var(--accent);
  color: #1a1300;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.1);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.file-label {
  background: var(--accent);
  color: #1a1300;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.file-label:hover {
  filter: brightness(1.1);
}

input[type="file"] {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 100%;
}

button[aria-pressed="true"] {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

select,
input[type="range"] {
  accent-color: var(--accent);
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
}

.comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.comparison caption {
  text-align: left;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.comparison th,
.comparison td {
  text-align: left;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #232a3d;
}

.comparison thead th {
  color: var(--muted);
  font-weight: normal;
}

.grid {
  display: grid;
  gap: 1px;
  background: #05060a;
  border: 1px solid #232a3d;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  flex: 1 1 480px;
  /* A flex item's implicit min-width is auto (its content size), not 0 — for a CSS grid of
     `1fr` columns whose content (empty cells) has no intrinsic size of its own, that can fail
     to resolve to a sensible width. min-width: 0 lets it size purely from the flex-basis and
     available space instead. */
  min-width: 0;
  max-width: 100%;
}

.cell {
  aspect-ratio: 1;
  background: var(--panel);
}

.cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

.cell.flow {
  /* --flow runs 0 at the end to 1 at the farthest reachable cell: warm near, cool far. */
  background: hsl(calc(50deg + var(--flow, 0) * 200deg) 55% 38%);
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-size: clamp(0.45rem, 1.4vw, 0.85rem);
  line-height: 1;
  user-select: none;
}

.cell.flow-unreachable {
  background: repeating-linear-gradient(45deg, var(--panel) 0 3px, var(--wall) 3px 4px);
}

.cell.wall {
  background: var(--wall);
}

.cell.start {
  background: var(--start);
}

.cell.end {
  background: var(--end);
}

.cell.visited {
  background: var(--visited);
}

.cell.path {
  background: var(--path);
}

.cell.weighted {
  background: var(--weighted);
}

footer {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}