/* ============================================================
   paragraph_learn_game.css  —  "Aprende el Párrafo"  v4
   NARRION

   CAMBIO CLAVE vs v3:
   .plg-en, .plg-slot-ref, .plg-es → white-space:nowrap
   Esto hace que scrollWidth refleje el ancho real del texto,
   permitiendo que _fixSlotText() en JS detecte y corrija el
   desborde reduciendo el font-size slot a slot.
   ============================================================ */

/* ──────────────────────────────────────────────────────────── */
/* OVERRIDE DE #game-area — sólo cuando PLG está activo        */
/* Elimina el p-4/sm:p-6 de Tailwind que recorta el juego.    */
/* :has() soportado: Chrome 105+, Firefox 121+, Safari 15.4+  */
/* No afecta a ningún otro juego porque está acotado a         */
/* "#game-area que contiene .plg-wrap".                        */
/* ──────────────────────────────────────────────────────────── */
#game-area:has(.plg-wrap) {
    padding:  0 !important;       /* anula p-4 / sm:p-6 de Tailwind */
    overflow: hidden !important;  /* PLG gestiona su propio scroll   */
}

/* ──────────────────────────────────────────────────────────── */
/* CONTENEDOR RAÍZ                                              */
/* ──────────────────────────────────────────────────────────── */
.plg-wrap {
    position:       relative;
    height:         100%;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        12px;
    box-sizing:     border-box;
    opacity:        0;   /* empieza invisible; JS añade .plg-layout-ready cuando el layout está listo */
}
/* Fade-in se lanza SOLO cuando _fitLayout() termina de calcular alturas y texto */
.plg-wrap.plg-layout-ready {
    animation: plg-fade-in 0.28s ease both;
}
@keyframes plg-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Overlay verde de celebración al completar fragmento */
.plg-wrap::after {
    content:        '';
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        5;
    opacity:        0;
    background:     radial-gradient(ellipse at 50% 40%,
                        rgba(52,211,153,.22) 0%,
                        rgba(52,211,153,.06) 45%,
                        transparent 70%);
}
.plg-wrap.plg-wrap-celebrate::after {
    animation: plg-celebrate-overlay 2.4s ease forwards;
}
@keyframes plg-celebrate-overlay {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 0.75; }
    100% { opacity: 0; }
}

/* ──────────────────────────────────────────────────────────── */
/* FONDO                                                         */
/* ──────────────────────────────────────────────────────────── */
.plg-bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    opacity:             0.10;
    filter:              blur(3px) saturate(0.65);
    pointer-events:      none;
    z-index:             0;
}
.plg-bg.p2 { filter: blur(3px) saturate(0.45) hue-rotate(175deg); opacity: 0.09; }

.plg-wrap > *:not(.plg-bg),
.plg-end  > *:not(.plg-bg) { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────── */
/* CABECERA COMPACTA — progreso + escuchar en una sola fila     */
/* (ahorra el alto que antes ocupaba el botón grande aparte)    */
/* ──────────────────────────────────────────────────────────── */
.plg-headerbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    flex-wrap:       nowrap;
    flex-shrink:     0;
    background:      linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:          1px solid rgba(96,165,250,.25);
    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 18px rgba(37,99,235,.12),
        0 4px 18px rgba(0,0,0,.35);
    border-radius:   12px;
    padding:         7px 8px 7px 13px;
    transition:      border-color .4s ease, box-shadow .4s ease;
}
.plg-headerbar.p2 {
    border-color: rgba(56,189,248,.28);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.08),
        0 0 18px rgba(14,165,233,.14),
        0 4px 18px rgba(0,0,0,.35);
}

