/* Guerra Espacial — arena arcade */

.game-view[data-game-id="espaco"] .space-arena {
  position: relative;
  overflow: hidden;
  min-height: min(56vh, 380px);
  border: 4px solid #748ffc;
  border-radius: 20px;
  background: #0d1024;
  box-shadow:
    0 8px 0 var(--ink),
    inset 0 0 60px rgb(92 124 250 / 0.25);
  transition: filter 0.12s ease;
}

.game-view[data-game-id="espaco"] .space-arena.is-rush {
  filter: saturate(1.35) contrast(1.05);
  animation: space-rush-pulse 0.6s ease-in-out infinite alternate;
}

.game-view[data-game-id="espaco"] .space-arena.is-rush .space-parallax--mid {
  animation-duration: 18s;
}

@keyframes space-rush-pulse {
  from {
    box-shadow: 0 8px 0 var(--ink), inset 0 0 40px rgb(255 146 43 / 0.2);
  }

  to {
    box-shadow: 0 8px 0 var(--ink), inset 0 0 70px rgb(255 107 107 / 0.35);
  }
}

.game-view[data-game-id="espaco"] .space-arena.is-flash-ok {
  filter: brightness(1.25);
}

.game-view[data-game-id="espaco"] .space-arena.is-flash-hit {
  filter: brightness(0.85) hue-rotate(-12deg);
}

.game-view[data-game-id="espaco"] .space-arena.is-shake {
  animation: space-shake 0.35s ease;
}

@keyframes space-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-4px, 2px);
  }

  50% {
    transform: translate(4px, -2px);
  }

  75% {
    transform: translate(-2px, -3px);
  }
}

.game-view[data-game-id="espaco"] .space-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.game-view[data-game-id="espaco"] .space-parallax {
  position: absolute;
  inset: -20% 0;
  pointer-events: none;
  opacity: 0.55;
}

.game-view[data-game-id="espaco"] .space-parallax--far {
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, #fff 99%, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff 99%, transparent);
  background-size: 100% 100%;
  animation: space-drift-far 48s linear infinite;
}

