@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Courses/CourseGrid.razor.rz.scp.css */
/* /Components/Games/AgentAvatar.razor.rz.scp.css */
/* ============================================================
   AgentAvatar.razor.css
   Sci-fi viewer frame for agent video / portrait display.
   ============================================================ */

/* ── Outer container ────────────────────────────────────────── */
.agent-avatar[b-sedk0ix5ok] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

/* ── Portrait wrapper ───────────────────────────────────────── */
.agent-portrait[b-sedk0ix5ok] {
    position: relative;
    width: clamp(120px, 14vw, 200px);
    height: clamp(180px, 21vw, 300px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   SCI-FI VIEWER FRAME
   A screen-within-a-screen aesthetic — dark panel with
   corner brackets, scan lines, and a live status indicator.
   ════════════════════════════════════════════════════════════ */

.viewer-frame[b-sedk0ix5ok] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    /* Inset panel — deep space dark */
    background: rgba(2, 6, 18, 0.96);
    /* Outer border — agent accent colour */
    border: 1px solid var(--agent-color, rgba(200, 180, 120, 0.35));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.6), 0 0 18px var(--agent-glow, rgba(200, 180, 120, 0.2));
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

    /* Active (speaking) state — brighter border + stronger glow */
    .viewer-frame.frame-active[b-sedk0ix5ok] {
        border-color: var(--agent-color, rgba(200, 180, 120, 0.8));
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 32px var(--agent-glow, rgba(200, 180, 120, 0.4)), 0 0 60px var(--agent-glow, rgba(200, 180, 120, 0.15));
    }

/* ── Corner bracket accents ─────────────────────────────────── */
/* Four absolute-positioned divs, each showing two sides       */
.viewer-corner[b-sedk0ix5ok] {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--agent-color, rgba(200, 180, 120, 0.7));
    border-style: solid;
    z-index: 4;
    transition: border-color 0.4s ease;
}

    .viewer-corner.tl[b-sedk0ix5ok] {
        top: 4px;
        left: 4px;
        border-width: 1.5px 0 0 1.5px;
        border-radius: 2px 0 0 0;
    }

    .viewer-corner.tr[b-sedk0ix5ok] {
        top: 4px;
        right: 4px;
        border-width: 1.5px 1.5px 0 0;
        border-radius: 0 2px 0 0;
    }

    .viewer-corner.bl[b-sedk0ix5ok] {
        bottom: 24px;
        left: 4px; /* leave room for status strip */
        border-width: 0 0 1.5px 1.5px;
        border-radius: 0 0 0 2px;
    }

    .viewer-corner.br[b-sedk0ix5ok] {
        bottom: 24px;
        right: 4px;
        border-width: 0 1.5px 1.5px 0;
        border-radius: 0 0 2px 0;
    }

/* ── Scan-line overlay ──────────────────────────────────────── */
.viewer-scanlines[b-sedk0ix5ok] {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.10) 2px, rgba(0, 0, 0, 0.10) 3px );
    pointer-events: none;
}

/* ── Noise / static overlay ─────────────────────────────────── */
/* Visible on idle; fades when a video is playing              */
.viewer-noise[b-sedk0ix5ok] {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
    transition: opacity 0.5s ease;
    animation: noiseDrift-b-sedk0ix5ok 0.15s steps(1) infinite;
}

    .viewer-noise.noise-hidden[b-sedk0ix5ok] {
        opacity: 0;
    }

@keyframes noiseDrift-b-sedk0ix5ok {
    0% {
        background-position: 0 0;
    }

    25% {
        background-position: -30px 10px;
    }

    50% {
        background-position: 20px -15px;
    }

    75% {
        background-position: -10px 25px;
    }

    100% {
        background-position: 0 0;
    }
}

/* ── Status indicator strip ─────────────────────────────────── */
/* Sits at the very bottom of the viewer frame                 */
.viewer-status[b-sedk0ix5ok] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    border-top: 1px solid var(--agent-color, rgba(200, 180, 120, 0.18));
}

.status-dot[b-sedk0ix5ok] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(200, 180, 120, 0.25);
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    .status-dot.status-live[b-sedk0ix5ok] {
        background: var(--agent-color, rgba(200, 180, 120, 0.9));
        box-shadow: 0 0 6px 2px var(--agent-glow, rgba(200, 180, 120, 0.5));
        animation: liveBlip-b-sedk0ix5ok 1.1s ease-in-out infinite;
    }

@keyframes liveBlip-b-sedk0ix5ok {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.status-label[b-sedk0ix5ok] {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.18em;
    color: var(--agent-color, rgba(200, 180, 120, 0.55));
    text-transform: uppercase;
    line-height: 1;
}

/* ── Video element ──────────────────────────────────────────── */
.agent-video[b-sedk0ix5ok] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100% - 20px); /* leave room for status strip */
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Static image fallback ──────────────────────────────────── */
.agent-img[b-sedk0ix5ok] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100% - 20px);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 0 18px var(--agent-glow));
    transition: filter 0.4s ease;
}

/* ── Glow halo (behind video/image) ─────────────────────────── */
.agent-halo[b-sedk0ix5ok] {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center bottom, var(--agent-glow) 0%, transparent 70%);
    opacity: 0.35;
    animation: haloPulse-b-sedk0ix5ok 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes haloPulse-b-sedk0ix5ok {
    0%, 100% {
        opacity: 0.25;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.06);
    }
}

/* ── Idle / speaking animations ─────────────────────────────── */
/* Applied to both <video> and <img> via shared class names     */

.idle-breathe[b-sedk0ix5ok] {
    transform-origin: center bottom;
    animation: agentBreathe-b-sedk0ix5ok 4s ease-in-out infinite;
}

@keyframes agentBreathe-b-sedk0ix5ok {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.006);
    }
}

.speaking-breathe[b-sedk0ix5ok] {
    transform-origin: center bottom;
    animation: agentSpeaking-b-sedk0ix5ok 2.2s ease-in-out infinite;
}

@keyframes agentSpeaking-b-sedk0ix5ok {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform: translateY(-2px) scale(1.004);
    }

    75% {
        transform: translateY(-4px) scale(1.008);
    }
}

