/* ========================================
   style.css — Hollywood Hacker Thema + 3D Kubussen
   ======================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --card: #111;
  --green: #00ff41;
  --pink: #ff006e;
  --cyan: #00d4ff;
  --yellow: #ffe600;
  --white: #d4d4d4;
  --dim: #555;
  --mono: 'Courier New', Courier, monospace;
  --sans: system-ui, -apple-system, sans-serif;
  --cube-size: 70px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }

/* ===== CANVAS LAYERS ===== */
#matrix {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0.09; pointer-events: none;
}

#particles {
  position: fixed; inset: 0; z-index: 95;
  pointer-events: none;
}

/* Dual scanline layers for depth */
#scanlines {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(
    transparent, transparent 2px,
    rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px
  );
}

#vignette {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
}

/* CRT flicker overlay */
#scanlines::after {
  content: '';
  position: fixed; inset: 0;
  background: rgba(0,255,65,0.01);
  animation: crt-flicker 0.15s infinite;
  pointer-events: none;
}

@keyframes crt-flicker {
  0%   { opacity: 0.02; }
  50%  { opacity: 0; }
  100% { opacity: 0.02; }
}

/* ===== SCREENS ===== */
.screen {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ===== MENU SCREEN ===== */
.menu-title {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--green);
  text-shadow:
    0 0 10px rgba(0,255,65,0.8),
    0 0 40px rgba(0,255,65,0.4),
    0 0 80px rgba(0,255,65,0.2),
    0 0 120px rgba(0,255,65,0.1);
  margin-bottom: 0.3rem;
  text-align: center;
  letter-spacing: -1px;
  animation: title-glow 3s ease-in-out infinite alternate, title-entrance 1s ease-out;
}

@keyframes title-glow {
  from {
    text-shadow:
      0 0 10px rgba(0,255,65,0.8),
      0 0 40px rgba(0,255,65,0.4),
      0 0 80px rgba(0,255,65,0.2);
    filter: brightness(1);
  }
  to {
    text-shadow:
      0 0 20px rgba(0,255,65,1),
      0 0 60px rgba(0,255,65,0.6),
      0 0 120px rgba(0,255,65,0.3),
      0 0 200px rgba(0,255,65,0.1);
    filter: brightness(1.1);
  }
}

@keyframes title-entrance {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.menu-subtitle {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--dim);
  letter-spacing: 3px;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  animation: fade-up 1s ease-out 0.3s both;
}

.menu-label {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--dim);
  margin-bottom: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: fade-up 1s ease-out 0.5s both;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 320px;
  margin-bottom: 2rem;
}

.menu-buttons .btn:nth-child(1) { animation: fade-up 0.6s ease-out 0.6s both; }
.menu-buttons .btn:nth-child(2) { animation: fade-up 0.6s ease-out 0.75s both; }
.menu-buttons .btn:nth-child(3) { animation: fade-up 0.6s ease-out 0.9s both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--mono);
  font-size: 1.05rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--green);
  background: rgba(0,255,65,0.05);
  color: var(--green);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,65,0.1), transparent);
  transition: left 0.5s;
}
.btn:hover::before { left: 100%; }
.btn:hover {
  background: rgba(0,255,65,0.15);
  box-shadow: 0 0 25px rgba(0,255,65,0.3), inset 0 0 15px rgba(0,255,65,0.05);
  text-shadow: 0 0 10px rgba(0,255,65,0.5);
}
.btn:active {
  transform: scale(0.97);
}
.btn-pink {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(255,0,110,0.05);
}
.btn-pink::before {
  background: linear-gradient(90deg, transparent, rgba(255,0,110,0.1), transparent);
}
.btn-pink:hover {
  background: rgba(255,0,110,0.15);
  box-shadow: 0 0 25px rgba(255,0,110,0.3), inset 0 0 15px rgba(255,0,110,0.05);
  text-shadow: 0 0 10px rgba(255,0,110,0.5);
}
.btn-cyan {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,212,255,0.05);
}
.btn-cyan::before {
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.1), transparent);
}
.btn-cyan:hover {
  background: rgba(0,212,255,0.15);
  box-shadow: 0 0 25px rgba(0,212,255,0.3), inset 0 0 15px rgba(0,212,255,0.05);
  text-shadow: 0 0 10px rgba(0,212,255,0.5);
}
.btn-small {
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}
.btn-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ===== GAME SCREEN ===== */
.game-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(to bottom, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 70%, transparent 100%);
  border-bottom: 1px solid rgba(0,255,65,0.05);
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.game-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.turn-indicator {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 1px;
  transition: color 0.3s, text-shadow 0.3s;
}
.turn-x {
  color: var(--green);
  text-shadow: 0 0 10px rgba(0,255,65,0.5);
}
.turn-o {
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255,0,110,0.5);
  animation: thinking-pulse 1s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.score-bar {
  display: flex;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--dim);
}
.score-item { display: flex; gap: 0.3rem; }
.score-val-win { color: var(--green); text-shadow: 0 0 8px rgba(0,255,65,0.3); }
.score-val-loss { color: var(--pink); text-shadow: 0 0 8px rgba(255,0,110,0.3); }
.score-val-draw { color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,0.3); }

