/* ==================================================
   INDEX.HTML - RESPONSIVE STYLES - REORGANIZED
   Separate @media queries for different screen heights
   ================================================== */

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

/* ==================================================
   BASIC MOBILE STYLES - All mobile devices
   ================================================== */
@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 Name */
    .character-display-name {
        position: fixed;
        bottom: 450px;  /* Positioned for mobile */
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        z-index: 30;
    }

    /* ========== 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%;
    }

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

    /* Start Button */
    .start-button {
        position: fixed;
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 140px);
        max-width: 200px;
        padding: 12px 20px;
        font-size: 14px;
        z-index: 999 !important; /* Ensure it's on top */
        pointer-events: auto !important; /* Ensure it's clickable */
        touch-action: manipulation !important; /* Optimize for touch */
        /* Additional protection against address bar overlap */
        margin-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Enhanced mobile browser address bar protection */
    @supports (height: 100dvh) {
        .start-button {
            bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0)));
        }
    }

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

    /* ========== 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 WIDTH (max-width: 480px) - Additional refinements
   ================================================== */
@media (max-width: 480px) {
    .vrm-display {
        height: 40vh;
    }

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

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

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

    .start-button {
        font-size: 13px;
        padding: 10px 15px;
        z-index: 999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        min-height: 44px; /* iOS minimum touch target */
    }

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

/* ==================================================
   CHARACTER SELECTOR - Height-based Portrait Queries
   ================================================== */

/* Short portrait screens (height ≤ 680px) - Very compact phones */
@media (max-width: 768px) and (max-height: 680px) and (orientation: portrait) {
    .character-selector {
        position: fixed !important;
        top: 65vh !important;
        left: 41% !important;
        transform: translateX(-50%) scale(0.65) !important;
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 25px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 50px !important;
        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(90vw) !important;
        box-sizing: border-box !important;
        width: auto !important;
        height: 120px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Medium portrait screens (681px - 750px) - Standard phones */
@media (max-width: 768px) and (min-height: 681px) and (max-height: 750px) and (orientation: portrait) {
    .character-selector {
        position: fixed !important;
        top: 70vh !important;
        left: 40% !important;
        transform: translateX(-50%) scale(0.7) !important;
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 12px 28px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 55px !important;
        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(87vw) !important;
        box-sizing: border-box !important;
        width: auto !important;
        height: 100px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Tall portrait screens (751px - 850px) - iPhone 14 size */
@media (max-width: 768px) and (min-height: 751px) and (max-height: 850px) and (orientation: portrait) {
    .character-selector {
        position: fixed !important;
        top: 73vh !important;
        left: 43% !important;
        transform: translateX(-50%) scale(0.72) !important;
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 12px 30px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 58px !important;
        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;
        box-sizing: border-box !important;
        width: auto !important;
        height: 120px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Very tall portrait screens (851px - 950px) - iPhone Pro Max */
@media (max-width: 768px) and (min-height: 851px) and (max-height: 950px) and (orientation: portrait) {
    .character-selector {
        position: fixed !important;
        top: 75vh !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.75) !important;
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 32px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 60px !important;
        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(83vw) !important;
        box-sizing: border-box !important;
        width: auto !important;
        height: 120px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Ultra tall portrait screens (> 950px) - Foldable phones, tablets */
@media (max-width: 768px) and (min-height: 951px) and (orientation: portrait) {
    .character-selector {
        position: fixed !important;
        top: 70vh !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.78) !important;
        transform-origin: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 14px 34px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 62px !important;
        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(80vw) !important;
        box-sizing: border-box !important;
        width: auto !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* ==================================================
   VOICE SELECTOR - Height-based Portrait Queries
   ================================================== */

/* Short portrait screens (height ≤ 680px) */
@media (max-width: 768px) and (max-height: 680px) and (orientation: portrait) {
    .voice-selector-floating {
        position: fixed !important;
        top: 50vh !important;
        left: 3vw !important;
        transform: none !important;
        right: auto !important;
        bottom: auto !important;
        padding: 6px 10px !important;
        border-radius: 24px !important;
        z-index: 35;
        background: rgba(0, 0, 0, 0.8);
        scale: 0.8 !important;
    }
}

/* Medium portrait screens (681px - 750px) */
@media (max-width: 768px) and (min-height: 681px) and (max-height: 750px) and (orientation: portrait) {
    .voice-selector-floating {
        position: fixed !important;
        top: 45vh !important;
        left: 3vw !important;
        transform: none !important;
        right: auto !important;
        bottom: auto !important;
        padding: 7px 11px !important;
        border-radius: 26px !important;
        z-index: 35;
        background: rgba(0, 0, 0, 0.8);
        scale: 0.85 !important;
    }
}

/* Tall portrait screens (751px - 850px) */
@media (max-width: 768px) and (min-height: 751px) and (max-height: 850px) and (orientation: portrait) {
    .voice-selector-floating {
        position: fixed !important;
        top: 40vh !important;
        left: 2vw !important;
        transform: none !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: 0.9 !important;
    }
}

/* Very tall portrait screens (851px - 950px) */
@media (max-width: 768px) and (min-height: 851px) and (max-height: 950px) and (orientation: portrait) {
    .voice-selector-floating {
        position: fixed !important;
        top: 38vh !important;
        left: 3vw !important;
        transform: none !important;
        right: auto !important;
        bottom: auto !important;
        padding: 8px 12px !important;
        border-radius: 30px !important;
        z-index: 35;
        background: rgba(0, 0, 0, 0.8);
        scale: 0.92 !important;
    }
}

/* Ultra tall portrait screens (> 950px) */
@media (max-width: 768px) and (min-height: 951px) and (orientation: portrait) {
    .voice-selector-floating {
        position: fixed !important;
        top: 25vh !important;
        left: 0vw !important;
        transform: none !important;
        right: auto !important;
        bottom: auto !important;
        padding: 9px 13px !important;
        border-radius: 32px !important;
        z-index: 35;
        background: rgba(0, 0, 0, 0.8);
        scale: 0.95 !important;
    }
}

/* ==================================================
   COMMON CHARACTER SELECTOR STYLES - All portrait mobile
   ================================================== */
@media (max-width: 768px) and (orientation: portrait) {
    /* Navigation buttons - Hidden for scroll mode */
    .character-selector .nav-button {
        display: none !important;
    }

    /* Character thumbnails - Mobile with scroll */
    .character-selector .character-thumbnails {
        display: flex !important;
        gap: 9px !important;
        flex-shrink: 0 !important;
    }

    /* Selected indicator - Mobile */
    .character-selector .selected-indicator {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 8px !important;
        flex-shrink: 0 !important;
    }

    .character-selector .selected-avatar {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }

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

    .character-selector .selected-badge {
        font-size: 10px !important;
        color: white !important;
    }

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

    /* Hide scrollbar for WebKit browsers */
    .character-selector::-webkit-scrollbar {
        display: none !important;
    }
}

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

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

    .character-selector {
        bottom: 60px !important;
    }

    .start-button {
        bottom: max(5px, env(safe-area-inset-bottom, 5px));
        padding: 8px 15px;
        font-size: 13px;
        z-index: 999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        min-height: 40px;
        /* Additional protection against address bar overlap */
        margin-bottom: env(safe-area-inset-bottom, 0);
    }

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

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

    .voice-selector-floating {
        top: 25vh !important;
    }

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