/* Gomitas 2048 - hoja de estilo.
   Reglas del look: contorno de tinta morada en TODO, sombra dura abajo (nunca difusa),
   colores de dulce saturados, esquinas gordas. Nada de degradados grises. */

:root{
  --tinta:#1B1035;
  --fondo:#0D0A20;
  --panel:#211A45;
  --panel2:#2A2258;
  --texto:#FFFFFF;
  --texto2:#B9AEE8;
  --texto3:#6E63B0;
  --verde:#7BE04F;
  --verde2:#4FBF2E;
  --limon:#FFD23F;
  --chile:#FF5E3A;
  --mango:#FF9E4F;
  --menta:#2ED9C3;
  --uva:#A96BFF;
  --chicle:#FF6BD6;
  --fresa:#FF6B81;
  --borde:3px solid var(--tinta);
  --dura:0 4px 0 var(--tinta);
  --dura-chica:0 3px 0 var(--tinta);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* el toque responde de inmediato: nada de la espera de 300 ms del doble tap */
button,.poder,.ranura,.carta,.nivel,.lista-poder,.tab{touch-action:manipulation}
#pantalla-juego,#zona-mover,#lienzo{touch-action:none}
/* El [hidden] del navegador pierde contra cualquier display del autor.
   Sin esta linea el velo de los modales tapa el juego desde el arranque. */
[hidden]{display:none!important}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:var(--fondo);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);
  user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#app{position:fixed;inset:0}

/* pantallas muy bajitas (telefono en horizontal): todo se aprieta un poco */
@media (max-height:430px){
  .marca{font-size:clamp(24px,6vh,36px)}
  .btn{padding:9px 14px;font-size:13px}
  .btn-jugar{font-size:15px;min-width:120px}
  .campo{height:38px}
  .scroll{top:96px}
  .poder{width:44px;height:44px}
  .btn-redondo{width:50px;height:50px}
}

.pantalla{position:absolute;inset:0;display:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pantalla.activa{display:block}
#pantalla-tienda,#pantalla-ruta,#pantalla-poderes,#pantalla-ajustes{
  background:var(--fondo) radial-gradient(#2A2258 1.4px,transparent 1.4px) 0 0/20px 20px}
#pantalla-carga{background:
  radial-gradient(rgba(255,255,255,.22) 1.6px,transparent 1.6px) 0 0/22px 22px,
  linear-gradient(rgba(13,10,32,.55),rgba(13,10,32,.78)),
  url(../assets/ui/menu_fondo.webp) center/cover no-repeat}
#pantalla-menu{background:#F7C8E0 url(../assets/ui/menu_fondo.webp) center/cover no-repeat}
#pantalla-menu::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(13,10,32,.30) 0%, rgba(13,10,32,.62) 60%, rgba(13,10,32,.80) 100%)}
#pantalla-menu>*:not(.home-shell){position:relative;z-index:1}

/* ---------------------------------------------------------------- marca */
.marca{font-size:clamp(30px,8vw,52px);line-height:1;margin:0;color:var(--limon);letter-spacing:-1px;
  text-shadow:0 5px 0 var(--tinta), 0 0 26px rgba(255,94,58,.45);
  -webkit-text-stroke:2px var(--tinta)}
.marca.grande{font-size:clamp(38px,9vw,74px)}
.marca-sub{margin:4px 0 0;color:var(--fresa);font-weight:700;
  letter-spacing:clamp(2px,1.2vw,6px);font-size:clamp(10px,2.6vw,14px)}

/* ---------------------------------------------------------------- carga */
.carga-centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.cubo-marca{width:clamp(78px,22vw,104px);height:clamp(78px,22vw,104px);margin-bottom:14px}
.barra{width:min(260px,70vw);height:16px;background:var(--fondo);border:var(--borde);
  border-radius:10px;padding:2px;margin-top:22px}
.barra.chica{height:13px;border-width:2px;margin:0}
.barra-llena{height:100%;border-radius:6px;background:var(--chile);width:0%;transition:width .2s}
.barra-llena.rosa{background:var(--chicle)}
.carga-texto{color:var(--texto2);font-size:12px;margin:10px 0 0}
.tip{position:absolute;bottom:22px;left:24px;right:24px;color:var(--texto3);font-size:11px;line-height:1.6}

/* ---------------------------------------------------------------- menu */
.menu-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr;align-content:center;
  justify-items:center;gap:18px;padding:70px 22px 90px;text-align:center}
.menu-der{display:flex;flex-direction:column;align-items:center;gap:8px;order:-1}
.preview{width:clamp(76px,20vw,116px);height:clamp(76px,20vw,116px)}
.fila-botones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.campo{width:min(280px,80vw);height:44px;background:var(--fondo);border:var(--borde);border-radius:12px;
  color:var(--texto);padding:0 14px;font-size:14px;font-family:inherit;text-align:center}
.campo::placeholder{color:var(--texto3)}
.nota{color:var(--texto2);font-size:12px;margin:0}

.btn{border:var(--borde);border-radius:14px;box-shadow:var(--dura);cursor:pointer;
  font-family:inherit;font-weight:800;font-size:15px;padding:12px 18px;color:var(--tinta);
  background:var(--panel2);transition:transform .06s}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)}
