/*
================================================================================
This Area Of Code Is: CSS Variables and Design Tokens
Explanation: I defined CSS custom properties for the glass morphism design system including transparency values, gold accent colors, dynamic viewport units (dvh/dvw), and safe area insets for iPhone notch/home indicator compatibility.
In Other Words: This sets up the colors, transparency levels, and viewport measurements for the app.
================================================================================
*/

:root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-light: rgba(255, 255, 255, 0.1);
    --primary-gold: #fbbf24;
    --primary-gold-dark: #f59e0b;
    --success-green: #10b981;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --bg-dark: #0f172a;
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100dvh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    overflow-x: hidden;
}

/*
================================================================================
This Area Of Code Is: Video Background Container
Explanation: I styled the video background using fixed positioning with 100dvw/dvh units to account for dynamic viewport changes on mobile. The video uses object-fit cover to maintain aspect ratio and has a gradient overlay for text legibility.
In Other Words: This makes the background video cover the entire screen on any device.
================================================================================
*/

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: 0;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.6;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(15, 23, 42, 0.85) 0%, 
        rgba(15, 23, 42, 0.7) 50%, 
        rgba(15, 23, 42, 0.9) 100%
    );
}

/*
================================================================================
This Area Of Code Is: App Header with Hamburger-to-SCN Morph Animation
Explanation: I created a fixed header with a hamburger menu button that transforms into the <SCN/>™ logo when clicked. The animation uses CSS transitions on opacity, transform rotate, and scale to morph the three lines into the logo text with a golden glow effect.
In Other Words: This is the top bar where the menu button turns into your SCN logo when you click it.
================================================================================
*/

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding-top: var(--safe-top);
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.menu-btn {
    width: 50px;
    height: 44px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex-shrink: 0;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
    position: absolute;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.scn-logo {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 10px;
    color: var(--primary-gold);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
    letter-spacing: -0.5px;
}

/* Morph Animation States */
.menu-btn.active .hamburger {
    opacity: 0;
    transform: scale(0);
}

.menu-btn.active .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    opacity: 0;
}

.menu-btn.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-btn.active .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    opacity: 0;
}

.menu-btn.active .scn-logo {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
}

.menu-btn:hover {
    background: var(--glass-bg-strong);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    border-color: var(--primary-gold);
}

.header-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.3px;
    text-align: center;
    flex: 1;
    margin: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.home-btn:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/*
================================================================================
This Area Of Code Is: Live Stats Display - ENHANCED GLASS PILLS
Explanation: Positioned below header with intrinsic width pills. Features 2px broader borders, enhanced glass morphism with inner shadows, shimmer animations, and auto-sizing based on content.
In Other Words: These badges now have thicker glass borders and shimmer effects while fitting exactly to their text content.
================================================================================
*/

.live-stats {
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    padding: 10px 15px;
    margin-top: calc(60px + var(--safe-top));
    width: 100%;
    max-width: 600px;
    pointer-events: none;
}

.live-stats > * {
    pointer-events: auto;
}

/* Glassy Pill Base Styles - Intrinsic Width */
.welcome-badge,
.cards-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    color: white;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Welcome Back Specific - Broader Border Glass Effect */
.welcome-badge {
    font-family: 'Dancing Script', cursive;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.welcome-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: pillShimmer 3s infinite;
}

@keyframes pillShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Cards Badge Specific - Broader Border Glass Effect */
.cards-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
.welcome-badge:hover,
.cards-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.2);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { opacity: 0.5; transform: scale(0.8); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

/*
================================================================================
This Area Of Code Is: Side Navigation Menu
Explanation: I created a slide-out drawer menu using transform translateX for 60fps animation performance, with backdrop blur on the overlay and glass morphism styling on the menu panel itself.
In Other Words: This is the menu that slides in from the left when you click the hamburger.
================================================================================
*/

.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 340px);
    height: 100dvh;
    background: rgba(15, 23, 42, 0.98);
    border-right: 1px solid var(--glass-border);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding-top: var(--safe-top);
    backdrop-filter: blur(10px);
    -webkit-overflow-scrolling: touch;
}

.side-menu.open {
    transform: translateX(0);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.98);
    z-index: 10;
}

.menu-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: white;
}

.close-menu {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.close-menu:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.menu-content {
    padding: 15px;
}

.menu-item {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    text-align: left;
}

.menu-item:hover {
    background: var(--glass-bg-strong);
    transform: translateX(5px);
    border-color: var(--primary-gold);
}

.menu-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 15px 0;
}