/* ── Entrance / exit animations ─────────────────────────────── */
.agent-avatar.enter-left[b-sedk0ix5ok] {
    animation: agentEnterLeft-b-sedk0ix5ok 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.agent-avatar.enter-right[b-sedk0ix5ok] {
    animation: agentEnterRight-b-sedk0ix5ok 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.agent-avatar.exit-left[b-sedk0ix5ok] {
    animation: agentExitLeft-b-sedk0ix5ok 0.5s ease-in forwards;
}

.agent-avatar.exit-right[b-sedk0ix5ok] {
    animation: agentExitRight-b-sedk0ix5ok 0.5s ease-in forwards;
}

@keyframes agentEnterLeft-b-sedk0ix5ok {
    from {
        opacity: 0;
        transform: translateX(-50px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes agentEnterRight-b-sedk0ix5ok {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes agentExitLeft-b-sedk0ix5ok {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50px) scale(0.94);
    }
}

@keyframes agentExitRight-b-sedk0ix5ok {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(50px) scale(0.94);
    }
}

/* ── Agent name / rank labels ───────────────────────────────── */
.agent-name[b-sedk0ix5ok] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.82rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--agent-color);
    text-align: center;
    filter: drop-shadow(0 0 6px var(--agent-glow));
    padding-right: 0.35em;
}

.agent-rank[b-sedk0ix5ok] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.5rem, 0.85vw, 0.68rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.48);
    text-align: center;
    padding-right: 0.22em;
}

/* ── Speaking indicator dot ─────────────────────────────────── */
.agent-speaking-dot[b-sedk0ix5ok] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--agent-color);
    opacity: 0;
    box-shadow: 0 0 8px 3px var(--agent-glow);
    transition: opacity 0.3s ease;
}

.agent-avatar.is-speaking .agent-speaking-dot[b-sedk0ix5ok] {
    animation: speakingDot-b-sedk0ix5ok 0.55s ease-in-out infinite;
}

@keyframes speakingDot-b-sedk0ix5ok {
    0%, 100% {
        opacity: 0.25;
        transform: scale(1);
    }

    50% {
        opacity: 1.0;
        transform: scale(1.5);
    }
}

/* ── Hover ──────────────────────────────────────────────────── */
.agent-avatar:hover .viewer-frame[b-sedk0ix5ok] {
    border-color: var(--agent-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 28px var(--agent-glow), 0 0 50px var(--agent-glow);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .agent-portrait[b-sedk0ix5ok] {
        width: clamp(90px, 28vw, 140px);
        height: clamp(135px, 42vw, 210px);
    }
}

@media (max-width: 440px) {
    .agent-portrait[b-sedk0ix5ok] {
        width: clamp(70px, 20vw, 100px);
        height: clamp(105px, 30vw, 150px);
    }

    .agent-name[b-sedk0ix5ok],
    .agent-rank[b-sedk0ix5ok] {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
    }

    .viewer-status[b-sedk0ix5ok] {
        height: 16px;
    }

    .status-label[b-sedk0ix5ok] {
        font-size: 0.44rem;
    }
}
/* /Components/Games/AgentDialogue.razor.rz.scp.css */
/* ============================================================
   AgentDialogue.razor.css
   Typewriter dialogue panel for Agent VEGA and ORION.
   ============================================================ */

/* ── Outer container ────────────────────────────────────────── */
.agent-dialogue[b-sfe53yau7z] {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    pointer-events: all;
}

/* ── Agent row — portraits left and right, text centre ──────── */
.agent-scene[b-sfe53yau7z] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Inactive agent dims slightly ───────────────────────────── */
.agent-slot[b-sfe53yau7z] {
    transition: opacity 0.4s ease, filter 0.4s ease;
    flex-shrink: 0;
}

.agent-slot.inactive[b-sfe53yau7z] {
    opacity: 0.45;
    filter: brightness(0.7) saturate(0.6);
}

.agent-slot.active[b-sfe53yau7z] {
    opacity: 1;
    filter: none;
}

/* ── Dialogue box ───────────────────────────────────────────── */
.dialogue-box[b-sfe53yau7z] {
    position: relative;
    flex: 1;
    min-height: 110px;
    padding: 1.1rem 1.4rem 2.6rem; /* increase bottom padding to clear the prompt */
    background: rgba(4, 8, 20, 0.82);
    border: 1px solid var(--speaker-color, rgba(200, 180, 120, 0.25));
    border-radius: 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.3);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.dialogue-box:hover[b-sfe53yau7z] {
    border-color: var(--speaker-color, rgba(200, 180, 120, 0.45));
}

/* Corner accents on the dialogue box */
.dialogue-box[b-sfe53yau7z]::before,
.dialogue-box[b-sfe53yau7z]::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--speaker-color, rgba(200, 180, 120, 0.4));
    border-style: solid;
    opacity: 0.6;
}

.dialogue-box[b-sfe53yau7z]::before {
    top: -1px;
    left: -1px;
    border-width: 1.5px 0 0 1.5px;
    border-radius: 2px 0 0 0;
}

.dialogue-box[b-sfe53yau7z]::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 1.5px 1.5px 0;
    border-radius: 0 0 2px 0;
}

/* ── Speaker name inside box ────────────────────────────────── */
.dialogue-speaker[b-sfe53yau7z] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--speaker-color, rgba(200, 180, 120, 0.8));
    margin-bottom: 0.5rem;
    padding-right: 0.35em;
}

/* ── Dialogue text ──────────────────────────────────────────── */
.dialogue-text[b-sfe53yau7z] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.75rem, 1.6vw, 1rem);
    line-height: 1.7;
    color: rgba(230, 215, 185, 0.92);
    letter-spacing: 0.04em;
    min-height: 2.8em;
}

/* ── Typewriter cursor ──────────────────────────────────────── */
.dialogue-cursor[b-sfe53yau7z] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--speaker-color, rgba(200, 180, 120, 0.8));
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink-b-sfe53yau7z 0.7s ease-in-out infinite;
}

.dialogue-cursor.hidden[b-sfe53yau7z] {
    opacity: 0;
}

@keyframes cursorBlink-b-sfe53yau7z {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Continue prompt ────────────────────────────────────────── */
.dialogue-continue[b-sfe53yau7z] {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--speaker-color, rgba(200, 180, 120, 0.5));
    animation: continuePulse-b-sfe53yau7z 1.4s ease-in-out infinite;
    pointer-events: none;
    padding-right: 0.3em;
}

@keyframes continuePulse-b-sfe53yau7z {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.9; }
}

/* ── Skip button ────────────────────────────────────────────── */
.dialogue-skip[b-sfe53yau7z] {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.3);
    cursor: pointer;
    transition: color 0.2s ease;
    align-self: flex-end;
    padding-right: 0.3em;
    user-select: none;
}

.dialogue-skip:hover[b-sfe53yau7z] {
    color: rgba(200, 180, 120, 0.75);
}

/* ── Progress dots ──────────────────────────────────────────── */
.dialogue-progress[b-sfe53yau7z] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

