/* Custom styles for Pidgin Pal - Hawaiian Theme */

:root {
    --animation-play-state: running;
    
    /* Default Colors (Island Night) - Always Dark Now */
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 25%, #312e81 50%, #4338ca 75%, #1e1b4b 100%);
    --nav-bg: linear-gradient(to right, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.95));
    --card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent-primary: #fb923c; /* Lava Orange */
    --accent-secondary: #fcd34d; /* Moonlight Gold */
    --nav-link-color: #93c5fd;
}

/* Maintain .dark class for Tailwind compatibility */
.dark {
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 25%, #312e81 50%, #4338ca 75%, #1e1b4b 100%);
    --nav-bg: linear-gradient(to right, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.95));
    --card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent-primary: #fb923c;
    --accent-secondary: #fcd34d;
    --nav-link-color: #93c5fd;
}

/* Island Night Base Styles */
body {
    background: var(--bg-gradient);
    color: var(--text-main);
    background-size: 400% 400%;
    animation: hawaiianSunset 20s ease infinite;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Ensure all text uses main color by default in dark mode */
.dark body {
    color: var(--text-main);
}

/* Fix Hero sections and large containers with proper Island Night gradients */
.dark .hero-gradient,
.dark .translator-hero,
.dark .dictionary-search-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Ensure cards and articles use the themed card background */
.dark article,
.dark .bg-white,
.dark .lesson-card,
.dark .quiz-card {
    background: var(--card-bg);
}

/*
 * Exception to the above: white PILL buttons (rounded-full) sit on saturated
 * colored gradient banners as CTAs and carry colored label text. The
 * card-darkening above would turn them into dark pills, leaving that colored
 * text low-contrast. Keep these pills white so their labels stay readable.
 * rounded-full distinguishes them from content cards (rounded-xl/2xl).
 */
.dark .bg-white.rounded-full:not([class*="dark:bg-"]):not([class*="dark:text-"]) {
    background: #ffffff;
}

/*
 * Dark-theme readability safety net for legacy light-theme markup.
 * Many pages (and JS card templates) were written with hardcoded
 * text-gray-* utilities and no dark: variants. On the always-dark site
 * those render as dark text on dark cards/background and are unreadable.
 *
 * The :not([class*="dark:text-"]) guard means these rules ONLY touch
 * elements that have NO dark:text-* variant of their own. Already-converted
 * markup keeps its explicit dark: colors untouched; only legacy elements
 * (which would otherwise be dark-on-dark) get remapped. The :where() keeps
 * the gray class itself at zero specificity so the guard alone determines
 * precedence.
 */
.dark :where(.text-gray-500):not([class*="dark:text-"]) { color: #94a3b8; } /* slate-400 */
.dark :where(.text-gray-600):not([class*="dark:text-"]) { color: #cbd5e1; } /* slate-300 */
.dark :where(.text-gray-700):not([class*="dark:text-"]) { color: #cbd5e1; }
.dark :where(.text-gray-800):not([class*="dark:text-"]) { color: #e2e8f0; } /* slate-200 */
.dark :where(.text-gray-900):not([class*="dark:text-"]) { color: #f1f5f9; } /* slate-100 */

/*
 * Exception: intentionally LIGHT colored pastel boxes (solid bg-*-50 callouts
 * AND light gradient boxes built from from-*-50/100 / to-*-50/100 stops) are
 * NOT darkened, so the gray text inside them must stay dark to remain
 * readable. Ancestor selector raises specificity above the :where() defaults.
 *
 * NOTE: neutral .bg-gray-50 / .bg-gray-100 are deliberately EXCLUDED here —
 * they're used as full-page body/section wrappers that render dark (the
 * body gradient wins), so their descendants must follow the light default.
 * Saturated gradient stops (-500 etc.) are also excluded; only -50/-100.
 */
.dark :is(
    .bg-yellow-50, .bg-amber-50, .bg-orange-50, .bg-red-50,
    .bg-green-50, .bg-emerald-50, .bg-teal-50,
    .bg-blue-50, .bg-indigo-50, .bg-purple-50, .bg-pink-50,
    /* light gradient boxes: from-/to- stop at the -50 or -100 level only.
       Anchored to end-of-attribute or followed-by-space so -500 etc. never match. */
    [class*="from-"][class$="-50"],  [class*="from-"][class*="-50 "],
    [class*="from-"][class$="-100"], [class*="from-"][class*="-100 "],
    [class*="to-"][class$="-50"],    [class*="to-"][class*="-50 "],
    [class*="to-"][class$="-100"],   [class*="to-"][class*="-100 "]
) :where(.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900):not([class*="dark:text-"]) {
    color: #374151; /* gray-700 — readable on light pastel */
}

/* Fix sticky headers to be semi-transparent dark */
.dark .sticky {
    background-color: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Daily phrase animations and transitions */
#daily-phrase {
    transition: all 0.3s ease-in-out;
}

#daily-phrase.loading {
    transform: scale(0.95);
    opacity: 0.7;
}

/* Tropical button hover effects */
.tropical-button {
    transition: all 0.2s ease;
}

.tropical-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Pulse animation for refresh button */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 0.6s ease-in-out;
}

/* Hawaiian ocean and sunset gradient background */
body {
    background: var(--bg-gradient);
    background-size: 400% 400%;
    animation: hawaiianSunset 20s ease infinite;
    position: relative;
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}

body.dark::before {
    opacity: 0.15; /* Dimmer waves in dark mode */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.03" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,234.7C960,224,1056,192,1152,192C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-position: top, bottom;
    background-repeat: repeat-x;
    animation: waves 10s linear infinite;
    animation-play-state: var(--animation-play-state);
    pointer-events: none;
    z-index: 1;
}

@keyframes hawaiianSunset {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes waves {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1440px);
    }
}

/* Hawaiian pattern overlay */
.hawaiian-pattern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.03;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(255, 255, 255, 0.1) 35px,
        rgba(255, 255, 255, 0.1) 70px
    );
    pointer-events: none;
    z-index: 2;
}

/* Navigation with Hawaiian styling */
nav {
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--accent-primary);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
    color: var(--nav-link-color);
    font-weight: 500;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 50%;
    background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
    transition: all 0.3s ease;
    border-radius: 2px;
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* Dark mode toggle button style */
.dark-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--nav-link-color);
    background: rgba(0,0,0,0.03);
}

