/* Overrides premium para la pestaña Giochi y el mapa de niveles (14-nov).
   juegos.css es de otro sistema y no se toca: acá solo se pisa el look con más especificidad (#app ...) y se definen los keyframes/clases
   que juegos.js todavía usa del diseño anterior (flota, menea, .mision). */
@keyframes flota { 50% { transform: translateY(-6px); } }
@keyframes menea { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }

/* banner de compra (juegos.js bannerPago) */
.mision { margin-top: 22px; display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 24px; color: #fff; box-shadow: var(--sombra-alta);
  background: radial-gradient(420px 260px at 100% 0, rgba(255, 196, 0, .24), transparent 65%), linear-gradient(135deg, var(--ink), var(--ink3)); }
.mision .emoji { font-size: 40px; flex: none; }
.mision h4 { margin: 0 0 4px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sol); }
.mision p { margin: 0 0 14px; font-size: 16px; line-height: 1.3; color: rgba(255, 255, 255, .85); }
.mision .boton { width: auto; }

/* pestaña */
#app .jg-hero { border: 0; border-radius: 24px; min-height: 230px; box-shadow: var(--sombra-alta); margin: 8px 0 18px; }
#app .jg-hero-txt { padding: 80px 20px 20px; background: linear-gradient(180deg, transparent, rgba(14, 26, 51, .9) 62%); }
#app .jg-hero h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 6.6vw, 38px); letter-spacing: -.02em; line-height: 1.04; color: #fff; }
#app .jg-hero p { color: rgba(255, 255, 255, .8); font-size: 15px; max-width: 46ch; margin: 6px 0 12px; }
#app .jg-pill { background: rgba(255, 255, 255, .14); border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 600; padding: 6px 12px; font-size: 12.5px; }
#app .jg-vida { border-radius: 18px; background: var(--ink2); margin: 0 0 18px; }
#app .jg-vida > span { animation: none; font-size: 26px; }
#app .jg-vida strong { font-family: var(--display); font-weight: 600; }
#app .juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { #app .juegos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 960px) { #app .juegos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#app .jg-card { border: 0; border-radius: var(--r); box-shadow: 0 0 0 1px var(--linea), var(--sombra); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
#app .jg-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--linea), var(--sombra-alta); }
#app .jg-card-img { aspect-ratio: 5 / 4; border-bottom: 0; }
#app .jg-card-emoji { left: 12px; bottom: -20px; width: 42px; height: 42px; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 6px 14px -4px rgba(14, 26, 51, .5); }
#app .jg-card-txt { padding: 28px 14px 14px; }
#app .jg-card-txt strong { font-family: var(--display); font-weight: 650; font-size: 16.5px; letter-spacing: -.01em; }
#app .jg-card-txt small { font-size: 13px; }
#app .jg-prog { height: 6px; background: var(--carton); }
#app .jg-prog i { background: linear-gradient(90deg, var(--brass), var(--sol2)); }
#app .jg-proximo { background: transparent; box-shadow: 0 0 0 1.5px var(--carton2) inset; }

/* mapa de niveles y paneles dentro del juego */
#app .capa-juego, .capa-juego { background: linear-gradient(rgba(241, 243, 247, .86), rgba(241, 243, 247, .95)), var(--fondo, none) center/cover fixed, var(--papel); font-family: var(--texto); }
.capa-juego .jg-cab { border: 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.capa-juego .jg-x { border: 0; background: var(--ink); color: #fff; }
.capa-juego .jg-tit strong { font-family: var(--display); font-weight: 650; }
.capa-juego .jg-reloj { background: var(--ink); }
.capa-juego .jg-portada { border: 0; border-radius: 22px; box-shadow: var(--sombra-alta); }
.capa-juego .jg-consejo { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--linea); }
.capa-juego .jg-consejo img { border: 0; box-shadow: 0 0 0 2px var(--sol); }
.capa-juego .jg-nivel { border: 0; border-radius: 18px; background: var(--sol); box-shadow: 0 6px 0 var(--brass); font-family: var(--display); }
.capa-juego .jg-nivel:active { box-shadow: 0 2px 0 var(--brass); }
.capa-juego .jg-nivel.hecho { background: #D5F0E3; box-shadow: 0 6px 0 #A7D9C0; }
.capa-juego .jg-nivel.cerrado, .capa-juego .jg-nivel.pago { background: var(--carton); box-shadow: 0 6px 0 var(--carton2); }
.capa-juego .jg-nivel i { border: 2px solid #fff; }
.capa-juego .jg-panel { border: 0; border-radius: 26px; box-shadow: var(--sombra-alta); }
.capa-juego .jg-panel > img { border: 0; box-shadow: 0 0 0 3px var(--sol); }
.capa-juego .jg-panel h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.capa-juego .chip { border: 0; box-shadow: 0 0 0 1px var(--linea); background: #fff; }
.capa-juego .chip.activa { background: var(--ink); color: #fff; }
.capa-juego .boton { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 18px -8px rgba(233, 174, 0, .9); }
.capa-juego .boton.gris { background: var(--carton); color: var(--ink); box-shadow: none; }
.capa-juego .boton.verde { background: var(--verde); color: #fff; box-shadow: none; }