/* * TUWA - OpenTuwa
 * Copyright (c) 2024-2026 Tuwa Media (Haykal M. Zaidi).
 * All Rights Reserved. 
 */
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
    background: transparent !important; 
}

html, body { 
    overflow: hidden !important; 
    height: 100vh;
    width: 100vw; /* Ensure strict width */
    margin: 0;
}

#transition-fade-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000 !important; /* Pure Black for Cinema Feel */
    z-index: 2147483647; /* Max Layer to cover everything */
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth Cinema Ease */
    will-change: opacity; /* Hardware acceleration for smoothness */
}

#transition-fade-layer.active {
    opacity: 1;
    pointer-events: all;
}

/* --- 1. GLOBAL & TV RESET --- */
:root { 
    --vh: 100vh; 
    --accent: #F5F5F7; 
    --accent-glow: rgba(245, 245, 247, 0.2); 
    --bg: #030303; 
    --text: #f0f0f0; 
    --radius-sm: 8px; 
    --radius-md: 16px; 
    --radius-lg: 24px; 
    --transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 2026 Cinematic Glass Vars */
    --glass-surface: rgba(20, 20, 20, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1); 
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --surface: rgba(255, 255, 255, 0.05); /* Fallback */
}

html { box-sizing: border-box; font-size: 62.5%; }

*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--bg);
    background-image: radial-gradient(circle at 50% 10%, #1a1a1a 0%, #121212 70%);
    color: var(--text);
    line-height: 1.6;
    font-size: 1.6rem;
    height: 100vh; 
    overflow: hidden !important; 
    display: flex; flex-direction: column;
}
/* --- APP BRANDING (Standard Alignment + Flat Top Axis) --- */
.appx-brand {
 position: fixed;
    top: 40px; 
    
    /* LTR = Right, RTL = Left */
    inset-inline-end: 5%; 
    
    z-index: 9000;
    display: flex;
    align-items: center; 
    flex-direction: row; 
    gap: 0.2px; /* Reduced from 14px to 1px to pull the img 98% closer to the text */
    
    text-decoration: none;
    height: 42px; 
    
    transform-origin: center left;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0, 1) scale(1.6);
}

/* RTL Flip */
html[dir="rtl"] .appx-brand {
    transform-origin: center right;
}

.appx-brand:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

/* BRAND ICON */
.brand-icon img {
    width: 108px; 
    height: 58px;
    opacity: 0.5;
    display: block;
    object-fit: contain;
    transform: translate(18%, 14%);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* BRAND TEXT - THE FLAT TOP FIX */
.brand-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 900; 
    font-size: 29.8px; 
    

    letter-spacing: -2.5px; 
    
    color: #fff; 
    opacity: 19;
    
    line-height: 1; 
    margin-top: 2px; 
    
    text-shadow: 0 4px 30px #1a1d29;
    white-space: nowrap;
}

/* MOBILE RESPONSIVENESS */
@media screen and (max-width: 1024px) {
    .brand-text {
         
    }
    
    .appx-brand {
        inset-inline-end: 20px; 
        top: 25px;
    }
}

/* --- APP BRANDING (Standard Alignment + Flat Top Axis) --- */
.app-brand {
    position: fixed;
    top: 40px; 
    
    /* LTR = Right, RTL = Left */
    inset-inline-end: 5%; 
    
    z-index: 9000;
    display: flex;
    align-items: center; 
    flex-direction: row; 
    gap: 0.2px; /* Reduced from 14px to 1px to pull the img 98% closer to the text */
    
    text-decoration: none;
    height: 42px; 
    
    transform-origin: center left;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* RTL Flip */
html[dir="rtl"] .app-brand {
    transform-origin: center right;
}

.app-brand:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

/* BRAND ICON */
.brand-icon img {
    width: 108px; 
    height: 58px;
    opacity: 0.5;
    display: block;
    object-fit: contain;
    transform: translate(18%, 14%);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* BRAND TEXT - THE FLAT TOP FIX */
.brand-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 900; 
    font-size: 29.8px; 
    

    letter-spacing: -2.5px; 
    
    color: #fff; 
    opacity: 19;
    
    line-height: 1; 
    margin-top: 2px; 
    
    text-shadow: 0 4px 30px #1a1d29;
    white-space: nowrap;
}

@media screen and (max-width: 1024px) {
    .app-brand {
        /* 1. Reset the side anchor */
        inset-inline-end: auto; 
        
        /* 2. Push to horizontal center */
        left: 50%;
        transform: translateX(-50%); 
        
        /* 3. Keep your top spacing */
        top: 25px;

        /* Optional: ensure it stays flex for internal items */
        display: flex;
        justify-content: center;
        align-items: center;
        width: max-content; /* Keeps it from stretching full-width */
    }

    /* Keep your existing font and icon size changes below this... */
    .brand-text { font-size: 19.8px; }
    .brand-icon img { width: 54px; height: 29px; }
}
}


