/**
 * Mobile UI Overrides
 * Comprehensive mobile optimizations for better touch experience
 */

/* ========================================
   MOBILE DETECTION & BASE STYLES
   ======================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {

    /* Force smaller UI scale on mobile */
    :root {
        --ui-scale: 0.7 !important;
    }

    /* Ensure touch events work properly */
    * {
        -webkit-tap-highlight-color: rgba(255, 165, 0, 0.2);
        touch-action: manipulation;
    }

    body {
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
    }

    /* ========================================
       HERO SELECTION SCREEN - MOBILE
       ======================================== */

    .hero-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columns on mobile */
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .hero-card {
        padding: 0.5rem !important;
        min-height: auto !important;
    }

    .hero-portrait {
        width: 60px !important;
        height: 60px !important;
    }

    .hero-card h2 {
        font-size: 0.9rem !important;
        margin: 0.3rem 0 !important;
    }

    .hero-desc {
        font-size: 0.65rem !important;
        margin-bottom: 0.3rem !important;
    }

    .hero-stats {
        font-size: 0.65rem !important;
        padding: 0.3rem !important;
    }

    .hero-stats p {
        margin: 0.1rem 0 !important;
    }

    .hero-stats-title {
        font-size: 0.7rem !important;
        margin-bottom: 0.2rem !important;
    }

    .hero-ultimates {
        margin-top: 0.3rem !important;
    }

    .ultimate-title {
        font-size: 0.7rem !important;
        margin-bottom: 0.2rem !important;
    }

    .ultimate-icons {
        gap: 0.3rem !important;
    }

    .ultimate-icon {
        width: 35px !important;
        height: 35px !important;
    }

    .ultimate-icon img {
        width: 100% !important;
        height: 100% !important;
    }

    .hero-perks-button {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.5rem !important;
        margin-top: 0.3rem !important;
    }

    /* Start screen adjustments */
    #hero-selection {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .game-title {
        font-size: 1.8rem !important;
        margin-top: 0.5rem !important;
    }

    .game-subtitle {
        font-size: 1rem !important;
    }

    .version-text {
        font-size: 0.7rem !important;
    }

    .controls-info {
        font-size: 0.65rem !important;
        padding: 0.5rem !important;
    }

    .controls-info p {
        margin: 0.3rem 0 !important;
    }

    .subtitle {
        font-size: 1rem !important;
        margin: 0.5rem 0 !important;
    }

    .random-hero-btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Hide panels on mobile start screen */
    #start-highscore-panel,
    #game-statistics-panel,
    .start-settings-panel {
        display: none !important;
    }

    #start-main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem !important;
    }

    /* ========================================
       PERK SELECTION - MOBILE FIX
       ======================================== */

    .perk-modal {
        max-width: 95vw !important;
        max-height: 85vh !important;
        padding: 0.5rem !important;
        margin: 0 !important;
    }

    .perk-modal h2 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.3rem !important;
    }

    .perk-grid {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 0.5rem !important;
        padding: 0.3rem !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* CRITICAL: Make perk cards much smaller and easier to tap */
    .perk-card {
        padding: 0.6rem !important;
        min-height: auto !important;
        border-width: 2px !important;
        font-size: 0.75rem !important;
    }

    .perk-header {
        min-height: auto !important;
        gap: 0.2rem !important;
    }

    .category-card {
        min-height: auto !important;
        padding: 0.5rem !important;
    }

    .perk-card h3 {
        font-size: 0.85rem !important;
        margin: 0.2rem 0 !important;
    }

    .perk-card p {
        font-size: 0.7rem !important;
        margin: 0.2rem 0 !important;
    }

    .perk-value {
        font-size: 0.9rem !important;
    }

    /* Ultimate selection on mobile */
    .perk-grid.warrior-ultimate {
        grid-template-columns: 1fr !important;
    }

    .ulti-back-button {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-top: 0.5rem !important;
    }

    /* Category selection for starting ultimate */
    .perk-category-icon {
        font-size: 2rem !important;
        margin-bottom: 0.3rem !important;
    }

    /* ========================================
       IN-GAME UI - MOBILE
       ======================================== */

    /* Main game container - center canvas */
    #main-game {
        justify-content: flex-start !important; /* Align to top on mobile */
        align-items: center !important; /* Keep centered horizontally */
    }

    /* Canvas will auto-scale to fit mobile screen while maintaining aspect ratio */
    #game-canvas {
        max-width: 100vw !important;
        max-height: calc(100vh - 50px) !important;
        width: auto !important;
        height: auto !important;
    }

    /* CRITICAL: Make highscore panel and stats panel 5x smaller on mobile */
    #highscore-panel,
    #stats-panel {
        transform: scale(0.2) !important;
        transform-origin: top left !important;
        width: 500% !important; /* Compensate for scale */
        font-size: 5rem !important; /* Compensate for scale */
        pointer-events: auto !important;
    }

    #highscore-panel {
        left: 0 !important;
        top: 0 !important;
    }

    #stats-panel {
        right: 0 !important;
        top: 0 !important;
    }

    /* Top bar - ultra compact */
    #top-bar {
        height: 40px !important;
        padding: 0.2rem !important;
        font-size: 0.55rem !important;
        gap: 0.2rem !important;
    }

    #top-bar .bar-container {
        display: none !important; /* Hide HP/EXP bars on mobile top bar */
    }

    .difficulty-display,
    .time-display,
    #score-display {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.3rem !important;
        min-width: auto !important;
    }

    .suicide-btn,
    .admin-btn {
        display: none !important;
    }

    .game-auto-aim-control {
        font-size: 0.6rem !important;
        gap: 0.2rem !important;
    }

    .game-auto-aim-label {
        font-size: 0.55rem !important;
    }

    .toggle-switch {
        width: 30px !important;
        height: 16px !important;
    }

    .toggle-slider:before {
        height: 12px !important;
        width: 12px !important;
    }

    /* Experience bar - moved to bottom, compact */
    #exp-bar-wrapper {
        position: fixed !important;
        bottom: 80px !important; /* Above action bar */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        max-width: 300px !important;
        z-index: 100 !important;
    }

    .exp-bar {
        height: 18px !important;
    }

    .bar-label {
        font-size: 0.5rem !important;
        padding: 0 0.2rem !important;
    }

    .bar-text {
        font-size: 0.55rem !important;
        line-height: 18px !important;
    }

    .bar-progress-text {
        font-size: 0.5rem !important;
    }

    /* Action bar - bottom center, larger touch targets */
    #action-bar {
        position: fixed !important;
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 0.3rem !important;
        z-index: 100 !important;
        padding: 0.3rem !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 10px !important;
    }

    .action-slot {
        width: 45px !important;
        height: 45px !important;
        border-width: 2px !important;
    }

    .action-keybind {
        font-size: 0.5rem !important;
        padding: 0.1rem 0.2rem !important;
    }

    .action-timer {
        font-size: 0.6rem !important;
    }

    .ulti-icon-image {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Boss HP bar - compact */
    .boss-hp-bar {
        padding: 0.3rem !important;
        max-width: 90% !important;
    }

    .boss-portrait {
        width: 35px !important;
        height: 35px !important;
    }

    .boss-name {
        font-size: 0.7rem !important;
    }

    .boss-number {
        font-size: 0.6rem !important;
    }

    .boss-hp-text {
        font-size: 0.6rem !important;
    }

    .boss-crown {
        font-size: 0.8rem !important;
    }

    /* Safe zone display */
    #safe-zone-display {
        font-size: 0.7rem !important;
        padding: 0.3rem !important;
        max-width: 80% !important;
    }

    /* ========================================
       MODALS - MOBILE
       ======================================== */

    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 0.8rem !important;
        margin: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-content h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .modal-content h3 {
        font-size: 0.9rem !important;
        margin: 0.3rem 0 !important;
    }

    .modal-content p {
        font-size: 0.75rem !important;
        margin: 0.3rem 0 !important;
    }

    .menu-btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0.3rem !important;
        min-height: 44px !important; /* iOS recommended touch target */
    }

    /* Pause menu mobile */
    .pause-menu-body {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .pause-menu-left,
    .pause-menu-right {
        width: 100% !important;
    }

    #pause-perks-list {
        font-size: 0.7rem !important;
        max-height: 30vh !important;
        overflow-y: auto !important;
    }

    /* Audio settings */
    .volume-slider {
        width: 100% !important;
        height: 30px !important;
    }

    .audio-setting {
        flex-direction: column !important;
        gap: 0.3rem !important;
        margin: 0.5rem 0 !important;
    }

    .audio-setting label {
        font-size: 0.8rem !important;
    }

    /* UI Scale settings */
    .ui-scale-input {
        width: 80px !important;
        font-size: 0.9rem !important;
        padding: 0.3rem !important;
    }

    /* Game over modal */
    #final-stats {
        font-size: 0.75rem !important;
    }

    #final-stats p {
        margin: 0.2rem 0 !important;
    }

    /* ========================================
       LOOT WINDOW - MOBILE
       ======================================== */

    .loot-window {
        max-width: 90vw !important;
        max-height: 80vh !important;
        padding: 0.5rem !important;
    }

    .loot-window-header h2 {
        font-size: 1rem !important;
    }

    .loot-window-header h3 {
        font-size: 0.8rem !important;
    }

    .loot-close-btn {
        font-size: 1.2rem !important;
        width: 30px !important;
        height: 30px !important;
    }

    .loot-choice-container {
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .loot-choice-card {
        min-width: 100px !important;
        min-height: 100px !important;
        padding: 0.5rem !important;
    }

    .loot-choice-icon-img {
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .loot-gold-amount {
        font-size: 0.9rem !important;
    }

    .loot-choice-divider {
        font-size: 0.8rem !important;
        margin: 0.3rem !important;
    }

    .loot-choice-helper {
        font-size: 0.65rem !important;
        padding: 0.3rem !important;
    }

    /* ========================================
       TOWN PORTAL MODAL - MOBILE
       ======================================== */

    .town-portal-content {
        max-width: 90vw !important;
        padding: 0.8rem !important;
    }

    .town-portal-message {
        font-size: 0.8rem !important;
    }

    .town-portal-description {
        font-size: 0.7rem !important;
    }

    .town-portal-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .town-portal-btn {
        width: 100% !important;
        min-height: 60px !important;
        padding: 0.5rem !important;
    }

    .btn-icon {
        font-size: 1.2rem !important;
    }

    .btn-text {
        font-size: 0.85rem !important;
    }

    .btn-desc {
        font-size: 0.65rem !important;
    }

    .town-portal-warning {
        font-size: 0.65rem !important;
    }

    /* ========================================
       MOBILE CONTROLS
       ======================================== */

    #mobile-controls {
        display: flex !important; /* Always show on mobile */
        pointer-events: auto !important;
    }

    #mobile-joystick {
        width: 120px !important;
        height: 120px !important;
        bottom: 20px !important;
        left: 20px !important;
    }

    #joystick-base {
        width: 120px !important;
        height: 120px !important;
    }

    #joystick-stick {
        width: 50px !important;
        height: 50px !important;
    }

    .mobile-ulti-btn {
        width: 60px !important;
        height: 60px !important;
        bottom: 40px !important;
        right: 20px !important;
        font-size: 1.5rem !important;
    }

    /* ========================================
       GENERAL PERKS MODAL - MOBILE
       ======================================== */

    .general-perks-modal {
        padding: 0.5rem !important;
    }

    .general-perks-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 0.8rem !important;
    }

    .general-perks-close {
        font-size: 1.5rem !important;
        width: 35px !important;
        height: 35px !important;
        top: 0.3rem !important;
        right: 0.3rem !important;
    }

    .general-perks-content h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .general-perks-content h3 {
        font-size: 0.85rem !important;
    }

    #general-perks-categories {
        font-size: 0.7rem !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
    }

    /* Perk list items in general perks modal */
    .perk-list-item {
        font-size: 0.7rem !important;
        padding: 0.3rem !important;
        margin: 0.2rem 0 !important;
    }

    /* ========================================
       HIGHSCORE INSPECT MODAL - MOBILE
       ======================================== */

    .highscore-inspect-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 0.5rem !important;
    }

    .inspect-body {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .inspect-left-column,
    .inspect-middle-column,
    .inspect-right-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .inspect-section h3 {
        font-size: 0.85rem !important;
    }

    .inspect-stat {
        font-size: 0.7rem !important;
    }

    .inspect-action-bar {
        justify-content: center !important;
        gap: 0.2rem !important;
    }

    .inspect-action-slot {
        width: 40px !important;
        height: 40px !important;
    }

    .inspect-inventory-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.3rem !important;
    }

    .inspect-inventory-slot {
        width: 50px !important;
        height: 50px !important;
    }

    /* ========================================
       BUG REPORT MODAL - MOBILE
       ======================================== */

    #bug-description {
        min-height: 100px !important;
        font-size: 0.75rem !important;
    }

    #bug-contact {
        font-size: 0.75rem !important;
        padding: 0.4rem !important;
    }

    .bug-report-actions {
        flex-direction: column !important;
        gap: 0.3rem !important;
    }

    /* ========================================
       DIFFICULTY INFO MODAL - MOBILE
       ======================================== */

    .difficulty-info-content {
        font-size: 0.7rem !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
    }

    .difficulty-section {
        margin-bottom: 0.8rem !important;
    }

    .difficulty-section h3 {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }

    .difficulty-section ul {
        padding-left: 1rem !important;
        font-size: 0.7rem !important;
    }

    .difficulty-section li {
        margin: 0.2rem 0 !important;
    }

    /* ========================================
       SCROLLBAR STYLING FOR MOBILE
       ======================================== */

    /* Thinner scrollbars on mobile */
    *::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    *::-webkit-scrollbar-thumb {
        background: rgba(255, 165, 0, 0.5) !important;
        border-radius: 3px !important;
    }

    *::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3) !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 480px) {
    :root {
        --ui-scale: 0.6 !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important; /* Single column on very small screens */
    }

    .action-slot {
        width: 40px !important;
        height: 40px !important;
    }

    #mobile-joystick {
        width: 100px !important;
        height: 100px !important;
    }

    #joystick-base {
        width: 100px !important;
        height: 100px !important;
    }

    #joystick-stick {
        width: 40px !important;
        height: 40px !important;
    }

    .mobile-ulti-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }
}

/* ========================================
   LANDSCAPE MODE ON MOBILE
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .perk-modal,
    .modal-content {
        max-height: 95vh !important;
    }

    #exp-bar-wrapper {
        bottom: 70px !important;
    }

    #action-bar {
        bottom: 5px !important;
    }

    #mobile-joystick {
        bottom: 10px !important;
        left: 10px !important;
    }

    .mobile-ulti-btn {
        bottom: 20px !important;
        right: 10px !important;
    }
}