/* ==================================================
   INDEX.HTML - CLEAN RESPONSIVE STYLES
   Single @media query for all mobile styles
   ================================================== */

/* ==================================================
   DESKTOP STYLES (Default - min-width: 769px)
   ================================================== */
/* Desktop styles are in the main index.html <style> section */

/* ==================================================
   ALL MOBILE STYLES (max-width: 768px) - SINGLE BLOCK
   ================================================== */
@media (max-width: 768px) {
    /* ========== LAYOUT STRUCTURE ========== */
    
    /* VRM display area */
    .vrm-display {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 45vh;
        z-index: 10;
    }

    /* ========== TOP ELEMENTS ========== */
    
    /* WAIFU Title */
    .heroes-title {
        font-size: 40px !important;
        top: 8px !important;
        left: 20px !important;
        z-index: 100 !important;
    }

    /* Language Toggle - Below WAIFU title */
    .language-toggle {
        position: fixed !important;
        top: 55px !important;
        left: -11px !important;
        bottom: auto !important;
        scale: 0.6;
        z-index: 100;
        background: rgba(0, 0, 0, 0.7);
        padding: 5px 10px;
        border-radius: 15px;
    }

    /* ========== CHARACTER DISPLAY ========== */
    
    /* Character Display Name */
    .character-display-name {
        position: fixed;
        bottom: 450px;  /* Positioned for mobile */
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        z-index: 30;
    }

    /* Voice Selector - Above character-display-name with top positioning */
    .voice-selector-floating {
        position: fixed !important;
        top: 20vh !important; /* Position from top for stability */
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        bottom: auto !important;
        padding: 8px 12px !important;
        border-radius: 28px !important;
        z-index: 35;
        background: rgba(0, 0, 0, 0.8);
        scale: 1; /* Default scale for 768px */
    }
    
    /* Voice Selector - Default mobile styles (will be overridden below for smaller screens) */

    /* Regular Voice Selector (if different from floating) */
    .voice-selector {
        position: fixed !important;
        bottom: 100px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        z-index: 99;
        background: rgba(0, 0, 0, 0.8);
        padding: 5px 10px;
        border-radius: 20px;
    }

    /* ========== CHARACTER INFO ========== */
    
    /* Character Info Panel */
    .character-info {
        position: absolute !important;
        top: 100px !important;
        left: 22px !important;
        right: auto !important;
        width: 170px !important;
        max-width: none;
        scale: 0.45 !important;
        transform: scale(1.3) !important;
        transform-origin: top left !important;
        bottom: auto;
        height: auto;
        overflow: hidden !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(200, 200, 200, 0.5) !important;
        border-radius: 7px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        z-index: 100 !important;
    }

    /* Profile adjustments */
    .profile-container {
        padding: 0;
    }

    .profile-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .selected-avatar {
        width: 80px;
        height: 80px;
    }

    .selected-avatar-img {
        width: 80px;
        height: 80px;
    }

    .basic-info h3 {
        font-size: 20px;
    }

    .info-row {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }

    .info-item {
        width: 100%;
    }

    /* ========== CHARACTER SELECTOR ========== */
    
    /* Character Selector - Mobile version scaled down 30% with horizontal scroll */
    .character-selector {
        position: fixed !important;
        top: 65vh !important; /* Position from top instead of bottom for stability */
        left: 50% !important;
        transform: translateX(-50%) scale(0.7) !important; /* Scale down entire UI by 30% */
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important; /* Original desktop gap - will be scaled by transform */
        padding: 12px 31px !important; /* Original desktop padding - will be scaled by transform */
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 60px !important; /* Original desktop radius - will be scaled by transform */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 90;
        box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1) !important;
        max-width: calc(85vw) !important; /* Max width before scaling to allow scrolling */
        box-sizing: border-box !important;
        width: auto !important;
        height: auto !important;
        overflow-x: auto !important; /* Enable horizontal scrolling */
        overflow-y: hidden !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    /* Hide scrollbar for WebKit browsers */
    .character-selector::-webkit-scrollbar {
        display: none !important;
    }

    /* Navigation buttons - Hidden for scroll mode */
    .character-selector .nav-button {
        display: none !important; /* Hide navigation buttons, using scroll instead */
    }

    /* Character thumbnails - Mobile with scroll */
    .character-selector .character-thumbnails {
        display: flex !important;
        gap: 9px !important; /* Keep original desktop gap - will be scaled by transform */
        flex-shrink: 0 !important; /* Prevent shrinking during scroll */
    }

    /* Selected indicator - Mobile */
    .character-selector .selected-indicator {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 8px !important; /* Original margin - will be scaled by transform */
        flex-shrink: 0 !important; /* Prevent shrinking during scroll */
    }

    .character-selector .selected-avatar {
        width: 50px !important; /* Original size - will be scaled by transform */
        height: 50px !important; /* Original size - will be scaled by transform */
        border-radius: 50% !important;
        overflow: hidden !important;
        margin-bottom: 4px !important; /* Original margin - will be scaled by transform */
    }

    .character-selector .selected-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .character-selector .selected-badge {
        font-size: 10px !important; /* Original font size - will be scaled by transform */
        color: white !important;
    }

    .character-selector .selected-text {
        display: none !important;
    }

    /* Hide old character-list in mobile when using new selector */
    .character-list {
        display: none !important;
    }


    /* ========== BUTTONS ========== */
    
    /* Voice Play Button */
    .voice-play-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    /* Start Button */
    .start-button {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 140px);
        max-width: 200px;
        padding: 12px 20px;
        font-size: 14px;
        z-index: 60;
    }

    /* ========== MODALS ========== */
    
    /* Wallet Modal */
    .wallet-modal {
        padding: 20px;
    }

    .wallet-modal-content {
        padding: 20px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .wallet-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Registration Form */
    .registration-overlay {
        padding: 10px;
    }

    .registration-container {
        width: 95%;
        max-width: none;
        height: 90vh;
        padding: 15px;
    }

    .registration-header h2 {
        font-size: 20px;
    }

    .registration-content {
        padding: 15px;
    }

    .form-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .profile-field input,
    .profile-field select,
    .profile-field textarea {
        font-size: 14px;
        padding: 8px;
    }

    .birthday-inputs {
        gap: 5px;
    }

    .birthday-inputs input,
    .birthday-inputs select {
        font-size: 14px;
    }

    .registration-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .submit-btn,
    .close-registration-btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
}