.btn:focus-visible{outline:3px solid var(--limon);outline-offset:3px}
.btn-verde{background:linear-gradient(180deg,#8FF06A,#4FBF2E);color:#173404}
.btn-morado{background:var(--uva);color:#26215C}
.btn-menta{background:var(--menta);color:#04342C}
.btn-mango{background:var(--mango);color:#4A1B0C}
.btn-limon{background:var(--limon);color:#412402}
.btn-chile{background:var(--chile);color:#4A1B0C}
.btn-gris{background:var(--panel2);color:var(--texto2);border-color:var(--tinta)}
.btn-jugar{min-width:150px;font-size:18px}
.btn-icono{width:50px;padding:12px 0;font-size:18px}
.btn-x16{display:flex;flex-direction:column;line-height:1.1;padding:8px 14px}
.btn-x16 b{font-size:19px}
.btn-x16 span{font-size:9px;font-weight:800}

.chip{position:absolute;z-index:5;background:var(--fondo);border:2.5px solid var(--tinta);
  border-radius:12px;padding:6px 10px;font-size:12px;display:flex;gap:6px;align-items:center}
.chip-sonido{top:12px;left:12px;background:var(--verde);color:#173404;width:38px;height:38px;
  justify-content:center;font-size:17px;cursor:pointer;box-shadow:var(--dura-chica);font-weight:800}
.chip-monedas{top:12px;right:12px}
.chip-monedas b{color:var(--texto)}
.moneda{color:var(--limon)}
.gema{color:var(--chicle);margin-left:4px}
.mini-chip{position:static}



@media (orientation:landscape) and (min-width:720px){
  .menu-grid{grid-template-columns:auto auto;justify-content:center;align-content:center;
    justify-items:center;text-align:center;gap:14px 48px;padding:60px 40px}
  .menu-der{order:0}
}

/* ---------------------------------------------------------------- listas */
.barra-sup{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--fondo);border-bottom:var(--borde)}
.barra-sup h2{margin:0;font-size:18px;flex:1}
.btn-atras{padding:6px 14px;font-size:20px;line-height:1}
.tabs{display:flex;gap:6px;padding:10px 14px}
.tab{flex:1;background:transparent;border:2px solid var(--panel2);border-radius:10px;color:var(--texto3);
  font-family:inherit;font-size:12px;font-weight:700;padding:8px 0;cursor:pointer}
.tab.activa{background:var(--verde);color:#173404;border-color:var(--tinta)}
.scroll{position:absolute;top:112px;bottom:0;left:0;right:0;overflow-y:auto;padding:4px 14px 26px;
  -webkit-overflow-scrolling:touch}
#pantalla-ruta .scroll,#pantalla-ajustes .scroll{top:58px}

/* la animacion del telefono girando */
.gira{width:120px;height:120px;margin:0 auto 12px;position:relative}
.gira .tel{position:absolute;left:50%;top:50%;width:52px;height:88px;margin:-44px 0 0 -26px;
  border:4px solid var(--tinta);border-radius:12px;background:var(--panel2);
  animation:girar 2.6s ease-in-out infinite}
.gira .tel::after{content:'';position:absolute;left:50%;bottom:5px;width:18px;height:3px;
  margin-left:-9px;background:var(--texto3);border-radius:2px}
.gira .flecha-gira{position:absolute;inset:0;border:3px dashed var(--limon);border-radius:50%;
  opacity:.5}
@keyframes girar{
  0%,28%{transform:rotate(0deg)}
  55%,100%{transform:rotate(-90deg)}
}
@media (prefers-reduced-motion:reduce){.gira .tel{animation:none;transform:rotate(-90deg)}}

.opcion{display:flex;align-items:center;gap:12px;background:var(--panel);border:var(--borde);
  border-radius:14px;padding:12px;margin-bottom:9px;box-shadow:var(--dura-chica)}
.opcion h4{margin:0;font-size:13px;flex:1}
.opcion p{margin:2px 0 0;font-size:11px;color:var(--texto2)}
.opcion .valores{display:flex;gap:6px;flex:none}
.opcion .valores button{background:var(--panel2);border:2.5px solid var(--tinta);border-radius:10px;
  color:var(--texto2);font-family:inherit;font-size:11px;font-weight:700;padding:7px 10px;cursor:pointer}
.opcion .valores button.on{background:var(--verde);color:#173404}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}

.carta{background:var(--panel);border:var(--borde);border-radius:14px;padding:10px;text-align:center;
  cursor:pointer;box-shadow:var(--dura-chica)}
.carta.puesta{border-color:var(--verde)}
.carta.bloqueada{opacity:.55;cursor:not-allowed}
.carta .muestra{width:52px;height:52px;margin:0 auto 8px;border:3px solid var(--tinta);border-radius:12px;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.28), inset 0 8px 0 rgba(255,255,255,.28)}
.carta h4{margin:0;font-size:12px}
.carta small{color:var(--limon);font-size:11px;font-weight:700}
.carta small.gemas{color:var(--chicle)}
.carta small.puesto{color:var(--verde)}

.pase{margin-top:14px;background:linear-gradient(90deg,var(--chile),var(--chicle));
  border:var(--borde);border-radius:16px;padding:14px;display:flex;justify-content:space-between;
  align-items:center;box-shadow:var(--dura)}
.pase h3{margin:0;font-size:16px}
.pase p{margin:2px 0 0;font-size:11px;color:#FFE9C9}

/* ---------------------------------------------------------------- ruta */
.nivel{display:flex;align-items:center;gap:12px;background:var(--panel);border:var(--borde);
  border-radius:14px;padding:10px 12px;margin-bottom:9px;cursor:pointer;box-shadow:var(--dura-chica)}
.nivel.cerrado{opacity:.45;cursor:not-allowed}
.nivel.jefe{border-color:var(--chile)}
.nivel .num{width:44px;height:44px;flex:none;border-radius:50%;border:3px solid var(--tinta);
  background:var(--panel2);display:flex;align-items:center;justify-content:center;font-weight:800}
.nivel.hecho .num{background:var(--verde);color:#173404}
.nivel.actual .num{background:var(--limon);color:#412402}
.nivel.jefe .num{background:var(--chile);color:#4A1B0C;font-size:11px}
.nivel .info{flex:1;min-width:0}
.nivel h4{margin:0;font-size:13px}
.nivel p{margin:2px 0 0;font-size:11px;color:var(--texto2)}
.estrellas{color:var(--limon);letter-spacing:2px;font-size:14px}
.estrellas i{color:var(--panel2);font-style:normal}

/* ---------------------------------------------------------------- poderes */
.ranura-fila{display:flex;gap:10px;justify-content:center;padding:14px}
.ranura{width:clamp(56px,17vw,72px);height:clamp(56px,17vw,72px);border-radius:16px;display:flex;
  align-items:center;justify-content:center;font-size:26px;font-weight:800;color:var(--texto3);
  background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden;cursor:pointer;
  filter:drop-shadow(0 4px 0 var(--tinta))}
.ranura.vacia{border:var(--borde);background:var(--panel2)}
.ranura.vacia{background:var(--panel2);color:var(--texto3)}
.lista-poder{display:flex;align-items:center;gap:12px;background:var(--panel);border:var(--borde);
  border-radius:14px;padding:10px 12px;margin-bottom:9px;cursor:pointer}
.lista-poder.cerrado{opacity:.45}
.lista-poder .ic{width:46px;height:46px;flex:none;border-radius:13px;background-size:contain;
  background-position:center;background-repeat:no-repeat;overflow:hidden}
.lista-poder h4{margin:0;font-size:13px}
.lista-poder p{margin:2px 0 0;font-size:11px;color:var(--texto2);line-height:1.5}

/* ---------------------------------------------------------------- juego */
#pantalla-juego{background:var(--fondo)}
#lienzo{position:absolute;inset:0}
#lienzo canvas{display:block;width:100%;height:100%}
.hud{position:absolute;inset:0;pointer-events:none;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 10px)
          calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 10px)}
.hud button{pointer-events:auto}
.hud-esq-sup-izq{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:min(42vw,300px)}
.hud-esq-sup-der{position:absolute;top:10px;right:10px;width:clamp(112px,30vw,170px)}
.caja-puntos{display:inline-block;width:max-content;max-width:100%;background:rgba(13,10,32,.85);border:2.5px solid var(--tinta);border-radius:11px;padding:5px 10px}
.caja-puntos small{display:block;font-size:8px;color:var(--texto3);letter-spacing:1px}
.caja-puntos b{font-size:16px;color:var(--limon)}
.caja-diamante{border-color:#B6FF3C}
.caja-diamante b{color:#B6FF3C}
.caja-diamante small{color:#8FCF3C}
#caja-objetivo{width:auto;max-width:min(46vw,285px)}
#caja-objetivo b{display:block;font-size:clamp(10px,1.05vw,13px);line-height:1.22;white-space:normal;overflow-wrap:anywhere}
.tabla li i{font-style:normal;color:#B6FF3C;font-size:9px;margin-left:4px}
.tabla li .destrucciones{font-style:normal;color:#FF3B30;font-size:.88em;font-weight:950;margin-left:4px;text-shadow:0 0 7px rgba(255,59,48,.85)}
.tabla li .jugador-color{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 2px;box-shadow:0 0 7px currentColor;vertical-align:1px}
.tabla li .jugador-nombre{font-size:.88em;font-weight:850;text-shadow:0 1px 2px #000,0 0 5px currentColor}
.tabla li.eliminado{opacity:.58;filter:saturate(.45)}
.tabla li.eliminado .jugador-nombre{text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-color:#FF315A;text-decoration-skip-ink:none;opacity:.78}
.tabla li.eliminado .destrucciones{color:#FF1744;opacity:1}
.tabla{margin:0;padding:6px 8px;list-style:none;background:rgba(13,10,32,.85);
  border:2.5px solid var(--tinta);border-radius:11px;font-size:10px;color:var(--texto2)}
.tabla li{display:flex;justify-content:space-between;gap:8px;line-height:1.62}
.tabla li b{color:var(--texto);font-weight:700}
.tabla li.yo{color:var(--verde)}
.tabla li.yo b{color:var(--verde)}
.tabla li.lider{color:#7BFFF0}
.tabla li.lider b{color:#7BFFF0}
.tabla li.nuevo{color:#FFD23F}
.tabla li.nuevo b{color:#FFD23F}
.tabla li u{text-decoration:none;background:#FFD23F;color:#412402;border-radius:5px;
  font-size:8px;font-weight:800;padding:0 4px;margin-left:5px}
.tabla li.sep{justify-content:center;color:var(--texto3);line-height:1;padding:2px 0}
.aviso-grande{display:none!important;position:absolute;top:38%;left:50%;transform:translateX(-50%);
  background:rgba(13,10,32,.9);border:3px solid #2ED9C3;border-radius:14px;
  padding:10px 18px;text-align:center;white-space:nowrap;
  box-shadow:0 0 26px rgba(46,217,195,.6);animation:latir .6s ease-in-out infinite}
.aviso-grande b{display:block;font-size:clamp(14px,4.5vw,20px);color:#9BF6FF}
.aviso-grande small{font-size:11px;color:var(--texto2)}
@keyframes latir{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.aviso-grande{animation:none}}

.chip-sala{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translateX(-50%);
  margin-left:34px;background:rgba(13,10,32,.85);border:2px solid var(--tinta);border-radius:9px;
  padding:4px 9px;font-size:10px;color:#7BFFF0;font-weight:700;white-space:nowrap}
.killfeed{position:absolute;left:calc(env(safe-area-inset-left) + 10px);
  bottom:calc(env(safe-area-inset-bottom) + clamp(92px,15vh,138px));
  width:clamp(170px,34vw,350px);max-height:min(34vh,250px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;
  text-align:left;pointer-events:none}
.killfeed .chat-line{display:block;box-sizing:border-box;max-width:100%;
  background:rgba(13,10,32,.76);border:1.5px solid rgba(46,217,195,.48);border-left:3px solid #2ED9C3;
  border-radius:8px;padding:4px 8px;font-size:clamp(9px,.85vw,11px);line-height:1.25;font-weight:750;
  color:#FFF7EC;text-shadow:0 1px 2px #000;white-space:normal;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(0,0,0,.28);transition:opacity .22s linear,transform .22s ease-out}
.killfeed .chat-line.sistema{border-left-color:#FFD23F;border-color:rgba(255,210,63,.50)}
.killfeed .chat-line b{display:block;color:#9BF6FF;font-size:1em}
.killfeed .chat-line small{display:block;color:#D8D0F0;font-size:.88em;margin-top:1px}
@media (orientation:landscape) and (max-height:500px){
  .killfeed{bottom:calc(env(safe-area-inset-bottom) + 76px);width:clamp(160px,30vw,300px);max-height:30vh}
}
@media (max-width:520px){
  .killfeed{width:min(58vw,260px);bottom:calc(env(safe-area-inset-bottom) + 112px)}
}

.hud-inf{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px)}
.azucar{width:150px;margin:0 auto 8px}
.azucar small{display:block;font-size:8px;color:var(--chicle);letter-spacing:1px;font-weight:800;margin-bottom:3px}
.poderes{display:flex;gap:10px;justify-content:center}
.poder{position:relative;width:clamp(44px,12vw,60px);height:clamp(44px,12vw,60px);border:none;
  border-radius:15px;background-color:transparent;background-size:contain;
  background-position:center;background-repeat:no-repeat;overflow:hidden;
  filter:drop-shadow(0 3px 0 var(--tinta));
  font-size:22px;font-weight:800;color:var(--tinta);
  display:flex;align-items:center;justify-content:center;font-family:inherit;cursor:pointer}
.poder.frio{filter:grayscale(.85) brightness(.55) drop-shadow(0 3px 0 var(--tinta))}
.poder .cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--texto2)}
.poder .costo{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  background:var(--fondo);border:2px solid var(--tinta);border-radius:7px;font-size:8px;
  padding:0 4px;color:var(--chicle);font-weight:800}

.btn-redondo{position:absolute;width:clamp(52px,14vw,74px);height:clamp(52px,14vw,74px);border-radius:50%;border:var(--borde);
  box-shadow:var(--dura);font-size:24px;font-family:inherit;cursor:pointer;color:#4A1B0C}
.btn-boost{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);
  background:var(--panel2) center/100% 100% no-repeat;overflow:hidden;padding:0;border:none;
  box-shadow:none;filter:drop-shadow(0 4px 0 var(--tinta))}
.btn-boost .tanque{display:none}
.btn-boost .flecha{display:none}
.btn-boost .tanque{position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--chile);
  transform-origin:bottom;transform:scaleY(1)}
.btn-boost .flecha{position:relative;z-index:1}
.btn-boost.vacio .tanque{background:var(--texto3)}
.btn-boost:active{transform:translateY(4px);box-shadow:none}
.btn-boost.frio{background:var(--panel2);color:var(--texto3);font-size:20px;font-weight:800}
.btn-pausa{top:calc(env(safe-area-inset-top) + 10px);left:50%;margin-left:-24px;width:44px;height:44px;
  background:var(--panel2);color:var(--texto2);font-size:17px;box-shadow:var(--dura-chica)}

/* el dedo manda en toda la pantalla, no solo en una esquina */
#zona-mover{position:absolute;inset:0;touch-action:none}
/* el control aparece donde pongas el dedo, de cualquier lado, y se va al soltar */
/* solo es la marca de donde tienes el dedo: la direccion se mide desde la cabeza */
#control-dedo{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);opacity:0;
  pointer-events:none;transition:opacity .14s;display:flex;align-items:center;justify-content:center}
#control-dedo.visible{opacity:1}
#control-punto{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.9)}


@media (orientation:landscape){
  .hud-esq-sup-der{width:auto}
  .tabla{font-size:10px}
  .azucar{width:170px;margin:0 0 8px 0}
  .poder{width:56px;height:56px}

}

/* ---------------------------------------------------------------- modales */
.velo{position:absolute;inset:0;background:rgba(13,10,32,.86);display:none;align-items:center;
  justify-content:center;z-index:20;padding:20px}
.velo.abierto{display:flex}
.modal{width:min(340px,90vw);background:var(--panel);border:4px solid var(--tinta);border-radius:22px;
  box-shadow:0 6px 0 #060411;padding:20px;text-align:center;animation:entra .18s ease-out}
@keyframes entra{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal h3{margin:0 0 4px;font-size:19px}
.modal p{margin:0 0 14px;font-size:12px;color:var(--texto2);line-height:1.6}
.modal .btn{display:block;width:100%;margin-top:8px}
.modal .icono{width:58px;height:58px;margin:0 auto 10px;border:var(--borde);border-radius:17px;
  background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:26px}
.reloj{width:84px;height:84px;margin:0 auto 10px;border-radius:50%;border:6px solid var(--panel2);
  border-top-color:var(--chile);display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800}
.premio{background:var(--fondo);border:2.5px solid var(--tinta);border-radius:11px;padding:7px;
  font-size:12px;color:var(--limon);font-weight:800;margin-bottom:10px}
.estrellas-grandes{font-size:30px;color:var(--limon);letter-spacing:6px;margin-bottom:6px}
.estrellas-grandes i{color:var(--panel2);font-style:normal}
.codigo{font-size:9px;color:var(--texto3);margin-top:8px}

/* ================================================================ pulido
   Lo nuevo del pase de UI: transiciones de pantalla, la palanca tactil, el
   minimapa, los combos, los numeros que flotan y el brillo del boton Jugar.
   Mismas reglas de siempre: tinta, sombra dura, colores de dulce. */

/* cada pantalla entra con un respiro, no con un parpadeo */
.pantalla.activa{animation:pantAparece .22s ease-out}
@keyframes pantAparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pantalla.activa{animation:none}}

/* el boton Jugar llama con un destello que lo barre cada tanto */
.btn-jugar{position:relative;overflow:hidden}
.btn-jugar::after{content:'';position:absolute;top:-60%;bottom:-60%;left:-45%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:destello 3.2s ease-in-out infinite}
@keyframes destello{0%,55%{left:-45%}80%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn-jugar::after{animation:none;display:none}}

/* gomitas de adorno flotando detras del menu */
/* OJO: #pantalla-menu>* fuerza position:relative en sus hijos (gana por ser
   id). Estos selectores con id ganan de vuelta: los chips vuelven a ser
   esquinas y la decoracion vuelve a cubrir la pantalla, como se diseñaron. */
#pantalla-menu>.chip{position:absolute}
#pantalla-menu>.menu-deco{position:absolute;inset:0}
.menu-deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.menu-deco span{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px}
@media (max-width:520px){.menu-deco span{width:34px;height:34px}}

/* -------------------------------------------------- palanca tactil */
/* En modo palanca el aro crece y el punto viaja dentro de el. En modo
   apuntar sigue siendo la marquita chica de donde tienes el dedo. */
#control-dedo.palanca{width:var(--palanca,96px);height:var(--palanca,96px);
  margin:calc(var(--palanca,96px) / -2) 0 0 calc(var(--palanca,96px) / -2);
  border-width:3.5px;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
#control-dedo.palanca #control-punto{width:36px;height:36px;
  background:rgba(255,255,255,.92);border:3px solid rgba(27,16,53,.45);
  box-shadow:0 3px 0 rgba(27,16,53,.4)}

/* el boton de turbo avisa que esta pisado (con boton o con segundo dedo) */
.btn-boost.pulsado{filter:drop-shadow(0 1px 0 var(--tinta)) brightness(1.18);transform:translateY(3px)}

/* -------------------------------------------------- minimapa */
.minimapa{display:block;margin:8px 0 0 auto;width:clamp(84px,24vw,112px);height:auto;
  border:2.5px solid var(--tinta);border-radius:12px;background:rgba(13,10,32,.72);
  image-rendering:auto}

/* -------------------------------------------------- combo */
.combo{position:absolute;top:11%;left:50%;transform:translateX(-50%);text-align:center;
  pointer-events:none}
.combo b{display:block;font-size:clamp(25px,6.2vw,40px);font-weight:800;color:var(--limon);
  -webkit-text-stroke:3px var(--tinta);text-shadow:0 5px 0 var(--tinta)}
.combo small{font-size:11px;font-weight:800;letter-spacing:4px;color:var(--texto2)}
#hud-combo small{display:block;font-size:clamp(25px,6.2vw,40px);line-height:.9;font-weight:800;letter-spacing:0;color:var(--texto2);-webkit-text-stroke:3px var(--tinta);text-shadow:0 5px 0 var(--tinta)}
#hud-combo b,#hud-combo small{font-size:clamp(25px,6.2vw,40px);font-weight:800}
.combo.picoso b{color:var(--chile);text-shadow:0 5px 0 var(--tinta),0 0 26px rgba(255,94,58,.7)}
.combo.pop{animation:comboPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes comboPop{0%{transform:translateX(-50%) scale(.4)}60%{transform:translateX(-50%) scale(1.18)}100%{transform:translateX(-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.combo.pop{animation:none}}

/* -------------------------------------------------- numeros que flotan */
#hud-flotantes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flota{position:absolute;transform:translate(-50%,-50%);font-weight:800;
  font-size:clamp(14px,3.6vw,19px);-webkit-text-stroke:2px var(--tinta);
  text-shadow:0 3px 0 var(--tinta);opacity:0;white-space:nowrap}
.flota.vuela{animation:flotaSube .95s ease-out forwards}
@keyframes flotaSube{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
  15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}

/* -------------------------------------------------- barra de azucar viva */
/* cuando el azucar ya alcanza para tu poder mas barato, la barra late */
.azucar.lista .barra-llena{box-shadow:0 0 12px rgba(255,107,214,.85);
  animation:azucarLate 1.1s ease-in-out infinite}
.azucar.lista small{color:#fff}
@keyframes azucarLate{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.azucar.lista .barra-llena{animation:none}}

/* el feed suaviza sus pasos de opacidad (ahora se refresca 4 veces por segundo) */
.killfeed div{transition:opacity .25s linear}

/* los botones de poder responden al toque */
.poder:active{transform:translateY(2px) scale(.96)}

/* en pantallas angostas los botones de cada ajuste bajan a su renglon:
   el texto respira y los botones no se hacen migajas */
@media (max-width:520px){
  .opcion{flex-wrap:wrap}
  .opcion>div:first-child{flex:1 1 100%}
  .opcion .valores{margin-left:auto}
}

/* ================================================================ acabado
   El pase de acabado fino: viñeta de cine sobre el campo, letra redondeada
   donde el sistema la tenga, y el HUD crece con dignidad en tablet y en
   pantallas grandes en vez de quedarse en tamaño telefono. */

/* letra redondeada de dulceria en iOS/macOS; en el resto cae a la de siempre */
html,body,button,input{font-family:ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

/* viñeta: las orillas del campo se oscurecen apenas y la mirada se queda
   en el centro, donde esta tu gomita. Va sobre el lienzo, debajo del HUD. */
#lienzo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%, transparent 52%, rgba(6,6,20,.42) 100%)}

/* escritorio: los botones saludan al pasar el mouse */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
  .btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)}
  .carta:hover,.nivel:hover:not(.cerrado),.lista-poder:hover{transform:translateY(-2px)}
  .carta,.nivel,.lista-poder{transition:transform .08s}
}

/* tablet y pantallas grandes con toque: todo el HUD sube una talla.
   En telefono clamp() ya manda; esto es para cuando sobran pixeles. */
@media (min-width:760px) and (min-height:600px) and (pointer:coarse){
  .caja-puntos{padding:7px 14px;border-radius:13px}
  .caja-puntos small{font-size:10px}
  .caja-puntos b{font-size:20px}
  .tabla{font-size:13px;padding:8px 12px}
  .minimapa{width:clamp(112px,16vw,150px)}
  .poder{width:66px;height:66px;border-radius:18px}
  .poder .costo{font-size:10px}
  .btn-redondo{width:86px;height:86px}
  .btn-pausa{width:52px;height:52px;margin-left:-26px}
  .azucar{width:220px}
  .barra.chica{height:16px}
  .killfeed .chat-line{font-size:11px;padding:5px 9px}
  .chip-sala{font-size:12px;padding:5px 12px}
  .combo b,#hud-combo small{font-size:44px}
  .aviso-grande b{font-size:24px}
}

/* pantallas muy anchas (escritorio grande): que el juego no se sienta de
   juguete en un monitor de 27 pulgadas */
@media (min-width:1200px){
  .tabla{font-size:11px}
  .caja-puntos b{font-size:19px}
  .minimapa{width:130px}
}

/* ================================================================ esquinas
   Las dos palancas fijas del control por defecto en tactil. Viven en las
   esquinas de abajo, ENCIMA de los poderes y del turbo, para que el pulgar
   que mueve nunca tape lo que el otro pulgar toca. Solo se ven en modo
   esquinas y en aparatos con toque. */
.stick{display:none;position:absolute;
  width:var(--stickd);height:var(--stickd);border-radius:50%;
  border:3.5px solid rgba(255,255,255,.42);background:rgba(27,16,53,.38);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.06), 0 4px 0 rgba(27,16,53,.55);
  pointer-events:auto;touch-action:none;
  align-items:center;justify-content:center;z-index:4}
.stick::before{content:'';position:absolute;inset:26%;border-radius:50%;
  border:2px dashed rgba(255,255,255,.22)}
.stick-punto{width:42%;height:42%;border-radius:50%;
  background:linear-gradient(180deg,#FFFFFF,#D9D2F5);
  border:3px solid var(--tinta);box-shadow:0 4px 0 var(--tinta);will-change:transform}
.stick.activa{border-color:rgba(123,224,79,.85);background:rgba(27,16,53,.5)}
.stick.activa .stick-punto{background:linear-gradient(180deg,#B7FF96,#7BE04F)}
#pantalla-juego.modo-esquinas .stick{display:flex}

/* en modo esquinas el control flotante no aparece */
#pantalla-juego.modo-esquinas #control-dedo{display:none}

/* vertical: las palancas quedan a la altura de la barra de azucar, arriba
   del turbo (derecha) y del espacio libre (izquierda) */
:root{--stickd:clamp(104px,30vmin,150px);--stick-abajo:118px}
.stick-izq{left:calc(env(safe-area-inset-left) + 12px);bottom:calc(env(safe-area-inset-bottom) + var(--stick-abajo))}
.stick-der{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + var(--stick-abajo))}

/* horizontal: la pantalla es baja, la palanca se hace un poco mas chica y
   la barra de azucar se va al centro para no chocar con la izquierda */
@media (orientation:landscape){
  :root{--stickd:clamp(88px,26vmin,120px);--stick-abajo:92px}
  #pantalla-juego.modo-esquinas .azucar{margin:0 auto 8px}
  /* el minimapa se pone AL LADO de la tabla, no debajo: asi no baja hasta la palanca */
  .hud-esq-sup-der{width:auto;display:flex;flex-direction:row-reverse;gap:8px;align-items:flex-start}
  .hud-esq-sup-der .tabla{width:clamp(128px,16vw,145px)}
  .hud-esq-sup-der .minimapa{margin:0;width:clamp(84px,22vmin,112px)}
}

/* tablet: palancas con mas recorrido */
@media (min-width:760px) and (min-height:600px) and (pointer:coarse){
  :root{--stickd:clamp(140px,22vmin,190px);--stick-abajo:130px}
}

/* el x2 del diamante: limon fluorescente, un poco mas arriba que el combo */
.combo.x2{top:7%}
.combo.x2 b{color:#B6FF3C;text-shadow:0 5px 0 var(--tinta),0 0 30px rgba(182,255,60,.75)}
.combo.x2 small{color:#B6FF3C}

/* selector de nivel de los bots en el menu */
.nivel-bots{display:flex;align-items:center;gap:6px;background:rgba(13,10,32,.75);
  border:2.5px solid var(--tinta);border-radius:14px;padding:5px 6px 5px 12px}
.nivel-bots span{font-size:11px;font-weight:800;color:var(--texto2);letter-spacing:1px;margin-right:2px}
.nivel-bots button{background:var(--panel2);border:2px solid var(--tinta);border-radius:10px;
  color:var(--texto2);font-family:inherit;font-size:12px;font-weight:800;padding:6px 10px;cursor:pointer}
.nivel-bots button.on{background:var(--verde);color:#173404;box-shadow:0 2px 0 var(--tinta)}

.iso{background-size:contain!important;background-position:center;background-repeat:no-repeat}
.cubo-marca.iso{width:150px;height:150px}
.preview.iso{width:120px;height:120px}
.menu-deco span.iso{width:70px;height:70px}
.carta .muestra.con-imagen{background-size:contain;background-repeat:no-repeat;background-position:center}

/* ================================================================ kit
   Las pantallas (carga, menu, tienda, ruta, poderes, ajustes y modales)
   vestidas con el kit de arte. El tablero no lo toca: ahi manda el 3D. */

/* fondo pintado para todas las pantallas que no son el juego */
#pantalla-carga,#pantalla-menu{background:#3a1650 url(../assets/ui/kit/fondo.webp) center/cover no-repeat}
#pantalla-carga::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(13,10,32,.25),rgba(13,10,32,.72) 75%)}
#pantalla-carga>*{position:relative;z-index:1}
#pantalla-menu::before{background:linear-gradient(180deg,rgba(13,10,32,.28) 0%,rgba(13,10,32,.22) 40%,rgba(13,10,32,.70) 100%)}
#pantalla-ajustes,#pantalla-tienda,#pantalla-ruta,#pantalla-poderes{
  background:linear-gradient(rgba(13,10,32,.84),rgba(13,10,32,.92)),url(../assets/ui/kit/fondo.webp) center/cover no-repeat fixed}

/* logo dibujado */
.logo-img{display:block;width:min(330px,74vw);height:auto;margin:0 auto 6px;
  filter:drop-shadow(0 6px 0 rgba(27,16,53,.55))}
.logo-img.grande{width:min(380px,82vw);margin-bottom:10px}
@media (max-height:640px){.logo-img.grande{width:min(300px,70vw)}}

/* barra de carga del kit: la de colores se descubre sobre la apagada */
.barra-kit{position:relative;width:min(320px,80vw);aspect-ratio:380/85;margin:6px auto 4px;
  background:url(../assets/ui/kit/barra_progreso.webp) center/100% 100% no-repeat;
  filter:none}
.barra-kit::before{content:'';position:absolute;inset:0;
  background:url(../assets/ui/kit/barra_progreso.webp) center/100% 100% no-repeat;
  filter:grayscale(1) brightness(.45)}
.barra-kit-llena{position:absolute;inset:0;width:0%;overflow:hidden;transition:width .25s ease-out}
.barra-kit-llena::before{content:'';position:absolute;top:0;left:0;height:100%;width:min(320px,80vw);
  background:url(../assets/ui/kit/barra_progreso.webp) left center/100% 100% no-repeat}
.carga-texto{margin-top:14px}
#pantalla-carga .tip{margin-top:10px}

/* botones de imagen */
.btn-kit{background:none;border:none;padding:0;cursor:pointer;line-height:0;
  transition:transform .08s;-webkit-tap-highlight-color:transparent}
.btn-kit img{display:block;width:100%;height:auto;pointer-events:none;
  filter:drop-shadow(0 4px 0 rgba(27,16,53,.55))}
.btn-kit:active{transform:translateY(3px) scale(.98)}
.btn-kit:active img{filter:drop-shadow(0 1px 0 rgba(27,16,53,.55)) brightness(1.08)}
@media (hover:hover){.btn-kit:hover{transform:translateY(-2px)}}

.fila-botones.kit{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(360px,86vw)}
.btn-kit.btn-jugar{width:100%;position:static;overflow:visible;animation:latido 2.6s ease-in-out infinite}
.btn-kit.btn-jugar::after{display:none}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.btn-kit.btn-jugar{animation:none}}
.fila-pills{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-kit.pill{flex:1 1 0;min-width:0}
.btn-kit.cuadro{width:clamp(46px,13vw,58px);flex:none}

/* chips de recursos y sonido */
.chip-sonido.kit-ic{width:44px;height:44px;padding:0;background:center/contain no-repeat;
  border:none;box-shadow:none;filter:drop-shadow(0 3px 0 rgba(27,16,53,.55))}
.chip-monedas{background:none;border:none;box-shadow:none;padding:0;gap:6px;display:flex}
.barra-recurso{display:flex;align-items:center;justify-content:flex-end;height:34px;
  padding:0 14px 0 40px;background:center/100% 100% no-repeat;font-size:13px}
.barra-recurso b{color:#fff;-webkit-text-stroke:.5px var(--tinta)}
.moneda-kit{width:118px;background-image:url(../assets/ui/kit/barra_moneda.webp)}
.gema-kit{width:96px;background-image:url(../assets/ui/kit/barra_gema.webp)}
@media (max-width:420px){.moneda-kit{width:104px}.gema-kit{width:84px}.barra-recurso{height:30px;font-size:12px;padding-left:34px}}

/* mascota y frutas: adorno del menu, se esconden cuando no cabe */
.menu-mascota,.menu-frutas{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 6px);
  pointer-events:none;z-index:1;filter:drop-shadow(0 4px 0 rgba(27,16,53,.45))}
#pantalla-menu>.menu-mascota,#pantalla-menu>.menu-frutas{position:absolute}
.menu-mascota{left:2%;width:clamp(90px,22vw,170px);animation:mascotaBrinca 3.2s ease-in-out infinite}
.menu-frutas{right:1%;width:clamp(120px,30vw,240px)}
@keyframes mascotaBrinca{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media (max-height:600px),(max-width:340px){.menu-mascota,.menu-frutas{display:none}}
@media (prefers-reduced-motion:reduce){.menu-mascota{animation:none}}

/* campo del nombre sobre el marco con hojas */
.campo{background:url(../assets/ui/kit/marco_hojas.webp) center/100% 100% no-repeat;border:none;
  box-shadow:none;height:52px;padding:0 44px;text-align:center;color:#fff;font-weight:800}
.campo:focus{outline:none;filter:brightness(1.12)}

/* cabeceras: titulo sobre el liston, cerrar con la X del kit */
.barra-sup{background:transparent;border-bottom:none;padding:8px 12px 0;justify-content:center;position:relative}
.barra-sup h2{flex:none;width:min(260px,64vw);aspect-ratio:371/239;margin:-8px 0 -8px;
  background:url(../assets/ui/kit/liston.webp) center/100% 100% no-repeat;
  display:flex;align-items:center;justify-content:center;padding:0 40px 26px;
  color:#5A2A08;font-size:clamp(16px,4.6vw,22px);-webkit-text-stroke:0;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.btn-kit.btn-atras{position:absolute;left:10px;top:8px;width:46px;z-index:2}
.tabs{padding-top:14px}
/* el liston es mas alto que la cabecera vieja: las listas empiezan mas abajo */
.scroll{top:214px}
#pantalla-ruta .scroll,#pantalla-ajustes .scroll,#pantalla-poderes .scroll{top:166px}
@media (orientation:landscape) and (max-height:500px){
  .barra-sup h2{width:min(200px,36vw);margin:-10px 0 -6px;font-size:15px}
  .scroll{top:170px}
  #pantalla-ruta .scroll,#pantalla-ajustes .scroll,#pantalla-poderes .scroll{top:126px}
}

/* estrellas del kit en ruta y en el modal de nivel */
.estrellas.kit{display:flex;gap:2px;letter-spacing:0}
.estrellas.kit img{width:16px;height:16px}
.estrellas-grandes.kit{display:flex;justify-content:center;gap:6px;letter-spacing:0}
.estrellas-grandes.kit img{width:36px;height:36px}

/* iconos de modal del kit */
.modal .icono.kit{border:none;box-shadow:none;background:center/contain no-repeat;width:66px;height:66px;
  filter:drop-shadow(0 4px 0 rgba(27,16,53,.5))}
.modal.cargando .icono,
.modal.cargando .icono.kit{
  animation:modalCargaGira 1s linear infinite, modalCargaPulso 1.05s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes modalCargaGira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes modalCargaPulso{from{filter:drop-shadow(0 0 0 rgba(255,107,214,0))}to{filter:drop-shadow(0 0 14px rgba(123,255,240,.65))}}
@media (prefers-reduced-motion:reduce){
  #pantalla-carga .cubo-marca.iso,
  .modal.cargando .icono,
  .modal.cargando .icono.kit{animation:none}
}

/* la x16 y el selector de bots siguen siendo CSS pero con la piel del kit */
.btn-x16{background:linear-gradient(180deg,#FFE066,#FFC53D);border-color:#7A3A8C;
  box-shadow:0 4px 0 #7A3A8C}
.nivel-bots{background:rgba(58,22,80,.85);border-color:#7A3A8C}
.nivel-bots button{border-color:#7A3A8C;background:#4A1E66;color:#E0C8FF}
.nivel-bots button.on{background:linear-gradient(180deg,#B6FF3C,#7BE04F);color:#173404}

/* ================================================================ salas
   Reloj de arena, desafíos y letrero de victoria. */
.selectores{display:flex;flex-direction:column;gap:6px;align-items:center}
.pill-privada{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;height:44px;padding:0 12px 0 6px;
  background:linear-gradient(180deg,#8C4CFF,#5A1E9C);border:3px solid #3A1650;border-radius:22px;
  color:#fff;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
  box-shadow:0 4px 0 #3A1650,inset 0 3px 0 rgba(255,255,255,.35);white-space:nowrap}
.pill-privada img{width:34px;height:34px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.pill-privada:active{transform:translateY(3px);box-shadow:0 1px 0 #3A1650,inset 0 3px 0 rgba(255,255,255,.35)}
.campo-codigo{width:100%;margin:10px 0 4px;text-transform:uppercase;letter-spacing:6px;font-size:18px}
.codigo-grande{font-size:38px;font-weight:800;letter-spacing:10px;color:var(--limon);-webkit-text-stroke:2px var(--tinta);
  text-shadow:0 4px 0 var(--tinta);margin:10px 0 6px;text-align:center}

/* reloj de sala en el HUD (reusa la caja de objetivo) */
.caja-objetivo.urgente b{color:var(--chile);animation:parpadea .5s steps(2) infinite}
@keyframes parpadea{50%{opacity:.35}}

/* letrero de victoria sobre el ganador */
.victoria{position:absolute;transform:translate(-50%,-100%);text-align:center;pointer-events:none;z-index:6}
.victoria img{width:54px;height:54px;display:block;margin:0 auto -6px;filter:drop-shadow(0 3px 0 var(--tinta))}
.victoria b{display:block;font-size:clamp(26px,7vw,44px);font-weight:800;color:var(--limon);
  -webkit-text-stroke:3px var(--tinta);text-shadow:0 5px 0 var(--tinta),0 0 26px rgba(255,210,63,.7);white-space:nowrap}
.victoria small{display:block;font-size:13px;font-weight:800;color:#fff;letter-spacing:2px;
  background:rgba(27,16,53,.85);border:2px solid var(--tinta);border-radius:10px;padding:3px 10px;margin-top:4px}
.victoria.pop{animation:comboPop .6s cubic-bezier(.2,1.6,.4,1)}
.victoria.pop{animation-name:victoriaPop}
@keyframes victoriaPop{0%{transform:translate(-50%,-100%) scale(.3)}60%{transform:translate(-50%,-100%) scale(1.15)}100%{transform:translate(-50%,-100%) scale(1)}}

/* podio en el modal de fin de sala */
.tabla.podio{position:static;width:100%;margin:8px 0 4px;font-size:13px}
.tabla.podio li{padding:5px 8px}

/* tarjetas de desafios */
.desafio{background:var(--panel);border:var(--borde);border-radius:16px;padding:12px 14px;margin:0 0 10px;
  box-shadow:0 4px 0 var(--tinta);display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.desafio-txt b{display:block;font-size:14px}
.desafio-txt small{color:var(--texto3);font-size:11px}
.desafio-premio{color:var(--limon);font-weight:800;font-size:13px;white-space:nowrap}
.desafio-barra{grid-column:1/-1;position:relative;height:18px;background:var(--fondo);border:2px solid var(--tinta);border-radius:9px;overflow:hidden}
.desafio-barra i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#7BE04F,#B6FF3C);transition:width .3s}
.desafio-barra span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;-webkit-text-stroke:.5px var(--tinta)}
.desafio.listo{border-color:var(--verde)}
.campo-codigo::placeholder{letter-spacing:1px;text-transform:none;font-size:13px;font-weight:600}

/* ================================================================ podio */
.podio{position:absolute;inset:0;z-index:8;pointer-events:auto;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,rgba(58,22,80,.92),rgba(13,10,32,.97));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px)}
.podio.entra{animation:pantAparece .35s ease-out}
.podio-liston{display:none}
.podio-titulo{width:min(290px,72vw);aspect-ratio:371/239;margin:-10px 0 -18px;
  background:url(../assets/ui/kit/liston.webp) center/100% 100% no-repeat;
  display:flex;align-items:center;justify-content:center;padding:0 40px 28px;
  font-size:clamp(16px,4.6vw,21px);color:#5A2A08!important;-webkit-text-stroke:0;
  text-shadow:0 1px 0 rgba(255,255,255,.45);filter:drop-shadow(0 4px 0 rgba(27,16,53,.5))}
.hud.con-podio>:not(#podio){visibility:hidden}
.pedestales{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vw,14px);
  width:100%;max-width:520px;margin-top:8px}
.pedestal{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0;
  animation:pedestalSube .6s cubic-bezier(.2,1.5,.4,1) both}
.pedestal.p2{animation-delay:.15s}.pedestal.p1{animation-delay:.35s}.pedestal.p3{animation-delay:0s}
@keyframes pedestalSube{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.pedestal .ficha{text-align:center;margin-bottom:6px;min-width:0;max-width:100%}
.pedestal .ficha b{display:block;font-size:clamp(13px,3.6vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pedestal .ficha small{display:block;font-size:11px;color:var(--limon);font-weight:800}
.pedestal.yo .ficha b{color:var(--verde)}
.pedestal .cara{width:clamp(64px,19vw,110px);aspect-ratio:1;border-radius:22%;overflow:visible;position:relative;
  border:3.5px solid var(--tinta);box-shadow:0 6px 0 var(--tinta),0 0 30px rgba(255,255,255,.15);
  animation:festeja 1.1s ease-in-out infinite;background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.18),rgba(255,255,255,.06) 55%,rgba(58,22,80,.16));}
.pedestal.p1 .cara{width:clamp(80px,24vw,136px)}
.pedestal .cara canvas{display:block}
.podio-cubo-img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.podio-cara-extra{position:absolute;top:58%;width:47%;height:55%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.26));transition:opacity .12s ease;}
.podio-cara-izq{left:30%;transform:translate(-50%,-50%) rotate(-7deg)}
.podio-cara-der{left:70%;transform:translate(-50%,-50%) rotate(7deg)}
.podio-num{position:absolute;left:50%;top:-12px;transform:translateX(-50%);min-width:38px;padding:2px 10px;border-radius:999px;
  background:#fff;color:#1B1035;border:3px solid var(--tinta);box-shadow:0 3px 0 var(--tinta);font-weight:900;font-size:clamp(12px,3.5vw,18px);line-height:1.1;white-space:nowrap;}
@keyframes festeja{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.pedestal.p2 .cara{animation-delay:.2s}.pedestal.p3 .cara{animation-delay:.4s}
.medalla{width:38px;height:38px;border-radius:50%;margin:-14px 0 0;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--tinta);box-shadow:0 3px 0 var(--tinta);font-weight:800;font-size:16px;color:#3A1650;position:relative;z-index:1}
.medalla.oro{background:radial-gradient(circle at 35% 30%,#FFF3B0,#FFC53D 55%,#C98A00)}
.medalla.plata{background:radial-gradient(circle at 35% 30%,#FFFFFF,#D8DCE8 55%,#8E96A8)}
.medalla.bronce{background:radial-gradient(circle at 35% 30%,#FFD2A8,#D98A4F 55%,#8A4C20)}
.pedestal .base{width:100%;border:3px solid var(--tinta);border-bottom:none;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#8C4CFF,#5A1E9C);box-shadow:inset 0 4px 0 rgba(255,255,255,.3)}
.pedestal.p1 .base{height:74px}.pedestal.p2 .base{height:52px}.pedestal.p3 .base{height:38px}
.pedestal.vacio{visibility:hidden}
.podio-sub{margin:4px 0 0;color:var(--texto2);font-size:12px;text-align:center}
.podio-botones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.podio-botones .btn{min-width:150px}
/* confeti */
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;top:-20px;display:block;border-radius:2px;opacity:.95;
  animation:confetiCae 3s linear infinite}
@keyframes confetiCae{0%{transform:translateY(-20px) rotate(0deg)}100%{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.confeti i,.pedestal .cara,.pedestal{animation:none}}
@media (orientation:landscape) and (max-height:500px){
  .podio{gap:4px}.podio-liston{width:200px;margin-bottom:-44px}.podio-titulo{font-size:15px;padding-bottom:28px}
  .pedestal .cara{width:clamp(50px,12vh,80px)}.pedestal.p1 .cara{width:clamp(60px,15vh,96px)}
  .pedestal.p1 .base{height:44px}.pedestal.p2 .base{height:32px}.pedestal.p3 .base{height:22px}
  .medalla{width:30px;height:30px;font-size:13px}
}
.vidas-nota{color:var(--chile);font-weight:800;font-size:12px;margin-top:4px}

/* ================================================================ reloj digital
   Arriba en medio, debajo del boton de pausa. Numeros de reloj digital
   (monoespaciado con brillo), escalan con la pantalla y respetan la muesca. */
.reloj-sala{position:absolute;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:12px;border:2.5px solid var(--tinta);
  background:rgba(13,10,32,.82);box-shadow:0 4px 0 var(--tinta),inset 0 0 0 2px rgba(123,255,240,.18);
  pointer-events:none;z-index:8}
.reloj-sala span{display:block;font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  font-size:clamp(20px,5.2vw,32px);font-weight:800;letter-spacing:2px;line-height:1;
  color:#7BFFF0;text-shadow:0 0 10px rgba(123,255,240,.9),0 0 22px rgba(123,255,240,.45);font-variant-numeric:tabular-nums}
.reloj-sala.ultimo span{color:#FFD23F;text-shadow:0 0 10px rgba(255,210,63,.9),0 0 22px rgba(255,210,63,.45)}
.reloj-sala.final{animation:relojFinal .5s steps(1) infinite;border-color:#FF5E3A}
.reloj-sala.final span{animation:relojColor .5s steps(1) infinite}
@keyframes relojFinal{0%{background:rgba(13,10,32,.82)}50%{background:rgba(255,94,58,.55)}}
@keyframes relojColor{0%{color:#FF5E3A;text-shadow:0 0 12px rgba(255,94,58,1)}50%{color:#FFFFFF;text-shadow:0 0 12px rgba(255,255,255,1)}}
@media (prefers-reduced-motion:reduce){.reloj-sala.final,.reloj-sala.final span{animation:none}.reloj-sala.final span{color:#FF5E3A}}
@media (orientation:landscape) and (max-height:500px){.reloj-sala{top:calc(env(safe-area-inset-top) + 50px);padding:3px 10px}.reloj-sala span{font-size:clamp(16px,4vh,24px)}}
@media (min-width:760px) and (min-height:600px) and (pointer:coarse){.reloj-sala{top:calc(env(safe-area-inset-top) + 68px);padding:6px 20px}.reloj-sala span{font-size:36px}}
@media (min-width:1200px){.reloj-sala span{font-size:34px}}

/* ================================================================ v2.4.6
   Centrado real de loading y menu.
   Las reglas #pantalla-*>* del kit tienen mas especificidad que .carga-centro
   y .menu-grid; por eso ambos contenedores terminaban position:relative.
   Estos selectores directos restauran el lienzo completo y distribuyen el UI. */

/* ----------------------------- loading */
#pantalla-carga>.carga-centro{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  min-height:100%;
  display:grid;
  grid-auto-flow:row;
  grid-auto-rows:max-content;
  justify-items:center;
  align-content:center;
  gap:clamp(7px,1.4vh,13px);
  padding:
    calc(env(safe-area-inset-top) + 26px)
    max(20px,env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 78px)
    max(20px,env(safe-area-inset-left));
  text-align:center;
}
#pantalla-carga .cubo-marca.iso{
  width:clamp(96px,18vmin,148px);
  height:clamp(96px,18vmin,148px);
  margin:0 0 clamp(2px,.8vh,8px);
  animation:cargaGomita 2.5s ease-in-out infinite;
  filter:drop-shadow(0 12px 28px rgba(255,107,214,.18));
}
@keyframes cargaGomita{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  25%{transform:translateY(-4px) scale(1.02) rotate(-4deg)}
  50%{transform:translateY(-10px) scale(1.045) rotate(6deg)}
  75%{transform:translateY(-4px) scale(1.02) rotate(-2deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
#pantalla-carga .logo-img{
  width:min(360px,78vw);
  margin:0;
}
#pantalla-carga .barra-kit{
  width:min(340px,82vw);
  margin:clamp(4px,.8vh,9px) auto 0;
}
#pantalla-carga .barra-kit-llena::before{width:min(340px,82vw)}
#pantalla-carga .carga-texto{
  min-height:18px;
  margin:0;
  line-height:1.35;
  text-align:center;
}
#pantalla-carga .tip{
  position:absolute;
  left:50%;
  right:auto;
  bottom:calc(env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%);
  width:min(560px,calc(100% - 40px));
  margin:0;
  text-align:center;
  line-height:1.45;
}

/* ----------------------------- menu */
#pantalla-menu>.menu-grid{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-content:center;
  align-content:center;
  justify-items:center;
  gap:clamp(10px,1.6vh,18px);
  padding:
    calc(env(safe-area-inset-top) + 66px)
    max(18px,env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 24px)
    max(18px,env(safe-area-inset-left));
  text-align:center;
}
#pantalla-menu .menu-izq{
  width:min(380px,88vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1vh,10px);
  margin:0 auto;
}
#pantalla-menu .logo-img.grande{
  width:min(350px,80vw);
  margin:0 auto clamp(2px,.7vh,8px);
}
#pantalla-menu .fila-botones.kit{
  width:min(360px,86vw);
  margin:0 auto;
  gap:clamp(6px,.9vh,9px);
}
#pantalla-menu .fila-pills{gap:clamp(6px,1.5vw,9px)}
#pantalla-menu .selectores{
  width:100%;
  gap:6px;
  margin:0;
}
#pantalla-menu .nivel-bots{max-width:100%;justify-content:center;flex-wrap:wrap}
#pantalla-menu #menu-dificultad{row-gap:5px}
#pantalla-menu #menu-dificultad button{padding:6px 8px;font-size:11px}
#pantalla-menu #menu-dificultad span{flex:0 0 100%;text-align:center;margin-right:0}
#pantalla-menu .campo{margin:0 auto}
#pantalla-menu .nota{line-height:1.3;text-align:center}

/* En vertical la vista previa deja de quedar flotando arriba del logo.
   Se vuelve una franja compacta debajo de los controles. */
#pantalla-menu .menu-der{
  order:0;
  width:min(360px,86vw);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto;
}
#pantalla-menu .menu-der .preview{
  flex:0 0 auto;
  width:clamp(62px,17vw,82px);
  height:clamp(62px,17vw,82px);
}
#pantalla-menu .menu-der .nota{
  width:min(96px,24vw);
  text-align:left;
}
#pantalla-menu .menu-der .btn-x16{flex:0 0 auto}

/* Los controles superiores respetan las zonas seguras y quedan simetricos. */
#pantalla-menu>.chip-sonido{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 12px);
  left:calc(env(safe-area-inset-left) + 12px);
}
#pantalla-menu>.chip-monedas{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 12px);
  right:calc(env(safe-area-inset-right) + 12px);
}

/* Escritorio/tablet horizontal: el bloque completo se centra como una unidad,
   no cada columna por separado. */
@media (orientation:landscape) and (min-width:720px){
  #pantalla-menu>.menu-grid{
    grid-template-columns:minmax(320px,400px) minmax(140px,180px);
    column-gap:clamp(34px,5vw,72px);
    row-gap:0;
    padding:
      calc(env(safe-area-inset-top) + 58px)
      max(34px,env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom) + 20px)
      max(34px,env(safe-area-inset-left));
  }
  #pantalla-menu .menu-izq{width:100%}
  #pantalla-menu .menu-der{
    width:100%;
    flex-direction:column;
    gap:8px;
  }
  #pantalla-menu .menu-der .preview{width:120px;height:120px}
  #pantalla-menu .menu-der .nota{width:auto;text-align:center}
}

/* Telefonos verticales bajos: reduce aire, no desplaza el conjunto hacia abajo. */
@media (orientation:portrait) and (max-height:720px){
  #pantalla-menu>.menu-grid{
    gap:6px;
    padding-top:calc(env(safe-area-inset-top) + 56px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 10px);
  }
  #pantalla-menu .menu-izq{gap:4px}
  #pantalla-menu .logo-img.grande{width:min(270px,68vw);margin-bottom:0}
  #pantalla-menu .fila-botones.kit{width:min(320px,82vw);gap:5px}
  #pantalla-menu .fila-pills{gap:5px}
  #pantalla-menu .campo{height:46px}
  #pantalla-menu .nivel-bots{padding:4px 5px 4px 9px;gap:4px}
  #pantalla-menu .nivel-bots button{padding:5px 7px;font-size:11px}
  #pantalla-menu .menu-der .preview{width:58px;height:58px}
  #pantalla-menu .menu-der{gap:7px}
  #pantalla-menu .menu-mascota,#pantalla-menu .menu-frutas{display:none}
}

/* Horizontal muy bajo (movil girado): compacta selectores en un renglon. */
@media (orientation:landscape) and (max-height:500px){
  #pantalla-carga>.carga-centro{
    grid-template-columns:auto minmax(220px,360px);
    grid-template-rows:auto auto auto;
    column-gap:22px;
    row-gap:4px;
    padding:calc(env(safe-area-inset-top) + 14px) 24px calc(env(safe-area-inset-bottom) + 42px);
  }
  #pantalla-carga .cubo-marca.iso{grid-row:1/4;width:96px;height:96px;margin:0}
  #pantalla-carga .logo-img{width:min(300px,44vw)}
  #pantalla-carga .barra-kit{width:min(300px,44vw);margin:0}
  #pantalla-carga .barra-kit-llena::before{width:min(300px,44vw)}
  #pantalla-carga .carga-texto{font-size:11px}
  #pantalla-carga .tip{bottom:calc(env(safe-area-inset-bottom) + 8px);font-size:10px}

  #pantalla-menu>.menu-grid{
    grid-template-columns:minmax(300px,390px) minmax(110px,150px);
    column-gap:28px;
    padding-top:calc(env(safe-area-inset-top) + 48px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  }
  #pantalla-menu .menu-izq{gap:3px}
  #pantalla-menu .logo-img.grande{width:min(220px,32vw);margin:0}
  #pantalla-menu .fila-botones.kit{width:min(290px,42vw);gap:4px}
  #pantalla-menu .fila-pills{gap:4px}
  #pantalla-menu .selectores{flex-direction:row;justify-content:center;gap:5px}
  #pantalla-menu .nivel-bots{padding:3px 4px 3px 7px;gap:3px;white-space:nowrap}
  #pantalla-menu .nivel-bots span{font-size:9px;margin-right:0}
  #pantalla-menu .nivel-bots button{font-size:10px;padding:4px 6px}
  #pantalla-menu .campo{height:38px;width:min(270px,40vw)}
  #pantalla-menu .menu-der .preview{width:88px;height:88px}
  #pantalla-menu .menu-der{gap:4px}
  #pantalla-menu .menu-der .btn-x16{padding:6px 10px}
  #pantalla-menu .menu-mascota,#pantalla-menu .menu-frutas{display:none}
}



/* ================================================================ v2.4.8
   Menu: la columna principal queda EXACTAMENTE sobre el centro de pantalla.
   La vista previa ocupa una columna espejo a la derecha; una columna vacia del
   mismo ancho a la izquierda evita que el preview empuje logo/botones. */
#pantalla-menu>.menu-grid{
  /* padding vertical simetrico: el centro geometrico ya no se desplaza por
     reservar mas aire arriba que abajo. */
  padding-top:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 58px);
  padding-bottom:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 58px);
}
@media (orientation:portrait) and (max-height:720px){
  #pantalla-menu>.menu-grid{
    padding-top:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 48px);
    padding-bottom:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 48px);
  }
}
@media (orientation:landscape) and (min-width:720px){
  #pantalla-menu>.menu-grid{
    grid-template-columns:minmax(90px,160px) minmax(320px,400px) minmax(90px,160px);
    column-gap:clamp(18px,3vw,42px);
    width:100%;
    justify-content:center;
    justify-items:center;
  }
  #pantalla-menu .menu-izq{
    grid-column:2;
    width:100%;
    justify-self:center;
    margin-left:auto;
    margin-right:auto;
  }
  #pantalla-menu .menu-der{
    grid-column:3;
    width:100%;
    justify-self:center;
  }
  #pantalla-menu .menu-der .preview{
    width:clamp(92px,10vw,120px);
    height:clamp(92px,10vw,120px);
  }
}

/* El tercer ajuste de sala entra alineado con bots y tiempo. */
#pantalla-menu .selectores{width:min(380px,90vw)}
#pantalla-menu .nivel-bots{width:max-content;max-width:100%;margin-inline:auto}
#pantalla-menu #menu-zoom button{min-width:68px}

@media (orientation:landscape) and (max-height:500px){
  #pantalla-menu>.menu-grid{
    grid-template-columns:minmax(70px,125px) minmax(300px,390px) minmax(70px,125px);
    column-gap:clamp(12px,2vw,24px);
    padding-top:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 38px);
    padding-bottom:calc(max(env(safe-area-inset-top),env(safe-area-inset-bottom)) + 38px);
  }
  #pantalla-menu .selectores{flex-wrap:wrap;width:min(390px,44vw)}
  #pantalla-menu #menu-zoom button{min-width:54px}
}


/* v2.4.9 · pausa de un segundo al abrir una sala */
.cuenta-inicio{
  position:absolute;inset:0;z-index:34;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;text-shadow:0 4px 0 #1b1035,0 0 18px rgba(255,255,255,.45)
}
.cuenta-inicio[hidden]{display:none!important}
.cuenta-inicio b{font-size:clamp(68px,16vmin,150px);line-height:.8;color:#fff;font-weight:1000}
.cuenta-inicio small{margin-top:18px;padding:8px 18px;border-radius:999px;background:rgba(27,16,53,.78);color:#fff;font-weight:900;letter-spacing:.16em;font-size:clamp(12px,2.4vmin,20px)}

/* ================================================================ v2.4.15
   Tres estilos aleatorios de derrota, reconstruidos con datos vivos de la sala.
   Las imágenes aprobadas se usan como textura de referencia muy tenue para que
   el lenguaje visual sea el mismo sin hornear nombres/puntos fijos. */
.modal.modal-derrota{
  position:relative;overflow:hidden;width:min(430px,94vw);max-height:calc(100vh - 18px);
  padding:18px 18px 16px;border-radius:28px;border:4px solid #17102f;
  background:#201947;color:#fff;box-shadow:0 18px 0 #090715,0 24px 50px rgba(0,0,0,.45);
}
.modal-derrota>h3{display:none}.modal-derrota>p{display:none}
.modal-derrota .derrota-ref{position:absolute;inset:0;z-index:0;background-image:var(--derrota-ref);background-position:center;background-size:cover;opacity:.12;filter:saturate(1.25) contrast(1.06);pointer-events:none}
.modal-derrota>*:not(.derrota-ref){position:relative;z-index:1}
.derrota-cabecera{text-align:center;margin:-2px 0 10px}
.derrota-titulo{font-family:Impact,'Arial Black',system-ui,sans-serif;font-size:clamp(35px,10vw,54px);line-height:.92;letter-spacing:.035em;text-transform:uppercase}
.derrota-rival{font-family:'Arial Black',system-ui,sans-serif;font-size:clamp(25px,7vw,38px);font-weight:1000;line-height:1.05;margin-top:8px;text-transform:uppercase;overflow-wrap:anywhere}
.derrota-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;margin:10px 0;background:rgba(10,7,31,.78);border:3px solid #4e347f}
.derrota-versus>div{display:flex;flex-direction:column;align-items:center;min-width:0}.derrota-versus b{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(35px,9vw,52px);line-height:1}.derrota-versus small{font-weight:1000;letter-spacing:.08em}.derrota-versus strong{font-family:Impact,'Arial Black',sans-serif;font-size:38px;color:#ffd23f;text-shadow:0 3px 0 #8b3a14}
.derrota-vida-txt{text-align:center;margin:12px 0 6px;font-family:'Arial Black',system-ui,sans-serif;font-size:18px;font-weight:1000;letter-spacing:.04em;color:#ff654a}
.derrota-vidas{display:flex;justify-content:center;gap:10px;margin:7px 0 14px;padding:9px 12px;border-radius:18px;background:rgba(12,8,37,.72);border:2px solid #53348a}
.vida-corazon{font-size:38px;line-height:1;color:#28204e;-webkit-text-stroke:2px #71589d;text-shadow:none}.vida-corazon.lleno{color:#ff456a;-webkit-text-stroke:2px #fff0f4;text-shadow:0 0 14px rgba(255,69,106,.45)}
.derrota-datos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0}.derrota-datos .dato{min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px;border:3px solid #33245f;border-radius:16px;background:#100d2b}.derrota-datos b{font-family:Impact,'Arial Black',sans-serif;font-size:30px;line-height:1}.derrota-datos small{font-size:10px;font-weight:1000;letter-spacing:.07em;margin-top:5px;color:#cdbcea}
.lugar-circulo{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-family:Impact,'Arial Black',sans-serif;font-size:30px;line-height:1;background:#6f35bc;border:4px solid #dba7ff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}
.derrota-premio{margin:9px auto 10px;padding:9px 14px;border-radius:14px;background:#110a28;border:3px solid #36215e;text-align:center;color:#ffd23f;font-family:'Arial Black',system-ui,sans-serif;font-weight:1000}
.modal-derrota .btn{height:58px;border-radius:17px;font-family:'Arial Black',system-ui,sans-serif;font-size:19px;font-weight:1000;text-transform:uppercase;letter-spacing:.01em}.modal-derrota .derrota-volver,.modal-derrota .derrota-continuar{font-size:20px}.modal-derrota .derrota-menu{opacity:.86}

/* 01 · Fantasy/chibi premium: cinta morada, dorado y verde gel. */
.derrota-estilo-1{background:linear-gradient(180deg,#2d1a62,#1e1547 55%,#211751)!important;border-color:#130b2e!important}
.derrota-estilo-1 .derrota-titulo{padding:13px 10px 15px;border:3px solid #ffb449;border-radius:52% 52% 18px 18px;background:linear-gradient(#7d39d1,#4b208e);color:#fff3dc;text-shadow:0 4px 0 #56265e,0 0 18px rgba(255,188,75,.28)}
.derrota-estilo-1 .derrota-rival{color:#f3d8ff;text-shadow:0 4px 0 #6a288e}
.derrota-estilo-1 .derrota-versus{border-color:#693a94}.derrota-estilo-1 .derrota-versus>div:first-child b{color:#ffd23f}.derrota-estilo-1 .derrota-versus>div:last-child b{color:#cf9cff}
.derrota-estilo-1 .derrota-datos .dato{background:linear-gradient(#171039,#100a28);border-color:#51347d}.derrota-estilo-1 .lugar-circulo{background:linear-gradient(#a34be4,#5a1fa7);border-color:#f3c7ff}
.derrota-estilo-1 .derrota-volver,.derrota-estilo-1 .derrota-continuar{background:linear-gradient(#92ff51,#49ce22);border-color:#174f13;color:#15390f;box-shadow:inset 0 5px 0 rgba(255,255,255,.45),0 7px 0 #245b12}

/* 02 · VS competitivo: rojo, naranja y módulos separados. */
.derrota-estilo-2{background:linear-gradient(180deg,#121027,#17132f 60%,#0e0c22)!important;border-color:#39305e!important}
.derrota-estilo-2 .derrota-titulo{color:#ff563e;text-shadow:0 5px 0 #6f171e,0 0 12px rgba(255,64,45,.2);font-size:clamp(42px,11vw,62px)}
.derrota-estilo-2 .derrota-rival{padding:12px 10px;border-radius:15px;background:linear-gradient(90deg,#472048,#7e2758,#472048);border:3px solid #a445ad;color:#fff}
.derrota-estilo-2 .derrota-versus{background:#0d0b24;border-color:#382a61}.derrota-estilo-2 .derrota-versus strong{font-size:50px;color:#ffac25;text-shadow:0 4px 0 #8b3311}.derrota-estilo-2 .derrota-versus>div:first-child b{color:#ff972d}.derrota-estilo-2 .derrota-versus>div:last-child b{color:#d4b8ff}
.derrota-estilo-2 .derrota-vida-txt{font-size:20px;color:#ff634f}.derrota-estilo-2 .derrota-datos .dato{background:linear-gradient(#17132f,#0e0b22);border-color:#322851}.derrota-estilo-2 .lugar-circulo{background:#37206e;border-color:#8f62d2}.derrota-estilo-2 .derrota-premio{background:#1a1235;border-color:#3d2a64}
.derrota-estilo-2 .derrota-volver,.derrota-estilo-2 .derrota-continuar{background:linear-gradient(#8ff046,#53d02c);border-color:#1c4f16;color:#15320d;box-shadow:0 6px 0 #1d5c16}

/* 03 · Comic japonés: bocadillos, lima/cian y cortes angulares. */
.derrota-estilo-3{background:linear-gradient(135deg,#281064,#160b3d 50%,#26105c)!important;border-color:#15062e!important}
.derrota-estilo-3::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(115deg,transparent 0 14px,#6625ff 15px 18px,transparent 19px 30px)}
.derrota-estilo-3 .derrota-titulo{display:inline-block;margin:0 auto 2px;padding:8px 17px;color:#f4ff35;background:#080711;border:4px solid #fff;transform:rotate(-3deg);text-shadow:4px 4px 0 #050505;font-size:clamp(44px,12vw,66px)}
.derrota-estilo-3 .derrota-rival{color:#f4ff2f;text-shadow:4px 4px 0 #050505;transform:rotate(1deg)}
.derrota-estilo-3 .derrota-versus{border:4px solid #812eff;background:#10082c;clip-path:polygon(3% 0,97% 0,100% 13%,97% 100%,3% 100%,0 86%)}.derrota-estilo-3 .derrota-versus>div:first-child b{color:#35e2ff}.derrota-estilo-3 .derrota-versus>div:last-child b{color:#f5ff34}
.derrota-estilo-3 .derrota-vida-txt{font-family:Impact,'Arial Black',sans-serif;font-size:28px;color:#fff;text-shadow:3px 3px 0 #000}.derrota-estilo-3 .derrota-vidas{border:4px solid #7b20fb;background:#0b0825;clip-path:polygon(4% 0,96% 0,100% 20%,96% 100%,4% 100%,0 80%)}
.derrota-estilo-3 .derrota-datos .dato{border:4px solid #fff;background:#20bde6;color:#07101b;transform:rotate(-1deg)}.derrota-estilo-3 .derrota-datos .dato:nth-child(1){background:#bfff28}.derrota-estilo-3 .derrota-datos .dato:nth-child(3){background:#ffcf37;transform:rotate(1deg)}.derrota-estilo-3 .derrota-datos small{color:#16112b}.derrota-estilo-3 .lugar-circulo{background:#7436c5;border-color:#fff;color:#fff}
.derrota-estilo-3 .derrota-premio{background:#bdff31;border:4px solid #fff;color:#17111f;clip-path:polygon(5% 0,100% 4%,95% 100%,0 92%)}
.derrota-estilo-3 .derrota-volver,.derrota-estilo-3 .derrota-continuar{background:#bfff21;border:4px solid #fff;color:#111;box-shadow:7px 7px 0 #0b0619;clip-path:polygon(5% 0,100% 5%,96% 100%,0 94%);font-family:Impact,'Arial Black',sans-serif;font-size:25px}

@media (max-height:680px){
  .modal.modal-derrota{padding:12px 14px 12px;max-height:calc(100vh - 10px);overflow:auto}.derrota-titulo{font-size:34px}.derrota-rival{font-size:24px}.derrota-versus{margin:7px 0;padding:7px 10px}.derrota-versus b{font-size:34px}.derrota-vida-txt{margin:7px 0 3px;font-size:15px}.derrota-vidas{margin:4px 0 8px;padding:5px}.vida-corazon{font-size:27px}.derrota-datos .dato{min-height:64px}.derrota-datos b{font-size:23px}.lugar-circulo{width:43px;height:43px;font-size:23px}.derrota-premio{margin:6px auto;padding:6px 10px}.modal-derrota .btn{height:46px;margin-top:6px;font-size:16px}.derrota-estilo-3 .derrota-vida-txt{font-size:20px}
}

/* ================================================================ v2.4.15
   Derrota aleatoria: tres direcciones visuales basadas en los mockups aprobados.
   Los textos son HTML real y siempre salen de la partida; la imagen de referencia
   solo funciona como textura tenue detrás del panel para conservar exactamente
   la atmósfera de cada visual sin hornear datos falsos. */
.modal.modal-derrota{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:min(430px,94vw);
  max-height:min(92vh,760px);
  overflow-y:auto;
  padding:18px 18px 16px;
  border-radius:30px;
  border-width:4px;
  background:#17112f;
  box-shadow:0 10px 0 #080615,0 22px 55px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.05);
}
.modal-derrota>.derrota-ref{
  position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(10,7,28,.88),rgba(10,7,28,.92)),var(--derrota-ref);
  background-size:cover;background-position:center;
  filter:saturate(1.15) contrast(1.05);
}
.modal-derrota::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(152,69,255,.22),transparent 36%)}
.modal-derrota>h3,.modal-derrota>p{display:none}
.derrota-cabecera{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 10px}
.derrota-titulo{font-weight:1000;line-height:.9;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.derrota-rival{font-weight:1000;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.derrota-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;border-radius:18px;background:rgba(8,5,28,.82);border:3px solid #25154a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.035)}
.derrota-versus>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.derrota-versus b{font-size:clamp(30px,10vw,48px);line-height:1;font-weight:1000}
.derrota-versus small{font-size:10px;font-weight:1000;letter-spacing:.1em;margin-top:3px}
.derrota-versus strong{font-size:clamp(30px,9vw,44px);line-height:1;font-style:italic;font-weight:1000}
.derrota-vida-txt{margin:12px 0 7px;text-align:center;font-size:14px;font-weight:1000;letter-spacing:.04em}
.derrota-vidas{display:flex;justify-content:center;gap:7px;padding:8px 8px 10px}
.vida-corazon{font-size:36px;line-height:1;color:#231841;-webkit-text-stroke:2px #675594;filter:drop-shadow(0 3px 0 #080615)}
.vida-corazon.lleno{color:#ff4f73;-webkit-text-stroke:2px #ff9bac;filter:drop-shadow(0 3px 0 #76122e) drop-shadow(0 0 9px rgba(255,79,115,.5))}
.derrota-datos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:5px 0 10px;align-items:stretch}
.derrota-datos .dato{min-width:0;min-height:76px;padding:9px 5px;border-radius:15px;background:rgba(12,8,36,.88);border:2.5px solid #30205e;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.derrota-datos .dato>b{font-size:clamp(21px,6.5vw,31px);line-height:1;font-weight:1000;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.derrota-datos .dato small{font-size:9px;font-weight:1000;margin-top:5px;letter-spacing:.08em}
.derrota-datos .dato.lugar{background:transparent;border:none;box-shadow:none;padding:0}
.lugar-circulo{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:1000;background:#201747;border:5px solid #6543a0;box-shadow:0 4px 0 #080615,inset 0 0 0 3px rgba(255,255,255,.05)}
.derrota-premio{margin:0 0 9px;padding:9px 12px;border-radius:14px;font-size:14px;font-weight:1000;letter-spacing:.02em;background:rgba(10,7,28,.88);border:2.5px solid #281850;color:#ffd43b}
.modal-derrota .btn{height:58px;border-radius:16px;font-size:17px;font-weight:1000;text-transform:uppercase;letter-spacing:.025em;margin-top:8px}
.modal-derrota .derrota-continuar,.modal-derrota .derrota-volver{font-size:19px}

/* Estilo 1: fantasía/chibi premium, morado + oro */
.modal-derrota.derrota-estilo-1{border-color:#1d103f;background:linear-gradient(180deg,#28135b,#17102f 62%,#120c27)}
.derrota-estilo-1 .derrota-titulo{font-family:Arial Black,Impact,sans-serif;font-size:clamp(30px,9vw,47px);color:#fff2cf;text-shadow:0 4px 0 #723878,0 7px 0 #1a0b35,0 0 18px rgba(255,214,101,.2)}
.derrota-estilo-1 .derrota-rival{font-size:clamp(30px,9vw,48px);color:#e6c5ff;text-shadow:0 4px 0 #3d176e}
.derrota-estilo-1 .derrota-versus strong{color:#ffd060;text-shadow:0 3px 0 #9c4a18}
.derrota-estilo-1 .derrota-versus>div:first-child b{color:#ffd34f}.derrota-estilo-1 .derrota-versus>div:last-child b{color:#d6b7ff}
.derrota-estilo-1 .derrota-vida-txt{color:#ff654b}
.derrota-estilo-1 .lugar-circulo{background:radial-gradient(circle at 35% 28%,#8d63d8,#382168 65%);border-color:#b17cff;color:#fff}

/* Estilo 2: competitivo VS, rojo/naranja + violeta */
.modal-derrota.derrota-estilo-2{border-color:#241244;background:linear-gradient(180deg,#111022,#171127)}
.derrota-estilo-2 .derrota-titulo{font-family:Impact,Arial Black,sans-serif;font-size:clamp(38px,11vw,58px);color:#ff593d;letter-spacing:.04em;text-shadow:0 5px 0 #861f26,0 8px 0 #100818}
.derrota-estilo-2 .derrota-rival{width:100%;padding:12px;border-radius:17px;background:linear-gradient(90deg,#421351,#9a1766,#421351);border:3px solid #a446d7;font-size:clamp(23px,7vw,34px);color:#fff;text-shadow:0 3px 0 #1a0a2a}
.derrota-estilo-2 .derrota-versus strong{color:#ff9f25;text-shadow:0 4px 0 #8a2916}
.derrota-estilo-2 .derrota-versus>div:first-child b{color:#ff9827}.derrota-estilo-2 .derrota-versus>div:last-child b{color:#d2b2ff}
.derrota-estilo-2 .derrota-vida-txt{font-family:Impact,Arial Black,sans-serif;font-size:18px;color:#ff5b48}
.derrota-estilo-2 .derrota-datos .dato{background:#15122e;border-color:#38255e}
.derrota-estilo-2 .lugar-circulo{background:linear-gradient(180deg,#4b2d88,#241847);border-color:#9f63e0;color:#e5c9ff}

/* Estilo 3: comic japonés/neón */
.modal-derrota.derrota-estilo-3{border-color:#211156;background:#140934;border-radius:26px}
.derrota-estilo-3 .derrota-ref{background-image:linear-gradient(rgba(11,5,34,.80),rgba(11,5,34,.88)),var(--derrota-ref);filter:saturate(1.5) contrast(1.15)}
.derrota-estilo-3 .derrota-titulo{font-family:Impact,Arial Black,sans-serif;font-style:italic;font-size:clamp(46px,13vw,68px);color:#dcff16;transform:rotate(-2deg);text-shadow:5px 5px 0 #08030e,-3px 3px 0 #00d9ff,0 0 16px rgba(220,255,22,.25)}
.derrota-estilo-3 .derrota-rival{font-family:Impact,Arial Black,sans-serif;font-style:italic;font-size:clamp(26px,8vw,39px);color:#fff;white-space:normal;line-height:1;text-shadow:4px 4px 0 #05030d}
.derrota-estilo-3 .derrota-versus{border-color:#7219ff;background:#08031c;transform:skewX(-2deg)}
.derrota-estilo-3 .derrota-versus>*{transform:skewX(2deg)}
.derrota-estilo-3 .derrota-versus strong{color:#dcff16;text-shadow:3px 3px 0 #000}
.derrota-estilo-3 .derrota-versus b{color:#18dfff;text-shadow:3px 3px 0 #000}
.derrota-estilo-3 .derrota-vida-txt{font-family:Impact,Arial Black,sans-serif;font-size:22px;color:#fff;font-style:italic;text-shadow:3px 3px 0 #4c0d84}
.derrota-estilo-3 .derrota-datos .dato{border:3px solid #090510;background:#1a0a41;transform:skewX(-4deg)}
.derrota-estilo-3 .derrota-datos .dato>*{transform:skewX(4deg)}
.derrota-estilo-3 .derrota-datos .dato:nth-child(1){background:#13bce2;color:#fff}.derrota-estilo-3 .derrota-datos .dato:nth-child(3){background:#ffca27;color:#20122b}
.derrota-estilo-3 .derrota-datos .dato.lugar{background:transparent}
.derrota-estilo-3 .lugar-circulo{background:#ffca27;border:5px solid #111;color:#261149;box-shadow:5px 5px 0 #08030e}
.derrota-estilo-3 .derrota-premio{background:#baf322;border-color:#111;color:#171021;transform:skewX(-4deg);box-shadow:5px 5px 0 #08030e}
.derrota-estilo-3 .derrota-volver,.derrota-estilo-3 .derrota-continuar{font-family:Impact,Arial Black,sans-serif;font-style:italic;font-size:24px;transform:skewX(-3deg)}

@media (orientation:landscape) and (max-height:560px){
  .modal.modal-derrota{width:min(650px,90vw);max-height:94vh;padding:10px 14px;display:grid;grid-template-columns:1.1fr .9fr;column-gap:12px;align-items:center}
  .modal-derrota .derrota-ref{grid-column:1/-1}
  .modal-derrota .derrota-cabecera,.modal-derrota .derrota-versus,.modal-derrota .derrota-vida-txt,.modal-derrota .derrota-vidas{grid-column:1}
  .modal-derrota .derrota-datos,.modal-derrota .derrota-premio,.modal-derrota .btn{grid-column:2}
  .modal-derrota .derrota-datos{margin:0}.modal-derrota .derrota-versus{margin:4px 0}.modal-derrota .derrota-vidas{padding:3px}.vida-corazon{font-size:27px}
}

/* ================================================================
   v2.4.17 · modal derrota rehecho con los nuevos visuales random
   y ajuste de iconos de poderes para que no se desborden.
================================================================ */
.poder,.ranura,.lista-poder .ic{
  background-size:72% 72% !important;
}
.lista-poder .ic{background-size:68% 68% !important}

.modal.modal-derrota{
  width:min(92vw,520px) !important;
  max-height:92vh !important;
  padding:14px 14px 16px !important;
  overflow:auto !important;
  display:block !important;
  border-radius:26px !important;
  border:3px solid #1a103d !important;
  background:linear-gradient(180deg,#1a103f,#0e0a24) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.modal-derrota>h3,.modal-derrota>p{display:none !important}
.modal-derrota .derrota-ref{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(9,6,24,.88),rgba(9,6,24,.94)),var(--derrota-ref);
  background-position:center top;background-size:cover;opacity:.22;
}
.modal-derrota::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 14%,rgba(176,92,255,.26),transparent 34%),
             linear-gradient(180deg,rgba(255,255,255,.03),transparent 14%);
}
.modal-derrota>*:not(.derrota-ref){position:relative;z-index:1}
.modal-derrota .derrota-art,
.modal-derrota .derrota-hero{
  position:absolute;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:contain;
}
.modal-derrota .derrota-art{background-image:var(--art)}
.modal-derrota .derrota-hero{background-image:var(--hero);filter:drop-shadow(0 8px 18px rgba(0,0,0,.44))}
.modal-derrota .derrota-art-titulo{top:8px;left:12px;right:12px;height:98px}
.modal-derrota .derrota-art-extra{top:58px;right:14px;width:110px;height:82px}
.modal-derrota .derrota-cabecera{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 10px;padding-top:94px;min-height:138px;text-align:center}
.modal-derrota .derrota-titulo{font-weight:1000;text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.modal-derrota .derrota-rival{max-width:100%;overflow-wrap:anywhere;text-transform:uppercase;font-weight:1000}
.modal-derrota .derrota-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(7,5,21,.82);border:2px solid rgba(135,90,255,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);margin:10px 0 6px}
.modal-derrota .derrota-versus>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.modal-derrota .derrota-versus b{font-size:clamp(27px,9vw,42px);line-height:1;font-weight:1000;white-space:nowrap}
.modal-derrota .derrota-versus small{font-size:10px;letter-spacing:.08em;font-weight:1000;opacity:.8;margin-top:2px}
.modal-derrota .derrota-versus strong{font-size:clamp(30px,10vw,46px);line-height:1;font-weight:1000}
.modal-derrota .derrota-vida-txt{text-align:center;margin:10px 0 6px;font-size:14px;font-weight:1000;letter-spacing:.05em;text-transform:uppercase}
.modal-derrota .derrota-vidas{display:flex;justify-content:center;gap:8px;padding:7px 8px 10px;border-radius:18px;background:rgba(6,4,20,.56);border:2px solid rgba(133,93,223,.24);margin-bottom:10px}
.modal-derrota .vida-corazon{font-size:34px;line-height:1;color:#251845;-webkit-text-stroke:2px #6b5a98;filter:drop-shadow(0 3px 0 #090515)}
.modal-derrota .vida-corazon.lleno{color:#ff567d;-webkit-text-stroke:2px #ffb4c3;filter:drop-shadow(0 3px 0 #7a1030) drop-shadow(0 0 9px rgba(255,86,125,.5))}
.modal-derrota .derrota-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.modal-derrota .derrota-datos .dato{min-height:76px;padding:8px 6px;border-radius:16px;border:2px solid #30235c;background:rgba(15,10,39,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.modal-derrota .derrota-datos .dato>b{font-size:clamp(20px,6vw,31px);line-height:1;font-weight:1000;white-space:nowrap}
.modal-derrota .derrota-datos .dato small{margin-top:5px;font-size:9px;letter-spacing:.08em;font-weight:1000;opacity:.9}
.modal-derrota .derrota-datos .dato.lugar{background:transparent;border:none;box-shadow:none;padding:0}
.modal-derrota .lugar-circulo{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:1000;background:#271956;border:4px solid #8d6fe1;box-shadow:0 4px 0 #090516,inset 0 0 0 2px rgba(255,255,255,.08)}
.modal-derrota .derrota-premio{margin:0 0 10px;padding:10px 12px;border-radius:14px;border:2px solid #32205e;background:rgba(12,8,31,.9);text-align:center;color:#ffd43b;font-weight:1000;font-size:14px;letter-spacing:.03em}
.modal-derrota .btn{height:56px;border-radius:18px;font-size:17px;font-weight:1000;text-transform:uppercase;letter-spacing:.02em;margin-top:8px}
.modal-derrota .derrota-menu{opacity:.92}

/* ---------------- estilo 1 · princesa / elegante */
.modal-derrota.derrota-estilo-1{background:linear-gradient(180deg,#2a1562,#1c0f41 62%,#120a2a) !important;border-color:#25124a !important}
.derrota-estilo-1 .derrota-art-titulo{top:8px;height:104px}
.derrota-estilo-1 .derrota-hero{top:14px;right:10px;width:138px;height:138px}
.derrota-estilo-1 .derrota-cabecera{padding-top:18px;min-height:166px}
.derrota-estilo-1 .derrota-titulo{position:absolute;top:22px;left:24px;right:24px;font-family:'Arial Black',Impact,sans-serif;font-size:clamp(26px,8.2vw,42px);color:#fff2d8;text-shadow:0 4px 0 #70367c,0 7px 0 #1a0c35}
.derrota-estilo-1 .derrota-rival{margin-top:92px;font-size:clamp(37px,11vw,58px);color:#f2d5ff;text-shadow:0 4px 0 #4b187f,0 0 12px rgba(255,220,255,.15);line-height:.96}
.derrota-estilo-1 .derrota-versus strong{color:#ffcf54;text-shadow:0 3px 0 #943f18}
.derrota-estilo-1 .derrota-versus>div:first-child b{color:#ffd34f}.derrota-estilo-1 .derrota-versus>div:last-child b{color:#d5b6ff}
.derrota-estilo-1 .derrota-vida-txt{color:#ff7659}
.derrota-estilo-1 .lugar-circulo{background:radial-gradient(circle at 35% 28%,#875de2,#362165 64%);border-color:#c28dff;color:#fff}
.derrota-estilo-1 .derrota-volver,.derrota-estilo-1 .derrota-continuar{background:linear-gradient(180deg,#9df93f,#58d81f);border:2px solid #204d11;color:#14320c;box-shadow:inset 0 4px 0 rgba(255,255,255,.42),0 5px 0 #285b15}
.derrota-estilo-1 .derrota-menu{background:linear-gradient(180deg,#7d3ded,#5d20bc);border:2px solid #27104f;color:#f3dcff;box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 5px 0 #321567}

/* ---------------- estilo 2 · batalla / derrotado por */
.modal-derrota.derrota-estilo-2{background:linear-gradient(180deg,#130e29,#19122f) !important;border-color:#2f204f !important}
.derrota-estilo-2 .derrota-art-titulo{top:8px;height:88px}
.derrota-estilo-2 .derrota-titulo{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}
.derrota-estilo-2 .derrota-hero{top:88px;right:16px;width:110px;height:110px}
.derrota-estilo-2 .derrota-cabecera{padding-top:86px;min-height:176px;align-items:stretch}
.derrota-estilo-2 .derrota-rival{margin-right:116px;padding:12px 16px;border-radius:18px;border:3px solid #9e4de4;background:linear-gradient(90deg,#491459,#9e1c6f,#491459);color:#fff;text-shadow:0 3px 0 #250d32;font-size:clamp(25px,7.4vw,40px);text-align:center}
.derrota-estilo-2 .derrota-versus{background:#0d0a20;border-color:#34285a}
.derrota-estilo-2 .derrota-versus strong{color:#ffab2a;text-shadow:0 4px 0 #8d3117}
.derrota-estilo-2 .derrota-versus>div:first-child b{color:#ff9a30}.derrota-estilo-2 .derrota-versus>div:last-child b{color:#d6bfff}
.derrota-estilo-2 .derrota-vida-txt{font-family:Impact,'Arial Black',sans-serif;font-size:18px;color:#ff614d}
.derrota-estilo-2 .derrota-datos .dato{background:#15112f;border-color:#3a2b63}
.derrota-estilo-2 .derrota-datos .dato:nth-child(1) b{color:#ffc83f}.derrota-estilo-2 .derrota-datos .dato:nth-child(3) b{color:#ff6958}
.derrota-estilo-2 .lugar-circulo{background:linear-gradient(180deg,#4d2d8c,#27194d);border-color:#9765e4;color:#f1dcff}
.derrota-estilo-2 .derrota-premio{background:#181132;border-color:#3c2b68;color:#ffd24c}
.derrota-estilo-2 .derrota-volver,.derrota-estilo-2 .derrota-continuar{background:linear-gradient(180deg,#92f73d,#63d82c);border:2px solid #214f12;color:#13320b;box-shadow:inset 0 4px 0 rgba(255,255,255,.3),0 5px 0 #285d15}
.derrota-estilo-2 .derrota-menu{background:linear-gradient(180deg,#783ce1,#5922b5);border:2px solid #221045;color:#efe1ff;box-shadow:inset 0 3px 0 rgba(255,255,255,.16),0 5px 0 #321863}

/* ---------------- estilo 3 · cómic / oh nooo */
.modal-derrota.derrota-estilo-3{background:linear-gradient(135deg,#26105f,#130726 56%,#251058) !important;border-color:#1a082f !important}
.derrota-estilo-3::after{background:radial-gradient(circle at 30% 16%,rgba(0,213,255,.16),transparent 27%),radial-gradient(circle at 70% 18%,rgba(234,255,0,.12),transparent 25%),repeating-linear-gradient(116deg,transparent 0 15px,rgba(109,40,255,.12) 16px 19px,transparent 20px 32px)}
.derrota-estilo-3 .derrota-art-titulo{top:10px;left:10px;right:110px;height:96px}
.derrota-estilo-3 .derrota-art-extra{top:16px;right:16px;width:112px;height:86px}
.derrota-estilo-3 .derrota-titulo{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}
.derrota-estilo-3 .derrota-hero{top:102px;left:12px;width:128px;height:128px}
.derrota-estilo-3 .derrota-hero-player{top:102px;right:12px;width:128px;height:128px}
.derrota-estilo-3 .derrota-cabecera{padding-top:92px;min-height:230px}
.derrota-estilo-3 .derrota-rival{margin-top:142px;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(24px,8vw,38px);font-style:italic;color:#fff;text-shadow:4px 4px 0 #05030d,-3px 3px 0 #00d6ff;line-height:1.02}
.derrota-estilo-3 .derrota-versus{border:3px solid #7f21ff;background:#08031d;transform:skewX(-3deg)}
.derrota-estilo-3 .derrota-versus>*{transform:skewX(3deg)}
.derrota-estilo-3 .derrota-versus strong{color:#deff2b;text-shadow:3px 3px 0 #000}
.derrota-estilo-3 .derrota-versus b{color:#21d9ff;text-shadow:3px 3px 0 #000}
.derrota-estilo-3 .derrota-vida-txt{font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:21px;color:#fff;text-shadow:3px 3px 0 #410975}
.derrota-estilo-3 .derrota-vidas{border:3px solid #7622fa;background:#0b0826;clip-path:polygon(4% 0,96% 0,100% 18%,97% 100%,3% 100%,0 84%)}
.derrota-estilo-3 .derrota-datos .dato{border:3px solid #0c0613;transform:skewX(-4deg)}
.derrota-estilo-3 .derrota-datos .dato>*{transform:skewX(4deg)}
.derrota-estilo-3 .derrota-datos .dato:nth-child(1){background:#18bee8;color:#fff}.derrota-estilo-3 .derrota-datos .dato:nth-child(3){background:#ffca2a;color:#23152b}
.derrota-estilo-3 .derrota-datos .dato.lugar{transform:none}.derrota-estilo-3 .derrota-datos .dato.lugar>*{transform:none}
.derrota-estilo-3 .lugar-circulo{background:#ffca27;border:4px solid #131118;color:#27134a;box-shadow:5px 5px 0 #08030e}
.derrota-estilo-3 .derrota-premio{background:#bdfb27;border:3px solid #111;color:#171020;transform:skewX(-4deg);box-shadow:5px 5px 0 #08030e}
.derrota-estilo-3 .derrota-volver,.derrota-estilo-3 .derrota-continuar{font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:22px;background:#bfff23;border:3px solid #fff;color:#111;box-shadow:6px 6px 0 #0a0517;clip-path:polygon(4% 0,100% 5%,97% 100%,0 95%)}
.derrota-estilo-3 .derrota-menu{font-family:Impact,'Arial Black',sans-serif;background:#6a2de2;border:3px solid #fff;color:#efe1ff;box-shadow:6px 6px 0 #0a0517;clip-path:polygon(4% 0,100% 5%,97% 100%,0 95%)}

@media (max-width:430px){
  .modal.modal-derrota{padding:12px 12px 14px !important}
  .modal-derrota .btn{height:50px;font-size:15px}
  .modal-derrota .derrota-datos .dato{min-height:66px}
  .modal-derrota .vida-corazon{font-size:29px}
  .modal-derrota .lugar-circulo{width:58px;height:58px;font-size:21px}
  .derrota-estilo-1 .derrota-rival{margin-top:88px}
  .derrota-estilo-2 .derrota-rival{margin-right:96px;font-size:clamp(22px,7vw,34px)}
  .derrota-estilo-2 .derrota-hero{width:92px;height:92px;top:92px}
  .derrota-estilo-3 .derrota-hero,.derrota-estilo-3 .derrota-hero-player{width:112px;height:112px;top:104px}
  .derrota-estilo-3 .derrota-cabecera{min-height:214px}
  .derrota-estilo-3 .derrota-rival{margin-top:126px;font-size:clamp(21px,7vw,33px)}
}

/* =====================================================================
   MENÚ GOMICRAZY v2.4.28 · composición adaptable a cualquier resolución
   La escena ocupa toda la pantalla. Dentro se dibuja un stage base 1648x928
   que se escala en modo COVER para mantener el acomodo en cualquier device.
   ===================================================================== */
#pantalla-menu{
  padding:0!important;
  background:#050314!important;
  overflow:hidden;
}
#pantalla-menu::before{display:none!important}
#pantalla-menu>.menu-escena{
  position:absolute!important;
  inset:0;
  overflow:hidden;
  z-index:1;
  background:#050314;
  isolation:isolate;
}
/* Rellena cualquier sobrante de aspecto sin recortar el menú real. Es la misma
   escena desenfocada detrás; el stage completo siempre queda visible encima. */
#pantalla-menu>.menu-escena::before{
  content:'';position:absolute;inset:-28px;z-index:0;pointer-events:none;
  background:url(../assets/ui/menu_nuevo/menu_referencia.webp) center/cover no-repeat;
  filter:none;transform:none;
}
#pantalla-menu .menu-stage{
  position:absolute;
  left:0;
  top:0;
  width:1672px;
  height:941px;
  transform-origin:0 0;
  will-change:transform;
  z-index:1;
}
.menu-ref{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:0;pointer-events:none}
.menu-obj{position:absolute;z-index:2;pointer-events:none;user-select:none;-webkit-user-drag:none}
.menu-obj img{display:block;width:100%;height:100%;object-fit:contain}
.menu-hotspot{position:absolute;z-index:5;margin:0;padding:0;border:0;outline:0;background:transparent;cursor:pointer;touch-action:manipulation}
.menu-btn-img{transition:transform .12s ease,filter .12s ease}
.menu-btn-img img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
@media (hover:hover){.menu-btn-img:hover{transform:translateY(-1.4%) scale(1.018);filter:brightness(1.06)}}
.menu-btn-img:active{transform:translateY(1.2%) scale(.975);filter:brightness(.96)}

/* Piezas individuales del ZIP, alineadas sobre la captura para que la interfaz
   se mantenga nítida y además responda al toque. */
.menu-logo-nuevo{left:27.0%;top:4.6%;width:45.8%;height:24.8%;object-fit:contain}
.menu-jugar-nuevo{left:37.3%;top:74.4%;width:23.9%;height:16.5%}
.menu-arenas-nuevo{left:18.0%;top:71.0%;width:13.4%;height:18.0%}
.menu-ranking-nuevo{left:66.7%;top:71.0%;width:13.2%;height:18.2%}
.menu-pase-nuevo{left:80.7%;top:14.0%;width:14.1%;height:31.0%;object-fit:contain}
.menu-evento-nuevo{left:82.8%;top:54.0%;width:13.0%;height:25.5%;object-fit:contain}

/* Hitboxes de los elementos que ya existían en la lógica del juego. */
.menu-pase-hit{left:81.0%;top:12.5%;width:14.0%;height:32.5%}
.menu-hit-ajustes{left:92.0%;top:2.0%;width:6.6%;height:10.5%}
.menu-hit-misiones{left:0.7%;top:32.0%;width:8.0%;height:15.5%}
.menu-hit-tienda{left:29.0%;top:87.0%;width:12.0%;height:11.5%}
.menu-hit-equipo{left:43.0%;top:87.0%;width:12.0%;height:11.5%}
.menu-runtime{position:absolute!important;left:-99999px!important;top:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* Selector de duración visible y siempre tocable. No forma parte del stage que
   se escala, por lo que mantiene un tamaño legible incluso en resoluciones raras. */
.menu-tiempo-panel{
  position:absolute;z-index:30;left:50%;top:66%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:7px;padding:7px 9px 8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(77,27,132,.96),rgba(35,12,73,.96));
  border:3px solid #f6bd36;box-shadow:0 4px 0 #1b1035,0 0 20px rgba(255,198,61,.25);
  white-space:nowrap;pointer-events:auto;
}
.menu-tiempo-titulo{font-size:12px;font-weight:1000;color:#fff;letter-spacing:.4px;text-shadow:0 2px 0 #1b1035;margin-right:2px}
.menu-tiempo-panel button{
  min-width:64px;height:34px;padding:0 10px;border:2px solid #1b1035;border-radius:11px;
  background:linear-gradient(#fff,#d9d4f0);color:#32155b;font:900 12px/1 system-ui,sans-serif;
  box-shadow:0 3px 0 #1b1035;cursor:pointer;touch-action:manipulation;
}
.menu-tiempo-panel button.on{
  background:linear-gradient(#ffd95c,#ff9c16);color:#3c1600;transform:translateY(1px);
  box-shadow:0 2px 0 #1b1035,0 0 12px rgba(255,206,60,.65);
}
.menu-tiempo-panel button:active{transform:translateY(2px);box-shadow:0 1px 0 #1b1035}
@media (max-width:640px){
  .menu-tiempo-panel{top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);gap:4px;padding:5px 6px;border-width:2px;max-width:96vw}
  .menu-tiempo-titulo{font-size:10px}
  .menu-tiempo-panel button{min-width:56px;height:32px;padding:0 6px;font-size:11px}
}


/* PWA portable: botón solo aparece cuando el navegador ofrece instalación. */
.pwa-install{position:absolute;right:28px;bottom:24px;z-index:35;border:2px solid rgba(255,255,255,.75);border-radius:999px;padding:11px 18px;background:rgba(19,12,44,.88);color:#fff;font:800 15px/1 system-ui,sans-serif;letter-spacing:.5px;box-shadow:0 5px 18px rgba(0,0,0,.35);cursor:pointer}
.pwa-install:hover{transform:translateY(-1px)}
.pwa-install[hidden]{display:none!important}

/* v2.4.50 — tamaño de batalla local: 7 / 13 / 21 participantes. */
.menu-jugadores-panel{
  position:absolute;z-index:30;left:50%;top:59%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:7px;padding:7px 9px 8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,94,142,.96),rgba(22,32,89,.96));
  border:3px solid #61e4ff;box-shadow:0 4px 0 #1b1035,0 0 20px rgba(68,221,255,.25);
  white-space:nowrap;pointer-events:auto;
}
.menu-jugadores-panel button{
  min-width:52px;height:34px;padding:0 10px;border:2px solid #1b1035;border-radius:11px;
  background:linear-gradient(#fff,#d9e9f4);color:#16375b;font:900 12px/1 system-ui,sans-serif;
  box-shadow:0 3px 0 #1b1035;cursor:pointer;touch-action:manipulation;
}
.menu-jugadores-panel button.on{
  background:linear-gradient(#74f0ff,#16aee8);color:#05253a;transform:translateY(1px);
  box-shadow:0 2px 0 #1b1035,0 0 12px rgba(87,229,255,.65);
}
.menu-jugadores-panel button:active{transform:translateY(2px);box-shadow:0 1px 0 #1b1035}
@media (max-width:640px){
  .menu-jugadores-panel{top:auto;bottom:max(54px,calc(env(safe-area-inset-bottom) + 54px));transform:translateX(-50%);gap:4px;padding:5px 6px;border-width:2px;max-width:96vw}
  .menu-jugadores-panel button{min-width:46px;height:32px;padding:0 6px;font-size:11px}
}


/* v2.4.51 — selector de cascos cosméticos */
.opcion .valores button.casco-opcion{height:66px;min-width:92px;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;padding:4px 8px}
.opcion .valores button.casco-opcion img{width:44px;height:38px;object-fit:contain;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.opcion .valores button.casco-opcion span{font-size:10px;line-height:1;white-space:nowrap}
@media(max-width:600px){.opcion .valores button.casco-opcion{min-width:78px;height:60px}.opcion .valores button.casco-opcion img{width:38px;height:33px}}

/* ================================================================ v2.4.74
   Entrada de nivel: objetivos antes de arrancar. El mundo queda congelado
   detrás del velo; el reloj de la arena no corre hasta pulsar JUGAR. */
.modal.modal-objetivos-nivel{
  width:min(520px,92vw);max-height:min(760px,calc(100dvh - 24px));overflow:auto;
  padding:clamp(14px,3vw,22px);border-radius:24px;
  background:linear-gradient(180deg,rgba(49,25,92,.98),rgba(24,14,55,.98));
}
.modal-objetivos-nivel>.icono{width:54px;height:54px;margin-bottom:7px}
.modal-objetivos-nivel>h3{font-size:clamp(19px,4.8vw,27px);line-height:1.05;margin-bottom:8px}
.objetivos-nivel-cabecera{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.objetivos-nivel-cabecera small{font-size:clamp(9px,2.3vw,11px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--texto2)}
.objetivos-nivel-cabecera strong{font-size:clamp(18px,5vw,28px);line-height:1.05;color:#fff;overflow-wrap:anywhere}
.objetivos-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 11px}
.objetivos-meta>div{min-width:0;padding:8px 5px;border:2px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(9,7,29,.58);display:flex;flex-direction:column;gap:2px}
.objetivos-meta small{font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objetivos-meta b{font-size:clamp(12px,3.2vw,16px);line-height:1.12;overflow-wrap:anywhere}
.objetivos-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px;text-align:left}
.objetivos-lista li{min-height:50px;display:grid;grid-template-columns:28px 28px 1fr;gap:7px;align-items:center;padding:7px 9px;border:2px solid rgba(122,90,214,.42);border-radius:14px;background:rgba(15,10,42,.82)}
.objetivos-lista .objetivo-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--verde);color:#173404;border:2px solid var(--tinta);font-size:12px;font-weight:1000}
.objetivos-lista .objetivo-icono{text-align:center;font-size:18px;line-height:1}
.objetivos-lista b{font-size:clamp(11px,3vw,14px);line-height:1.25;overflow-wrap:anywhere}
.objetivos-aviso{margin-top:9px;padding:8px 10px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,210,63,.11);border:2px solid rgba(255,210,63,.35)}
.objetivos-aviso span{font-size:18px}.objetivos-aviso b{font-size:clamp(10px,2.7vw,12px);line-height:1.25;color:#ffe57c}
.modal-objetivos-nivel .btn{min-height:46px;margin-top:8px}

@media (max-width:430px){
  .velo{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .modal.modal-objetivos-nivel{width:min(96vw,480px);max-height:calc(100dvh - 16px);padding:12px;border-width:3px}
  .modal-objetivos-nivel>.icono{width:44px;height:44px;margin-bottom:4px}
  .modal-objetivos-nivel>h3{margin-bottom:5px}
  .objetivos-meta{gap:5px;margin-bottom:8px}
  .objetivos-meta>div{padding:6px 3px}
  .objetivos-lista{gap:5px}
  .objetivos-lista li{min-height:44px;grid-template-columns:24px 22px 1fr;gap:5px;padding:6px 7px}
  .objetivos-lista .objetivo-num{width:23px;height:23px;font-size:10px}
  .objetivos-lista .objetivo-icono{font-size:15px}
  .objetivos-aviso{margin-top:7px;padding:6px 8px}
  .modal-objetivos-nivel .btn{min-height:42px;margin-top:6px}
}

@media (orientation:landscape) and (max-height:620px){
  .modal.modal-objetivos-nivel{width:min(760px,94vw);max-height:calc(100dvh - 12px);padding:10px 14px;display:grid;grid-template-columns:minmax(210px,.8fr) minmax(310px,1.2fr);column-gap:12px;align-items:center}
  .modal-objetivos-nivel>.icono,.modal-objetivos-nivel>h3{grid-column:1}
  .modal-objetivos-nivel>.icono{margin-top:2px}
  .modal-objetivos-nivel>h3{font-size:20px}
  .modal-objetivos-nivel .objetivos-nivel-cabecera,.modal-objetivos-nivel .objetivos-meta{grid-column:1}
  .modal-objetivos-nivel .objetivos-lista,.modal-objetivos-nivel .objetivos-aviso{grid-column:2}
  .modal-objetivos-nivel .objetivos-lista{grid-row:1 / span 4}
  .modal-objetivos-nivel .objetivos-aviso{grid-row:5}
  .modal-objetivos-nivel .btn{grid-column:1;min-height:40px;margin-top:5px}
  .modal-objetivos-nivel .objetivos-meta{grid-template-columns:1fr;gap:4px;margin:2px 0}
  .modal-objetivos-nivel .objetivos-meta>div{padding:4px 6px;display:grid;grid-template-columns:1fr auto;align-items:center}
  .modal-objetivos-nivel .objetivos-lista li{min-height:42px;padding:5px 7px}
}

/* v2.4.88 — botón discreto para saltar la toma de dron. No altera el HUD. */
.btn-omitir-cinematica {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 9998;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(21, 13, 46, .72);
  color: #fff;
  font: 800 clamp(11px, 2.8vw, 14px)/1 system-ui, sans-serif;
  letter-spacing: .05em;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
}
.btn-omitir-cinematica[hidden] { display: none !important; }
.btn-omitir-cinematica:active { transform: scale(.96); }
@media (max-height: 520px) and (orientation: landscape) {
  .btn-omitir-cinematica { bottom: 10px; right: 10px; min-height: 36px; padding: 8px 13px; }
}

/* ================================================================ v2.4.123
   PERSONAJES CHIBI/CARTOON + PODIO DE PERSONAJES
   Todos los retratos son WebP con alfa real; ningún retrato agrega placa o fondo. */
.home-avatar.con-personaje{background-color:transparent!important;background-repeat:no-repeat!important;border-color:rgba(255,255,255,.42);box-shadow:0 0 0 2px rgba(41,12,82,.7),0 5px 13px rgba(0,0,0,.32)}
.home-shell button img,.btn-kit img,.arena-path-rail img{background:transparent!important}

.modal.modal-personajes{
  width:min(940px,96vw);max-height:min(92dvh,820px);overflow:auto;padding:16px 18px 18px;
  border-color:#32145d;background:
    radial-gradient(circle at 50% 0%,rgba(255,76,223,.24),transparent 34%),
    linear-gradient(180deg,#2d1265 0%,#171036 62%,#0e0a25 100%);
  box-shadow:0 12px 0 #0c071d,0 26px 70px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.08)
}
.modal-personajes>h3{font-size:clamp(24px,4vw,38px);font-weight:1000;letter-spacing:.02em;color:#fff;text-shadow:0 3px 0 #251047,0 0 20px rgba(103,231,255,.35);margin:2px 0 10px}
.pj-selector-intro{text-align:center;margin:0 0 12px}.pj-selector-intro>span{display:block;color:#77edff;font-weight:1000;font-size:13px;letter-spacing:.12em}.pj-selector-intro small{display:block;margin-top:3px;color:#d8cef0;font-size:11px;font-weight:800}
.pj-grid{display:grid;grid-template-columns:repeat(5,minmax(112px,1fr));gap:10px;align-items:stretch}
.pj-card{position:relative;min-width:0;border:2px solid rgba(255,255,255,.17);border-radius:18px;padding:7px 6px 9px;background:linear-gradient(180deg,rgba(66,31,126,.9),rgba(22,12,54,.94));color:#fff;box-shadow:0 4px 0 #0e0926,inset 0 1px rgba(255,255,255,.08);cursor:pointer;overflow:hidden}
.pj-card:hover,.pj-card:focus-visible{border-color:#66edff;filter:brightness(1.08);transform:translateY(-2px)}
.pj-card.seleccionado{border-color:#baff48;box-shadow:0 4px 0 #0e0926,0 0 22px rgba(186,255,72,.26)}
.pj-card.seleccionado::after{content:'✓';position:absolute;right:7px;top:7px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#8be33f;color:#18320c;border:2px solid #fff;font-weight:1000;box-shadow:0 2px 0 #17330c}
.pj-card-art{display:block;height:clamp(100px,18vh,160px);border-radius:14px;background:radial-gradient(circle at 50% 64%,rgba(105,221,255,.16),transparent 62%);overflow:hidden}
.pj-card-art img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;filter:drop-shadow(0 6px 7px rgba(0,0,0,.35))}
.pj-card>b{display:block;margin-top:3px;font-size:clamp(11px,1.5vw,15px);line-height:1.03;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pj-card>small{display:block;margin-top:3px;color:#c9bce8;font-size:9px;font-weight:800;line-height:1.05;min-height:19px}
.pj-actual{margin-top:10px;text-align:center;color:#cfbfff;font-size:11px}.pj-actual b{color:#baff48}

.modal.modal-personaje-ficha{width:min(820px,95vw)}
.pj-ficha{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(300px,1.22fr);gap:16px;align-items:center;text-align:left;margin:2px 0 8px}
.pj-ficha-hero{position:relative;min-height:330px;border-radius:24px;background:radial-gradient(circle at 50% 58%,rgba(92,226,255,.22),rgba(123,57,211,.11) 55%,transparent 72%);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.09)}
.pj-ficha-hero img{width:100%;height:330px;object-fit:contain;background:transparent;filter:drop-shadow(0 12px 12px rgba(0,0,0,.42))}
.pj-rarity{position:absolute;z-index:2;left:12px;top:12px;padding:5px 10px;border-radius:999px;background:linear-gradient(#ffd94b,#ff9e19);color:#421e00;border:2px solid #5f2900;font-size:10px;font-weight:1000;text-transform:uppercase;box-shadow:0 3px 0 #3f1a00}
.pj-ficha-role{font-size:12px;font-weight:1000;color:#71ecff;text-transform:uppercase;letter-spacing:.08em}.pj-ficha-copy>p{margin:7px 0 11px!important;color:#ddd2f3!important;font-size:12px!important;line-height:1.4!important}
.pj-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.pj-stat{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:7px 9px;border-radius:12px;background:rgba(8,6,30,.56);border:1px solid rgba(255,255,255,.11)}.pj-stat>b{font-size:10px;text-transform:uppercase}.pj-stat-pips{display:flex;gap:3px}.pj-stat-pips i{display:block;width:12px;height:8px;border-radius:999px;background:#362853;border:1px solid #715b9b}.pj-stat-pips i.on{background:linear-gradient(90deg,#65e8ff,#b6ff3c);border-color:#d8ff9b;box-shadow:0 0 7px rgba(99,238,255,.3)}
.pj-ficha-copy h4{margin:0 0 7px;color:#ffd43b;font-size:12px;letter-spacing:.1em}.pj-habilidades{display:grid;gap:7px}.pj-habilidad{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;padding:7px 8px;border-radius:13px;background:linear-gradient(90deg,rgba(107,45,190,.45),rgba(21,13,51,.76));border:1px solid rgba(170,117,255,.24)}.pj-habilidad>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(#ffdc3f,#ff9b18);color:#4b2100;border:2px solid #6c3100;font-weight:1000}.pj-habilidad b{display:block;font-size:11px}.pj-habilidad small{display:block;margin-top:2px;color:#cfc4e7;font-size:9.5px;line-height:1.25}
.modal-personajes .btn{min-height:48px;font-weight:1000}

/* Podio: personaje completo, sin cubo ni caras pegadas. */
.pedestal .cara.cara-personaje{width:clamp(94px,23vw,144px);height:clamp(128px,31vw,190px);aspect-ratio:auto;border:0;border-radius:22px;box-shadow:none;overflow:visible;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.16),transparent 64%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}
.pedestal.p1 .cara.cara-personaje{width:clamp(112px,28vw,172px);height:clamp(154px,37vw,224px)}
.podio-personaje-img{position:absolute;inset:-8px -8px 18px;width:calc(100% + 16px);height:calc(100% - 2px);object-fit:contain;background:transparent;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));animation:festejaPersonaje 1.25s ease-in-out infinite}
.pedestal.p2 .podio-personaje-img{animation-delay:.16s}.pedestal.p3 .podio-personaje-img{animation-delay:.32s}
@keyframes festejaPersonaje{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.podio-personaje-nombre{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);max-width:94%;padding:3px 7px;border-radius:999px;background:rgba(22,11,52,.88);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:9px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
.pedestal .cara.cara-personaje .podio-num{top:auto;bottom:-8px;min-width:0;padding:2px 7px;font-size:9px;border-width:2px;box-shadow:0 2px 0 var(--tinta);z-index:4}

@media(max-width:760px){
  .modal.modal-personajes{width:min(96vw,610px);padding:12px;max-height:94dvh}
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pj-card-art{height:132px}
  .pj-ficha{grid-template-columns:1fr;gap:8px}.pj-ficha-hero{min-height:220px}.pj-ficha-hero img{height:220px}.pj-stats{grid-template-columns:1fr 1fr}
}
@media(orientation:landscape) and (max-height:560px){
  .modal.modal-personajes{width:min(94vw,900px);max-height:96dvh;padding:9px 13px}.modal-personajes>h3{font-size:21px;margin-bottom:5px}.pj-selector-intro{margin-bottom:6px}.pj-grid{grid-template-columns:repeat(5,minmax(100px,1fr));gap:7px}.pj-card-art{height:110px}.pj-card>small{display:none}
  .modal.modal-personaje-ficha{width:min(900px,96vw)}.pj-ficha{grid-template-columns:220px 1fr;gap:10px}.pj-ficha-hero{min-height:210px}.pj-ficha-hero img{height:210px}.pj-ficha-copy>p{margin:3px 0 5px!important}.pj-stats{margin-bottom:6px}.pj-habilidades{grid-template-columns:1fr 1fr}.pj-habilidad{padding:5px}.modal-personajes .btn{min-height:38px;margin-top:5px}
  .pedestal .cara.cara-personaje{width:88px;height:118px}.pedestal.p1 .cara.cara-personaje{width:104px;height:138px}
}
@media(prefers-reduced-motion:reduce){.podio-personaje-img{animation:none}.pj-card:hover{transform:none}}


/* ================================================================ v2.4.123
   PERFIL EDITABLE + RANKING LOCAL PERSISTENTE */
.modal.modal-perfil-jugador{width:min(620px,94vw);background:linear-gradient(180deg,#2e1767,#120b2e);border-color:#6935b2}
.perfil-jugador{display:grid;gap:12px;text-align:left;margin:2px 0 8px}
.perfil-jugador-hero{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:18px;background:linear-gradient(110deg,rgba(92,44,182,.55),rgba(12,7,38,.75));border:1px solid rgba(255,255,255,.14)}
.perfil-jugador-hero img{width:110px;height:110px;object-fit:contain;background:transparent;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.perfil-jugador-hero div{min-width:0}.perfil-jugador-hero small{display:block;color:#73eaff;font-size:10px;font-weight:1000;letter-spacing:.1em}.perfil-jugador-hero b{display:block;margin-top:3px;color:#fff;font-size:22px;font-weight:1000}.perfil-jugador-hero span{display:block;color:#cfc3ec;font-size:11px;font-weight:800}
.perfil-nombre-label{color:#ffd84a;font-size:10px;font-weight:1000;letter-spacing:.12em}
.perfil-nombre-row{display:flex;align-items:center;gap:8px}.perfil-nombre-row input{flex:1;min-width:0;height:50px;border:2px solid #6947a8;border-radius:14px;background:#0c0823;color:#fff;padding:0 14px;font-size:18px;font-weight:900;outline:none}.perfil-nombre-row input:focus{border-color:#67eaff;box-shadow:0 0 0 3px rgba(103,234,255,.12)}
.perfil-nombre-row span{min-width:46px;text-align:center;color:#bfb3df;font-size:10px;font-weight:900}.perfil-ayuda{margin:0!important;color:#b9afd3!important;font-size:10px!important}.perfil-error{padding:8px 10px;border-radius:10px;background:#5a1730;color:#ffd7df;font-size:11px;font-weight:900}

.modal.modal-ranking{width:min(760px,96vw);max-height:92dvh;overflow:auto;background:radial-gradient(circle at 50% 0%,rgba(255,202,42,.14),transparent 30%),linear-gradient(180deg,#241152,#0d0923);border-color:#7441b8}
.modal-ranking>h3{color:#ffe36a;text-shadow:0 3px 0 #6a2d00,0 0 18px rgba(255,209,51,.22)}
.ranking-resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:2px 0 9px}.ranking-resumen>div{padding:8px 5px;border-radius:13px;background:linear-gradient(#342069,#171034);border:1px solid rgba(255,255,255,.13);text-align:center}.ranking-resumen b{display:block;color:#fff;font-size:17px;font-weight:1000}.ranking-resumen small{display:block;margin-top:2px;color:#7deaff;font-size:8px;font-weight:1000;letter-spacing:.08em}
.ranking-local-label{margin:4px 0 7px;color:#b7acd3;font-size:9px;font-weight:1000;letter-spacing:.08em;text-align:center}
.ranking-lista{display:grid;gap:5px}.ranking-fila{display:grid;grid-template-columns:42px 46px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 9px;border-radius:13px;background:rgba(13,8,38,.78);border:1px solid rgba(255,255,255,.1)}.ranking-fila.yo{border-color:#91e94e;background:linear-gradient(90deg,rgba(77,157,42,.25),rgba(25,12,59,.86));box-shadow:inset 0 0 18px rgba(145,233,78,.06)}
.ranking-pos{font-size:16px;font-weight:1000;text-align:center;color:#ffd83c}.ranking-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#27174f;overflow:hidden;border:1px solid rgba(255,255,255,.13)}.ranking-avatar img{width:100%;height:100%;object-fit:contain;background:transparent}.ranking-avatar b{font-size:13px;color:#fff}
.ranking-nombre{min-width:0;text-align:left}.ranking-nombre>b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:12px}.ranking-nombre small{display:block;margin-top:2px;color:#a99fc4;font-size:8px;font-weight:900}.ranking-score{text-align:right;color:#82efff;font-size:13px;font-weight:1000}.ranking-score small{display:block;color:#8e82aa;font-size:7px;letter-spacing:.08em}.ranking-separador{text-align:center;color:#8d7ab2;font-weight:1000}
.ranking-hist-titulo{margin:12px 0 6px;color:#ffd84a;font-size:10px;letter-spacing:.1em}.ranking-historial{display:grid;gap:4px}.ranking-hist-item{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);font-size:9px}.ranking-hist-item b{color:#fff}.ranking-hist-item span{color:#ada3c5;text-align:right}.ranking-vacio,.ranking-hist-vacio{padding:18px 10px;text-align:center;color:#c8bddf;font-size:11px;border:1px dashed rgba(255,255,255,.16);border-radius:12px}.ranking-nota{margin:10px 0 0!important;color:#8e84a7!important;font-size:9px!important;line-height:1.35!important}
.ranking-home-badge{position:absolute;right:6px;top:5px;z-index:4;min-width:27px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#ffcf2d;color:#4d2100;border:2px solid #6a2a00;box-shadow:0 2px 0 #3b1600;font-style:normal;font-size:9px;font-weight:1000;text-shadow:none}
@media(max-width:560px){.ranking-resumen{grid-template-columns:repeat(2,1fr)}.ranking-fila{grid-template-columns:34px 38px minmax(0,1fr) auto;padding:5px 6px;gap:6px}.ranking-avatar{width:36px;height:36px}.perfil-jugador-hero img{width:90px;height:90px}.perfil-jugador-hero b{font-size:18px}.ranking-hist-item{flex-direction:column;gap:2px}.ranking-hist-item span{text-align:left}}

/* v2.4.123 — estado del ranking global online real */
.ranking-online-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1px 0 9px;padding:7px 10px;border-radius:12px;background:rgba(5,7,27,.68);border:1px solid rgba(255,255,255,.1)}
.ranking-online-head>b{color:#bcb2d5;font-size:9px;letter-spacing:.08em}
.ranking-status{font-size:10px;font-weight:1000;letter-spacing:.09em}.ranking-status.online{color:#8cff5c;text-shadow:0 0 9px rgba(107,255,74,.35)}.ranking-status.loading{color:#ffe05a}.ranking-status.offline{color:#ff7892}
.ranking-home-badge.online{background:#8df04d;color:#153706;border-color:#2f6516;box-shadow:0 2px 0 #173807,0 0 10px rgba(125,245,74,.28)}

/* ================================================================ v2.4.123
   SESIONES DE JUGADOR + PODIO CHIBI + RANKING DE BATALLA + COMPARTIR */
.modal.modal-crear-jugador,.modal.modal-sesiones-jugador{width:min(680px,95vw);background:radial-gradient(circle at 50% 0%,rgba(77,226,255,.18),transparent 34%),linear-gradient(180deg,#2d1462,#100927);border-color:#5b3db2}
.crear-jugador-online{display:grid;gap:10px;text-align:left;margin:0 0 8px}.crear-jugador-sello{justify-self:center;padding:6px 12px;border-radius:999px;background:#74f0ff;color:#12314a;border:2px solid #174c68;font-size:10px;font-weight:1000;letter-spacing:.12em;box-shadow:0 3px 0 #0b2b3d}
.crear-jugador-online p{margin:0!important;color:#d8cfee!important;font-size:12px!important;line-height:1.45!important;text-align:center}.crear-jugador-online label{margin-top:3px;color:#ffd84a;font-size:10px;font-weight:1000;letter-spacing:.12em}.crear-jugador-online input{height:54px;border:2px solid #6a48ae;border-radius:15px;background:#0b0721;color:#fff;padding:0 15px;font-size:20px;font-weight:1000;outline:none}.crear-jugador-online input:focus{border-color:#72efff;box-shadow:0 0 0 4px rgba(114,239,255,.1)}.crear-jugador-online small{color:#a99ec3;font-size:9px;text-align:center}
.sesiones-jugador>p{margin:0 0 10px!important;color:#cfc5e7!important;font-size:11px!important;line-height:1.4!important}.sesiones-lista{display:grid;gap:7px}.sesion-jugador-card{width:100%;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:15px;border:2px solid rgba(255,255,255,.12);background:linear-gradient(90deg,rgba(74,34,139,.75),rgba(18,10,45,.94));color:#fff;cursor:pointer;text-align:left}.sesion-jugador-card:hover{border-color:#70eaff;filter:brightness(1.07)}.sesion-jugador-card.activa{border-color:#9cff54;box-shadow:inset 0 0 18px rgba(156,255,84,.08)}.sesion-jugador-img{width:54px;height:54px;display:grid;place-items:center;border-radius:13px;background:rgba(0,0,0,.22);overflow:hidden}.sesion-jugador-img img{width:100%;height:100%;object-fit:contain;background:transparent}.sesion-jugador-copy{min-width:0}.sesion-jugador-copy b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sesion-jugador-copy small{display:block;margin-top:3px;color:#bcb0d7;font-size:9px}.sesion-jugador-card i{font-style:normal;font-size:9px;font-weight:1000;color:#75edff}.sesion-jugador-card.activa i{color:#a8ff63}

/* Podio completo: la ilustración elegida por el usuario se usa como base real. */
.podio{overflow:hidden!important;justify-content:flex-start!important;padding:0!important;background:radial-gradient(ellipse at 50% 18%,rgba(98,39,140,.94),rgba(13,7,31,.99))!important}
.podio-scroll{position:relative;z-index:2;width:100%;height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 20px);scrollbar-width:thin}
.podio-stage{position:relative;width:min(760px,96vw);aspect-ratio:1448/1086;margin:-12px auto -18px;flex:0 0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.38))}
.podio-chibi-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none;user-select:none}
.podio-stage .pedestales{position:absolute!important;inset:0!important;display:block!important;width:100%!important;max-width:none!important;margin:0!important}
.podio-stage .pedestal{position:absolute!important;display:block!important;width:27%!important;height:47%!important;animation:podioPersonajeEntra .68s cubic-bezier(.18,1.5,.3,1) both!important;transform-origin:50% 100%}
.podio-stage .pedestal.p1{left:36.5%!important;top:1%!important;width:27%!important;height:50%!important;animation-delay:.28s!important}
.podio-stage .pedestal.p2{left:6.7%!important;top:20%!important;width:25%!important;height:43%!important;animation-delay:.12s!important}
.podio-stage .pedestal.p3{right:5.6%!important;left:auto!important;top:27%!important;width:24%!important;height:40%!important;animation-delay:.02s!important}
@keyframes podioPersonajeEntra{from{opacity:0;transform:translateY(-70px) scale(.62) rotate(-7deg)}70%{opacity:1;transform:translateY(9px) scale(1.05) rotate(2deg)}to{opacity:1;transform:none}}
.podio-stage .pedestal .base,.podio-stage .pedestal .medalla{display:none!important}
.podio-stage .pedestal .ficha{position:absolute!important;left:50%;top:-4px;transform:translateX(-50%);z-index:5;min-width:74%;max-width:108%;padding:4px 8px;margin:0!important;border-radius:12px;background:rgba(21,9,49,.88);border:1px solid rgba(255,255,255,.24);box-shadow:0 3px 0 rgba(0,0,0,.34);white-space:nowrap}
.podio-stage .pedestal .ficha b{font-size:clamp(10px,2.3vw,16px)!important}.podio-stage .pedestal .ficha small{font-size:clamp(7px,1.4vw,10px)!important;color:#7ff1ff!important}
.podio-stage .pedestal .cara.cara-personaje{position:absolute!important;left:0!important;top:22px!important;width:100%!important;height:calc(100% - 16px)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;animation:none!important}
.podio-stage .pedestal .podio-personaje-img{inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 9px 8px rgba(0,0,0,.38))!important;animation:festejaPersonaje 1.25s ease-in-out infinite!important}
.podio-stage .podio-personaje-nombre{display:none!important}.podio-stage .podio-num{display:none!important}
.podio-sub{font-size:12px!important;color:#dfd5ef!important;margin:0!important}

.podio-ranking-mundial{width:min(690px,94vw);min-height:78px;display:grid;place-items:center;align-content:center;gap:2px;border-radius:19px;padding:9px 14px;text-align:center;border:2px solid #5b3aa2;background:linear-gradient(180deg,rgba(61,29,118,.92),rgba(15,9,39,.94));box-shadow:0 5px 0 #09051a,0 0 25px rgba(95,220,255,.08)}
.podio-ranking-mundial small{font-size:9px;font-weight:1000;letter-spacing:.13em;color:#8eeeff}.podio-ranking-mundial b{font-size:clamp(30px,7vw,50px);line-height:1;color:#ffe348;text-shadow:0 3px 0 #6e3000}.podio-ranking-mundial span{font-size:10px;color:#d8caee;font-weight:900}.podio-ranking-mundial.cargando b{font-size:18px;color:#fff;animation:rankingPulso .8s ease-in-out infinite alternate}.podio-ranking-mundial.listo{animation:rankingMundialEntrada .72s cubic-bezier(.2,1.55,.35,1)}.podio-ranking-mundial.bot b{font-size:26px;color:#c9bfdc;text-shadow:none}@keyframes rankingPulso{to{opacity:.48}}@keyframes rankingMundialEntrada{0%{transform:scale(.45) rotate(-4deg);opacity:0}70%{transform:scale(1.08) rotate(1deg);opacity:1}100%{transform:none}}

.batalla-ranking-panel{width:min(760px,96vw);border-radius:20px;padding:10px;background:linear-gradient(180deg,rgba(27,13,62,.96),rgba(9,6,27,.97));border:2px solid #57358f;box-shadow:0 6px 0 #08051b}.batalla-ranking-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 3px 8px}.batalla-ranking-head b{color:#ffd94a;font-size:12px;letter-spacing:.1em}.batalla-ranking-head small{color:#9b91b4;font-size:8px}.batalla-ranking-list{display:grid;gap:4px;max-height:300px;overflow:auto;padding-right:2px}.batalla-rank-fila{display:grid;grid-template-columns:42px minmax(0,1fr) 100px 120px;gap:7px;align-items:center;min-height:40px;padding:5px 8px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);font-size:10px}.batalla-rank-fila.yo{border-color:#9bf14d;background:linear-gradient(90deg,rgba(104,183,52,.24),rgba(68,30,128,.18))}.batalla-rank-pos{color:#ffd84a;text-align:center}.batalla-rank-name{font-weight:1000;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batalla-rank-head{color:#a79cbe;text-align:right}.batalla-rank-fila strong{color:#79edff;text-align:right;font-size:11px}

.podio-compartir{width:min(760px,96vw);display:grid;gap:5px;text-align:center;padding:10px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}.podio-compartir>b{font-size:11px;color:#fff;letter-spacing:.1em}.podio-compartir>small{font-size:8px;color:#aaa0c0}.podio-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}.podio-share-grid button{min-height:42px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:#24154d;color:#fff;font-weight:1000;font-size:10px;box-shadow:0 3px 0 #09051a;cursor:pointer}.podio-share-grid button[disabled]{opacity:.4;filter:grayscale(1);cursor:wait}.podio-share-grid button.listo{animation:shareListo .35s ease-out}@keyframes shareListo{from{transform:scale(.88);opacity:.4}to{transform:none;opacity:1}}.podio-share-grid button[data-share-podio="whatsapp"]{background:#167d48}.podio-share-grid button[data-share-podio="facebook"]{background:#2757a7}.podio-share-grid button[data-share-podio="instagram"]{background:linear-gradient(135deg,#6a35aa,#d64283,#f19a34)}.podio-share-grid button[data-share-podio="tiktok"]{background:#111;border-color:#42edf2;box-shadow:0 3px 0 #000,inset 3px 0 #ff3b6c}

@media(max-width:560px){.podio-stage{width:98vw}.batalla-rank-fila{grid-template-columns:34px minmax(0,1fr) 78px;gap:5px}.batalla-rank-head{display:none}.batalla-rank-fila strong{font-size:9px}.podio-share-grid{grid-template-columns:repeat(2,1fr)}.podio-ranking-mundial{min-height:68px}.batalla-ranking-list{max-height:240px}}
@media(orientation:landscape) and (max-height:600px){.podio-scroll{padding-top:5px}.podio-titulo{width:210px!important;margin:-8px 0 -26px!important}.podio-stage{width:min(500px,66vw);margin:-28px auto -30px}.podio-ranking-mundial{min-height:56px}.podio-ranking-mundial b{font-size:28px}.batalla-ranking-list{max-height:190px}.podio-share-grid button{min-height:34px}}
@media(prefers-reduced-motion:reduce){.podio-stage .pedestal,.podio-ranking-mundial,.podio-share-grid button,.podio-ranking-mundial.cargando b{animation:none!important}}


/* v2.4.123 — atlas horizontal de 6 frames por personaje para el podio. */
.podio-stage .pedestal .podio-personaje-sprite{position:absolute;inset:0;width:100%;height:100%;background-repeat:no-repeat;background-size:600% 100%;background-position:0% 0%;filter:drop-shadow(0 9px 8px rgba(0,0,0,.38));animation:podioSpriteFestejo .78s steps(5,end) infinite alternate;transform-origin:50% 100%;will-change:background-position,transform}
.podio-stage .pedestal.p2 .podio-personaje-sprite{animation-delay:-.17s}.podio-stage .pedestal.p3 .podio-personaje-sprite{animation-delay:-.31s}
@keyframes podioSpriteFestejo{0%{background-position:0% 0%;transform:translateY(0) scale(1)}100%{background-position:100% 0%;transform:translateY(-5px) scale(1.015)}}
@media(prefers-reduced-motion:reduce){.podio-stage .podio-personaje-sprite{animation:none!important;background-position:40% 0%!important}}


/* ================================================================ v2.4.123
   PODIO RESPONSIVE CON PUNTOS DE ANCLAJE
   El punto (--anchor-x,--anchor-y) representa la SUPERFICIE física donde
   descansan los pies. No depende de resolución, orientación ni dispositivo. */
.podio-stage{
  width:min(760px,96vw,calc(74dvh * 1.333333))!important;
  aspect-ratio:var(--podio-aspect,1.333333)!important;
  container-type:inline-size;
}
.podio-stage .pedestal[data-place]{
  position:absolute!important;
  left:var(--anchor-x,50%)!important;
  right:auto!important;
  top:var(--anchor-y,40%)!important;
  width:var(--char-size,28%)!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  transform:translate(-50%,calc(-100% + var(--foot-gap,2%)))!important;
  transform-origin:50% 100%!important;
  animation:none!important;
  overflow:visible!important;
}
.podio-stage .pedestal[data-place] .cara.cara-personaje{
  position:absolute!important;
  inset:0!important;
  left:0!important;top:0!important;
  width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;
  transform-origin:50% 100%!important;
  animation:podioGanadorAncladoEntrada .64s cubic-bezier(.18,1.45,.28,1) both!important;
}
.podio-stage .pedestal[data-place="2"] .cara.cara-personaje{animation-delay:.10s!important}
.podio-stage .pedestal[data-place="1"] .cara.cara-personaje{animation-delay:.24s!important}
.podio-stage .pedestal[data-place="3"] .cara.cara-personaje{animation-delay:.02s!important}
@keyframes podioGanadorAncladoEntrada{
  0%{opacity:0;transform:translateY(-32%) scale(.70) rotate(-5deg)}
  72%{opacity:1;transform:translateY(2%) scale(1.035) rotate(1.5deg)}
  100%{opacity:1;transform:none}
}
.podio-stage .pedestal[data-place] .ficha{
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:var(--name-top,-14.5%)!important;
  transform:translate(-50%,-100%)!important;
  min-width:78%!important;
  max-width:124%!important;
  width:max-content!important;
  margin:0!important;
  padding:clamp(3px,1cqw,6px) clamp(6px,2cqw,11px)!important;
  border-radius:clamp(9px,2.2cqw,14px)!important;
}
.podio-stage .pedestal[data-place] .ficha b{font-size:clamp(10px,2.2cqw,16px)!important}
.podio-stage .pedestal[data-place] .ficha small{font-size:clamp(7px,1.35cqw,10px)!important}
.podio-stage .pedestal[data-place] .podio-personaje-sprite,
.podio-stage .pedestal[data-place] .podio-personaje-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  transform-origin:50% 100%!important;
}
/* El loop de sprites puede elevar al personaje para festejar; el frame base
   siempre vuelve al punto exacto de apoyo de la plataforma. */
@keyframes podioSpriteFestejo{
  0%{background-position:0% 0%;transform:translateY(0) scale(1)}
  100%{background-position:100% 0%;transform:translateY(-2.2%) scale(1.015)}
}
@media(max-width:560px){
  .podio-stage{width:min(98vw,calc(71dvh * 1.333333))!important}
}
@media(orientation:landscape) and (max-height:600px){
  .podio-stage{width:min(66vw,calc(72dvh * 1.333333))!important;margin:-22px auto -26px!important}
  .podio-stage .pedestal[data-place] .ficha{max-width:145%!important}
}
@media(prefers-reduced-motion:reduce){
  .podio-stage .pedestal[data-place] .cara.cara-personaje{animation:none!important}
}


/* ================================================================ v2.4.123
   RESULTADO / VICTORIA RESPONSIVE REAL
   El podio y los ganadores son el HERO visual. La tabla es secundaria y
   siempre ocupa menos ancho/área. Compartir usa únicamente iconos. */
.podio-scroll{
  --victory-gap:clamp(6px,1.2vmin,12px);
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:"title" "stage" "details";
  align-content:start;
  justify-items:center;
  gap:var(--victory-gap)!important;
  padding:calc(env(safe-area-inset-top) + clamp(6px,1.4vmin,14px)) clamp(8px,2vw,18px) calc(env(safe-area-inset-bottom) + 14px)!important;
  overflow:auto!important;
}
.podio-titulo{grid-area:title;z-index:8;margin:clamp(-8px,-1vmin,-2px) 0 clamp(-28px,-4vmin,-12px)!important;width:clamp(210px,34vmin,310px)!important}
.podio-stage{
  grid-area:stage;
  width:min(94vw,780px,calc(68dvh * var(--podio-aspect,1.333333)))!important;
  margin:0 auto!important;
  min-width:0;
  align-self:start;
  justify-self:center;
}
.podio-details{
  grid-area:details;
  width:min(100%,620px);
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(5px,1vmin,9px);
  padding-bottom:2px;
}
.podio-sub{width:min(92%,560px);font-size:clamp(9px,1.5vmin,12px)!important;line-height:1.25;text-align:center}
.podio-ranking-mundial{
  width:min(84vw,500px)!important;
  min-height:clamp(54px,7dvh,72px)!important;
  padding:6px 12px!important;
  border-radius:15px!important;
}
.podio-ranking-mundial small{font-size:clamp(7px,1.1vmin,9px)!important}
.podio-ranking-mundial b{font-size:clamp(24px,5vmin,38px)!important}
.podio-ranking-mundial span{font-size:clamp(8px,1.2vmin,10px)!important}

/* Tabla deliberadamente menor que el podio: máximo 520px vs podio 780px. */
.batalla-ranking-panel{
  width:min(78vw,520px)!important;
  max-width:86%!important;
  padding:7px!important;
  border-radius:15px!important;
  border-width:1px!important;
  box-shadow:0 4px 0 #08051b!important;
}
.batalla-ranking-head{padding:0 2px 5px!important;align-items:center!important}
.batalla-ranking-head b{font-size:clamp(8px,1.35vmin,11px)!important}
.batalla-ranking-head small{font-size:clamp(6px,1vmin,8px)!important}
.batalla-ranking-list{gap:3px!important;max-height:min(21dvh,210px)!important;padding-right:1px!important}
.batalla-rank-fila{
  grid-template-columns:30px minmax(0,1fr) 72px 92px!important;
  gap:5px!important;
  min-height:30px!important;
  padding:3px 6px!important;
  border-radius:8px!important;
  font-size:8px!important;
}
.batalla-rank-fila strong{font-size:9px!important}

/* Compartir: barra compacta sin botones de texto. */
.podio-compartir{
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px!important;
  padding:4px 7px!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
}
.podio-compartir-label{font-size:8px;color:#a99ec1;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.podio-share-grid{display:flex!important;grid-template-columns:none!important;gap:7px!important;margin:0!important;justify-content:center}
.podio-share-grid button{
  width:clamp(38px,5.2vmin,48px)!important;
  height:clamp(38px,5.2vmin,48px)!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border-width:2px!important;
  box-shadow:0 3px 0 #09051a!important;
  overflow:hidden;
}
.podio-share-grid button svg{width:56%;height:56%;display:block;fill:#fff;pointer-events:none}
.podio-share-grid button:hover:not([disabled]),.podio-share-grid button:focus-visible:not([disabled]){transform:translateY(-2px) scale(1.05);filter:brightness(1.12)}
.podio-share-grid button[data-share-podio="instagram"]{border-color:rgba(255,255,255,.38)!important}
.podio-share-grid button[data-share-podio="tiktok"]{border-color:#42edf2!important}

.podio-botones{gap:7px!important;margin:1px 0 0!important}
.podio-botones .btn{min-width:clamp(110px,18vw,150px)!important;min-height:36px!important;padding:7px 12px!important;font-size:10px!important}

/* Portrait estrecho: podio casi a todo el ancho; detalles siguen claramente menores. */
@media(max-width:560px){
  .podio-stage{width:min(98vw,calc(65dvh * var(--podio-aspect,1.333333)))!important}
  .podio-details{width:96vw!important}
  .batalla-ranking-panel{width:min(88vw,470px)!important;max-width:88vw!important}
  .podio-ranking-mundial{width:min(86vw,460px)!important}
  .batalla-rank-fila{grid-template-columns:27px minmax(0,1fr) 72px!important}
  .batalla-rank-head{display:none!important}
  .batalla-ranking-list{max-height:min(19dvh,180px)!important}
  .podio-compartir{gap:6px!important}
  .podio-compartir-label{display:none}
  .podio-share-grid button{width:40px!important;height:40px!important}
}

/* Landscape: composición en DOS zonas renderizables, sin apilar todo debajo.
   Izquierda = podio grande. Derecha = ranking compacto + compartir + acciones. */
@media(orientation:landscape) and (min-width:700px){
  .podio-scroll{
    grid-template-columns:minmax(0,1.55fr) minmax(270px,.68fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-template-areas:"title details" "stage details"!important;
    align-items:center!important;
    align-content:center!important;
    column-gap:clamp(8px,2vw,22px)!important;
    row-gap:0!important;
    overflow:hidden!important;
    padding:calc(env(safe-area-inset-top) + 6px) clamp(8px,1.5vw,18px) calc(env(safe-area-inset-bottom) + 8px)!important;
  }
  .podio-titulo{align-self:end;margin:0 0 -30px!important;width:min(31dvh,260px)!important;font-size:clamp(13px,2.6dvh,18px)!important}
  .podio-stage{
    width:min(64vw,760px,calc(78dvh * var(--podio-aspect,1.333333)))!important;
    align-self:center!important;
  }
  .podio-details{
    width:100%!important;
    max-width:430px!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    overflow:auto;
    align-self:center;
    gap:5px!important;
    padding:4px 3px 8px;
    scrollbar-width:thin;
  }
  .podio-sub{font-size:9px!important}
  .podio-ranking-mundial{width:min(100%,390px)!important;min-height:52px!important}
  .podio-ranking-mundial b{font-size:clamp(22px,5dvh,34px)!important}
  .batalla-ranking-panel{width:min(100%,390px)!important;max-width:100%!important}
  .batalla-ranking-list{max-height:min(34dvh,230px)!important}
  .batalla-rank-fila{grid-template-columns:27px minmax(0,1fr) 62px 76px!important;min-height:27px!important;padding:2px 5px!important}
  .podio-share-grid button{width:38px!important;height:38px!important}
  .podio-botones .btn{min-width:105px!important;min-height:32px!important;padding:5px 9px!important;font-size:9px!important}
}

/* Landscape muy bajo: se prioriza el podio y se reduce todavía más el panel derecho. */
@media(orientation:landscape) and (max-height:520px){
  .podio-titulo{width:min(27dvh,210px)!important;margin-bottom:-24px!important}
  .podio-stage{width:min(61vw,calc(82dvh * var(--podio-aspect,1.333333)))!important}
  .podio-details{gap:3px!important}
  .podio-sub{display:none}
  .podio-ranking-mundial{min-height:43px!important;padding:4px 8px!important}
  .podio-ranking-mundial small{font-size:6px!important}.podio-ranking-mundial b{font-size:21px!important}.podio-ranking-mundial span{font-size:7px!important}
  .batalla-ranking-panel{padding:5px!important}.batalla-ranking-list{max-height:28dvh!important}
  .podio-compartir-label{display:none}
  .podio-share-grid button{width:33px!important;height:33px!important}
  .podio-botones .btn{min-height:29px!important;padding:4px 8px!important}
}

@media(prefers-reduced-motion:reduce){
  .podio-share-grid button:hover,.podio-share-grid button:focus-visible{transform:none!important}
}

/* ================================================================ v2.4.124
   RANKING DOBLE: TOP 5 + TU POSICIÓN. 100 bots semilla desplazables. */
.ranking-dual{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.ranking-board{min-width:0;padding:9px;border-radius:16px;background:linear-gradient(180deg,rgba(30,18,69,.82),rgba(10,8,31,.9));border:1px solid rgba(255,255,255,.11)}
.ranking-board-podium{box-shadow:inset 0 1px rgba(255,222,95,.14)}
.ranking-board-hunters{box-shadow:inset 0 1px rgba(255,116,104,.12)}
.ranking-board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.09)}
.ranking-board-head div{min-width:0}.ranking-board-head b{display:block;color:#fff;font-size:12px;font-weight:1000;line-height:1.05}.ranking-board-head small{display:block;margin-top:3px;color:#aea1cf;font-size:8px;font-weight:800;line-height:1.2}
.ranking-board-head>span{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#0b0825;color:#8ff2ff;border:1px solid rgba(113,235,255,.2);font-size:8px;font-weight:1000;white-space:nowrap}
.ranking-board .ranking-lista{gap:4px}.ranking-board .ranking-fila{grid-template-columns:33px 38px minmax(0,1fr) auto;gap:6px;padding:5px 6px;border-radius:11px}
.ranking-board .ranking-avatar{width:36px;height:36px}.ranking-board .ranking-nombre>b{font-size:10px}.ranking-board .ranking-nombre small{font-size:7.5px;line-height:1.15}.ranking-board .ranking-score{font-size:12px}.ranking-board .ranking-score small{font-size:6.5px}
.ranking-fila.bot{background:linear-gradient(90deg,rgba(74,52,108,.42),rgba(13,8,38,.78));border-color:rgba(205,183,255,.12)}
.ranking-fila.bot .ranking-nombre small{color:#bbaee0}.ranking-fila.yo{position:relative}.ranking-fila.yo::after{content:'TÚ';position:absolute;right:5px;top:-5px;padding:1px 5px;border-radius:999px;background:#9bf04f;color:#173509;font-size:6px;font-weight:1000;border:1px solid #fff}
.ranking-seed-info{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#978bae;font-size:7.5px;font-weight:900}.ranking-seed-info span:last-child{color:#d4a9ff;text-align:right}
.ranking-board .ranking-separador{margin:5px 0 2px;padding:2px 5px;border-radius:999px;background:rgba(126,236,255,.08);color:#7deaff;font-size:7px;font-weight:1000;letter-spacing:.08em;text-align:center}
@media(max-width:760px){.ranking-dual{grid-template-columns:1fr}.modal.modal-ranking{width:min(96vw,620px)}.ranking-board .ranking-fila{grid-template-columns:34px 38px minmax(0,1fr) auto}}
@media(orientation:landscape) and (max-height:620px){.modal.modal-ranking{width:min(96vw,980px);max-height:96dvh}.ranking-dual{grid-template-columns:1fr 1fr}.ranking-board{padding:6px}.ranking-board .ranking-fila{padding:3px 5px}.ranking-board .ranking-avatar{width:30px;height:30px}.ranking-historial{max-height:90px;overflow:auto}}


/* v2.4.127 — participantes fuera de batalla: nombre tachado, registro conservado */
.batalla-rank-fila.eliminado{opacity:.56;filter:saturate(.45)}
.batalla-rank-fila.eliminado .batalla-rank-name{
  text-decoration-line:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:#FF315A;
  text-decoration-skip-ink:none;
}

/* v2.4.131 · controles ligeros de pantalla/TV. Son SVG inline: cero assets extra. */
.hud-display-actions{
  position:absolute;z-index:42;top:calc(env(safe-area-inset-top) + 10px);left:50%;
  display:flex;gap:7px;transform:translateX(34px);pointer-events:auto
}
.btn-hud-display{
  width:40px;height:40px;border-radius:50%;border:2px solid rgba(27,16,53,.92);
  padding:8px;background:rgba(25,18,58,.88);color:#fff;cursor:pointer;
  box-shadow:0 3px 0 rgba(27,16,53,.9),0 4px 14px rgba(0,0,0,.18);
  display:grid;place-items:center;backdrop-filter:blur(3px);-webkit-tap-highlight-color:transparent
}
.btn-hud-display svg{width:100%;height:100%;fill:currentColor;display:block}
.btn-hud-display:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,16,53,.9)}
.btn-hud-display.activo{color:#7BFFF0;box-shadow:0 0 0 2px rgba(123,255,240,.22),0 3px 0 rgba(27,16,53,.9)}
@media (max-width:520px){
  .hud-display-actions{gap:5px;transform:translateX(31px)}
  .btn-hud-display{width:36px;height:36px;padding:7px}
}
@media (min-width:760px) and (min-height:600px) and (pointer:coarse){
  .hud-display-actions{transform:translateX(40px)}
  .btn-hud-display{width:46px;height:46px;padding:9px}
}


/* ==================================================================== v2.4.131
   Dock global Pantalla / TV. Visible en menú y partida; se mantiene fuera
   del layout del juego para no desaparecer al cambiar de pantalla. */
.gomi-display-dock{
  position:fixed;
  z-index:1000010;
  right:max(10px, env(safe-area-inset-right));
  top:max(84px, calc(env(safe-area-inset-top) + 72px));
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
}
.gomi-display-dock .gomi-display-dock-btn{
  width:58px;
  height:58px;
  padding:7px 7px 5px;
  border-radius:17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:rgba(25,18,58,.94);
  border:2px solid rgba(255,255,255,.84);
  color:#fff;
  box-shadow:0 4px 0 rgba(27,16,53,.92),0 5px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(4px);
}
.gomi-display-dock .gomi-display-dock-btn svg{
  width:26px;
  height:26px;
  flex:0 0 26px;
}
.gomi-display-dock .gomi-display-dock-btn span{
  display:block;
  font:900 8px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.4px;
  color:inherit;
}
.gomi-display-dock .gomi-display-dock-btn:hover{
  background:rgba(55,39,112,.97);
}
.gomi-display-dock .gomi-display-dock-btn.activo{
  color:#7BFFF0;
  border-color:#7BFFF0;
}
@media (max-width:520px){
  .gomi-display-dock{
    right:max(7px, env(safe-area-inset-right));
    top:max(70px, calc(env(safe-area-inset-top) + 58px));
    gap:6px;
  }
  .gomi-display-dock .gomi-display-dock-btn{
    width:50px;height:50px;border-radius:14px;padding:5px 5px 4px;
  }
  .gomi-display-dock .gomi-display-dock-btn svg{width:23px;height:23px;flex-basis:23px}
  .gomi-display-dock .gomi-display-dock-btn span{font-size:7px}
}
@media (orientation:landscape) and (max-height:520px){
  .gomi-display-dock{
    top:max(54px, calc(env(safe-area-inset-top) + 44px));
    flex-direction:row;
  }
  .gomi-display-dock .gomi-display-dock-btn{width:48px;height:48px}
}
/* Durante el loading dejamos el dock visible pero discreto para que el usuario
   ya sepa dónde están los controles; no fuerza ningún recurso extra. */