.progress-dot[b-sfe53yau7z] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(200, 180, 120, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.progress-dot.done[b-sfe53yau7z] {
    background: rgba(200, 180, 120, 0.5);
}

.progress-dot.current[b-sfe53yau7z] {
    background: var(--speaker-color, rgba(200, 180, 120, 0.9));
    transform: scale(1.4);
}

/* ── Entrance animation ─────────────────────────────────────── */
.agent-dialogue[b-sfe53yau7z] {
    animation: dialogueReveal-b-sfe53yau7z 0.6s ease-out forwards;
}

@keyframes dialogueReveal-b-sfe53yau7z {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .dialogue-text[b-sfe53yau7z] {
        font-size: clamp(0.7rem, 3.5vw, 0.85rem);
    }

    .dialogue-box[b-sfe53yau7z] {
        padding: 0.9rem 1rem 2.4rem; /* same idea — keep bottom clear */
        min-height: 90px;
    }

    .dialogue-continue[b-sfe53yau7z] {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }
}
/* /Components/Games/AngryPupComponent.razor.rz.scp.css */
/* /Components/Games/AtlasIntro.razor.rz.scp.css */
/* ============================================================
   AtlasIntro.razor.css  —  Scoped styles for Atlas of Infinity
   Cosmic & Mystical | All Ages | Blazor InteractiveServer
   ============================================================ */

/* ── Google Fonts — add to <head> in App.razor: ─────────────── */
/* <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap" rel="stylesheet" /> */

/* ── Root container ─────────────────────────────────────────── */
.atlas-intro[b-ov3agxg5lz] {
    position: relative;
    width: 100%;           /* contained: respects parent layout width  */
    height: 100vh;         /* tall enough to show all content           */
    background: #000;
    overflow: hidden;
    cursor: none;
    font-family: 'Cinzel', serif;
    border-radius: 8px;    /* optional: softens the edges in layout     */
    transition: all 0.4s ease;
}

/* Full-screen mode — triggered by the expand button            */
/* z-index stays at 0 so PortalGrid (100) and DomainExplorer   */
/* (200) always render above the background layer.             */
.atlas-intro.fullscreen[b-ov3agxg5lz] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════════════
   BACKGROUND LAYERS — starfield, nebulas, map.
   These are NEVER affected by the backgrounded state.
   The cosmos always shines through.
   ══════════════════════════════════════════════════════════════ */

/* ── Nebula layer ───────────────────────────────────────────── */
.nebula-layer[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.nebula[b-ov3agxg5lz] {
    position: absolute;
    border-radius: 50%;
    animation: nebulaFloat-b-ov3agxg5lz linear infinite;
    opacity: 0;
}

/* n1 — deep violet/indigo, top left */
.n1[b-ov3agxg5lz] {
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse,
        rgba(120, 80, 255, 0.75) 0%,
        rgba(60, 130, 180, 0.45) 45%,
        rgba(15, 110, 86, 0.15) 70%,
        transparent 100%);
    filter: blur(55px);
    top: -8%;
    left: -5%;
    animation-duration: 40s;
    animation-delay: 0s;
}

/* n2 — warm crimson/magenta, bottom right */
.n2[b-ov3agxg5lz] {
    width: 620px;
    height: 620px;
    background: radial-gradient(ellipse,
        rgba(220, 50, 80, 0.65) 0%,
        rgba(180, 40, 140, 0.40) 45%,
        rgba(100, 20, 80, 0.15) 70%,
        transparent 100%);
    filter: blur(55px);
    bottom: -8%;
    right: -5%;
    animation-duration: 50s;
    animation-delay: -15s;
}

/* n3 — cobalt blue, centre */
.n3[b-ov3agxg5lz] {
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse,
        rgba(30, 120, 220, 0.55) 0%,
        rgba(80, 60, 200, 0.30) 50%,
        transparent 100%);
    filter: blur(60px);
    top: 30%;
    left: 15%;
    animation-duration: 60s;
    animation-delay: -25s;
}

/* n4 — teal/emerald, top right — new */
.n4[b-ov3agxg5lz] {
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse,
        rgba(20, 200, 160, 0.55) 0%,
        rgba(10, 150, 120, 0.30) 50%,
        transparent 100%);
    filter: blur(55px);
    top: -5%;
    right: 5%;
    animation-duration: 45s;
    animation-delay: -8s;
}

@keyframes nebulaFloat-b-ov3agxg5lz {
    0%   { opacity: 0;   transform: scale(1)    translate(0,     0);   }
    10%  { opacity: 1;                                                  }
    50%  {               transform: scale(1.1)  translate(25px, -20px); }
    90%  { opacity: 1;                                                  }
    100% { opacity: 0;   transform: scale(1)    translate(0,     0);   }
}

/* ── Canvas (starfield) ─────────────────────────────────────── */
.atlas-canvas[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── Ancient map layer ──────────────────────────────────────── */
.map-layer[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: mapPulse-b-ov3agxg5lz 8s ease-in-out infinite;
}

.map-layer svg[b-ov3agxg5lz] {
    width: 100%;
    height: 100%;
}

@keyframes mapPulse-b-ov3agxg5lz {
    0%, 100% { opacity: 0.08; transform: scale(1);    }
    50%       { opacity: 0.15; transform: scale(1.02); }
}

.constellation-line[b-ov3agxg5lz] {
    stroke: rgba(200, 180, 120, 0.18);
    stroke-width: 0.5;
    animation: constellationFade-b-ov3agxg5lz 8s ease-in-out infinite;
}

@keyframes constellationFade-b-ov3agxg5lz {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.9; }
}

/* ── Shooting stars ─────────────────────────────────────────── */
/* NOTE: .shooting-star styles must be in your global CSS       */
/* (e.g. wwwroot/css/site.css) because these elements are       */
/* created dynamically by atlas-intro.js and won't receive      */
/* Blazor's scoped CSS attribute. Add the block below to        */
/* your site.css:                                               */
/*                                                              */
/* .shooting-star {                                             */
/*     position: absolute;                                      */
/*     height: 1px;                                             */
/*     background: linear-gradient(90deg,                       */
/*         transparent,                                         */
/*         rgba(255,255,255,0.92),                              */
/*         transparent);                                        */
/*     border-radius: 1px;                                      */
/*     animation: shoot linear forwards;                        */
/*     opacity: 0;                                              */
/*     pointer-events: none;                                    */
/* }                                                            */
/*                                                              */
/* @keyframes shoot {                                           */
/*     0%   { opacity: 0; transform: translateX(-100px) translateY(0);   } */
/*     5%   { opacity: 1; }                                     */
/*     95%  { opacity: 1; }                                     */
/*     100% { opacity: 0; transform: translateX(300px) translateY(80px); } */
/* }                                                            */

/* ══════════════════════════════════════════════════════════════
   UI LAYER — title, CTA, vignette, cursor.
   Wrapped in .ui-layer so a single modifier class controls
   the blur + fade when an overlay is active above.
   ══════════════════════════════════════════════════════════════ */

.ui-layer[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    transition:
        opacity 0.6s ease,
        filter  0.6s ease;
}

/* When AtlasIntro is backgrounded behind PortalGrid or DomainExplorer */
.ui-layer.backgrounded[b-ov3agxg5lz] {
    opacity: 0.08;
    filter: blur(6px);
    pointer-events: none;
}