.plg-play-compact {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    flex-shrink:     0;
    padding:         7px 15px;
    border-radius:   30px;
    cursor:          pointer;
    background:      linear-gradient(135deg, #3730a3 0%, #4f46e5 55%, #6366f1 100%);
    border:          1.5px solid rgba(165,180,252,.45);
    box-shadow:      0 0 16px rgba(99,102,241,.4), 0 3px 10px rgba(0,0,0,.3);
    color:           #e0e7ff;
    font-size:       .74rem;
    font-weight:     800;
    white-space:     nowrap;
    transition:      transform .2s ease, box-shadow .2s ease;
}
.plg-play-compact svg { width:13px; height:13px; flex-shrink:0; }
.plg-play-compact:hover  { transform:translateY(-1px); box-shadow:0 0 24px rgba(99,102,241,.55),0 4px 14px rgba(0,0,0,.35); }
.plg-play-compact:active { transform:scale(0.94); }
.plg-play-compact.p2 {
    background:   linear-gradient(135deg,#155e75 0%,#0e7490 55%,#0ea5e9 100%);
    border-color: rgba(56,189,248,.45);
    box-shadow:   0 0 16px rgba(14,165,233,.4), 0 3px 10px rgba(0,0,0,.3);
}
.plg-play-compact.p2:hover { box-shadow:0 0 24px rgba(14,165,233,.55),0 4px 14px rgba(0,0,0,.35); }

/* ──────────────────────────────────────────────────────────── */
/* CABECERA (legado — se mantiene por compatibilidad, sin uso)  */
/* ──────────────────────────────────────────────────────────── */
.plg-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    flex-wrap:       wrap;
    flex-shrink:     0;
    background:      linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:          1px solid rgba(96,165,250,.25);
    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 18px rgba(37,99,235,.12),
        0 4px 18px rgba(0,0,0,.35);
    border-radius:   12px;
    padding:         9px 14px;
    transition:      border-color .4s ease, box-shadow .4s ease;
}
.plg-top.p2 {
    border-color: rgba(56,189,248,.28);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.08),
        0 0 18px rgba(14,165,233,.14),
        0 4px 18px rgba(0,0,0,.35);
}
.plg-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.plg-fcnt {
    font-family:   'Courier New', monospace;
    font-size:     0.73rem;
    font-weight:   700;
    color:         rgba(96,165,250,.9);
    background:    rgba(96,165,250,.07);
    border:        1px solid rgba(96,165,250,.18);
    padding:       2px 9px;
    border-radius: 20px;
    white-space:   nowrap;
}
.plg-badge {
    font-size:      0.59rem;
    font-weight:    800;
    letter-spacing: 0.07em;
    padding:        3px 9px;
    border-radius:  20px;
    white-space:    nowrap;
}
.plg-badge.p1 { background: linear-gradient(135deg,#312e81,#4f46e5); color:#c7d2fe; box-shadow:0 0 10px rgba(99,102,241,.3); }
.plg-badge.p2 { background: linear-gradient(135deg,#164e63,#0e7490); color:#a5f3fc; box-shadow:0 0 10px rgba(14,165,233,.3); }

/* ──────────────────────────────────────────────────────────── */
/* BARRA DE PROGRESO                                            */
/* ──────────────────────────────────────────────────────────── */
.plg-frag-bar { height:4px; background:rgba(255,255,255,.05); border-radius:2px; overflow:hidden; flex-shrink:0; }
.plg-frag-bar-fill { height:100%; border-radius:2px; width:0%; transition:width 0.45s cubic-bezier(0.4,0,0.2,1); }
.plg-frag-bar-fill.p1 { background:linear-gradient(90deg,#6366f1,#8b5cf6); box-shadow:0 0 6px rgba(99,102,241,.4); }
.plg-frag-bar-fill.p2 { background:linear-gradient(90deg,#0ea5e9,#14b8a6); box-shadow:0 0 6px rgba(14,165,233,.4); }

/* ──────────────────────────────────────────────────────────── */
/* BOTÓN ESCUCHAR                                               */
/* ──────────────────────────────────────────────────────────── */
.plg-play-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    width:           100%;
    padding:         11px 20px;
    flex-shrink:     0;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    background:      linear-gradient(135deg, #3730a3 0%, #4f46e5 55%, #6366f1 100%);
    border:          1.5px solid rgba(165,180,252,.45);
    box-shadow:      0 0 26px rgba(99,102,241,.42), 0 4px 16px rgba(0,0,0,.32);
    border-radius:   14px;
    color:           #e0e7ff;
    transition:      transform .22s ease, box-shadow .22s ease;
}
.plg-play-btn:hover  { transform:translateY(-1px); box-shadow:0 0 36px rgba(99,102,241,.58),0 6px 20px rgba(0,0,0,.38); }
.plg-play-btn:active { transform:scale(0.97); }
.plg-play-btn.p2 { background:linear-gradient(135deg,#155e75 0%,#0e7490 55%,#0ea5e9 100%); border-color:rgba(56,189,248,.45); box-shadow:0 0 26px rgba(14,165,233,.42),0 4px 16px rgba(0,0,0,.32); }
.plg-play-btn.p2:hover { box-shadow:0 0 36px rgba(14,165,233,.58),0 6px 20px rgba(0,0,0,.38); }

.plg-play-icon-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    background:      rgba(255,255,255,.18);
    border-radius:   50%;
    flex-shrink:     0;
    box-shadow:      0 0 12px rgba(255,255,255,.1);
}
.plg-play-label { font-size:0.95rem; font-weight:800; letter-spacing:0.02em; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.plg-play-shimmer {
    position:absolute; top:0; left:-80%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
    animation:plg-shimmer 2.8s ease infinite; pointer-events:none;
}
@keyframes plg-shimmer { 0%{left:-80%} 60%{left:130%} 100%{left:130%} }

/* ──────────────────────────────────────────────────────────── */
/* INSTRUCCIÓN — TOAST FLOTANTE (reemplaza el hint estático)   */
/* Aparece al inicio de cada fase y desaparece en ~3 s.        */
/* Al ser position:absolute no ocupa espacio en el flujo flex  */
/* y _fitLayout() puede aprovechar toda la altura disponible.  */
/* ──────────────────────────────────────────────────────────── */
.plg-hint-toast {
    position:        absolute !important;  /* !important vence a .plg-wrap > *:not(.plg-bg) { position:relative } */
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         200 !important;       /* encima de z-index:1 forzado en hijos */
    width:           min(90%, 320px);
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    font-size:       0.82rem;
    color:           #e2e8f0;
    line-height:     1.55;
    background:      rgba(8, 12, 30, 0.90);
    border:          1px solid rgba(96,165,250,.42);
    border-radius:   14px;
    padding:         14px 16px;
    box-shadow:
        0 8px 32px rgba(0,0,0,.60),
        0 0 0 1px rgba(96,165,250,.07),
        0 0 28px rgba(37,99,235,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events:  none;
    animation:
        plg-toast-in  0.35s ease both,
        plg-toast-out 0.45s ease 2.6s forwards;
}
.plg-hint-toast.p2 {
    border-color: rgba(56,189,248,.42);
    box-shadow:
        0 8px 32px rgba(0,0,0,.60),
        0 0 0 1px rgba(56,189,248,.07),
        0 0 28px rgba(14,165,233,.18);
}
.plg-hint-toast strong            { color:#93c5fd; font-weight:700; }
.plg-hint-toast.p2 strong         { color:#7dd3fc; }
.plg-hint-toast-icon              { flex-shrink:0; margin-top:2px; color:#60a5fa; }
.plg-hint-toast.p2 .plg-hint-toast-icon { color:#38bdf8; }
.plg-hint-toast > span            { flex:1; min-width:0; }

@keyframes plg-toast-in {
    from { opacity:0; transform:translate(-50%,-50%) scale(0.84); }
    to   { opacity:1; transform:translate(-50%,-50%) scale(1);    }
}
@keyframes plg-toast-out {
    from { opacity:1; transform:translate(-50%,-50%) scale(1);    }
    to   { opacity:0; transform:translate(-50%,-50%) scale(0.90); }
}

/* ──────────────────────────────────────────────────────────── */
/* ETIQUETAS                                                     */
/* ──────────────────────────────────────────────────────────── */
.plg-section-label { font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:rgba(148,163,184,.45); flex-shrink:0; padding-left:2px; }
.plg-section-label.p2 { color:rgba(56,189,248,.38); }

/* ──────────────────────────────────────────────────────────── */
/* FILA DE SLOTS — zona de referencia con color propio          */
/* ──────────────────────────────────────────────────────────── */
.plg-row {
    display:       flex;
    flex-wrap:     wrap;
    gap:           7px;
    flex-shrink:   0;
    align-items:   flex-start;
    background:    rgba(30, 20, 60, 0.45);   /* tono violeta apagado, diferencia de opciones */
    border:        1px solid rgba(139,92,246,.18);
    border-radius: 12px;
    padding:       7px;
    box-sizing:    border-box;
}
.plg-row.p2 {
    background: rgba(5, 30, 60, 0.45);
    border-color: rgba(14,165,233,.18);
}

/* ── Slot contenedor ────────────────────────────────────────
   overflow:hidden asegura que nada sobresalga visualmente    */
.plg-slot {
    position:        relative;   /* para anclar el "?" como insignia de esquina */
    min-width:       60px;
    height:          46px;       /* coincide con MIN_SLOT_H en JS → reduce el salto visual antes del layout */
    overflow:        hidden;
    background:      linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:          1px solid rgba(96,165,250,.2);
    border-radius:   10px;
    padding:         5px 5px;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    transition:      border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.plg-slot.plg-target {
    border-color: #fbbf24 !important;
    background:   linear-gradient(135deg, #1c1400 0%, #2d1e02 100%) !important;
    box-shadow:   0 0 0 2px rgba(251,191,36,.22), 0 0 18px rgba(251,191,36,.18);
    animation:    plg-pulse-gold 1.9s ease infinite;
}
.plg-slot.plg-matched {
    border-color: #34d399;
    background:   linear-gradient(135deg, #021c15 0%, #062e22 100%);
    box-shadow:   0 0 0 1px rgba(52,211,153,.1), 0 0 12px rgba(52,211,153,.1);
}

/* ── TEXTOS DENTRO DEL SLOT — clave del fix de v4 ───────────
   white-space:nowrap impide que el texto se parta en líneas.
   Gracias a esto, scrollWidth = ancho real del texto,
   y _fixSlotText() puede reducir font-size con precisión.     */

/* El "?" ahora es una insignia decorativa en la esquina,
   posicionada fuera del flujo flex: ya no le resta alto a la
   palabra de referencia, que pasa a ser el único contenido
   que define el alto necesario del slot.                      */
.plg-slot-q {
    position:    absolute;
    top:         3px;
    left:        5px;
    font-size:   0.6rem !important;
    font-weight: 800;
    color:       rgba(96,165,250,.35);
    line-height: 1;
    pointer-events: none;
}

.plg-slot-ref {
    /* Texto principal (español, referencia en fase 1) */
    display:     block;
    width:       100%;
    white-space: nowrap;
    overflow:    hidden;
    font-size:   0.68rem !important;   /* intencionalmente menor que .plg-bank; el banco debe verse más grande */
    font-weight: 600;
    color:       #60a5fa;
    font-style:  italic;
    line-height: 1.15;
    text-align:  center;
}

.plg-en {
    /* Texto principal (inglés) en slot completado */
    display:     block;
    width:       100%;
    white-space: nowrap;
    overflow:    hidden;
    font-size:   1.00rem !important;   /* base más generosa; JS reduce por slot si es necesario */
    font-weight: 700;
    color:       #f1f5f9;
    line-height: 1.15;
    text-align:  center;
}

.plg-es {
    /* Texto secundario (español/traducción) en slot completado */
    display:     block;
    width:       100%;
    white-space: nowrap;
    overflow:    hidden;
    font-size:   0.68rem !important;   /* base; JS reduce si es necesario */
    font-weight: 600;
    color:       #34d399;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align:  center;
}

/* ── Slot vacío (Fase 2) ─────────────────────────────────── */
.plg-slot-empty {
    min-width:     60px;
    height:        46px;       /* coincide con MIN_SLOT_H en JS */
    border:        2px dashed rgba(56,189,248,.22);
    border-radius: 10px;
    background:    rgba(14,116,144,.04);
    box-sizing:    border-box;
    transition:    border-color .3s ease;
}

/* ──────────────────────────────────────────────────────────── */
/* BANCO DE PALABRAS                                             */
/* ──────────────────────────────────────────────────────────── */
.plg-bank {
    flex:                   1;
    min-height:             0;
    overflow:               hidden;   /* por defecto: sin scroll, se ajusta al espacio disponible */
    display:                grid;
    grid-template-columns:  repeat(auto-fill, minmax(84px, 1fr));
    grid-auto-rows:         32px;     /* valor fijo inicial; JS siempre sobreescribe con el valor calculado */
    gap:                    8px;
    padding:                10px;
    background:             rgba(5,8,20,.55);
    border:                 1px solid rgba(96,165,250,.12);
    border-radius:          12px;
    transition:             border-color .3s ease, box-shadow .3s ease;
}
.plg-bank.p2 { border-color: rgba(56,189,248,.12); }

/* Cuando hay más de 9 palabras (clase añadida por JS): se fuerzan
   exactamente 4 columnas en vez de depender del auto-fill (que en
   móvil suele caer en 3). Así 16 palabras entran en una grilla
   compacta de 4×4 sin necesitar scroll, con filas más altas y
   texto más grande que si quedaran repartidas en más filas.      */
.plg-bank.plg-bank-4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Solo cuando hay más de 16 palabras (clase añadida por JS):
   se fija un piso de altura legible por fila y se habilita scroll
   en vez de seguir achicando filas indefinidamente.            */
.plg-bank.plg-bank-scroll {
    overflow-y:                  auto;
    overflow-x:                  hidden;
    -webkit-overflow-scrolling:  touch;
    grid-auto-rows:               minmax(32px, auto);
}

@keyframes plg-bank-shine {
    0%,100% { border-color:rgba(96,165,250,.12); box-shadow:none; }
    35%     { border-color:rgba(96,165,250,.75); box-shadow:inset 0 0 22px rgba(96,165,250,.12),0 0 32px rgba(96,165,250,.38); }
}
@keyframes plg-bank-shine-p2 {
    0%,100% { border-color:rgba(56,189,248,.12); box-shadow:none; }
    35%     { border-color:rgba(56,189,248,.75); box-shadow:inset 0 0 22px rgba(56,189,248,.12),0 0 32px rgba(56,189,248,.38); }
}
.plg-bank.plg-bank-glow    { animation:plg-bank-shine    0.75s ease 3 both; }
.plg-bank.p2.plg-bank-glow { animation:plg-bank-shine-p2 0.75s ease 3 both; }

/* ──────────────────────────────────────────────────────────── */
/* BOTONES DE PALABRA                                            */
/* ──────────────────────────────────────────────────────────── */
.plg-wbtn {
    width:           100%;
    height:          100%;
    min-width:       0;
    min-height:      0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    appearance:        none;
    -webkit-appearance: none;
    background:      linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:          1px solid rgba(96,165,250,.25);
    box-shadow:      0 0 0 1px rgba(96,165,250,.08), 0 0 18px rgba(37,99,235,.12), 0 4px 18px rgba(0,0,0,.35);
    color:           #e2e8f0;
    border-radius:   10px;
    font-size:       1.15rem !important;   /* base generosa; JS reduce sólo si el texto desborda */
    font-weight:     700;
    cursor:          pointer;
    line-height:     1.2;
    padding:         4px 6px;
    box-sizing:      border-box;
    text-align:      center;
    white-space:     nowrap;
    overflow:        hidden;
    transition:      transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plg-wbtn:hover:not(.plg-used) {
    transform:    translateY(-2px);
    border-color: rgba(96,165,250,.52);
    box-shadow:   0 0 0 1px rgba(96,165,250,.16), 0 0 20px rgba(37,99,235,.24), 0 6px 20px rgba(0,0,0,.42);
}
.plg-wbtn:active:not(.plg-used) { transform:scale(0.93); }
.plg-wbtn.p2 { color:#bae6fd; border-color:rgba(56,189,248,.28); box-shadow:0 0 0 1px rgba(56,189,248,.07),0 0 16px rgba(14,165,233,.1),0 4px 16px rgba(0,0,0,.3); }
.plg-wbtn.p2:hover:not(.plg-used) { border-color:rgba(56,189,248,.56); box-shadow:0 0 0 1px rgba(56,189,248,.14),0 0 20px rgba(14,165,233,.24),0 6px 18px rgba(0,0,0,.38); }
.plg-wbtn.plg-used { opacity:.18; pointer-events:none; transform:none !important; box-shadow:none !important; }
/* Fallback para palabras muy largas: si ni al piso absoluto de font-size
   (10px, ver _fixBankText en el JS) entran en una línea, en vez de
   recortarlas con overflow:hidden se permite partir en 2 líneas.
   El JS aplica estos mismos valores inline con !important; esta regla
   queda como documentación / red de seguridad si el JS no llega a correr. */
.plg-wbtn.plg-wbtn-wrap { white-space: normal; word-break: break-word; line-height: 1.05; }

/* Brillo individual de cada botón al iniciar */
@keyframes plg-btn-attract {
    0%,100% { border-color:rgba(96,165,250,.25); transform:translateY(0); }
    40%     { border-color:rgba(96,165,250,.85); box-shadow:0 0 0 3px rgba(96,165,250,.28),0 0 28px rgba(96,165,250,.45),0 4px 18px rgba(0,0,0,.35); transform:translateY(-2px); }
}
@keyframes plg-btn-attract-p2 {
    0%,100% { border-color:rgba(56,189,248,.28); transform:translateY(0); }
    40%     { border-color:rgba(56,189,248,.88); box-shadow:0 0 0 3px rgba(56,189,248,.28),0 0 28px rgba(56,189,248,.48),0 4px 16px rgba(0,0,0,.3); transform:translateY(-2px); }
}
.plg-btn-glow              { animation:plg-btn-attract    0.65s ease; }
.plg-wbtn.p2.plg-btn-glow  { animation-name:plg-btn-attract-p2; }

/* ──────────────────────────────────────────────────────────── */
/* FEEDBACK                                                      */
/* ──────────────────────────────────────────────────────────── */
.plg-fb { min-height:0; display:flex; align-items:center; justify-content:center; text-align:center; flex-shrink:0; padding:0 4px; }
.plg-ok-msg  { font-size:.82rem; font-weight:700; color:#34d399; text-shadow:0 0 14px rgba(52,211,153,.35); }
.plg-err-msg { font-size:.78rem; font-weight:600; color:#f87171; text-shadow:0 0 10px rgba(248,113,113,.25); }
.plg-err-msg em { font-style:normal; font-weight:800; }

/* ──────────────────────────────────────────────────────────── */
/* PANTALLA FINAL                                               */
/* ──────────────────────────────────────────────────────────── */
.plg-end { position:relative; min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 16px; box-sizing:border-box; }
.plg-end-card {
    position:relative; z-index:1; width:100%; max-width:360px;
    background:linear-gradient(135deg,#111827 0%,#172554 40%,#0f172a 100%);
    border:1px solid rgba(96,165,250,.35);
    box-shadow:0 0 0 1px rgba(96,165,250,.1),0 0 50px rgba(37,99,235,.22),0 12px 50px rgba(0,0,0,.55);
    border-radius:22px; padding:44px 28px 36px; text-align:center; overflow:hidden;
    animation:plg-card-in 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes plg-card-in { from{transform:scale(0.88);opacity:0} to{transform:scale(1);opacity:1} }
.plg-end-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%,rgba(99,102,241,.18) 0%,transparent 70%); pointer-events:none; z-index:0; }
.plg-end-emoji { font-size:3.8rem; line-height:1; margin-bottom:18px; display:block; animation:plg-bounce 1.5s ease infinite; position:relative; z-index:1; }
.plg-end-title { font-size:1.45rem; font-weight:800; margin:0 0 10px; background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; position:relative; z-index:1; }
.plg-end-sub   { font-size:.84rem; color:#94a3b8; line-height:1.68; margin:0 0 24px; position:relative; z-index:1; }
.plg-end-sub strong { color:#cbd5e1; }
.plg-stars { display:flex; justify-content:center; gap:8px; margin-bottom:28px; position:relative; z-index:1; }
.plg-star  { font-size:2.1rem; display:inline-block; -webkit-text-fill-color:initial; }
.plg-star.s1 { color:#fbbf24; animation:plg-star-pop .45s cubic-bezier(.34,1.56,.64,1) .10s both; }
.plg-star.s2 { color:#fbbf24; animation:plg-star-pop .45s cubic-bezier(.34,1.56,.64,1) .28s both; }
.plg-star.s3 { color:#fbbf24; animation:plg-star-pop .45s cubic-bezier(.34,1.56,.64,1) .46s both; }
.plg-done-btn { display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,#3730a3,#4f46e5); border:1px solid rgba(99,102,241,.42); box-shadow:0 0 24px rgba(99,102,241,.3),0 4px 16px rgba(0,0,0,.3); color:#e0e7ff; font-weight:700; font-size:.88rem; padding:12px 26px; border-radius:50px; cursor:pointer; transition:all .25s ease; position:relative; z-index:1; }
.plg-done-btn:hover  { transform:translateY(-2px); box-shadow:0 0 34px rgba(99,102,241,.48),0 6px 20px rgba(0,0,0,.35); background:linear-gradient(135deg,#4338ca,#6366f1); }
.plg-done-btn:active { transform:scale(0.97); }

/* ──────────────────────────────────────────────────────────── */
/* PARTÍCULAS                                                   */
/* ──────────────────────────────────────────────────────────── */
.plg-particle { position:absolute; pointer-events:none; animation:plg-particle-up 1.3s ease forwards; z-index:20; }
@keyframes plg-particle-up { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-85px) scale(0);opacity:0} }

/* ──────────────────────────────────────────────────────────── */
/* TARJETA DE ORACIÓN COMPLETADA (karaoke + glow)               */
/* ──────────────────────────────────────────────────────────── */
.plg-sentence-card {
    position:        absolute !important;  /* !important vence a .plg-wrap > *:not(.plg-bg) { position:relative } */
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         200 !important;       /* por encima de slots/banco (z-index:1 forzado) */
    width:           min(92%, 480px);
    max-height:      82%;
    overflow-y:      auto;
    flex-shrink:     0;
    background:      linear-gradient(135deg, #0d1225 0%, #111827 100%);
    border:          1.5px solid rgba(52,211,153,.45);
    border-radius:   18px;
    padding:         20px 22px 18px;
    box-sizing:      border-box;
    display:         flex;
    flex-direction:  column;
    gap:             12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation:       plg-sentence-card-in 0.4s cubic-bezier(.34,1.56,.64,1) both,
                     plg-border-glow 2s ease infinite;
    box-shadow:      0 0 0 1px rgba(52,211,153,.12),
                     0 0 28px rgba(52,211,153,.18),
                     0 10px 36px rgba(0,0,0,.5);
}
/* Animación propia (no la compartida plg-card-in) para no perder el
   centrado por transform:translate(-50%,-50%) durante el "pop" de entrada */
@keyframes plg-sentence-card-in {
    from { transform: translate(-50%, -50%) scale(0.88); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
@keyframes plg-border-glow {
    0%,100% { box-shadow: 0 0 0 1px rgba(52,211,153,.12), 0 0 24px rgba(52,211,153,.16), 0 4px 18px rgba(0,0,0,.4); }
    50%     { box-shadow: 0 0 0 2px rgba(52,211,153,.32), 0 0 42px rgba(52,211,153,.34), 0 4px 18px rgba(0,0,0,.4); }
}
.plg-sentence-label {
    font-size:      .68rem;
    font-weight:    800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          rgba(52,211,153,.6);
    padding-left:   2px;
}
.plg-sentence-en {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px 6px;
    align-items: baseline;
}
.plg-sentence-word {
    font-size:      1.22rem;
    font-weight:    700;
    color:          #cbd5e1;
    border-radius:  6px;
    padding:        2px 5px;
    transition:     color .15s, background .15s, text-shadow .15s;
}
.plg-sentence-word.plg-speaking {
    color:       #ffffff;
    background:  rgba(52,211,153,.22);
    text-shadow: 0 0 12px rgba(52,211,153,.75), 0 0 28px rgba(52,211,153,.4);
}
.plg-sentence-es {
    font-size:   1rem;
    font-weight: 500;
    color:       rgba(148,163,184,.75);
    font-style:  italic;
    line-height: 1.5;
    padding-top: 4px;
    border-top:  1px solid rgba(255,255,255,.05);
}

/* ──────────────────────────────────────────────────────────── */
/* SIN DATOS                                                    */
/* ──────────────────────────────────────────────────────────── */
.plg-no-data { display:flex; align-items:center; justify-content:center; min-height:200px; color:#64748b; font-size:.88rem; text-align:center; padding:2rem; }

/* ──────────────────────────────────────────────────────────── */
/* ANIMACIONES                                                   */
/* ──────────────────────────────────────────────────────────── */
@keyframes plg-pulse-gold {
    0%,100% { box-shadow:0 0 0 2px rgba(251,191,36,.2),0 0 16px rgba(251,191,36,.14); }
    50%     { box-shadow:0 0 0 3px rgba(251,191,36,.45),0 0 28px rgba(251,191,36,.3); }
}
@keyframes plg-pop { 0%{transform:scale(0.78);opacity:.5} 65%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.plg-pop { animation:plg-pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes plg-celebrate { 0%,100%{transform:scale(1)} 45%{transform:scale(1.12)} }
.plg-celebrate { animation:plg-celebrate 0.42s ease; }
@keyframes plg-shake { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-8px)} 36%{transform:translateX(8px)} 54%{transform:translateX(-5px)} 72%{transform:translateX(5px)} 90%{transform:translateX(-2px)} }
.plg-shake { animation:plg-shake 0.52s ease; }
@keyframes plg-bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes plg-star-pop { 0%{transform:scale(0) rotate(-35deg);opacity:0} 80%{transform:scale(1.3) rotate(6deg)} 100%{transform:scale(1) rotate(0);opacity:1} }

/* ──────────────────────────────────────────────────────────── */
/* RESPONSIVE                                                    */
/* ──────────────────────────────────────────────────────────── */
@media (max-width:380px) {
    .plg-wrap           { padding:8px; gap:7px; }
    .plg-top            { padding:7px 10px; }
    .plg-play-btn       { padding:9px 14px; }
    .plg-play-icon-wrap { width:36px; height:36px; }
    .plg-play-label     { font-size:.82rem; }
    .plg-badge          { font-size:.54rem; padding:2px 7px; }
    .plg-hint           { font-size:.72rem; padding:7px 10px; gap:6px; }
    .plg-end-card       { padding:32px 18px 28px; }
    .plg-end-title      { font-size:1.2rem; }
    .plg-end-emoji      { font-size:3rem; }
    .plg-done-btn       { font-size:.82rem; padding:10px 20px; }
    .plg-bank           { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
    .plg-sentence-card  { width:94%; padding:16px 16px 14px; }
    .plg-sentence-word  { font-size:1.05rem; }
    .plg-sentence-es    { font-size:.9rem; }
}
@media (min-width:640px) {
    .plg-wrap           { padding:16px; gap:12px; }
    .plg-play-btn       { padding:13px 24px; }
    .plg-play-icon-wrap { width:48px; height:48px; }
    .plg-play-label     { font-size:1rem; }
    .plg-hint           { font-size:.84rem; }
    .plg-section-label  { font-size:.64rem; }
    .plg-end-card       { padding:52px 42px 44px; }
    .plg-end-title      { font-size:1.6rem; }
    .plg-bank           { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
    .plg-sentence-card  { width:min(85%, 560px); padding:26px 28px 22px; gap:14px; }
    .plg-sentence-label { font-size:.74rem; }
    .plg-sentence-word  { font-size:1.4rem; }
    .plg-sentence-es    { font-size:1.1rem; }
}