.dark .dark-toggle {
    background: rgba(255,255,255,0.05);
}

.dark-toggle:hover {
    background-color: rgba(255, 107, 107, 0.1);
    transform: scale(1.1);
}

/* Hawaiian themed phrase cards */
.phrase-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 2px solid transparent;
    background-clip: padding-box;
    color: var(--text-main);
}

.dark .phrase-card::before {
    opacity: 0.2; /* More visible emoji in dark mode */
}

.phrase-card::before {
    content: '🌺';
    position: absolute;
    font-size: 120px;
    opacity: 0.1;
    right: -30px;
    bottom: -30px;
    transform: rotate(-15deg);
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.3));
}

.phrase-card::after {
    content: '🌴';
    position: absolute;
    font-size: 80px;
    opacity: 0.05;
    left: -20px;
    top: -20px;
    transform: rotate(15deg);
    transition: all 0.3s ease;
}

/* Removed phrase-card hover decorations */

.phrase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Daily phrase animation */
#daily-phrase {
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Translator section styles */
#english-input, #pidgin-output {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
}

#english-input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Hawaiian styled buttons - exclude nav dropdown buttons */
button:not(.nav-link):not(.mobile-dropdown-btn) {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bg-green-500 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.bg-blue-500 {
    background: linear-gradient(135deg, #1e6ba8, #5ca3db) !important;
    box-shadow: 0 4px 15px rgba(30, 107, 168, 0.3);
}

button:not(.nav-link):not(.mobile-dropdown-btn)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:not(.nav-link):not(.mobile-dropdown-btn)::before {
    content: '🌊';
    position: absolute;
    font-size: 150px;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.5s ease;
    pointer-events: none;
}

button:not(.nav-link):not(.mobile-dropdown-btn):active::after {
    width: 400px;
    height: 400px;
}

button:not(.nav-link):not(.mobile-dropdown-btn):hover::before {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1);
}

/* Quiz options hover effect */
.quiz-option {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.quiz-option:hover {
    border-color: #10b981;
    transform: translateX(5px);
}

/* Level button styles */
.level-btn {
    transition: all 0.3s ease;
    position: relative;
}

.level-btn:not(.bg-green-500):hover {
    background-color: #f3f4f6;
}

/* Story articles */
#stories-container article {
    transition: all 0.3s ease;
    padding-left: 0;
}

#stories-container article:hover {
    padding-left: 10px;
    border-left: 4px solid #10b981;
}