/* ── Title layer ────────────────────────────────────────────── */
.title-layer[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title-glyph[b-ov3agxg5lz] {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: transparent;
    background: linear-gradient(180deg,
        #e8d8a0 0%,
        #c9a84c 40%,
        #f5e6b0 70%,
        #a07830 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    line-height: 1.1;
    opacity: 0;
    filter: drop-shadow(0 0 30px rgba(201, 168, 76, 0.5));
    animation:
        titleReveal-b-ov3agxg5lz 3s ease-out         forwards,
        titleBreath-b-ov3agxg5lz 6s ease-in-out 3s   infinite;
}

.title-glyph.delay[b-ov3agxg5lz] {
    animation-delay: 0.35s, 3.35s;
}

.title-divider[b-ov3agxg5lz] {
    width: clamp(140px, 30vw, 320px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 168, 76, 0.65),
        rgba(255, 255, 255, 0.4),
        rgba(201, 168, 76, 0.65),
        transparent);
    margin: 1.1em auto 0;
    opacity: 0;
    animation: titleReveal-b-ov3agxg5lz 2s ease-out 0.8s forwards;
}

.title-ornament[b-ov3agxg5lz] {
    text-align: center;
    color: rgba(201, 168, 76, 0.65);
    font-size: 1.05rem;
    letter-spacing: 0.65em;
    margin-top: 0.4em;
    opacity: 0;
    animation: titleReveal-b-ov3agxg5lz 2s ease-out 1s forwards;
}

.title-sub[b-ov3agxg5lz] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.75rem, 2vw, 1.4rem);
    font-weight: 400;
    letter-spacing: 0.45em;
    color: rgba(200, 180, 120, 0.72);
    text-transform: uppercase;
    margin-top: 0.65em;
    opacity: 0;
    animation: titleReveal-b-ov3agxg5lz 3s ease-out 1.2s forwards;
    text-align: center;
    /* Compensate for trailing letter-spacing that shifts visual center on mobile */
    padding-right: 0.45em;
    width: 100%;
}

@keyframes titleReveal-b-ov3agxg5lz {
    0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes titleBreath-b-ov3agxg5lz {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4))
                drop-shadow(0 0 60px rgba(83, 74, 183, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(201, 168, 76, 0.75))
                drop-shadow(0 0 90px rgba(83, 74, 183, 0.38));
    }
}

/* ── Agent dialogue layer ───────────────────────────────────── */
/* Sits above the title, below the vignette edges.             */
/* Positioned in the lower portion of the screen so the        */
/* title remains visible above the agents.                     */
.intro-agents-layer[b-ov3agxg5lz] {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 820px);
    pointer-events: all;
    z-index: 10;
}

/* ── CTA ────────────────────────────────────────────────────── */
.atlas-cta[b-ov3agxg5lz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 2.5rem;
    cursor: pointer;
    user-select: none;
    pointer-events: all;
    animation: titleReveal-b-ov3agxg5lz 1s ease-out forwards;
}

.cta-text[b-ov3agxg5lz] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65rem, 1.5vw, 0.95rem);
    letter-spacing: 0.38em;
    color: rgba(200, 180, 120, 0.65);
    text-transform: uppercase;
    animation: ctaPulse-b-ov3agxg5lz 2.6s ease-in-out infinite;
}

@keyframes ctaPulse-b-ov3agxg5lz {
    0%, 100% { opacity: 0.4;  }
    50%       { opacity: 0.95; }
}

.cta-chevron[b-ov3agxg5lz] {
    width: 18px;
    height: 18px;
    border-right: 1.5px solid rgba(200, 180, 120, 0.55);
    border-bottom: 1.5px solid rgba(200, 180, 120, 0.55);
    transform: rotate(45deg);
    margin-top: -4px;
    animation: chevronBounce-b-ov3agxg5lz 2.6s ease-in-out infinite;
}

@keyframes chevronBounce-b-ov3agxg5lz {
    0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.4;  }
    50%       { transform: rotate(45deg) translateY(5px); opacity: 0.95; }
}

/* ── Vignette ───────────────────────────────────────────────── */
.vignette[b-ov3agxg5lz] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 38%,
        rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}

/* ── Fullscreen toggle button ───────────────────────────────── */
.fullscreen-toggle[b-ov3agxg5lz] {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.45);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    z-index: 300;          /* above PortalGrid (100) and DomainExplorer (200) */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    pointer-events: all;
}

.fullscreen-toggle:hover[b-ov3agxg5lz] {
    color: rgba(200, 180, 120, 0.9);
}

/* Exit button — only visible in fullscreen mode                */
.fullscreen-exit[b-ov3agxg5lz] {
    position: absolute;
    top: 0.8rem;
    left: 1rem;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.45);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    z-index: 300;          /* above PortalGrid (100) and DomainExplorer (200) */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    pointer-events: all;
}

.fullscreen-exit:hover[b-ov3agxg5lz] {
    color: rgba(200, 180, 120, 0.9);
}

/* ── Custom cursor ──────────────────────────────────────────── */
.atlas-cursor[b-ov3agxg5lz] {
    position: fixed;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(201, 168, 76, 0.72);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
    z-index: 9999;
}

.atlas-cursor.pressed[b-ov3agxg5lz] {
    width: 12px;
    height: 12px;
}

.atlas-cursor-dot[b-ov3agxg5lz] {
    position: fixed;
    width: 4px;
    height: 4px;
    background: rgba(201, 168, 76, 0.9);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
/* /Components/Games/DomainExplorer.razor.rz.scp.css */
/* ============================================================
   DomainExplorer.razor.css — Scoped styles for DomainExplorer
   Manages the polyhedron transition shell + breadcrumb trail
   ============================================================ */

/* ── Outer shell ────────────────────────────────────────────── */
.domain-explorer[b-wu1flhip45] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

    .domain-explorer.visible[b-wu1flhip45] {
        opacity: 1;
        pointer-events: all;
    }

/* ── Breadcrumb trail ───────────────────────────────────────── */
.breadcrumb[b-wu1flhip45] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80vw;
    animation: breadcrumbReveal-b-wu1flhip45 0.5s ease-out forwards;
}

@keyframes breadcrumbReveal-b-wu1flhip45 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.breadcrumb-item[b-wu1flhip45] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.8rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

    .breadcrumb-item:hover[b-wu1flhip45] {
        color: rgba(200, 180, 120, 0.95);
    }

    .breadcrumb-item.current[b-wu1flhip45] {
        color: rgba(220, 195, 130, 0.9);
        cursor: default;
    }

        .breadcrumb-item.current:hover[b-wu1flhip45] {
            color: rgba(220, 195, 130, 0.9);
        }

.breadcrumb-separator[b-wu1flhip45] {
    font-size: 0.6rem;
    color: rgba(200, 180, 120, 0.25);
    user-select: none;
}

