@property --accent {
    syntax: '<color>';
    initial-value: #29BDFD; /* Sky */
    inherits: true;
}

:root {
    /* Your Custom Palette */
    --pure-black: #000000;
    --card-bg: rgba(22, 22, 22, 0.65); /* Hex #161616 converted to RGBA for glass effect */
    --sky: #29BDFD;
    --light-blue: #6977F9;
    --emerald: #34D399;
    --pink: #F472B6;
    --orange: #FB923C;
    --red: #FF0000;
    --bright-red: #EF4444;
    --gold: #FBBF24;
    --glass-border: #262626;
    --grid-gray: #1A1A1A;
    
    /* System Typography & Accents */
    --text-main: #ffffff;
    --text-dim: #a3a3a3;
    --accent-glow: rgba(41, 189, 253, 0.4); /* Sky glow */
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. BASE RESET & BACKGROUND GRID */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--pure-black);
    /* The Engineering Grid Overlay */
    background-image: 
        linear-gradient(var(--grid-gray) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-gray) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 2. ATMOSPHERIC BACKGROUND GLOWS */
.glow-1, .glow-2 {
    position: fixed; width: 80vw; height: 80vw; z-index: -1; pointer-events: none; filter: blur(100px);
}
.glow-1 {
    top: -20%; left: -20%;
    background: radial-gradient(circle, rgba(41, 189, 253, 0.15) 0%, transparent 70%); /* Sky */
}
.glow-2 {
    bottom: -20%; right: -20%;
    background: radial-gradient(circle, rgba(105, 119, 249, 0.1) 0%, transparent 70%); /* Light Blue */
}

/* 3. LAYOUT & GLASS UI */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    transition: var(--transition);
}
.glass-card:hover { border-color: rgba(41, 189, 253, 0.3); }

/* 4. NAVIGATION */
.glass-nav {
    position: sticky; top: 0; z-index: 1000; padding: 1rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border);
}
.nav-left { display: flex; align-items: center; gap: 1rem; }
.status-pill { font-family: var(--font-mono); font-size: 0.65rem; padding: 0.4rem 0.8rem; display: flex; align-items: center; gap: 6px; }

.pulse-emerald { color: var(--emerald); animation: blink 1.5s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.terminal-links { display: flex; gap: 1.5rem; }
.term-link { text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); transition: var(--transition); }
.term-link span { color: var(--sky); opacity: 0.5; }
.term-link:hover { color: var(--text-main); text-shadow: 0 0 10px var(--accent-glow); }

/* 5. HERO SECTION */
.hero { padding: 5rem 0 3rem; }
.mono-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 1rem; display: block; text-transform: uppercase; }
h1, h2 { font-size: 2.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 1.5rem; }
.text-glow { text-shadow: 0 0 20px var(--accent-glow); color: var(--sky); }
.hero-subtext { font-size: 1.1rem; color: var(--text-dim); max-width: 600px; }

/* 6. PROJECT CARDS */
.flagship { padding: 2rem; margin-top: 2rem; border-top: 2px solid var(--sky); }
.project-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
.small { padding: 1.5rem; display: flex; flex-direction: column; }
.small h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.link { color: var(--sky); text-decoration: none; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; margin-top: auto; padding-top: 1.5rem; display: inline-block; }
.link:hover { color: var(--light-blue); }

/* Code Snippet */
.code-snippet { margin: 1.5rem 0; padding: 1rem; font-family: var(--font-mono); font-size: 0.8rem; background: var(--pure-black); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--emerald); overflow-x: auto; }

/* 7. SKILL MATRIX */
.skill-matrix { margin: 3rem 0; padding: 2rem; }
.matrix-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.5rem; }
.skill-category h4 { font-family: var(--font-mono); color: var(--light-blue); margin-bottom: 1rem; font-size: 0.85rem; text-transform: uppercase; }
.skill-category ul { list-style: none; }
.skill-category li { color: var(--text-dim); margin-bottom: 0.5rem; padding-left: 1.2rem; position: relative; font-size: 0.95rem; }
.skill-category li::before { content: ">"; position: absolute; left: 0; color: var(--gold); font-family: var(--font-mono); }

/* 8. FOOTER */
.timer-display { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800; color: var(--sky); text-shadow: 0 0 15px var(--accent-glow); margin-top: 0.5rem; }

/* 9. DESKTOP ADAPTATION */
@media (min-width: 768px) {
    h1, h2 { font-size: 4rem; }
    .project-grid { grid-template-columns: 1fr 1fr; }
    .matrix-grid { grid-template-columns: repeat(2, 1fr); }
    .timer-display { font-size: 2.5rem; }
}