/* --- ISLAND SEARCH BOX --- */
/* --- ISLAND SEARCH BOX FIX --- */
#island-search-wrapper {
    /* 1. Force Positioning */
    position: fixed !important;
    top: auto !important;    /* CRITICAL: Prevents it from sticking to top */
    bottom: 30px !important; /* Force the bottom gap */
    left: 0 !important;
    
    /* 2. Constrain Geometry */
    width: 100% !important;
    height: auto !important; /* CRITICAL: Prevents full-screen stretching */
    
    /* 3. Layout */
    display: flex !important;
    align-items: flex-end !important; /* Safety: Ensure alignment is bottom-biased */
    justify-content: flex-start !important;
    
    /* 4. Visuals */
    padding-left: 5%; 
    gap: 12px;
    z-index: 9999 !important;
    pointer-events: none; /* Keep the wrapper click-through */
}


.island-search-box {
    pointer-events: auto; /* Re-enable clicks for the box */
position: relative;
z-index: 10;
    background: #050505;
    backdrop-filter: blur(25px) saturate(100%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;

    display: flex;
    align-items: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
/* Remove the old flex gap that was spacing the button inside */
    gap: 0; 
    
    /* Make padding symmetrical since the button is gone */
    padding: 6px 14px; 
    
    /* Ensure the input fills the space */
    width: 240px; /* Base width */
    transform: translateY(0);
}
/* --- SLIM THINKING STATE --- */

.island-search-box.ai-thinking {
    /* Keep it the same width as the idle state (240px) */
    width: 240px !important; 
    
    /* Ensure it doesn't jump or lift if you hover during thinking */
    transform: translateY(0) !important;
    
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    overflow: visible;
    position: relative;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Ensure the button fades out in place first */
#island-search-wrapper:has(.ai-thinking) .enter-trigger {
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.9); /* Slight shrink without moving */
    pointer-events: none;
    transition: opacity 0.4s ease-out, filter 0.4s ease-out, transform 0.4s ease-out;
}

/* 2. The Sophisticated Border Trace - Adjusted for the slimmer box */
.island-search-box.ai-thinking::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    z-index: -1;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 160deg,
        #f5f5f7 220deg, 
        #d1d1d6 300deg,
        transparent 360deg
    );
    border-radius: inherit;
    animation: ai-rotate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 0.4s; /* Waits for button to fade */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* 2. Updated Glow Effect */
.island-search-box.ai-thinking::after {
    content: '';
    position: absolute;
    inset: 0;           /* Changed from -10px to 0 to stay inside */
    z-index: -1;        /* Use -1 to stay behind content but inside the box */
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.15), 
        transparent 70%
    );
    border-radius: inherit;
    opacity: 0;
    animation: ai-glow-fade 2s ease-in-out infinite alternate;
animation-delay: 1s;
    pointer-events: none; /* Prevents the glow from interfering with clicks */
}



@keyframes ai-glow-fade {
    0% { opacity: 0.2; transform: scale(0.95); }
    100% { opacity: 0.9; transform: scale(1.05); }
}

/* Interaction States */
.island-search-box:focus-within,
.island-search-box:hover {
    width: 340px; /* Expand smoothly */
    background: rgba(25, 25, 25, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}
/* Use a comma to separate the two distinct conditions .island-search-box:focus-within + .enter-trigger */
.island-search-box:hover + .enter-trigger {
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s ease-out, filter 0.4s ease-out, transform 0.4s ease-out;
}

.search-icon-wrapper {
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
}

#island-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 2.3rem;
    height: auto;
    width: 100%;
    outline: none;
    font-weight: 500;
}

