/* ── CYBERPUNK ANIMATIONS ────────────────────────────────────────────── */

/* Glitch text effect */
.glitch-text { position: relative; }
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch-text::before {
  left: 2px; text-shadow: -1px 0 var(--pink);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  animation: glitchTop 4s infinite linear;
}
.glitch-text::after {
  left: -2px; text-shadow: 1px 0 var(--blue);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  animation: glitchBot 4s infinite linear;
}

@keyframes glitchTop {
  0%, 88%, 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateX(0); }
  89% { clip-path: polygon(0 10%, 100% 10%, 100% 35%, 0 35%); transform: translateX(-3px); }
  91% { clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); transform: translateX(3px); }
  93% { clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); transform: translateX(-2px); }
  95% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateX(0); }
}

@keyframes glitchBot {
  0%, 88%, 100% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateX(0); }
  90% { clip-path: polygon(0 60%, 100% 60%, 100% 85%, 0 85%); transform: translateX(3px); }
  92% { clip-path: polygon(0 20%, 100% 20%, 100% 45%, 0 45%); transform: translateX(-3px); }
  94% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateX(0); }
}

/* Neon flicker */
@keyframes neonFlicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: .8; }
  97% { opacity: .3; }
  98% { opacity: .9; }
  99% { opacity: .5; }
}
.neon-flicker { animation: neonFlicker 5s infinite; }

/* Screen shake */
@keyframes screenShake {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
  10% { transform: translateX(-5px) translateY(-3px) rotate(-.5deg); }
  20% { transform: translateX(5px) translateY(3px) rotate(.5deg); }
  30% { transform: translateX(-4px) translateY(2px) rotate(0); }
  40% { transform: translateX(4px) translateY(-2px) rotate(.3deg); }
  50% { transform: translateX(-3px) translateY(3px) rotate(-.3deg); }
  60% { transform: translateX(3px) translateY(-1px) rotate(0); }
  70% { transform: translateX(-2px) translateY(2px); }
  80% { transform: translateX(2px) translateY(-1px); }
  90% { transform: translateX(-1px) translateY(1px); }
}
.screen-shake { animation: screenShake .5s ease-in-out; }

/* Camera flash */
@keyframes cameraFlash {
  0% { opacity: 0; }
  5% { opacity: .9; }
  20% { opacity: 0; }
  25% { opacity: .5; }
  35% { opacity: 0; }
}
.camera-flash {
  position: fixed; inset: 0; background: #fff;
  pointer-events: none; z-index: 9997; opacity: 0;
  animation: cameraFlash .5s ease-out forwards;
}

/* Scanline sweep */
@keyframes scanSweep {
  0% { top: -5%; }
  100% { top: 105%; }
}
.scan-sweep {
  position: fixed; left: 0; width: 100%; height: 3px;
  background: linear-gradient(transparent, var(--blue), transparent);
  opacity: .2; animation: scanSweep 6s linear infinite; z-index: 200; pointer-events: none;
}

/* Token animation classes */
@keyframes tokenSlideLeft {
  0% { transform: translateX(200%); }
  80% { transform: translateX(-5%); }
  100% { transform: translateX(0); }
}
@keyframes tokenSlideRight {
  0% { transform: translateX(-200%); }
  80% { transform: translateX(5%); }
  100% { transform: translateX(0); }
}
@keyframes tokenRiseUp {
  0% { transform: translateY(300%); }
  80% { transform: translateY(-8%); }
  100% { transform: translateY(0); }
}
.token-slide-left { animation: tokenSlideLeft .35s cubic-bezier(.36,.07,.19,.97); }
.token-slide-right { animation: tokenSlideRight .35s cubic-bezier(.36,.07,.19,.97); }
.token-rise-up { animation: tokenRiseUp .35s cubic-bezier(.36,.07,.19,.97); }

/* Board rotation for gravity shift */
@keyframes boardRotate180 {
  0% { transform: rotate(0deg); filter: blur(0); }
  30% { transform: rotate(60deg) scale(.95); filter: blur(2px); }
  70% { transform: rotate(150deg) scale(.95); filter: blur(2px); }
  100% { transform: rotate(180deg); filter: blur(0); }
}

/* Achievement slide in */
@keyframes achievementSlideIn {
  0% { transform: translateX(120%); opacity: 0; }
  15% { transform: translateX(-5%); }
  25% { transform: translateX(3%); }
  35% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
.achievement-popup.show { animation: achievementSlideIn 4.5s ease-out forwards; }

/* Win explosion cells */
@keyframes winCellExplode {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(.9); }
  100% { transform: scale(1); }
}
.cell-explode { animation: winCellExplode .5s ease-out; }

/* Gravity direction arrow */
@keyframes arrowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .7; }
}
.gravity-arrow { animation: arrowPulse 1s ease-in-out infinite; }

/* Heartbeat for blitz < 5s */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
.heartbeat { animation: heartbeat .6s ease-in-out infinite; }

/* Countdown entrance */
@keyframes countdownEntrance {
  0% { opacity: 0; transform: scale(3) rotate(-5deg); filter: blur(20px); }
  60% { opacity: 1; transform: scale(1.05) rotate(1deg); filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}
.countdown-enter { animation: countdownEntrance .6s cubic-bezier(.15,.5,.5,1) forwards; }

/* Power cell activation */
@keyframes powerCellActivate {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(3); opacity: 0; }
  100% { transform: scale(1); opacity: 0; display: none; }
}
.power-cell-activate { animation: powerCellActivate .5s ease-out forwards; }

