/* ============================================================================
   The hole peeking through the paper.
   ============================================================================ */

/* Inset by the frame so the bands only ever cross paper. Covering the ink
   frame too inverted it into a bright cyan bar sticking out past the board. */
.glitch-layer{position:absolute;inset:var(--frame);z-index:5;pointer-events:none;
  overflow:hidden}

/* Inverted + pushed hard toward the phosphor green of side B. Because this is
   a backdrop filter it acts on the real board underneath, so the tiles, the
   names and the crest all come through — bent, but genuinely themselves. */
.glitch-band{position:absolute;left:-6%;width:112%;height:0;opacity:0;
  backdrop-filter:invert(1) sepia(1) hue-rotate(72deg) saturate(7) brightness(1.15) contrast(1.25);
  -webkit-backdrop-filter:invert(1) sepia(1) hue-rotate(72deg) saturate(7) brightness(1.15) contrast(1.25);
  mix-blend-mode:normal;
  box-shadow:0 0 12px rgba(52,255,110,.28)}

/* the board's own flinch */
.board.glitch-soft{animation:g-soft .09s steps(2) 2}
.board.glitch-deep{animation:g-deep .13s steps(3) 3}

@keyframes g-soft{
  0%  {transform:translate(0,0)}
  50% {transform:translate(-1.5px,.5px)}
  100%{transform:translate(1px,0)}
}
@keyframes g-deep{
  0%  {transform:translate(0,0)   skewX(0deg);   filter:none}
  33% {transform:translate(-4px,1px) skewX(.5deg);
       filter:drop-shadow(2px 0 0 rgba(255,0,64,.55)) drop-shadow(-2px 0 0 rgba(0,255,180,.5))}
  66% {transform:translate(3px,-1px) skewX(-.4deg);
       filter:drop-shadow(-3px 0 0 rgba(255,0,64,.5)) drop-shadow(2px 0 0 rgba(52,255,110,.55))}
  100%{transform:translate(0,0) skewX(0deg); filter:none}
}

/* when it flinches, the corner it is leaking from lights up */
.board.glitch-deep .corner-blackhole::before{
  background:linear-gradient(45deg,#8a6a2e 0%,#000 100%)}
.board.glitch-deep .corner-blackhole .corner-art{
  filter:drop-shadow(0 0 6px rgba(255,190,110,.9)) brightness(1.4)}

@media (prefers-reduced-motion:reduce){
  .glitch-layer{display:none}
  .board.glitch-soft,.board.glitch-deep{animation:none}
}