/* =====================================================================
   NIVEL SUPERADO (js/ui/nivel_superado.js): cartel de neón de bar, tiza y sello del bar "pasa de nivel".
   ===================================================================== */
.tg-nivel-ok {
    position: fixed; inset: 0; z-index: 9001;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.2cqh, 32px);
    padding: 16px; box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 42%, rgba(30, 14, 4, .55), rgba(4, 2, 0, .92));
    opacity: 0; transition: opacity .35s ease;
}
.tg-nivel-ok.visible { opacity: 1; }

.tg-nok-cartel {
    text-align: center; font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif; line-height: 1;
    padding: clamp(16px, 3cqh, 34px) clamp(22px, 4cqw, 64px); border-radius: 28px; border: 5px solid #3a2a12;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px), linear-gradient(180deg, #1c120a, #0d0804);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), 0 14px 40px rgba(0, 0, 0, .8);
    transform: scale(.9); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), border-color .2s, box-shadow .2s; position: relative;
}
.visible .tg-nok-cartel { transform: scale(1); }
.tg-nok-cartel.marco-on { border-color: #ffd23f; box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), inset 0 0 12px rgba(255, 190, 40, .5), 0 0 14px #ffb300, 0 0 36px rgba(255, 150, 0, .6), 0 14px 40px rgba(0, 0, 0, .8); }

/* letrero verde del nivel */
.tg-nok-sub { font-size: clamp(16px, 2.3cqw, 34px); letter-spacing: .3em; margin-bottom: .3em; color: #2b2017; transition: color .15s, text-shadow .15s; }
.tg-nok-sub.on { color: #d8ffe4; text-shadow: 0 0 4px #fff, 0 0 10px #4dff8a, 0 0 24px #17c45a, 0 0 46px #0b8a3a; animation: tgNokPrende .38s steps(1) both; }

/* título en tubo dorado */
.tg-nok-titulo { font-size: clamp(44px, 8.2cqw, 132px); letter-spacing: .03em; white-space: nowrap; }
.tg-nok-titulo span { display: inline-block; color: #2b2017; text-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.tg-nok-titulo span.on {
    color: #fff6cc; text-shadow: 0 0 3px #fff, 0 0 9px #ffe066, 0 0 20px #ffb300, 0 0 42px #ff8c00, 0 0 80px #ff6a00;
    animation: tgNokPrende .38s steps(1) both;
}
@keyframes tgNokPrende { 0% { opacity: .2; } 15% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .55; } 75%, 100% { opacity: 1; } }
.festejo .tg-nok-cartel { animation: tgNokLate .55s ease-in-out infinite alternate; }
@keyframes tgNokLate { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.03); filter: brightness(1.22); } }

/* la serie en tiza */
.tg-nok-tiza {
    font-family: 'Segoe Print', 'Comic Sans MS', 'Bradley Hand', cursive; font-size: clamp(18px, 2.4cqw, 34px);
    color: rgba(245, 242, 230, .92); text-shadow: 0 0 1px rgba(255, 255, 255, .6), 1px 1px 0 rgba(0, 0, 0, .5);
    clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(28);
}
.tg-nok-tiza.on { clip-path: inset(0 0 0 0); }


/* botón (mismo que el del chico) */
.tg-nok-boton { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.5, .5, 1), filter .15s; pointer-events: none; }
.pie-on .tg-nok-boton { opacity: 1; transform: none; pointer-events: auto; }
.pie-on .tg-nok-boton:hover { transform: translateY(-3px) scale(1.05); }