.streak-display {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--yellow);
  text-shadow: 0 0 15px rgba(255,230,0,0.6);
  animation: streak-fire 0.5s ease-in-out infinite alternate;
}

@keyframes streak-fire {
  from { text-shadow: 0 0 10px rgba(255,230,0,0.4), 0 0 20px rgba(255,100,0,0.2); }
  to   { text-shadow: 0 0 20px rgba(255,230,0,0.8), 0 0 40px rgba(255,100,0,0.4), 0 0 60px rgba(255,0,0,0.2); }
}

/* ===== 3D CUBE CONTAINER ===== */
#cube-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  cursor: grab;
  transition: transform 0.05s;
}
#cube-container:active { cursor: grabbing; }

.cube {
  position: relative;
  width: 280px;
  height: 280px;
  transform-style: preserve-3d;
}

.cube-layer {
  position: absolute;
  width: 280px;
  height: 280px;
  display: grid;
  grid-template-columns: repeat(3, var(--cube-size));
  grid-template-rows: repeat(3, var(--cube-size));
  gap: 14px;
  justify-content: center;
  align-content: center;
  transform-style: preserve-3d;
}

.layer-label {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.65rem;
  color: rgba(0,255,65,0.25);
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== CELL WRAPPER (grid positie) ===== */
.cell-wrapper {
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  cursor: pointer;
}

/* ===== MINI-CUBE (echte 3D kubus per cel) ===== */
.mini-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cell-wrapper:hover .mini-cube.cell-empty {
  transform: scale(1.12) rotateX(5deg) rotateY(5deg);
}

/* === 6 VLAKKEN VAN DE MINI-KUBUS === */
.mini-face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
  border: 1px solid rgba(0,255,65,0.12);
}

/* Front */
.mini-front {
  transform: translateZ(calc(var(--cube-size) / 2));
  background: rgba(17,17,17,0.9);
}

/* Back */
.mini-back {
  transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));
  background: rgba(12,12,12,0.9);
}

/* Left */
.mini-left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
  background: rgba(14,14,14,0.85);
}

/* Right */
.mini-right {
  transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
  background: rgba(14,14,14,0.85);
}

/* Top */
.mini-top {
  transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
  background: rgba(20,20,20,0.85);
}

/* Bottom */
.mini-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));
  background: rgba(8,8,8,0.9);
}

/* Edge glow */
.edge-glow {
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(0,255,65,0.06);
  border-radius: 2px;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* ===== CELL LABEL (op vlakken) ===== */
.cell-label {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}

/* ===== EMPTY CELL ===== */
.cell-empty .mini-face {
  border-color: rgba(0,255,65,0.08);
}

.cell-wrapper:hover .cell-empty .mini-face {
  border-color: rgba(0,255,65,0.3);
  background: rgba(0,255,65,0.03);
  box-shadow: inset 0 0 20px rgba(0,255,65,0.05);
}

.cell-wrapper:hover .cell-empty .edge-glow {
  border-color: rgba(0,255,65,0.2);
  box-shadow: 0 0 15px rgba(0,255,65,0.1);
}

/* ===== PLAYER X (groen) ===== */
.cell-x .mini-face {
  border-color: rgba(0,255,65,0.35);
  background: rgba(0,255,65,0.04);
  box-shadow: inset 0 0 25px rgba(0,255,65,0.06);
}

.cell-x .cell-label {
  color: var(--green);
  text-shadow:
    0 0 10px rgba(0,255,65,0.8),
    0 0 30px rgba(0,255,65,0.4),
    0 0 60px rgba(0,255,65,0.2);
}

.cell-x .edge-glow {
  border-color: rgba(0,255,65,0.3);
  box-shadow: 0 0 12px rgba(0,255,65,0.15), 0 0 30px rgba(0,255,65,0.05);
}

/* ===== PLAYER O (roze) ===== */
.cell-o .mini-face {
  border-color: rgba(255,0,110,0.35);
  background: rgba(255,0,110,0.04);
  box-shadow: inset 0 0 25px rgba(255,0,110,0.06);
}

.cell-o .cell-label {
  color: var(--pink);
  text-shadow:
    0 0 10px rgba(255,0,110,0.8),
    0 0 30px rgba(255,0,110,0.4),
    0 0 60px rgba(255,0,110,0.2);
}

.cell-o .edge-glow {
  border-color: rgba(255,0,110,0.3);
  box-shadow: 0 0 12px rgba(255,0,110,0.15), 0 0 30px rgba(255,0,110,0.05);
}

/* ===== NO POINTER ON PLACED ===== */
.cell-x, .cell-o { pointer-events: none; }
.cell-wrapper:has(.cell-x), .cell-wrapper:has(.cell-o) { cursor: default; }

/* ===== PLACEMENT ANIMATION ===== */
.cell-place-anim {
  animation: cube-slam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.575);
}