.menu-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-left: 5px;
}

/*
================================================================================
This Area Of Code Is: Jump-to-Card Grid System
Explanation: I expanded the grid from 2 columns to 5 columns with smaller buttons to accommodate 100 cards. Added max-height with scrolling to prevent menu overflow. Each button shows the emoji icon and card number for quick navigation.
In Other Words: This is the grid of buttons to jump to any of the 100 cards - now with 5 columns and scrollable.
================================================================================
*/

.card-jumps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

/* Custom scrollbar for webkit browsers */
.card-jumps::-webkit-scrollbar {
    width: 6px;
}

.card-jumps::-webkit-scrollbar-track {
    background: transparent;
}

.card-jumps::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 3px;
}

.jump-btn {
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border-light);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    touch-action: manipulation;
}

.jump-btn span {
    font-size: 16px;
    line-height: 1;
}

.jump-btn:hover, .jump-btn.active {
    background: var(--glass-bg-strong);
    color: white;
    border-color: var(--primary-gold);
    transform: scale(1.05);
}

.jump-btn.active {
    background: rgba(251, 191, 36, 0.2);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 380px) {
    .card-jumps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*
================================================================================
This Area Of Code Is: Main App Layout - PERFECT CENTERING
Explanation: I used flexbox with justify-content: center and align-items: center to center the card both vertically and horizontally on all viewport sizes. The padding accounts for the fixed header and safe areas.
In Other Words: This arranges the card and buttons perfectly in the middle of the screen.
================================================================================
*/

.app-main {
    position: relative;
    z-index: 10;
    min-height: 100dvh;
    padding: 20px 15px calc(120px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

/*
================================================================================
This Area Of Code Is: Content Card Component with True Glass
Explanation: I designed the joke display card with glass morphism styling, gradient borders, 3D shadow effects, and shimmer animations. The card adapts height based on content while maintaining minimum dimensions for touch targets.
In Other Words: This is the big see-through card in the middle showing the jokes.
================================================================================
*/

.card-container {
    width: 100%;
    max-width: 600px;
    perspective: 1000px;
    margin-top: 10px;
}

.content-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: clamp(25px, 6vw, 50px) clamp(15px, 4vw, 40px);
    min-height: 300px;
    max-height: calc(100dvh - 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    overflow: hidden;
    overflow-y: auto;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 120px rgba(251, 191, 36, 0.15);
}

.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    z-index: 5;
}

.card-icon {
    font-size: clamp(40px, 10vw, 64px);
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: iconFloat 3s ease-in-out infinite;
    line-height: 1;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.setup-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 5vw, 32px);
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/*
================================================================================
This Area Of Code Is: Punchline Text with Toggle Animation
Explanation: I styled the punchline with gold color and smooth fade/slide animation. It starts hidden (opacity: 0) and becomes visible when the user clicks the Show Punchline button or presses Space.
In Other Words: The answer to the joke that appears when you press the button.
================================================================================
*/

.punchline-text {
    font-size: clamp(16px, 4vw, 22px);
    color: var(--primary-gold);
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-height: 30px;
    margin-top: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.punchline-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.card-footer {
    margin-top: auto;
    padding-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 10px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-flag {
    font-size: 16px;
}

.author-name {
    font-style: italic;
    color: var(--text-secondary);
}

/*
================================================================================
This Area Of Code Is: Control Buttons with Glass Morphism
Explanation: I styled navigation buttons using intrinsic sizing with min-height 44px for iOS accessibility guidelines, glass transparency backgrounds, and hover states with transform effects. Buttons use flexbox for icon and text alignment.
In Other Words: These are the Back, Show/Hide Punchline, Next, Add Joke, and Auto Mode buttons.
================================================================================
*/

.controls-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
}

.nav-btn, .action-btn {
    min-height: 48px;
    padding: 14px 28px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: white;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    flex: 1;
    min-width: 120px;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
}

.nav-btn:hover, .action-btn:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-gold);
}

.add-joke-btn {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.add-joke-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.auto-mode-btn {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
    position: relative;
    overflow: hidden;
}

.auto-mode-btn.active {
    animation: goldenPulse 2s infinite;
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    background: rgba(251, 191, 36, 0.2);
}

@keyframes goldenPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.2); }
}

