/* =====================================================================
   TIRA Y TOMA · Estilos (mobile first)
   ===================================================================== */
:root {
  --fondo: #12002b;
  --fondo-2: #1f0a47;
  --tarjeta: rgba(255,255,255,.06);
  --borde: rgba(255,255,255,.12);
  --texto: #fff4ff;
  --secundario: #b9a7d6;
  --rosa: #ff2d95;
  --naranja: #ff8a00;
  --amarillo: #ffd500;
  --verde: #2dffb1;
  --cian: #34e0ff;
  --morado: #8f4bff;
  --dorado: #ffc83d;
  --peligro: #ff4d4d;
  --grad-fiesta: linear-gradient(135deg, var(--rosa), var(--naranja));
  --grad-dorado: linear-gradient(135deg, #ffe27a, #ff9d00);
  --sombra: 0 10px 30px rgba(0,0,0,.45);
  --fuente-titulo: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --fuente: 'Nunito', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--fondo); min-height: 100%; }
body {
  margin: 0; font-family: var(--fuente); color: var(--texto);
  background: radial-gradient(1200px 600px at 20% -10%, #4b0f8a 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #ff2d9540 0%, transparent 60%),
              linear-gradient(180deg, var(--fondo-2), var(--fondo));
  min-height: 100vh; overflow-x: hidden; user-select: none;
  padding-top: var(--safe-top);
}
a { color: var(--cian); text-decoration: none; }
.letra-peq { font-size: .78rem; }
.text-secondary { color: var(--secundario) !important; }

/* Burbujas de fondo */
.fondo-burbujas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fondo-burbujas span {
  position: absolute; bottom: -120px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); animation: subir 16s linear infinite;
}
.fondo-burbujas span:nth-child(1){left:8%;animation-duration:19s}
.fondo-burbujas span:nth-child(2){left:24%;width:30px;height:30px;animation-duration:13s;animation-delay:2s}
.fondo-burbujas span:nth-child(3){left:45%;width:80px;height:80px;animation-duration:22s;animation-delay:4s}
.fondo-burbujas span:nth-child(4){left:62%;width:40px;height:40px;animation-duration:15s;animation-delay:1s}
.fondo-burbujas span:nth-child(5){left:78%;animation-duration:18s;animation-delay:6s}
.fondo-burbujas span:nth-child(6){left:92%;width:25px;height:25px;animation-duration:11s;animation-delay:3s}
@keyframes subir { to { transform: translateY(-120vh) rotate(360deg); opacity: 0; } }

/* Contenedores */
.contenedor-app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 16px 16px calc(24px + var(--safe-bottom)); }
.contenedor-juego { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 8px 12px calc(20px + var(--safe-bottom)); min-height: 100vh; display: flex; flex-direction: column; gap: 10px; }

/* Tipografía */
.titulo-app { font-family: var(--fuente-titulo); font-weight: 700; font-size: 2.6rem; letter-spacing: 1px; margin: 4px 0 0;
  background: var(--grad-fiesta); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(255,45,149,.5)); }
