/* ============================================================
   mobile.css — Chesophelic Mobile Responsiveness Layer
   Handles all responsive overrides for mobile devices.
   Breakpoints:
     ≤768px  → Tablet / large phone (landscape)
     ≤640px  → Phone (portrait, large)
     ≤480px  → Phone (portrait, standard)
     ≤360px  → Phone (portrait, compact)
   ============================================================ */

/* ─────────────────────────────────────────
   1. GLOBAL MOBILE RESETS
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Force strict viewport adherence */
    html, body {
        height: 100dvh !important; 
        width: 100vw;
        overflow: hidden !important; /* Kills the body-level "shakiness" */
        position: fixed; /* Prevents the whole page from being "pulled" */
        overscroll-behavior: none; /* Stops the "rubber-band" bounce effect */
    }

    #main-content {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* UI stays fixed, only sub-panels scroll */
    }

    #view-mount {
        width: 100%;
        height: 100%;
    }

    /* This is the only part allowed to scroll */
    .view-section {
        height: 100dvh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Silky smooth physics for iOS */
    }

    /* Prevent "Touch-Move" on Background */
    #view-dashboard, 
    #intro-layer, 
    #ambient-rays {
        touch-action: none; /* User cannot drag these elements at all */
        pointer-events: none; /* Touches pass through them to the buttons */
    }

    #view-dashboard button, 
    #view-dashboard a {
        pointer-events: auto;
    }

    .chess-grid {
        /* Allows piece dragging but blocks page scrolling when touching the board */
        touch-action: none; 
    }

    html {
        font-size: 14px !important;
    }

    /* Contain the massive rays that cause horizontal bleed */
    #ambient-rays {
        width: 100vw !important;
        height: 100vw !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Hide the glow orbs in modals that might be sticking out */
    .result-overlay .absolute {
        display: none !important;
    }

    /* Fix the Analysis Stage specifically */
    .analysis-stage {
        width: 100vw !important;
        max-width: 100vw !important;
        grid-template-columns: 1fr !important; /* Ensure it's only one column */
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Remove hover-lift on touch devices — no hover intent */
    .hover-lift:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .royal-panel:hover {
        transform: none !important;
    }

    .royal-social-card:hover {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────
   2. LOADING SCREEN
───────────────────────────────────────── */
@media (max-width: 640px) {
    #game-loading-screen h1 {
        font-size: 1.75rem !important;
        letter-spacing: 0.15em !important;
    }

    #game-loading-screen > div > div {
        gap: 1.25rem;
        padding: 0 1.25rem;
    }

    #game-loading-trivia {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    /* Progress bar container */
    #game-loading-screen .w-72 {
        width: 85vw !important;
    }
}

/* ─────────────────────────────────────────
   3. NAVIGATION — Bottom Nav & Side Nav
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Ensure side nav stays hidden on mobile */
    #side-nav {
        display: none !important;
    }

    /* Bottom nav safe area for notched phones and horizontal scrolling */
    #bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 70px !important;
        padding-bottom: env(safe-area-inset-bottom) !important; 
        z-index: 9999;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        white-space: nowrap !important;
        gap: 0.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        scrollbar-width: none !important; /* Hide scrollbars for clean look (Firefox) */
    }

    #bottom-nav::-webkit-scrollbar {
        display: none !important; /* Hide scrollbars (Chrome, Safari) */
    }

    /* Tighten bottom nav button hit targets with consistent highlight area */
    .nav-btn-mobile {
        flex-shrink: 0 !important;
        width: 72px !important;
        padding: 0.35rem 0 !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        scroll-snap-align: center !important;
    }

    .nav-btn-mobile .material-symbols-outlined {
        font-size: 20px !important;
    }

    /* Main content bottom padding accounts for bottom nav */
    #main-content {
        padding-bottom: 72px !important;
    }
}

@media (max-width: 480px) {
    /* Compact bottom nav labels */
    #bottom-nav .font-label {
        font-size: 8px !important;
        letter-spacing: 0.02em !important;
    }

    .nav-btn-mobile {
        padding: 0.3rem 0 !important;
    }

    .nav-btn-mobile .material-symbols-outlined {
        font-size: 19px !important;
    }
}

