/* Processing overlay styles - lightweight, SVG + CSS only, theme-aligned */

#processing-overlay {
    --accent: var(--processing-accent);
    --glow: 0 0 18px var(--processing-accent-glow);
    --text: var(--text-on-dark);
    --muted: var(--text-muted);
    --blinkDur: 2.8s;
    --blinkDelay: 1.2s;
    --bodyDur: 4.6s;
    --lookDur: 6.8s;
    --tiltDur: 6s;
    --writeDur: 5.6s;

    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 50% 20%, var(--processing-accent-subtle), transparent 60%),
        linear-gradient(180deg, rgb(10 16 28 / 94%), rgb(4 8 20 / 94%));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: var(--text);
    font-family:
        "Orbitron",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    backdrop-filter: blur(3px);
    padding: 4vh 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#processing-overlay.hidden {
    display: none;
}

@media print {
    #processing-overlay {
        display: none !important;
    }
}

.processing-wrap {
    width: min(860px, 92vw);
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
    justify-items: center;
    text-align: center;
    max-height: calc(100vh - 8vh);
    max-height: calc(100dvh - 8vh);
}

/* Subtle grid scanlines for futuristic vibe */
.processing-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(transparent 31px, var(--processing-accent-subtle) 32px) top left / 100% 32px repeat-y,
        linear-gradient(90deg, transparent 31px, var(--processing-accent-subtle) 32px) top left / 32px 100% repeat-x;
    pointer-events: none;
    mask-image: radial-gradient(800px 300px at 50% 50%, rgba(0, 0, 0, 0.7), transparent 80%);
}

/* SVG container */
.robot-stage {
    width: min(560px, 86vw);
    aspect-ratio: 1.6 / 1;
    border: 1px solid var(--processing-accent-border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--glow);
    background:
        radial-gradient(240px 140px at 70% 80%, var(--processing-accent-subtle), transparent 65%),
        linear-gradient(180deg, rgb(20 30 40 / 35%), rgb(10 16 28 / 35%));
}

/* Head tilt oscillation */
@keyframes overlayRobotTilt {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    35% {
        transform: translateY(1px) rotate(-4deg);
    }

    70% {
        transform: translateY(-1px) rotate(3deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Eye blink */
@keyframes overlayRobotBlink {
    0%,
    90%,
    100% {
        transform: scaleY(1);
    }

    92% {
        transform: scaleY(0.22);
    }

    94% {
        transform: scaleY(1);
    }
}

@keyframes overlayEyeTrack {
    0%,
    16%,
    100% {
        transform: translate(0, 0);
    }

    24%,
    40% {
        transform: translate(1.5px, 0.7px);
    }

    48%,
    65% {
        transform: translate(-1.2px, -0.3px);
    }

    75%,
    88% {
        transform: translate(0.5px, 0.9px);
    }
}

@keyframes overlayBodyMorph {
    0%,
    100% {
        transform: translateY(0) scale(1, 1);
    }

    50% {
        transform: translateY(1px) scale(1.018, 0.97);
    }
}

@keyframes overlayWrite {
    0%,
    100% {
        transform: rotate(-3deg);
    }

    22% {
        transform: rotate(2deg);
    }

    28% {
        transform: rotate(8deg);
    }

    48% {
        transform: rotate(13deg);
    }

    54% {
        transform: rotate(18deg);
    }

    74% {
        transform: rotate(24deg);
    }

    84% {
        transform: rotate(-12deg);
    }
}

@keyframes overlayHandFlex {
    0%,
    24%,
    52%,
    78%,
    100% {
        transform: rotate(0deg);
    }

    12%,
    39%,
    66% {
        transform: rotate(5deg);
    }
}

@keyframes overlayPaperReact {
    0%,
    100% {
        filter: drop-shadow(0 0 0 transparent);
        transform: translateY(0) rotate(0deg);
    }

    24%,
    52%,
    78% {
        filter: drop-shadow(0 0 6px var(--processing-accent-glow));
        transform: translateY(-1px) rotate(0.35deg);
    }
}

@keyframes overlayWriteLineOne {
    0% {
        opacity: 0;
        stroke-dashoffset: 1;
    }

    7% {
        opacity: 0.9;
    }

    24%,
    80% {
        opacity: 0.9;
        stroke-dashoffset: 0;
    }

    94%,
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes overlayWriteLineTwo {
    0%,
    27% {
        opacity: 0;
        stroke-dashoffset: 1;
    }

    34% {
        opacity: 0.9;
    }

    51%,
    80% {
        opacity: 0.9;
        stroke-dashoffset: 0;
    }

    94%,
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes overlayWriteLineThree {
    0%,
    54% {
        opacity: 0;
        stroke-dashoffset: 1;
    }

    61% {
        opacity: 0.9;
    }

    78%,
    80% {
        opacity: 0.9;
        stroke-dashoffset: 0;
    }

    94%,
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes overlayStatusPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.86);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.12);
    }
}

@keyframes overlayMeterScan {
    0%,
    100% {
        transform: scaleX(0.35);
    }

    50% {
        transform: scaleX(1);
    }
}

@keyframes overlayAntennaPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 2px var(--processing-accent-glow));
        transform: scale(0.9);
    }

    50% {
        filter: drop-shadow(0 0 7px var(--processing-accent));
        transform: scale(1.25);
    }
}

