/* =========================================================
   🔧 Controls (tweak these)
   ========================================================= */
:root {
  --maze-cell-size: 24px;
  --maze-number-font-size: 14px;
}

/* =========================================================
   Container & Maze Base
   ========================================================= */
#maze_container {
  position: relative;
  margin: 1em auto;
  width: fit-content;
}

#maze {
  position: relative;
  background-color: var(--card, #1e2030);
  background-image:
    radial-gradient(circle at 0% 0%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%),
    radial-gradient(circle at center, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%, transparent 50%),
    radial-gradient(circle at 100% 100%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%),
    radial-gradient(circle at 0% 100%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%),
    radial-gradient(circle at 100% 0%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%);
  background-size: 8em 8em;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 5%, transparent);
}

/* =========================================================
   Layout primitives
   ========================================================= */
#maze .maze-row,
#maze .number-strip {
  display: flex;                 /* rows of equal-width cells */
}

/* Every grid box (maze cells + number cells) shares the same size */
#maze .maze-row > div,
#maze .number {
  width: var(--maze-cell-size);
  height: var(--maze-cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Number cells (rows/cols) */
#maze .number {
  color: var(--muted-foreground, #828bb8);
  font-weight: 600;
  font-family: "Fira Code", monospace;
  font-size: var(--maze-number-font-size);
  line-height: 1;
  opacity: 0.85;
  user-select: none;
}

#maze .number.corner {           /* top-left/top-right/bottom corners */
  width: var(--maze-cell-size);
}

/* Relative highlight (your tweak) */
#maze.is-relative .number.is-active {
  background: var(--accent, #ffc777);
  border-radius: 2px;
  font-size: 1.5rem;
  color: var(--accent-foreground, #1b1d2b);
}

/* =========================================================
   Maze cells visuals (⚠️ scoped to real cells only)
   ========================================================= */
/* Base cell box */
#maze .maze-row > div[data-r][data-c] {
  position: relative;
  transition: background-color 0.2s ease;
}

/* 🟢 Corridors (non-wall/door/sentinel) */
#maze .maze-row > div[data-r][data-c]:not(.wall):not(.door):not(.sentinel) {
  background-color: var(--muted, #2f334d);
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--primary, #82aaff) 8%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--primary, #82aaff) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg,  color-mix(in srgb, var(--primary, #82aaff) 4%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 25%, transparent 25%);
  background-size: var(--maze-cell-size) var(--maze-cell-size);
  box-shadow: inset 0 0 3px rgba(27,29,43,0.4);
}

/* 🧱 Walls and exits */
#maze .maze-row > div[data-r][data-c].wall,
#maze .maze-row > div[data-r][data-c].nubbin.wall,
#maze .maze-row > div[data-r][data-c].door.exit {
  background-color: var(--background, #222436);
  background-image:
    linear-gradient(45deg, rgba(27,29,43,0.5) 45%, transparent 55%),
    linear-gradient(to bottom, rgba(27,29,43,0.4) 45%, transparent 55%);
  background-size: calc(var(--maze-cell-size) * 0.5) calc(var(--maze-cell-size) * 0.5);
  box-shadow: inset 0 0 3px rgba(27,29,43,0.6);
}