#island-input::placeholder {
    color: rgba(255,255,255,0.3);
    font-size: 1.95rem;
}

/* Trigger Button */
.enter-trigger {
/* Give it the same Glassmorphism as the search box so they match */
    background: #050505; 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    
    /* Sizing */

    z-index: 10;
    width: 42px; /* Slightly larger touch target */
    height: 42px;
    border-radius: 50%;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: auto; /* Important: wrapper has pointer-events: none */
/* Smooth, linear-to-ease fade out */
    transition: 
        opacity 0.5s ease-out, 
        transform 0.5s ease-out,
        filter 0.5s ease-out;
    will-change: opacity, filter;
}



.enter-trigger:hover, .enter-trigger:focus {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.enter-trigger:hover .key-hint, .enter-trigger:focus .key-hint {
    
}

.key-hint {
    color: rgba(255,255,255,0.7);
    font-size: 4rem;
    font-weight: 900;
    line-height: 0;
    margin-top: -2px;
}

/* Shake Animation for No Results */
@keyframes island-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.island-error {
    animation: island-shake 0.3s ease-in-out;
    border-color: rgba(255, 80, 80, 0.5);
}
#transition-fade-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #121212;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1);
}

#transition-fade-layer.active {
    opacity: 1;
    pointer-events: all;
}

/* --- 2. DASHBOARD STYLES --- */
#dashboard-view {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2000;
    background: #050505;
    overflow: hidden !important; /* Force Single Page */
    display: none;
    padding-left: 0 !important; 
    
    /* FLEX LAYOUT FOR CENTERING */
    flex-direction: column;
    justify-content: flex-start; /* Default: Top alignment */
    transition: justify-content 0.6s cubic-bezier(0.2, 0, 0, 1);
}
#dashboard-view::-webkit-scrollbar { display: none !important; }

#dashboard-view.active { display: flex; animation: fadeIn 0.5s ease; }

/* THE MAGIC: If Title is Empty, Center Content Vertically */
#dashboard-view:has(#door-hero-title:empty) {
    justify-content: center;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hero-banner {
    /* Adjusted Height for "Single Fish" (55vh instead of 75vh) */
    height: 55vh; 
    width: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 5%;
    overflow: hidden;
    background: #121212;
    
    /* Smooth Layout Transition */
    transition: height 0.7s cubic-bezier(0.2, 0, 0, 1), opacity 0.5s ease, padding 0.5s ease;
    flex-shrink: 0;
    opacity: 1;
}

/* COLLAPSED STATE: If Title is Empty */
#dashboard-view:has(#door-hero-title:empty) .hero-banner {
    height: 0vh !important;
    min-height: 0 !important;
    padding: 0 5% !important; /* Keep horizontal padding, kill vertical */
    opacity: 0;
    pointer-events: none;
}

.hero-preview-layer {

    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
}
.hero-preview-layer.active { opacity: 1; }

.preview-img {
    width: 100%; height: 100%; 
    object-fit: contain; object-position: center right;
    filter: invert(1) drop-shadow(0 0 20px rgba(255,255,255,0.2));
    transform: scale(0.9); opacity: 0.6; transition: opacity 0.5s ease;
}

img:not([src]), img[src=""], img[src="#"] { visibility: hidden !important; }
img { color: transparent; text-indent: -10000px; }
img:-moz-broken { display: none !important; }

.hero-shadow-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    background: linear-gradient(
        to right, 
        #121212 0%, 
        rgba(0,0,0,0.9) 20%, 
        rgba(0,0,0,0.4) 60%, 
        transparent 100%
    );
}
.hero-shadow-overlay::after {
    content: '';
    position: absolute; bottom: 0; left: 0; width: 100%; height: 30%;
    background: linear-gradient(to top, #121212 10%, transparent 100%);
}

.hero-content { max-width: 650px; z-index: 5; position: relative; margin-top: 5vh; }

.hero-super { 
    display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;
    font-weight: 700; color: #aaa; letter-spacing: 1px;
    text-transform: uppercase; font-size: 1.1rem; align-items: baseline;
}
.hero-super span.text-content { position: relative; top: -2px; }

.hero-super span.badge, .hero-super span.badges { 
    background: transparent; 
    color: var(--accent); 
    padding: 2px 8px; 
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 4px; 
    font-size: 1rem; 
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: none; 
    opacity: 0.8;
    transform: none;
}
.heroz-title-text { 
    /* VERIFIED: 'clamp' ensures titles don't explode on laptop but stay big on TV */
    font-size: clamp(10rem, 5vw, 20rem); font-weight: 910; line-height: 1; 
    margin-bottom: 22rem; text-shadow: 0 4px 30px rgba(0,0,0,1); color: #fff; opacity: 0.7;
}
/* Target mobile devices (typically below 768px) */
@media (max-width: 768px) {
    .heroz-title-text {
font-size: clamp(4rem, 5vw, 6rem);
text-align: left;    /* Keeps text aligned to the left of its box */
margin-left: 0;      /* Removes the negative offset that caused the overflow */
width: 100%;         /* Allows text to use the full width, or set a specific % */
transform: none;


    }
}
.hero-title-text { 
    font-size: clamp(7rem, 5vw, 14rem); font-weight: 900; line-height: 1; 
    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,1); color: #fff; opacity: 0.7;
}