/* ─────────────────────────────────────────
   4. DASHBOARD / HERO SECTION
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Reduce hero piece sizes so they don't overflow */
    #hero-king {
        width: 72vmin !important;
    }

    #p-queen {
        width: 65vmin !important;
    }

    #p-bishop-q,
    #p-bishop-k {
        width: 60vmin !important;
    }

    #p-knight-q,
    #p-knight-k {
        width: 54vmin !important;
    }

    #p-rook-q,
    #p-rook-k {
        width: 48vmin !important;
    }

    /* Hero content — adjust vertical padding */
    #view-dashboard .h-screen > div:first-child {
        padding-top: 18vh !important;
        padding-bottom: 3vh !important;
    }

    /* Hero buttons row — stack tighter */
    .hero-red-btn {
        width: 13rem !important;
        height: 3.6rem !important;
        font-size: 0.82rem !important;
        gap: 0.6rem !important;
        border-radius: 1.1rem !important;
        white-space: nowrap !important;
    }

    .hero-red-btn .material-symbols-outlined {
        font-size: 1.3rem !important;
    }

    /* Flex wrap gap for hero buttons */
    #view-dashboard .flex.gap-8 {
        gap: 0.85rem !important;
    }

    /* Social media links */
    #view-dashboard .flex.items-center.gap-4\.5 {
        gap: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    #view-dashboard .h-screen {
        padding-top: 15vh !important;
        padding-bottom: 2vh !important;
    }

    .hero-red-btn {
        width: 100% !important;
        height: 3.2rem !important;
        font-size: 0.75rem !important;
        gap: 0.4rem !important;
        padding: 0 0.5rem !important;
        border-radius: 0.9rem !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    /* 2-column hero button grid on small phones */
    #view-dashboard .flex.gap-8.lg\:gap-12 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.6rem !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }

    /* Ambient rays - reduce size on small screens */
    #ambient-rays {
        width: 140vmax !important;
        height: 140vmax !important;
    }
}

/* ─────────────────────────────────────────
   5. CHESS BOARD & PLAY VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --board-width-offset: 1rem !important;
        --board-height-offset: 10rem !important;
        --play-board-size: min(calc(100vw - 1rem), calc(100vh - 10rem)) !important;
    }

    /* Board container full width */
    .play-sized-board {
        width: var(--play-board-size) !important;
        height: var(--play-board-size) !important;
        max-width: 100vw;
    }

    .play-sized-rail {
        height: auto !important;
        width: 100% !important;
    }

    /* Play view layout — vertical stack */
    #view-play .flex.gap-4,
    #view-play .flex.gap-6,
    #view-play .flex.gap-8 {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Board frame adjustments */
    .royal-board-frame {
        border-radius: 0px !important;
        padding: 0.5rem !important;
    }

    /* Eval rail — horizontal below board on mobile */
    .royal-eval-rail {
        width: 100% !important;
        height: 12px !important;
        flex-direction: row !important;
        border-radius: 999px !important;
    }

    /* Timer displays */
    .play-sized-rail .font-headline {
        font-size: 1.5rem !important;
    }

    /* Game setup grid — 3 cols → 1 col on mobile */
    #game-setup-overlay .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    /* Time control grid — 4 cols → 3 cols */
    #setup-time-controls.grid.grid-cols-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --board-height-offset: 9rem !important;
    }

    /* Time control — 2 cols on tiny screens */
    #setup-time-controls.grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Color selection row — stack */
    #view-play .flex.gap-3 .setup-color-btn {
        padding: 0.65rem 0.5rem !important;
        font-size: 0.68rem !important;
    }
}

/* ─────────────────────────────────────────
   6. RESULT & OVERLAY MODALS
───────────────────────────────────────── */
@media (max-width: 768px) {
    .result-card {
        padding: 1.75rem 1.25rem !important;
        border-radius: 1.5rem !important;
        width: 95% !important;
        max-width: 420px !important;
    }

    /* Result emoji */
    .result-card #result-emoji {
        font-size: 40px !important;
    }

    .result-card h2 {
        font-size: 1.6rem !important;
    }

    .result-card p {
        font-size: 0.9rem !important;
    }

    /* Stacked action buttons in result card */
    .result-card .flex.gap-3 {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    /* Game setup overlay — full height scroll on mobile */
    #game-setup-overlay .result-card {
        max-height: 92vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Auth modal full width */
    .auth-modal {
        max-width: 95vw !important;
        border-radius: 1.25rem !important;
    }

    .auth-premium-card {
        max-width: 95vw !important;
        border-radius: 2rem !important;
    }

    .auth-card-info {
        padding: 2.5rem 1.75rem !important;
        border-radius: 1.85rem !important;
    }

    /* Game selector overlay */
    #game-selector-overlay .result-card {
        max-height: 88vh !important;
        padding: 1.5rem !important;
    }

    /* Review overlay */
    #review-overlay .result-card {
        padding: 1.5rem 1.25rem !important;
        max-width: 95vw !important;
    }
}