/* Footer styles removed - using component-based footer with clean gradient */

/* Mobile menu - using Tailwind .hidden class for simple toggle */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animation for translations */
.translating {
    position: relative;
}

.translating::after {
    content: '...';
    position: absolute;
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

/* Lesson card Hawaiian animation */
.bg-white.rounded-lg.shadow-lg:hover .text-4xl {
    animation: hulaWave 0.8s ease;
}

@keyframes hulaWave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* Hawaiian themed cards */
.lesson-card, .quiz-card {
    background: var(--card-bg);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.lesson-card::before, .quiz-card::before {
    content: '🌊';
    position: absolute;
    font-size: 200px;
    opacity: 0.03;
    bottom: -50px;
    right: -50px;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Cultural insights cards */
article.bg-gray-50, .bg-white.rounded-lg.shadow-lg {
    background: var(--card-bg);
    color: var(--text-main);
    transition: all 0.3s ease;
}

article.bg-gray-50:hover, .bg-white.rounded-lg.shadow-lg:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .phrase-card::before {
        font-size: 60px;
    }

    #daily-phrase p {
        font-size: 1.5rem;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
    }

    nav, footer, button {
        display: none;
    }

    .phrase-card, article {
        page-break-inside: avoid;
    }
}

/* Footer link styling */
.footer-link {
    color: white !important;
}

.footer-link:hover {
    color: #bbf7d0 !important; /* green-200 */
}

/* Footer navigation - remove background gradient */
footer nav {
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Ensure footer links are clickable */
footer nav a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 11 !important;
}

/* Accessibility improvements with Hawaiian colors */
button:focus, a:focus, input:focus, textarea:focus {
    outline: 3px solid #ff6b6b;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.1);
}

/* Hawaiian loading spinner */
.hawaiian-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 107, 107, 0.2);
    border-top-color: #ff6b6b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}

