/* Animaciones y efectos generales (va la última en index.html). Lo propio de cada pantalla (escena
   de cajas, bombillas de la ruleta, VS, cinta del resultado…) vive en css/screens/<pantalla>.css.
   En los menús solo se anima transform y opacity: nada de box-shadow, filter, left/top ni
   background-position animados, y como mucho 12 nodos animados a la vez por pantalla. */

.fx-layer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.fly-coin { position: fixed; left: 0; top: 0; z-index: 210; pointer-events: none; will-change: transform; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }

#bg { overflow: hidden; }
@keyframes spinrays { to { transform: rotate(360deg); } }

/* Transiciones entre pantallas */
.screen.enter { animation: scr-in .26s cubic-bezier(.2,.8,.2,1); }
.screen.enter.back { animation-name: scr-back; }
@keyframes scr-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes scr-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* Entrada escalonada de las piezas de una pantalla (--i: orden). Suave, sin rebote. */
.stagger > * { animation: stg-in .32s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
@keyframes stg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* Botones: brillo que cruza (transform) y pulsación. Solo en JUGAR de Inicio, ABRIR en Cajas y
   GIRO GRATIS cuando está disponible. */
.btn.shine { overflow: hidden; }
.btn.shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; transform: translateX(-160%) skewX(-22deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0%, 55% { transform: translateX(-160%) skewX(-22deg); } 85%, 100% { transform: translateX(420%) skewX(-22deg); } }
.btn.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
/* Heredado (lo usa también el HUD): los menús lo sobrescriben con .ui .btn:active en base.css. */
.btn:active, .tile:active, .mode:active { transform: scale(.96) translateY(1px) !important; }
.tile, .mode, .vcard, .inv, .cue-row, .it { transition: transform .15s, filter .15s; }
@media (hover: hover) {
  .tile:hover, .mode:hover, .inv:hover, .cue-row:hover, .it:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .btn:hover { filter: brightness(1.08); }
}
.badge { animation: badge-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes badge-pop { from { transform: scale(0); } }

/* Ventanas: el desenfoque del fondo, solo dentro de la partida (en los menús, velo sin desenfoque). */
body.ingame .modal-bg { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal { animation: pop .32s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* Biblioteca de movimientos en reposo (los usan las pantallas) */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wiggle { 0%, 90%, 100% { transform: none; } 93% { transform: rotate(-12deg); } 96% { transform: rotate(12deg); } }
@keyframes wiggle-soft { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes halo { 50% { transform: scale(1.06); opacity: .7; } }
/* Halo que late (en lugar de animar box-shadow): un ::after con este keyframe de opacidad */
@keyframes glow-o { from { opacity: .4; } to { opacity: .9; } }
/* Atajos para las pantallas (se apagan solos con «menos movimiento»):
   .anim-bob flota · .anim-spin gira despacio (22 s) · .anim-glow late la opacidad · .anim-breathe */
.anim-bob { animation: bob 2.4s ease-in-out infinite; }
.anim-spin { animation: spin-slow 22s linear infinite; }
.anim-glow { animation: glow-o 1.4s ease-in-out infinite alternate; }
.anim-breathe { animation: breathe 1.4s ease-in-out infinite; }

/* Subida de nivel (levelUpModal) */
.lvl-scene { display: flex; flex-direction: column; align-items: center; position: relative; }
.lvl-scene .rays2 { position: absolute; left: 50%; top: 52px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,220,120,.22) 0 8deg, rgba(255,220,120,0) 8deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0 15%, transparent 62%); mask-image: radial-gradient(circle, #000 0 15%, transparent 62%); animation: spinrays 16s linear infinite; pointer-events: none; }
.lvl-scene .lvstar { position: relative; animation: star-in .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes star-in { from { transform: scale(0) rotate(-120deg); } }

/* Buscando rival: avatares que pasan como en una tragaperras. La regla .slot se queda tal cual: el
   HUD también usa .slot (los cambios de Buscar van en .pcard-big .slot, search.css). */
.slot { position: relative; width: 92px; height: 92px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 7px #ffc81f, 0 6px 12px rgba(0,0,0,.5); background: linear-gradient(135deg, #2a6ad8, #0f2f70); }
.slot .reel { position: absolute; left: 0; top: 0; width: 100%; animation: reel .5s linear infinite; }
.slot .reel img { display: block; width: 76px; height: 76px; margin: 8px; }
@keyframes reel { to { transform: translateY(-50%); } }

/* Menos movimiento: en los menús se quitan los movimientos en reposo */
@media (prefers-reduced-motion: reduce) {
  .ui .btn.pulse, .ui .ib.gift.ready, .ui .rays-l.spin, .ui .anim-bob, .ui .anim-spin, .ui .anim-glow, .ui .anim-breathe,
  .ui .wheel-tile .wimg, .ui .vbox-tile .vimg, .ui .chest.idle img { animation: none !important; }
  .ui .btn.shine::after, .ui .pass-tile::after { display: none; }
}