/* 10. BUTTONS & CALLS TO ACTION */
.cta-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.9rem 1.5rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.primary-btn {
    background: var(--sky);
    color: var(--pure-black);
    box-shadow: 0 0 15px rgba(41, 189, 253, 0.2);
    border: 1px solid var(--sky);
}

.primary-btn:hover {
    background: transparent;
    color: var(--sky);
    box-shadow: 0 0 25px rgba(41, 189, 253, 0.4);
}

.secondary-btn {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--glass-border);
}

.secondary-btn:hover {
    border-color: var(--emerald);
    color: var(--emerald);
    background: rgba(52, 211, 153, 0.05);
}

/* Side-by-side buttons on larger screens */
@media (min-width: 768px) {
    .cta-stack {
        flex-direction: row;
    }
}

/* 11. FLAGSHIP LAYOUT & LOGO */
.flagship-layout {
    display: flex;
    flex-direction: column-reverse; /* Logo on top for mobile, content below */
    gap: 2.5rem;
    align-items: center;
}

.project-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 220px; /* Keeps logo reasonably sized on mobile */
}

.app-logo {
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--glass-border);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
}

/* Hover effect on the entire card makes the logo pop */
.flagship:hover .app-logo {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(41, 189, 253, 0.25); /* Sky blue glow */
    border-color: rgba(41, 189, 253, 0.4);
}

/* Desktop Adaptation for Flagship */
@media (min-width: 768px) {
    .flagship-layout {
        flex-direction: row; /* Content on left, Logo on right */
        justify-content: space-between;
    }
    
    .project-content {
        flex: 1;
        padding-right: 2rem;
    }

    .project-visual {
        flex: 0 0 280px; /* Slightly larger logo on desktop */
    }
}

/* 12. UNBREAKFOCUS PLAY STORE UI  */
.store-container {
    padding-top: 2rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.app-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

@media (min-width: 768px) {
    .app-header {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
}

.app-icon {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    border: 1px solid var(--glass-border);
}

.app-title-block {
    flex: 1;
}

.developer-name {
    color: var(--emerald);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

.app-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.stat-divider {
    width: 1px;
    height: 24px;
    background: var(--glass-border);
}

.screenshot {
    height: 400px;
    width: auto; /* Ensures the phone ratio doesn't get stretched or squished */
    scroll-snap-align: start;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
    border-radius: 16px; /* Gives the images nice rounded corners */
    object-fit: cover;
}

.app-about {
    padding: 2rem;
}

.install-btn {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    text-align: center;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition);
}

.install-btn.active {
    background: var(--sky);
    color: var(--pure-black);
    font-weight: 700;
}

.install-btn.active:hover {
    box-shadow: 0 0 20px rgba(41, 189, 253, 0.4);
    transform: translateY(-2px);
}

.howtoinstall-btn {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    text-align: center;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition);
}

.howtoinstall-btn.active {
    background: var(--emerald);
    color: var(--pure-black);
    font-weight: 700;
}

.howtoinstall-btn.active:hover {
    box-shadow: 0 0 20px rgba(17, 189, 114, 0.4);
    transform: translateY(-2px);
}

/* --- 13. LAUNCH SEQUENCE UI --- */
.install-btn.disabled-timer {
    background: transparent;
    border: 1px dashed var(--glass-border);
    color: var(--text-dim);
    cursor: not-allowed;
    font-size: 0.85rem;
    box-shadow: none;
    pointer-events: none; /* Prevents clicking */
}

.confetti-particle {
    position: fixed;
    top: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
}

/* --- 14. EASTER EGG: MIDAS TOUCH (GOLD MODE) --- */
body.gold-mode {
    /* Hijack the system variables to Gold / Amber */
    --sky: var(--gold);
    --light-blue: #F59E0B; /* Darker amber for depth */
    --emerald: var(--gold);
    --accent-glow: rgba(251, 191, 36, 0.4);
    --grid-gray: rgba(251, 191, 36, 0.15); /* Turns the background grid gold */
    
    /* A quick flash of light when activated */
    animation: midas-flash 0.5s ease-out;
}

/* Modify the Status Pill specifically */
body.gold-mode .status-pill {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

/* Make the blinking pulse dot gold instead of emerald */
body.gold-mode .pulse-emerald {
    color: var(--gold);
}

/* Flash Animation */
@keyframes midas-flash {
    0% { filter: brightness(2); }
    100% { filter: brightness(1); }
}

/* Force elements to inherit the color change instantly without the transition delay */
body.gold-mode, 
body.gold-mode * {
    transition-duration: 0.2s !important;
}

/* --- 15. FIREBASE REVIEW SYSTEM UI --- */
.review-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.glass-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-main);
    font-family: var(--font-sans);
    outline: none;
    transition: var(--transition);
    width: 100%;
    resize: vertical;
}