@media (max-width: 480px) {
    .result-card {
        border-radius: 1.25rem !important;
        padding: 1.25rem 1rem !important;
    }

    /* Review categories — 1 column */
    #review-categories.grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────
   7. TOAST NOTIFICATIONS
───────────────────────────────────────── */
@media (max-width: 640px) {
    .toast-container {
        top: auto !important;
        bottom: 80px !important; /* Above bottom nav */
        right: 12px !important;
        left: 12px !important;
        max-width: 100% !important;
    }

    .toast {
        border-radius: 10px !important;
    }
}

/* ─────────────────────────────────────────
   8. REDESIGNED ANALYSIS VIEW (MOBILE)
───────────────────────────────────────── */
@media (max-width: 980px) {
    /* Reset all offset-based positioning for mobile */
    .analysis-sidebar, 
    .analysis-control-column, 
    .analysis-board-panel, 
    .analysis-eval-rail {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Reset the stage to a clean vertical block */
    .analysis-stage {
        height: calc(100dvh - 70px) !important; 
        overflow-y: auto !important;
        display: block !important; /* Stack elements naturally */
        padding: 10px !important;
        gap: 0 !important;
        overflow-x: hidden !important;
    }

    /* 1. THE HORIZONTAL EVAL BAR (Formerly the Side Rail) */
    .analysis-eval-rail {
        display: flex !important;
        width: 100% !important;
        height: 30px !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    .analysis-eval-track {
        width: 100% !important;
        height: 8px !important;
        max-height: 8px !important;
        flex-direction: row !important; /* Make it horizontal */
        background: rgba(255,255,255,0.1) !important;
    }

    .analysis-eval-fill {
        height: 100% !important;
        width: 50%; /* JS will now control width instead of height */
        transition: width 0.5s ease !important;
    }

    .analysis-eval-label {
        position: absolute !important;
        right: 10px !important;
        top: 12px !important;
        transform: none !important;
        font-size: 11px !important;
        font-family: monospace;
    }

    /* 2. THE BOARD PANEL */
    .analysis-board-panel {
        width: 100% !important;
        padding: 0 !important;
    }

    .analysis-board-frame {
        /* FORCE RESET the desktop translate hacks & ensure the board never pushes the page height too far */
        transform: none !important;
        width: 90vw !important;
        height: 90vw !important;
        max-width: 380px !important;
        max-height: 380px !important;
        margin: 0 auto !important;
        padding: 6px !important;
        left: 0 !important;
    }

    /* Disable blunder shake animation on mobile */
    .blunder-impact {
        animation: none !important;
    }

    .analysis-board-controls {
        position: static !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 12px auto !important;
        left: 0 !important;
        top: 0 !important;
        background: var(--analysis-panel-soft) !important;
        justify-content: space-between !important;
    }

    /* 3. THE CONTROL COLUMN (Player Strips & Import) */
    .analysis-control-column {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Players side-by-side */
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .analysis-player-strip {
        position: static !important;
        height: 40px !important;
        font-size: 11px !important;
    }

    .analysis-import-card {
        grid-column: 1 / -1 !important; /* Full width import area */
        padding: 15px !important;
    }

    .analysis-pgn-input {
        min-height: 80px !important;
    }

    .analysis-flip-button {
        display: none !important; /* Hide floating flip btn on mobile */
    }

    /* 4. THE SIDEBAR (Ledger/Accuracy) */
    .analysis-sidebar, .analysis-card-shell {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin-top: 20px !important;
        border-radius: 24px !important;
    }

    /* Move Ledger Refinement */
    .analysis-moves-card {
        max-height: 300px !important;
        overflow-y: auto !important;
    }

    /* Developer monitor (LEDs) */
    .developer-tier-monitor {
        padding: 6px !important;
        flex-wrap: wrap !important;
    }

    .led-indicator {
        font-size: 8px !important;
    }
}

/* ─────────────────────────────────────────
   9. ANALYSIS BOARD SIZE (Mobile)
───────────────────────────────────────── */
@media (max-width: 980px) {
    :root {
        --analysis-board-size: min(88vw, 420px) !important;
        --puzzle-board-size: min(88vw, 420px) !important;
    }

    .analysis-board-frame {
        width: var(--analysis-board-size) !important;
        height: var(--analysis-board-size) !important;
    }

    .puzzle-board-frame {
        width: var(--puzzle-board-size) !important;
        height: var(--puzzle-board-size) !important;
    }
}

/* ─────────────────────────────────────────
   10. ROYAL DESIGN SYSTEM — Mobile Overrides
───────────────────────────────────────── */
@media (max-width: 768px) {
    .royal-hero-panel {
        padding: 1.25rem 1rem !important;
    }

    .royal-title-display {
        font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    }

    .royal-section-title {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    /* Chip row — left aligned, smaller chips */
    .royal-chip-row {
        justify-content: flex-start !important;
        gap: 0.55rem !important;
    }

    .royal-chip {
        min-width: 96px !important;
        padding: 0.65rem 0.75rem !important;
    }

    /* Meta grid — 2 col on tablet, 1 col on phone */
    .royal-meta-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
    }

    /* Topbar stacks on mobile */
    .royal-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.75rem 1rem !important;
        gap: 0.65rem !important;
    }

    /* Panel border radius reduce */
    .royal-panel {
        border-radius: 1.25rem !important;
    }

    /* HUD panel */
    .hud-panel {
        border-radius: 1.25rem !important;
    }

    /* Rank rows */
    .royal-rank-row {
        padding: 0.75rem !important;
        border-radius: 1rem !important;
    }

    /* Social cards */
    .royal-social-card {
        padding: 0.75rem 0.9rem !important;
        border-radius: 1.1rem !important;
    }

    /* Avatar size */
    .royal-avatar {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Action buttons */
    .royal-action-btn,
    .royal-action-btn-secondary {
        padding: 0.75rem 1.1rem !important;
        font-size: 0.68rem !important;
    }

    /* Icon button */
    .royal-icon-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .royal-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .royal-title-display {
        font-size: 1.75rem !important;
        letter-spacing: -0.04em !important;
    }

    .royal-panel {
        border-radius: 1rem !important;
    }

    .royal-stat-card {
        padding: 1rem !important;
    }

    .royal-book-spine {
        width: 2.25rem !important;
    }
}

/* ─────────────────────────────────────────
   11. PUZZLE / DRILL VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Puzzle layout — vertical stack */
    #view-puzzles .flex.gap-6,
    #view-puzzles .flex.gap-8 {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Drill eval rail — hide on small mobile (already hidden at 480) */
    .drill-eval-rail {
        display: none !important;
    }

    /* Puzzle board fills width */
    :root {
        --puzzle-board-size: min(90vw, 420px) !important;
    }
}

/* ─────────────────────────────────────────
   12. LEADERBOARD VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Leaderboard table — hide less important cols */
    #view-leaderboard th:nth-child(4),
    #view-leaderboard td:nth-child(4) {
        display: none !important;
    }

    .royal-rank-row {
        gap: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Hide 3rd data column too */
    #view-leaderboard th:nth-child(3),
    #view-leaderboard td:nth-child(3) {
        display: none !important;
    }
}

/* ─────────────────────────────────────────
   13. OPENINGS VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    .opening-curriculum-item {
        padding: 0.75rem !important;
        border-radius: 0.875rem !important;
    }

    .opening-curriculum-item .item-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }

    /* Opening selection cards — single column */
    .opening-selection-card {
        border-radius: 1rem !important;
    }
}

