.kosmo-standalone {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #1c1c1e;
}

html.kosmo-3d-scroll-locked,
body.kosmo-3d-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.kosmo-3d-viewer {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.kosmo-viewer-root {
    position: relative;
    z-index: 0;
    isolation: isolate;
    --kosmo-z-viewer: 1;
    --kosmo-z-preview: 2;
    --kosmo-z-crosshair: 10;
    --kosmo-z-status: 20;
    --kosmo-z-start: 30;
    --kosmo-z-minimap: 40;
    --kosmo-z-error: 50;
    --kosmo-z-particles: 60;
    --kosmo-z-preloader: 70;
    --kosmo-z-room-preview: 80;
    --kosmo-z-dissolve: 90;
    --kosmo-z-entry: 100;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #1c1c1e;
    font-family: Arial, sans-serif;
}

@media (max-width: 767px) {
    .kosmo-viewer-root.is-mobile-disabled #viewer-container,
    .kosmo-viewer-root.is-mobile-disabled #preview-viewer-container,
    .kosmo-viewer-root.is-mobile-disabled #loading-entry,
    .kosmo-viewer-root.is-mobile-disabled #kosmo-preloader,
    .kosmo-viewer-root.is-mobile-disabled #particle-loader,
    .kosmo-viewer-root.is-mobile-disabled #image-dissolve-canvas,
    .kosmo-viewer-root.is-mobile-disabled #start-screen,
    .kosmo-viewer-root.is-mobile-disabled #minimap-panel,
    .kosmo-viewer-root.is-mobile-disabled #status-panel {
        display: none !important;
    }

    .kosmo-viewer-root.is-mobile-disabled #loading-room-preview {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.kosmo-viewer-root #viewer-container {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-viewer);
    width: 100%;
    height: 100%;
    cursor: grab;
    user-select: none;
    background: #1c1c1e;
}

.kosmo-viewer-root.controls-active #viewer-container {
    overscroll-behavior: contain;
    touch-action: none;
}

.kosmo-viewer-root #preview-viewer-container {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-preview);
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 700ms ease;
    pointer-events: none;
}

#preview-viewer-container.is-finished {
    opacity: 0;
}

#minimap-panel,
#status-panel {
    transition: opacity 500ms ease;
}

.kosmo-viewer-root.is-loading #minimap-panel,
.kosmo-viewer-root.is-loading #status-panel {
    opacity: 0;
    pointer-events: none;
}

#kosmo-preloader {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-preloader);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1c1e;
    opacity: 1;
    transition: opacity 650ms ease;
    pointer-events: none;
}

#kosmo-preloader.is-finished {
    opacity: 0;
}

#loading-entry {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-entry);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 20, 0.46);
    opacity: 1;
    transition: opacity 350ms ease;
}

#loading-entry.is-finished {
    opacity: 0;
    pointer-events: none;
}

.intro-3d .exploration_close_btn {
    display: none;
}

.intro-3d .media_context, 
.intro-3d  .game_controls {
    pointer-events: none;
}

.intro-3d .media_badge_tabs button,.intro-3d .get_access_btn{
    pointer-events: all;
}
.p-none{
    pointer-events: none !important;
}

.p-all{
    pointer-events: all !important;
}

.intro-3d .media_context{
    pointer-events: none;
}

.intro-3d.intro-playing button:not(.exploration_close_btn),
.intro-3d.intro-playing .get_access_btn,
.intro-3d.intro-playing .media_context {
    pointer-events: none !important;
}
#kosmo-preloader-animation {
    width: min(429px, calc(100% - 32px));
    height: 76px;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.kosmo-preloader-pill {
    position: relative;
    width: min(349px, calc(100% - 64px));
    height: 36px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    contain: strict;
    transform: translateZ(0);
}

.kosmo-preloader-sweep {
    position: absolute;
    top: 50%;
    left: -60%;
    width: 60%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.16) 35%,
            #ffffff 70%,
            #ff4400 77%,
            #00d5ff 84%,
            rgba(128, 210, 255, 0.45) 91%,
            transparent 100%);
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 8px rgba(0, 198, 255, 0.45);
    transform: translate3d(0, -50%, 0);
    will-change: transform, opacity;
    animation: kosmo-preloader-sweep 1.867s cubic-bezier(0.55, 0, 0.25, 1) infinite;
}

