:root {
  --carta-fondo: #fff;
  --carta-borde: #999;
  --carta-color: #000;
  --mesa-bg: #0a5c36;
  --btn-canto-bg: #f0c040;
  --btn-canto-color: #000;
  --btn-peligro-bg: #c0392b;
  --btn-peligro-color: #fff;
  --btn-quiero-bg: #27ae60;
  --btn-no-quiero-bg: #e74c3c;
  --notif-canto-bg: #f39c12;
  --notif-set-bg: #2980b9;
  --notif-victoria-bg: #27ae60;
  --notif-derrota-bg: #c0392b;
  --notif-error-bg: #e74c3c;

  --palo-espadas: #1a1a40;
  --palo-bastos:  #1a3e1a;
  --palo-oros:    #8b6914;
  --palo-copas:   #8b1a1a;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: var(--mesa-bg);
  color: white;
  padding: 0;
  margin: 0;
  height: 100dvh;
  overflow: hidden;
}

input {
  padding: 10px;
  margin: 5px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
}

button {
  padding: clamp(6px, 1vmin, 12px) clamp(12px, 2vmin, 24px);
  font-size: clamp(14px, 2.2vmin, 18px);
  border-radius: 5px;
  cursor: pointer;
  background: var(--btn-canto-bg);
  border: none;
  color: var(--btn-canto-color);
  font-weight: bold;
  margin: clamp(1px, 0.3vmin, 4px);
}

button:hover { filter: brightness(1.1); }
button:active { filter: brightness(0.9); }

#pantalla-inicio h1 { font-size: 2.5em; margin-bottom: 30px; }

#sala-espera {
  background: rgba(0,0,0,0.3);
  padding: 20px;
  margin: 20px auto;
  max-width: 400px;
  border-radius: 10px;
}

/* --- PANTALLA JUEGO --- */

#pantalla-juego {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: clamp(0.5vmin, 0.8rem, 1.5vmin);
  box-sizing: border-box;
  max-width: 100%;
}

#marcador {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: clamp(4px, 0.8vmin, 10px) clamp(8px, 1.5vmin, 20px);
  margin-bottom: clamp(2px, 0.4vmin, 6px);
  flex-shrink: 0;
}

.score-box {
  display: flex;
  flex-direction: column;
}

.score-label { font-size: clamp(0.6em, 1vmin, 0.75em); opacity: 0.8; }
.score-value { font-size: clamp(1.2em, 2.5vmin, 1.8em); font-weight: bold; }
.score-sep { font-size: clamp(0.6em, 1.2vmin, 0.85em); opacity: 0.6; }

#info-oponente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vmin, 12px);
  margin-bottom: clamp(1px, 0.3vmin, 4px);
  flex-shrink: 0;
}

#oponente-nombre { font-weight: bold; font-size: clamp(0.8em, 1.5vmin, 1em); }

#oponente-cartas {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

/* Opponent face-down cards overlap like a hand */
#oponente-cartas .carta.dorso {
  margin-right: calc(var(--dorso-w) * -0.55);
  position: relative;
  z-index: 1;
}
#oponente-cartas .carta.dorso:last-child { margin-right: 0; }
#oponente-cartas .carta.dorso:nth-child(1) { z-index: 1; }
#oponente-cartas .carta.dorso:nth-child(2) { z-index: 2; }
#oponente-cartas .carta.dorso:nth-child(3) { z-index: 3; }

#info-partida {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.5vmin, 20px);
  font-size: clamp(0.7em, 1.4vmin, 0.9em);
  opacity: 0.9;
  margin-bottom: clamp(1px, 0.3vmin, 4px);
  flex-shrink: 0;
}

#canto-info { color: var(--notif-canto-bg); font-weight: bold; }

#mesa {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 4vmin, 40px);
  margin: clamp(0.5vmin, 0.8rem, 1.5vmin) 0;
  min-height: clamp(100px, 22vmin, 160px);
  flex: 1 1 auto;
}

#turno-indicador {
  font-size: clamp(0.8em, 1.5vmin, 1em);
  padding: clamp(3px, 0.6vmin, 8px);
  border-radius: 6px;
  margin-bottom: clamp(2px, 0.4vmin, 6px);
  flex-shrink: 0;
}

.turno-propio { background: rgba(39, 174, 96, 0.4); }
.turno-oponente { background: rgba(192, 57, 43, 0.3); }

/* --- CARTAS --- */

