/* =============================================
   PANEL-RESPONSIVE.CSS - Responsive Styles & Media Queries
   =============================================
   This file contains all responsive/mobile-specific styles
   including @media queries for:
   - Mobile breakpoints (max-width: 768px, 480px)
   - Touch device detection
   - Viewport-specific adjustments
   ============================================= */

@media (hover: none) and (pointer: coarse) {
    .choice-option:hover {
        background-color: #fffefe0f;
        border-color: #fffdfd27;
        transform: none;
    }
    .choice-option:hover::before {
        border-color: rgba(255, 255, 255, 0.5);
        color: rgba(255, 255, 255, 0.85);
        background-color: transparent;
    }
    .choice-container-overlay .choice-option:hover,
    .choice-container-overlay .custom-choice-container:hover {
        background-color: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.25),
            0 1px 3px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: none;
    }
}

@media (max-width: 768px) {
    .share-preview {
        border-radius: 0;
        margin: 0;
        min-height: 100vh;
    }
    
    .share-preview-header {
        padding: 12px 16px;
    }
    
    .share-preview-title {
        font-size: 16px;
    }
    
    .share-preview-speech-bubble {
        max-width: 150px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 768px) {
    .share-modal {
        width: auto;
        max-width: 92vw;
        min-width: 260px;
    }
    
    .share-preview-title {
        bottom: 18px;
        font-size: 0.55rem;
        max-width: 95px;
    }
    
    .share-platform-btn {
        width: 50px;
        height: 50px;
    }
    
    .share-platform-btn i {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .share-modal {
        width: auto;
        max-width: 94vw;
        min-width: 240px;
    }

    .share-modal-content {
        padding: 4px 12px 20px;
    }

    .share-modal .share-preview-image {
        width: auto;
        max-width: 90%;
        max-height: 60vh;
        object-fit: contain;
    }

    .share-platforms {
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    .share-platform-btn {
        width: 44px;
        height: 44px;
    }

    .share-platform-btn i {
        font-size: 1rem;
    }

    /* Smaller letter indicators on mobile */
    .choice-option {
        padding: 12px 14px;
        gap: 10px;
    }

    .choice-option::before {
        width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 15px;
    }
}

@media (max-width: 768px) {
    /* Choice option adjustments for tablet */
    .choice-option {
        padding: 14px 16px;
        gap: 11px;
    }

    .choice-option::before {
        width: 19px;
        height: 19px;
        font-size: 10px;
        line-height: 16px;
    }

    .choice-option-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .navigation-halo {
        width: 40px;
        height: 40px;
    }

    .navigation-halo.left {
        left: 0px;
    }

    .navigation-halo.right {
        right: 0px;
    }

    .navigation-halo svg {
        width: 16px;
        height: 16px;
    }

    #loadingSpinner .spinner-icon {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}

@media (max-width: 768px) {
    .chapter-completion-display {
        width: 95vw;
        max-width: none;
        max-height: 85vh;
        min-height: 80vh;
        margin: 0;
        padding: 30px 20px 20px 20px;
        /* Ensure it takes up most of the screen on mobile */
        height: 80vh;
    }
    
    .chapter-summary h3 {
        font-size: 18px;
        margin: 20px 0 12px 0;
    }
    
    .chapter-summary p {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 20px 0;
    }
    
    /* Make journal modal same size as chapter completion display on mobile */
    .journal-modal {
        width: 95vw;
        max-width: none;
        max-height: 85vh;
        min-height: 80vh;
        height: 80vh;
    }
    
    .journal-modal-content {
        padding: 20px 20px;
        max-height: calc(80vh - 80px);
    }
}

@media (max-width: 768px) {
    .ornate-page {
        max-width: 90vw;
        margin: 10px;
    }
    
    .ornate-content {
        padding: 30px 30px;
    }
    
    .chapter-completion-title h1 {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    .chapter-completion-title h2 {
        font-size: 24px;
        letter-spacing: 1px;
    }
    
    .chapter-summary-section h3 {
        font-size: 20px;
    }
    
    .summary-text {
        padding: 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ornate-content {
        padding: 20px 20px;
    }
    
    .chapter-completion-title h1 {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    .chapter-completion-title h2 {
        font-size: 20px;
        letter-spacing: 0.5px;
    }
    
    .summary-text {
        padding: 15px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    /* .journey-entry-content padding from journeyEntryStyles via journey-entry-layout.css */

    .journey-hero-card {
        max-width: 300px;
    }

    .journey-entry-title {
        font-size: 1.4rem;
    }

    .journey-entry-description {
        font-size: 0.9rem;
    }

    .loading-bar-container {
        max-width: 260px;
    }

    /* Additional mobile viewport fixes */
    html {
        height: 100vh; /* Fallback for older browsers */
        height: 100dvh; /* Dynamic viewport height */
        overflow: hidden;
    }
    
    .container {
        /* Ensure container never exceeds available space on mobile */
        max-height: 100vh; /* Fallback */
        max-height: 100dvh; /* Dynamic viewport height */
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height */
    }
    
    .panel-image {
        /* Use height-first on desktop while respecting viewport width */
        width: auto;
        max-width: 100vw;
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height */
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 768px) {
    .character-container {
        /* More aggressive constraints on mobile - same as panel images */
        max-height: calc(100dvh - 80px); /* Account for header */
        max-height: calc(100vh - 80px); /* Fallback */
    }
    
    .character-card {
        /* More aggressive constraints on mobile - same as panel images */
        max-height: calc(100dvh - 80px); /* Account for header */
        max-height: calc(100vh - 80px); /* Fallback */
    }
}

@media (max-width: 480px) {
    .character-info {
        padding: 16px;
    }
    
    .character-name {
        font-size: 1.6rem;
    }
    
    .character-description {
        font-size: 1.2rem;
    }
    
    .character-backstory {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .journey-entry-tags {
        gap: 6px;
        margin-bottom: 20px;
    }

    /* .similar-worlds-section padding, .similar-worlds-title font-size from journeyEntryStyles via journey-entry-layout.css */

    .journey-entry-screen .carousel-items {
        padding: 0 16px;
        gap: 10px;
    }
    
    /* Mobile-specific bottom indicator improvements */
    .bottom-indicator {
        width: max(40px, 4vw);
        height: max(28px, 2.5vh);
        bottom: max(4px, env(safe-area-inset-bottom, 4px));
        border-radius: 16px 16px 0 0;
    }
    
    .bottom-indicator i {
        font-size: 0.8rem;
    }
    
    /* Profile-style stats mobile */
    .profile-stats {
        gap: 24px;
        margin: 16px 0 14px 0;
    }

    .profile-stat .stat-value {
        font-size: 1.5rem;
    }

    .profile-stat .stat-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    /* Even larger bottom indicator for small mobile screens */
    .bottom-indicator {
        width: max(48px, 5vw);
        height: max(32px, 3vh);
        bottom: max(6px, env(safe-area-inset-bottom, 6px));
    }
    
    .bottom-indicator i {
        font-size: 0.9rem;
    }
    
    /* Very small mobile profile stats */
    .profile-stats {
        gap: 20px;
        margin: 12px 0 12px 0;
    }

    .profile-stat .stat-value {
        font-size: 1.3rem;
    }

    .profile-stat .stat-label {
        font-size: 0.65rem;
    }

}