/* Menú de Dúo — estética SCUMM / Day of the Tentacle, mobile-first.
   Logo pixel con rebote, botones de juego tipo "verbo" con bisel 3D, idle
   sutil desfasado, press-down al tocar, y resalte del juego que "te toca".
   Respeta prefers-reduced-motion. */

/* ---- Logo en el nav (arriba-izquierda) ---- */
.brand-logo { display: inline-flex; align-items: center; padding: 0; }
.brand-logo img {
  height: 34px; width: auto; image-rendering: pixelated;
  animation: logo-bounce 0.9s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes logo-bounce {
  0% { transform: translateY(-130%) scale(.7); opacity: 0; }
  60% { transform: translateY(8%) scale(1.04); opacity: 1; }
  80% { transform: translateY(-4%); }
  100% { transform: translateY(0) scale(1); }
}

/* ---- Búho/estrella volando por TODO el ancho del nav (detrás del contenido) ---- */
.navbar { position: relative; }
.navbar > .container { position: relative; z-index: 1; }
.nav-critters {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 0; image-rendering: pixelated; opacity: .9; pointer-events: none;
}

/* ---- Rejilla de juegos (inventario SCUMM) ---- */
.game-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 520px; margin: 0 auto;
}

/* ---- Botón de juego estilo verbo SCUMM ---- */
.game-card {
  position: relative; text-align: center; cursor: pointer;
  padding: 18px 10px 16px; border-radius: 14px;
  border: 4px solid #2a1320; color: #fff !important;
  background: #6b4a8a;                       /* fallback; se sobreescribe por juego */
  box-shadow: 0 6px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.18);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  animation: card-bob 3.2s ease-in-out infinite;
  will-change: transform;
}
.game-card:hover { filter: brightness(1.08); }
.game-card:active {                          /* press-down marcado */
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.18);
  animation: none;
}
.game-card .game-icon { font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.game-card .game-icon-img { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.game-card .game-name {
  margin-top: 10px; font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px; line-height: 1.5; text-shadow: 0 2px 0 rgba(0,0,0,.55);
}
.game-card .game-sub { margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.85); }

/* idle "respira", desfasado por posición para que no vayan todos a la vez */
@keyframes card-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.game-card:nth-child(2n)   { animation-delay: .5s; }
.game-card:nth-child(3n)   { animation-delay: 1.1s; }
.game-card:nth-child(4n)   { animation-delay: 1.7s; }
.game-card:nth-child(5n)   { animation-delay: .8s; }

/* colores DOTT saturados por juego */
.game-card[data-key="letters"]     { background: #2f8fb3; }
.game-card[data-key="chess"]       { background: #7a4ab0; }
.game-card[data-key="jardin"]      { background: #3f9d54; }
.game-card[data-key="encadenados"] { background: #e0682b; }
.game-card[data-key="cooking"]     { background: #c8443a; }
.game-card[data-key="drawing"]     { background: #c0508f; }

/* el juego que "te toca" llama la atención (en DOTT el objeto interactivo vibra) */
.game-card.your-turn, .game-card.invited {
  border-color: #ffe27a;
  box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 0 0 3px #ffe27a, inset 0 2px 0 rgba(255,255,255,.18);
  animation: card-wiggle 1.4s ease-in-out infinite;
}
@keyframes card-wiggle {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3px) rotate(-1.5deg); }
  75% { transform: translateY(-3px) rotate(1.5deg); }
}

/* banderín SCUMM en vez de badge de Bootstrap */
.game-card .scumm-flag {
  position: absolute; top: -10px; right: -6px; z-index: 2;
  font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 7px;
  color: #2a1320; background: #ffe27a; border: 3px solid #2a1320;
  border-radius: 8px; padding: 5px 7px; box-shadow: 0 3px 0 rgba(0,0,0,.4);
  transform: rotate(6deg);
}

/* ---- Gate de audio (un toque obligatorio para arrancar el sonido) ---- */
.audio-gate {
  position: fixed; inset: 0; z-index: 3500; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #241141 0%, #0c0718 75%);
  transition: opacity .4s ease;
}
.audio-gate.done { opacity: 0; }   /* sigue bloqueando hasta que se elimina (sin fall-through) */
.audio-gate-card { text-align: center; }
.audio-gate-logo { width: 170px; height: auto; image-rendering: pixelated; display: block; margin: 0 auto 22px; }
.audio-gate-btn {
  display: inline-block; font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 13px; color: #2a1320; background: #e07010;
  border: 4px solid #fff5d6; border-radius: 14px; padding: 16px 22px;
  box-shadow: 0 6px 0 rgba(0,0,0,.5); animation: gate-pulse 1.1s ease-in-out infinite;
}
@keyframes gate-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .audio-gate-btn { animation: none; } }

/* ---- Login / signup estilo DOTT (sin nav, card centrado con logo) ---- */
.auth-wrap {
  min-height: 88vh; display: flex; align-items: center; justify-content: center;
  padding: 20px 14px;
}
.auth-card {
  width: 100%; max-width: 380px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #2a1545 0%, #160c28 75%);
  border: 5px solid #34180c; border-radius: 16px; padding: 26px 22px 22px;
  box-shadow: 0 12px 0 rgba(0,0,0,.45), 0 0 0 3px #5a2b8c inset;
}
.auth-logo { width: 150px; height: auto; image-rendering: pixelated; margin-bottom: 10px; }
.auth-title {
  font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 15px;
  color: #e9def7; margin: 0 0 20px; letter-spacing: 1px;
}
.auth-form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.auth-label { font-size: 12px; color: #b79fd6; margin-top: 8px; }
.auth-input {
  width: 100%; font-size: 16px; color: #fff; background: #0e0720;
  border: 3px solid #3a2a5a; border-radius: 10px; padding: 11px 12px; outline: none;
}
.auth-input:focus { border-color: #e07010; }
.auth-err { color: #ff8a8a; font-size: 11px; }
.auth-btn {
  margin-top: 18px; font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 13px !important; color: #2a1320 !important; background: #e07010 !important;
  border: 4px solid #fff5d6 !important; border-radius: 12px !important;
  padding: 14px 18px !important; box-shadow: 0 5px 0 rgba(0,0,0,.5) !important; cursor: pointer; width: 100%;
}
.auth-btn:active { transform: translateY(3px); }
.auth-alt { margin: 16px 0 0; font-size: 13px; color: #c9bce0; }
.auth-alt a { color: #ffe27a; }

/* botón "Salir del juego" (nav en modo juego) */
.btn-exit-game {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 9px; line-height: 1;
  color: #2a1320 !important; background: #e0682b; text-decoration: none;
  border: 3px solid #fff5d6; border-radius: 9px; padding: 7px 11px;
  box-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.btn-exit-game:active { transform: translateY(2px); }
/* En modo juego, el nav se convierte en una barra translúcida POR ENCIMA del
   juego (muchos juegos cubren el nav con un canvas a pantalla completa). Así el
   header (logo + búho/estrella dormidos + Salir del juego) se ve ordenado. */
body.game-mode .navbar {
  position: relative; z-index: 4000;
  background: rgba(12,7,24,.62); backdrop-filter: blur(2px);
  /* Barra compacta en juego: el canvas necesita la altura. */
  margin-bottom: 4px !important;          /* anula el mb-3 de Bootstrap */
  padding-top: 3px; padding-bottom: 3px;
  min-height: 0;
}
body.game-mode .navbar-brand { padding: 0; margin: 0; }
body.game-mode .navbar-brand img { height: 30px; width: auto; }
body.game-mode .nav-actions { gap: 6px !important; }
/* "Jugando con": en juego solo el ícono 👥 + el nombre, sin el texto largo. */
body.game-mode .duoswitch { padding: 3px 9px; font-size: 12px; gap: 5px; }
body.game-mode .duoswitch .ds-lbl { font-size: 0; }
body.game-mode .duoswitch .ds-lbl::before { content: '👥'; font-size: 13px; }
body.game-mode .duoswitch .ds-sel { min-height: 28px; padding: 3px 6px; font-size: 13px; }
body.game-mode .btn-exit-game { padding: 4px 9px; font-size: 12px; }

/* botón de música del menú (flotante, abajo-derecha) */
.music-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 1500;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font-size: 20px; line-height: 1; color: #fff;
  background: #2a1320; border: 4px solid #fff5d6; box-shadow: 0 4px 0 rgba(0,0,0,.5);
}
.music-toggle:active { transform: translateY(3px); }

/* botón "Su SLAM" en el dashboard (ver el slam de la pareja) */
.slam-peek {
  display: block; text-align: center; text-decoration: none;
  font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 11px;
  color: #2a1320 !important; background: #ffd23f; border: 3px solid #fff5d6;
  border-radius: 12px; padding: 12px; margin: 0 auto 18px; max-width: 520px;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.slam-peek:active { transform: translateY(3px); }

/* títulos del dashboard en fuente pixel (cortos) */
.menu-h { font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 13px; letter-spacing: 1px; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo img, .game-card, .game-card.your-turn, .game-card.invited { animation: none; }
}

/* ---- Selector "Jugando con" (A): dashboard + barra del juego ---- */
.duoswitch { display: inline-flex; align-items: center; gap: 8px; background: rgba(40,26,66,.7);
  border: 2px solid #6b3fa0; border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #e9def7; }
.duoswitch .ds-lbl { opacity: .85; }
.duoswitch .ds-sel { background: #160c28; color: #fff; border: 1px solid #3a2a5a; border-radius: 8px;
  padding: 5px 8px; font-size: 14px; font-weight: 700; min-height: 36px; }
.duoswitch .ds-one { color: #ffd23f; }
.nav-actions .duoswitch { padding: 4px 10px; font-size: 13px; }