/* Effects: particle canvas, score popups, callout stamps, reduced-effects overrides. */

.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
}
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  overflow: hidden;
}

.score-pop {
  position: absolute;
  font: 800 18px/1 var(--font-mono);
  color: var(--text);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink);
  white-space: nowrap;
  will-change: transform, opacity;
}
.score-pop--big { font-size: 26px; color: var(--acid); }

/* Callouts sit over the board, sized from the board's container. */
.callouts {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.callout {
  padding: 0.18em 0.4em 0.1em;
  font: clamp(26px, 9cqmin, 68px)/1 var(--font-stamp);
  white-space: nowrap;
  color: var(--c, var(--acid));
  border: 0.09em solid currentColor;
  background: rgba(5, 7, 13, 0.82);
  text-shadow: 0.06em 0.06em 0 var(--ink);
  box-shadow: 0.08em 0.08em 0 var(--ink);
  will-change: transform, opacity;
}
.callout--t1 { --c: var(--hot); }
.callout--t2 { --c: var(--acid); }
.callout--t3 { --c: var(--warn); font-size: clamp(28px, 10cqmin, 74px); }
.callout--t4 { --c: var(--hot); font-size: clamp(30px, 11cqmin, 80px); }
.callout--t5 { --c: #fff; background: var(--hot); font-size: clamp(30px, 11cqmin, 84px); }
.callout--t6 { --c: var(--acid-ink); background: var(--acid); font-size: clamp(32px, 12cqmin, 90px); text-shadow: none; }

/* Reduced effects: kill looping CSS motion; JS skips particles and shake. */
.reduce-fx *,
.reduce-fx *::before,
.reduce-fx *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
.reduce-fx .tile.is-hint::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 3px dotted var(--warn);
  border-radius: var(--r-md);
}
.reduce-fx .wallpaper::after { display: none; }

/* ---------- special blasts (inside .board-fx, board-local px) ---------- */
.beam {
  position: absolute;
  border-radius: 999px;
  /* Bright core fading to the character color at the edges: reads as light. */
  background: linear-gradient(to bottom, transparent, var(--c) 22%, #fff 50%, var(--c) 78%, transparent);
  will-change: transform, opacity;
}
/* Tung Tung Tung Sahur's column slam: a wooden kentongan stick, not a laser. */
.beam--slam {
  border-radius: 6px;
  border: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, #c98b4a 0 14px, #a8692f 14px 18px);
}
.blast-ring {
  position: absolute;
  border: 4px solid var(--c);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
  will-change: transform, opacity;
}

.fx-tag {
  position: absolute;
  padding: 3px 7px 1px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--acid);
  font: 15px/1 var(--font-stamp);
  white-space: nowrap;
  will-change: transform, opacity;
}
.fx-tag--big { background: #c98b4a; color: var(--ink); font-size: 24px; box-shadow: 3px 3px 0 var(--ink); }

.callout--tfatal {
  --c: #fff;
  background: var(--hot);
  font-size: clamp(36px, 15cqmin, 112px);
  letter-spacing: 0.02em;
  box-shadow: 0.06em 0.06em 0 var(--ink);
}