/* ==================================================
   SMALL MOBILE (max-width: 480px) - Optional refinements
   ================================================== */
@media (max-width: 480px) {
    /* Only override what's absolutely necessary */
    .vrm-display {
        height: 40vh;
    }

    .character-info {
        top: 90px;
        left: 15px;
        right: 15px;
        scale: 0.3;
    }

    /* Character selector adjustments for small screens */
    .character-selector {
        top: 60vh !important; /* Slightly higher for smaller screens */
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 40px) !important; /* Prevent overflow */
        box-sizing: border-box !important;
        gap: 4px !important; /* Compact spacing */
        padding: 6px 12px !important; /* Compact padding */
        overflow: hidden !important; /* Extra safety */
    }

    .selected-avatar,
    .selected-avatar-img {
        width: 70px;
        height: 70px;
    }

    .basic-info h3 {
        font-size: 18px;
    }

    .start-button {
        font-size: 13px;
        padding: 10px 15px;
    }

    /* Voice Selector - Small screen adjustments */
    .voice-selector-floating {
        top: 18vh !important; /* Slightly higher for small screens */
        left: 8px !important;
        transform: none !important;
        scale: 0.85 !important;
    }

    /* Small screen adjustments */
    .character-info {
        top: 90px;
        left: 15px;
        right: 15px;
        scale: 0.3;
    }

    .character-display-name {
        position: fixed;
        bottom: 220px !important;
        left: 50% !important;
        transform: translateX(-50%);
        font-size: 28px;
        z-index: 30;
    }
}

/* ==================================================
   LANDSCAPE ORIENTATION (optional)
   ================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .vrm-display {
        height: 60vh;
    }

    .character-info {
        top: 60vh;
        bottom: 100px;
        padding: 10px;
    }

    /* Character selector - landscape adjustments */
    .character-selector {
        bottom: 60px !important;
    }

    .start-button {
        bottom: 5px;
        padding: 8px 15px;
        font-size: 13px;
    }

    .profile-header {
        flex-direction: row;
    }

    .selected-avatar,
    .selected-avatar-img {
        width: 60px;
        height: 60px;
    }

    /* Voice Selector - Landscape adjustments */
    .voice-selector-floating {
        top: 25vh !important; /* Higher position for landscape */
    }

    .character-display-name {
        bottom: 340px;
    }
}

/* ==================================================
   UNIVERSAL PORTRAIT MOBILE - Force consistent layout
   ================================================== */
@media (orientation: portrait) and (max-width: 767px) {
    /* Ensure all portrait mobile devices use top positioning */
    .character-selector {
        top: 62vh !important; /* Consistent position from top for all portrait devices */
        left: 50% !important;
        transform: translateX(-50%) scale(0.7) !important; /* Scale down entire UI by 30% */
        transform-origin: center !important;
        max-width: calc(85vw) !important; /* Max width before scaling to allow scrolling */
        box-sizing: border-box !important;
        gap: 9px !important; /* Original gap - will be scaled by transform */
        padding: 12px 31px !important; /* Original padding - will be scaled by transform */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        overflow-y: hidden !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* ==================================================
   EMERGENCY OVERRIDE - Highest priority for overflow fix
   ================================================== */
@media (max-width: 767px) {
    .character-selector.character-selector {
        top: 62vh !important; /* Force top positioning for stability */
        bottom: auto !important; /* Remove any bottom positioning */
        max-width: calc(85vw) !important; /* Max width before scaling to allow scrolling */
        box-sizing: border-box !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.7) !important; /* Scale down entire UI by 30% */
        transform-origin: center !important;
        gap: 9px !important; /* Original gap - will be scaled by transform */
        padding: 12px 31px !important; /* Original padding - will be scaled by transform */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        overflow-y: hidden !important;
        white-space: nowrap !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    /* Hide scrollbar for WebKit browsers */
    .character-selector.character-selector::-webkit-scrollbar {
        display: none !important;
    }
}