.hero-subtitle {
    display: none;
    font-family: 'Amiri'; font-size: 2.2rem; color: var(--accent);
    margin-bottom: 1.5rem; font-weight: 400; text-shadow: 0 2px 10px rgba(0,0,0,0.8); padding-left: 1%; opacity: 0.5;
}
.hero-desc { 
    display: none;
    color: #ccc; font-size: 1.5rem; margin-bottom: 2.5rem; line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); max-width: 600px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.row-section { 
    padding: 0 0 2rem 0; 
    position: relative; z-index: 5; 
    background: linear-gradient(to bottom, transparent, #050505 20%); 
    transition: margin-top 0.7s cubic-bezier(0.2, 0, 0, 1); /* Animate the slide */
}

/* OVERLAP MODE: Only when Hero exists (Title NOT empty) */
#dashboard-view:not(:has(#door-hero-title:empty)) .row-section {
    margin-top: -12vh; /* Overlap the hero slightly */
}

/* CENTER MODE: No overlap when hero is gone */
#dashboard-view:has(#door-hero-title:empty) .row-section {
    margin-top: 0;
}

.row-section:has(.surah-card:hover),
.row-section:has(.surah-card:focus),
.row-section:focus-within {
    z-index: 100;
}

.row-header {
    width: fit-content;
    display: flex; align-items: center;
    margin-left: 5%; margin-bottom: 1.5rem;
    padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none;
    font-size: 2rem; font-weight: 500; color: #fff;
    letter-spacing: -0.01em; text-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

/* FIXED SCROLLER: Single Page Optimization */
.card-scroller { 
    display: flex; 
    gap: 1rem; 
    overflow-x: auto; 
    padding: 4rem 5%; 
    scroll-behavior: smooth; 
    content-visibility: auto; 
    contain-intrinsic-size: 1px 280px; 
    overscroll-behavior-x: contain; 
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

/* Clean Glass Cards */
.surah-card {
    flex: 0 0 280px; 
    aspect-ratio: 16 / 9;
    height: auto;
    background: rgba(20, 20, 20, 0.7); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem;
    will-change: transform, opacity;
}

/* VERIFIED: Added clearer TV focus state */
.surah-card:focus, .surah-card:hover { 
    transform: scale(1.05); 
    z-index: 10;
    background: rgba(30, 30, 30, 0.9);
    border-color: var(--accent);
    border-width: 2px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 0 1px var(--accent); 
    outline: none;
}

.card-bg-num { display: none; position: absolute; top: -15px; right: 5px; font-size: 7rem; font-weight: 900; color: rgba(255,255,255,0.05); line-height: 1; }
.card-title { font-size: 1.8rem; font-weight: 700; color: #fff; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { display: none; font-size: 1.1rem; color: #aaa; z-index: 2; margin-top: 0.2rem; }

/* --- 3. SEARCH OVERLAY & EXTRAS (Full Width Fixes) --- */
#search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #141414; z-index: 2500; 
    padding-left: 0 !important; 
    display: none; grid-template-columns: 350px 1fr;
}
#search-overlay.active { display: grid; }

.keyboard-section {
    background: #121212; padding: 4rem 2rem; display: flex; flex-direction: column;
    border-right: 1px solid #333;
}
#search-input-display {
    background: #333; color: #fff; padding: 1rem; font-size: 2rem;
    border: 1px solid #fff; margin-bottom: 2rem; min-height: 50px; display: flex; align-items: center;
}
.keyboard-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.key {
    aspect-ratio: 1; background: #333; color: #fff; font-size: 1.4rem;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; border: 2px solid transparent; transition: transform 0.1s;
}
.key:focus, .key:hover { border-color: #fff; background: #555; transform: scale(1.1); z-index: 2; outline: none; }
.key.wide { grid-column: span 2; aspect-ratio: auto; height: 50px; }

.results-section {
    padding: 4rem;
    overflow: hidden !important;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform;
    padding-bottom: 300px;
}

.no-results {
    font-size: 2.2rem;
    color: rgba(255,255,255,0.3);
    text-align: center;
    margin-top: 20%;
}

@keyframes pulse-gradient {
    0% { color: #888; }
    50% { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
    100% { color: #888; }
}
.ai-thinking {
    grid-column: 1 / -1;
    display: flex; gap: 10px; align-items: center; justify-content: center;
    padding: 2rem;
    font-size: 1.4rem;
    animation: pulse-gradient 1.5s infinite;
}

/* --- 4. CINEMA VIEW STYLES --- */
#cinema-view {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    display: flex; flex-direction: column;
    transition: opacity 0.5s;
    opacity: 0; pointer-events: none;
}
#cinema-view.active { opacity: 1; pointer-events: all; z-index: 1000; }

#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #121212; z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease; padding: 2rem;
}
.loader-spinner {
    width: 50px; height: 50px; border: 2px solid rgba(255,255,255,0.1); border-radius: 50%;
    border-top-color: var(--accent); animation: spin 0.8s ease-in-out infinite; margin-bottom: 2rem;
}
.start-btn {
   display: none;
    /* 1. Layout & Sizing */
    position: relative; 
    left: 50%;
    transform: translate(-50%, -250%); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    z-index: 999;
    
    /* Use min-width instead of 120% to avoid parent container overflow issues */
    min-width: 200px; 
    padding: 14px 32px; 
    
    /* 2. Visuals: Glassmorphism (2026 Standards) */
    background: rgba(255, 255, 255, 0.1); /* Subtle transparency */
    backdrop-filter: blur(12px);          /* Core glass effect */
    -webkit-backdrop-filter: blur(12px);   /* Safari support */
    
    /* Corrected: Use low alpha (0.1 to 0.3) for realistic depth */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); 
    
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 4px;     
    color: #ffffff; /* Ensure high contrast for accessibility */
    
    /* 3. Typography */
    font-size: 1.5rem;
    font-family: var(--font-body);
    font-weight: 900;        
    letter-spacing: -0.02em;   
    
    /* 4. Animation Settings */
    cursor: pointer;
    /* Use will-change sparingly; usually only if performance lags on low-end devices */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background 0.3s, 
                box-shadow 0.3s;
}

.start-btn:focus, .start-btn:hover { 
   display: none;
    /* Keep translate values consistent to avoid "jumping" */
    transform: translate(-50%, -240%) scale(1.02); 

    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    /* Hover shadow: slightly deeper, but not solid black */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3); 
    outline: none; 
}
/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    .start-btn {
width: 50%;
max-width: 20px;   
display: block;   
margin: 0 auto;     
font-size: 1.1rem;
padding: 12px 24px;
box-sizing: border-box;  


        
        /* Optional: adjust vertical position if -250% is too high for mobile */
        
    }

    .start-btn:focus, .start-btn:hover { 
        /* Match the X-axis centering for mobile hover states */
       
    }
}
.container {
  /* 1. VISIBILITY FIX: */
  /* I removed 'opacity: 0.2'. That command fades the CHILDREN (text) too. 
     The transparency is now handled solely by the background rgba below. */
  background: rgba(255, 255, 255, 0.05); /* Lowered alpha to 0.05 for subtle look */
  
  backdrop-filter: blur(-130px);          
  -webkit-backdrop-filter: blur(-130px); 
  border-radius: 12px;                  
  border: 1px solid rgba(255, 255, 255, 0.1); 
  
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; height: 100%; padding: 2rem; padding-bottom: 12rem; 
  
  /* 2. POSITION FIX: */
  position: relative; 
  z-index: 1; /* Brings it to normal layer so content is seen */
  
  /* 3. INTERACTION FIX: */
  /* This ensures the background itself doesn't "bother" clicks. 
     Mouse clicks will pass through the empty parts of the container. */
  pointer-events: none; 
}