/*
================================================================================
This Area Of Code Is: Speed Control Segmented Buttons
Explanation: I created a hidden-by-default speed selector that appears when auto-mode is active, using segmented button styling with active states indicating current selection.
In Other Words: These are the Slow/Medium/Fast buttons that appear in Auto Mode.
================================================================================
*/

.speed-controls {
    display: none;
    gap: 10px;
    justify-content: center;
    animation: slideDown 0.3s ease;
    flex-wrap: wrap;
    width: 100%;
}

.speed-controls.visible {
    display: flex;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.speed-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    line-height: 1.3;
    backdrop-filter: blur(10px);
    min-width: 80px;
    touch-action: manipulation;
}

.speed-btn small {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

.speed-btn:hover {
    background: var(--glass-bg-strong);
    color: white;
}

.speed-btn.active {
    background: var(--primary-gold);
    color: #0f172a;
    border-color: var(--primary-gold);
    font-weight: 600;
}

.guidelines-link {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 10px;
    transition: color 0.3s;
    background: none;
    border: none;
    padding: 8px;
}

.guidelines-link:hover {
    color: var(--text-secondary);
}

/*
================================================================================
This Area Of Code Is: Modal Dialog Components
Explanation: I designed centered modal dialogs using fixed positioning with flexbox centering, glass morphism backgrounds, and transform animations for open/close states. Modals include form inputs with focus states and high-contrast text.
In Other Words: These are the popup windows for adding jokes and viewing guidelines.
================================================================================
*/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.modal.open {
    display: flex;
    opacity: 1;
}

.modal-content {
    width: 100%;
    max-width: 480px;
    max-height: 85dvh;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s;
    -webkit-overflow-scrolling: touch;
}

.modal.open .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.98);
    z-index: 10;
    padding-bottom: 15px;
}

.modal-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: white;
}

.close-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-gold);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

.location-group {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--glass-border-light);
}

.location-options {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.help-text {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.submit-btn, .cancel-btn, .ok-btn {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    touch-action: manipulation;
}

.submit-btn {
    background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    min-width: 140px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.cancel-btn {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    min-width: 120px;
}

.cancel-btn:hover {
    background: var(--glass-bg-strong);
    color: white;
}

.form-disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 15px;
    line-height: 1.5;
}

.guidelines-content {
    line-height: 1.6;
}

.guidelines-content p {
    margin-bottom: 15px;
    color: var(--text-secondary);
}

.guidelines-content ul {
    list-style: none;
    margin-bottom: 20px;
}

.guidelines-content li {
    padding: 8px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border-light);
}

.guidelines-content li:last-child {
    border-bottom: none;
}

.ok-btn {
    background: var(--primary-gold);
    color: #0f172a;
    width: 100%;
    margin-top: 10px;
}

.ok-btn:hover {
    background: var(--primary-gold-dark);
    transform: translateY(-2px);
}

/* Accessibility Modal Styles */
.accessibility-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.accessibility-modal.open {
    display: flex;
}

.accessibility-content {
    background: linear-gradient(135deg, rgba(15,23,42,0.98) 0%, rgba(30,41,59,0.99) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 25px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.7);
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.access-category {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.access-category:last-child {
    border-bottom: none;
}

.access-category h3 {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.access-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 8px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
    touch-action: manipulation;
}

.access-btn:hover, .access-btn.active {
    background: rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,215,0,0.2);
}

.access-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 14px 15px;
    margin-bottom: 10px;
    color: white;
    font-size: 14px;
    transition: all 0.3s;
    cursor: pointer;
    flex-wrap: wrap;
    gap: 10px;
}

.access-toggle:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
}

.toggle-switch {
    width: 50px;
    height: 26px;
    background: rgba(255,255,255,0.2);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-switch.active {
    background: #ffd700;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.toggle-switch.active::after {
    left: 26px;
}

.accessibility-header {
    text-align: center;
    margin-bottom: 25px;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
    padding-bottom: 10px;
}

.accessibility-header h2 {
    color: #ffd700;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
}

.accessibility-header p {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

.color-filter-label {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    margin: 10px 0 8px 0;
}

.close-modal-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border: none;
    border-radius: 25px;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
    touch-action: manipulation;
}

.close-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.4);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 10;
}

.scroll-indicator.visible {
    opacity: 1;
}

