/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: #840000;
    /* Subtle grey for contrast with stage */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial narrow', sans-serif;
    user-select: none;
    /* Prevent text selection */
    -webkit-user-select: none;
}

/* 📺 The Stage: 9:16 on Desktop, Full on Mobile */
#stage {
    position: relative;
    aspect-ratio: 9 / 16;
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    background-color: white;
    overflow: hidden;

    @media (max-width: 600px) {
        width: 100vw;
        height: 100vh;
        aspect-ratio: auto;
    }
}

/* 🖼️ The Main Panel: The Morphing Shape (3:4) */
#main-panel {
    aspect-ratio: 3 / 4;
    position: absolute;

    /* Spacing & Content */
    overflow: hidden;
    padding: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Mobile Refinement */
    @media (max-width: 600px) {
        padding: 15%;
        aspect-ratio: 4 / 5;
    }

    /* Appearance managed by GSAP initialization */
    will-change: transform,
    width,
    top,
    left;

    /* Visuals */
    background-color: transparent;
    border: 1px solid black;
    z-index: 1;
}

/* 🌀 Phase 6: Refined Dimensional Roulette */
#roulette-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Narrow central corridor */
    height: 100%;
    z-index: 10;
    /* ABOVE text Layering */
    pointer-events: none;
    overflow: visible;



}

.roulette-item {
    position: absolute;
    width: 20%;
    aspect-ratio: 1 / 1;
    /* Maintain square icons/images */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    will-change: transform;
    -webkit-user-drag: none;
    /* Prevent image dragging */
    /* opacity: 0.45; */
    /* Reduced for legibility as it is now on top */
}

/* 🧪 Phase 15: Narrative Image Filters & Color Overlays */
.roulette-item {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.snake-item {
    opacity: 1;
    width: 14%;

}

.horse-item {
    opacity: 1;
    width: 22%;

}

/* 📝 Text Content - Typography from Phase 2/5 */
.content {
    position: relative;
    z-index: 2;
    /* In front of roulette */
    padding: 0;
    /* Responsive Typography managed by JS fitText */
    line-height: 1.4;
    color: black;

    /* Justification & Reflow */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;

    letter-spacing: 0.7em;
    transition: color 0.6s ease;
}

/* 2025 Past: Dense, Glitchy, Heavy */
.past {
    padding: 0;
    /* Adjusted for the 'dense/glitchy' look */
    line-height: 1.5;
    color: #333;
}

/* 2026 Future: Clear, Airy, Bright */
.future {
    padding: 0;

    line-height: 1.5;
    color: #000;
    font-weight: 300;
}