@keyframes cube-slam {
  0%   { transform: scale(0) rotateX(180deg) rotateY(180deg); opacity: 0; }
  50%  { transform: scale(1.3) rotateX(10deg) rotateY(10deg); opacity: 1; }
  70%  { transform: scale(0.9) rotateX(-5deg) rotateY(-5deg); }
  100% { transform: scale(1) rotateX(0) rotateY(0); }
}

/* ===== WIN CELL ===== */
.cell-win .mini-face {
  border-color: var(--cyan) !important;
  background: rgba(0,212,255,0.08) !important;
  box-shadow: inset 0 0 30px rgba(0,212,255,0.1) !important;
}

.cell-win .cell-label {
  color: var(--cyan) !important;
  text-shadow:
    0 0 15px rgba(0,212,255,1),
    0 0 40px rgba(0,212,255,0.6),
    0 0 80px rgba(0,212,255,0.3) !important;
}

.cell-win .edge-glow {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 20px rgba(0,212,255,0.4), 0 0 50px rgba(0,212,255,0.15) !important;
}

.cell-win {
  animation: win-cube-spin 1.5s ease-in-out infinite;
}

@keyframes win-cube-spin {
  0%   { transform: scale(1) rotateY(0); }
  25%  { transform: scale(1.1) rotateY(90deg); }
  50%  { transform: scale(1) rotateY(180deg); }
  75%  { transform: scale(1.1) rotateY(270deg); }
  100% { transform: scale(1) rotateY(360deg); }
}

/* ===== HINT CELL ===== */
.cell-hint .mini-face {
  border-color: var(--yellow) !important;
  background: rgba(255,230,0,0.06) !important;
}

.cell-hint .edge-glow {
  border-color: var(--yellow) !important;
  box-shadow: 0 0 20px rgba(255,230,0,0.3) !important;
}

.cell-hint {
  animation: hint-bounce 0.8s ease-in-out infinite alternate;
}

@keyframes hint-bounce {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.08) translateY(-6px); }
}

/* ===== OVERLAYS ===== */
.overlay {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlay-in 0.3s ease-out;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-card {
  background: var(--card);
  border: 1px solid rgba(0,255,65,0.2);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0,255,65,0.05), 0 0 80px rgba(0,0,0,0.5);
  animation: card-entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes card-entrance {
  from { transform: scale(0.8) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.overlay-title {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--green);
  text-shadow: 0 0 20px rgba(0,255,65,0.3);
  margin-bottom: 1.2rem;
}

.overlay-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: 1rem;
}

.overlay-text strong { color: var(--green); }
.overlay-text em { color: var(--cyan); font-style: normal; }

/* ===== RESULT OVERLAY ===== */
.result-overlay {
  position: fixed; inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  gap: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: result-in 0.5s ease-out;
}

@keyframes result-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.result-text {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: bold;
  text-align: center;
  animation: result-slam 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.575);
}

@keyframes result-slam {
  0%   { transform: scale(3) rotate(-5deg); opacity: 0; filter: blur(20px); }
  60%  { transform: scale(0.9) rotate(1deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}

.result-win {
  color: var(--green);
  text-shadow:
    0 0 30px rgba(0,255,65,0.7),
    0 0 80px rgba(0,255,65,0.3),
    0 0 150px rgba(0,255,65,0.1);
  animation: result-slam 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.575), winner-glow 1s ease-in-out 0.6s infinite alternate;
}

@keyframes winner-glow {
  from { text-shadow: 0 0 30px rgba(0,255,65,0.7), 0 0 80px rgba(0,255,65,0.3); }
  to   { text-shadow: 0 0 50px rgba(0,255,65,1), 0 0 120px rgba(0,255,65,0.5), 0 0 200px rgba(0,255,65,0.2); }
}

.result-lose {
  color: var(--pink);
  text-shadow:
    0 0 30px rgba(255,0,110,0.7),
    0 0 80px rgba(255,0,110,0.3);
}

.result-draw {
  color: var(--cyan);
  text-shadow:
    0 0 30px rgba(0,212,255,0.7),
    0 0 80px rgba(0,212,255,0.3);
}

.result-sub {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--dim);
  text-align: center;
  margin-bottom: 1rem;
  animation: fade-up 0.5s ease-out 0.4s both;
}

