/* Estilos arcade por jogo — camadas, brilho e profundidade */

.gx-streak {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--ink-soft);
  transition: color 0.2s ease, transform 0.2s ease;
}

.gx-streak.is-hot {
  color: #e67700;
  transform: scale(1.02);
}

/* Memória */
.game-view[data-game-id="memoria"] .mem-card {
  box-shadow:
    0 5px 0 var(--ink),
    0 8px 16px rgb(43 42 74 / 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.game-view[data-game-id="memoria"] .mem-card.is-up {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 3px 0 var(--ink), 0 10px 20px rgb(77 171 247 / 0.25);
}

.game-view[data-game-id="memoria"] .mem-card.is-matched {
  box-shadow: 0 2px 0 #0d7a45, 0 0 0 3px rgb(81 207 102 / 0.45);
}

/* Animais */
.game-view[data-game-id="animais"] .animal-hero {
  padding: 12px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 30%, #fff9db 0%, #ffe14a 45%, transparent 70%);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  animation: gx-hero-float 2.4s ease-in-out infinite;
}

@keyframes gx-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.game-view[data-game-id="animais"] .animal-choice.is-right {
  background: linear-gradient(180deg, #b2f2bb 0%, #51cf66 100%);
}

/* Matemática */
.game-view[data-game-id="matematica"] .math-board {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(165deg, #fff 0%, #f8f9fa 55%, #e7f5ff 100%);
  box-shadow: var(--shadow);
}

.game-view[data-game-id="matematica"] .answer.is-right {
  background: linear-gradient(180deg, #51cf66, #37b24d);
  color: #fff;
}

/* Pescaria */
.game-view[data-game-id="pescaria"] .pond {
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(180deg, #4dabf7 0%, #228be6 55%, #1864ab 100%);
  box-shadow:
    inset 0 12px 24px rgb(255 255 255 / 0.15),
    0 6px 0 var(--ink);
}

.game-view[data-game-id="pescaria"] .fish:not([disabled]) {
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / 0.2));
  transition: transform 0.12s ease;
}

.game-view[data-game-id="pescaria"] .fish:active {
  transform: scale(1.12);
}

/* Caça ao tesouro */
.game-view[data-game-id="tesouro"] .island-map {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #8ecbff 0%, #ffe14a 42%, #69db7c 42%, #37b24d 100%);
  box-shadow: var(--shadow);
}

.game-view[data-game-id="tesouro"] .spot.is-open[data-treasure="1"] {
  animation: gx-treasure-pop 0.45s ease;
}

@keyframes gx-treasure-pop {
  0% {
    transform: scale(0.9);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

/* Tiro ao alvo */
.game-view[data-game-id="alvo"] .target-wrap {
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe14a 35%, #ff6b6b 70%, #c92a2a 100%);
  box-shadow: var(--shadow);
}

/* Ligar */
.game-view[data-game-id="ligar"] .match-board {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, #f1f3f5 100%);
  box-shadow: var(--shadow);
}

.game-view[data-game-id="ligar"] .match-item.is-locked {
  background: linear-gradient(180deg, #d3f9d8, #8ce99a);
}

.game-view[data-game-id="ligar"] .wires line {
  stroke: #ff922b;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.15));
}

/* Corrida — arena principal em corrida.css */

/* Quebra-cabeça */
.game-view[data-game-id="quebra"] .puzzle-board {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
}

.game-view[data-game-id="quebra"] .piece.is-selected {
  outline: 3px solid #4dabf7;
  transform: scale(1.03);
}

/* Colorir / blocos */
.game-view[data-game-id="colorir"] .color-canvas,
.game-view[data-game-id="blocos"] .block-stack {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Inglês */
.game-view[data-game-id="ingles"] .english-card {
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(165deg, #fff 0%, #e7f5ff 100%);
  box-shadow: var(--shadow);
}

.game-view[data-game-id="tetris"] .tetris-frame {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  .game-view[data-game-id="animais"] .animal-hero,
  .game-view[data-game-id="tesouro"] .spot.is-open[data-treasure="1"] {
    animation: none !important;
  }
}