/* =========================================================
   OUIJA CTF — The Board
   Faithful to the 1891 Kennard/Bond layout: two semicircular
   letter arcs, numerals in a line, full moon + YES top-left,
   crescent + star + NO top-right, stars in the lower corners,
   GOOD BYE at bottom centre, heart-shaped planchette.
   ========================================================= */

.board-stage {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  aspect-ratio: 1000 / 682;
  perspective: 1600px;
  touch-action: none;
}

/* The board tilts a few degrees toward the viewer, as if laid
   on a table between two sitters. */
.board-stage__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 7deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 900ms var(--ease-out);
  box-shadow: 0 38px 60px rgba(0, 0, 0, 0.65);
  border-radius: 28px;
}

.board-stage.is-tracking .board-stage__tilt {
  transition: transform 220ms var(--ease-out);
}

/* Warm pool of candlelight cast on the table beneath the board */
.board-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: 96%;
  height: 26%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210, 87, 15, 0.32) 0%, rgba(120, 40, 8, 0.14) 42%, transparent 72%);
  animation: halo-pulse 5.4s ease-in-out infinite;
  pointer-events: none;
}

.board-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------------- Board face ---------------- */
.board-face {
  stroke: #1b1006;
  stroke-width: 2;
}

.board-bevel {
  fill: none;
  stroke: rgba(255, 226, 170, 0.14);
  stroke-width: 1.5;
}

.board-inlay {
  fill: none;
  stroke: rgba(20, 12, 4, 0.55);
  stroke-width: 2.5;
}

.board-grain {
  mix-blend-mode: multiply;
  opacity: 0.34;
  pointer-events: none;
}

.board-stain {
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}

.board-edge-shade {
  pointer-events: none;
}

/* ---------------- Stencilled ink ---------------- */
.board-ink {
  fill: var(--ink-900);
  font-family: var(--font-board);
  paint-order: stroke fill;
  stroke: rgba(255, 226, 180, 0.09);
  stroke-width: 0.6;
}

.board-letter {
  font-size: 43px;
  letter-spacing: 0.02em;
  text-anchor: middle;
  dominant-baseline: central;
  cursor: pointer;
  transition: fill 260ms var(--ease-out);
}

.board-letter:hover {
  fill: #3a1f08;
}

/* A letter the spirits have just landed on */
.board-letter.is-struck {
  fill: #fff6d8;
  animation: letter-strike 900ms var(--ease-out);
}

@keyframes letter-strike {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(1);
  }
}

.board-letter {
  transform-box: fill-box;
  transform-origin: center;
}

.board-number {
  font-size: 37px;
  text-anchor: middle;
  dominant-baseline: central;
}

.board-word {
  font-size: 30px;
  letter-spacing: 0.12em;
  text-anchor: middle;
  dominant-baseline: central;
}

.board-goodbye {
  font-size: 33px;
  letter-spacing: 0.3em;
  text-anchor: middle;
  dominant-baseline: central;
}

.board-mark {
  font-size: 15px;
  letter-spacing: 0.42em;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0.72;
}

.board-brand {
  font-size: 60px;
  letter-spacing: 0.3em;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-display);
  font-weight: 700;
}

.board-figure {
  fill: var(--ink-900);
  opacity: 0.82;
}

.board-scroll {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 2.2;
  opacity: 0.6;
}

/* ---------------- Planchette ---------------- */
.planchette {
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  aspect-ratio: 1 / 1.06;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 40px);
}

.planchette svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.planchette__body {
  stroke: #2d1c0b;
  stroke-width: 2.5;
}

.planchette__bevel {
  fill: none;
  stroke: rgba(255, 235, 190, 0.2);
  stroke-width: 1.6;
}

.planchette__window {
  fill: rgba(240, 250, 248, 0.1);
  stroke: rgba(255, 236, 190, 0.34);
  stroke-width: 2;
}

.planchette__ring {
  fill: none;
  stroke: var(--brass-400);
  stroke-width: 3.5;
  opacity: 0.9;
}

.planchette__lens {
  fill: url(#lensGlow);
  opacity: 0.55;
}

.planchette__foot {
  fill: #1a1108;
  opacity: 0.65;
}

/* The eerie light that leaks from underneath while it moves */
.planchette__aura {
  fill: url(#auraGlow);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.planchette.is-channeling .planchette__aura {
  opacity: 1;
}

.planchette.is-channeling .planchette__ring {
  stroke: var(--spectre-300);
}

.planchette__drift {
  transform-origin: 50% 50%;
}

.planchette.is-channeling .planchette__drift {
  animation: planchette-idle 6.8s ease-in-out infinite;
}

@keyframes planchette-idle {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(2.5px, -3px) rotate(-1.3deg);
  }
  50% {
    transform: translate(-2px, 2.5px) rotate(1deg);
  }
  75% {
    transform: translate(3px, 1.5px) rotate(-0.6deg);
  }
}

/* ---------------- Séance readout ---------------- */
.seance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: center;
}

.seance__label {
  font-family: var(--font-type);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brass-500);
}

.seance__slate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  min-height: 2.4em;
  padding: var(--sp-3) var(--sp-5);
  min-width: min(440px, 90vw);
  font-family: var(--font-board);
  font-size: var(--fs-xl);
  letter-spacing: 0.24em;
  color: var(--spectre-300);
  text-shadow: 0 0 12px rgba(127, 212, 193, 0.45);
  background: rgba(4, 3, 6, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.seance__slate span {
  animation: letter-appear 520ms var(--ease-spirit) both;
}

@keyframes letter-appear {
  from {
    opacity: 0;
    transform: translateY(-0.3em) scale(1.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.seance__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--spectre-400);
  animation: caret-blink 1.1s steps(2) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.seance__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* ---------------- Compact board (auth pages, cards) ---------------- */
.board-stage--compact {
  max-width: 420px;
}

.board-stage--compact .board-letter {
  font-size: 46px;
}

.board-stage--ambient {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 600px) {
  .seance__slate {
    font-size: var(--fs-lg);
    letter-spacing: 0.16em;
  }
}