/* ─────────────────────────────────────────
   14. SETTINGS VIEW
───────────────────────────────────────── */
@media (max-width: 640px) {
    .royal-setting-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 1rem 0 !important;
    }

    /* Toggles stay on right */
    .royal-setting-row > .royal-toggle {
        align-self: flex-end !important;
    }

    /* Engine grid — 1 col */
    .engine-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────
   15. PIECE SHOWCASE (Dashboard Carousel)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .piece-image-container {
        width: 90vw !important;
        height: 60vh !important;
        opacity: 0.25 !important;
    }

    .blueprint-pane {
        width: 90vw !important;
        max-width: 100% !important;
    }

    .blueprint-pane h2 {
        font-size: 2rem !important;
    }

    .framed-box {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }

    .slider-nav {
        bottom: 5vh !important;
        gap: 2rem !important;
    }

    .nav-arrow {
        width: 48px !important;
        height: 48px !important;
    }

    .piece-card .details-overlay {
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 2rem 1.25rem !important;
        gap: 1rem !important;
    }
}

/* ─────────────────────────────────────────
   16. PROFILE PANEL / PROFILE SECTION
───────────────────────────────────────── */
@media (max-width: 640px) {
    /* Profile panel slide-in — full width on mobile */
    #profile-panel,
    [id*="profile-panel"] {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
    }

    #profile-panel.open,
    [id*="profile-panel"].open {
        transform: translateY(0) !important;
    }
}

