/* Mobile Phone Specific Optimizations */
/* Only applies to phones, not tablets or iPads */

/* Disable all game functionality on mobile phones */
body.mobile-phone-landing #gameCanvas,
body.mobile-phone-landing .mobile-controls,
body.mobile-phone-landing #splashScreen,
body.mobile-phone-landing #gameModeSelect,
body.mobile-phone-landing .player-info-box,
body.mobile-phone-landing .leaderboard-box,
body.mobile-phone-landing .bottom-ui,
body.mobile-phone-landing #pauseOverlay {
    display: none !important;
}

/* ===== VIRTUAL JOYSTICK OPTIMIZATIONS ===== */
body.mobile-phone .virtual-joystick {
    width: 80px !important;
    height: 80px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove outer square border completely */
body.mobile-phone .joystick-base {
    display: none !important;
}

/* Just show the knob */
body.mobile-phone .joystick-knob {
    width: 60px !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ===== GAME CANVAS ZOOM ===== */
body.mobile-phone #gameCanvas {
    /* This will be handled in JavaScript for proper scaling */
    transform-origin: center center;
}

/* ===== COMPACT SCOREBOARD ===== */
body.mobile-phone .player-info-box {
    width: 160px !important;
    padding: 4px !important;
    font-size: 7px !important;
}

body.mobile-phone .player-info-header {
    padding: 2px !important;
    margin-bottom: 2px !important;
}

body.mobile-phone .player-stats {
    gap: 0 !important;
    margin-left: 0 !important;
}

body.mobile-phone .stat-line {
    display: flex;
    justify-content: space-between;
    padding: 1px 0 !important;
    line-height: 1.2 !important;
}

body.mobile-phone .stat-label {
    font-size: 7px !important;
}

body.mobile-phone .stat-value {
    font-size: 7px !important;
}

/* Hide time display on mobile phones */
body.mobile-phone .stat-line:has(#playerTime) {
    display: none !important;
}

/* Alternative method if :has is not supported */
body.mobile-phone #playerTime,
body.mobile-phone #playerTime + span,
body.mobile-phone #playerTime ~ span {
    display: none !important;
}

/* Target parent of time stat */
body.mobile-phone .player-stats > div:last-child {
    display: none !important;
}

/* Hide player portrait on phones */
body.mobile-phone .player-portrait {
    display: none !important;
}

/* ===== ELEMENT BANK SINGLE ROW ===== */
body.mobile-phone .element-collection-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    padding: 0 5px !important;
    margin: 0 !important;
    gap: 2px !important;
    /* Remove grid layout */
    grid-template-columns: unset !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure elements stay in single row */
body.mobile-phone .element-collection-bar.two-rows {
    display: flex !important;
    grid-template-columns: unset !important;
}

body.mobile-phone .element-slot {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
}

body.mobile-phone .element-slot .emoji {
    font-size: 18px !important;
}

body.mobile-phone .element-slot .element-name {
    display: block !important; /* Show names */
    font-size: 6px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

/* Position element bank at very top */
body.mobile-phone .bottom-ui {
    position: fixed !important;
    top: 5px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    z-index: 1000 !important;
}

/* ===== POP-UP MESSAGES ===== */
body.mobile-phone .discovery-message,
body.mobile-phone .popup-message,
body.mobile-phone .notification-popup,
body.mobile-phone .hint-message {
    font-size: 8px !important;
    padding: 3px 6px !important;
    max-width: 180px !important;
    line-height: 1.2 !important;
}

body.mobile-phone .discovery-feed {
    max-width: 200px !important;
    height: 40px !important;
}

body.mobile-phone .discovery-notification {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

body.mobile-phone #newDiscoveryPopup {
    width: 200px !important;
    padding: 8px !important;
    font-size: 8px !important;
}

body.mobile-phone #newDiscoveryPopup h3 {
    font-size: 10px !important;
    margin: 2px 0 !important;
}

body.mobile-phone #newDiscoveryPopup .discovery-emoji {
    font-size: 20px !important;
}

body.mobile-phone #newDiscoveryPopup .discovery-name {
    font-size: 8px !important;
}

body.mobile-phone #newDiscoveryPopup .discovery-combo {
    font-size: 7px !important;
}