#mano-jugador {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin: clamp(1vmin, 1.5rem, 3vmin) 0;
  min-height: clamp(160px, 30vmin, 280px);
  padding: clamp(24px, 4vmin, 40px) clamp(5px, 1vmin, 10px) clamp(15px, 2vmin, 25px);
  flex-shrink: 0;
}

/* Hand cards: bigger, overlapping fan with rotations */
#mano-jugador .carta {
  --card-w: clamp(75px, 22vmin, 115px);
  width: var(--card-w);
  height: calc(var(--card-w) * 1.447);
  margin-right: calc(var(--card-w) * -0.5);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, z-index 0s;
  cursor: pointer;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.4);
}
#mano-jugador .carta:last-child { margin-right: 0; }

/* Fan rotation: left tilted left, right tilted right */
#mano-jugador .carta:nth-child(1):not(:only-child) { transform: rotate(-7deg); z-index: 1; }
#mano-jugador .carta:nth-child(2):not(:nth-last-child(1)) { transform: rotate(0deg); z-index: 2; }
#mano-jugador .carta:nth-child(3) { transform: rotate(7deg); z-index: 3; }

/* Hover: lift card and show full face */
#mano-jugador .carta:hover {
  transform: translateY(clamp(-40px, -6vmin, -30px)) rotate(0deg) scale(1.04) !important;
  z-index: 100 !important;
  box-shadow: 3px 12px 28px rgba(0,0,0,0.65);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, z-index 0.04s;
}

/* Base card shared styles */
.carta {
  background: var(--carta-fondo);
  border: clamp(1px, 0.4vmin, 2px) solid var(--carta-borde);
  border-radius: clamp(4px, 1vmin, 8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  color: var(--carta-color);
  font-weight: bold;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.carta.jugada {
  --jugada-w: clamp(55px, 16vmin, 80px);
  width: var(--jugada-w);
  height: calc(var(--jugada-w) * 1.447);
  cursor: default;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-shadow: clamp(1px, 0.3vmin, 2px) clamp(2px, 0.5vmin, 4px) clamp(2px, 0.5vmin, 8px) rgba(0,0,0,0.3);
}

.carta.jugada:hover { transform: none; box-shadow: clamp(1px, 0.3vmin, 2px) clamp(2px, 0.5vmin, 4px) clamp(2px, 0.5vmin, 8px) rgba(0,0,0,0.3); }

.carta.vacia {
  width: clamp(50px, 14vmin, 80px);
  height: calc(clamp(50px, 14vmin, 80px) * 1.447);
  background: transparent;
  border: 2px dashed rgba(255,255,255,0.25);
  box-shadow: none;
  flex-shrink: 0;
}

.carta.dorso {
  --dorso-w: clamp(40px, 13vmin, 65px);
  width: var(--dorso-w);
  height: calc(var(--dorso-w) * 1.447);
  flex-shrink: 0;
  background: #c0392b;
  border: clamp(1px, 0.3vmin, 2px) solid #922b21;
  border-radius: clamp(4px, 1vmin, 8px);
  color: white;
  font-size: clamp(1em, 2vmin, 1.4em);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carta.dorso:hover { transform: none; box-shadow: 1px 2px 4px rgba(0,0,0,0.3); }

/* Esquinas (índices) */
.carta-esquina {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: 3px 5px;
  z-index: 1;
}

.sup-izq { align-self: flex-start; }
.inf-der { align-self: flex-end; transform: rotate(180deg); }

.carta-valor { font-size: 1.1em; }
.carta-palo { font-size: 1em; }

/* Palo central grande (solo en mano) */
.carta-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  z-index: 0;
}

.carta-palo-grande { font-size: 3.8em; }

/* Jugadas no llevan centro grande */
.carta.jugada .carta-centro { display: none; }

/* --- COLORES POR PALO --- */

.carta.palo-espadas {
  border-left: 4px solid var(--palo-espadas);
}

.carta.palo-espadas .carta-valor,
.carta.palo-espadas .carta-palo,
.carta.palo-espadas .carta-palo-grande { color: var(--palo-espadas); }

.carta.palo-bastos {
  border-left: 4px solid var(--palo-bastos);
}

.carta.palo-bastos .carta-valor,
.carta.palo-bastos .carta-palo,
.carta.palo-bastos .carta-palo-grande { color: var(--palo-bastos); }

.carta.palo-oros {
  border-left: 4px solid var(--palo-oros);
  background: linear-gradient(135deg, #fffef5 0%, #fff 40%, #fffde6 100%);
}

.carta.palo-oros .carta-valor,
.carta.palo-oros .carta-palo,
.carta.palo-oros .carta-palo-grande { color: var(--palo-oros); }

.carta.palo-copas {
  border-left: 4px solid var(--palo-copas);
}

.carta.palo-copas .carta-valor,
.carta.palo-copas .carta-palo,
.carta.palo-copas .carta-palo-grande { color: var(--palo-copas); }

/* --- BOTONES --- */

#botones-accion, #botones-respuesta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(3px, 0.6vmin, 8px);
  margin: clamp(2px, 0.4vmin, 6px) 0;
  flex-shrink: 0;
}

.btn-canto { background: var(--btn-canto-bg); color: var(--btn-canto-color); }
.btn-peligro { background: var(--btn-peligro-bg); color: var(--btn-peligro-color); }
.btn-quiero { background: var(--btn-quiero-bg); color: #fff; font-size: 1.2em; padding: 12px 28px; }
.btn-no-quiero { background: var(--btn-no-quiero-bg); color: #fff; font-size: 1.2em; padding: 12px 28px; }

/* --- NOTIFICACIONES --- */

.notificacion {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1em;
  z-index: 100;
  animation: fadeInOut 4s ease;
  color: #fff;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.notificacion.canto { background: var(--notif-canto-bg); }
.notificacion.set { background: var(--notif-set-bg); }
.notificacion.victoria { background: var(--notif-victoria-bg); font-size: 1.5em; }
.notificacion.derrota { background: var(--notif-derrota-bg); font-size: 1.5em; }
.notificacion.error { background: var(--notif-error-bg); }

/* --- SELECTOR DE TEMA --- */

#selector-tema {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 200;
  display: flex;
  gap: 4px;
}

.btn-tema {
  padding: 6px 12px;
  font-size: 0.7em;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-weight: normal;
  letter-spacing: 0.3px;
}

.btn-tema.activo {
  background: var(--btn-canto-bg);
  color: var(--btn-canto-color);
  border-color: transparent;
}

.btn-tema:hover { background: rgba(255,255,255,0.2); }
.btn-tema.activo:hover { background: var(--btn-canto-bg); filter: brightness(1.1); }

/* --- LOG --- */

#log-partida {
  margin-top: clamp(4px, 0.8vmin, 10px);
  max-height: clamp(60px, 12vmin, 120px);
  overflow-y: auto;
  font-size: clamp(0.6em, 1.2vmin, 0.8em);
  opacity: 0.7;
  text-align: left;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: clamp(3px, 0.5vmin, 8px) clamp(5px, 1vmin, 12px);
  flex-shrink: 0;
}

#log-partida p {
  margin: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 2px;
}

/* --- USER NAV --- */

#user-nav {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8em;
}

#user-name-display {
  color: #fff;
  font-weight: bold;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.75em;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-weight: normal;
}

