/* ── PÁGINA DEL JUEGO NEKO NINJA ── */
.game-page {
  background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 55%, var(--pink) 100%);
  min-height: calc(100vh - 72px);
  padding: 2.5rem 1.25rem 4rem;
}

.game-wrap {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.game-head { margin-bottom: 1.5rem; }

.game-badge {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.game-head h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.1;
}

.game-head h1 em { font-style: italic; color: var(--coral); }

.game-head p {
  color: var(--light-text);
  max-width: 540px;
  margin: 0.75rem auto 0;
  font-size: 1rem;
}

/* Marco del juego */
.game-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 420;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  border: 3px solid var(--white);
  background: var(--sky, #ffe3e0);
  margin: 0 auto;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
}

/* HUD */
.game-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  pointer-events: none;
  font-family: 'Jost', sans-serif;
}

.hud-pill {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(4px);
  color: var(--dark);
  border-radius: 50px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
}

.hud-pill b { font-size: 1rem; margin-left: 0.3rem; }

.hud-spacer { flex: 1; }

.hud-mute {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.hud-mute:hover { transform: scale(1.08); }

/* Overlay (inicio / game over) */
.game-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: rgba(61, 44, 44, 0.45);
  backdrop-filter: blur(3px);
  text-align: center;
}

.game-overlay.show { display: flex; }

.game-overlay .ov-emoji { font-size: 3rem; line-height: 1; }

.game-overlay h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 400;
  color: #fff;
}

.game-overlay .ov-sub {
  color: rgba(255, 255, 255, 0.9);
  max-width: 380px;
  font-size: 0.95rem;
}

.game-overlay .ov-score,
.game-overlay .ov-best { color: #fff; font-size: 1.05rem; }
.game-overlay .ov-score b { color: var(--gold); font-size: 1.5rem; }
.game-overlay .ov-best b { color: var(--pink); }

.game-overlay .ov-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.game-overlay .btn { margin-top: 0.4rem; }

/* Controles / ayuda bajo el juego */
.game-controls {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  color: var(--light-text);
  font-size: 0.85rem;
}

.game-controls span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.kbd {
  background: var(--white);
  border: 1.5px solid var(--pink);
  border-bottom-width: 3px;
  border-radius: 7px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  color: var(--dark);
  font-weight: 500;
}

.game-cta {
  margin-top: 2.25rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .game-page { padding: 1.5rem 0.75rem 3rem; }
  .game-controls { gap: 0.85rem; font-size: 0.78rem; }
}

/* ── EMBED del juego pixel-art (iframe) ── */
.embed-wrap { max-width: 1040px; }

.embed-frame {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-hover);
  background: #000;
}

.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.embed-note {
  text-align: center;
  color: var(--light-text);
  font-size: 0.85rem;
  margin-top: 1rem;
}