@keyframes overlayShadowPulse {
    0%,
    100% {
        opacity: 0.09;
        transform: scaleX(0.94);
    }

    50% {
        opacity: 0.16;
        transform: scaleX(1);
    }
}

/* SVG parts animated */
.robot-body {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: overlayBodyMorph var(--bodyDur) ease-in-out infinite;
}

.robot-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: overlayShadowPulse var(--bodyDur) ease-in-out infinite;
}

.robot-head {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: overlayRobotTilt var(--tiltDur) ease-in-out infinite;
}

.robot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: overlayRobotBlink var(--blinkDur) linear infinite;
    animation-delay: var(--blinkDelay);
}

.robot-pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: overlayEyeTrack var(--lookDur) ease-in-out infinite;
}

.robot-arm {
    transform-box: fill-box;
    transform-origin: left center;
    animation: overlayWrite var(--writeDur) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.robot-hand {
    transform-box: fill-box;
    transform-origin: left center;
    animation: overlayHandFlex var(--writeDur) ease-in-out infinite;
}

.robot-paper {
    transform-box: fill-box;
    transform-origin: center;
    animation: overlayPaperReact var(--writeDur) ease-in-out infinite;
}

.paper-ink {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.paper-ink-one {
    animation: overlayWriteLineOne var(--writeDur) ease-in-out infinite;
}

.paper-ink-two {
    animation: overlayWriteLineTwo var(--writeDur) ease-in-out infinite;
}

.paper-ink-three {
    animation: overlayWriteLineThree var(--writeDur) ease-in-out infinite;
}

.robot-status-light,
.robot-antenna-tip {
    transform-box: fill-box;
    transform-origin: center;
}

.robot-antenna-tip {
    animation: overlayAntennaPulse 2.8s ease-in-out infinite;
}

.robot-status-light {
    animation: overlayStatusPulse 2.4s ease-in-out infinite;
}

.status-light-two {
    animation-delay: -1.2s;
}

.robot-meter {
    transform-box: fill-box;
    transform-origin: left center;
    animation: overlayMeterScan 3.2s ease-in-out infinite;
}

/* Messaging */
.processing-title {
    margin: 6px 0 2px 0;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    text-shadow: 0 0 6px var(--processing-accent-border);
}

.processing-game-url {
    margin: 6px 0;
    color: var(--accent);
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.processing-sub {
    margin: 0;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.processing-elapsed {
    margin: 2px 0 0 0;
    color: var(--accent);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.processing-micro {
    margin: 8px 0 0 0;
    color: var(--accent);
    letter-spacing: 0.05em;
    font-size: 0.92rem;
    text-shadow: 0 0 8px var(--processing-accent-border);
}

.queue-pos {
    margin: 6px 0 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Inline actions */
.overlay-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.overlay-btn {
    --action-radius: 8px;

    gap: 0.4rem;
    padding: 6px 12px;
    letter-spacing: 0.06em;
}

.overlay-btn-icon {
    position: relative;
    display: inline-grid;
    width: 1.15em;
    height: 1.15em;
    place-items: center;
    border-radius: 50%;
    background: rgb(92 15 54 / 30%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 24%),
        0 1px 3px rgb(47 5 20 / 34%);
}

.overlay-btn-icon::before,
.overlay-btn-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68%;
    height: 2px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 2px rgb(47 5 20 / 70%);
    content: "";
}

.overlay-btn-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.overlay-btn-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .robot-head,
    .robot-eye,
    .robot-pupil,
    .robot-body,
    .robot-shadow,
    .robot-arm,
    .robot-hand,
    .robot-paper,
    .paper-ink,
    .robot-status-light,
    .robot-meter,
    .robot-antenna-tip {
        animation: none !important;
    }

    .paper-ink {
        opacity: 0.75;
        stroke-dashoffset: 0;
    }
}