.btn-small:hover { background: rgba(255,255,255,0.25); }

/* --- GAME OVER MODAL --- */

#modal-gameover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.4s ease;
}

.gameover-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gameover-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vmin, 24px);
  padding: clamp(24px, 5vmin, 48px);
  text-align: center;
  animation: gameoverScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gameover-status {
  font-size: clamp(3em, 8vmin, 6em);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: gameoverPulse 2s ease-in-out infinite;
  text-shadow: 0 0 40px currentColor, 0 0 80px currentColor;
}

.gameover-status.win {
  color: #27ae60;
}

.gameover-status.lose {
  color: #e74c3c;
}

.gameover-title {
  font-size: clamp(1em, 2.5vmin, 1.5em);
  color: rgba(255, 255, 255, 0.7);
}

.gameover-players {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vmin, 32px);
}

.gameover-player {
  font-size: clamp(1.2em, 3vmin, 1.8em);
  font-weight: 700;
}

.gameover-player.winner {
  color: #27ae60;
}

.gameover-player.loser {
  color: rgba(255, 255, 255, 0.5);
}

.gameover-vs {
  color: rgba(255, 255, 255, 0.3);
  font-size: clamp(0.8em, 1.5vmin, 1em);
}

.gameover-scores {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vmin, 16px);
  font-size: clamp(2em, 5vmin, 3.5em);
  font-weight: 900;
}

.gameover-scores span:first-child {
  color: #27ae60;
}

.gameover-score-sep {
  color: rgba(255, 255, 255, 0.3);
}

.gameover-scores span:last-child {
  color: #e74c3c;
}