/* 🔒 Door (exit) — FIXED BACKGROUND */
#maze .maze-row > div[data-r][data-c].door.exit {
  background: radial-gradient(circle at center, var(--chart-4, #4fd6be) 10%, var(--card, #1e2030) 90%) !important;
  box-shadow:
    0 0 6px color-mix(in srgb, var(--chart-4, #4fd6be) 50%, transparent),
    inset 0 0 4px color-mix(in srgb, var(--chart-4, #4fd6be) 30%, transparent);
  border-radius: 3px;
  z-index: 2;
}

#maze .maze-row > div[data-r][data-c].door.exit::after {
  content: "\1F6AA";
  color: var(--chart-4, #4fd6be);
  text-shadow: 0 0 6px color-mix(in srgb, var(--chart-4, #4fd6be) 60%, transparent);
  position: absolute;
  top: -4px;
  left: -2px;
  z-index: 3;
}

/* 💎 Decorations (nubbins) */
#maze .maze-row > div[data-r][data-c]::after {
  position: absolute;
  left: -3px;
  top: -4px;
  text-align: center;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
  font-size: calc(var(--maze-cell-size) * 0.75); /* scale with cell */
  z-index: 10;
}

#maze .maze-row > div[data-r][data-c].nubbin::after { content: "\1F33C"; }
#maze .maze-row > div[data-r][data-c].nubbin:nth-of-type(3n)::after { content: "\1F344"; }
#maze .maze-row > div[data-r][data-c].nubbin:nth-of-type(5n)::after { content: "\1F33B"; }
#maze .maze-row > div[data-r][data-c].nubbin:nth-of-type(7n)::after { content: "\1F48E"; }
#maze .maze-row > div[data-r][data-c].nubbin.wall::after { content: ""; }

/* 🧍 Hero */
#maze .maze-row > div[data-r][data-c].hero {
  background-color: var(--primary, #82aaff);
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary, #82aaff) 70%, transparent);
}
#maze.face-right .maze-row > div[data-r][data-c].hero::after { transform: scale(-1, 1); }
#maze .maze-row > div[data-r][data-c].hero::after { content: "\1F6B6" !important; }

/* 🐍 Sentinels */
#maze .maze-row > div[data-r][data-c].sentinel.wall { background: transparent; }
#maze .maze-row > div[data-r][data-c].sentinel.wall::after {
  content: "\1F40A";
  color: var(--muted-foreground, #828bb8);
}
#maze .maze-row > div[data-r][data-c].sentinel.wall:nth-of-type(3n)::after { content: "\1F40D"; }

/* 🗝️ Key */
#maze .maze-row > div[data-r][data-c].key::after {
  content: "\1F511";
  color: var(--accent, #ffc777);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent, #ffc777) 80%, transparent);
}

/* =========================================================
   Score / message bar (unchanged)
   ========================================================= */
#maze_output {
  display: flex;
  margin: 0.5em auto;
}
#maze_score,
#maze_message {
  font-family: "Fira Code", monospace;
  font-weight: 600;
  font-size: 1em;
  color: var(--foreground, #c8d3f5);
}
#maze_score {
  flex: 1;
  text-align: left;
}
#maze_score::before {
  content: "Score: ";
  color: var(--muted-foreground, #828bb8);
}
#maze_score.has-key::after {
  content: "\00a0\1F511";
  color: var(--accent, #ffc777);
}
#maze_message {
  flex: 3;
  text-align: right;
}

/* Subtle step trail effect for counted moves */
#maze .maze-row > div[data-r][data-c].trail {
  box-shadow: 
    inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 60%, transparent), 
    0 0 6px color-mix(in srgb, var(--primary, #82aaff) 35%, transparent);
  animation: maze-trail-fade 16ms ease-out;
}

/* ===== Invalid move "red mist" around hero ===== */
#maze .maze-row > div[data-r][data-c].invalid-move {
  animation: maze-invalid-pulse 180ms ease-out;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 85%, transparent),
    0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 45%, transparent);
}

@keyframes maze-invalid-pulse {
  0% {
    transform: scale(1.02);
    box-shadow:
      0 0 16px color-mix(in srgb, var(--destructive, #c53b53) 95%, transparent),
      0 0 28px color-mix(in srgb, var(--destructive, #c53b53) 55%, transparent);
  }
  100% {
    transform: none;
    box-shadow: none;
  }
}


@keyframes maze-trail-fade {
  from { background-color: color-mix(in srgb, var(--primary, #82aaff) 25%, transparent); }
  to   { background-color: transparent; }
}