@import url(fonts/monospec/css/mono-spec.css);
@import url(fonts/univers/univers.css);

:root {
    color-scheme: dark;
    --background: #07111f;
    --surface: rgb(7 17 31 / 82%);
    --surface-strong: #101b2e;
    --line: rgb(255 234 254 / 0%);
    --text: #f8fafc;
    --muted: #b6c3d4;
    --navy: #0d1b2e; /* stub: active button text on white — tune visually */
    --accent: #fbbf24;
    --focus-ring: #fbbf24;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--background);
}

body {
    min-height: 100vh;
    overflow: hidden;
}

button {
    font: inherit;
}

button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.kiosk-shell {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;

    .scene-layer,
    .dom-layer {
        position: absolute;
        inset: 0;
    }

    .scene-layer {
        z-index: -1;
    }

    .scene-canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    .content-mount,
    .interaction-mount,
    .effects-mount,
    .logo-mount,
    .labels-mount {
        position: absolute;
        inset: 0 auto auto 0;

        height: 100%;
        width: 100%;
        /* Full-screen mounts are click-transparent; interactive widgets
           inside each layer (.label-text, .contentContainer, ...) opt back
           in individually, so layers never block each other. */
        pointer-events: none;
    }

    .logo-mount {
        display: flex;
        align-items: flex-end;
        padding: 2rem;

        img {
            height: 6em;
            width: auto;
        }
    }

    .interaction-layer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 5rem;
        padding: 1rem clamp(1.5rem, 4vw, 3rem);
        background: linear-gradient(180deg, transparent, rgb(7 17 31 / 92%));
        pointer-events: auto;
    }

    .interaction-button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.75rem 1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--text);
        background: var(--surface);
        cursor: pointer;
        transition: transform 200ms ease-out, background-color 200ms ease-out;

        &:hover {
            transform: translateY(-2px);
            background: var(--surface-strong);
        }
    }

    .interaction-status {
        color: var(--muted);
        font-size: 0.875rem;
    }

    /* Decorative CRT dressing. ::before stacks the scanline pattern and
       vignette into one static background that rasterizes exactly once;
       the sweep band is the only animated element (gsap, compositor-only
       transform). gsap parks it above the viewport on first paint (see
       dom-effects.mjs) — no baked CSS offset, so the y tween owns the
       whole travel distance. */
    .effects-layer {
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(0deg, rgb(0 0 0 / 9%) 0 2px, transparent 2px 3px),
                repeating-linear-gradient(90deg, rgb(0 0 0 / 2%) 0 1px, transparent 1px 6px),
                radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 38%));
            pointer-events: none;
        }

        .effects-sweep {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 12vh; /* overridden by effects.scanline.sweep.band */
            background: linear-gradient(180deg, transparent, rgb(0 0 0 / 25%) 45% 55%, transparent);
            pointer-events: none;
            will-change: transform;
        }
    }

    .runtime-status {
        position: fixed;
        inset: 1rem 1rem auto auto;
        z-index: 2;
        color: var(--muted);
        font-size: 0.75rem;

        &[data-state='error'] {
            color: #fecaca;
        }
    }

    @media (max-width: 44rem) {
        min-height: 100svh;

        .interaction-layer {
            flex-wrap: wrap;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .interaction-button {
            transition: none;
        }
    }
}

@media (max-width: 44rem) {
    body {
        overflow: auto;
    }
}