.gameover-btn {
  margin-top: clamp(12px, 2vmin, 20px);
  padding: clamp(12px, 2vmin, 18px) clamp(32px, 6vmin, 56px);
  font-size: clamp(1em, 2vmin, 1.2em);
  font-weight: 700;
  color: #fff;
  background: var(--btn-canto-bg);
  color: var(--btn-canto-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.gameover-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.gameover-btn:active {
  transform: scale(0.98);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gameoverScaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gameoverPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

/* --- MODAL REGISTRO --- */

#modal-registro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}

.registro-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.registro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vmin, 20px);
  padding: clamp(24px, 4vmin, 40px);
  max-width: 400px;
  width: 90%;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 64px rgba(0, 0, 0, 0.6);
  animation: gameoverScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.registro-content h3 {
  margin: 0;
  font-size: clamp(1.1em, 2.5vmin, 1.4em);
  font-weight: 700;
  color: #fff;
}

.registro-content p {
  font-size: clamp(0.85em, 1.8vmin, 1em);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.5;
}

.registro-content .btn-small {
  margin-top: 4px;
  padding: 8px 24px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.registro-content .btn-small:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

#google-register-container {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

/* --- MODAL PERFIL --- */

#modal-perfil {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}

.perfil-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vmin, 16px);
  padding: clamp(24px, 4vmin, 40px);
  max-width: 400px;
  width: 90%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 64px rgba(0, 0, 0, 0.6);
  animation: gameoverScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.perfil-content h3 {
  margin: 0;
  font-size: clamp(1.1em, 2.5vmin, 1.4em);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.perfil-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perfil-field label {
  font-size: 0.8em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perfil-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1em;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.perfil-field input:focus {
  outline: none;
  border-color: var(--btn-canto-bg, #f0c040);
  background: rgba(255, 255, 255, 0.12);
}

.perfil-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.perfil-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

.perfil-actions .btn-small {
  padding: 8px 24px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.perfil-actions .btn-small:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

.perfil-msg {
  text-align: center;
  font-size: 0.85em;
  padding: 8px;
  border-radius: 6px;
}

.perfil-msg.success {
  background: rgba(39, 174, 96, 0.2);
  color: #27ae60;
}

.perfil-msg.error {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

/* --- ENV BADGE --- */

.env-badge {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  opacity: 0.85;
  pointer-events: none;
}

.env-badge.env-dev { background: #1a6bb5; }
.env-badge.env-stg { background: #b57c1a; }

/* --- GOOGLE SIGN-IN --- */

#google-signin-container {
  display: flex;
  justify-content: center;
}

/* --- INSTALL BUTTON --- */

#btn-instalar {
  position: fixed;
  bottom: clamp(16px, 3vmin, 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 1.5vmin, 14px) clamp(20px, 3vmin, 28px);
  font-size: clamp(0.85em, 1.8vmin, 1em);
  font-weight: 700;
  background: var(--btn-canto-bg);
  color: var(--btn-canto-color);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  animation: installPulse 2.5s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#btn-instalar:hover {
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 6px 32px rgba(0,0,0,0.6);
}

#btn-instalar:active {
  transform: translateX(-50%) scale(0.96);
}

@keyframes installPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 4px 36px rgba(0,0,0,0.65), 0 0 0 4px rgba(240, 192, 64, 0.2); }
}

/* --- FOOTER --- */

#app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  padding: 3px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

#version-footer {
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.3);
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* --- SW UPDATE BANNER --- */

#sw-update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10, 92, 54, 0.97);
  border-top: 2px solid var(--btn-canto-bg, #f0c040);
  color: #fff;
  font-size: 0.85em;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  animation: bannerSlideUp 0.35s ease;
}

#sw-update-banner .update-text {
  font-weight: 600;
}

.btn-update {
  padding: 6px 20px;
  font-size: 0.9em;
  font-weight: 700;
  background: var(--btn-canto-bg, #f0c040);
  color: var(--btn-canto-color, #000);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-update:hover {
  transform: scale(1.06);
}

.btn-update:active {
  transform: scale(0.97);
}

.btn-update-dismiss {
  padding: 2px 8px;
  font-size: 1.2em;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  line-height: 1;
}

.btn-update-dismiss:hover {
  color: rgba(255, 255, 255, 0.7);
}

@keyframes bannerSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}


@media (display-mode: standalone) {
  #btn-instalar {
    display: none !important;
  }
}

/* --- GOOGLE READ-ONLY USERNAME --- */

#nombre-jugador.readonly-google {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  cursor: default;
  user-select: none;
}