#content-display {
    text-align: center; width: 100%; max-width: 1200px; margin: 0 auto;
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center; position: relative;
    
    /* 4. RESTORE CLICKS: */
    /* Since the parent is pointer-events: none, we must re-enable clicks 
       for the actual content so you can select text or click buttons. */
    pointer-events: auto; 
}

/* --- The rest of your CSS remains unchanged below --- */

#chapter-title {
display: none;
    font-family: 'Inter', sans-serif;
    position: fixed; top: 2rem; left: 2rem; 
    color: #F5F5F7;
    font-weight: 600; 
    text-shadow: 
        0px 2px 10px rgba(0, 0, 0, 0.2), 
        0px 10px 20px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    z-index: 100; mix-blend-mode: difference;
    transition: transform 0.5s ease, opacity 0.5s ease;
    /* Ensure title is clickable */
    pointer-events: auto; 
}

body.idle #chapter-title { transform: translateX(100%); opacity: 0; pointer-events: none; }





#translation-text {
    font-family: 'Inter', sans-serif;
    line-height: 1.7; flex-grow: 0; flex-shrink: 1; max-height: 30%;
    overflow-y: auto; white-space: pre-wrap; text-align: center;
    padding: 0 2rem; 
    transition: opacity 0.3s;
    color: #F5F5F7;
    font-weight: 600; 
    text-shadow: 
        0px 2px 10px rgba(0, 0, 0, 0.2), 
        0px 10px 20px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
}

