/* ============================================================
   board.css — the 9x9 brass tile grid
   ============================================================ */

.board-frame {
  position: relative;
  overflow: hidden;
  padding: 8px;
  background:
    linear-gradient(145deg, var(--brass-dark), var(--frame-mid) 40%, var(--brass-darker));
  border: 3px solid var(--frame-dark);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 4px rgba(255, 230, 170, 0.08),
    inset 0 -4px 14px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 230, 170, 0.06);
}

.board-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 236, 180, 0.08), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(0, 0, 0, 0.28), transparent 36%),
    repeating-linear-gradient(
      20deg,
      rgba(255, 232, 170, 0.05) 0px,
      rgba(255, 232, 170, 0.05) 1px,
      transparent 1px,
      transparent 8px
    );
}

.board-frame::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 16px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 22% 74%, rgba(255, 232, 190, 0.22), transparent 38%),
    radial-gradient(circle at 80% 24%, rgba(255, 216, 148, 0.18), transparent 34%);
  filter: blur(20px);
  animation: fog-drift 15s ease-in-out infinite;
}

.board {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  background: var(--frame-dark);
  padding: 2px;
  border-radius: 3px;
}

.cell {
  aspect-ratio: 1;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1rem, 4.5vw, 1.6rem);
  background: radial-gradient(
    circle at 30% 25%,
    var(--brass-light) 0%,
    var(--brass) 55%,
    var(--brass-dark) 80%,
    var(--brass-dark) 100%
  );
  border: 1px solid var(--brass-darker);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease-in-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Press-in physics — the player pushes the brass plate into the panel */
.cell:active:not(.given) {
  transform: scale(0.93);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 6px rgba(0, 0, 0, 0.25);
}

/* clue cells (the puzzle's "given" numbers) — darker, weathered brass
   with a stamped-in look so they feel permanently engraved */
.cell.given {
  color: var(--frame-dark);
  background: radial-gradient(
    circle at 30% 25%,
    var(--brass-shine) 0%,
    var(--brass-light) 50%,
    var(--brass-dark) 80%,
    var(--brass-darker) 100%
  );
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 6px rgba(0, 0, 0, 0.15);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* peer = same row, column, or 3×3 box as the selected cell —
   subtly warmed, as if heated by proximity to the active tube */
.cell.peer {
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 6px rgba(243, 207, 135, 0.08);
}

/* same number as the selected cell — glows nixie-blue */
.cell.same {
  background: radial-gradient(
    circle at 30% 25%,
    #7ee5ff 0%,
    var(--nixie) 60%,
    var(--nixie-deep) 100%
  );
  color: var(--frame-dark);
}

/* the actively selected cell — vacuum tube amber glow, like a warm
   analog bulb powering up behind the brass plate */
.cell.selected {
  outline: 2px solid var(--tube-amber);
  outline-offset: -2px;
  box-shadow:
    0 0 15px var(--tube-glow),
    0 0 30px rgba(243, 207, 135, 0.25),
    inset 0 0 10px rgba(243, 207, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 2;
  animation: tube-warm 1.8s ease-in-out infinite;
}

/* a hint reveal — gold pulse so the player can see what was filled in */
.cell.hint-flash {
  animation: hint-pulse 1.2s ease-out;
}

/* a wrong number — flashes red and shakes, like a pressure valve blowing */
.cell.error {
  background: radial-gradient(
    circle at 30% 25%,
    #b23a2d 0%,
    var(--error) 55%,
    #6b1a10 100%
  );
  color: #fff;
  animation: shake 0.3s;
  box-shadow:
    0 0 12px var(--danger-glow),
    inset 0 0 8px rgba(255, 69, 48, 0.2);
}

/* ----------------------------------------------------------------
   Steam plumes — wisps of vapour rising from the board edges,
   as if the machine is venting pressure from the calculation
---------------------------------------------------------------- */
.steam {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 236, 196, 0.12),
    rgba(255, 236, 196, 0.03) 60%,
    transparent 75%
  );
  filter: blur(5px);
  animation: steam-rise 12s linear infinite;
}
.steam--a { left: 8%;  bottom: 0; width: 3rem; height: 3rem; }
.steam--b { left: 28%; bottom: 0; width: 4rem; height: 4rem; animation-delay: 2.8s; }
.steam--c { right: 22%; bottom: 0; width: 3.5rem; height: 3.5rem; animation-delay: 5.2s; }
.steam--d { right: 6%;  bottom: 0; width: 3rem; height: 3rem; animation-delay: 8s; }

/* 3x3 box separators (thicker borders every 3rd line) */
.cell.border-left { border-left: 2px solid var(--frame-dark); }
.cell.border-top { border-top: 2px solid var(--frame-dark); }
.cell.border-right { border-right: 2px solid var(--frame-dark); }
.cell.border-bottom { border-bottom: 2px solid var(--frame-dark); }