.game-view[data-game-id="espaco"] .space-parallax--mid {
  opacity: 0.75;
  background-image:
    radial-gradient(2px 2px at 25% 35%, #c5f6fa 99%, transparent),
    radial-gradient(2px 2px at 70% 60%, #fff 99%, transparent);
  animation: space-drift-mid 32s linear infinite;
}

@keyframes space-drift-far {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(12%);
  }
}

@keyframes space-drift-mid {
  from {
    transform: translateY(-5%);
  }

  to {
    transform: translateY(18%);
  }
}

.game-view[data-game-id="espaco"] .space-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgb(151 117 250 / 0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 70%, rgb(255 107 107 / 0.2), transparent 65%),
    linear-gradient(180deg, #0d1024 0%, #1a1f4a 45%, #12152e 100%);
  z-index: 0;
}

.game-view[data-game-id="espaco"] .space-lanes-glow {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index: 1;
  pointer-events: none;
}

.game-view[data-game-id="espaco"] .space-lanes-glow span {
  border-right: 1px solid rgb(116 140 252 / 0.2);
  background: linear-gradient(180deg, transparent, rgb(116 140 252 / 0.06), transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.game-view[data-game-id="espaco"] .space-lanes-glow span.is-active {
  background: linear-gradient(180deg, rgb(255 146 43 / 0.08), rgb(255 224 74 / 0.22), rgb(255 146 43 / 0.1));
  box-shadow: inset 0 0 24px rgb(255 224 74 / 0.25);
}

.game-view[data-game-id="espaco"] .space-lanes-glow span:last-child {
  border-right: none;
}

.game-view[data-game-id="espaco"] .space-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  align-items: center;
}

.game-view[data-game-id="espaco"] .space-hud .race-stat {
  background: rgb(13 16 36 / 0.85);
  color: #fff;
  border: 2px solid #748ffc;
  border-radius: 14px;
  padding: 6px 12px;
}

.game-view[data-game-id="espaco"] .space-shield-badge {
  font-size: 0.9rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-view[data-game-id="espaco"] .space-shield-badge.is-on {
  opacity: 1;
  transform: scale(1);
}

.game-view[data-game-id="espaco"] .space-ship {
  z-index: 3;
  filter: drop-shadow(0 0 12px rgb(116 140 252 / 0.65));
  transition:
    left 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    transform 0.08s ease;
}

.game-view[data-game-id="espaco"] .space-ship.is-thrust {
  transform: translateY(-2px);
}

.game-view[data-game-id="espaco"] .space-ship.has-shield::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgb(116 140 252 / 0.85);
  box-shadow: 0 0 16px rgb(116 140 252 / 0.6);
  animation: space-shield-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes space-shield-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.game-view[data-game-id="espaco"] .space-diff-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--font-display);
  background: linear-gradient(180deg, #ff922b, #f76707);
  color: #fff;
  border: 2px solid var(--ink);
  vertical-align: middle;
}

.game-view[data-game-id="espaco"] .space-meteor--boulder svg {
  width: 56px;
  height: 56px;
  filter: grayscale(0.2);
}

.game-view[data-game-id="espaco"] .space-meteor--ice svg {
  filter: hue-rotate(180deg) brightness(1.1);
}

.game-view[data-game-id="espaco"] .space-meteor--streak svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 10px #ff6b6b);
}

.game-view[data-game-id="espaco"] .space-meteor--debris svg {
  width: 42px;
  height: 42px;
  opacity: 0.95;
}

.game-view[data-game-id="espaco"] .space-shield-btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: auto;
  min-width: 7.5rem;
  max-width: 11rem;
  min-height: 42px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(180deg, #74c0fc, #339af0);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  touch-action: manipulation;
}

.game-view[data-game-id="espaco"] .space-shield-btn.is-active {
  background: linear-gradient(180deg, #a5d8ff, #4dabf7);
  animation: space-shield-pulse-btn 0.7s ease-in-out infinite alternate;
}

.game-view[data-game-id="espaco"] .space-shield-btn.is-cooldown {
  opacity: 0.55;
  background: linear-gradient(180deg, #dee2e6, #adb5bd);
}

@keyframes space-shield-pulse-btn {
  from {
    box-shadow: 0 3px 0 var(--ink), 0 0 10px rgb(77 171 247 / 0.45);
  }

  to {
    box-shadow: 0 3px 0 var(--ink), 0 0 16px rgb(116 140 252 / 0.75);
  }
}

.game-view[data-game-id="espaco"] .space-shield-badge.is-on,
.game-view[data-game-id="espaco"] [data-shield-state].is-on {
  color: #74c0fc;
  font-weight: 800;
}

.game-view[data-game-id="espaco"] .space-meteor--comet svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 8px #ff922b);
}

.game-view[data-game-id="espaco"] .space-meteor--planet svg {
  width: 58px;
  height: 58px;
  margin-left: -3px;
}

.game-view[data-game-id="espaco"] .space-meteor.is-hit {
  animation: space-meteor-hit 0.2s ease;
}

@keyframes space-meteor-hit {
  50% {
    filter: brightness(1.4);
    transform: translateY(-50%) scale(1.08);
  }
}

.game-view[data-game-id="espaco"] .space-bullet {
  background: linear-gradient(180deg, #fff3bf, #ff922b 55%, #f76707);
  box-shadow:
    0 0 10px #ffe14a,
    0 0 18px rgb(255 146 43 / 0.5);
  animation: space-laser-pulse 0.12s ease infinite alternate;
}

@keyframes space-laser-pulse {
  from {
    opacity: 0.92;
  }

  to {
    opacity: 1;
  }
}

.game-view[data-game-id="espaco"] .space-pickup {
  position: absolute;
  left: calc((var(--lane) * 2 + 1) * 100% / 6);
  top: var(--y);
  width: 36px;
  margin-left: -18px;
  transform: translateY(-50%);
  font-size: 1.6rem;
  z-index: 2;
  animation: space-pickup-bob 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #ffe14a);
}

@keyframes space-pickup-bob {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-58%) scale(1.08);
  }
}

.game-view[data-game-id="espaco"] .space-fire.is-cooldown {
  opacity: 0.65;
}

.game-view[data-game-id="espaco"] .space-controls {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 6px 10px;
  align-items: stretch;
}

.game-view[data-game-id="espaco"] .space-controls [data-steer="left"] {
  grid-column: 1;
  grid-row: 1;
}

.game-view[data-game-id="espaco"] .space-controls [data-steer="fire"] {
  grid-column: 2;
  grid-row: 1;
}

.game-view[data-game-id="espaco"] .space-controls [data-steer="right"] {
  grid-column: 3;
  grid-row: 1;
}

.game-view[data-game-id="espaco"] .space-steer {
  background: linear-gradient(180deg, #fff3bf, #ffe14a);
  border: 3px solid var(--ink);
  font-size: 1.85rem;
  min-height: 76px;
  touch-action: manipulation;
}

.game-view[data-game-id="espaco"] .space-steer:active {
  transform: scale(0.96);
  background: linear-gradient(180deg, #ffe14a, #ff922b);
}

.game-view[data-game-id="espaco"] .space-fire {
  background: linear-gradient(180deg, #ff6b6b, #e03131);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  min-height: 76px;
  touch-action: manipulation;
  animation: space-fire-glow 0.8s ease-in-out infinite alternate;
}

.game-view[data-game-id="espaco"] .space-fire:active:not(.is-cooldown) {
  transform: scale(0.97);
}

@keyframes space-fire-glow {
  from {
    box-shadow: 0 5px 0 var(--ink), 0 0 12px rgb(255 107 107 / 0.4);
  }

  to {
    box-shadow: 0 5px 0 var(--ink), 0 0 22px rgb(255 224 74 / 0.65);
  }
}

.game-view[data-game-id="espaco"] .space-touch {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 5;
  pointer-events: none;
}

.game-view[data-game-id="espaco"] .space-touch-btn {
  pointer-events: auto;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.game-view[data-game-id="espaco"] .space-touch-btn:active {
  background: linear-gradient(90deg, rgb(255 224 74 / 0.12), transparent);
}

.game-view[data-game-id="espaco"] .space-touch-btn[data-steer="right"]:active {
  background: linear-gradient(270deg, rgb(255 224 74 / 0.12), transparent);
}

.game-view[data-game-id="espaco"] .space-fx {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .game-view[data-game-id="espaco"] .space-parallax--far,
  .game-view[data-game-id="espaco"] .space-parallax--mid,
  .game-view[data-game-id="espaco"] .space-ship.has-shield::after,
  .game-view[data-game-id="espaco"] .space-bullet,
  .game-view[data-game-id="espaco"] .space-pickup {
    animation: none !important;
  }

  .game-view[data-game-id="espaco"] .space-arena.is-shake {
    animation: none !important;
  }
}