/* ScreenInteraction is additive: hosts opt in with .screen-interaction-surface,
   while the owned stage's existing viewport is already a positioned surface. */
.screen-interaction-surface,
.ns-stage__viewport {
    position: relative;
    isolation: isolate;
}

.screen-interaction-surface {
    min-width: 0;
    overflow: hidden;
}

.screen-interaction-layer {
    --screen-interaction-accent: #5eead4;
    --screen-interaction-ink: #ecfeff;
    --screen-interaction-panel: rgba(4, 12, 24, .86);
    position: absolute;
    inset: 0;
    z-index: 8;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--screen-interaction-ink);
    contain: layout paint;
}

.screen-interaction-layer__content {
    position: absolute;
    inset: 0;
    display: grid;
    min-width: 0;
    place-items: center;
}

.screen-interaction-layer__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.screen-interaction-layer__ascii {
    box-sizing: border-box;
    display: block;
    width: min(100%, 76rem);
    max-height: 100%;
    margin: 0;
    padding: clamp(.65rem, 2vw, 1.4rem);
    overflow: hidden;
    color: var(--screen-interaction-accent);
    background: linear-gradient(145deg, rgba(2, 8, 18, .92), rgba(7, 21, 36, .8));
    border: 1px solid color-mix(in srgb, var(--screen-interaction-accent) 34%, transparent);
    border-radius: clamp(.75rem, 2.2vw, 1.35rem);
    box-shadow: inset 0 0 2.5rem rgba(94, 234, 212, .06), 0 1rem 3rem rgba(0, 0, 0, .22);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: clamp(.38rem, 1.15vw, .82rem);
    font-variant-ligatures: none;
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: .01em;
    text-align: center;
    white-space: pre;
}

.screen-interaction-layer__picture {
    display: block;
    width: min(92%, 46rem);
    height: auto;
    max-height: 90%;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: clamp(.75rem, 2vw, 1.25rem);
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .35);
}

.screen-interaction-layer__description {
    align-self: end;
    justify-self: stretch;
    max-width: min(44rem, calc(100% - 1.25rem));
    margin: 0 auto clamp(.6rem, 2vw, 1.15rem);
    padding: .65rem .85rem;
    overflow: hidden;
    color: var(--screen-interaction-ink);
    background: var(--screen-interaction-panel);
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: .22rem solid var(--screen-interaction-accent);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .24);
    font: 600 clamp(.78rem, 1.5vw, .93rem)/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screen-interaction-layer[data-verb="ascii"] .screen-interaction-layer__content,
.screen-interaction-layer[data-verb="picture"] .screen-interaction-layer__content {
    padding: clamp(.45rem, 1.5vw, 1rem);
}

[data-screen-interaction-state="running"] .screen-interaction-layer {
    outline: 1px solid color-mix(in srgb, var(--screen-interaction-accent) 18%, transparent);
    outline-offset: -1px;
}

@media (max-width: 480px) {
    .screen-interaction-layer__ascii {
        width: calc(100% - .65rem);
        padding: .5rem;
        border-radius: .7rem;
        font-size: clamp(.31rem, 1.7vw, .56rem);
        line-height: 1.02;
    }

    .screen-interaction-layer__picture {
        width: calc(100% - .75rem);
        max-height: calc(100% - .75rem);
        border-radius: .7rem;
    }

    .screen-interaction-layer__description {
        max-width: calc(100% - .75rem);
        margin-bottom: .4rem;
        padding: .5rem .65rem;
        border-radius: .6rem;
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .screen-interaction-layer,
    .screen-interaction-layer * {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (prefers-contrast: more) {
    .screen-interaction-layer {
        --screen-interaction-accent: #7fffea;
        --screen-interaction-ink: #ffffff;
        --screen-interaction-panel: #020812;
    }

    .screen-interaction-layer__ascii,
    .screen-interaction-layer__picture,
    .screen-interaction-layer__description {
        border-width: 2px;
        box-shadow: none;
    }
}

@media (forced-colors: active) {
    .screen-interaction-layer {
        --screen-interaction-accent: Highlight;
        --screen-interaction-ink: CanvasText;
        --screen-interaction-panel: Canvas;
        forced-color-adjust: auto;
    }

    .screen-interaction-layer__ascii,
    .screen-interaction-layer__picture,
    .screen-interaction-layer__description {
        border: 2px solid CanvasText;
        box-shadow: none;
    }
}