@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
   Image-based agent portrait — CSS animations applied to <img>
   ============================================================ */

/* ── 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;
}

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

/* ── Glow halo behind the 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.4;
    animation: haloPulse-b-sedk0ix5ok 4s ease-in-out infinite;
    pointer-events: none;
}

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

/* ── Idle breathing animation ───────────────────────────────── */
.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(-4px) scale(1.008); }
}

/* ── Speaking animation — slightly more animated than idle ──── */
.speaking-breathe[b-sedk0ix5ok] {
    transform-origin: center bottom;
    animation: agentSpeaking-b-sedk0ix5ok 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 26px var(--agent-glow)) brightness(1.08) !important;
}

@keyframes agentSpeaking-b-sedk0ix5ok {
    0%, 100% { transform: translateY(0)    scale(1);     }
    25%       { transform: translateY(-3px) scale(1.006); }
    75%       { transform: translateY(-5px) scale(1.01);  }
}

/* ── Entrance 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 label ───────────────────────────────────────── */
.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; /* compensate trailing letter-spacing */
}

.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 — subtle attention effect ───────────────────────── */
.agent-avatar:hover .agent-img[b-sedk0ix5ok] {
    filter: drop-shadow(0 0 28px var(--agent-glow)) brightness(1.05);
}

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

@media (max-width: 440px) {
    .agent-scene[b-sedk0ix5ok] {
        gap: 0.4rem;
    }

    .agent-slot[b-sedk0ix5ok] {
        max-width: 22vw;
    }

    .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;
    }
}
/* /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.55rem;
        letter-spacing: 0.12em;
    }
}
/* /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/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  —  Scoped styles for the portal grid
   Overlays the living AtlasIntro starfield background
   ============================================================ */

/* ── Overlay container ──────────────────────────────────────── */
.portal-overlay[b-jox1w5sx7t] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    background: radial-gradient(ellipse at center, rgba(0, 0, 10, 0.72) 0%, rgba(0, 0, 0, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow-y: auto;
}

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

    /* When PortalGrid is backgrounded behind DomainExplorer */
    .portal-overlay.backgrounded[b-jox1w5sx7t] {
        opacity: 0.08;
        filter: blur(6px);
        pointer-events: none;
        transition: opacity 0.6s ease, filter 0.6s ease;
    }

/* ── Header ─────────────────────────────────────────────────── */
.portal-header[b-jox1w5sx7t] {
    text-align: center;
    animation: portalHeaderReveal-b-jox1w5sx7t 0.8s ease-out 0.3s both;
}

.portal-title[b-jox1w5sx7t] {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: transparent;
    background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 45%, #f5e6b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    filter: drop-shadow(0 0 24px rgba(201, 168, 76, 0.55));
}

.portal-subtitle[b-jox1w5sx7t] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65rem, 1.4vw, 1rem);
    letter-spacing: 0.4em;
    color: rgba(200, 180, 120, 0.6);
    text-transform: uppercase;
    margin-top: 0.5em;
}

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

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

/* ── Grid ───────────────────────────────────────────────────── */
.portal-grid[b-jox1w5sx7t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
}

/* ── Portal card ────────────────────────────────────────────── */
.portal-card[b-jox1w5sx7t] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.6rem 1rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(200, 180, 120, 0.15);
    background: rgba(10, 8, 30, 0.65);
    backdrop-filter: blur(8px);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    /* staggered reveal — delay set inline via style */
    opacity: 0;
    animation: cardReveal-b-jox1w5sx7t 0.5s ease-out forwards;
}

@keyframes cardReveal-b-jox1w5sx7t {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

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

/* ── Glow layer (reveals on hover) ─────────────────────────── */
.portal-glow[b-jox1w5sx7t] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ── State: Free ────────────────────────────────────────────── */
.state-free[b-jox1w5sx7t] {
    border-color: rgba(83, 183, 144, 0.35);
}

    .state-free .portal-glow[b-jox1w5sx7t] {
        background: radial-gradient(ellipse at center, rgba(83, 183, 144, 0.18) 0%, transparent 70%);
    }

    .state-free:hover[b-jox1w5sx7t] {
        transform: translateY(-4px) scale(1.02);
        border-color: rgba(83, 183, 144, 0.75);
        box-shadow: 0 0 24px rgba(83, 183, 144, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5);
    }

        .state-free:hover .portal-glow[b-jox1w5sx7t] {
            opacity: 1;
        }

/* ── State: Paid ────────────────────────────────────────────── */
.state-paid[b-jox1w5sx7t] {
    border-color: rgba(201, 168, 76, 0.35);
}

    .state-paid .portal-glow[b-jox1w5sx7t] {
        background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.18) 0%, transparent 70%);
    }

    .state-paid:hover[b-jox1w5sx7t] {
        transform: translateY(-4px) scale(1.02);
        border-color: rgba(201, 168, 76, 0.75);
        box-shadow: 0 0 24px rgba(201, 168, 76, 0.35), 0 8px 32px rgba(0, 0, 0, 0.5);
    }

        .state-paid:hover .portal-glow[b-jox1w5sx7t] {
            opacity: 1;
        }

/* ── State: Locked ──────────────────────────────────────────── */
.state-locked[b-jox1w5sx7t] {
    border-color: rgba(255, 255, 255, 0.06);
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

    .state-locked:hover[b-jox1w5sx7t] {
        transform: none;
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.08);
    }

/* ── Card internals ─────────────────────────────────────────── */
.portal-icon[b-jox1w5sx7t] {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(200, 180, 120, 0.4));
    transition: transform 0.25s ease;
}

.state-free:hover .portal-icon[b-jox1w5sx7t],
.state-paid:hover .portal-icon[b-jox1w5sx7t] {
    transform: scale(1.15);
}

.portal-name[b-jox1w5sx7t] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(230, 210, 160, 0.92);
    text-transform: uppercase;
}

.portal-description[b-jox1w5sx7t] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 0.9vw, 0.75rem);
    letter-spacing: 0.06em;
    color: rgba(180, 160, 110, 0.6);
    line-height: 1.4;
}

/* ── Lock icon ──────────────────────────────────────────────── */
.portal-lock[b-jox1w5sx7t] {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    font-size: 0.85rem;
    opacity: 0.5;
}

/* ── Badges ─────────────────────────────────────────────────── */
.portal-badge[b-jox1w5sx7t] {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2em 0.5em;
    border-radius: 4px;
}

    .portal-badge.free[b-jox1w5sx7t] {
        background: rgba(83, 183, 144, 0.2);
        color: rgba(83, 210, 160, 0.9);
        border: 1px solid rgba(83, 183, 144, 0.35);
    }

    .portal-badge.paid[b-jox1w5sx7t] {
        background: rgba(201, 168, 76, 0.18);
        color: rgba(220, 190, 100, 0.9);
        border: 1px solid rgba(201, 168, 76, 0.35);
    }

/* ── Back link ──────────────────────────────────────────────── */
.portal-back[b-jox1w5sx7t] {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    letter-spacing: 0.3em;
    color: rgba(200, 180, 120, 0.45);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
    animation: portalHeaderReveal-b-jox1w5sx7t 0.8s ease-out 0.6s both;
    padding-bottom: 0.5rem;
}

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

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

@media (max-width: 380px) {
    .portal-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;
    }
}