/* ===== BUTTON POSITIONING ===== */
/* Remove mute button */
body.mobile-phone .mute-button-mobile {
    display: none !important;
}

/* Position pause button to far bottom left corner */
body.mobile-phone .pause-button-mobile {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
    width: 35px !important;
    height: 35px !important;
    font-size: 14px !important;
    z-index: 1002 !important;
}

/* ===== PAUSE MENU OPTIMIZATION ===== */
body.mobile-phone #pauseMenu {
    width: 95vw !important;
    max-width: none !important;
    height: 90vh !important;
    max-height: none !important;
    padding: 8px !important;
    margin: 5vh 2.5vw !important;
}

body.mobile-phone #pauseMenu h2 {
    font-size: 12px !important;
    margin: 3px 0 !important;
}

body.mobile-phone #pauseMenu p {
    font-size: 8px !important;
    margin: 3px 0 !important;
}

body.mobile-phone .tab-navigation {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1px !important;
    margin: 3px 0 !important;
    width: 100% !important;
}

body.mobile-phone .tab-button {
    font-size: 7px !important;
    padding: 3px 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body.mobile-phone .tab-content {
    height: calc(100% - 100px) !important;
    overflow-y: auto !important;
    font-size: 8px !important;
}

/* Skins tab specific */
body.mobile-phone #skinsTab h3 {
    font-size: 8px !important;
    margin: 5px 0 !important;
}

body.mobile-phone .rarity-section {
    margin: 5px 0 !important;
}

body.mobile-phone .skin-grid {
    gap: 5px !important;
}

body.mobile-phone .skin-item {
    width: 40px !important;
    height: 40px !important;
    padding: 2px !important;
}

body.mobile-phone .skin-item img {
    width: 30px !important;
    height: 30px !important;
}

body.mobile-phone .pause-buttons {
    gap: 10px !important;
    margin-top: 10px !important;
}

body.mobile-phone .pause-buttons button {
    font-size: 8px !important;
    padding: 6px 10px !important;
}

/* ===== LEADERBOARD COMPACT ===== */
body.mobile-phone .leaderboard-box {
    width: 140px !important;
    font-size: 7px !important;
    padding: 4px !important;
}

body.mobile-phone .leaderboard-header {
    padding: 2px !important;
    font-size: 8px !important;
}

body.mobile-phone .leaderboard-entry {
    font-size: 7px !important;
    padding: 1px 2px !important;
}

/* ===== BOOST BAR ===== */
body.mobile-phone .boost-bar-container {
    bottom: 60px !important; /* Adjust position */
    width: 200px !important;
}

body.mobile-phone .boost-bar-frame {
    height: 8px !important;
}

/* ===== FPS COUNTER ===== */
body.mobile-phone #fpsCounter {
    font-size: 8px !important;
    top: 5px !important;
    right: 5px !important;
}

/* ===== TITLE SCREEN MOBILE PHONE OPTIMIZATION ===== */
/* Hide desktop navigation links on phones */
body.mobile-phone #splashScreen > div:nth-child(2),
body.mobile-phone #gameModeSelect > div:nth-child(2) {
    display: none !important;
}

/* Add hamburger menu for mobile phones */
body.mobile-phone .mobile-hamburger-menu {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid #4ecdc4 !important;
    padding: 8px !important;
}

body.mobile-phone .hamburger-line {
    width: 24px !important;
    height: 3px !important;
    background-color: #4ecdc4 !important;
    transition: all 0.3s !important;
}

/* Mobile menu overlay */
body.mobile-phone .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 999 !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
}

body.mobile-phone .mobile-menu-overlay.active {
    display: flex !important;
}

body.mobile-phone .mobile-menu-overlay a {
    color: #4ecdc4 !important;
    text-decoration: none !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s !important;
}

body.mobile-phone .mobile-menu-overlay a:hover {
    border-color: #4ecdc4 !important;
    transform: translateX(5px) !important;
}

/* Close button for mobile menu */
body.mobile-phone .mobile-menu-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    font-size: 30px !important;
    color: #4ecdc4 !important;
    cursor: pointer !important;
}

/* Optimize splash screen layout for phones - correct order */
body.mobile-phone #splashContent > div {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px !important;
    align-items: center !important;
}

/* Reorder elements using flex order */
body.mobile-phone #splashContent .logo {
    order: 1 !important;
}