.breadcrumb-root[b-wu1flhip45] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.8rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

    .breadcrumb-root:hover[b-wu1flhip45] {
        color: rgba(200, 180, 120, 0.95);
    }

/* ── Domain title ───────────────────────────────────────────── */
.domain-title[b-wu1flhip45] {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: transparent;
    background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 45%, #f5e6b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    white-space: nowrap;
    filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.4));
    animation: titleReveal-b-wu1flhip45 0.6s ease-out forwards;
}

@keyframes titleReveal-b-wu1flhip45 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Polyhedron viewport ────────────────────────────────────── */
.polyhedron-viewport[b-wu1flhip45] {
    position: relative;
    width: min(70vh, 90vw);
    height: min(70vh, 90vw);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
}

/* ── Slide transition wrapper ───────────────────────────────── */
.slide-wrapper[b-wu1flhip45] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slide-wrapper.slide-enter-right[b-wu1flhip45] {
        animation: slideInRight-b-wu1flhip45 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .slide-wrapper.slide-enter-left[b-wu1flhip45] {
        animation: slideInLeft-b-wu1flhip45 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .slide-wrapper.slide-exit-left[b-wu1flhip45] {
        animation: slideOutLeft-b-wu1flhip45 0.4s ease-in forwards;
        pointer-events: none;
    }

    .slide-wrapper.slide-exit-right[b-wu1flhip45] {
        animation: slideOutRight-b-wu1flhip45 0.4s ease-in forwards;
        pointer-events: none;
    }

@keyframes slideInRight-b-wu1flhip45 {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideInLeft-b-wu1flhip45 {
    from {
        opacity: 0;
        transform: translateX(-60px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutLeft-b-wu1flhip45 {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-60px) scale(0.94);
    }
}

@keyframes slideOutRight-b-wu1flhip45 {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(60px) scale(0.94);
    }
}

/* ── Back to portal grid ────────────────────────────────────── */
.back-to-atlas[b-wu1flhip45] {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.78rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.38);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

    .back-to-atlas:hover[b-wu1flhip45] {
        color: rgba(200, 180, 120, 0.85);
    }

/* ── Sibling page indicator ─────────────────────────────────── */
.sibling-indicator[b-wu1flhip45] {
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.sibling-dot[b-wu1flhip45] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(200, 180, 120, 0.25);
    transition: background 0.2s ease;
    cursor: pointer;
}

    .sibling-dot.active[b-wu1flhip45] {
        background: rgba(200, 180, 120, 0.8);
    }

    .sibling-dot:hover[b-wu1flhip45] {
        background: rgba(200, 180, 120, 0.6);
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .polyhedron-viewport[b-wu1flhip45] {
        width: 92vw;
        height: 92vw;
        margin-top: 5rem;
    }

    .domain-title[b-wu1flhip45] {
        font-size: clamp(0.85rem, 4vw, 1.2rem);
    }
}
/* /Components/Games/IntegerInputComponent.razor.rz.scp.css */
.int-cell[b-updmvff7hk] {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 1.2rem;
    border: 1px solid #444;
    border-radius: 6px;
    background-color: #111;
    color: #eee;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

    /* Glow effect when active */
    .int-cell:focus[b-updmvff7hk] {
        outline: none;
        border-color: #00eaff;
        box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff;
        background-color: #0a1a1f;
    }
/* /Components/Games/MissionGate.razor.rz.scp.css */
/* ============================================================
   MissionGate.razor.css
   Classified dossier gate — X-Files / spy thriller aesthetic.
   Sits above the starfield, below the agent dialogue overlay.
   ============================================================ */

/* ── Overlay ────────────────────────────────────────────────── */
.mission-gate[b-bedwygiozz] {
    position: fixed;
    inset: 0;
    z-index: 150; /* above starfield (0) and portal grid (100) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1.5rem;
    background: radial-gradient(ellipse at center, rgba(0, 4, 16, 0.92) 0%, rgba(0, 0, 0, 0.97) 100%);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

    .mission-gate.revealed[b-bedwygiozz] {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
    }

/* ── Header ─────────────────────────────────────────────────── */
.gate-header[b-bedwygiozz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    animation: gateReveal-b-bedwygiozz 0.6s ease-out 0.2s both;
}

.gate-classification[b-bedwygiozz] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(200, 50, 50, 0.85);
    padding-right: 0.45em;
    filter: drop-shadow(0 0 8px rgba(200, 50, 50, 0.5));
}

.gate-id[b-bedwygiozz] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    letter-spacing: 0.2em;
    color: rgba(200, 180, 120, 0.4);
    text-transform: uppercase;
}

/* ── Horizontal rule divider ────────────────────────────────── */
.gate-header[b-bedwygiozz]::after {
    content: '';
    display: block;
    width: clamp(200px, 50vw, 480px);
    height: 1px;
    margin-top: 0.6rem;
    background: linear-gradient(90deg, transparent, rgba(200, 50, 50, 0.4), rgba(200, 180, 120, 0.3), rgba(200, 50, 50, 0.4), transparent);
}

/* ── Body ───────────────────────────────────────────────────── */
.gate-body[b-bedwygiozz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: gateReveal-b-bedwygiozz 0.6s ease-out 0.4s both;
}

/* ── Dossier status lines ────────────────────────────────────── */
.gate-dossier-lines[b-bedwygiozz] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid rgba(200, 180, 120, 0.12);
    padding: 0.9rem 1.6rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    min-width: clamp(220px, 40vw, 360px);
}

.dossier-line[b-bedwygiozz] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 1.1vw, 0.72rem);
    letter-spacing: 0.12em;
    color: rgba(200, 180, 120, 0.45);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.dossier-value[b-bedwygiozz] {
    color: rgba(200, 180, 120, 0.85);
}

    .dossier-value.blink[b-bedwygiozz] {
        animation: dossierBlink-b-bedwygiozz 1.1s ease-in-out infinite;
        color: rgba(220, 180, 60, 0.95);
    }

@keyframes dossierBlink-b-bedwygiozz {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ── Main question ──────────────────────────────────────────── */
.gate-question[b-bedwygiozz] {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.1rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: transparent;
    background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 45%, #f5e6b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    text-align: center;
    filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4));
    line-height: 1.3;
}

.gate-subtext[b-bedwygiozz] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.75rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.35);
    text-transform: uppercase;
    text-align: center;
    padding-right: 0.3em;
}

/* ── Action buttons ─────────────────────────────────────────── */
.gate-actions[b-bedwygiozz] {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    animation: gateReveal-b-bedwygiozz 0.6s ease-out 0.6s both;
}