/* ===== GLITCH ===== */
.glitch-active {
  animation: glitch-hard 0.08s steps(2) 10 !important;
}

@keyframes glitch-hard {
  0%   { transform: translate(0) skewX(0); filter: none; }
  20%  { transform: translate(-6px, 3px) skewX(-2deg); filter: hue-rotate(90deg) saturate(3); }
  40%  { transform: translate(6px, -3px) skewX(3deg); filter: hue-rotate(180deg) saturate(2); }
  60%  { transform: translate(-3px, -4px) skewX(-1deg); filter: hue-rotate(270deg) brightness(2); }
  80%  { transform: translate(4px, 2px) skewX(2deg); filter: hue-rotate(45deg) contrast(2); }
  100% { transform: translate(0) skewX(0); filter: none; }
}

/* ===== SCREEN FLASH ===== */
#flash-overlay {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
#flash-overlay.flash-green {
  background: rgba(0,255,65,0.2);
  opacity: 1;
  animation: flash-fade 0.4s ease-out forwards;
}
#flash-overlay.flash-pink {
  background: rgba(255,0,110,0.2);
  opacity: 1;
  animation: flash-fade 0.4s ease-out forwards;
}
#flash-overlay.flash-cyan {
  background: rgba(0,212,255,0.15);
  opacity: 1;
  animation: flash-fade 0.4s ease-out forwards;
}

@keyframes flash-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  :root { --cube-size: 55px; }
  .cube, .cube-layer {
    width: 220px;
    height: 220px;
  }
  .cube-layer { gap: 10px; }
  .game-header {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
  }
  .game-header-left,
  .game-header-right {
    width: 100%;
    justify-content: center;
  }
  .score-bar { font-size: 0.7rem; gap: 0.6rem; }
  .overlay-card { padding: 1.2rem; }
}

@media (min-width: 900px) {
  :root { --cube-size: 85px; }
  .cube, .cube-layer {
    width: 340px;
    height: 340px;
  }
  .cube-layer { gap: 16px; }
}
  color: var(--green);
  text-shadow: 0 0 20px rgba(0,255,65,0.3);
  margin-bottom: 1.2rem;
}

.overlay-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: 1rem;
}

.overlay-text strong {
  color: var(--green);
}

.overlay-text em {
  color: var(--cyan);
  font-style: normal;
}

/* ===== RESULT OVERLAY ===== */
.result-overlay {
  position: fixed; inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  gap: 1rem;
}

.result-text {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: bold;
  text-align: center;
}
.result-win {
  color: var(--green);
  text-shadow: 0 0 30px rgba(0,255,65,0.5);
}
.result-lose {
  color: var(--pink);
  text-shadow: 0 0 30px rgba(255,0,110,0.5);
}
.result-draw {
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0,212,255,0.5);
}

.result-sub {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--dim);
  text-align: center;
  margin-bottom: 1rem;
}

/* ===== GLITCH ===== */
.glitch-active {
  animation: glitch 0.1s steps(2) 8;
}

@keyframes glitch {
  0%   { transform: translate(0); filter: none; }
  25%  { transform: translate(-4px, 2px); filter: hue-rotate(90deg); }
  50%  { transform: translate(4px, -2px); filter: hue-rotate(180deg); }
  75%  { transform: translate(-2px, -3px); filter: hue-rotate(270deg); }
  100% { transform: translate(0); filter: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .cube {
    width: 220px;
    height: 220px;
  }
  .cube-layer {
    width: 220px;
    height: 220px;
    gap: 6px;
  }
  .game-header {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
  }
  .game-header-left,
  .game-header-right {
    width: 100%;
    justify-content: center;
  }
  .score-bar {
    font-size: 0.7rem;
    gap: 0.6rem;
  }
  .overlay-card {
    padding: 1.2rem;
  }
}

@media (min-width: 900px) {
  .cube {
    width: 360px;
    height: 360px;
  }
  .cube-layer {
    width: 360px;
    height: 360px;
    gap: 10px;
  }
}