#control-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 0.5rem; 
    padding: 2rem;
    background: linear-gradient(to top, #121212 20%, transparent);
    transition: transform 0.4s ease, opacity 0.4s ease; 
    z-index: 100;
    opacity: 1;
    /* Ensure controls are clickable */
    pointer-events: auto; 
}

body.idle #control-panel { transform: translateY(100%); opacity: 0; pointer-events: none; }

select {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem; 
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    background-color: #1a1a1a;
    color: #e5e5e5;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    width: 120%; 
    max-width: 100%; 
}

select:focus {
    outline: none;
    border-color: #fff;
    background-color: #252525;
}

@media screen and (max-width: 768px) {
    select {
        width: 100% !important;
        font-size: 1.1rem;      
        padding: 0.7rem 2rem 0.7rem 0.8rem;
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    #dashboard-view { padding-left: 0 !important; }
    #chapter-title { display: none;}
    .container { padding: 0; padding-bottom: 230px; }
    #control-panel { display: grid; grid-template-columns: 1fr 1fr; }
}

#verse-container, #verse-text, #verse-text-next, .active-verse-img { 
    display: none !important; 
}



/* Preview Subtitles */
#hero-subtitle-overlay {
    display: none;
    position: fixed !important; bottom: 120px; right: 5%; max-width: 600px;
    color: #fff; font-size: 1.4rem; font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    z-index: 3000 !important; opacity: 0; transition: opacity 0.3s;
    background: rgba(0,0,0,0.2); padding: 1.5rem 2rem; border-radius: 4px;
    backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
#hero-subtitle-overlay.active { opacity: 1; }

@media (max-width: 768px) {
    #dashboard-view { padding-left: 0 !important; }
    #chapter-title { position: relative; top: 0; left: 0; width: 100%; text-align: center; padding: 1.5rem 0; mix-blend-mode: normal; }
    .container { padding: 0; padding-bottom: 100px; }
    #control-panel { display: grid; grid-template-columns: 1fr 1fr; }
    .ai-card-border { border-color: rgba(0, 255, 187, 0.4) !important; }
}

/* --- 5. VERIFIED: RAW 4K SAFETY NET --- */
/* SMART VERIFICATION: 
   - Standard Laptops (1080p-1440p) are < 2000px wide. This block is IGNORED.
   - High-DPI Laptops (MacBook/Surface) use scaling (e.g. 200%), so browser sees ~1440px. IGNORED.
   - Standard TV Apps report 1920x1080. IGNORED.
   - PC CONNECTED TO TV @ 4K (100% Scale): Browser sees 3840px. 
     -> This block ACTIVATES to prevent tiny text at 10ft.
*/
@media screen and (min-width: 2500px) {
    html {
        font-size: 100%; /* Boost base font for Raw 4K inputs */
    }
    .surah-card {
        flex: 0 0 350px; /* Wider cards for huge screens */
    }
    .hero-banner {
        padding: 0 10%;
    }
}

