/* Maintenance screen — V2 paper note pinned to the desktop. */

#s-maintenance {
    --maint-magenta: var(--hot);
    --maint-cream: var(--cream);
    --maint-yellow: #ffd83d;
    --maint-pink: #ff4fa3;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    overflow: hidden;
    font-family: var(--font-body);
}

.maint-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 0, 12, .35), rgba(20, 0, 12, .35)),
        linear-gradient(180deg, #b8e4f2 0%, #d8f0f7 40%, #ffd0e2 100%);
}

.maint-sparkle {
    position: absolute;
    color: var(--maint-yellow);
    font-size: 22px;
    text-shadow: 1.5px 1.5px 0 var(--dark);
    animation: sparkle 2s infinite;
    pointer-events: none;
}
.maint-sparkle.s1 { top: 12%;  left: 14%; }
.maint-sparkle.s2 { top: 10%;  right: 12%; color: var(--maint-pink); animation-delay: .3s; }
.maint-sparkle.s3 { bottom: 14%; left: 10%; animation-delay: .6s; }
.maint-sparkle.s4 { bottom: 12%; right: 12%; color: var(--maint-pink); animation-delay: .9s; }
.maint-sparkle.s5 { top: 8%;   left: 50%; animation-delay: 1.2s; }

.maint-twine {
    position: absolute;
    top: 0;
    width: 2px;
    background: var(--dark);
    pointer-events: none;
}
.maint-twine-l { left: 30%; height: 90px; }
.maint-twine-r { right: 30%; height: 110px; }

.maint-paper {
    position: relative;
    width: min(720px, calc(100% - var(--space-6)));
    background: var(--maint-cream);
    border: 6px solid var(--dark);
    border-radius: 14px;
    box-shadow: 0 10px 0 var(--dark), 0 18px 30px rgba(0, 0, 0, .25);
    padding: 28px 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(26, 26, 26, .06) 28px 29px);
    transform: rotate(-1.5deg);
    animation: wobble 5s ease-in-out infinite;
}

.maint-tape {
    position: absolute;
    width: 80px;
    height: 28px;
    border: 2.5px solid var(--dark);
    opacity: .95;
}
.maint-tape-l { top: -16px; left: 60px;  background: var(--maint-yellow); transform: rotate(-12deg); }
.maint-tape-r { top: -18px; right: 80px; background: var(--maint-pink);   transform: rotate(8deg); }

.maint-badge {
    background: var(--maint-magenta);
    color: #fff;
    border: 2.5px solid var(--dark);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-display);
    font-size: 9px;
    box-shadow: 0 2px 0 var(--dark);
    letter-spacing: .5px;
}

.maint-title { text-align: center; line-height: 1; }
.maint-title-1,
.maint-title-2 {
    display: block;
    font-family: var(--font-display);
    color: var(--maint-magenta);
    text-shadow: 2px 2px 0 var(--dark);
    letter-spacing: .5px;
}
.maint-title-1 { font-size: 42px; }
.maint-title-2 { font-size: 64px; margin-top: 6px; }

.maint-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0;
}
.maint-alien {
    width: 90px;
    height: 90px;
    object-fit: contain;
    image-rendering: pixelated;
    animation: bob 2.4s ease-in-out infinite;
}
.maint-text {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #3a1a25;
    max-width: 320px;
    line-height: 1.5;
}
.maint-text strong { color: var(--maint-magenta); }

.maint-foot {
    margin: 0;
    font-family: var(--font-display);
    font-size: 8px;
    color: #5c3b4a;
    text-align: center;
    line-height: 1.6;
}

.maint-sign {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 4px;
}
.maint-sig {
    font-style: italic;
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    transform: rotate(-4deg);
}
.maint-stamp {
    font-family: var(--font-display);
    font-size: 8px;
    color: #5c3b4a;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .maint-paper { padding: 22px 20px; gap: 10px; }
    .maint-title-1 { font-size: 28px; }
    .maint-title-2 { font-size: 44px; }
    .maint-body { flex-direction: column; gap: 8px; }
    .maint-alien { width: 70px; height: 70px; }
    .maint-text { font-size: 14px; text-align: center; }
    .maint-twine-l, .maint-twine-r { display: none; }
}