body.mobile-phone #heroVideoSection {
    order: 2 !important;
}

body.mobile-phone .story-text {
    order: 3 !important;
}

body.mobile-phone #nameInput {
    order: 4 !important;
}

body.mobile-phone #startButton {
    order: 5 !important;
}

body.mobile-phone #assetLoadingStatus {
    order: 6 !important;
}

/* Center all content */
body.mobile-phone #titleScreenContainer {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.mobile-phone #splashContent .logo {
    max-width: 280px !important;
    margin: 0 auto !important;
}

body.mobile-phone #titleScreenContainer {
    padding: 20px !important;
    margin-top: 60px !important; /* Space for hamburger menu */
}

/* Stack video below on mobile phones */
body.mobile-phone #heroVideoSection {
    max-width: 100% !important;
    margin-top: 20px !important;
}

/* Name input optimization */
body.mobile-phone #nameInput {
    font-size: 12px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 200px !important;
}

/* Enter button optimization */
body.mobile-phone #startButton {
    font-size: 10px !important;
    padding: 10px 15px !important;
    margin-top: 15px !important;
}

/* Discord link repositioning */
body.mobile-phone #splashScreen > div:first-child,
body.mobile-phone #gameModeSelect > div:first-child {
    top: auto !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 8px !important;
}

/* Story text optimization */
body.mobile-phone .story-text {
    font-size: 8px !important;
    line-height: 1.4 !important;
    padding: 10px !important;
}

/* Loading status text */
body.mobile-phone #assetLoadingStatus {
    font-size: 8px !important;
}

/* Game mode selection optimization */
body.mobile-phone #gameModeContent {
    padding: 20px !important;
    margin-top: 60px !important;
}

body.mobile-phone .mode-card {
    padding: 10px !important;
}

body.mobile-phone .mode-card h4 {
    font-size: 10px !important;
}

body.mobile-phone .mode-card p {
    font-size: 8px !important;
}

/* Bottom navigation arrow */
body.mobile-phone .scroll-arrow {
    bottom: 60px !important; /* Above discord link */
}

/* Hide pause button and hamburger menu on game setup screen */
body.mobile-phone #gameModeSelect .pause-button-mobile,
body.mobile-phone #gameModeSelect .mobile-hamburger-menu {
    display: none !important;
}

/* Additional fixes for game screen */
/* Remove boost bar on mobile phones */
body.mobile-phone .boost-bar-container {
    display: none !important;
}

/* Fix discovery messages positioning */
body.mobile-phone .discovery-feed {
    bottom: 60px !important; /* Above pause button */
}

/* Ensure proper layering */
body.mobile-phone .pause-button-mobile {
    z-index: 2000 !important;
}

body.mobile-phone .element-collection-bar {
    z-index: 1500 !important;
}

/* Remove any background from element collection */
body.mobile-phone .bottom-ui::before,
body.mobile-phone .bottom-ui::after,
body.mobile-phone .element-collection-bar::before,
body.mobile-phone .element-collection-bar::after {
    display: none !important;
}

/* Make player stats even more compact */
body.mobile-phone .player-info-box {
    width: 84px !important;
}

/* Additional pause menu fixes */
body.mobile-phone #pauseMenu {
    display: flex !important;
    flex-direction: column !important;
}

/* Make virtual joystick more visible */
body.mobile-phone .virtual-joystick {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure joystick base is transparent but joystick is visible */
body.mobile-phone .joystick-base + .joystick-knob {
    display: block !important;
    visibility: visible !important;
}

/* Title screen cleanup */
body.mobile-phone #splashContent {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
}

body.mobile-phone #titleScreenContainer > div:first-child {
    width: 100% !important;
}

/* Hide preview section on title */
body.mobile-phone .preview-section {
    display: none !important;
}

/* Force virtual joystick to show */
body.mobile-phone .mobile-controls {
    display: block !important;
}

body.mobile-phone #virtualJoystick {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
}

/* Additional title screen fixes */
body.mobile-phone #splashScreen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

body.mobile-phone #splashContent {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ensure stat labels are properly sized */
body.mobile-phone .stat-label,
body.mobile-phone .stat-value {
    font-size: 6px !important;
    line-height: 1.2 !important;
}