/* --- 6. RUG PROTECTION ARMOR (ANTI-GLITCH OVERLAYS) --- */
/* * This section adds invisible 'hit-boxes' around interactive elements 
 * to prevent them from flickering (glitch loops) when the mouse 
 * is on the edge during a transform/move animation.
 */

/* 1. Start Button Armor */
.start-btn::before {
    content: '';
    position: absolute;
    top: -50px; bottom: -50px; left: -50px; right: -50px; /* Generous safety margin */
    z-index: -1;
    border-radius: inherit;
    background: transparent;
}

/* 2. Island Search Armor */
/* We use ::after here on the idle state to expand the hit area */
.island-search-box:not(.ai-thinking)::after {
    content: '';
    position: absolute;
    inset: -30px; /* Catches rapid mouse exits */
    z-index: -1;
    border-radius: 60px;
    background: transparent;
}

/* 3. Dashboard Button Armor */
.dash-btn {
display: none;
    position: relative; /* Ensure pseudo aligns to button */
}
.dash-btn::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
}

/* 4. Surah Card Armor */
.surah-card {
    position: relative; /* Ensure pseudo aligns to card */
}
.surah-card::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
}
}
/* --- PREMIUM HORSE / LANDING PAGE ENHANCEMENT (v2.0) --- */

/* --- 0. GLOBAL PRESETS & VARS --- */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-surface: rgba(255, 255, 255, 0.03);
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- 1. CRITICAL LOCKDOWN (DRM STYLE) --- */
/* While this class is on body, ONLY the premium is visible. */
body.premium-lockdown > *:not(#premium-landing):not(script):not(style) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Freeze the scrollbar entirely */
body.premium-lockdown {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important; /* Fixed prevents iOS rubber-banding */
}

/* --- 2. MAIN CONTAINER --- */
#premium-landing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505; /* Deepest black */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.8s var(--ease-out-expo);
    touch-action: none;
    z-index: 2147483647; /* Max integer */
    transform: translate3d(0,0,0); /* Force GPU */
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#premium-landing.premium-hidden {
    pointer-events: none;
    opacity: 0;
}

/* --- 3. BRAND REPLICA --- */
.premium-brand-replica {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.premium-brand-replica img { height: 32px; width: auto; }
.premium-brand-replica span {
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* --- 4. CONTENT WRAPPER --- */
.premium-content {
    text-align: center;
    /* CHANGED: Removed max-width 600px constraint to allow full width alignment */
    width: 100%; 
    max-width: 100%; 
    padding: 2rem 0; /* Vertical padding only, horiz handled by children */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center; /* This keeps the Card and Button centered */
    gap: 1.5rem;
    transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo);
}

/* State: Exit Animation */
.premium-content.content-hidden {
    opacity: 0;
    transform: scale(0.96) translateY(-10px);
    pointer-events: none;
}

/* Typography */
.premium-title {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 10vw, 4.5rem);
    font-weight: 999;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;

    /* Left Alignment Logic - DESKTOP */

    text-align: center;             
    width: 100%;                  
    max-width: 1200px;            /* Reads better on ultra-wide */

    
    background: linear-gradient(180deg, #FFFFFF 10%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-subtitle {
    font-family: var(--font-body);
    font-size: 2.15rem;
    color: #a1a1a6;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;

    /* Left Alignment Logic - DESKTOP */

    text-align: center;
    max-width: 700px;

}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .premium-content { 
        padding: 1.5rem; 
        max-width: 100%; /* Ensure full width on mobile too */
    }
    
    /* Reset to center for mobile */
    .premium-title, .premium-subtitle { 
        font-size: 2.25rem; /* Slightly smaller for mobile safety */
        align-self: center; 
        text-align: center;
        padding-left: 0; /* Remove the desktop offset */
        width: 100%;
        max-width: 100%;
    }

    .premium-subtitle {
        font-size: 1rem;
        max-width: 90%; /* prevent edge touching */
    }
    
    .premium-brand-replica { top: 1.5rem; left: 1.5rem; }
    .premium-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); } 
}