@keyframes kosmo-preloader-sweep {
    0% {
        transform: translate3d(0, -50%, 0);
        opacity: 0;
    }

    9% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        transform: translate3d(266.667%, -50%, 0);
        opacity: 0;
    }
}

/* The particle loader is the only loading UI shown over staged splats. */
#viewer-container .progressBarOuterContainer,
#viewer-container [class^="spinnerOuterContainer"],
#preview-viewer-container .progressBarOuterContainer,
#preview-viewer-container [class^="spinnerOuterContainer"] {
    display: none !important;
}

#viewer-container.is-looking {
    cursor: grabbing;
}

#loading-room-preview {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-room-preview);
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #17130f;
    opacity: 1;
    transition: opacity 700ms ease;
    pointer-events: none;
}

#image-dissolve-canvas {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-dissolve);
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/*
         * Once the real cutout is ready, retain a faint room reference behind
         * its missing wall regions. The cutout remains dominant while the
         * viewer no longer collapses into a large black void.
         */
#loading-room-preview.is-staged {
    opacity: 0.28;
}

#loading-room-preview.is-finished {
    opacity: 0;
}

#error-message {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: var(--kosmo-z-error);
    display: none;
    max-width: calc(100% - 40px);
    padding: 12px 18px;
    color: #fff;
    font-size: 14px;
    background: rgba(180, 0, 0, 0.9);
    border-radius: 6px;
    transform: translateX(-50%);
}

#start-screen {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-start);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
}

.kosmo-viewer-root:not(.is-editor) #start-screen {
    display: none !important;
}

#particle-loader {
    position: absolute;
    inset: 0;
    z-index: var(--kosmo-z-particles);
    overflow: hidden;
    color: #e8faff;
    background: transparent;
    opacity: 1;
    transition: opacity 900ms ease;
    pointer-events: none;
}

#particle-loader.is-finished {
    opacity: 0;
}

#particle-canvas {
    display: none;
    width: 100%;
    height: 100%;
}

#particle-loader-label {
    position: absolute;
    left: 50%;
    bottom: 9vh;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-shadow: 0 0 16px #43c9ff;
    transform: translateX(-50%);
}

#start-card {
    width: min(420px, calc(100% - 40px));
    padding: 28px;
    color: #fff;
    text-align: center;
    background: rgba(15, 15, 15, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

#start-card h2 {
    margin: 0 0 14px;
    font-size: 24px;
}

#start-card p {
    margin: 8px 0;
    color: #d3d3d3;
    font-size: 14px;
    line-height: 1.5;
}

#start-button {
    margin-top: 18px;
    padding: 12px 22px;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    background: #fff;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

#status-panel {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: var(--kosmo-z-status);
    min-width: 220px;
    padding: 12px 14px;
    color: #fff;
    font-size: 13px;
    line-height: 1.65;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
    pointer-events: none;
}

#status-panel strong {
    color: #8fff8f;
}

#minimap-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: var(--kosmo-z-minimap);
    width: var(--minimap-size, 220px);
    padding: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.kosmo-viewer-root:not(.is-editor) #minimap-panel {
    display: none;
}

#minimap-title {
    margin-bottom: 7px;
    color: #b8ffca;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

#minimap-coordinates {
    display: none;
    margin: 7px 0 0;
    color: #d7e4da;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

#minimap {
    display: block;
    width: var(--minimap-size, 220px);
    height: var(--minimap-size, 220px);
    background: #101410;
    border-radius: 5px;
    cursor: crosshair;
    pointer-events: auto;
}

#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--kosmo-z-crosshair);
    display: none;
    width: 6px;
    height: 6px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@media (max-width: 700px),
(max-height: 600px) {
    #minimap-panel {
        width: 140px;
    }

    #minimap {
        width: 140px;
        height: 140px;
    }
}