/* =========================================================
   🔧 Controls (tweak these two)
   ========================================================= */
:root {
  --cell-size: 24px;         /* size of every grid box (maze cells + number cells) */
  --number-font-size: 14px;  /* size of the digits around the maze */
}

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

#maze {
  position: relative;
  background-color: #1e2030; /* Tokyo Night card background */
  background-image:
    radial-gradient(circle at 0% 0%, transparent 50%, rgba(130, 170, 255, 0.03) 50%),
    radial-gradient(circle at center, rgba(130, 170, 255, 0.03) 50%, transparent 50%),
    radial-gradient(circle at 100% 100%, transparent 50%, rgba(130, 170, 255, 0.03) 50%),
    radial-gradient(circle at 0% 100%, transparent 50%, rgba(130, 170, 255, 0.03) 50%),
    radial-gradient(circle at 100% 0%, transparent 50%, rgba(130, 170, 255, 0.03) 50%);
  background-size: 8em 8em;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px rgba(130, 170, 255, 0.05);
}

/* =========================================================
   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(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

/* Relative highlight (your tweak) */
#maze.is-relative .number.is-active {
  background: #ffc777; /* Tokyo Night warning/yellow */
  border-radius: 2px;
  font-size: 1.5rem;
  color: #1b1d2b; /* Tokyo Night black */
}

/* =========================================================
   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: #2f334d; /* Tokyo Night muted */
  background-image:
    linear-gradient(135deg, rgba(130,170,255,0.08) 25%, transparent 25%),
    linear-gradient(225deg, rgba(130,170,255,0.06) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(130,170,255,0.04) 25%, transparent 25%),
    linear-gradient(315deg, rgba(130,170,255,0.03) 25%, transparent 25%);
  background-size: var(--cell-size) var(--cell-size);  /* scale with 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: #222436; /* Tokyo Night background */
  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(--cell-size) * 0.5) calc(var(--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, #4fd6be 10%, #1e2030 90%) !important;
  box-shadow:
    0 0 6px rgba(79, 214, 190, 0.5),
    inset 0 0 4px rgba(79, 214, 190, 0.3);
  border-radius: 3px;
  z-index: 2;
}

#maze .maze-row > div[data-r][data-c].door.exit::after {
  content: "\1F6AA";
  color: #4fd6be; /* Tokyo Night teal */
  text-shadow: 0 0 6px rgba(79, 214, 190, 0.6);
  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(--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: #82aaff; /* Tokyo Night primary blue */
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(130, 170, 255, 0.7);
}
#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: #828bb8; /* Tokyo Night muted foreground */
}
#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: #ffc777; /* Tokyo Night warning/yellow */
  text-shadow: 0 0 6px rgba(255, 199, 119, 0.8);
}

/* =========================================================
   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: #c8d3f5; /* Tokyo Night foreground */
}
#maze_score {
  flex: 1;
  text-align: left;
}
#maze_score::before {
  content: "Score: ";
  color: #828bb8; /* Tokyo Night muted foreground */
}
#maze_score.has-key::after {
  content: "\00a0\1F511";
  color: #ffc777; /* Tokyo Night warning/yellow for key */
}
#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 rgba(130, 170, 255, 0.6), 0 0 6px rgba(130, 170, 255, 0.35);
  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 rgba(255, 117, 127, 0.85),
    0 0 24px rgba(255, 117, 127, 0.45);
}

@keyframes maze-invalid-pulse {
  0% {
    transform: scale(1.02);
    box-shadow:
      0 0 16px rgba(255, 117, 127, 0.95),
      0 0 28px rgba(255, 117, 127, 0.55);
  }
  100% {
    transform: none;
    box-shadow: none;
  }
}


@keyframes maze-trail-fade {
  from { background-color: rgba(130, 170, 255, 0.25); }
  to   { background-color: transparent; }
}