/* Entrance stagger */
.stagger-in { opacity: 0; animation: staggerEnter .4s ease-out forwards; }
@keyframes staggerEnter {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.stagger-in:nth-child(1) { animation-delay: .1s; }
.stagger-in:nth-child(2) { animation-delay: .2s; }
.stagger-in:nth-child(3) { animation-delay: .3s; }
.stagger-in:nth-child(4) { animation-delay: .4s; }

/* Erstesspiel letter-by-letter */
@keyframes letterReveal {
  0% { opacity: 0; transform: translateY(-20px) scale(.5); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.letter-reveal { opacity: 0; animation: letterReveal .1s ease-out forwards; }

/* Gold particle shimmer */
@keyframes goldShimmer {
  0% { box-shadow: 0 0 10px var(--gold), 0 0 30px rgba(255,215,0,.3); }
  50% { box-shadow: 0 0 20px var(--gold), 0 0 60px rgba(255,215,0,.6), 0 0 100px rgba(255,215,0,.2); }
  100% { box-shadow: 0 0 10px var(--gold), 0 0 30px rgba(255,215,0,.3); }
}
.gold-shimmer { animation: goldShimmer 2s ease-in-out infinite; }

@keyframes redPulse {
  0% { box-shadow: 0 0 8px #ff0000, 0 0 20px rgba(255,0,0,.4); }
  50% { box-shadow: 0 0 18px #ff0000, 0 0 50px rgba(255,0,0,.7), 0 0 80px rgba(255,0,0,.3); }
  100% { box-shadow: 0 0 8px #ff0000, 0 0 20px rgba(255,0,0,.4); }
}
.red-pulse { animation: redPulse 1s ease-in-out infinite; }

/* Void aura rotation */
@keyframes voidRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fisch swim */
@keyframes fishSwim {
  0% { transform: translateX(0) skewX(0); }
  25% { transform: translateX(2px) skewX(-2deg); }
  75% { transform: translateX(-2px) skewX(2deg); }
  100% { transform: translateX(0) skewX(0); }
}

/* Matrix rain */
.matrix-char { position: absolute; color: var(--green); font-family: monospace; }
@keyframes matrixDrop {
  0% { transform: translateY(-100%); opacity: 1; }
  80% { opacity: .5; }
  100% { transform: translateY(calc(100vh + 50px)); opacity: 0; }
}

/* Octopus pulse */
@keyframes tentaclePulse {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-3deg); }
  75% { transform: scale(.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Skin Special Effects ───────────────────────────────────────────── */
@keyframes seFloatUp {
  0%   { transform: translate(-50%,-50%); opacity: 1; }
  100% { transform: translate(-50%, -110px); opacity: 0; }
}
@keyframes seSpinOut {
  0%   { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-80px) rotate(360deg) scale(0); opacity: 0; }
}
@keyframes seOrbit {
  0%   { transform: rotate(0deg) translateX(35px) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: rotate(360deg) translateX(35px) rotate(-360deg); opacity: 0; }
}
@keyframes seStrikeDown {
  from { transform: translateX(-50%) translateY(-60px); opacity: 1; }
  to   { transform: translateX(-50%) translateY(0px); opacity: 0; }
}
@keyframes seGameOver {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes seGlitchScreen {
  0%  { clip-path: inset(20% 0 60% 0); transform: translateX(-4px); }
  33% { clip-path: inset(60% 0 10% 0); transform: translateX(4px); }
  66% { clip-path: inset(40% 0 30% 0); transform: translateX(-2px); }
  100%{ clip-path: none; transform: none; opacity: 0; }
}
@keyframes seRingExpand {
  from { width: 8px; height: 8px; opacity: .9; }
  to   { width: 120px; height: 120px; opacity: 0; }
}
@keyframes seLightFade {
  from { opacity: .9; }
  to   { opacity: 0; }
}
@keyframes seVentPop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  40%  { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
@keyframes seTypeIn {
  from { width: 0; }
  to   { width: 200px; }
}
@keyframes seHeartPulse {
  0%   { transform: translate(-50%,-50%) scale(1); }
  40%  { transform: translate(-50%,-50%) scale(1.6); }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@keyframes sePokeShake {
  0%, 100% { transform: translate(-50%,-50%) rotate(0deg); }
  25%       { transform: translate(-50%,-50%) rotate(-15deg); }
  75%       { transform: translate(-50%,-50%) rotate(15deg); }
}
@keyframes seScanH {
  from { opacity: .9; transform: scaleX(1); }
  to   { opacity: 0; transform: scaleX(1.05); }
}
@keyframes seBeamDown {
  from { height: 0; opacity: .9; }
  to   { height: 150px; opacity: 0; }
}

/* ── Last move marker ── */
.board-cell.last-move { position: relative; }
.board-cell.last-move::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1.5px solid rgba(255, 215, 0, .65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: lastMoveGlitch 2.2s steps(1, end) infinite;
}
@keyframes lastMoveGlitch {
  0%         { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
  70%        { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
  72%        { opacity: .9;  transform: translate(-2px,0); box-shadow: 0 0 14px rgba(255,200,0,.7); border-color: rgba(255,180,0,.9); }
  74%        { opacity: .3;  transform: translate(2px,0);  box-shadow: none;                        border-color: rgba(255,80,0,.5);  }
  76%        { opacity: .8;  transform: translate(-1px,0); box-shadow: 0 0 10px rgba(255,215,0,.5); border-color: rgba(255,215,0,.8); }
  78%        { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
  91%        { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
  92%        { opacity: .15; transform: translate(1px,0);  box-shadow: none; }
  93%        { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
  100%       { opacity: .65; transform: translate(0,0);    box-shadow: 0 0 6px rgba(255,215,0,.35); border-color: rgba(255,215,0,.65); }
}