.gate-btn[b-bedwygiozz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7em 1.8em;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

    .gate-btn:active[b-bedwygiozz] {
        transform: scale(0.97);
    }

/* Accept — gold/amber */
.gate-btn-accept[b-bedwygiozz] {
    border-color: rgba(201, 168, 76, 0.55);
    background: rgba(201, 168, 76, 0.1);
    box-shadow: 0 0 16px rgba(201, 168, 76, 0.15);
}

    .gate-btn-accept:hover[b-bedwygiozz] {
        border-color: rgba(201, 168, 76, 0.9);
        background: rgba(201, 168, 76, 0.22);
        box-shadow: 0 0 28px rgba(201, 168, 76, 0.35);
    }

    .gate-btn-accept .gate-btn-icon[b-bedwygiozz] {
        font-size: 0.7rem;
        color: rgba(220, 190, 100, 0.9);
    }

    .gate-btn-accept .gate-btn-label[b-bedwygiozz] {
        font-size: clamp(0.65rem, 1.2vw, 0.8rem);
        color: rgba(220, 190, 100, 0.9);
    }

/* Decline — muted, less prominent */
.gate-btn-decline[b-bedwygiozz] {
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
}

    .gate-btn-decline:hover[b-bedwygiozz] {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.04);
    }

    .gate-btn-decline .gate-btn-icon[b-bedwygiozz] {
        font-size: 0.65rem;
        color: rgba(200, 180, 120, 0.35);
    }

    .gate-btn-decline .gate-btn-label[b-bedwygiozz] {
        font-size: clamp(0.6rem, 1vw, 0.72rem);
        color: rgba(200, 180, 120, 0.35);
    }

/* ── Redacted footer ─────────────────────────────────────────── */
.gate-footer[b-bedwygiozz] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.5rem, 0.85vw, 0.62rem);
    color: rgba(200, 180, 120, 0.2);
    text-align: center;
    max-width: 480px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    animation: gateReveal-b-bedwygiozz 0.6s ease-out 0.8s both;
}

.gate-redacted[b-bedwygiozz] {
    background: rgba(200, 180, 120, 0.2);
    color: transparent;
    border-radius: 2px;
    user-select: none;
    letter-spacing: 0.05em;
}

/* ── Entrance animation ─────────────────────────────────────── */
@keyframes gateReveal-b-bedwygiozz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gate-actions[b-bedwygiozz] {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .gate-btn[b-bedwygiozz] {
        width: 100%;
        justify-content: center;
    }

    .gate-question[b-bedwygiozz] {
        font-size: clamp(0.95rem, 5vw, 1.4rem);
    }
}
/* /Components/Games/Polyhedron.razor.rz.scp.css */
/* ============================================================
   Polyhedron.razor.css  —  Scoped styles for the polyhedron
   ============================================================ */

/* ── Container ──────────────────────────────────────────────── */
.polyhedron-container[b-p2j8aj18az] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Canvas ─────────────────────────────────────────────────── */
.polyhedron-canvas[b-p2j8aj18az] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none; /* prevent scroll interference on mobile */
}

/* ── Selected face info panel ───────────────────────────────── */
.face-info[b-p2j8aj18az] {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 2rem;
    border-radius: 10px;
    border: 1px solid rgba(200, 180, 120, 0.25);
    background: rgba(5, 4, 20, 0.75);
    backdrop-filter: blur(10px);
    min-width: 240px;
    max-width: 380px;
    text-align: center;
    animation: faceInfoSlideIn-b-p2j8aj18az 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes faceInfoSlideIn-b-p2j8aj18az {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.face-info-icon[b-p2j8aj18az] {
    font-size: 2rem;
    line-height: 1;
}

.face-info-label[b-p2j8aj18az] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(230, 210, 160, 0.95);
    text-transform: uppercase;
}

.face-info-description[b-p2j8aj18az] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65rem, 1.1vw, 0.82rem);
    letter-spacing: 0.06em;
    color: rgba(180, 160, 110, 0.7);
    line-height: 1.5;
}

.face-info-action[b-p2j8aj18az] {
    margin-top: 0.4rem;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1vw, 0.78rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 0.45em 1.2em;
    border-radius: 6px;
    border: 1px solid rgba(200, 180, 120, 0.35);
    background: rgba(201, 168, 76, 0.12);
    color: rgba(220, 190, 100, 0.9);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

    .face-info-action:hover[b-p2j8aj18az] {
        background: rgba(201, 168, 76, 0.24);
        border-color: rgba(200, 180, 120, 0.65);
    }

.face-info-locked[b-p2j8aj18az] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    letter-spacing: 0.2em;
    color: rgba(180, 160, 110, 0.45);
    text-transform: uppercase;
    margin-top: 0.2rem;
}

/* ── Hint text ──────────────────────────────────────────────── */
.polyhedron-hint[b-p2j8aj18az] {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.1vw, 0.78rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.38);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    animation: hintFade-b-p2j8aj18az 4s ease-in-out 2s forwards;
    pointer-events: none;
}

@keyframes hintFade-b-p2j8aj18az {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ── Spin / pause indicator ─────────────────────────────────── */
.spin-indicator[b-p2j8aj18az] {
    position: absolute;
    top: 6%;
    right: 5%;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: rgba(200, 180, 120, 0.3);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

    .spin-indicator:hover[b-p2j8aj18az] {
        color: rgba(200, 180, 120, 0.7);
    }
/* /Components/Games/PortalGrid.razor.rz.scp.css */
/* ============================================================
   PortalGrid.razor.css  —  Classified Intelligence Archive
   Cold-war government filing cabinet aesthetic.
   Yellowed paper, rubber stamps, typewriter text, worn edges.
   ============================================================ */

/* ── Overlay ────────────────────────────────────────────────── */
.archive-overlay[b-jox1w5sx7t] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 1.5rem 1.5rem 1rem;
    /* Dark room with a warm overhead-lamp glow at centre */
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(40, 32, 18, 0.55) 0%, rgba(0, 0, 0, 0.94) 100%);
    opacity: 0;
    transition: opacity 0.7s ease;
    overflow-y: auto;
}

    .archive-overlay.fade-in[b-jox1w5sx7t] {
        opacity: 1;
    }

    .archive-overlay.backgrounded[b-jox1w5sx7t] {
        opacity: 0.07;
        filter: blur(6px);
        pointer-events: none;
        transition: opacity 0.6s ease, filter 0.6s ease;
    }

/* ── Cabinet header ─────────────────────────────────────────── */
.cabinet-header[b-jox1w5sx7t] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    animation: archiveReveal-b-jox1w5sx7t 0.7s ease-out 0.2s both;
}

/* "ATLAS DIVISION" rubber stamp above title */
.cabinet-stamp[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(180, 60, 40, 0.75);
    border: 1.5px solid rgba(180, 60, 40, 0.45);
    padding: 0.18em 0.9em 0.12em;
    border-radius: 2px;
    transform: rotate(-1.5deg);
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(180, 60, 40, 0.3));
}

.cabinet-title[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(220, 200, 150, 0.92);
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(200, 170, 90, 0.3), 1px 1px 0 rgba(0,0,0,0.6);
    margin-top: 0.2rem;
}