.titulo-app span { font-size: 1.4rem; color: var(--amarillo); -webkit-text-fill-color: var(--amarillo); }
.subtitulo-app { color: var(--secundario); margin: 4px 0 0; }
.titulo-seccion { font-family: var(--fuente-titulo); font-weight: 600; color: #fff; margin-bottom: 10px; }
h1,h2,h3,h4,h5 { font-family: var(--fuente-titulo); }

/* Logo con dados */
.dados-logo { font-size: 3.4rem; line-height: 1; display: flex; justify-content: center; gap: 8px; }
.dado-mini { display: inline-block; animation: flotar 3s ease-in-out infinite; }
.dado-mini.d1 { color: var(--cian); }
.dado-mini.d2 { color: var(--rosa); animation-delay: -1.5s; }
@keyframes flotar { 0%,100% { transform: translateY(0) rotate(-8deg);} 50% { transform: translateY(-10px) rotate(8deg);} }

/* Botones */
.btn { font-family: var(--fuente-titulo); font-weight: 600; border-radius: 16px; border: 0; transition: transform .1s, filter .2s; }
.btn:active { transform: scale(.96); }
.btn-fiesta { background: var(--grad-fiesta); color: #fff; box-shadow: 0 8px 24px rgba(255,45,149,.4); }
.btn-fiesta:hover, .btn-fiesta:focus { color: #fff; filter: brightness(1.1); }
.btn-fiesta:disabled { opacity: .45; box-shadow: none; }
.btn-oscuro { background: var(--tarjeta); color: #fff; border: 1px solid var(--borde); }
.btn-oscuro:hover { color: #fff; background: rgba(255,255,255,.12); }
.btn-dorado { background: var(--grad-dorado); color: #3a2400; font-weight: 700; }
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-verde { background: linear-gradient(135deg, #2dffb1, #16c78a); color: #032; }
.btn-lg { padding: 14px 20px; font-size: 1.15rem; }
.btn-volver, .btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde); color: #fff; font-size: 1.15rem; text-decoration: none; cursor: pointer; }
.btn-icono.apagado { opacity: .4; }
.barra-superior { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.barra-superior h2 { font-size: 1.3rem; }

/* Tarjetas / listas */
.lista-partidas { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-partida { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde); color: #fff; }
.badge-intensidad { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .5px; color: #fff; }
.badge-intensidad.TRANQUI { background: #1f9d6c; }
.badge-intensidad.FIESTA { background: var(--rosa); }
.badge-intensidad.PICANTE { background: var(--naranja); }
.badge-intensidad.SIN_FILTRO { background: #d1002e; }
.aviso-legal { font-size: .72rem; color: var(--secundario); }

.modal-oscuro { background: #1c0b3f; color: var(--texto); border: 1px solid var(--borde); border-radius: 20px; }
.modal-oscuro .modal-header, .modal-oscuro .modal-footer { border-color: var(--borde); }
.tabla-reglas td { color: var(--texto); border-color: var(--borde); padding: 4px 8px; }
.tabla-reglas td:first-child { font-weight: 900; color: var(--amarillo); width: 34px; }

/* =====================================================================
   CONFIGURACIÓN DE PARTIDA
   ===================================================================== */
.pasos { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 18px; }
.pasos .paso { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--tarjeta); border: 1px solid var(--borde); color: var(--secundario); }
.pasos .paso.activo { background: var(--grad-fiesta); color: #fff; border-color: transparent; }
.pasos .paso.hecho { background: var(--verde); color: #032; }
.pasos i { width: 32px; height: 2px; background: var(--borde); }
.paso-panel { display: none; animation: aparecer .3s ease; }
.paso-panel.activo { display: block; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }

.input-jugador .form-control { background: rgba(0,0,0,.3); border: 1px solid var(--borde); color: #fff; font-size: 1.05rem; padding: 12px; }
.input-jugador .form-control:focus { box-shadow: 0 0 0 3px rgba(255,45,149,.3); border-color: var(--rosa); background: rgba(0,0,0,.35); color: #fff; }
.btn-avatar { background: rgba(0,0,0,.3); border: 1px solid var(--borde); font-size: 1.4rem; width: 56px; border-radius: 16px 0 0 16px !important; }
.input-jugador .btn-fiesta { width: 56px; font-size: 1.5rem; border-radius: 0 16px 16px 0 !important; }
.btn-genero { width: 48px; font-size: 1.4rem; font-weight: 900; border: 1px solid var(--borde); border-radius: 0 !important; }
.btn-genero.H { background: rgba(52,224,255,.25); color: var(--cian); } .btn-genero.M { background: rgba(255,45,149,.25); color: var(--rosa); }
.lista-jugadores .gen.H { color: var(--cian); } .lista-jugadores .gen.M { color: var(--rosa); }
.selector-avatar { display: none; flex-wrap: wrap; gap: 6px; padding: 10px; margin-top: 8px; background: rgba(0,0,0,.3); border-radius: 14px; border: 1px solid var(--borde); }
.selector-avatar.abierto { display: flex; }
.selector-avatar button { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; }
.selector-avatar button.activo { background: var(--grad-fiesta); }
.chips-recientes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip-reciente { border: 1px dashed var(--borde); background: transparent; color: var(--secundario); border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
.lista-jugadores { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lista-jugadores li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; animation: aparecer .25s ease; }
.lista-jugadores li .av { font-size: 1.6rem; }
.lista-jugadores li .nom { flex: 1; font-weight: 700; }
.lista-jugadores li .quitar { background: transparent; border: 0; color: var(--secundario); font-size: 1.2rem; }

.opciones-intensidad { display: grid; gap: 10px; }
.opcion-int { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--tarjeta); border: 2px solid var(--borde); cursor: pointer; transition: .15s; }
.opcion-int input { display: none; }
.opcion-int .ico { grid-row: span 2; font-size: 2rem; text-align: center; }
.opcion-int strong { font-family: var(--fuente-titulo); font-size: 1.1rem; }
.opcion-int small { color: var(--secundario); }
.opcion-int:has(input:checked) { border-color: var(--rosa); background: rgba(255,45,149,.15); transform: scale(1.02); }
.opcion-int.TRANQUI:has(input:checked) { border-color: var(--verde); background: rgba(45,255,177,.12); }
.opcion-int.PICANTE:has(input:checked) { border-color: var(--naranja); background: rgba(255,138,0,.15); }
.opcion-int.SIN_FILTRO:has(input:checked) { border-color: var(--peligro); background: rgba(255,77,77,.15); }

.opciones-duracion { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opciones-duracion.dos { grid-template-columns: repeat(2, 1fr); }
.opciones-duracion label { cursor: pointer; }
.opciones-duracion input { display: none; }
.opciones-duracion span { display: block; text-align: center; padding: 12px 4px; border-radius: 14px; background: var(--tarjeta); border: 2px solid var(--borde); font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.opciones-duracion small { font-size: .7rem; color: var(--secundario); font-family: var(--fuente); font-weight: 400; }
.opciones-duracion input:checked + span { border-color: var(--rosa); background: rgba(255,45,149,.15); }
.factor-sorbos .form-range::-webkit-slider-thumb { background: var(--rosa); }
.etiquetas-factor { display: flex; justify-content: space-between; font-size: .68rem; color: var(--secundario); }

.sorteo-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10,0,25,.96); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.sorteo-overlay.activo { display: flex; }
.orden-sorteo { list-style: none; padding: 0; margin: 20px 0 0; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.orden-sorteo li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; opacity: 0; transform: translateX(-30px); animation: entrar .4s forwards; }
.orden-sorteo li .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-fiesta); font-weight: 800; }
@keyframes entrar { to { opacity: 1; transform: none; } }

/* =====================================================================
   JUEGO
   ===================================================================== */
.barra-juego { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.info-ronda { display: flex; align-items: center; gap: 6px; }
.badge-ronda { white-space: nowrap; background: var(--tarjeta); border: 1px solid var(--borde); padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.acciones-barra { display: flex; gap: 6px; }

.banner-rey { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,200,61,.25), rgba(255,157,0,.12)); border: 1px solid rgba(255,200,61,.5); }
.corona-grande { font-size: 1.8rem; animation: brillar 2s ease-in-out infinite; }
@keyframes brillar { 0%,100% { filter: drop-shadow(0 0 2px gold);} 50% { filter: drop-shadow(0 0 12px gold);} }
.rey-nombre { font-weight: 800; font-size: .9rem; }
.rey-regla { font-size: .8rem; color: #ffe9b0; }
.aviso-doble { text-align: center; font-weight: 800; padding: 6px; border-radius: 12px; background: rgba(52,224,255,.15); border: 1px solid var(--cian); color: var(--cian); animation: parpadeo 1.2s infinite; }
@keyframes parpadeo { 50% { opacity: .5; } }

.tira-jugadores { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.tira-jugadores::-webkit-scrollbar { display: none; }
.ficha-jugador { flex: 0 0 auto; width: 76px; padding: 8px 4px; border-radius: 16px; text-align: center; background: var(--tarjeta); border: 2px solid var(--borde); position: relative; transition: .25s; scroll-snap-align: center; cursor: pointer; }
.ficha-jugador .av { font-size: 1.8rem; line-height: 1.1; }
.ficha-jugador .nom { font-size: .72rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ficha-jugador .sorbos { font-size: .68rem; color: var(--secundario); }
.ficha-jugador .coronas { position: absolute; top: -8px; left: -4px; font-size: .75rem; background: var(--grad-dorado); color: #3a2400; border-radius: 999px; padding: 1px 6px; font-weight: 900; }
.ficha-jugador .cartas-ico { position: absolute; top: -8px; right: -4px; font-size: .7rem; background: var(--morado); border-radius: 999px; padding: 1px 6px; font-weight: 900; }
.ficha-jugador.actual { border-color: var(--rosa); background: rgba(255,45,149,.2); transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 20px rgba(255,45,149,.35); }
.ficha-jugador.rey { border-color: var(--dorado); }
.ficha-jugador.bebe { animation: sacudir .5s; background: rgba(255,138,0,.35); }
@keyframes sacudir { 0%,100% { transform: rotate(0);} 25% { transform: rotate(-6deg);} 75% { transform: rotate(6deg);} }

.zona-central { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--sombra); }
.turno-actual { display: flex; align-items: center; gap: 12px; width: 100%; }
.avatar-turno { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: var(--grad-fiesta); box-shadow: 0 6px 18px rgba(255,45,149,.4); animation: latir 2s ease-in-out infinite; }
@keyframes latir { 50% { transform: scale(1.06);} }
.nombre-turno { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.btn-inventario { margin-left: auto; position: relative; width: 52px; height: 52px; border-radius: 16px; background: rgba(143,75,255,.3); border: 1px solid var(--morado); font-size: 1.5rem; color: #fff; }
.num-cartas { position: absolute; top: -6px; right: -6px; background: var(--rosa); font-size: .7rem; font-weight: 900; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; }

/* Dados 3D ------------------------------------------------------------ */
.mesa-dados { display: flex; gap: 40px; justify-content: center; align-items: center; height: 150px; perspective: 700px; width: 100%; }
.dado-3d { width: 84px; height: 84px; position: relative; transform-style: preserve-3d; }
.dado-3d .cubo { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); transition: transform 1.8s cubic-bezier(.2,.8,.2,1); }
.dado-3d.girando .cubo { transition: none; animation: girar .18s linear infinite; }
@keyframes girar { from { transform: rotateX(0) rotateY(0) rotateZ(0);} to { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg);} }
.dado-3d.saltando { animation: saltar 1.8s ease-out; }
@keyframes saltar { 0% { transform: translateY(-90px) scale(.6);} 45% { transform: translateY(0) scale(1.08);} 60% { transform: translateY(-22px);} 75% { transform: translateY(0);} 88% { transform: translateY(-8px);} 100% { transform: translateY(0);} }
.cara { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(145deg, #ffffff, #d9d9e6); border: 2px solid #b8b8cc; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 10px; backface-visibility: hidden; box-shadow: inset 0 0 14px rgba(0,0,0,.15); }
.cara i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #444, #000); place-self: center; box-shadow: inset 1px 1px 2px rgba(255,255,255,.4); }
.rojo .cara { background: linear-gradient(145deg, #ff5f9e, #d10059); border-color: #9d0044; }
.rojo .cara i { background: radial-gradient(circle at 35% 35%, #fff, #ddd); }
/* posiciones de puntos */
.cara1 i:nth-child(1) { grid-area: 2/2; }
.cara2 i:nth-child(1) { grid-area: 1/1; } .cara2 i:nth-child(2) { grid-area: 3/3; }
.cara3 i:nth-child(1) { grid-area: 1/1; } .cara3 i:nth-child(2) { grid-area: 2/2; } .cara3 i:nth-child(3) { grid-area: 3/3; }
.cara4 i:nth-child(1) { grid-area: 1/1; } .cara4 i:nth-child(2) { grid-area: 1/3; } .cara4 i:nth-child(3) { grid-area: 3/1; } .cara4 i:nth-child(4) { grid-area: 3/3; }
.cara5 i:nth-child(1) { grid-area: 1/1; } .cara5 i:nth-child(2) { grid-area: 1/3; } .cara5 i:nth-child(3) { grid-area: 2/2; } .cara5 i:nth-child(4) { grid-area: 3/1; } .cara5 i:nth-child(5) { grid-area: 3/3; }
.cara6 i:nth-child(1) { grid-area: 1/1; } .cara6 i:nth-child(2) { grid-area: 1/3; } .cara6 i:nth-child(3) { grid-area: 2/1; } .cara6 i:nth-child(4) { grid-area: 2/3; } .cara6 i:nth-child(5) { grid-area: 3/1; } .cara6 i:nth-child(6) { grid-area: 3/3; }
/* caras del cubo: 1 frente, 6 atrás, 2 arriba, 5 abajo, 3 derecha, 4 izquierda */
.cara1 { transform: rotateY(0deg) translateZ(42px); }
.cara6 { transform: rotateY(180deg) translateZ(42px); }
.cara2 { transform: rotateX(90deg) translateZ(42px); }
.cara5 { transform: rotateX(-90deg) translateZ(42px); }
.cara3 { transform: rotateY(90deg) translateZ(42px); }
.cara4 { transform: rotateY(-90deg) translateZ(42px); }

.resultado-suma { font-family: var(--fuente-titulo); font-size: 2.2rem; font-weight: 700; min-height: 2.6rem; line-height: 1; color: var(--amarillo); text-shadow: 0 0 20px rgba(255,213,0,.6); }
.resultado-suma.pop { animation: pop .5s; }
@keyframes pop { 0% { transform: scale(.3);} 60% { transform: scale(1.3);} 100% { transform: scale(1);} }

.btn-tirar { width: 100%; max-width: 320px; padding: 18px; border: 0; border-radius: 999px; font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 700; color: #fff;
  background: var(--grad-fiesta); box-shadow: 0 10px 30px rgba(255,45,149,.5), inset 0 -4px 0 rgba(0,0,0,.2); animation: pulso 1.6s ease-in-out infinite; transition: .15s; }
.btn-tirar:active { transform: scale(.95); }
.btn-tirar:disabled { animation: none; opacity: .4; }
@keyframes pulso { 50% { transform: scale(1.03); box-shadow: 0 10px 40px rgba(255,45,149,.75), inset 0 -4px 0 rgba(0,0,0,.2);} }

/* Panel resultado / carta ---------------------------------------------- */
.panel-resultado { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px; animation: aparecer .3s; }
.cabecera-evento { display: flex; align-items: center; gap: 12px; }
.emoji-evento { font-size: 2.6rem; line-height: 1; }
.nombre-evento { font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 700; }
.texto-evento { color: var(--secundario); font-size: .9rem; }

.carta-3d { perspective: 1000px; display: flex; justify-content: center; }
.carta-flip { width: 240px; height: 320px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,0,.2,1); }
.carta-flip.volteada { transform: rotateY(180deg); }
.carta-cara { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; box-shadow: var(--sombra); }
.carta-dorso { background: repeating-linear-gradient(45deg, #2a0f5e 0 12px, #3a1a7a 12px 24px); border: 6px solid #ffd500; font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 700; color: var(--amarillo); line-height: 1.1; }
.carta-frente { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, #f1ecff); color: #241247; border: 6px solid var(--rosa); }
.carta-frente.VERDAD { border-color: var(--cian); } .carta-frente.RETO { border-color: var(--naranja); }
.carta-frente.PENITENCIA { border-color: var(--morado); } .carta-frente.DUELO { border-color: var(--peligro); }
.carta-frente.JACKPOT { border-color: var(--dorado); background: linear-gradient(160deg, #fff7d6, #ffe08a); }
.carta-frente.PODER { border-color: var(--dorado); }
.item.PODER { border-left-color: var(--dorado); }
.carta-frente.con-imagen { background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0d0020; border: 0; padding: 0; }
.carta-frente.con-imagen .carta-categoria, .carta-frente.con-imagen .carta-nombre, .carta-frente.con-imagen .carta-desc { display: none; }
.carta-frente.con-imagen .carta-sorbos { position: absolute; bottom: -34px; left: 0; right: 0; color: var(--amarillo); text-shadow: 0 2px 6px #000; }
.carta-3d.grande .carta-flip { width: min(300px, 78vw); height: calc(min(300px, 78vw) * 1.5); margin-bottom: 36px; }
.carta-categoria { font-size: .7rem; letter-spacing: 2px; font-weight: 900; color: var(--rosa); }
.carta-nombre { font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 700; margin: 6px 0; }
.carta-desc { font-size: .95rem; line-height: 1.35; }
.carta-sorbos { margin-top: 10px; font-weight: 900; color: var(--rosa); }

.zona-decision { display: flex; flex-direction: column; gap: 8px; }
.zona-decision .fila { display: flex; gap: 8px; }
.zona-decision .fila .btn { flex: 1; }
.grid-jugadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid-jugadores .sel-jug { padding: 8px 4px; border-radius: 14px; background: rgba(0,0,0,.25); border: 2px solid var(--borde); text-align: center; cursor: pointer; color: #fff; font-size: .8rem; font-weight: 800; }
.grid-jugadores .sel-jug .av { display: block; font-size: 1.6rem; }
.grid-jugadores .sel-jug.activo { border-color: var(--rosa); background: rgba(255,45,149,.25); }
.grid-jugadores .sel-jug.desactivado { opacity: .35; pointer-events: none; }
.grid-jugadores .sel-jug .contador { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.grid-jugadores .sel-jug .contador button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--rosa); color: #fff; font-weight: 900; line-height: 1; }
.grid-jugadores .sel-jug .contador span { min-width: 18px; font-size: 1rem; }
.reparto-restante { text-align: center; font-weight: 800; color: var(--amarillo); }

.lista-bebidas { display: flex; flex-direction: column; gap: 6px; }
.fila-bebida { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--borde); }
.fila-bebida .av { font-size: 1.4rem; }
.fila-bebida .info { flex: 1; }
.fila-bebida .n { font-weight: 900; color: var(--naranja); }
.fila-bebida .defensa { display: flex; gap: 4px; }
.fila-bebida .defensa .btn { padding: 4px 8px; font-size: .75rem; }
.fila-bebida.bloqueada { opacity: .55; text-decoration: line-through; }

.historial-mini { display: flex; flex-direction: column; gap: 4px; }
.historial-mini .item, .lista-historial .item { font-size: .8rem; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.2); border-left: 3px solid var(--morado); }
.item.BEBE { border-left-color: var(--naranja); } .item.CORONA, .item.REY { border-left-color: var(--dorado); }
.item.EVENTO { border-left-color: var(--cian); } .item.CARTA_GANADA, .item.CARTA_USADA { border-left-color: var(--verde); }
.item.TIRADA { border-left-color: var(--rosa); } .item .r { color: var(--secundario); font-size: .68rem; margin-right: 6px; }
.lista-historial { display: flex; flex-direction: column; gap: 4px; }

/* Inventario de cartas */
.inventario-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.carta-inv { border-radius: 16px; padding: 12px; background: linear-gradient(160deg, #fff, #efe8ff); color: #241247; border: 4px solid var(--morado); text-align: center; }
.carta-inv .ico { font-size: 2rem; }
.carta-inv strong { display: block; font-family: var(--fuente-titulo); }
.carta-inv small { display: block; font-size: .72rem; line-height: 1.25; margin: 4px 0 8px; }
.carta-inv .btn { width: 100%; padding: 6px; font-size: .8rem; }
.carta-inv.con-imagen { padding: 0; border: 0; background: transparent; }
.carta-inv.con-imagen img { width: 100%; border-radius: 14px; display: block; margin-bottom: 6px; }
.inventario-vacio { text-align: center; color: var(--secundario); padding: 20px; }

/* Overlays de animación --------------------------------------------- */
.overlay-doble, .overlay-rey, .overlay-jackpot, .overlay-evento { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 20px; }
.overlay-doble.activo, .overlay-rey.activo, .overlay-jackpot.activo, .overlay-evento.activo { display: flex; }
.overlay-doble { background: radial-gradient(circle, rgba(255,213,0,.35), rgba(10,0,25,.95)); pointer-events: none; }
.doble-txt { font-family: var(--fuente-titulo); font-size: 4rem; font-weight: 700; color: var(--amarillo); text-shadow: 0 0 30px gold; animation: zoomIn .6s cubic-bezier(.2,1.4,.4,1); }
.doble-corona { font-size: 5rem; animation: caerCorona .9s cubic-bezier(.2,1.4,.4,1); }
.doble-sub { font-size: 1.2rem; font-weight: 800; }
@keyframes zoomIn { from { transform: scale(0) rotate(-20deg); opacity: 0;} to { transform: none; opacity: 1;} }
@keyframes caerCorona { from { transform: translateY(-200px) rotate(-30deg); opacity: 0;} 60% { transform: translateY(10px) rotate(5deg); opacity: 1;} to { transform: none;} }
.overlay-rey { background: radial-gradient(circle, rgba(255,200,61,.5), rgba(20,0,40,.97)); }
.rey-txt { font-size: 7rem; animation: caerCorona 1s cubic-bezier(.2,1.4,.4,1), brillar 1.5s infinite 1s; }
.overlay-rey h1 { font-size: 2rem; color: var(--amarillo); } .overlay-rey h2 { font-size: 2.4rem; }
.overlay-jackpot { background: radial-gradient(circle, rgba(255,45,149,.5), rgba(20,0,40,.9)); pointer-events: none; }
.overlay-jackpot h1 { font-size: 3rem; color: var(--amarillo); text-shadow: 0 0 30px var(--rosa); animation: zoomIn .5s, parpadeo .3s infinite 1s; }
.overlay-evento { background: rgba(10,0,25,.92); }
.evento-caja { background: linear-gradient(160deg, #1f0a47, #12002b); border: 2px solid var(--cian); border-radius: 24px; padding: 24px; max-width: 360px; width: 100%; box-shadow: 0 0 40px rgba(52,224,255,.4); animation: zoomIn .5s; }
.evento-rayo { font-size: 3.5rem; animation: parpadeo .6s infinite; }
.evento-imagen { width: min(240px, 60vw); border-radius: 14px; margin: 0 auto 10px; display: block; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.evento-caja.con-imagen .evento-rayo { display: none; }
.evento-caja h2 { color: var(--cian); }
.evento-caja ul { list-style: none; padding: 0; text-align: left; font-size: .85rem; color: var(--secundario); }
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 70; width: 100%; height: 100%; }
.toast-juego { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px); background: #fff; color: #241247; padding: 10px 18px; border-radius: 999px; font-weight: 800; opacity: 0; transition: .3s; z-index: 80; max-width: 90vw; text-align: center; pointer-events: none; }
.toast-juego.visible { opacity: 1; transform: translateX(-50%); }

/* Final y estadísticas ------------------------------------------------- */
.trofeo { font-size: 5rem; animation: flotar 3s ease-in-out infinite; }
.resumen-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.resumen-numeros div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 4px; text-align: center; }
.resumen-numeros strong { display: block; font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--amarillo); }
.resumen-numeros small { color: var(--secundario); font-size: .7rem; }
.premios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.premio { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(255,200,61,.18), rgba(255,45,149,.12)); border: 1px solid rgba(255,200,61,.4); border-radius: 14px; padding: 10px; }
.premio-avatar { font-size: 1.8rem; }
.premio strong { font-size: .85rem; } .premio small { font-size: .7rem; color: var(--secundario); }
.ranking { display: flex; flex-direction: column; gap: 8px; }
.fila-ranking { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 10px; }
.fila-ranking .pos { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-fiesta); display: grid; place-items: center; font-weight: 900; font-size: .8rem; }
.fila-ranking:nth-child(1) .pos { background: var(--grad-dorado); color: #3a2400; }
.fila-ranking .av { font-size: 1.6rem; }
.barra { height: 8px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.barra i { display: block; height: 100%; background: var(--grad-fiesta); border-radius: 999px; transition: width 1s; }
.grafico-sumas { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 10px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; }
.col-suma { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.col-suma i { width: 100%; background: var(--grad-fiesta); border-radius: 6px 6px 0 0; min-height: 3px; }
.col-suma span { font-size: .7rem; color: var(--secundario); margin-top: 4px; }

@media (min-width: 480px) {
  .dado-3d { width: 96px; height: 96px; }
  .cara1,.cara6,.cara2,.cara5,.cara3,.cara4 { --z: 48px; }
  .cara1 { transform: rotateY(0deg) translateZ(48px); } .cara6 { transform: rotateY(180deg) translateZ(48px); }
  .cara2 { transform: rotateX(90deg) translateZ(48px); } .cara5 { transform: rotateX(-90deg) translateZ(48px); }
  .cara3 { transform: rotateY(90deg) translateZ(48px); } .cara4 { transform: rotateY(-90deg) translateZ(48px); }
  .mesa-dados { height: 170px; }
}

/* =====================================================================
   v1.4 · Rediseño neón + animaciones
   ===================================================================== */
:root { --neon-rosa: 0 0 6px #ff2d95, 0 0 18px rgba(255,45,149,.7), 0 0 38px rgba(255,45,149,.45);
        --neon-cian: 0 0 6px #34e0ff, 0 0 18px rgba(52,224,255,.7), 0 0 38px rgba(52,224,255,.4); }

/* Fondo de club: luces que se mueven + rejilla de pista */
body::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 30% at 20% 20%, rgba(255,45,149,.28), transparent 70%),
              radial-gradient(35% 30% at 80% 30%, rgba(52,224,255,.22), transparent 70%),
              radial-gradient(45% 35% at 50% 90%, rgba(143,75,255,.30), transparent 70%);
  animation: luces 14s ease-in-out infinite alternate; filter: blur(10px); }
body::after { content: ''; position: fixed; left: -50%; right: -50%; bottom: -10vh; height: 45vh; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,45,149,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(52,224,255,.18) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: pista 3s linear infinite; }
@keyframes luces { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(4%, -3%) rotate(8deg); } 100% { transform: translate(-4%, 3%) rotate(-6deg); } }
@keyframes pista { to { background-position: 0 48px, 0 0; } }

/* Títulos y bordes neón */
.nombre-turno { text-shadow: var(--neon-rosa); letter-spacing: .5px; }
.badge-ronda { border-color: rgba(52,224,255,.6); box-shadow: 0 0 12px rgba(52,224,255,.35) inset, 0 0 10px rgba(52,224,255,.25); color: #dff9ff; }
.nombre-evento { text-shadow: var(--neon-cian); }

/* Zona central con borde neón animado */
.zona-central { position: relative; background: rgba(12,4,32,.78); border: 0; isolation: isolate; backdrop-filter: blur(6px); }
.zona-central::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), #ff2d95, #8f4bff, #34e0ff, #ff2d95);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girarBorde 6s linear infinite; }
.zona-central::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -2; box-shadow: 0 0 30px rgba(255,45,149,.25), 0 0 60px rgba(52,224,255,.12); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes girarBorde { to { --ang: 360deg; } }

/* Fichas de jugadores */
.ficha-jugador { background: rgba(12,4,32,.7); backdrop-filter: blur(4px); }
.ficha-jugador.actual { border-color: #ff2d95; box-shadow: 0 0 0 1px #ff2d95, 0 0 18px rgba(255,45,149,.7), 0 0 34px rgba(255,45,149,.35); animation: fichaPulso 1.6s ease-in-out infinite; }
@keyframes fichaPulso { 50% { box-shadow: 0 0 0 1px #ff2d95, 0 0 26px rgba(255,45,149,.9), 0 0 50px rgba(255,45,149,.45); } }
.ficha-jugador.rey .av { animation: flotar 3s ease-in-out infinite; }

/* Botón tirar: brillo que cruza + anillo */
.btn-tirar { position: relative; overflow: hidden; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.btn-tirar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: barrido 2.8s ease-in-out infinite; }
.btn-tirar:disabled::after { display: none; }
@keyframes barrido { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Mesa de dados: sombras, temblor al lanzar, destello al caer */
.mesa-dados { position: relative; }
.sombra-dado { position: absolute; left: 50%; bottom: -26px; width: 90%; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); filter: blur(2px); transition: .3s; }
.dado-3d.saltando .sombra-dado { animation: sombraSalto 1.8s ease-out; }
@keyframes sombraSalto { 0% { transform: translateX(-50%) scale(.3); opacity: .2; } 45% { transform: translateX(-50%) scale(1.1); opacity: 1; } 60% { transform: translateX(-50%) scale(.75); opacity: .6; } 75%,100% { transform: translateX(-50%) scale(1); opacity: 1; } }
.dado-3d.girando .cubo { filter: drop-shadow(0 0 14px rgba(255,255,255,.55)); }
.dado-3d.rojo.girando .cubo { filter: drop-shadow(0 0 16px rgba(255,45,149,.8)); }
.mesa-dados.lanzando { animation: vibrarMesa .12s linear 8; }
@keyframes vibrarMesa { 25% { transform: translate(1px,-1px); } 50% { transform: translate(-1px,1px); } 75% { transform: translate(1px,1px); } }
.destello-mesa { position: absolute; left: 50%; top: 55%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%) scale(0); background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,45,149,.5) 40%, transparent 70%); pointer-events: none; }
.mesa-dados.impacto .destello-mesa { animation: destello .6s ease-out; }
.mesa-dados.impacto { animation: golpe .35s ease-out; }
@keyframes destello { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(40); opacity: 0; } }
@keyframes golpe { 30% { transform: translateY(4px) scale(1.01); } 100% { transform: none; } }

/* Suma con contador */
.resultado-suma .sd { color: #fff; opacity: .85; }
.resultado-suma b { font-size: 1.25em; color: var(--amarillo); text-shadow: 0 0 12px rgba(255,213,0,.9), 0 0 30px rgba(255,138,0,.6); }
.resultado-suma.doble-suma b { animation: arcoiris 1s linear infinite; }
@keyframes arcoiris { 0% { color: #ffd500; } 33% { color: #ff2d95; } 66% { color: #34e0ff; } 100% { color: #ffd500; } }

/* Carta: entra desde el mazo, gira y brilla */
.carta-3d.entrando .carta-flip { animation: cartaEntra .65s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes cartaEntra { from { transform: translateY(140px) rotate(-14deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.carta-3d.entrando .carta-flip.volteada { animation: none; }
.carta-frente { overflow: hidden; }
.carta-frente::after { content: ''; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.carta-3d.brillo .carta-frente::after { animation: brilloCarta 1.1s ease-out; }
@keyframes brilloCarta { to { transform: translateX(100%); } }
.carta-3d.brillo .carta-frente { box-shadow: 0 0 22px rgba(255,45,149,.6), 0 0 48px rgba(52,224,255,.25); }
.carta-dorso { background: radial-gradient(circle at 50% 40%, #4b1a9a, #1a0640 70%); border: 5px solid #ff2d95; box-shadow: inset 0 0 30px rgba(255,45,149,.6); text-shadow: var(--neon-rosa); color: #fff; }

/* Panel de resultado */
.panel-resultado { background: rgba(12,4,32,.82); border-color: rgba(255,45,149,.35); box-shadow: 0 0 24px rgba(255,45,149,.15); backdrop-filter: blur(6px); }
.panel-resultado.cerrando { animation: cerrarPanel .3s ease-in forwards; }
@keyframes cerrarPanel { to { opacity: 0; transform: translateY(20px) scale(.97); } }
.zona-decision > * { animation: aparecer .35s ease both; }
.zona-decision .btn { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Números flotantes */
.flotante { position: fixed; z-index: 90; transform: translateX(-50%); font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; color: #ffb02e;
  text-shadow: 0 0 10px rgba(255,138,0,.9), 0 2px 4px #000; pointer-events: none; animation: flotarArriba 1.5s ease-out forwards; }
@keyframes flotarArriba { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }

/* Pantalla de cambio de turno */
.overlay-turno { position: fixed; inset: 0; z-index: 65; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 45%, #4a0a3c, #0c021e 65%); cursor: pointer; overflow: hidden; }
.overlay-turno.activo { display: flex; animation: aparecerTurno .35s ease both; }
.overlay-turno.saliendo { animation: salirTurno .35s ease forwards; }
@keyframes aparecerTurno { from { opacity: 0; } to { opacity: 1; } }
@keyframes salirTurno { to { opacity: 0; transform: scale(1.08); } }
.turno-rayos { position: absolute; width: 160vmax; height: 160vmax; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 8deg, transparent 8deg 20deg); animation: girarRayos 18s linear infinite; }
@keyframes girarRayos { to { transform: rotate(360deg); } }
.turno-pasa { position: relative; font-size: .95rem; letter-spacing: 3px; text-transform: uppercase; color: #ffd6ec; animation: aparecer .4s .1s both; }
.turno-avatar { position: relative; font-size: 6.5rem; line-height: 1; margin: 14px 0 6px; filter: drop-shadow(0 0 24px rgba(255,45,149,.8)); animation: avatarEntra .7s .15s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes avatarEntra { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.turno-nombre { position: relative; font-family: var(--fuente-titulo); font-weight: 700; font-size: 3rem; line-height: 1.05; color: #fff; text-shadow: var(--neon-rosa); animation: aparecer .4s .3s both; word-break: break-word; }
.turno-info { position: relative; margin-top: 8px; color: #cfe9ff; font-weight: 700; animation: aparecer .4s .4s both; }
.turno-toca { position: absolute; bottom: calc(28px + var(--safe-bottom)); font-size: .78rem; color: var(--secundario); animation: parpadeo 1.4s infinite; }

/* Overlays existentes un poco más vistosos */
.overlay-doble .doble-txt, .overlay-jackpot h1 { font-family: var(--fuente-titulo); }
.overlay-rey h1 { text-shadow: 0 0 20px gold, 0 0 40px rgba(255,157,0,.7); }
.evento-caja { box-shadow: 0 0 0 1px var(--cian), 0 0 40px rgba(52,224,255,.5), inset 0 0 30px rgba(52,224,255,.15); }

/* Inicio y configuración */
.btn-fiesta { box-shadow: 0 8px 24px rgba(255,45,149,.45), 0 0 0 1px rgba(255,255,255,.12) inset; }
.tarjeta-partida, .opcion-int, .opciones-duracion span, .lista-jugadores li, .fila-ranking, .premio { backdrop-filter: blur(4px); }
.lista-jugadores li { animation: entrarLado .35s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes entrarLado { from { opacity: 0; transform: translateX(-30px) scale(.9); } to { opacity: 1; transform: none; } }

/* Accesibilidad: menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .zona-central::before, .btn-tirar::after, .turno-rayos, .fondo-burbujas span { animation: none !important; }
}