.glass-input::placeholder {
    color: #555;
}

.glass-input:focus {
    border-color: var(--sky);
    box-shadow: 0 0 15px rgba(41, 189, 253, 0.15);
}

.star-rating {
    display: inline-flex;
    flex-direction: row;
    gap: 0.3rem;
    font-size: 2.2rem;
}

.star {
    cursor: pointer;
    color: var(--glass-border);
    transition: var(--transition);
}

.star.hover, .star.active {
    color: var(--gold);
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
    transform: scale(1.1);
}

/* --- 16. COLLAPSIBLE ACCORDION UI --- */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* Uses a cubic-bezier for a snappy 'pop' feel instead of a boring linear slide */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.collapsible-content.expanded {
    max-height: 1500px; /* Safe upper limit to allow content to expand fully */
    opacity: 1;
}

.collapsible-header:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Rotates the '+' into an 'x' when opened */
.collapsible-header.active .toggle-icon {
    transform: rotate(45deg);
    color: var(--emerald); 
}

/* --- 17. REVIEW LOCK UI --- */
#review-section.locked-state .review-form {
    opacity: 0.3;
    pointer-events: none; /* Physically prevents clicking, typing, or hovering */
    filter: blur(3px); /* Smooth frosted glass blur over the inputs */
    user-select: none;
}

#review-section.locked-state .lock-overlay {
    display: flex !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 10, 0.7);
    z-index: 10;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

/* --- 18. PREMIUM CAROUSEL OVERRIDES --- */

/* THIS FIXES THE VERTICAL STACKING */
.screenshot-gallery {
    display: flex; /* Forces images into a horizontal row */
    gap: 1rem; /* Space between images */
    overflow-x: auto; /* Enables horizontal scrolling */
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory; /* Snaps images neatly into place */
    
    /* Premium overrides */
    -ms-overflow-style: none;  /* Hide scrollbar IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar Firefox */
    scroll-behavior: smooth; /* Enables buttery smooth JS scrolling */
    position: relative;
}

/* Hide the ugly native scrollbar for Chrome/Safari */
.screenshot-gallery::-webkit-scrollbar {
    display: none; 
}

/* Floating Glass Navigation Buttons */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--sky);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-nav-btn:hover {
    background: var(--sky);
    color: var(--pure-black);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-50%) scale(1.1);
}

.left-btn { left: -15px; }
.right-btn { right: -15px; }

@media (max-width: 600px) {
    .gallery-nav-btn {
        display: none;
    }
}

/* --- EXCLUSIVE LAUNCH DAY GOLD BUTTON --- */
.install-btn.gold-launch-btn {
    background: var(--gold) !important;
    color: var(--pure-black) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4) !important;
}

.install-btn.gold-launch-btn:hover {
    background: transparent !important;
    color: var(--gold) !important;
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.6) !important;
}

/* --- 19. LAUNCH DAY ACCELERATING PULSE --- */
@keyframes gold-heartbeat {
    0% { transform: scale(1); box-shadow: none; border-color: var(--glass-border); color: var(--text-dim); }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); 
        border-color: var(--gold); 
        color: var(--gold); 
        text-shadow: 0 0 10px var(--gold);
    }
    100% { transform: scale(1); box-shadow: none; border-color: var(--glass-border); color: var(--text-dim); }
}

.timer-pulse-single {
    animation: gold-heartbeat 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.timer-pulse-fast {
    animation: gold-heartbeat 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    /* Lock the text to gold in the final minute to maximize hype */
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* --- 20. GLOBAL PREMIUM FOOTER --- */
.global-footer {
    margin-top: 4rem; /* Pushes it down from the main content */
    padding-top: 4rem;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

/* Desktop layout: Name takes half, links take the rest */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.footer-link {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    transition: var(--transition);
    font-family: var(--font-sans);
}

.footer-link:hover {
    color: var(--sky);
    transform: translateX(5px); /* Smooth slide to the right on hover */
    text-shadow: 0 0 10px var(--accent-glow);
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.4);
}