/* ═══════════════════════════════════════════════════════════════════════════
   Mobile-Specific Styles & Responsive Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Safe Area Insets (Notched Phones) ───────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
    .navbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    .main-content {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ─── Touch Target Sizes ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Ensure all interactive elements are at least 44x44px */
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        min-height: 44px;
    }

    /* Links in text paragraphs do not need the minimum height */
    p a,
    .seo-article a,
    .seo-content a {
        min-height: unset;
    }

    /* Buttons get larger padding on mobile */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }
}

/* ─── Orientation Warning (Game Page) ─────────────────────────────────────── */
.orientation-warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    color: var(--text-primary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    gap: 1.5rem;
}

.orientation-warning-icon {
    color: var(--accent-primary);
    animation: rotate-phone 2s ease infinite;
}

@keyframes rotate-phone {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(90deg); }
    50%      { transform: rotate(90deg); }
    75%      { transform: rotate(0deg); }
}

.orientation-warning h3 {
    font-size: 1.3rem;
    font-weight: 700;
}

.orientation-warning p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 300px;
}

.orientation-warning .btn {
    margin-top: 0.5rem;
}

/* Show orientation warning only on small portrait phones during gameplay */
@media (max-width: 480px) and (orientation: portrait) {
    .game-wrapper .orientation-warning {
        display: flex;
    }

    .game-wrapper .orientation-warning.dismissed {
        display: none;
    }
}

/* ─── Mobile Game Board Adjustments ───────────────────────────────────────── */
@media (max-width: 480px) and (orientation: portrait) {
    /* Reduce navbar height on very small phones in game */
    .game-wrapper ~ .navbar,
    .navbar:has(~ .main-content .game-wrapper) {
        height: 56px;
    }

    .game-wrapper {
        min-height: calc(100vh - 56px);
        min-height: calc(100dvh - 56px);
    }
}

/* ─── Full Viewport Height Fix (Mobile Browsers) ─────────────────────────── */
@supports (height: 100dvh) {
    .game-wrapper {
        min-height: calc(100dvh - 72px);
    }

    .hero {
        min-height: calc(100dvh - 72px);
    }
}

/* ─── Mobile Navigation Improvements ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Prevent body scroll when nav is open */
    body.nav-open {
        overflow: hidden;
    }

    /* Smooth transitions for mobile menu */
    .nav-menu {
        will-change: transform;
    }
}

/* ─── Mobile-Only Display Utilities ───────────────────────────────────────── */
.mobile-only {
    display: none;
}

.desktop-only {
    display: unset;
}

@media (max-width: 768px) {
    .mobile-only {
        display: unset;
    }

    .desktop-only {
        display: none;
    }
}

/* ─── Scroll Behavior on Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Momentum scrolling */
    .table-wrapper,
    .tabs {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal scroll on body */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* ─── Mobile Form Improvements ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Full-width forms on mobile */
    .form-control,
    .form-input {
        width: 100%;
    }

    /* Better select styling on mobile */
    select.form-control,
    select.start-select {
        appearance: none;
        -webkit-appearance: none;
    }
}

/* ─── Mobile Game Stat Display ────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Compact stat display for very small screens */
    .stat-item {
        padding: 0.35rem 0;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .stat-value {
        font-size: 0.85rem;
    }
}

/* ─── Mobile Leaderboard Adjustments ──────────────────────────────────────── */
@media (max-width: 480px) {
    .leaderboard-table.full {
        font-size: 0.8rem;
    }

    .leaderboard-table.full th,
    .leaderboard-table.full td {
        padding: 0.55rem 0.4rem;
    }

    .rank-number {
        min-width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }

    .medal svg {
        width: 18px;
        height: 18px;
    }
}

/* ─── Touch Feedback ──────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .feature-card:hover,
    .mode-card:hover {
        transform: none;
        box-shadow: var(--card-shadow);
    }

    /* Add active state feedback instead */
    .feature-card:active,
    .mode-card:active {
        transform: scale(0.98);
    }

    .btn:active {
        transform: scale(0.96);
    }

    .touch-btn:active {
        transform: scale(0.92);
        background: rgba(0, 188, 212, 0.4);
    }

    /* Remove hover styles for table rows on touch */
    .leaderboard-table tbody tr:hover {
        background: transparent;
    }

    .leaderboard-table.full tbody tr:hover {
        background: transparent;
    }

    .leaderboard-table.full .top-1:hover td {
        background: rgba(255, 215, 0, 0.06);
    }

    .leaderboard-table.full .top-2:hover td {
        background: rgba(192, 192, 192, 0.06);
    }

    .leaderboard-table.full .top-3:hover td {
        background: rgba(205, 127, 50, 0.06);
    }
}

/* ─── Prevent Content Shift from Scrollbar ────────────────────────────────── */
@media (max-width: 768px) {
    html {
        scrollbar-gutter: auto;
    }
}

/* ─── PWA Standalone Mode ─────────────────────────────────────────────────── */
@media (display-mode: standalone) {
    .navbar {
        padding-top: env(safe-area-inset-top);
        height: calc(72px + env(safe-area-inset-top));
    }

    .main-content {
        padding-top: calc(72px + env(safe-area-inset-top));
    }
}

/* ─── High DPI Screens ────────────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Thinner borders on high DPI */
    .panel,
    .card,
    .table-wrapper,
    .game-board-wrapper {
        border-width: 0.5px;
    }
}

/* ─── Print Cleanup ───────────────────────────────────────────────────────── */
@media print {
    .touch-controls,
    .game-overlay,
    .orientation-warning,
    .hero-bg,
    .hero-animation {
        display: none !important;
    }
}