.cabinet-meta[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.5rem, 0.9vw, 0.62rem);
    letter-spacing: 0.15em;
    color: rgba(200, 180, 120, 0.4);
    text-transform: uppercase;
}

.cabinet-meta-blink[b-jox1w5sx7t] {
    color: rgba(100, 200, 120, 0.75);
    animation: metaBlink-b-jox1w5sx7t 1.8s ease-in-out infinite;
}

@keyframes metaBlink-b-jox1w5sx7t {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.cabinet-rule[b-jox1w5sx7t] {
    width: clamp(180px, 45vw, 500px);
    height: 1px;
    margin: 0.4rem 0 0.2rem;
    background: linear-gradient(90deg, transparent, rgba(200, 170, 90, 0.4), rgba(200, 170, 90, 0.6), rgba(200, 170, 90, 0.4), transparent);
}

.cabinet-sub[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.38);
    text-transform: uppercase;
    padding-right: 0.3em;
}

@keyframes archiveReveal-b-jox1w5sx7t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Folder grid ────────────────────────────────────────────── */
.folder-grid[b-jox1w5sx7t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.1rem;
    width: 100%;
    max-width: 1060px;
}

/* ── Individual folder ──────────────────────────────────────── */
.folder[b-jox1w5sx7t] {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    /* Slight randomised tilt per card — value from --skew var */
    transform: rotate(var(--skew, 0deg));
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    opacity: 0;
    animation: folderReveal-b-jox1w5sx7t 0.5s ease-out forwards;
    filter: sepia(0.25);
}

@keyframes folderReveal-b-jox1w5sx7t {
    from {
        opacity: 0;
        transform: rotate(var(--skew, 0deg)) translateY(18px);
    }

    to {
        opacity: 1;
        transform: rotate(var(--skew, 0deg)) translateY(0);
    }
}

.folder:hover[b-jox1w5sx7t] {
    transform: rotate(0deg) translateY(-5px) scale(1.03);
    filter: sepia(0);
    z-index: 10;
}

/* ── Folder tab ─────────────────────────────────────────────── */
.folder-tab[b-jox1w5sx7t] {
    align-self: flex-start;
    background: rgba(195, 168, 100, 0.88);
    padding: 0.22em 0.9em 0.15em;
    border-radius: 3px 8px 0 0;
    margin-left: 12px;
    min-width: 60%;
    max-width: 80%;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(140, 110, 50, 0.6);
    border-bottom: none;
}

.folder-tab-label[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 1vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(40, 28, 8, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── Folder body (the paper inside) ─────────────────────────── */
.folder-body[b-jox1w5sx7t] {
    position: relative;
    background: rgba(230, 215, 175, 0.92);
    border: 1px solid rgba(140, 110, 50, 0.55);
    border-radius: 0 4px 4px 4px;
    padding: 1rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 140px;
    overflow: hidden;
    /* Aged paper texture using layered gradients */
    background-image:
    /* Subtle horizontal lines like ruled paper */
    repeating-linear-gradient( to bottom, transparent 0px, transparent 18px, rgba(100, 80, 40, 0.06) 18px, rgba(100, 80, 40, 0.06) 19px ),
    /* Warm yellowed base */
    linear-gradient(160deg, rgba(238, 222, 178, 0.98) 0%, rgba(225, 208, 160, 0.95) 60%, rgba(210, 192, 140, 0.92) 100%);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.45), inset 0 0 20px rgba(100, 80, 40, 0.08);
}

    /* Coffee stain ring — decorative pseudo-element */
    .folder-body[b-jox1w5sx7t]::before {
        content: '';
        position: absolute;
        top: 8px;
        right: 14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1.5px solid rgba(100, 70, 30, 0.15);
        box-shadow: inset 0 0 6px rgba(100, 70, 30, 0.08);
        pointer-events: none;
    }

    /* Torn left edge effect */
    .folder-body[b-jox1w5sx7t]::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: repeating-linear-gradient( to bottom, rgba(100, 70, 30, 0.12) 0px, transparent 3px, rgba(100, 70, 30, 0.08) 6px );
        pointer-events: none;
    }

/* ── Paper clip ─────────────────────────────────────────────── */
.folder-clip[b-jox1w5sx7t] {
    position: absolute;
    top: -6px;
    left: 22px;
    width: 14px;
    height: 28px;
    border: 2px solid rgba(140, 130, 120, 0.7);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    z-index: 2;
}

    .folder-clip[b-jox1w5sx7t]::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 2px;
        width: 6px;
        height: 20px;
        border: 2px solid rgba(140, 130, 120, 0.5);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }

/* ── Rubber stamp ────────────────────────────────────────────── */
.folder-stamp[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.48rem, 0.85vw, 0.6rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.18em 0.6em;
    border-radius: 2px;
    border: 2px solid;
    transform: rotate(-8deg);
    align-self: flex-end;
    margin-top: 0.1rem;
    pointer-events: none;
}

.stamp-open[b-jox1w5sx7t] {
    color: rgba(30, 100, 60, 0.75);
    border-color: rgba(30, 100, 60, 0.55);
    background: rgba(30, 100, 60, 0.06);
}

.stamp-classified[b-jox1w5sx7t] {
    color: rgba(180, 120, 20, 0.8);
    border-color: rgba(180, 120, 20, 0.6);
    background: rgba(180, 120, 20, 0.06);
}

.stamp-restricted[b-jox1w5sx7t] {
    color: rgba(160, 40, 30, 0.8);
    border-color: rgba(160, 40, 30, 0.6);
    background: rgba(160, 40, 30, 0.06);
}

/* ── Domain icon ─────────────────────────────────────────────── */
.folder-icon[b-jox1w5sx7t] {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1;
    margin-top: 0.1rem;
    filter: sepia(0.6) contrast(0.85);
}

/* ── Typewriter description ──────────────────────────────────── */
.folder-typed[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.58rem, 0.95vw, 0.72rem);
    color: rgba(35, 25, 10, 0.72);
    line-height: 1.45;
    letter-spacing: 0.03em;
    /* Mimic slightly uneven typewriter pressure */
    text-shadow: 0.4px 0.4px 0 rgba(35, 25, 10, 0.2);
}

/* ── File metadata lines ─────────────────────────────────────── */
.folder-meta-lines[b-jox1w5sx7t] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(100, 80, 40, 0.2);
    width: 100%;
}