.scroll-text {
    font-size: 10px;
    color: rgba(255,215,0,0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    animation: fadePulse 2s infinite;
}

.scroll-mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255,215,0,0.6);
    border-radius: 13px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    position: relative;
    background: rgba(255,215,0,0.05);
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: #ffd700;
    border-radius: 2px;
    animation: scrollBounce 1.5s infinite;
    box-shadow: 0 0 10px rgba(255,215,0,0.8);
}

.scroll-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}

.scroll-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255,215,0,0.6);
    animation: arrowPulse 1.5s infinite;
    margin: -2px 0;
}

.scroll-arrow:nth-child(2) {
    animation-delay: 0.2s;
    opacity: 0.6;
}

.scroll-arrow:nth-child(3) {
    animation-delay: 0.4s;
    opacity: 0.3;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.5; }
}

@keyframes fadePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

@keyframes arrowPulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(3px); opacity: 0.5; }
}

.translation-bar {
    position: fixed;
    bottom: calc(20px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    z-index: 50;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

/*
================================================================================
This Area Of Code Is: APPLE DEVICE SPECIFIC FIXES
Explanation: Targeted corrections for iPhone SE through iPad Pro to prevent overlap and ensure proper layout flow.
In Other Words: Specific fixes for all Apple screen sizes.
================================================================================
*/

/* iPhone SE / Small devices (375px and below) */
@media (max-width: 375px) {
    .live-stats {
        padding: 8px 10px;
        gap: 6px;
    }
    .welcome-badge {
        font-size: 15px;
        padding: 6px 12px;
    }
    .cards-badge {
        font-size: 12px;
        padding: 6px 12px;
    }
    .card-container {
        margin-top: 5px;
    }
    .content-card {
        padding: 20px 15px;
        min-height: 280px;
    }
    .setup-text {
        font-size: 18px;
    }
    .punchline-text {
        font-size: 15px;
    }
}

/* iPhone 12/13/14/15 Pro and similar (390px-430px) */
@media (min-width: 390px) and (max-width: 430px) {
    .content-card {
        min-height: 320px;
        max-height: calc(100dvh - 300px);
    }
    .card-container {
        margin-top: 15px;
    }
}

/* iPhone 14/15 Pro Max (large phones) */
@media (min-width: 430px) and (max-width: 480px) {
    .content-card {
        min-height: 350px;
        max-height: calc(100dvh - 280px);
    }
}

/* Landscape mode fixes for ALL iPhones */
@media (max-height: 500px) and (orientation: landscape) {
    .live-stats {
        position: absolute;
        top: calc(60px + var(--safe-top));
        right: 15px;
        width: auto;
        margin-top: 0;
        flex-direction: column;
        padding: 5px;
    }
    .welcome-badge, .cards-badge {
        font-size: 12px;
        padding: 4px 8px;
    }
    .app-main {
        padding-top: 10px;
        justify-content: center;
    }
    .card-container {
        margin-top: 40px;
    }
    .content-card {
        min-height: 200px;
        max-height: calc(100dvh - 180px);
        padding: 20px;
    }
    .setup-text {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .punchline-text {
        font-size: 14px;
    }
    .card-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .accessibility-content {
        max-height: 90vh;
    }
    .side-menu {
        padding-top: calc(var(--safe-top) + 10px);
    }
}

/* iPad and iPad Pro (768px and up) */
@media (min-width: 768px) {
    .live-stats {
        margin-top: calc(60px + var(--safe-top));
        padding: 15px;
        gap: 12px;
    }
    .welcome-badge {
        font-size: 19px;
        padding: 10px 18px;
    }
    .cards-badge {
        font-size: 15px;
        padding: 10px 18px;
    }
    .card-container {
        margin-top: 20px;
        max-width: 600px;
    }
    .content-card {
        min-height: 400px;
        max-height: calc(100dvh - 350px);
        padding: 50px 40px;
    }
    .app-main {
        padding: 30px 30px calc(140px + var(--safe-bottom));
    }
}

/* iPad Landscape */
@media (min-width: 1024px) and (orientation: landscape) {
    .card-container {
        max-width: 700px;
    }
    .content-card {
        min-height: 450px;
        max-height: calc(100dvh - 300px);
    }
    .nav-btn, .action-btn {
        font-size: 17px;
        padding: 16px 32px;
    }
}

/* General Mobile Fixes (480px and below) */
@media (max-width: 480px) {
    .setup-text { font-size: 20px; }
    .punchline-text { font-size: 16px; }
    .content-card { 
        padding: 25px 15px; 
        min-height: 280px;
        max-height: calc(100dvh - 260px);
    }
    .nav-btn, .action-btn { 
        padding: 12px 20px; 
        font-size: 14px; 
        min-width: 100px;
        flex: 1 1 auto;
    }
    .speed-btn { padding: 8px 14px; font-size: 12px; }
    .modal-content { padding: 20px; }
    .translation-bar { font-size: 11px; padding: 6px 12px; }
    .card-jumps { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .jump-btn { padding: 6px 2px; font-size: 11px; min-height: 40px; }
    .jump-btn span { font-size: 14px; }
    .accessibility-content { padding: 20px; }
    .menu-btn { width: 44px; height: 40px; }
    .home-btn { width: 40px; height: 40px; }
    .header-title { font-size: 18px; }
    .card-badge { font-size: 10px; padding: 4px 8px; top: 10px; right: 10px; }
    .card-icon { font-size: 36px; margin-bottom: 10px; }
    .card-footer { padding-top: 20px; font-size: 12px; }
    .side-menu { width: min(90vw, 300px); }
    .modal-content { max-height: 90dvh; }
}

/* Very small devices (360px and below) */
@media (max-width: 360px) {
    .live-stats {
        padding: 5px;
        gap: 4px;
    }
    .welcome-badge {
        font-size: 14px;
        padding: 5px 10px;
    }
    .cards-badge {
        font-size: 11px;
        padding: 5px 10px;
    }
    .content-card { min-height: 260px; }
    .nav-btn, .action-btn { min-width: 90px; padding: 10px 16px; font-size: 13px; }
    .setup-text { font-size: 18px; }
    .punchline-text { font-size: 15px; }
    .controls-row { gap: 6px; }
    .accessibility-content { padding: 15px; }
    .access-grid { gap: 8px; }
    .jump-btn { min-height: 38px; font-size: 10px; }
    .access-toggle { font-size: 12px; }
    .form-actions { flex-direction: column; }
    .submit-btn, .cancel-btn { width: 100%; }
}

/* Fix for iPhone with Dynamic Island (iPhone 14 Pro/15 Pro) */
@supports (height: 100dvh) and (padding: env(safe-area-inset-top)) {
    .live-stats {
        margin-top: calc(60px + max(15px, var(--safe-top)));
    }
}

/* Color Vision Filters */
.filter-deuteranomaly { filter: url('#deuteranomaly'); }
.filter-deuteranopia { filter: url('#deuteranopia'); }
.filter-protanomaly { filter: url('#protanomaly'); }
.filter-protanopia { filter: url('#protanopia'); }
.filter-tritanomaly { filter: url('#tritanomaly'); }
.filter-tritanopia { filter: url('#tritanopia'); }
.filter-achromatopsia { filter: grayscale(100%) brightness(1.1); }

/* Cognitive & Neurodivergent Mode Styles */
.autism-mode * { transition: all 0.5s ease !important; }
.autism-mode .content-card { border-width: 3px; }

.adhd-mode { font-family: 'Inter', sans-serif; }
.adhd-mode .setup-text { font-size: 28px; }

.dyslexia-mode * { font-family: 'Inter', sans-serif; letter-spacing: 0.05em; }
.dyslexia-mode p { line-height: 1.8; }

.anxiety-mode .content-card {
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 25px 50px -12px rgba(74, 144, 226, 0.2);
}

.ptsd-mode { animation: none !important; }
.ptsd-mode .content-card::before { display: none; }
.ptsd-mode * { animation-duration: 0s !important; transition-duration: 0.3s !important; }

/* Scripture Banner */
.scripture-banner {
    width: 100%;
    max-width: 600px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 10px;
    display: none;
    backdrop-filter: blur(10px);
}

.scripture-banner.visible {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.scripture-content {
    text-align: center;
}

.scripture-label {
    display: block;
    color: var(--primary-gold);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.scripture-text {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 10px;
    font-style: italic;
}

.scripture-ref {
    display: block;
    color: var(--primary-gold);
    font-size: 13px;
    font-weight: 600;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode */
.high-contrast {
    --glass-bg: rgba(0, 0, 0, 0.9);
    --glass-border: rgba(255, 255, 255, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
}

.high-contrast .content-card {
    border-width: 3px;
    border-color: #ffffff;
}

/* Mania mode */
.mania-mode {
    --energy-color: #ffd700;
}

.mania-mode .content-card {
    animation: none;
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}