#mant-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    animation: mant-fadein .6s ease both;
}
@keyframes mant-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#mant-screen.hidden {
    display: none;
}

.mant-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    backdrop-filter: blur(12px);
    animation: mant-slideup .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mant-slideup {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.mant-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #C4943A, #D2691E);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: mant-float 3s ease-in-out infinite;
    font-size: 40px;
}
@keyframes mant-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.mant-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.mant-badge {
    display: inline-block;
    background: rgba(210,105,30,.25);
    color: #f5a060;
    border: 1px solid rgba(210,105,30,.4);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 20px;
}

.mant-msg {
    color: rgba(255,255,255,.75);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 28px;
}

.mant-horario {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 28px;
    display: none;
}
.mant-horario.visible { display: block; }
.mant-horario p {
    color: rgba(255,255,255,.6);
    font-size: 0.82rem;
    margin: 0 0 4px;
}
.mant-horario strong {
    color: #fff;
    font-size: 1.1rem;
}

.mant-countdown {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}
.mant-countdown-item {
    text-align: center;
}
.mant-countdown-num {
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 56px;
    display: block;
    font-family: monospace;
}
.mant-countdown-label {
    color: rgba(255,255,255,.5);
    font-size: 0.7rem;
    margin-top: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.mant-footer {
    color: rgba(255,255,255,.35);
    font-size: 0.75rem;
    margin-top: 8px;
}

/* Spinner de actividad */
.mant-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: #D2691E;
    border-radius: 50%;
    animation: mant-spin 1s linear infinite;
    margin: 0 auto 20px;
}
@keyframes mant-spin {
    to { transform: rotate(360deg); }
}