/* ─────────────────────────────────────────
   17. SOCIAL VIEW
───────────────────────────────────────── */
@media (max-width: 640px) {
    #view-social .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #view-social .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #view-social .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────
   18. VAULT VIEW
───────────────────────────────────────── */
@media (max-width: 640px) {
    #view-vault .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #view-vault .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 400px) {
    #view-vault .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────
   19. EVENTS VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    #view-events .grid.grid-cols-3,
    #view-events .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #view-events .royal-hero-panel {
        padding: 1rem !important;
    }
}

/* ─────────────────────────────────────────
   20. SPECTATOR VIEW
───────────────────────────────────────── */
@media (max-width: 768px) {
    #view-spectator .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────
   21. SCROLLBAR — Hide native on mobile
───────────────────────────────────────── */
@media (max-width: 768px) {
    .custom-scrollbar::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
    }
}

/* ─────────────────────────────────────────
   22. TYPOGRAPHY SCALE — Mobile
───────────────────────────────────────── */
@media (max-width: 640px) {
    .font-headline,
    [class*="font-headline"] {
        letter-spacing: -0.02em;
    }

    /* Kicker label — reduce tracking on tiny screens */
    .royal-kicker {
        font-size: 0.6rem !important;
        letter-spacing: 0.22em !important;
    }
}

/* ─────────────────────────────────────────
   23. GAME SETUP OVERLAY — Mobile
───────────────────────────────────────── */
@media (max-width: 640px) {
    #game-setup-overlay .result-card {
        padding: 1.5rem 1.1rem !important;
        border-radius: 1.75rem !important;
    }

    /* Opponent selector buttons */
    #game-setup-overlay .grid.grid-cols-3 > button {
        padding: 0.75rem 0.5rem !important;
    }

    #game-setup-overlay .grid.grid-cols-3 > button h4 {
        font-size: 0.7rem !important;
    }

    /* Color selection buttons */
    .setup-color-btn {
        padding: 0.6rem 0.4rem !important;
        font-size: 0.7rem !important;
    }

    /* Forge battle button */
    #setup-action-btn {
        padding: 0.9rem !important;
        font-size: 0.78rem !important;
    }

    /* Glow orbs — hide on mobile to reduce GPU load */
    #game-setup-overlay .absolute.-top-24,
    #game-setup-overlay .absolute.-bottom-24 {
        display: none !important;
    }
}

/* ─────────────────────────────────────────
   24. SAFE AREA — Notch / Home Indicator
───────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        #bottom-nav {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        #main-content {
            padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        }

        .toast-container {
            bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ─────────────────────────────────────────
   25. ULTRA-COMPACT — 360px and below
───────────────────────────────────────── */
@media (max-width: 360px) {
    html {
        font-size: 13px !important;
    }

    .hero-red-btn {
        width: 100% !important;
        height: 2.9rem !important;
        font-size: 0.7rem !important;
        gap: 0.35rem !important;
        padding: 0 0.4rem !important;
        white-space: nowrap !important;
    }

    .royal-title-display {
        font-size: 1.55rem !important;
    }

    .result-card {
        padding: 1rem 0.875rem !important;
    }

    .auth-card-info {
        padding: 2rem 1.25rem !important;
    }

    /* Bottom nav — even more compact */
    .nav-btn-mobile .material-symbols-outlined {
        font-size: 18px !important;
    }

    #bottom-nav .font-label {
        font-size: 7px !important;
    }
}