.price-term {
display: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
    white-space: nowrap;
}

/* --- 5. THE PRICE HOOK (GLASS CARD) --- */
.premium-card-wrapper {
    scale: 1.4;
    width: 100%;
    max-width: 300px; 
    max-height: 600px;
    border-radius: 4px;
    padding: 3rem 2rem;
    margin: 1.5rem 0 2.5rem 0;
    text-align: center;
    transition: transform 0.4s var(--ease-out-expo);
    white-space: nowrap;
    
    /* Ensure it stays centered even if title is left */
    align-self: center; 
}

.premium-card-wrapper:hover {
    transform: translateY(-5px);
}

.premium-price-tag {
display: none;
    align-items: center;
    gap: 0.25rem;
    color: #ffffff;
    font-family: var(--font-heading);
    white-space: nowrap;
    min-height: 120px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.premium-price-tag .price-period {
display: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 0.25rem;
}

.premium-price-tag .price-big {
display: none;
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    
    background: linear-gradient(180deg, #FFFFFF 40%, #A0A0A0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
    opacity: 0; 
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.price-big.loaded {
    opacity: 1;
    transform: translateY(0);
}

.premium-price-tag .price-term-common {
display: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

/* --- 6. ACTION BUTTON --- */


/* Disclaimer text */
.premium-legal-disclaimer {
    display: none;
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    max-width: 400px;
    line-height: 1.5;
    margin-top: 1rem;
    font-weight: 400;
}


/* --- 8. PHANTOM FOOTER --- */
.premium-footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1.5rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4a4a4a;
    font-family: var(--font-body);
    font-size: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s var(--ease-out-expo), opacity 0.5s ease;
    z-index: 3;
}

.premium-footer.footer-reveal {
    transform: translateY(0);
    opacity: 1;
}

.premium-legal-links {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.5rem;
}

.premium-legal-links span {
    cursor: pointer;
    transition: color 0.2s;
}

.premium-legal-links span:hover {
    color: #888;
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes premiumSpin { to { transform: rotate(360deg); } }
@keyframes textPulse { 
    0%, 100% { opacity: 0.5; } 
    50% { opacity: 1; } 
}

/* --- AUTH MODAL STYLES (Real Database) --- */
#auth-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 2147483647;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
}

.auth-glass-panel {
    width: 100%; max-width: 400px;
    padding: 40px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}

#auth-title { font-size: 2.4rem; color: #fff; margin-bottom: 8px; font-weight: 700; }
#auth-subtitle { color: #888; font-size: 1.4rem; margin-bottom: 30px; }

#auth-form { width: 100%; display: flex; flex-direction: column; gap: 16px; }

#auth-form input {
    width: 100%; padding: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff; font-size: 1.6rem; outline: none;
    transition: all 0.3s ease;
}

#auth-form input:focus { border-color: #F5F5F7; background: rgba(255,255,255,0.1); }

#auth-submit-btn {
    width: 100%; padding: 16px; margin-top: 10px;
    background: #F5F5F7; color: #000;
    font-weight: 700; font-size: 1.6rem;
    border: none; border-radius: 99px;
    cursor: pointer; transition: transform 0.2s;
}

#auth-submit-btn:hover { transform: scale(1.02); }

.auth-footer { margin-top: 24px; font-size: 1.4rem; color: #666; }
#toggle-auth-mode { cursor: pointer; transition: color 0.2s; }
#toggle-auth-mode:hover { color: #fff; }
#toggle-auth-mode b { color: #fff; }

#auth-message { margin-top: 15px; color: #ff4d4d; font-size: 1.3rem; min-height: 20px; }

/* --- CINEMA SEEK VISUALS --- */
.cinema-seek-indicator {
    position: fixed; /* Changed from absolute to fixed to ensure visibility */
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 100px;
    height: 100px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 2147483600; /* Super high Z-Index to stay above video players */
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.cinema-seek-indicator svg {
    width: 36px;
    height: 36px;
    fill: #fff;
    margin-bottom: 4px;
}

.cinema-seek-indicator span {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.02em;
}

/* Positions */
.cinema-seek-indicator.left { left: 10%; }
.cinema-seek-indicator.right { right: 10%; }

/* Active State */
.cinema-seek-indicator.active {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}