.folder-meta-line[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.46rem, 0.78vw, 0.58rem);
    color: rgba(35, 25, 10, 0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Locked overlay ──────────────────────────────────────────── */
.folder-locked-overlay[b-jox1w5sx7t] {
    position: absolute;
    inset: 0;
    background: rgba(20, 10, 5, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 4px;
}

.folder-locked-icon[b-jox1w5sx7t] {
    font-size: 2rem;
    color: rgba(160, 40, 30, 0.55);
    line-height: 1;
}

/* ── State variants — tab colour changes ─────────────────────── */
.folder-free .folder-tab[b-jox1w5sx7t] {
    background: rgba(185, 210, 185, 0.88);
    border-color: rgba(80, 130, 80, 0.6);
}

.folder-free .folder-tab-label[b-jox1w5sx7t] {
    color: rgba(20, 50, 20, 0.9);
}

.folder-paid .folder-tab[b-jox1w5sx7t] {
    background: rgba(210, 185, 130, 0.88);
    border-color: rgba(160, 120, 40, 0.6);
}

.folder-locked .folder-tab[b-jox1w5sx7t] {
    background: rgba(180, 168, 155, 0.7);
    border-color: rgba(100, 90, 80, 0.5);
}

.folder-locked .folder-body[b-jox1w5sx7t] {
    background-image: repeating-linear-gradient( to bottom, transparent 0px, transparent 18px, rgba(100, 80, 40, 0.06) 18px, rgba(100, 80, 40, 0.06) 19px ), linear-gradient(160deg, rgba(200, 195, 185, 0.92) 0%, rgba(185, 180, 170, 0.90) 100%);
    filter: saturate(0.5);
}

.folder-locked[b-jox1w5sx7t] {
    cursor: not-allowed;
}

    .folder-locked:hover[b-jox1w5sx7t] {
        transform: rotate(var(--skew, 0deg));
        filter: sepia(0.5);
    }

/* ── Footer ─────────────────────────────────────────────────── */
.cabinet-footer[b-jox1w5sx7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: archiveReveal-b-jox1w5sx7t 0.7s ease-out 0.7s both;
}

.cabinet-back[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 1.1vw, 0.75rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.4);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    padding-right: 0.3em;
}

    .cabinet-back:hover[b-jox1w5sx7t] {
        color: rgba(200, 180, 120, 0.85);
    }

.cabinet-footer-ref[b-jox1w5sx7t] {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.42rem, 0.7vw, 0.52rem);
    letter-spacing: 0.18em;
    color: rgba(200, 180, 120, 0.18);
    text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .folder-grid[b-jox1w5sx7t] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
}

@media (max-width: 380px) {
    .folder-grid[b-jox1w5sx7t] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Games/ProgressBar.razor.rz.scp.css */
.codex-progress[b-ssyjzdrsuv] {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
}

.codex-progress-block[b-ssyjzdrsuv] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

    .codex-progress-block.incomplete[b-ssyjzdrsuv] {
        background-color: #000;
    }

    .codex-progress-block.complete[b-ssyjzdrsuv] {
        background-color: #00c853; /* vivid green */
        box-shadow: 0 0 6px rgba(0, 200, 83, 0.6);
        transform: scale(1.05);
    }
/* /Components/Games/SelectInputComponent.razor.rz.scp.css */
.select-input-cell[b-jrby1etdww] {
    width: 68px;
    height: 48px;
    padding: 4px;
    font-size: 1.2rem;
    text-align: center;
    background-color: #111 !important;
    color: #eee !important;
    border: 1px solid #444;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Escape CSS isolation for Edge’s pseudo-element */
:deep(.select-input-cell::-ms-expand)[b-jrby1etdww] {
    display: none;
}

    /* Glow effect when active */
    .select-input-cell:focus[b-jrby1etdww] {
        outline: none;
        border-color: #00eaff;
        box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff;
        background-color: #0a1a1f !important;
    }
/* /Components/Games/Square.razor.rz.scp.css */
/* /Components/Games/StrInputComponent.razor.rz.scp.css */
.str-cell[b-hqsskruroc] {
    width: 148px;
    height: 48px;
    text-align: center;
    font-size: 1.2rem;
    border: 1px solid #444;
    border-radius: 6px;
    background-color: #111;
    color: #eee;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

    /* Glow effect when active */
    .str-cell:focus[b-hqsskruroc] {
        outline: none;
        border-color: #00eaff;
        box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff;
        background-color: #0a1a1f;
    }
/* /Components/Games/TheAtlasOfInfinityComponent.razor.rz.scp.css */
/* ============================================================
   TheAtlasOfInfinityComponent.razor.css
   Shell container + fullscreen toggle and exit buttons.
   ============================================================ */

/* ── Shell container ────────────────────────────────────────── */
/* Provides the positioning context for absolute buttons        */
/* in contained mode. Matches AtlasIntro's dimensions exactly.  */
.atlas-shell[b-5dvwzrztg9] {
    position: relative;
    width: 100%;
    height: 100vh;
}

    /* In fullscreen mode the shell also goes fixed to fill viewport */
    .atlas-shell.is-fullscreen[b-5dvwzrztg9] {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
    }

/* ── Shared button base ─────────────────────────────────────── */
.atlas-fullscreen-toggle[b-5dvwzrztg9],
.atlas-fullscreen-exit[b-5dvwzrztg9] {
    position: absolute; /* contained: anchors to .atlas-shell        */
    top: 0.8rem;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 180, 120, 0.45);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

    .atlas-fullscreen-toggle:hover[b-5dvwzrztg9],
    .atlas-fullscreen-exit:hover[b-5dvwzrztg9] {
        color: rgba(200, 180, 120, 0.9);
    }

    /* In fullscreen mode switch to fixed so they stay above        */
    /* all layers regardless of scroll or layout.                   */
    .atlas-fullscreen-toggle.is-fullscreen[b-5dvwzrztg9],
    .atlas-fullscreen-exit.is-fullscreen[b-5dvwzrztg9] {
        position: fixed;
    }

/* ── Expand / Exit Full Screen — top right ──────────────────── */
.atlas-fullscreen-toggle[b-5dvwzrztg9] {
    right: 1rem;
}

/* ── Exit Game — top left ───────────────────────────────────── */
.atlas-fullscreen-exit[b-5dvwzrztg9] {
    left: 1rem;
}

/* ── Agent dialogue overlay — above all layers ──────────────── */
.agent-dialogue-overlay[b-5dvwzrztg9] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8%;
    pointer-events: none;
}

    .agent-dialogue-overlay > :deep(*)[b-5dvwzrztg9] {
        pointer-events: all;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xjs2y397vo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-xjs2y397vo] {
    flex: 1;
}

.sidebar[b-xjs2y397vo] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-xjs2y397vo] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-xjs2y397vo]  a, .top-row .btn-link[b-xjs2y397vo] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-xjs2y397vo] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-xjs2y397vo] {
        display: none;
    }

    .top-row.auth[b-xjs2y397vo] {
        justify-content: space-between;
    }

    .top-row a[b-xjs2y397vo], .top-row .btn-link[b-xjs2y397vo] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-xjs2y397vo] {
        flex-direction: row;
    }

    .sidebar[b-xjs2y397vo] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-xjs2y397vo] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-xjs2y397vo] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}