/* =====================================================================
   SELLO DEL BAR (js/ui/sello_bar.js): "TRUCACHO / <NOMBRE> / PASA DE NIVEL" estampado en la esquina del cartel de
   nivel superado. Mismo dibujo que el sello de la puerta (css/puerta.css, .tgp-sello), en unidades de pantalla.
   ===================================================================== */
.tg-sello-bar {
    --s: clamp(140px, 15cqw, 230px);
    position: absolute; right: calc(var(--s) * -.32); bottom: calc(var(--s) * -.42); width: var(--s); height: var(--s); z-index: 5;
    opacity: 0; transform: scale(2.6) rotate(-30deg); pointer-events: none; filter: drop-shadow(0 0 2px rgba(120, 10, 5, .35));
}
.tg-sello-bar.on { animation: tgSelloBar .42s cubic-bezier(.5, 0, .3, 1.4) forwards; }
@keyframes tgSelloBar { 0% { opacity: 0; transform: scale(2.6) rotate(-30deg); } 55% { opacity: 1; transform: scale(.92) rotate(-13deg); } 100% { opacity: .94; transform: scale(1) rotate(-14deg); } }
.tg-sello-bar-aro {
    position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
    border: calc(var(--s) * .05) solid #c8261b; box-shadow: inset 0 0 0 calc(var(--s) * .022) rgba(251, 247, 234, .85), inset 0 0 0 calc(var(--s) * .047) #c8261b;
    color: #c8261b; background: rgba(255, 240, 230, .82);
    -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px), radial-gradient(circle, #000 60%, rgba(0, 0, 0, .8));
            mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px), radial-gradient(circle, #000 60%, rgba(0, 0, 0, .8));
}
.tg-sello-bar-arriba, .tg-sello-bar-abajo { font-size: calc(var(--s) * .09); letter-spacing: .08em; line-height: 1.2; }
.tg-sello-bar-nombre {
    font-size: calc(var(--s) * .2); line-height: 1; letter-spacing: .02em; max-width: 84%; margin: calc(var(--s) * .025) 0; padding: calc(var(--s) * .015) 0;
    border-top: calc(var(--s) * .0125) solid #c8261b; border-bottom: calc(var(--s) * .0125) solid #c8261b; word-break: break-word;
}
