/* Efectos de la videollamada: panel, capas (reacciones, fiesta, dibujo), tarjeta de juegos y temas.
   Solo afecta a la pantalla de llamada (.ll-capa). Animaciones con transform y opacity. */

/* Botón de la barra: punto dorado si hay algún efecto activo */
.ll-btn[data-ll="efectos"] .ll-btn-ico{position:relative}
.ll-btn[data-ll="efectos"].ef-hay .ll-btn-ico::after{content:"";position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--ll-oro-claro);box-shadow:0 0 0 2px #0b0a09,0 0 8px var(--ll-oro)}
.ll-item[data-ll="efectos"].ef-hay .ll-item-estado::before{content:"Hay efectos activos"}

/* Panel: flotante, oscuro, bordes dorados sutiles y esquinas muy redondeadas */
.ef-panel{width:min(calc(100% - 20px),560px);max-height:min(84vh,760px);border-radius:30px;border-color:#d4a64a59;
  background:radial-gradient(120% 60% at 50% 0,#2a211566,transparent 60%),linear-gradient(180deg,#17130fef,#0a0908f7);
  box-shadow:inset 0 1px 0 #ffe6a31a,0 0 0 1px #00000080,0 24px 70px #000000d0,0 0 40px #d4a64a14}
.ef-panel .ll-hoja-cabeza{flex-wrap:wrap;row-gap:6px;padding:10px 12px 8px 20px}
.ef-titulo{display:flex;align-items:center;gap:10px;min-width:0;margin:0}
.ef-panel .ll-hoja-cabeza h3.ef-titulo{font-size:clamp(23px,3.2vw + 12px,30px);font-weight:700;letter-spacing:.01em;line-height:1.1}
.ef-titulo-ico{flex:none;font-size:.82em;filter:drop-shadow(0 0 8px #f3cd6c80)}
.ef-titulo-texto{font-family:"Playfair Display",Georgia,"Times New Roman",serif;background:linear-gradient(180deg,#fff7e0 0%,#f3cd6c 55%,#c48b2c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f3cd6c;white-space:nowrap}
.ef-cabeza-acciones{display:flex;align-items:center;gap:8px;margin-left:auto}
.ef-quitar{min-height:38px;padding:0 14px;border-color:#d4a64a73;background:#0d0b09cc;color:#f2eadc;font-size:12.5px;line-height:1.15;text-align:left;max-width:min(52vw,230px)}
.ef-quitar svg{flex:none;color:#f3cd6c}
.ef-quitar:hover{border-color:#f3cd6c;background:#1a150fcc}
.ef-estado{margin:0 16px 6px;padding:8px 12px;border-radius:12px;background:#d4a64a1f;border:1px solid #d4a64a40;font-size:13px;color:var(--ll-texto)}
.ef-pestanas{flex:none;display:flex;gap:8px;overflow-x:auto;padding:6px 16px 12px;scrollbar-width:none;overscroll-behavior:contain}
.ef-pestanas::-webkit-scrollbar{display:none}
.ef-pestana{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #c9b48a4d;background:#14110ee6;color:#eee6d8;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,box-shadow .15s}
.ef-pestana:hover{border-color:#d4a64a99}
.ef-pestana[aria-selected="true"]{color:#1a1206;border-color:#ffe6a3;background:linear-gradient(160deg,#fff0c4,#e8bf62 45%,#c08d33);font-weight:700;box-shadow:0 0 0 1px #f3cd6c66,0 0 18px #e7b85066,inset 0 1px 0 #ffffff80}
.ef-pestana:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-cuerpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:2px 16px 18px;container-type:inline-size}

/* Filtros: tarjetas de retrato con la misma persona (3 columnas en teléfono, 2 si es muy angosto, 4 en tableta, 5+ en PC) */
.ef-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@container (max-width:290px){.ef-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:500px){.ef-fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:620px){.ef-fgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container (min-width:820px){.ef-fgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ef-tile.ef-fcard{align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:18px;border:1.5px solid #d4a64a2e;background:linear-gradient(180deg,#1b1713,#0f0d0b);box-shadow:0 8px 20px #0000008c;transition:border-color .18s,box-shadow .18s,transform .14s}
.ef-tile.ef-fcard:hover{background:linear-gradient(180deg,#221c16,#12100d);border-color:#d4a64a73}
.ef-fprev{position:relative;display:block;aspect-ratio:240 / 264;overflow:hidden;background:#14110e}
.ef-fimg{display:block;width:100%;height:100%}
.ef-fcard .ef-nombre{display:flex;align-items:center;justify-content:center;min-height:2.9em;padding:5px 6px 6px;font-size:12.5px;font-weight:500;line-height:1.15;color:#efe7da;white-space:normal;overflow-wrap:anywhere}
.ef-tile.ef-fcard[aria-pressed="true"]{border-color:#f6d27a;background:linear-gradient(180deg,#2a2114,#14100b);box-shadow:0 0 0 1px #f6d27a,0 0 22px #e7b8508c,0 8px 22px #000a}
.ef-fcard[aria-pressed="true"] .ef-fprev::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px #f3cd6c55;pointer-events:none}
.ef-fcard[aria-pressed="true"] .ef-nombre{color:#ffe7a6;font-weight:700}
.ef-check{position:absolute;left:7px;top:7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(160deg,#fff0c4,#d4a64a);color:#1a1206;box-shadow:0 2px 8px #000a;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s}
.ef-fcard[aria-pressed="true"] .ef-check{opacity:1;transform:none}
.ef-pro{position:absolute;right:7px;top:7px;padding:3px 7px;border-radius:7px;font:800 10px/1.2 system-ui,sans-serif;letter-spacing:.08em;font-style:normal;color:#1a1206;background:linear-gradient(160deg,#fff0c4,#e0b65a 55%,#b9852e);box-shadow:0 2px 8px #000b}
.ef-insignia{position:absolute;right:6px;bottom:5px;font-style:normal;font-size:16px;filter:drop-shadow(0 1px 3px #000)}
.ef-insignia img{display:block;width:24px;height:24px}
.ef-fcard .ef-fav.ef-corazon{top:7px;right:7px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0000008c;color:#ffffffe6;opacity:1;cursor:pointer;text-shadow:none;transition:transform .15s,background .15s}
.ef-fcard-pro .ef-fav.ef-corazon{top:auto;bottom:7px;right:auto;left:7px}
.ef-corazon svg{fill:none;stroke:currentColor;stroke-width:2}
.ef-corazon:hover{transform:scale(1.08);background:#000000b3}
.ef-fcard.ef-es-fav .ef-corazon{color:#f6d27a}
.ef-fcard.ef-es-fav .ef-corazon svg{fill:#f6d27a;stroke:#f6d27a}
/* Cara: tarjetas cuadradas con el ícono 3D sobre negro y detalles dorados (el negro del ícono se funde con la tarjeta) */
.ef-cprev{aspect-ratio:1;background:radial-gradient(circle at 50% 42%,#2a2116 0%,#110e0b 62%,#080706 100%)}
.ef-cimg{display:block;width:100%;height:100%;box-sizing:border-box;padding:6%;object-fit:contain;-webkit-user-drag:none;transition:transform .2s}
.ef-ccat{margin:16px 2px 8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#f3cd6c}
.ef-ccat-bloque:first-of-type .ef-ccat{margin-top:8px}
.ef-ccard-ninguno{margin-bottom:4px;max-width:148px}
.ef-cprev-ninguno{display:grid;place-items:center;color:#f3cd6c}
.ef-ninguno-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#00000055}
.ef-ccard:hover .ef-cimg{transform:scale(1.04)}
.ef-ccard[aria-pressed="true"] .ef-cimg{transform:scale(1.07)}
.ef-ccard .ef-nombre{font-size:12px;overflow-wrap:break-word;hyphens:manual}
.ef-ccard.ef-fcard-pro .ef-fav.ef-corazon{top:7px;right:7px;bottom:auto;left:auto}
.ef-ccard .ef-pro{top:auto;bottom:7px}
img.ef-mini-cara{object-fit:contain;background:radial-gradient(circle at 50% 45%,#2a2116,#0b0907 70%)}
/* Voz: chips, tarjetas con ▶ y ajustes rápidos */
.ef-vcats{display:flex;gap:7px;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ef-vcats::-webkit-scrollbar{display:none}
.ef-vcat{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid #d4a64a33;background:#ffffff08;color:#d9cfbf;font:inherit;font-size:12.5px;cursor:pointer;transition:background .15s,border-color .15s}
.ef-vcat[aria-pressed="true"]{border-color:#f6d27a;color:#1a1206;font-weight:600;background:linear-gradient(160deg,#ffe6a3,#d4a64a 60%,#a77a2b)}
.ef-vcat:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-vcard[hidden]{display:none}
.ef-vprev{aspect-ratio:240 / 172;background:#110e0b}
.ef-vimg{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .2s}
.ef-vcard:hover .ef-vimg{transform:scale(1.04)}
.ef-vcard.ef-fcard-pro .ef-fav.ef-corazon{top:7px;right:7px;bottom:auto;left:auto}
.ef-vcard .ef-fav.ef-corazon{width:28px;height:28px}
.ef-vcard .ef-pro{top:auto;bottom:7px;right:7px}
.ef-vplay{position:absolute;left:7px;bottom:7px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#000000a6;border:1px solid #f6d27a80;color:#ffe6a3;cursor:pointer;transition:transform .15s,background .15s}
.ef-vplay svg{margin-left:2px}
.ef-vplay:hover{transform:scale(1.1);background:#000000cc}
.ef-vplay.ef-sonando{background:linear-gradient(160deg,#ffe6a3,#d4a64a);color:#1a1206;animation:ef-late 1s ease-in-out infinite}
.ef-vcard .ef-nombre{min-height:0;padding:6px 6px 0;font-size:12.5px}
.ef-vsub,.ef-vactivo{display:block;padding:1px 6px 7px;font-size:11px;line-height:1.2;text-align:center;color:var(--ll-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-vactivo{display:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f6d27a}
.ef-vcard[aria-pressed="true"] .ef-vsub{display:none}
.ef-vcard[aria-pressed="true"] .ef-vactivo{display:block}
.ef-vajustes{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px;border-radius:16px;border:1px solid #d4a64a33;background:linear-gradient(180deg,#1b1713,#0f0d0b)}
.ef-vajustes-titulo{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:600;color:#f3e3bd}
.ef-vajustes-titulo svg{color:var(--ll-oro-claro)}
.ef-vajustes-fila{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:560px){.ef-vajustes-fila{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.ef-vajuste{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;color:var(--ll-texto)}
.ef-vajuste-cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ef-vajuste output{font-variant-numeric:tabular-nums;font-weight:600;color:#f6d27a}
.ef-vajuste input[type="range"]{width:100%;min-height:28px;margin:0;accent-color:#e0b65a;background:transparent}
.ef-vprueba-fila{display:flex;align-items:center;gap:10px;min-height:40px}
.ef-onda{flex:1;display:flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;height:22px;overflow:hidden}
.ef-onda i{flex:none;width:3px;border-radius:2px;background:linear-gradient(180deg,#ffe6a3,#b9852e);opacity:.75}
.ef-vprobar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a 60%,#a77a2b);color:#1a1206;cursor:pointer;box-shadow:0 4px 12px #0009}
.ef-vprobar svg{margin-left:2px}
.ef-vprobar:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-vprobar.ef-ocupado{opacity:.7;cursor:progress}
.ef-vprobar.ef-grabando{background:linear-gradient(160deg,#ff8f7a,#d23b2a);border-color:#ffb3a6;color:#fff;animation:ef-late 1s ease-in-out infinite}
.ef-vprueba:has(.ef-grabando) .ef-onda i,.ef-vprueba:has(.ef-ocupado) .ef-onda i{animation:ef-onda .9s ease-in-out infinite alternate}
.ef-onda i:nth-child(3n){animation-delay:-.3s}
.ef-onda i:nth-child(3n+1){animation-delay:-.6s}
.ef-vajustes [data-ef="voz-vivo"][aria-pressed="true"]{border-color:#f6d27a;color:#ffe6a3;background:#d4a64a26}
@keyframes ef-late{50%{transform:scale(1.08)}}
@keyframes ef-onda{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.ef-diag-voz{position:absolute;left:8px;top:8px;z-index:9;max-width:min(92vw,330px);margin:0;padding:8px 10px;border-radius:10px;background:#000000d0;color:#9dffb0;font:11px/1.35 ui-monospace,Consolas,monospace;white-space:pre-wrap;pointer-events:none}
.ef-privacidad{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:14px;border:1px solid #d4a64a33;background:#d4a64a0d;color:#d9cfbf}
.ef-privacidad svg{flex:none;margin-top:1px;color:var(--ll-oro-claro)}
.ef-seccion{display:flex;flex-direction:column;gap:12px}
.ef-bloque{display:flex;flex-direction:column;gap:8px}
.ef-bloque h4{margin:6px 2px 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#d4a64ad0}
.ef-nota{margin:0 2px;font-size:12.5px;line-height:1.45;color:var(--ll-tenue)}
.ef-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.ef-rejilla:empty{display:none}
.ef-rejilla-chica{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.ef-rejilla-reacciones{grid-template-columns:repeat(5,1fr)}
.ef-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:6px 6px 7px;border-radius:14px;border:1.5px solid #ffffff12;background:#ffffff08;color:var(--ll-texto);font:inherit;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color .15s,background .15s,transform .12s}
.ef-tile:hover{background:#ffffff12}
.ef-tile:active{transform:scale(.96)}
.ef-tile:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-tile[aria-pressed="true"]{border-color:var(--ll-oro-claro);background:#d4a64a26;box-shadow:0 0 0 1px #d4a64a66,0 0 14px #d4a64a40}
.ef-tile[aria-pressed="true"] .ef-nombre{color:#fff1c2;font-weight:600}
.ef-tile.ef-elegida{border-style:dashed;border-color:var(--ll-oro)}
.ef-mini{display:block;width:100%;aspect-ratio:3 / 2;height:auto;border-radius:9px;background:#14110e}
.ef-ico{display:grid;place-items:center;width:100%;aspect-ratio:3 / 2;font-size:30px;line-height:1;border-radius:9px;background:#14110e}
.ef-rejilla-reacciones .ef-ico,.ef-rejilla-chica .ef-ico{aspect-ratio:1;font-size:26px}
.ef-ico img{width:34px;height:34px}
.ef-ico .ef-ico-3d{width:auto;height:86%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 6px #000000b3)}
.ef-nombre{max-width:100%;font-size:11.5px;line-height:1.2;text-align:center;color:var(--ll-tenue);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
img.ef-mini{object-fit:cover;-webkit-user-drag:none}
.ef-fav{position:absolute;top:3px;right:6px;font-style:normal;font-size:12px;color:var(--ll-oro-claro);opacity:0;text-shadow:0 1px 3px #000}
.ef-es-fav .ef-fav{opacity:1}
/* Fondos: la estrella se ve siempre (tocarla marca o quita el favorito) */
.ef-seccion[data-sec="fondos"] .ef-fav,.ef-tile[data-id^="fondo:"] .ef-fav{top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0009;font-size:13px;color:#ffffffb3;opacity:1;cursor:pointer}
.ef-tile[data-id^="fondo:"].ef-es-fav .ef-fav{color:var(--ll-oro-claro)}
.ef-tile.ef-cargando .ef-mini{opacity:.55}
.ef-tile.ef-cargando::after{content:"";position:absolute;top:24px;left:calc(50% - 11px);width:22px;height:22px;border-radius:50%;border:2px solid #ffffff40;border-top-color:var(--ll-oro-claro);animation:ll-gira .8s linear infinite}
.ef-tile-agregar .ef-ico{font-size:28px;color:var(--ll-oro-claro);border:1.5px dashed #d4a64a66;background:none}
.ef-deslizador{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;font-size:13px;color:var(--ll-texto)}
.ef-deslizador input{grid-column:1 / -1;width:100%;accent-color:var(--ll-oro);min-height:28px}
.ef-deslizador output{font-variant-numeric:tabular-nums;color:var(--ll-oro-claro);font-size:12px}
.ef-interruptor{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 12px;border-radius:14px;border:1px solid #d4a64a2e;background:#ffffff08;color:var(--ll-texto);font:inherit;text-align:left;cursor:pointer}
.ef-interruptor-texto{display:flex;flex-direction:column;gap:2px}
.ef-interruptor-texto b{font-weight:500;font-size:14px}
.ef-interruptor-texto small{font-size:12px;color:var(--ll-tenue)}
.ef-interruptor i{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:#ffffff26;transition:background .2s}
.ef-interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#f7f0e4;transition:transform .2s}
.ef-interruptor[aria-checked="true"] i{background:var(--ll-oro)}
.ef-interruptor[aria-checked="true"] i::after{transform:translateX(18px)}
.ef-interruptor:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-gestos{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ef-gestos li{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:999px;background:#ffffff0d;font-size:12px;color:var(--ll-tenue)}
.ef-gestos img{width:22px;height:22px;filter:drop-shadow(0 1px 3px #000)}
.ef-acciones{display:flex;flex-wrap:wrap;gap:8px}
.ef-voz-estado{margin:0 2px;font-size:13.5px;color:var(--ll-texto)}
.ef-boton,.ef-boton-oro{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;font:inherit;font-size:13.5px;cursor:pointer}
.ef-boton{border:1px solid #d4a64a59;background:#ffffff0a;color:var(--ll-texto)}
.ef-boton-oro{border:1px solid #ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a 60%,#a77a2b);color:#1a1206;font-weight:600}
.ef-boton:disabled,.ef-boton-oro:disabled{opacity:.45;cursor:not-allowed}
.ef-boton:focus-visible,.ef-boton-oro:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-boton-chico{min-height:32px;padding:0 12px;font-size:12px}
.ef-chips{display:flex;flex-wrap:wrap;gap:6px}
.ef-chip{min-height:34px;padding:0 13px;border-radius:999px;border:1px solid #ffffff1f;background:#ffffff08;color:var(--ll-tenue);font:inherit;font-size:12.5px;cursor:pointer}
.ef-chip[aria-checked="true"]{border-color:var(--ll-oro-claro);color:#fff1c2;background:#d4a64a26}
.ef-chip:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}

/* Capa de reacciones y modo fiesta (no recibe toques) */
.ef-capa{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ef-flotantes{position:absolute;inset:0}
.ef-flota{position:absolute;bottom:-70px;margin-left:calc(var(--ef-tam,32px) / -2);will-change:transform,opacity;animation:ef-sube var(--ef-dur,3s) cubic-bezier(.2,.6,.3,1) var(--ef-retraso,0s) both}
.ef-flota img{display:block;width:var(--ef-tam,32px);height:var(--ef-tam,32px);filter:drop-shadow(0 0 10px #f6c55a59) drop-shadow(0 5px 8px #0009)}
@keyframes ef-sube{
  0%{transform:translate3d(0,0,0) scale(.8) rotate(0);opacity:0}
  10%{opacity:1;transform:translate3d(calc(var(--ef-vaiven,0px) * .2),-9vh,0) scale(1.12) rotate(var(--ef-giro,0deg))}
  18%{transform:translate3d(calc(var(--ef-vaiven,0px) * .3),-14vh,0) scale(1) rotate(var(--ef-giro,0deg))}
  70%{opacity:1}
  100%{transform:translate3d(var(--ef-vaiven,0px),-78vh,0) scale(1.06) rotate(calc(var(--ef-giro,0deg) * -1));opacity:0}
}
.ef-quien{position:absolute;left:calc(14px + var(--ll-izq-s,0px));bottom:calc(var(--ll-inf,0px) + 112px);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ef-quien-item{display:flex;align-items:center;gap:6px;max-width:60vw;padding:5px 12px;border-radius:999px;background:#0d0b0acc;border:1px solid #d4a64a40;font-size:12.5px;color:var(--ll-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:ef-aviso 3.4s ease both}
.ef-quien-item img{flex:none;width:22px;height:22px;margin-left:-6px;filter:drop-shadow(0 1px 3px #000)}

/* Destellos de los sonidos: la ilustración entra (escala .8→1, brillo y rebote), flota y se va con chispas. */
.ef-destellos{position:absolute;inset:0}
.ef-destello{position:absolute;inset:0}
.ef-dst-centro{position:absolute;left:50%;top:var(--arriba,45%);width:var(--tam,220px);height:var(--tam,220px);margin:calc(var(--tam,220px) / -2) 0 0 calc(var(--tam,220px) / -2)}
.ef-dst-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 22px #f6c55a8c) drop-shadow(0 10px 18px #000a);will-change:transform,opacity;animation:ef-dst-entra var(--ms,2s) cubic-bezier(.2,.8,.25,1) both}
@keyframes ef-dst-entra{
  0%{opacity:0;transform:scale(.8)}
  12%{opacity:1;transform:scale(1.08)}
  20%{transform:scale(.97)}
  28%{transform:scale(1)}
  78%{opacity:1;transform:translateY(-10px) scale(1.02)}
  100%{opacity:0;transform:translateY(-24px) scale(.96)}
}
.ef-dst-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#fff3cf8c 0,#f6c55a40 30%,#f6c55a00 66%);opacity:0;animation:ef-dst-halo var(--ms,2s) ease-out both}
@keyframes ef-dst-halo{0%{opacity:0;transform:scale(.5)}14%{opacity:1;transform:scale(1.05)}70%{opacity:.55}100%{opacity:0;transform:scale(1.25)}}
.ef-dst-chispa{position:absolute;left:50%;top:50%;width:var(--t,20px);height:var(--t,20px);margin:calc(var(--t,20px) / -2);opacity:0;animation:ef-dst-chispa 1.1s cubic-bezier(.15,.7,.3,1) calc(.12s + var(--r,0s)) both}
@keyframes ef-dst-chispa{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1) rotate(90deg)}}
.ef-dst-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff8e6 0,var(--c,#ffb347) 30%,#ff6a0000 72%);mix-blend-mode:screen;opacity:0;animation:ef-dst-flash .7s ease-out both}
@keyframes ef-dst-flash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}
.ef-dst-boom .ef-dst-img{animation-name:ef-dst-boom}
@keyframes ef-dst-boom{0%{opacity:0;transform:scale(.8) rotate(-8deg)}10%{opacity:1;transform:scale(1.18) rotate(4deg)}18%{transform:scale(.98) rotate(-2deg)}26%{transform:scale(1.02) rotate(0)}80%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.2)}}
.ef-dst-borde{position:absolute;inset:0;box-shadow:inset 0 0 0 4px var(--c,#ff2a2a),inset 0 0 70px var(--c,#ff2a2a);opacity:0;animation:ef-dst-borde .55s ease-in-out 4 alternate both}
@keyframes ef-dst-borde{from{opacity:.15}to{opacity:.9}}
.ef-dst-alerta .ef-dst-img{animation-name:ef-dst-alerta}
@keyframes ef-dst-alerta{0%{opacity:0;transform:scale(.8)}10%{opacity:1;transform:scale(1.06)}20%,40%,60%{transform:scale(1) rotate(-4deg)}30%,50%,70%{transform:scale(1.04) rotate(4deg)}82%{opacity:1;transform:none}100%{opacity:0;transform:scale(.95)}}
.ef-dst-corazon .ef-dst-img{animation-name:ef-dst-latido}
@keyframes ef-dst-latido{0%{opacity:0;transform:scale(.8)}10%{opacity:1;transform:scale(1.1)}18%{transform:scale(.96)}26%{transform:scale(1.12)}36%{transform:scale(1)}50%{transform:scale(1.1)}60%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.92)}}
.ef-dst-redoble .ef-dst-img{animation-name:ef-dst-redoble}
@keyframes ef-dst-redoble{0%{opacity:0;transform:scale(.8)}10%{opacity:1;transform:scale(1)}14%,22%,30%,38%,46%,54%{transform:translateY(-3px) rotate(-1.5deg)}18%,26%,34%,42%,50%,58%{transform:translateY(2px) rotate(1.5deg)}66%{transform:scale(1.14)}74%{transform:scale(1)}84%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.ef-dst-aplausos .ef-dst-img{animation-name:ef-dst-aplausos}
@keyframes ef-dst-aplausos{0%{opacity:0;transform:scale(.8)}10%{opacity:1;transform:scale(1.06)}20%,36%,52%{transform:scale(.94)}28%,44%,60%{transform:scale(1.06)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-18px)}}
.ef-dst-risa .ef-dst-img{animation-name:ef-dst-risa}
@keyframes ef-dst-risa{0%{opacity:0;transform:scale(.8)}12%{opacity:1;transform:scale(1.08)}22%,42%,62%{transform:rotate(-7deg) translateY(-4px)}32%,52%,72%{transform:rotate(7deg)}84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-20px)}}
.ef-dst-rayos{position:absolute;inset:-70%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#f3cd6c59 0deg 6deg,#f3cd6c00 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,#0000 62%);mask:radial-gradient(circle,#000 0,#0000 62%);opacity:0;animation:ef-dst-rayos var(--ms,2.6s) ease-out both}
@keyframes ef-dst-rayos{0%{opacity:0;transform:rotate(0) scale(.6)}18%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:rotate(40deg) scale(1.1)}}
.ef-dst-entrada .ef-dst-img{animation-name:ef-dst-corona}
@keyframes ef-dst-corona{0%{opacity:0;transform:translateY(-50px) scale(.8)}16%{opacity:1;transform:translateY(6px) scale(1.06)}26%{transform:none}80%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-20px) scale(1.03)}}
.ef-dst-fiesta{display:none}
@keyframes ef-dst-suave{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
.ef-canon{position:absolute;bottom:calc(var(--ll-inf,0px) + 112px);width:var(--tam,110px);height:var(--tam,110px);object-fit:contain;transform:scaleX(var(--espejo,1));filter:drop-shadow(0 0 16px #f6c55a73) drop-shadow(0 8px 14px #000a);animation:ef-canon 1.9s cubic-bezier(.2,.8,.25,1) both}
.ef-canon-izq{left:calc(8px + var(--ll-izq-s,0px));--espejo:1}
.ef-canon-der{right:calc(8px + var(--ll-der-s,0px));--espejo:-1}
@keyframes ef-canon{
  0%{opacity:0;transform:scaleX(var(--espejo)) translateY(30px) scale(.8)}
  10%{opacity:1;transform:scaleX(var(--espejo)) translate(-8px,8px) scale(1.08)}
  22%{transform:scaleX(var(--espejo)) scale(1)}
  75%{opacity:1;transform:scaleX(var(--espejo)) translateY(-4px)}
  100%{opacity:0;transform:scaleX(var(--espejo)) translateY(20px) scale(.9)}
}
@keyframes ef-aviso{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.ef-confeti{position:absolute;inset:0;width:100%;height:100%}
.ef-luces{position:absolute;inset:-10%;opacity:0;transition:opacity .4s;mix-blend-mode:screen;
  background:radial-gradient(30% 25% at 20% 15%,#ff3b6b55,transparent 70%),radial-gradient(30% 25% at 80% 20%,#3bd1ff55,transparent 70%),radial-gradient(35% 30% at 50% 90%,#ffd23b44,transparent 70%)}
.ef-fiesta .ef-luces{opacity:1;animation:ef-luces 5s ease-in-out infinite alternate}
@keyframes ef-luces{0%{transform:translate3d(-3%,0,0) rotate(0deg)}100%{transform:translate3d(3%,2%,0) rotate(8deg)}}
.ef-fiesta .ef-capa::after{content:"";position:absolute;inset:0;border:3px solid transparent;border-radius:inherit;
  background:linear-gradient(90deg,#ff3b6b,#ffd23b,#3bff8a,#3bd1ff,#9b3bff,#ff3b6b) border-box;background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  animation:ef-borde 4s linear infinite}
@keyframes ef-borde{to{background-position:300% 0}}

/* Dibujo: el lienzo queda bajo la ventana propia; la barra de herramientas, sobre todo menos las hojas */
.ef-dibujo{position:absolute;inset:0;pointer-events:none}
.ef-lienzo{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.ef-dibujo:not(.ef-con-trazos):not(.ef-dibujando) .ef-lienzo{display:none}
.ef-dibujando .ef-lienzo{pointer-events:auto;cursor:crosshair;touch-action:none}
.ef-dibujo-barra,.ef-dibujo-emojis,.ef-dibujo-texto{position:absolute;z-index:5;left:8px;right:8px;width:fit-content;margin-inline:auto;pointer-events:auto;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:8px 10px;border-radius:22px;border:1px solid var(--ll-borde);background:#0d0b0ae6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px #000a}
.ef-dibujo-barra{top:calc(var(--ll-sup,0px) + 10px)}
.ef-dibujo-emojis,.ef-dibujo-texto{top:var(--ef-bajo-barra,calc(var(--ll-sup,0px) + 128px))}
.ef-herr{min-width:38px;min-height:38px;padding:0 8px;border-radius:12px;border:1px solid #ffffff1f;background:#ffffff0a;color:var(--ll-texto);font:inherit;font-size:16px;cursor:pointer}
.ef-herr[aria-pressed="true"]{border-color:var(--ll-oro-claro);background:#d4a64a33}
.ef-herr{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.ef-herr svg{width:20px;height:20px;fill:none;stroke:#f3d27a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #f3d27a40)}
.ef-herr-img{width:30px;height:30px;margin:-4px;object-fit:contain;filter:drop-shadow(0 2px 4px #000c)}
.ef-herr-listo svg{stroke:#1a1206;filter:none}
.ef-herr-texto{font-size:12.5px}
.ef-herr-listo{border-color:#ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a);color:#1a1206;font-weight:600}
.ef-color{width:28px;height:28px;border-radius:50%;border:2px solid #0008;background:var(--c);cursor:pointer}
.ef-color[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ll-oro-claro)}
.ef-sep{width:1px;height:24px;background:#ffffff26}
.ef-dibujo-emojis button{width:40px;height:40px;border:0;border-radius:12px;background:#ffffff0a;font-size:22px;cursor:pointer}
.ef-dibujo-emojis button.ef-elegido{background:#d4a64a40}
.ef-dibujo-texto input{min-width:0;width:min(60vw,260px);min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--ll-borde);background:#050505;color:var(--ll-texto);font:inherit}
.ef-dibujo-texto button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--ll-oro);color:#1a1206;font:inherit;font-weight:600}
.ef-herr:focus-visible,.ef-color:focus-visible,.ef-dibujo-emojis button:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}

/* Tarjeta central: juegos, ruleta y foto */
.ef-tarjeta{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-55%);display:flex;flex-direction:column;width:min(calc(100% - 24px),380px);max-height:min(72vh,560px);overflow:hidden;
  border-radius:24px;border:1px solid #d4a64a66;background:linear-gradient(180deg,#1c1814f0,#0b0a09f5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 24px 70px #000c;animation:ef-tarjeta .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes ef-tarjeta{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
.ef-tarjeta header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 4px 18px}
.ef-tarjeta h3{margin:0;font-size:15px;font-weight:600;color:#fff1c2}
.ef-tarjeta-cuerpo{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 16px 18px;overflow:auto;text-align:center}
.ef-juego-nota{margin:0;font-size:13px;color:var(--ll-tenue)}
.ef-juego-grande{margin:0;font-size:38px;line-height:1.15;color:#fff}
.ef-juego-medio{font-size:20px;font-weight:600}
.ef-juego-pregunta{margin:0;font-size:17px;line-height:1.35;color:#fff}
.ef-juego-emoji{margin:0;font-size:40px;letter-spacing:.08em}
.ef-juego-opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.ef-juego-opciones button{min-height:46px;padding:6px 10px;border-radius:14px;border:1px solid #d4a64a40;background:#ffffff0a;color:var(--ll-texto);font:inherit;font-size:14px;cursor:pointer}
.ef-juego-opciones button.ef-elegido{border-color:var(--ll-oro-claro);background:#d4a64a33}
.ef-juego-opciones button:disabled{cursor:default}
.ef-juego-ppt{grid-template-columns:repeat(3,1fr)}
.ef-juego-ppt button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:78px;text-transform:capitalize}
.ef-juego-ppt span{font-size:30px}
.ef-juego-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;width:100%;font-size:14px;color:var(--ll-texto)}
.ef-juego-lista li{padding:6px 10px;border-radius:10px;background:#ffffff08}
.ef-juego-tiempo{width:100%;height:4px;border-radius:4px;background:#ffffff1a;overflow:hidden}
.ef-juego-tiempo i{display:block;height:100%;background:var(--ll-oro);transform-origin:left;animation:ef-tiempo var(--ef-t,12s) linear forwards}
@keyframes ef-tiempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.ef-juego-opciones button:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-ruleta{display:flex;flex-direction:column;align-items:center;gap:12px}
.ef-ruleta-rueda{position:relative;width:min(70vw,48vh,280px);aspect-ratio:1}
.ef-ruleta-rueda canvas{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px #f3cd6c,0 0 26px #e7b85055,0 12px 30px #000b;will-change:transform}
.ef-ruleta-puntero{position:absolute;z-index:1;left:50%;top:-10px;width:0;height:0;margin-left:-13px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #f6d27a;filter:drop-shadow(0 3px 4px #000c)}
.ef-ruleta-centro{position:absolute;left:50%;top:50%;z-index:1;display:block;width:19%;height:auto;aspect-ratio:1;object-fit:contain;transform:translate(-50%,-54%);filter:drop-shadow(0 0 8px #f3cd6c8c) drop-shadow(0 3px 5px #000c);pointer-events:none}
.ef-ruleta-resultado{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;min-height:30px;font-size:15px;color:var(--ll-texto)}
.ef-ruleta-resultado b{font-size:18px;color:#fff1c2}
.ef-ruleta-emoji{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 8px #f3cd6c66) drop-shadow(0 3px 5px #000c);animation:ef-late .7s ease-in-out 2}
.ef-ruleta-girar{min-width:150px;min-height:46px;font-size:16px;font-weight:800;letter-spacing:.14em}
.ef-foto{display:flex;flex-direction:column;gap:12px;width:100%}
.ef-foto img{width:100%;max-height:46vh;object-fit:contain;border-radius:14px;background:#000}
.ef-foto-nota{margin:0;font-size:12px;line-height:1.4;color:var(--ll-tenue)}
.ef-foto-acciones{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}

/* Piedra, papel o tijera: vidrio oscuro semitransparente (la llamada se ve detrás), manos 3D, oro y destellos */
.ef-tarjeta:has(.ef-ppt){width:min(calc(100% - 20px),430px);max-height:min(84vh,640px);border:1.5px solid #f0c45fb3;background:linear-gradient(180deg,#2a21134a,#17120b61);-webkit-backdrop-filter:blur(4px) saturate(1.15);backdrop-filter:blur(4px) saturate(1.15);box-shadow:inset 0 1px 0 #ffe6a333,inset 0 0 26px #f5c45114,0 0 26px #f5c45138,0 22px 60px #000a}
.ef-tarjeta:has(.ef-ppt) header{padding:12px 12px 2px 16px}
.ef-tarjeta:has(.ef-ppt) h3{display:flex;align-items:center;gap:10px;min-height:40px;font-size:18px;font-weight:700;color:#fff6dc}
.ef-tarjeta:has(.ef-ppt) h3::before{content:"";flex:none;width:34px;height:34px;background:url(/assets/video-call/reactions/corona.webp) center/contain no-repeat;filter:drop-shadow(0 0 6px #f5c45199)}
.ef-tarjeta:has(.ef-ppt[data-res="gana"]) header,.ef-tarjeta:has(.ef-ppt[data-res="pierde"]) header{position:absolute;z-index:3;top:0;left:0;right:0;pointer-events:none}
.ef-tarjeta:has(.ef-ppt[data-res="gana"]) header .ll-redondo,.ef-tarjeta:has(.ef-ppt[data-res="pierde"]) header .ll-redondo{pointer-events:auto}
.ef-tarjeta:has(.ef-ppt[data-res="gana"]) h3,.ef-tarjeta:has(.ef-ppt[data-res="pierde"]) h3{font-size:0}
.ef-tarjeta:has(.ef-ppt[data-res="gana"]) h3::before{visibility:hidden}
.ef-tarjeta:has(.ef-ppt[data-res="gana"]) .ef-tarjeta-cuerpo,.ef-tarjeta:has(.ef-ppt[data-res="pierde"]) .ef-tarjeta-cuerpo{padding-top:8px}
.ef-tarjeta:has(.ef-ppt) header .ll-redondo{position:relative;z-index:3;border:1px solid #f0c45f80;background:#0d0a06b3}
.ef-tarjeta:has(.ef-ppt) .ef-tarjeta-cuerpo{gap:10px;padding:4px 14px 16px;overflow-x:hidden}
.ef-ppt{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;color:#fff3d6}
.ef-ppt>*:not(.ef-ppt-confeti){position:relative;z-index:1}
.ef-ppt svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-ppt-nota{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:0;padding-top:10px;border-top:1px solid #f0c45f33;font-size:14px;color:#f3e7c8}
.ef-ppt-nota svg{width:20px;height:20px;color:#f5c451}
.ef-ppt-seg{display:inline-block;min-width:1.2em;font-size:17px;font-weight:800;color:#ffd76a;font-variant-numeric:tabular-nums;text-shadow:0 0 10px #f5c45199}
.ef-ppt-seg.ef-ppt-poco{color:#ffb070;animation:ef-ppt-late .5s ease-in-out infinite alternate}
.ef-ppt-listo{color:#ffd76a;font-weight:600}
.ef-ppt-estado{min-height:17px;margin:0;font-size:12.5px;color:#eadfc2b3}
.ef-ppt-cartas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%}
.ef-ppt-carta{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 6px 8px;border-radius:16px;border:1.5px solid #f0c45f8c;background:linear-gradient(180deg,#3a2c1873,#140f0a99);box-shadow:inset 0 1px 0 #ffe6a338,inset 0 -14px 24px #f5c4510f,0 0 14px #f5c45126,0 8px 18px #0008;color:inherit;font:inherit;cursor:pointer;transition:transform .12s,border-color .18s,box-shadow .18s,opacity .25s,filter .25s;-webkit-tap-highlight-color:transparent}
.ef-ppt-carta:active:not(:disabled){transform:scale(.96)}
.ef-ppt-carta:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
.ef-ppt-carta:disabled{cursor:default;opacity:1}
.ef-ppt-carta:disabled:not(.ef-ppt-elegida){opacity:.42;filter:saturate(.5)}
@media (hover:hover){.ef-ppt-carta:hover:not(:disabled){border-color:#ffd76a;box-shadow:inset 0 1px 0 #ffe6a338,0 0 22px #f5c45166,0 8px 18px #0008}}
.ef-ppt-elegida{border-color:#ffd76a;box-shadow:0 0 0 1px #ffd76a,inset 0 0 22px #f5c45133,0 0 26px #f5c451a6;animation:ef-ppt-pulso .5s ease-out both}
.ef-ppt-aro{position:relative;display:grid;place-items:center;width:min(100%,108px);aspect-ratio:1;border-radius:50%;border:1.5px solid #f0c45fb3;background:radial-gradient(circle at 50% 42%,#5a4320b3 0,#2a1f1099 55%,#120d0780 100%);box-shadow:0 0 16px #f5c45159,inset 0 0 18px #f5c45140,inset 0 2px 0 #ffe6a333}
.ef-ppt-aro>.ef-ppt-mano{grid-area:1/1}
.ef-ppt-mano{display:block;width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 6px 8px #000a) drop-shadow(0 0 10px #f5c45133);pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.ef-ppt-elegida .ef-ppt-aro{animation:ef-ppt-brilla .7s ease-out both}
.ef-ppt-elegida[data-mano="piedra"] .ef-ppt-abre{animation:ef-ppt-golpe .55s cubic-bezier(.2,.9,.3,1.3) both}
.ef-ppt-elegida[data-mano="papel"] .ef-ppt-abre{animation:ef-ppt-abre .55s ease-out both}
.ef-ppt-elegida[data-mano="tijera"] .ef-ppt-abre{animation:ef-ppt-abre .55s ease-out both,ef-ppt-lado .32s ease-in-out .5s}
.ef-ppt-cerrada{animation:ef-ppt-cierra .5s ease-in both}
.ef-ppt-rayas{position:absolute;left:-3%;top:20%;width:15%;height:20%;background:linear-gradient(#ffd76a,#ffd76a) 0 0/100% 3px no-repeat,linear-gradient(#ffd76a,#ffd76a) 0 100%/70% 3px no-repeat;transform:rotate(30deg);filter:drop-shadow(0 0 4px #f5c451)}
.ef-ppt-chispa{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);pointer-events:none;background:radial-gradient(circle,#fff 0 14%,transparent 16%),linear-gradient(90deg,transparent 44%,#ffe7a0 50%,transparent 56%),linear-gradient(0deg,transparent 44%,#ffe7a0 50%,transparent 56%);filter:drop-shadow(0 0 3px #ffd76a);animation:ef-ppt-titila 1.8s ease-in-out var(--d) infinite}
.ef-ppt-ya{display:flex;justify-content:center;gap:.28em;width:100%;margin:0;padding-top:8px;border-top:1px solid #f0c45f33;font-size:23px;font-weight:800;color:#ffd76a;text-shadow:0 0 12px #f5c45199}
.ef-ppt[data-fase="cuenta"] .ef-ppt-ya span{animation:ef-ppt-num .3s cubic-bezier(.2,.9,.3,1.4) both}
.ef-ppt[data-fase="cuenta"] .ef-ppt-ya span:nth-child(2){animation-delay:.45s}
.ef-ppt[data-fase="cuenta"] .ef-ppt-ya span:nth-child(3){animation-delay:.9s}
.ef-ppt[data-fase="cuenta"] .ef-ppt-ya span:nth-child(4){animation-delay:1.35s}
.ef-ppt-duelo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;width:100%}
.ef-ppt-rivales{display:flex;justify-content:center;gap:6px;min-width:0}
.ef-ppt-lado{position:relative;display:grid;place-items:center;width:min(100%,140px);aspect-ratio:1;justify-self:center}
.ef-ppt-rivales .ef-ppt-lado{flex:1 1 0}
.ef-ppt-lado>.ef-ppt-mano,.ef-ppt-lado>.ef-ppt-vacio{grid-area:1/1;z-index:1}
.ef-ppt-lado .ef-ppt-mano{width:92%;height:92%}
.ef-ppt-energia{position:absolute;inset:6%;border-radius:50%;border:2px solid #ffd76a;box-shadow:0 0 18px #f5c451cc,inset 0 0 22px #f5c45199;background:radial-gradient(circle,#f5c45122,transparent 70%)}
.ef-ppt-energia::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 180deg,transparent 0 55%,#ffd76aa6 62%,transparent 70%,#ffe7a073 78%,transparent 86%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60% 70%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60% 70%,transparent 72%);animation:ef-ppt-gira 1.1s linear infinite}
.ef-ppt-energia::after{content:"";position:absolute;right:72%;top:22%;width:42%;height:56%;background:repeating-linear-gradient(180deg,transparent 0 6px,#ffd76a 6px 8px);-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000);opacity:.75;filter:drop-shadow(0 0 3px #f5c451)}
.ef-ppt-derecha .ef-ppt-energia::after{right:auto;left:72%;-webkit-mask:linear-gradient(270deg,transparent,#000);mask:linear-gradient(270deg,transparent,#000)}
.ef-ppt-agita{transform-origin:65% 85%;animation:ef-ppt-agita .45s ease-in-out 3,ef-ppt-espera .5s ease-in-out 1.35s infinite alternate}
.ef-ppt-derecha .ef-ppt-agita{transform-origin:35% 85%;animation-name:ef-ppt-agita-d,ef-ppt-espera}
.ef-ppt-revela{animation:ef-ppt-revela .45s cubic-bezier(.2,.9,.3,1.4) both}
.ef-ppt-flash{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,#fff7d6 0,#ffd76a99 30%,transparent 65%);animation:ef-ppt-flash .6s ease-out both;pointer-events:none}
.ef-ppt-vacio{font-size:34px;font-weight:700;color:#f3e7c880}
.ef-ppt-vs{font-size:42px;font-weight:900;font-style:italic;line-height:1;background:linear-gradient(180deg,#fff4c2,#ffd76a 45%,#c48a26);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px #f5c451b3) drop-shadow(0 2px 2px #000);animation:ef-ppt-vs 1.2s ease-in-out infinite alternate}
.ef-ppt-vs.ef-ppt-igual{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid #ffd76a;background:#0b0806d9;-webkit-background-clip:border-box;background-clip:border-box;color:#ffd76a;font-size:28px;font-style:normal;box-shadow:0 0 16px #f5c45180;animation:none}
.ef-ppt[data-res="empate"] .ef-ppt-duelo::before{content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#ffd76a,transparent);opacity:.75}
.ef-ppt-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.ef-ppt-bloq{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;border-radius:14px;border:1px solid #f0c45f4d;background:#120e0973;color:#cfc6b4b3;font-size:13.5px;font-weight:600}
.ef-ppt-bloq .ef-ppt-mano{width:40px;height:40px;filter:grayscale(1) brightness(.72) drop-shadow(0 2px 3px #000)}
.ef-ppt .ef-ppt-bloq svg{position:absolute;top:5px;right:5px;width:15px;height:15px;padding:4px;border-radius:50%;border:1px solid #f0c45f80;background:#0b0806b3;color:#f5c451;stroke-width:2.2}
.ef-ppt-duelo>:not(.ef-ppt-chispa){position:relative;z-index:1}
.ef-ppt:not([data-res="empate"]):not([data-fase="elige"]) .ef-ppt-duelo::after{content:"";position:absolute;left:50%;top:50%;z-index:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:repeating-conic-gradient(#ffd76a8c 0 2deg,transparent 2deg 15deg);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 68%);mask:radial-gradient(circle,#000 0 18%,transparent 68%);animation:ef-ppt-gira 7s linear infinite;pointer-events:none}
.ef-ppt-titular{margin:0;font-size:40px;font-weight:900;line-height:1.08;background:linear-gradient(180deg,#fff6cf,#ffd76a 45%,#b8862e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px #f5c45199) drop-shadow(0 2px 2px #000c);animation:ef-ppt-titular .5s cubic-bezier(.2,.9,.3,1.3) both;pointer-events:none}
.ef-ppt[data-res="gana"] .ef-ppt-titular{margin-top:-6px}
.ef-ppt[data-res="empate"] .ef-ppt-titular::before,.ef-ppt[data-res="empate"] .ef-ppt-titular::after{content:"";position:absolute;top:52%;width:min(22vw,90px);height:2px;background:linear-gradient(90deg,transparent,#ffd76a);box-shadow:0 0 8px #f5c451;animation:ef-ppt-raya .8s ease-out both}
.ef-ppt[data-res="empate"] .ef-ppt-titular::before{right:calc(100% + 10px)}
.ef-ppt[data-res="empate"] .ef-ppt-titular::after{left:calc(100% + 10px);transform:scaleX(-1)}
.ef-ppt-jugador{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:170px;min-width:0;justify-self:center;padding:8px 8px 9px;border-radius:18px;border:1.5px solid #f0c45f8c;background:linear-gradient(180deg,#3a2c1873,#140f0a99);box-shadow:inset 0 1px 0 #ffe6a338,0 0 14px #f5c45126,0 8px 18px #0006;animation:ef-ppt-entra .45s cubic-bezier(.2,.9,.3,1.2) both}
.ef-ppt-rivales .ef-ppt-jugador{animation-delay:.08s}
.ef-ppt-quien{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;color:#fff3d6}
.ef-ppt-jugador .ef-ppt-aro{width:min(100%,112px)}
.ef-ppt-nombre{display:block;width:100%;padding:5px 6px;border-radius:999px;border:1px solid #f0c45f4d;background:#0b0806bf;font-size:15px;font-weight:700;color:#fff3d6;text-align:center;box-shadow:inset 0 1px 0 #ffe6a31f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-ppt-ganador{border:2px solid #ffd76a;box-shadow:0 0 0 1px #ffd76a66,inset 0 0 24px #f5c45140,0 0 30px #f5c451b3;animation:ef-ppt-entra .45s cubic-bezier(.2,.9,.3,1.2) both,ef-ppt-pulso .9s ease-in-out .5s 2}
.ef-ppt-ganador .ef-ppt-aro{border-color:#ffd76a;box-shadow:0 0 24px #f5c451b3,inset 0 0 22px #f5c45166}
.ef-ppt-ganador .ef-ppt-mano{animation:ef-ppt-victoria 1s ease-in-out .4s 2}
.ef-ppt-perdedor{opacity:.84;filter:saturate(.75);animation:ef-ppt-entra .45s both,ef-ppt-sacude .45s ease-in-out .55s}
.ef-ppt-perdedor .ef-ppt-aro{box-shadow:inset 0 0 14px #f5c45126}
.ef-ppt-rayos{position:absolute;inset:-13%;border-radius:50%;background:repeating-conic-gradient(#ffe18a 0 5deg,transparent 5deg 30deg);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62% 69%,transparent 71%);mask:radial-gradient(circle,transparent 60%,#000 62% 69%,transparent 71%);filter:drop-shadow(0 0 4px #f5c451);animation:ef-ppt-gira 9s linear infinite;pointer-events:none}
.ef-ppt-insignia{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:4px;border-radius:50%;border:1px solid #ffd76a99;background:#0b0806d9;object-fit:contain;animation:ef-ppt-corona .6s cubic-bezier(.2,.9,.3,1.4) .3s both}
.ef-ppt-corona-top{display:block;width:62px;height:62px;margin:-4px 0 -8px;object-fit:contain;filter:drop-shadow(0 0 14px #f5c451cc) drop-shadow(0 3px 4px #000a);animation:ef-ppt-corona .7s cubic-bezier(.2,.9,.3,1.3) both}
.ef-ppt-confeti{position:absolute;inset:-8px -14px 0;overflow:hidden;pointer-events:none}
.ef-ppt-confeti i{position:absolute;left:var(--x);top:-14px;width:7px;height:13px;border-radius:2px;background:linear-gradient(135deg,#fff3b8,#f5c451 50%,#a8741f);box-shadow:0 0 6px #f5c45166;animation:ef-ppt-confeti var(--t) linear var(--d) 2 both}
.ef-ppt-confeti i:nth-child(3n){width:5px;height:9px}
.ef-ppt-confeti i:nth-child(4n){width:6px;height:6px;border-radius:50%;background:#ffe9a6}
.ef-ppt-regla{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;margin:0;padding:7px 16px;border-radius:999px;border:1px solid #f0c45f80;background:#0b0806bf;font-size:14px;color:#fff1c2;box-shadow:inset 0 1px 0 #ffe6a326,0 0 12px #f5c45126;animation:ef-ppt-entra .4s ease-out .2s both}
.ef-ppt-regla svg{color:#ffd76a}
.ef-ppt-regla img{width:20px;height:20px;object-fit:contain}
.ef-ppt-rapido{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.ef-ppt-rapido button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:52px;padding:4px 6px;border-radius:14px;border:1px solid #f0c45f80;background:linear-gradient(180deg,#3a2c1873,#140f0a99);color:#fff3d6;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 #ffe6a333,0 0 10px #f5c4511f;transition:transform .12s,box-shadow .18s}
.ef-ppt-rapido .ef-ppt-mano{width:36px;height:36px;flex:none;filter:drop-shadow(0 2px 3px #000a)}
.ef-ppt-rapido button:active{transform:scale(.96)}
.ef-ppt-otra{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border:1px solid #fff0b3;border-radius:999px;background:linear-gradient(180deg,#ffe597,#f5c451 48%,#cf9a33);color:#1a1206;font:inherit;font-size:19px;font-weight:800;cursor:pointer;box-shadow:inset 0 2px 0 #fff8,inset 0 -3px 6px #a8741f66,0 0 22px #f5c45173,0 8px 18px #0009;transition:transform .12s;animation:ef-ppt-entra .4s ease-out .3s both}
.ef-ppt .ef-ppt-otra svg{width:24px;height:24px;stroke-width:2.2}
.ef-ppt-otra:active{transform:scale(.96)}
.ef-ppt-rapido button:focus-visible,.ef-ppt-otra:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
.ef-ppt-grupo .ef-ppt-jugador{max-width:118px}
.ef-ppt-grupo .ef-ppt-quien,.ef-ppt-grupo .ef-ppt-nombre{font-size:13px}
@keyframes ef-ppt-pulso{40%{transform:scale(1.05)}}
@keyframes ef-ppt-brilla{0%{box-shadow:0 0 16px #f5c45159,inset 0 0 18px #f5c45140}55%{box-shadow:0 0 34px #ffd76ae6,inset 0 0 30px #ffd76a99}100%{box-shadow:0 0 22px #f5c451a6,inset 0 0 22px #f5c45166}}
@keyframes ef-ppt-golpe{0%{transform:scale(.78) translateY(10px);opacity:.6}35%{transform:scale(.9) translateY(-14px);opacity:1}65%{transform:scale(1.16) translateY(2px)}100%{transform:none}}
@keyframes ef-ppt-cierra{0%{transform:scale(.8)}50%{transform:scale(.95) translateY(-8px);opacity:1}75%,100%{opacity:0;transform:scale(1)}}
@keyframes ef-ppt-abre{0%,45%{transform:scale(.72) rotate(-10deg);opacity:0}80%{transform:scale(1.1) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes ef-ppt-lado{35%{transform:translateX(-5px) rotate(-5deg)}70%{transform:translateX(5px) rotate(5deg)}}
@keyframes ef-ppt-titila{0%,100%{opacity:.2;transform:scale(.55)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ef-ppt-late{to{transform:scale(1.18)}}
@keyframes ef-ppt-num{from{opacity:0;transform:scale(1.9)}to{opacity:1;transform:none}}
@keyframes ef-ppt-gira{to{transform:rotate(360deg)}}
@keyframes ef-ppt-agita{0%,100%{transform:translateY(-6px) rotate(-6deg)}50%{transform:translateY(12px) rotate(10deg)}}
@keyframes ef-ppt-agita-d{0%,100%{transform:translateY(-6px) rotate(6deg)}50%{transform:translateY(12px) rotate(-10deg)}}
@keyframes ef-ppt-espera{from{transform:translateY(-6px)}to{transform:translateY(-1px)}}
@keyframes ef-ppt-revela{0%{transform:scale(.55) translateY(10px);opacity:.3}60%{transform:scale(1.15)}100%{transform:none;opacity:1}}
@keyframes ef-ppt-flash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes ef-ppt-vs{to{transform:scale(1.1)}}
@keyframes ef-ppt-titular{from{opacity:0;transform:scale(.8)}}
@keyframes ef-ppt-raya{from{opacity:0;width:0}}
@keyframes ef-ppt-entra{from{opacity:0;transform:translateY(12px) scale(.92)}}
@keyframes ef-ppt-victoria{30%{transform:translateY(-8px) rotate(-6deg) scale(1.06)}60%{transform:rotate(4deg)}}
@keyframes ef-ppt-sacude{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes ef-ppt-corona{from{opacity:0;transform:translateY(-24px) scale(.6)}}
@keyframes ef-ppt-confeti{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translateY(600px) rotate(var(--g));opacity:.15}}
@media (orientation:landscape) and (max-height:520px){
  /* Teléfono horizontal: más ancho y más bajo, sin tapar los controles */
  .ef-tarjeta:has(.ef-ppt){width:min(calc(100% - 24px),620px);top:calc(50% - 34px);max-height:calc(100% - 96px)}
  .ef-tarjeta:has(.ef-ppt) header{padding-top:6px}
  .ef-tarjeta:has(.ef-ppt) .ef-tarjeta-cuerpo{gap:6px;padding-bottom:10px}
  .ef-ppt{gap:6px}
  .ef-ppt-aro{width:min(100%,74px)}
  .ef-ppt-carta{gap:5px;padding:7px 6px 6px}
  .ef-ppt-carta .ef-ppt-aro{width:min(100%,86px)}
  .ef-ppt-nombre{padding:3px 6px}
  .ef-ppt-lado{width:min(100%,98px)}
  .ef-ppt-vs{font-size:32px}
  .ef-ppt-mini,.ef-ppt-rapido{display:none}
  .ef-ppt-titular{font-size:30px}
  .ef-tarjeta:has(.ef-ppt[data-res]) header{position:absolute;z-index:3;top:0;left:0;right:0;pointer-events:none}
  .ef-tarjeta:has(.ef-ppt[data-res]) header .ll-redondo{pointer-events:auto}
  .ef-tarjeta:has(.ef-ppt[data-res]) h3{font-size:0}
  .ef-tarjeta:has(.ef-ppt[data-res]) .ef-tarjeta-cuerpo{padding-top:6px}
  .ef-ppt[data-res] .ef-ppt-titular{margin-top:0}
  .ef-ppt[data-res="gana"] .ef-ppt-corona-top{display:none}
  .ef-ppt-jugador{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;column-gap:8px;row-gap:4px;max-width:230px;padding:6px 8px}
  .ef-ppt-jugador .ef-ppt-aro{grid-row:1 / 3;width:64px}
  .ef-ppt-otra{min-height:42px;font-size:17px}
  .ef-ppt-regla{padding:5px 14px}
}
@media (min-width:900px) and (min-height:700px){
  .ef-tarjeta:has(.ef-ppt){width:min(calc(100% - 40px),480px)}
}

/* Tres en raya: cristal casi transparente (la llamada se ve detrás), tablero dorado, X dorada metálica y O azul eléctrico */
.ef-tarjeta:has(.ef-tres){width:min(calc(100% - 24px),410px);max-height:min(88vh,660px);border:1.5px solid #f3c96ad9;border-radius:28px;background:linear-gradient(180deg,#0a08053d,#0a08054c);-webkit-backdrop-filter:blur(2px) saturate(1.12);backdrop-filter:blur(2px) saturate(1.12);
  box-shadow:inset 0 1px 0 #fff0b85c,inset 0 0 0 1px #ffd76a1a,inset 0 0 34px #f5c45114,0 0 22px #f5c45166,0 16px 44px #0005;transition:box-shadow .5s}
.ef-tarjeta:has(.ef-tres[data-estado="opponentTurn"]){box-shadow:inset 0 1px 0 #d9f4ff40,inset 0 0 0 1px #5cc8ff1a,inset 0 0 34px #3db8ff12,0 0 22px #3db8ff4d,0 16px 44px #0005}
.ef-tarjeta:has(.ef-tres)::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(128deg,transparent 0 58%,#ffd76a26 60%,transparent 62.5%,transparent 66%,#ffd76a14 67%,transparent 69%),linear-gradient(308deg,transparent 0 74%,#ffd76a1f 76%,transparent 78.5%),radial-gradient(60% 40% at 50% 0,#ffd76a12,transparent 70%)}
.ef-tarjeta:has(.ef-tres) header{position:relative;z-index:2;padding:14px 14px 0 20px}
.ef-tarjeta:has(.ef-tres) h3{display:flex;align-items:center;gap:12px;min-height:44px;font:700 25px/1.1 "Playfair Display",Georgia,"Times New Roman",serif;color:#fff0c6;text-shadow:0 0 14px #f5c45173,0 2px 3px #000b}
.ef-tarjeta:has(.ef-tres) h3::before{content:"";flex:none;width:38px;height:38px;background:url(/assets/video-call/reactions/corona.webp) center/contain no-repeat;filter:drop-shadow(0 0 8px #f5c451b3)}
.ef-tarjeta:has(.ef-tres[data-estado="win"]) h3::before{animation:ef-tres-latido 1s ease-in-out .3s 2}
.ef-tarjeta:has(.ef-tres) header .ll-redondo{width:42px;height:42px;flex:none;border:1.5px solid #f3c96a;background:radial-gradient(circle at 50% 30%,#2a1f10d9,#0b0805f0);color:#ffe7a6;box-shadow:0 0 12px #f5c45180,inset 0 0 8px #f5c45140}
.ef-tarjeta:has(.ef-tres) .ef-tarjeta-cuerpo{position:relative;z-index:1;gap:0;padding:6px 18px 20px;overflow-x:hidden}
.ef-tres{--g:10px;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;color:#fff3d6}
.ef-tres>:not(.ef-tres-polvo):not(.ef-tres-confeti){position:relative;z-index:1}
.ef-tres-polvo{position:absolute;inset:-12px -18px;z-index:0;pointer-events:none}
.ef-tres-polvo i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffe7a0;box-shadow:0 0 6px 1px #ffd76a;opacity:.2;animation:ef-tres-titila 3.4s ease-in-out var(--d) infinite}

/* Jugadores: X dorada · O azul; quien tiene el turno se ilumina */
.ef-tres-jugadores{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;min-height:38px;font:600 18px/1.2 "Playfair Display",Georgia,serif}
.ef-tres-jugador{display:inline-flex;align-items:center;gap:10px;min-width:0;padding:4px 12px;border-radius:999px;color:#fff3d6;text-shadow:0 1px 2px #000b;transition:background-color .35s,box-shadow .35s}
.ef-tres-jugador b{min-width:0;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ef-tres-jugador .ef-tres-ficha{--t:24px}
.ef-tres-activo{background:#ffd76a14;box-shadow:inset 0 0 0 1px #ffd76a59,0 0 14px #f5c45138}
.ef-tres-activo:has(.ef-tres-o){background:#3db8ff14;box-shadow:inset 0 0 0 1px #5cc8ff6b,0 0 14px #3db8ff40}
.ef-tres-sep{width:1.5px;height:26px;background:linear-gradient(#ffd76a00,#ffd76ad9,#ffd76a00)}
/* Tablero 3×3: casillas casi transparentes con doble filete dorado */
.ef-tres-tablero{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--g);width:min(100%,310px);aspect-ratio:1}
.ef-tres-casilla{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border-radius:16px;border:2px solid #f0c45f;background:linear-gradient(160deg,#ffe6a314,#ffffff03 45%,#f5c4510d);
  box-shadow:inset 0 0 16px #f5c45124,0 0 12px #f5c45166,0 0 1px 1px #ffe7a04d;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .3s,background-color .3s,border-color .3s}
.ef-tres-casilla::before{content:"";position:absolute;inset:4px;border-radius:11px;border:1px solid #ffd76a5c;pointer-events:none}
.ef-tres-casilla:disabled{cursor:default;opacity:1}
.ef-tres-casilla:not(:disabled):active{transform:scale(.93)}
.ef-tres-casilla:focus-visible{outline:2px solid #fff0b8;outline-offset:2px}
@media (hover:hover){.ef-tres-casilla:not(:disabled):hover{background-color:#ffd76a1f;box-shadow:inset 0 0 20px #f5c45140,0 0 18px #ffd76a99,0 0 1px 1px #fff0b880}}
.ef-tres[data-estado="opponentTurn"] .ef-tres-casilla{box-shadow:inset 0 0 16px #3db8ff14,0 0 12px #f5c45138,0 0 10px #3db8ff2e}
.ef-tres-cruce{position:absolute;z-index:2;width:14px;height:14px;margin:-7px;pointer-events:none;opacity:.35;
  background:radial-gradient(circle,#fff 0 10%,transparent 14%),linear-gradient(90deg,transparent 46%,#ffe7a0 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#ffe7a0 50%,transparent 54%);filter:drop-shadow(0 0 3px #ffd76a);animation:ef-tres-titila 2.6s ease-in-out var(--d) infinite}

/* Fichas dibujadas: X de dos barras metálicas, O anillo de neón */
.ef-tres-ficha{position:relative;display:block;width:var(--t,62%);aspect-ratio:1;flex:none;pointer-events:none}
.ef-tres-x{filter:drop-shadow(0 0 4px #ffc04de6) drop-shadow(0 0 12px #ff9f1a8c) drop-shadow(0 2px 2px #0009)}
.ef-tres-x::before,.ef-tres-x::after{content:"";position:absolute;left:-10%;top:38.5%;width:120%;height:23%;border-radius:12%/30%;
  background:linear-gradient(180deg,#fff8d6 0%,#ffe08a 18%,#f8c04a 40%,#e09a2a 62%,#b8731a 80%,#f0bf55 100%);box-shadow:inset 0 1px 1px #fffbe6,inset 0 -2px 2px #6e440c99,inset 0 0 0 1px #ffe7a066}
.ef-tres-x::before{transform:rotate(45deg)}
.ef-tres-x::after{transform:rotate(-45deg)}
.ef-tres-o{border-radius:50%;filter:drop-shadow(0 0 5px #38b8fff2) drop-shadow(0 0 14px #1f7bffa6)}
.ef-tres-o::before{content:"";position:absolute;inset:3%;border-radius:50%;background:radial-gradient(circle closest-side,#03163a4d 0 46%,#2a9dff59 52%,#5ccfff 59%,#e8fbff 67%,#6fd0ff 75%,#1f78ff 86%,#1d6fff00 94%)}
.ef-tres-nueva .ef-tres-x{animation:ef-tres-pone-x .3s cubic-bezier(.2,.9,.3,1.2) both}
.ef-tres-nueva .ef-tres-o{animation:ef-tres-pone-o .3s cubic-bezier(.2,.8,.3,1) both}
.ef-tres-nueva .ef-tres-o::after{content:"";position:absolute;inset:4%;border-radius:50%;border:2px solid #8fe0ff;animation:ef-tres-onda .55s ease-out .08s both}
.ef-tres-destello{position:absolute;inset:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff8dd 0,#ffd76a99 22%,transparent 60%),conic-gradient(from 45deg,transparent 0 10%,#fff3c066 12%,transparent 14% 35%,#fff3c066 37%,transparent 39% 60%,#fff3c066 62%,transparent 64% 85%,#fff3c066 87%,transparent 89%);animation:ef-tres-destello .5s ease-out both}
.ef-tres-casilla:has(.ef-tres-o) .ef-tres-destello{background:radial-gradient(circle,#effcff 0,#5cc8ff99 22%,transparent 60%)}

/* Línea ganadora: las tres casillas se encienden y una raya dorada las cruza con chispas */
.ef-tres-gana{border-color:#ffe591;background-color:#ffd76a1a;box-shadow:inset 0 0 22px #f5c45166,0 0 24px #ffd76ad9,0 0 2px 1px #fff3c0;animation:ef-tres-pulso 1.1s ease-in-out .4s 2}
.ef-tres-gana .ef-tres-ficha{animation:ef-tres-latido 1.1s ease-in-out .4s 2}
.ef-tres-gana.ef-tres-nueva .ef-tres-x{animation:ef-tres-pone-x .3s cubic-bezier(.2,.9,.3,1.2) both,ef-tres-latido 1.1s ease-in-out .4s 2}
.ef-tres-gana.ef-tres-nueva .ef-tres-o{animation:ef-tres-pone-o .3s cubic-bezier(.2,.8,.3,1) both,ef-tres-latido 1.1s ease-in-out .4s 2}
.ef-tres-raya{position:absolute;z-index:3;left:var(--rx);top:var(--ry);width:var(--rl);height:7px;transform:translate(-50%,-50%) rotate(var(--rg));pointer-events:none}
.ef-tres-raya::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,#ffd76a00,#fff2bf 10%,#ffd76a 50%,#fff2bf 90%,#ffd76a00);box-shadow:0 0 10px #ffd76a,0 0 22px #f5a623b3;transform-origin:left center;animation:ef-tres-raya .45s cubic-bezier(.5,0,.2,1) .12s both}
.ef-tres-raya i{position:absolute;left:var(--p);top:50%;width:14px;height:14px;margin:-7px;background:radial-gradient(circle,#fff 0 12%,transparent 16%),linear-gradient(90deg,transparent 45%,#fff3c0 50%,transparent 55%),linear-gradient(0deg,transparent 45%,#fff3c0 50%,transparent 55%);filter:drop-shadow(0 0 4px #ffd76a);animation:ef-tres-chispa .8s ease-out var(--d) 2 both}

/* Banda de turno y resultado: dorada en tu turno, azul en el del rival */
.ef-tres-banda{display:flex;align-items:center;justify-content:center;gap:10px;min-width:min(100%,210px);max-width:100%;min-height:44px;margin:0;padding:6px 22px;border-radius:999px;border:1px solid #f0c45fa6;background:linear-gradient(180deg,#2a1f1052,#0b080573);
  font:700 18px/1.2 "Playfair Display",Georgia,serif;color:#ffe9b0;text-shadow:0 0 10px #f5c45173,0 1px 2px #000b;box-shadow:inset 0 1px 0 #ffe6a333,0 0 16px #f5c45140;animation:ef-tres-turno .45s cubic-bezier(.2,.9,.3,1.2) both;transition:color .4s,border-color .4s}
.ef-tres-banda span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-tres-banda[data-tono="azul"]{border-color:#5cc8ffa6;color:#dcf5ff;text-shadow:0 0 10px #3db8ff8c,0 1px 2px #000b;box-shadow:inset 0 1px 0 #c9efff33,0 0 16px #3db8ff52}
.ef-tres-banda[data-tono="neutro"]{border-color:#f0c45f6b;color:#f3e7c8;font-size:16px;text-shadow:0 1px 2px #000b}
.ef-tres-banda-corona{width:28px;height:28px;flex:none;object-fit:contain;filter:drop-shadow(0 0 6px #f5c451b3)}
.ef-tres[data-estado="win"] .ef-tres-banda{min-height:52px;padding:6px 28px;font-size:26px;border-color:#ffe591;color:#fff1c2;box-shadow:inset 0 1px 0 #fff0b866,inset 0 0 18px #f5c45133,0 0 26px #ffd76ab3;animation:ef-tres-turno .5s cubic-bezier(.2,.9,.3,1.3) .25s both,ef-tres-pulso 1.4s ease-in-out .8s 2}
.ef-tres[data-estado="win"] .ef-tres-banda-corona{width:36px;height:36px}
.ef-tres[data-estado="draw"] .ef-tres-banda{font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:#ffe9b0;animation:ef-tres-turno .45s both,ef-tres-pulso 1s ease-in-out .45s}
.ef-tres[data-estado="draw"] .ef-tres-tablero::after{content:"";position:absolute;inset:-8px;z-index:3;border-radius:22px;pointer-events:none;background:radial-gradient(circle,#ffe7a059,transparent 70%);animation:ef-tres-flash .8s ease-out both}
.ef-tres[data-estado="draw"] .ef-tres-tablero{animation:ef-tres-pulso .9s ease-in-out .1s}

/* La otra persona salió: Esperar o Cerrar */
.ef-tres-aviso{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,320px);padding:12px 14px;border-radius:20px;border:1px solid #f0c45f80;background:#0b08058c;box-shadow:0 0 14px #f5c45133;animation:ef-tres-turno .4s both}
.ef-tres-aviso p{margin:0;font-size:16px;font-weight:600;color:#fff1c2;text-shadow:0 1px 2px #000b}
.ef-tres-aviso div{display:flex;gap:10px;width:100%}
.ef-tres-boton{flex:1;min-height:44px;border-radius:999px;border:1px solid #f0c45f;background:linear-gradient(180deg,#3a2c1866,#140f0a99);color:#fff3d6;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 #ffe6a333,0 0 10px #f5c45133}

/* Otra vez: píldora de cristal con borde dorado, icono dorado y brillo */
.ef-tres-otra{display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,290px);min-height:54px;padding:0 26px;border-radius:999px;border:1.5px solid #f3c96a;background:linear-gradient(180deg,#6a4e2452 0%,#1a130a80 52%,#0d0a0699 100%);
  color:#fff3d6;font:700 21px/1 "Playfair Display",Georgia,serif;text-shadow:0 1px 2px #000b;cursor:pointer;box-shadow:inset 0 1px 0 #fff0b873,inset 0 -6px 14px #f5c45124,0 0 18px #f5c45180,0 8px 18px #0006;transition:transform .12s,box-shadow .2s}
.ef-tres-otra svg{width:28px;height:28px;flex:none;fill:none;stroke:#ffd76a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #f5c451b3)}
.ef-tres-otra:active,.ef-tres-boton:active{transform:scale(.96)}
.ef-tres-otra:focus-visible,.ef-tres-boton:focus-visible{outline:2px solid #fff0b8;outline-offset:3px}
@media (hover:hover){.ef-tres-otra:hover{box-shadow:inset 0 1px 0 #fff0b873,inset 0 -6px 14px #f5c45133,0 0 26px #ffd76ab3,0 8px 18px #0006}}

/* ¡Ganaste!: corona que cae sobre tu nombre y confeti dorado dentro del panel */
.ef-tres-corona{width:30px;height:30px;flex:none;margin:-6px -2px -4px -4px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 10px #f5c451d9) drop-shadow(0 2px 3px #000a);animation:ef-tres-corona .7s cubic-bezier(.2,.9,.3,1.3) .2s both}
.ef-tres-campeon{background:#ffd76a1f;box-shadow:inset 0 0 0 1px #ffd76a8c,0 0 18px #f5c45166}
.ef-tres-confeti{position:absolute;inset:-24px -18px -20px;z-index:4;overflow:hidden;pointer-events:none}
.ef-tres-confeti i{position:absolute;left:var(--x);top:-14px;width:6px;height:12px;border-radius:2px;background:linear-gradient(135deg,#fff3b8,#f5c451 50%,#a8741f);box-shadow:0 0 6px #f5c45166;animation:ef-tres-confeti var(--t) linear var(--d) 2 both}
.ef-tres-confeti i:nth-child(3n){width:4px;height:8px}
.ef-tres-confeti i:nth-child(4n){width:5px;height:5px;border-radius:50%;background:#ffe9a6}
@keyframes ef-tres-titila{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes ef-tres-pone-x{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ef-tres-pone-o{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes ef-tres-onda{0%{transform:scale(.75);opacity:.95}100%{transform:scale(1.45);opacity:0}}
@keyframes ef-tres-destello{0%{transform:scale(.3) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.35) rotate(30deg);opacity:0}}
@keyframes ef-tres-pulso{50%{transform:scale(1.045)}}
@keyframes ef-tres-latido{50%{transform:scale(1.1)}}
@keyframes ef-tres-raya{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}
@keyframes ef-tres-chispa{0%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1.2) rotate(45deg);opacity:1}100%{transform:scale(.4) rotate(90deg);opacity:0}}
@keyframes ef-tres-turno{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}
@keyframes ef-tres-flash{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
@keyframes ef-tres-corona{from{opacity:0;transform:translateY(-30px) scale(.6)}}
@keyframes ef-tres-confeti{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translateY(560px) rotate(var(--g));opacity:.15}}
@media (orientation:landscape) and (max-height:520px){
  /* Teléfono horizontal: tablero a la izquierda, nombres, turno y «Otra vez» a la derecha */
  .ef-tarjeta:has(.ef-tres){width:min(calc(100% - 24px),600px);top:calc(50% - 34px);max-height:calc(100% - 96px)}
  .ef-tarjeta:has(.ef-tres) header{padding:8px 10px 0 16px}
  .ef-tarjeta:has(.ef-tres) h3{min-height:36px;font-size:20px}
  .ef-tarjeta:has(.ef-tres) h3::before{width:30px;height:30px}
  .ef-tarjeta:has(.ef-tres) header .ll-redondo{width:38px;height:38px}
  .ef-tarjeta:has(.ef-tres) .ef-tarjeta-cuerpo{padding:4px 16px 12px}
  .ef-tres{--g:7px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tab jug" "tab banda" "tab otra";align-items:center;justify-items:center;column-gap:18px;row-gap:10px}
  .ef-tres-tablero{grid-area:tab;width:min(calc(100vh - 196px),230px)}
  .ef-tres-casilla{border-radius:12px}
  .ef-tres-casilla::before{inset:3px;border-radius:8px}
  .ef-tres-jugadores{grid-area:jug;flex-wrap:wrap;font-size:16px}
  .ef-tres-banda,.ef-tres-aviso{grid-area:banda}
  .ef-tres-otra{grid-area:otra;min-height:46px;font-size:18px}
}
@media (min-width:900px) and (min-height:700px){
  .ef-tarjeta:has(.ef-tres){width:min(calc(100% - 40px),440px)}
  .ef-tres-tablero{width:min(100%,330px)}
}

/* Verdadero o falso y Preguntas rápidas: cristal muy claro (negro al 14–19 % y blur 4px: la cara se ve detrás),
   borde dorado fino, reloj circular, opciones translúcidas y barra de progreso dorada */
.ef-tarjeta:has(.ef-quiz){width:min(calc(100% - 24px),410px);max-height:min(88vh,640px);border:1.5px solid #f3c96ac7;border-radius:26px;background:linear-gradient(180deg,#08080824,#08080830);-webkit-backdrop-filter:blur(4px) saturate(1.1);backdrop-filter:blur(4px) saturate(1.1);
  box-shadow:inset 0 1px 0 #fff0b84d,inset 0 0 26px #f5c45110,0 0 20px #f5c45152,0 14px 40px #0004}
.ef-tarjeta:has(.ef-quiz) header{padding:12px 12px 0 18px}
.ef-tarjeta:has(.ef-quiz) h3{display:flex;align-items:center;gap:6px 10px;min-height:42px;font:700 22px/1.1 "Playfair Display",Georgia,"Times New Roman",serif;color:#fff0c6;text-shadow:0 0 12px #f5c45166,0 1px 3px #000d,0 0 2px #000a}
.ef-tarjeta:has(.ef-quiz) h3::before{content:"";flex:none;width:34px;height:34px;background:url(/assets/video-call/reactions/corona.webp) center/contain no-repeat;filter:drop-shadow(0 0 7px #f5c451a6)}
.ef-tarjeta-insignia{display:inline-flex;flex:none;align-items:center;min-height:28px;padding:0 12px;border:1.5px solid #f3c96ad9;border-radius:999px;background:#0808082e;font:700 15px/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 0 8px #f5c45140}
.ef-tarjeta:has(.ef-quiz) header .ll-redondo{width:42px;height:42px;flex:none;border:1.5px solid #f3c96a;background:radial-gradient(circle at 50% 30%,#2a1f10b3,#0b0805d9);color:#ffe7a6;box-shadow:0 0 12px #f5c45173}
.ef-tarjeta:has(.ef-quiz) .ef-tarjeta-cuerpo{position:relative;gap:0;padding:4px 18px 18px;overflow-x:hidden}
.ef-quiz{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;color:#fff;text-shadow:0 1px 3px #000c,0 0 10px #0007}
.ef-quiz-cabeza{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px}
.ef-quiz-reloj{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#0b0805b3 0 58%,transparent 60%);box-shadow:0 0 14px #f5c45159}
.ef-quiz-reloj svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ef-quiz-reloj circle{fill:none;stroke-width:4}
.ef-quiz-pista{stroke:#ffffff26}
.ef-quiz-arco{stroke:#f3c96a;stroke-linecap:round;filter:drop-shadow(0 0 3px #f5c451);animation:ef-quiz-anillo var(--t,12s) linear calc(-1 * var(--hecho,0s)) forwards}
.ef-quiz-seg{position:relative;font:700 21px/1 "Playfair Display",Georgia,serif;color:#fff;font-variant-numeric:tabular-nums}
.ef-quiz-poco .ef-quiz-arco{stroke:#ff9a7a;filter:drop-shadow(0 0 4px #ff6b4a)}
.ef-quiz-poco .ef-quiz-seg{color:#ffd9cc;animation:ef-quiz-latido .5s ease-in-out infinite alternate}
.ef-quiz-veredicto{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 18px;border-radius:999px;border:1.5px solid;font:800 18px/1.2 system-ui,sans-serif;animation:ef-quiz-aviso .3s cubic-bezier(.2,.9,.3,1.3) both}
.ef-quiz-veredicto[data-res="ok"]{border-color:#86e8a8;background:#1e7a4340;color:#eafff0;box-shadow:0 0 16px #5fe39a73,0 0 26px #f5c45133}
.ef-quiz-veredicto[data-res="mal"]{border-color:#ff8080;background:#8a202040;color:#ffeaea;box-shadow:0 0 14px #ff6b6b66}
.ef-quiz-era{margin:0;font-size:13.5px;line-height:1.3;color:#fff}
.ef-quiz-era b{color:#ffe08a}
.ef-quiz-pieza{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.ef-quiz-entra{animation:ef-quiz-entra .34s cubic-bezier(.2,.8,.2,1) both}
.ef-quiz-pregunta{display:flex;align-items:center;justify-content:center;margin:0;width:100%;min-height:72px;padding:14px 16px;border:1px solid #f3c96aa6;border-radius:18px;background:#0808081f;font:700 19px/1.3 system-ui,sans-serif;color:#fff;overflow-wrap:break-word;box-shadow:inset 0 0 18px #f5c45112}
.ef-quiz[data-juego="vf"] .ef-quiz-pregunta{min-height:86px;padding:16px;font-size:18.5px;font-weight:600}
.ef-quiz-opciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.ef-quiz-op{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:58px;padding:8px 12px;border-radius:16px;border:1.5px solid #f3c96acc;background:#0808081f;color:#fff;font:700 19px/1.2 system-ui,sans-serif;text-shadow:inherit;cursor:pointer;
  box-shadow:0 0 10px #f5c45133,inset 0 0 12px #f5c45114;transition:transform .12s,box-shadow .2s,opacity .25s,border-color .2s,background-color .2s}
.ef-quiz-op:active:not(:disabled){transform:scale(.97)}
.ef-quiz-op:focus-visible{outline:2px solid #ffe08a;outline-offset:3px}
.ef-quiz-op:disabled{cursor:default;opacity:1}
.ef-quiz-txt{min-width:0;overflow-wrap:break-word;hyphens:manual}
.ef-quiz-ico{display:inline-flex;flex:none}
.ef-quiz-ico svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-quiz[data-juego="vf"] .ef-quiz-op{min-height:64px;border-width:2px;border-radius:18px}
.ef-quiz-op.ef-quiz-si{border-color:#6fe39b;box-shadow:0 0 14px #5fe39a59,inset 0 0 14px #5fe39a1f}
.ef-quiz-si .ef-quiz-ico{color:#7ee8a6}
.ef-quiz-op.ef-quiz-no{border-color:#ff6b6b;box-shadow:0 0 14px #ff6b6b59,inset 0 0 14px #ff6b6b1f}
.ef-quiz-no .ef-quiz-ico{color:#ff8a8a}
.ef-quiz-op .ef-quiz-ico svg{filter:drop-shadow(0 0 4px currentColor)}
.ef-quiz[data-juego="preguntas"] .ef-quiz-ico svg{width:22px;height:22px}
.ef-quiz[data-juego="preguntas"] .ef-quiz-ico{color:#7ee8a6}
.ef-quiz .ef-quiz-op.ef-quiz-bien{border-color:#86e8a8;background:#2f9d5a33;box-shadow:0 0 20px #5fe39a99,0 0 30px #f5c45140,inset 0 0 16px #5fe39a33;animation:ef-quiz-brillo .5s ease-out both}
.ef-quiz .ef-quiz-op.ef-quiz-mal{border-color:#ff7070;background:#a0282838;box-shadow:0 0 16px #ff6b6b80;animation:ef-quiz-sacude .42s ease-in-out both}
.ef-quiz-op.ef-quiz-tenue:disabled{opacity:.5}
.ef-quiz-progreso{display:flex;align-items:center;gap:10px;width:100%;font:600 13px/1 system-ui,sans-serif;color:#fff3d6}
.ef-quiz-barra{flex:1;height:7px;border-radius:999px;border:1px solid #f3c96a4d;background:#08080833;overflow:hidden}
.ef-quiz-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b8862e,#f3c96a 60%,#ffe9a8);box-shadow:0 0 8px #f5c451;transform-origin:left;transform:scaleX(var(--a));animation:ef-quiz-barra .6s cubic-bezier(.3,.8,.3,1) both}
/* Resumen */
.ef-quiz-final{gap:4px;padding-top:2px}
.ef-quiz-final>:not(.ef-quiz-confeti){position:relative;z-index:1}
.ef-quiz-corona{width:46px;height:46px;filter:drop-shadow(0 0 10px #f5c451b3);animation:ef-quiz-aviso .45s cubic-bezier(.2,.9,.3,1.3) both}
.ef-quiz-titular{margin:0;font:700 21px/1.2 "Playfair Display",Georgia,serif;color:#ffe9b0}
.ef-quiz-puntos{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:2px 0 0;font-family:"Playfair Display",Georgia,serif;line-height:1}
.ef-quiz-puntos b{font-size:58px;font-weight:800;color:#ffe08a;text-shadow:0 0 18px #f5c45199,0 2px 4px #000c}
.ef-quiz-puntos span{font-size:28px;font-weight:700;color:#fff3d6}
.ef-quiz-correctas{margin:0;font:600 13px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff3d6}
.ef-quiz-frase{margin:8px 0 2px;font:800 19px/1.2 system-ui,sans-serif;color:#fff0c6}
.ef-quiz-otros{display:flex;flex-direction:column;gap:6px;width:100%;margin:8px 0 0;padding:0;list-style:none}
.ef-quiz-otros li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:0 14px;border:1px solid #f3c96a59;border-radius:12px;background:#0808081f;font:600 15px/1.2 system-ui,sans-serif}
.ef-quiz-otros span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-quiz-otros b{color:#ffe08a}
.ef-quiz-otros em{font-style:normal;color:#fff3d6b3}
.ef-quiz-acciones{display:flex;gap:10px;width:100%;margin-top:14px}
.ef-quiz-acciones button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;font:700 17px/1 system-ui,sans-serif;cursor:pointer;text-shadow:0 1px 2px #000}
.ef-quiz-otra{flex:1.4;border:1.5px solid #f3c96a;background:linear-gradient(180deg,#6a4e244d,#1a130a73);color:#fff0c6;box-shadow:0 0 14px #f5c45166,inset 0 1px 0 #fff0b84d}
.ef-quiz-otra svg{width:22px;height:22px;fill:none;stroke:#ffe08a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ef-quiz-cerrar{flex:1;border:1.5px solid #ffffff4d;background:#0808082e;color:#fff}
.ef-quiz-acciones button:active{transform:scale(.97)}
.ef-quiz-acciones button:focus-visible{outline:2px solid #ffe08a;outline-offset:3px}
.ef-quiz-confeti{position:absolute;inset:-10px -18px -18px;z-index:0;overflow:hidden;pointer-events:none}
.ef-quiz-confeti i{position:absolute;top:0;left:calc(4% + var(--k) * 6.8%);width:6px;height:10px;border-radius:2px;background:hsl(calc(40 + var(--k) * 23) 90% 65%);opacity:0;animation:ef-tres-confeti 2.4s cubic-bezier(.3,.6,.5,1) calc(var(--k) * 70ms) both;--g:calc(var(--k) * 57deg)}
.ef-quiz-confeti i:nth-child(3n){background:#ffe08a}
@keyframes ef-quiz-anillo{from{stroke-dashoffset:0}to{stroke-dashoffset:131.95}}
@keyframes ef-quiz-latido{to{transform:scale(1.12)}}
@keyframes ef-quiz-aviso{from{opacity:0;transform:scale(.8)}}
@keyframes ef-quiz-entra{from{opacity:0;transform:translateY(10px)}}
@keyframes ef-quiz-brillo{0%{transform:scale(.97)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes ef-quiz-sacude{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes ef-quiz-barra{from{transform:scaleX(var(--de))}to{transform:scaleX(var(--a))}}
@media (max-width:440px){
  .ef-tarjeta:has(.ef-quiz) h3{gap:6px 8px;font-size:19px}
  .ef-quiz[data-juego="vf"] .ef-quiz-op{gap:8px;padding:8px 10px;font-size:18px}
  .ef-quiz[data-juego="vf"] .ef-quiz-ico svg{width:28px;height:28px}
}
@media (max-width:380px){
  .ef-tarjeta:has(.ef-quiz) h3{font-size:18px}
  .ef-tarjeta:has(.ef-quiz) h3::before{width:30px;height:30px}
  .ef-tarjeta:has(.ef-quiz) .ef-tarjeta-cuerpo{padding:4px 14px 16px}
  .ef-quiz-op,.ef-quiz[data-juego="vf"] .ef-quiz-op{padding:8px;font-size:17px;gap:8px}
  .ef-quiz-ico svg{width:28px;height:28px}
  .ef-quiz-opciones{gap:10px}
}
@media (orientation:landscape) and (max-height:520px){
  /* Teléfono horizontal: la pregunta a la izquierda y las opciones a la derecha */
  .ef-tarjeta:has(.ef-quiz){width:min(calc(100% - 24px),660px);top:calc(50% - 34px);max-height:calc(100% - 96px)}
  .ef-tarjeta:has(.ef-quiz) header{padding:8px 10px 0 16px}
  .ef-tarjeta:has(.ef-quiz) h3{min-height:34px;font-size:19px}
  .ef-tarjeta:has(.ef-quiz) h3::before{width:28px;height:28px}
  .ef-tarjeta:has(.ef-quiz) header .ll-redondo{width:38px;height:38px}
  .ef-tarjeta:has(.ef-quiz) .ef-tarjeta-cuerpo{padding:2px 16px 12px}
  .ef-quiz{gap:8px}
  .ef-quiz-cabeza{min-height:46px}
  .ef-quiz-reloj{width:44px;height:44px}
  .ef-quiz-seg{font-size:17px}
  .ef-quiz-pieza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:14px}
  .ef-quiz-pregunta,.ef-quiz[data-juego="vf"] .ef-quiz-pregunta{min-height:64px;padding:10px 12px;font-size:16.5px}
  .ef-quiz-opciones{gap:8px}
  .ef-quiz-op,.ef-quiz[data-juego="vf"] .ef-quiz-op{min-height:46px;font-size:16px}
  .ef-quiz-ico svg{width:26px;height:26px}
  .ef-quiz-final{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"corona titular" "puntos frase" "correctas otros" "acciones acciones";column-gap:18px;align-items:center;text-align:left}
  .ef-quiz-corona{grid-area:corona;width:34px;height:34px;justify-self:center}
  .ef-quiz-titular{grid-area:titular}
  .ef-quiz-puntos{grid-area:puntos;width:110px}
  .ef-quiz-puntos b{font-size:46px}
  .ef-quiz-correctas{grid-area:correctas;align-self:start;text-align:center}
  .ef-quiz-frase{grid-area:frase;margin:0}
  .ef-quiz-otros{grid-area:otros;margin:0}
  .ef-quiz-acciones{grid-area:acciones;margin-top:8px}
  .ef-quiz-acciones button{min-height:44px}
}
@media (min-width:900px) and (min-height:700px){
  .ef-tarjeta:has(.ef-quiz){width:min(calc(100% - 40px),460px)}
}

/* Diversión: dos bloques de tarjetas grandes (4 columnas en teléfono), controles de sonido y pie */
.ef-titulo-bloque{display:flex;flex-direction:column;min-width:0}
.ef-titulo-sub{margin-top:4px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;color:#d4a64ad9}
@media (max-width:380px){.ef-titulo-sub{letter-spacing:.28em}}
.ef-titulo-sub[hidden],.ef-quitar-papelera{display:none}
.ef-panel-diversion .ef-quitar-ico:not(.ef-quitar-papelera){display:none}
.ef-panel-diversion .ef-quitar-papelera{display:inline-flex}
.ef-quitar-ico{display:inline-flex}
.ef-seccion[data-sec="diversion"]{gap:14px}
.ef-dbloque{display:flex;flex-direction:column;gap:6px}
.ef-dtitulo{display:flex;align-items:center;gap:8px;margin:4px 2px 0;font-size:17px;font-weight:700;color:#f6e8c4}
.ef-dtitulo-img{width:26px;height:26px;filter:drop-shadow(0 2px 4px #000)}
.ef-juego-corona{vertical-align:-5px;filter:drop-shadow(0 1px 3px #000)}
.ef-dtexto{margin:0 2px 4px;font-size:12.5px;line-height:1.35;color:var(--ll-tenue)}
.ef-dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@container (max-width:300px){.ef-dgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@container (min-width:640px){.ef-dgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ef-tile.ef-dcard{align-items:flex-start;gap:1px;padding:8px 7px 9px;border-radius:16px;border:1.5px solid #d4a64a3d;background:linear-gradient(180deg,#1e1913,#100d0a);box-shadow:inset 0 1px 0 #ffe6a314,0 6px 16px #0000008c;text-align:left;transition:border-color .18s,box-shadow .18s,transform .12s}
.ef-tile.ef-dcard:hover{border-color:#d4a64a8c;background:linear-gradient(180deg,#241d15,#120f0b)}
.ef-dcard[hidden]{display:none}
.ef-tile.ef-dcard[aria-pressed="true"]{border-color:#f6d27a;background:linear-gradient(180deg,#2b2114,#140f0a);box-shadow:0 0 0 1px #f6d27a,0 0 20px #e7b85073}
.ef-dprev{display:block;width:min(calc(100% - 4px),84px);aspect-ratio:1;margin:0 0 4px}
.ef-sprev{width:min(calc(100% - 22px),60px)}
.ef-dimg{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;filter:drop-shadow(0 4px 8px #000000b3);transition:transform .2s}
.ef-dcard:hover .ef-dimg{transform:scale(1.06)}
.ef-dcard[aria-pressed="true"] .ef-dimg{transform:scale(1.08)}
.ef-dflecha{position:absolute;top:9px;right:7px;display:grid;color:#d4a64a}
.ef-tile.ef-dcard .ef-nombre{max-width:100%;text-align:left;color:#f3ead8;font-size:12.5px;font-weight:700;line-height:1.2}
.ef-dsub{display:-webkit-box;max-width:100%;font-size:10.5px;line-height:1.25;color:var(--ll-tenue);overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ef-dcard .ef-dsub{padding-right:16px}
.ef-dcard .ef-fav.ef-corazon{top:auto;bottom:6px;right:5px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0000006b;color:#ffffffa6;opacity:.9;cursor:pointer;text-shadow:none}
.ef-scard .ef-fav.ef-corazon{top:5px;bottom:auto}
.ef-dcard .ef-corazon svg{width:13px;height:13px}
.ef-dcard.ef-es-fav .ef-corazon{color:#f6d27a;opacity:1}
.ef-dcard.ef-es-fav .ef-corazon svg{fill:#f6d27a;stroke:#f6d27a}
.ef-dbrillo{position:relative}
.ef-dbrillo::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#f6c55a30,#f6c55a0d 55%,transparent 72%);opacity:.75;pointer-events:none;transition:opacity .2s,transform .2s}
.ef-dbrillo .ef-dimg{position:relative}
.ef-dcard:hover .ef-dbrillo::before,.ef-dcard[aria-pressed="true"] .ef-dbrillo::before{opacity:1;transform:scale(1.14)}
.ef-dpro{right:auto;left:6px;top:6px;padding:2px 5px;font-size:9px}
.ef-rgrid .ef-tile.ef-dcard{align-items:center;text-align:center;padding:9px 6px}
.ef-rgrid .ef-tile.ef-dcard .ef-nombre{text-align:center;font-size:12px}
.ef-rgrid .ef-fav.ef-corazon{top:5px;bottom:auto}
.ef-rgrid .ef-sprev{margin-top:4px}
.ef-dgrid.ef-jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:640px){.ef-dgrid.ef-jgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ef-jgrid .ef-tile.ef-dcard{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:9px;min-height:84px;padding:9px 24px 9px 8px}
.ef-jgrid .ef-dprev{grid-row:1 / 5;align-self:center;width:60px;margin:0}
.ef-jgrid .ef-tile.ef-dcard .ef-nombre{grid-column:2;grid-row:2;-webkit-line-clamp:3;line-clamp:3}
.ef-jgrid .ef-dsub{grid-column:2;grid-row:3}
.ef-jgrid .ef-dcard .ef-dsub{padding-right:0}
.ef-sgrid .ef-tile.ef-dcard{align-items:center;text-align:center;padding:9px 6px 9px}
.ef-sgrid .ef-tile.ef-dcard .ef-nombre{text-align:center;font-size:12px;overflow-wrap:break-word}
.ef-sinsignia{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin-top:4px;padding:3px 8px;border-radius:999px;border:1px solid #d4a64a40;background:#ffffff0a;color:#e8d6ac;font-size:10.5px;font-weight:600;white-space:nowrap}
.ef-sinsignia-ico{display:inline-flex;color:#f3cd6c}
.ef-sinsignia-ico svg{width:11px;height:11px}
.ef-onda-fx{display:inline-flex;align-items:center;gap:1.5px;height:12px}
.ef-onda-fx i{width:2px;border-radius:1px;background:#f3cd6c}
.ef-sinsignia-parar{display:none;align-items:center;gap:4px}
.ef-scard.ef-en-loop{border-color:#f6d27a;box-shadow:0 0 0 1px #f6d27a,0 0 22px #e7b85080}
.ef-scard.ef-en-loop .ef-sinsignia{border-color:#ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a);color:#1a1206}
.ef-scard.ef-en-loop .ef-sinsignia-ico,.ef-scard.ef-en-loop .ef-sinsignia-texto{display:none}
.ef-scard.ef-en-loop .ef-sinsignia-parar{display:inline-flex}
.ef-scard.ef-en-loop .ef-dimg{animation:ef-late 1.1s ease-in-out infinite}
.ef-dcontroles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;border-radius:18px;border:1px solid #d4a64a33;background:linear-gradient(180deg,#1b1713,#0f0d0b)}
.ef-dmodos{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.ef-dmodo{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:999px;border:1px solid #d4a64a40;background:#ffffff08;color:#e6dccb;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.ef-dmodo svg{flex:none;width:14px;height:14px}
.ef-dmodo .ef-corazon,.ef-dmodo svg path{stroke-linejoin:round}
.ef-dmodo[data-ef="diversion-favoritos"] svg{fill:none;stroke:currentColor;stroke-width:2}
.ef-dmodo[aria-pressed="true"]{border-color:#f6d27a;color:#1a1206;font-weight:700;background:linear-gradient(160deg,#ffe6a3,#d4a64a 60%,#a77a2b)}
.ef-dmodo[data-ef="diversion-favoritos"][aria-pressed="true"] svg{fill:currentColor}
.ef-dmodo:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ef-dvolumen{flex:1 1 210px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--ll-texto)}
.ef-dvolumen-texto{white-space:nowrap}
.ef-dvolumen input[type="range"]{width:100%;min-width:60px;min-height:28px;margin:0;accent-color:#e0b65a;background:transparent}
.ef-dvolumen output{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:#f6d27a}
.ef-destado{flex-basis:100%;margin:0;font-size:12px;color:#f3e3bd}
.ef-destado[hidden]{display:none}
.ef-dpie{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 0 0;font-size:12px;color:var(--ll-tenue);text-align:center}
.ef-dpie svg{flex:none;color:#d4a64a}
@container (max-width:340px){
  .ef-dmodo{padding:0 10px;font-size:12px}
  .ef-dvolumen{grid-template-columns:1fr auto}
  .ef-dvolumen-texto{grid-column:1 / -1}
  .ef-sinsignia{gap:3px;padding:3px 5px}
}

/* Chip del loop sobre la llamada: lo detiene sin abrir el panel */
.ef-chip-loop{position:absolute;z-index:6;right:calc(14px + var(--ll-der-s,0px));bottom:calc(var(--ll-inf,0px) + 112px);display:inline-flex;align-items:center;gap:8px;max-width:min(60vw,240px);min-height:38px;padding:0 12px;border-radius:999px;border:1px solid #f6d27a;background:#0d0b0ae6;color:#fff1c2;font:inherit;font-size:12.5px;cursor:pointer;box-shadow:0 6px 18px #000a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-chip-loop[hidden]{display:none}
.ef-chip-loop span:not(.ef-chip-loop-onda){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-chip-loop b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#ffe6a3,#d4a64a);color:#1a1206;font-size:10px}
.ef-chip-loop-onda{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.ef-chip-loop-onda i{width:3px;height:100%;border-radius:2px;background:#f3cd6c;transform-origin:bottom;animation:ef-onda .7s ease-in-out infinite alternate}
.ef-chip-loop-onda i:nth-child(2){animation-delay:-.25s}
.ef-chip-loop-onda i:nth-child(3){animation-delay:-.5s}
.ef-chip-loop:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}

/* Brillos de los bordes (fiesta y Sorpresa) y dado de Sorpresa */
.ef-brillos{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.ef-con-brillos .ef-brillos,.ef-fiesta .ef-brillos{opacity:1}
.ef-brillos img{position:absolute;width:var(--t,22px);height:var(--t,22px);margin:calc(var(--t,22px) / -2);opacity:0}
.ef-con-brillos .ef-brillos img,.ef-fiesta .ef-brillos img{animation:ef-brillo 1.4s ease-in-out var(--d,0s) infinite}
@keyframes ef-brillo{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.ef-dado{position:absolute;left:50%;top:42%;width:min(30vw,128px);aspect-ratio:1;transform:translate(-50%,-50%);animation:ef-dado var(--ef-dado,1.1s) cubic-bezier(.25,.7,.3,1) both}
.ef-dado img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px #000c)}
@keyframes ef-dado{
  0%{opacity:0;transform:translate(-50%,-120%) rotate(-200deg) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-50%) rotate(-40deg) scale(1)}
  45%{transform:translate(-50%,-62%) rotate(60deg) scale(1.05)}
  65%{transform:translate(-50%,-50%) rotate(170deg)}
  85%{opacity:1;transform:translate(-50%,-50%) rotate(360deg) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(360deg) scale(1.35)}
}

/* Entrada Imperial (~4 s): velo, rayos, líneas doradas, destello, corona, texto y chispas. Sin toques. */
.ef-imperial{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.ef-imp-velo{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#00000040 0,#000000b3 75%);animation:ef-imp-velo 4.2s ease both}
@keyframes ef-imp-velo{0%{opacity:0}12%,76%{opacity:1}100%{opacity:0}}
.ef-imp-rayos{position:absolute;left:50%;top:44%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,#f3cd6c40 0deg 5deg,#f3cd6c00 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,#0000 42%);mask:radial-gradient(circle,#000 0,#0000 42%);animation:ef-imp-rayos 4.2s ease-out both}
@keyframes ef-imp-rayos{0%{opacity:0;transform:rotate(0) scale(.5)}22%{opacity:1}72%{opacity:.8}100%{opacity:0;transform:rotate(35deg) scale(1.1)}}
.ef-imp-centro{position:relative;display:flex;flex-direction:column;align-items:center;width:min(86vw,440px);margin-top:-8vh}
.ef-imp-destello{position:absolute;left:50%;top:32%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,#fffaf0 0,#f3cd6c99 22%,#f3cd6c00 64%);opacity:0;animation:ef-imp-destello 4.2s ease-out both}
@keyframes ef-imp-destello{0%,14%{opacity:0;transform:scale(.2)}24%{opacity:1;transform:scale(1.15)}46%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
.ef-imp-corona{position:relative;width:min(48vw,220px,30vh);filter:drop-shadow(0 0 22px #f3cd6c99) drop-shadow(0 10px 18px #000b);animation:ef-imp-corona 4.2s cubic-bezier(.2,.8,.2,1) both}
.ef-imp-corona img{display:block;width:100%;height:auto}
@keyframes ef-imp-corona{0%{opacity:0;transform:translateY(-70px) scale(.6)}18%{opacity:1;transform:translateY(6px) scale(1.06)}26%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px) scale(1.04)}}
.ef-imp-texto{position:relative;margin-top:12px;padding-left:.24em;font:700 clamp(32px,10vw,62px)/1 "Playfair Display",Georgia,"Times New Roman",serif;letter-spacing:.24em;background:linear-gradient(180deg,#fff7e0,#f3cd6c 55%,#b47c22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f3cd6c;animation:ef-imp-texto 4.2s ease both}
@keyframes ef-imp-texto{0%,22%{opacity:0;transform:scale(1.3)}36%,82%{opacity:1;transform:none}100%{opacity:0;transform:scale(.98)}}
.ef-imp-linea{position:absolute;bottom:clamp(14px,4vw,28px);width:44%;height:2px;opacity:0;animation:ef-imp-linea 4.2s ease both}
.ef-imp-linea-a{right:54%;background:linear-gradient(90deg,#f3cd6c00,#f3cd6c,#fff6cf);transform-origin:right}
.ef-imp-linea-b{left:54%;background:linear-gradient(90deg,#fff6cf,#f3cd6c,#f3cd6c00);transform-origin:left}
@keyframes ef-imp-linea{0%,28%{opacity:0;transform:scaleX(0)}42%,80%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.ef-imp-chispa{position:absolute;left:50%;top:30%;width:var(--t,20px);height:var(--t,20px);margin:calc(var(--t,20px) / -2);opacity:0;animation:ef-imp-chispa 1.8s ease-out calc(.5s + var(--r,0s)) both}
@keyframes ef-imp-chispa{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1)}}

/* Dibujo: barra flotante con grupos, grosores y la pregunta al terminar */
.ef-dib-grupo{display:flex;align-items:center;gap:6px}
.ef-grosor i{display:block;width:var(--g,8px);height:var(--g,8px);margin:auto;border-radius:50%;background:currentColor}
.ef-dibujo-pregunta{position:absolute;z-index:5;left:50%;top:calc(var(--ll-sup,0px) + 14px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:min(calc(100% - 24px),340px);padding:14px 16px;border-radius:20px;border:1px solid #d4a64a66;background:#0d0b0aeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px #000b;pointer-events:auto;text-align:center}
.ef-dibujo-pregunta[hidden]{display:none}
.ef-dibujo-pregunta p{margin:0;font-size:14.5px;font-weight:600;color:#fff1c2}
.ef-dibujo-pregunta-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
@media (max-width:420px){
  .ef-dibujo-barra{gap:5px;padding:6px 7px}
  .ef-dibujo-barra .ef-sep{display:none}
  .ef-herr{min-width:36px;min-height:36px;font-size:15px}
  .ef-color{width:26px;height:26px}
}

/* Temas: solo cambian la apariencia de la pantalla de llamada */
.ll-capa.ef-tema-minimalista{--ll-oro:#d9d9d9;--ll-oro-claro:#ffffff;--ll-borde:#ffffff38;--ef-vidrio:linear-gradient(180deg,#141414c0,#0a0a0ae0)}
.ll-capa.ef-tema-neon{--ll-oro:#39e6ff;--ll-oro-claro:#b5f7ff;--ll-borde:#39e6ff59;--ef-vidrio:linear-gradient(180deg,#071a24c4,#03070ae6)}
.ll-capa.ef-tema-cyber{--ll-oro:#ff2e88;--ll-oro-claro:#7ff8ff;--ll-borde:#ff2e8866;--ef-vidrio:linear-gradient(180deg,#1d0820c4,#07030ae6)}
.ll-capa.ef-tema-oscuro{--ll-oro:#8c8c8c;--ll-oro-claro:#c8c8c8;--ll-borde:#ffffff24;--ef-vidrio:linear-gradient(180deg,#000000d0,#000000f0)}
.ll-capa.ef-tema-fiesta{--ll-oro:#ff8a1e;--ll-oro-claro:#ffd23b;--ll-borde:#ff8a1e66;--ef-vidrio:linear-gradient(180deg,#2a0f22c4,#10060ee6)}
.ll-capa.ef-tema-elegante{--ll-oro:#c9c0ae;--ll-oro-claro:#f2ece0;--ll-borde:#c9c0ae4d;--ef-vidrio:linear-gradient(180deg,#1a1917c4,#0b0b0ae6)}
.ll-capa[class*="ef-tema-"] .ll-controles-video{border-color:var(--ll-borde);background:var(--ef-vidrio)}
.ll-capa[class*="ef-tema-"] .ll-hoja,.ll-capa[class*="ef-tema-"] .ef-tarjeta{border-color:var(--ll-borde)}
.ll-capa[class*="ef-tema-"] .ll-propia{border-color:var(--ll-oro)}
.ll-capa[class*="ef-tema-"] .ef-pestana[aria-selected="true"],.ll-capa[class*="ef-tema-"] .ef-boton-oro{border-color:var(--ll-oro-claro);background:linear-gradient(160deg,var(--ll-oro-claro),var(--ll-oro))}
.ll-capa.ef-tema-neon .ll-fondo{background:radial-gradient(85% 55% at 50% 32%,#06283a 0%,#030c12 55%,#020406 100%)}
.ll-capa.ef-tema-cyber .ll-fondo{background:radial-gradient(85% 55% at 50% 32%,#2a0a33 0%,#0e0414 55%,#050208 100%)}
.ll-capa.ef-tema-fiesta .ll-fondo{background:radial-gradient(85% 55% at 50% 32%,#3a1030 0%,#160818 55%,#070308 100%)}
.ll-capa.ef-tema-minimalista .ll-fondo,.ll-capa.ef-tema-oscuro .ll-fondo{background:#050505}
.ll-capa.ef-tema-elegante .ll-fondo{background:radial-gradient(85% 55% at 50% 32%,#22201c 0%,#0e0d0c 55%,#050505 100%)}

@media (min-width:700px) and (min-height:600px){
  .ll-capa .ll-hoja.ef-panel{width:min(560px,calc(100% - 44px));max-height:min(84vh,780px,calc(100% - var(--ll-inf,0px) - 176px))}
}
@media (min-width:1100px){
  .ll-capa .ll-hoja.ef-panel{width:min(740px,calc(100% - 44px))}
}
.ll-escritorio .ll-hoja.ef-panel{max-height:max(340px,calc(100% - 160px))}
@media (max-width:520px){
  /* Teléfono: título, «Quitar todos» (en dos líneas) y la X caben en una fila */
  .ef-panel .ll-hoja-cabeza{flex-wrap:nowrap;column-gap:8px;padding-left:16px;padding-right:10px}
  .ef-cabeza-acciones{gap:6px}
  .ef-quitar{max-width:124px;min-height:40px;padding:4px 10px;font-size:11.5px}
}
@media (max-width:380px){
  .ef-fgrid{gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .ef-tres *,.ef-tres,.ef-tres-tablero::after,.ef-tarjeta:has(.ef-tres) h3::before{animation:none!important}
  .ef-tres-confeti,.ef-tres-destello,.ef-tres-polvo,.ef-tres-cruce{display:none}
  .ef-quiz-entra,.ef-quiz .ef-quiz-op,.ef-quiz-veredicto,.ef-quiz-corona,.ef-quiz-seg,.ef-quiz-barra i{animation:none!important}
  .ef-quiz-confeti{display:none}
  .ef-fiesta .ef-luces,.ef-fiesta .ef-capa::after{animation:none}
  .ef-flota{animation-duration:2s}
  .ef-vplay.ef-sonando,.ef-vprobar.ef-grabando,.ef-vprueba .ef-onda i{animation:none}
  .ef-scard.ef-en-loop .ef-dimg,.ef-chip-loop-onda i,.ef-ruleta-emoji{animation:none}
  .ef-imp-rayos,.ef-imp-chispa,.ef-imp-destello,.ef-dst-rayos,.ef-dst-flash{display:none}
  .ef-con-brillos .ef-brillos img,.ef-fiesta .ef-brillos img{animation-duration:2.8s}
  .ef-dst-img,.ef-canon{animation-name:ef-dst-suave}
  .ef-dst-borde{animation-iteration-count:1}
  .ef-ppt-chispa,.ef-ppt-rayos,.ef-ppt-energia::before,.ef-ppt-vs,.ef-ppt-seg.ef-ppt-poco,.ef-ppt-ganador .ef-ppt-mano{animation:none}
  .ef-ppt-confeti{display:none}
  .ef-ppt-agita{animation-iteration-count:1,infinite}
}