.hawaiian-spinner::after {
    content: '🌺';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Tiki torch animation */
.tiki-torch {
    position: fixed;
    bottom: 20px;
    font-size: 40px;
    animation: flicker 2s ease-in-out infinite;
    z-index: 100;
}

.tiki-torch.left {
    left: 20px;
}

.tiki-torch.right {
    right: 20px;
}

@keyframes flicker {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Hawaiian themed scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #e0f2fe, #fef3c7);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #1e6ba8, #5ca3db);
    border-radius: 10px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ff6b6b, #ffb347);
}

/* Additional Hawaiian elements */
.hawaiian-divider {
    width: 100%;
    height: 40px;
    margin: 2rem 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 40"><path fill="%23ff6b6b" fill-opacity="0.3" d="M0,20 Q360,0 720,20 T1440,20 L1440,40 L0,40 Z"></path></svg>');
    background-size: cover;
}

/* Wave flow animation for learning section */
@keyframes wave-flow {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-10px) translateY(-5px);
    }
    50% {
        transform: translateX(-5px) translateY(-10px);
    }
    75% {
        transform: translateX(5px) translateY(-5px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

.aloha-spirit {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.aloha-spirit::before {
    content: '🤙';
    position: absolute;
    font-size: 60px;
    opacity: 0.1;
    right: 20px;
    top: 20px;
    transform: rotate(-10deg);
}

/* Dictionary Section Hawaiian Styling */
.dictionary-entry {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dictionary-entry::before {
    content: '🌊';
    position: absolute;
    font-size: 100px;
    opacity: 0.05;
    right: -20px;
    bottom: -20px;
    transform: rotate(-15deg);
    transition: all 0.3s ease;
}

.dictionary-entry:hover::before {
    opacity: 0.1;
    transform: rotate(0deg) scale(1.2);
}

.dictionary-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.2);
}

.alphabet-btn {
    transition: all 0.2s ease;
    position: relative;
}

.alphabet-btn:hover {
    transform: scale(1.2);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    font-weight: bold;
}

.dict-category {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dict-category::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(147, 51, 234, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.dict-category:active::after {
    width: 200px;
    height: 200px;
}

.quick-search {
    position: relative;
    overflow: hidden;
}

.quick-search::before {
    content: '🔍';
    position: absolute;
    font-size: 20px;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
}

.quick-search:hover::before {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(2);
}

#dictionary-search:focus {
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
    border-color: #9333ea;
}

/* Dictionary modal animations */
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.dictionary-modal {
    animation: modalSlideIn 0.3s ease;
}

/* Practice Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease;
}

.animate-slideUp {
    animation: slideUp 0.3s ease;
}

/* Practice Flashcard Styles */
.card-side {
    transition: all 0.3s ease;
}

/* Practice Modal Responsive */
@media (max-width: 640px) {
    #practice-modal .max-w-2xl {
        max-width: 95vw;
        margin: 0.5rem;
    }

    #practice-modal .p-6 {
        padding: 1rem;
    }

    #practice-modal .text-4xl {
        font-size: 2rem;
    }

    #practice-modal .text-3xl {
        font-size: 1.5rem;
    }
}

/* Fix for gradient text clipping descenders (y, g, p, q, j) */
.bg-clip-text {
    line-height: 1.4 !important;
    padding-bottom: 0.25em !important;
    display: inline-block !important;
}

/* Specific fix for phrase display */
#phrase-pidgin {
    line-height: 1.4 !important;
    padding-bottom: 0.3em !important;
}

/* Brand font fix for navigation */
.brand-font {
    line-height: 1.5 !important;
    padding-bottom: 0.3em !important;
    display: inline-block !important;
}

/* Navigation Dropdown Styles - Now handled by Tailwind in navigation.html */
.nav-dropdown {
    position: relative;
}
/* Base styles for dropdown menu transition */
.dropdown-menu {
    transition: all 0.2s ease-out;
    z-index: 100 !important;
    background: #ffffff !important;
}
.dark .dropdown-menu {
    background: #1e293b !important;
}

/* Mobile menu - force opaque background so content doesn't bleed through */
#mobile-menu {
    background: #ffffff !important;
}
.dark #mobile-menu {
    background: #0f172a !important;
}

/* ==================== */
/* Mobile UX Improvements */
/* ==================== */

/* Minimum touch target size (48x48px recommended by Google) */
@media (max-width: 768px) {
    /* Mobile navigation links - larger touch targets */
    #mobile-menu a,
    .mobile-dropdown-btn,
    .mobile-dropdown-content a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    /* Buttons need adequate touch targets */
    button, .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Game cards - easier to tap */
    .game-card, article.bg-gray-50, .phrase-card {
        padding: 1rem;
    }

    /* Form inputs - larger on mobile */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Footer links - larger touch targets */
    footer a {
        display: inline-block;
        padding: 0.5rem;
        min-height: 44px;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Better tap highlighting */
    a, button {
        -webkit-tap-highlight-color: rgba(255, 107, 107, 0.2);
    }

    /* Improve readability */
    p, li {
        line-height: 1.6;
    }

    /* Game buttons - larger on mobile */
    .game-btn {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* Smooth scrolling for all users */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Better focus states for keyboard navigation */
@media (max-width: 768px) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 3px solid #ff6b6b;
        outline-offset: 2px;
    }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Sticky header improvements for mobile */
@media (max-width: 768px) {
    nav.sticky {
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

/* Improve text selection on mobile */
::selection {
    background: rgba(255, 107, 107, 0.3);
    color: inherit;
}