/* style.css v9 - Mobile Responsiveness Patch */

:root {
    /* TIMING */
    --intro-total-duration: 5.1s;
    --delay-word-1: 0.1s;
    --delay-word-2: 1.4s;
    --delay-word-3: 2.8s;
    
    /* FX */
    --punch-duration: 0.8s; 
    --punch-scale-start: 6.0; 
    --punch-scale-end: 1.2;

    /* PALETTE */
    --bg-dark: #18181b;   /* Zinc 900 */
    --bg-light: #e7e5e4;  /* Stone 200 */
    --text-on-dark: #e4e4e7; /* Zinc 200 */
    --text-on-light: #0c0a09; /* Stone 950 */
}

html { scroll-behavior: smooth; }

body { 
    background-color: var(--bg-dark); 
    color: var(--text-on-dark); 
    font-family: 'Courier Prime', monospace; 
    overflow-x: hidden; 
    font-size: 16px; 
    margin: 0;
    padding: 0;
}

/* =========================================
   CYPHER / OBFUSCATION LAYER (Safety)
   ========================================= */
.cypher-text { 
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.cypher-ready .cypher-text { 
    visibility: visible; 
    opacity: 1;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
.font-authority { font-family: "Times New Roman", serif; }
.font-glossary { font-family: 'Merriweather', serif; }
.font-impact { font-family: 'Anton', sans-serif; }
.font-lie { font-family: "Comic Sans MS", cursive; }
.font-raw { font-family: 'Courier Prime', monospace; }
.font-tannenberg { font-family: 'UnifrakturCook', cursive; }

/* SECTIONS */
.section-light { background-color: var(--bg-light); color: var(--text-on-light); }
.section-dark { background-color: var(--bg-dark); color: var(--text-on-dark); }

/* CODE BLOCKS */
.code-card-dark { background-color: #09090b; border: 1px solid #3f3f46; color: #a1a1aa; font-family: 'Courier Prime', monospace; }
.code-card-light { background-color: #fafaf9; border: 1px solid #d6d3d1; color: #57534e; font-family: 'Courier Prime', monospace; }

/* INTRO ANIMATIONS */
@keyframes intro-fadeout { 0% { opacity: 1; z-index: 100; pointer-events: all; } 85% { opacity: 1; z-index: 100; pointer-events: all; } 100% { opacity: 0; z-index: -1; pointer-events: none; } }
@keyframes color-to-grey { 0% { filter: grayscale(0%) brightness(100%); transform: scale(1.05); } 100% { filter: grayscale(100%) brightness(40%); transform: scale(1.0); } }
#intro-layer { animation: intro-fadeout var(--intro-total-duration) forwards linear; position: fixed; inset: 0; background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 9999; }
.intro-bg-img { animation: color-to-grey var(--intro-total-duration) forwards linear; width: 100%; height: 100%; object-fit: cover; }
.intro-word { opacity: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

@keyframes text-slam { 0% { opacity: 0; transform: scale(3); filter: blur(4px); } 10% { opacity: 1; transform: scale(1); filter: blur(0px); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes text-pop { 0% { opacity: 0; transform: scale(1.5); } 10% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.word-1 { animation: text-slam 1.5s var(--delay-word-1) forwards; }
.word-2 { animation: text-pop 1.5s var(--delay-word-2) forwards; }
.word-3 { animation: text-pop 1.5s var(--delay-word-3) forwards; }

/* UI & FX */
.glass-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; position: relative; font-size: 14px; overflow: hidden; }
.glass-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.2); }
.glass-btn:active { transform: scale(0.95); } 

.shake-anim { animation: shake 0.3s; border-color: #ef4444 !important; color: #ef4444 !important; }
@keyframes shake { 0%,100% { transform:translateX(0); } 25%,75% { transform:translateX(-5px); } 50% { transform:translateX(5px); } }
.success-anim { border-color: #22c55e !important; color: #22c55e !important; background-color: rgba(34,197,94,0.1) !important; }

@keyframes tutorial-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); border-color: rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); border-color: rgba(34, 197, 94, 1); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); border-color: rgba(34, 197, 94, 0.4); } }
.tutorial-highlight { animation: tutorial-pulse 2s infinite; position: relative; z-index: 50; }
.tutorial-highlight::after { content: "SUGGESTED"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #22c55e; color: black; font-size: 8px; padding: 1px 4px; font-family: 'Anton', sans-serif; letter-spacing: 1px; }

.strike-fx { position: absolute; pointer-events: none; z-index: 50; font-family: 'Anton'; text-transform: uppercase; text-shadow: 0 0 15px rgba(0,0,0,0.9); -webkit-text-stroke: 2px black; animation: strike-pop 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
@keyframes strike-pop { 0% { opacity: 0; transform: scale(var(--punch-scale-start)) rotate(-25deg); } 15% { opacity: 1; transform: scale(var(--punch-scale-end)) rotate(0deg); } 25% { transform: scale(calc(var(--punch-scale-end) * 0.9)); } 40% { transform: scale(var(--punch-scale-end)); } 80% { opacity: 1; transform: scale(var(--punch-scale-end)); } 100% { opacity: 0; transform: scale(calc(var(--punch-scale-end) * 1.5)) translateY(-50px); } }

.tooltip-container { position: relative; height: 6rem; }
.tooltip-text { visibility: hidden; width: 300px; background: #fafaf9; color: #1c1917; padding: 15px; position: absolute; bottom: 120%; left: 50%; margin-left: -150px; opacity: 0; transition: 0.2s; border: 2px solid #000; pointer-events: none; z-index: 60; box-shadow: 10px 10px 0 rgba(0,0,0,0.8); }
.tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateY(-10px); }
.glossary-title { font-weight: 900; font-family: 'Times New Roman'; text-transform: uppercase; border-bottom: 2px solid #000; display: block; margin-bottom: 10px; }
.glossary-body { font-family: 'Merriweather'; font-size: 14px; }

.scanlines::before { content: " "; position: absolute; inset: 0; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)); z-index: 20; background-size: 100% 2px, 3px 100%; pointer-events: none; }
.ink-overlay { background-image: url('https://www.transparenttextures.com/patterns/black-felt.png'); opacity: 0.5; mix-blend-mode: multiply; }
@keyframes modal-in { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.modal-animate { animation: modal-in 0.4s ease-out forwards; }
@keyframes zoom-slam { 0% { transform: scale(3); opacity: 0; filter: blur(10px); } 40% { transform: scale(0.9); opacity: 1; filter: blur(0px); } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.animate-zoom-slam { animation: zoom-slam 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes slide-in-top { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.animate-slide-in { animation: slide-in-top 0.5s ease-out forwards; }

/* ==========================================================================
   MODULE: SELECT YOUR REALITY (Mobile Responsive Patch)
   ========================================================================== */

/* 1. Main Container - Controls the "Screen" behavior */
.reality-selection-section {
    background-color: #0b0b0b;
    color: #e0e0e0;
    width: 100%;
    /* Key Fix: Use min-height instead of fixed height to allow scrolling */
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 100px 20px; /* Big bottom padding for button safety */
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
}

/* 2. Header Elements */
.reality-header {
    text-align: center;
    margin-bottom: 40px;
    z-index: 2;
    max-width: 800px;
}

.reality-header h1 {
    font-family: "Times New Roman", serif;
    font-size: 3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
    line-height: 1.1;
}

.reality-header .subtitle {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    letter-spacing: 3px;
    opacity: 0.7;
    text-transform: uppercase;
}

/* 3. The Grid System */
.reality-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 50px;
    z-index: 2;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* 4. Individual Cards */
.reality-card {
    background: #111;
    border: 1px dashed #333;
    width: 350px; /* Base width for desktop */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.reality-card.active {
    border: 2px solid #d32f2f;
    box-shadow: 0 0 25px rgba(211, 47, 47, 0.4);
    transform: translateY(-5px);
    z-index: 10;
}

.reality-card.locked {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.reality-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 9/16; /* Portrait standard */
    object-fit: cover;
    object-position: top center;
    display: block;
}

.card-content {
    padding: 20px;
    text-align: left;
    background: #111;
}

.card-title {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 8px;
    font-family: "Times New Roman", serif;
    text-transform: uppercase;
}

.card-meta {
    font-size: 0.65rem;
    color: #666;
    font-family: monospace;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.card-quote {
    font-style: italic;
    font-size: 0.85rem;
    color: #999;
    line-height: 1.4;
    border-left: 2px solid #333;
    padding-left: 10px;
}

/* 5. The Action Button */
.action-area {
    margin-top: 20px;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-initiate {
    background-color: #991b1b; /* Red 800 */
    color: white;
    border: 2px solid #7f1d1d;
    padding: 20px 60px;
    font-family: 'Courier Prime', monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-initiate:hover {
    background-color: #dc2626; /* Red 600 */
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
    transform: scale(1.05);
}

/* =========================================
   SMARTPHONE OVERRIDES (The Critical Fix)
   ========================================= */
@media screen and (max-width: 768px) {
    
    .reality-selection-section {
        padding-top: 30px;
        height: auto !important; /* Force scroll capability */
    }

    .reality-header h1 {
        font-size: 2rem; /* Smaller title */
        padding: 0 10px;
    }

    .reality-grid {
        flex-direction: column; /* Stack cards vertically */
        align-items: center;
        gap: 40px;
    }

    .reality-card {
        width: 100%;       /* Use full container width */
        max-width: 90%;    /* But leave a small margin */
    }
    
    .reality-card.active {
        transform: none; /* Disable hover lift on touch */
    }

    .btn-initiate {
        width: 90%; /* Easy to tap target */
        padding: 20px;
        font-size: 1rem;
    }
}