/* ============================================
   OUR LITTLE WORLD — Global Responsive Fixes
   Comprehensive mobile-first responsive overrides
   ============================================ */

/* === UNIVERSAL MOBILE SAFETY === */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    /* --- Vault Layout --- */
    .vault-main-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .vault-nav-aside {
        height: auto;
    }

    /* --- Music Layout --- */
    .music-layout {
        grid-template-columns: 1fr;
    }

    .music-panel-right {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* --- Letters Layout --- */
    .letters-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    /* --- Calendar Section body grid --- */
    .calendar-body-grid {
        grid-template-columns: 1fr;
    }

    /* --- Missions Layout --- */
    .mission-layout {
        grid-template-columns: 1fr;
    }

    /* --- Profile Layout --- */
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-preview-column {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* --- Games Layout --- */
    .lobby-main-grid {
        grid-template-columns: 1fr;
    }

    .side-panel {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .side-panel .mini-panel {
        min-width: unset;
    }

    /* --- When I'm Gone --- */
    .capsule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* --- Global Sidebar & Main Content --- */
    .sidebar {
        transform: translateX(-100%);
        width: 250px;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 20px 16px !important;
        width: 100% !important;
        overflow-x: hidden !important;
        max-width: 100vw;
        padding-top: 70px !important;
    }

    .page-header {
        margin-top: 10px;
        text-align: center;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    /* --- Page Header Alt (used by many pages) --- */
    .page-header-alt {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .page-header-alt h1 {
        font-size: 1.8rem;
    }

    /* --- Glass Card --- */
    .glass-card {
        padding: 16px;
        border-radius: 12px;
    }

    /* --- Vault --- */
    .vault-top-nav {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .vt-info h1 {
        font-size: 1.6rem;
    }

    .vt-actions {
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .auto-lock-status {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .vault-main-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .vault-nav-aside {
        height: auto;
    }

    .file-modern-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        padding: 16px;
        gap: 12px;
    }

    .content-header {
        padding: 16px 20px;
    }

    .form-row.split {
        grid-template-columns: 1fr;
    }

    /* --- Music Page --- */
    .music-container {
        padding: 16px !important;
    }

    .music-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-bar-container {
        flex-direction: column;
    }

    .player-main {
        flex-direction: column;
    }

    .player-video-wrap {
        width: 100%;
        min-width: unset;
    }

    .songs-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .music-panel-right {
        grid-template-columns: 1fr;
    }

    .volume-wrap {
        display: none;
    }

    .header-actions {
        width: 100%;
    }

    .header-btn {
        flex: 1;
        justify-content: center;
    }

    /* --- Profile --- */
    .profile-preview-column {
        grid-template-columns: 1fr;
    }

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

    .profile-tabs {
        gap: 2px;
        padding: 4px;
    }

    .profile-tab {
        padding: 10px 4px;
    }

    .tab-text {
        font-size: 0.62rem;
    }

    .account-info-grid {
        grid-template-columns: 1fr;
    }

    .avatar-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* --- Secret Room --- */
    .secret-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

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

    .tab-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .tab-header h2 {
        font-size: 1.5rem;
    }

    .secret-theme::after {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .gatekeeper {
        padding: 40px 25px;
        margin: 20px;
        border-radius: 20px;
    }

    .gate-title {
        font-size: 3.5rem;
    }

    /* --- Guardian --- */
    .guardian-container {
        flex-direction: column;
    }

    .guardian-panel {
        width: 100%;
        height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    }

    /* --- Letters --- */
    .luxury-page-header h1 {
        font-size: 3rem;
    }

    .luxury-top-nav {
        flex-direction: column;
        border-radius: 30px;
        gap: 20px;
        padding: 25px;
    }

    .luxury-search {
        width: 100%;
    }

    .nav-filters ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .letter-card {
        padding: 30px 25px;
    }

    .fab-write-letter {
        bottom: 25px;
        right: 25px;
        padding: 15px 25px;
        font-size: 0.9rem;
    }

    .template-paper {
        min-height: 500px !important;
    }

    .paper-scroll-area {
        padding: 40px 30px !important;
    }

    .paper-classic {
        border-left-width: 25px !important;
    }

    /* --- Appreciation --- */
    .appreciation-grid {
        padding: 20px;
        border-width: 8px;
        gap: 15px;
    }

    .sticky-note {
        min-height: 200px;
    }

    /* --- Calendar --- */
    .form-sc-grid {
        grid-template-columns: 1fr;
    }

    .calendar-hero {
        padding: 30px 20px;
    }

    /* --- Chat --- */
    .chat-container {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        display: none;
    }

    .chat-sidebar.active {
        display: block;
        position: fixed;
        top: 80px;
        left: 15px;
        right: 15px;
        z-index: 200;
        max-height: calc(100vh - 120px);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .chat-bubble {
        max-width: 90%;
    }

    .emotion-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* --- Conflict Overlay --- */
    .conflict-overlay {
        padding: 25px;
    }

    .conflict-header {
        margin-bottom: 25px;
    }

    .conflict-header h2 {
        font-size: 1.4rem;
    }

    .btn-exit-conflict {
        position: relative;
        margin-bottom: 15px;
    }

    /* --- Home --- */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hero-greeting {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 12px;
        margin-bottom: 20px;
    }

    .days-counter {
        min-width: unset;
        width: 100%;
    }

    .mood-duo {
        flex-direction: column;
        gap: 16px;
    }

    .shortcuts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* --- Journal --- */
    .journal-grid {
        grid-template-columns: 1fr;
    }

    .journal-entries {
        grid-template-columns: 1fr;
    }

    .daily-question-box {
        padding: 20px;
    }

    /* --- Memories --- */
    .masonry-grid {
        column-count: 2;
    }

    .controls-bar {
        flex-direction: column;
        gap: 12px;
    }

    .view-toggles {
        width: 100%;
    }

    .view-toggle {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .filter-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .timeline-layout {
        padding-left: 20px;
    }

    .timeline-layout::before {
        left: 6px;
    }

    .timeline-item {
        padding-left: 30px;
    }

    /* --- Missions --- */
    .mission-layout {
        grid-template-columns: 1fr;
    }

    .rpg-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 25px 20px;
    }

    .exp-bar-container {
        width: 100%;
    }

    /* --- Mood Sync --- */
    .mood-duo-display {
        flex-direction: column;
        gap: 20px;
    }

    .compatibility-card {
        padding: 20px;
    }

    .mood-grid-classic {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- Intimacy --- */
    .intimacy-grid {
        grid-template-columns: 1fr;
    }

    .stats-list {
        grid-template-columns: 1fr;
    }

    /* --- Growth --- */
    .timeline-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .growth-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Wishlist --- */
    .wishlist-tabs {
        gap: 8px;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* --- Games --- */
    .neon-title {
        font-size: 1.4rem;
        letter-spacing: 3px;
    }

    .neon-subtitle {
        font-size: 0.45rem;
        letter-spacing: 2px;
    }

    .room-banner {
        padding: 35px 15px 20px;
    }

    .vs-strip {
        flex-direction: column;
        gap: 0;
    }

    .vs-player.p2 {
        flex-direction: row;
        text-align: left;
    }

    .vs-player.p2 .vs-stats-row,
    .vs-player.p2 .vs-status {
        justify-content: flex-start;
    }

    .vs-divider {
        margin: -20px auto;
        z-index: 4;
    }

    .vs-badge {
        margin: 0;
        width: 44px;
        height: 44px;
        font-size: 0.6rem;
    }

    .quick-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-selection-grid {
        grid-template-columns: 1fr;
    }

    .hud-chip {
        padding: 6px 12px;
        font-size: 0.6rem;
    }

    .lobby-content {
        padding: 0 15px 30px;
    }

    .section-card {
        padding: 20px 16px;
    }

    .side-panel {
        flex-direction: column;
    }

    .side-panel .mini-panel {
        min-width: unset;
    }

    /* --- Healing Room --- */
    .healing-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .header-content {
        flex-direction: column;
        min-width: unset;
    }

    .quick-actions {
        width: 100%;
        justify-content: center;
    }

    .healing-grid {
        grid-template-columns: 1fr;
    }

    .healing-card {
        min-height: auto;
    }

    .healing-atmosphere {
        left: 0;
        width: 100%;
    }

    /* --- When I'm Gone --- */
    .capsule-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 2.2rem;
    }

    .immersive-capsule {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .capsule-header h2 {
        font-size: 1.8rem;
    }

    /* --- Shortcuts --- */
    .sc-header {
        flex-direction: column;
        gap: 16px;
    }

    .sc-header-actions {
        width: 100%;
    }

    .sc-search {
        flex: 1;
        width: 100%;
    }

    .sc-grid .sc-card {
        width: 100%;
        max-width: none;
    }

    .sc-card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    .sc-card-name {
        font-size: 0.8rem;
    }

    .sc-card-desc {
        display: none;
    }

    .sc-emoji-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* --- Study Room pages --- */
    .ai-tutor-layout,
    .study-layout {
        flex-direction: column;
    }

    .study-sidebar,
    .tutor-sidebar {
        width: 100%;
        max-width: 100%;
    }

    /* AI Tutor Chat */
    .ai-chat-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 180px);
    }

    .ai-sidebar {
        width: 100%;
        order: -1;
    }

    .chat-messages {
        padding: 16px;
    }

    .chat-input-area {
        padding: 16px;
    }

    .message {
        max-width: 95%;
    }

    /* Quran / Hadits / Doa pages */
    .surah-list,
    .hadits-sidebar,
    .doa-sidebar {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 300px;
    }

    .reader-area,
    .content-reader {
        width: 100%;
    }

    .surah-grid {
        grid-template-columns: 1fr;
    }

    /* Whiteboard */
    .wb-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .wb-tools {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Browser Bersama */
    .results-navbar {
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .results-tabs-bar {
        padding-left: 15px;
    }

    .results-viewport {
        padding-left: 15px;
        padding-right: 15px;
    }

    .google-logo-big {
        font-size: 4rem;
    }

    /* --- Modals (global fix) --- */
    .modal-overlay {
        padding: 15px;
        align-items: flex-start;
        padding-top: 60px;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .modal-content.glass-card {
        padding: 24px 20px;
    }

    /* Stats summary grid */
    .stats-summary {
        grid-template-columns: 1fr;
    }

    /* --- Love Ping Bar --- */
    .love-ping-bar {
        flex-direction: column;
        gap: 8px;
    }

    /* --- Generic form rows --- */
    .form-row.split,
    .form-split {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .main-content {
        padding: 16px 12px !important;
        padding-top: 68px !important;
    }

    /* --- Home --- */
    .hero-title {
        font-size: 1.15rem;
    }

    .love-ping-btn {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .shortcuts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Chat --- */
    .chat-bubble {
        max-width: 95%;
        padding: 12px 15px;
    }

    .message-content p {
        font-size: 0.9rem;
    }

    .input-wrapper {
        padding: 5px 5px 5px 12px;
    }

    .selected-emotion {
        font-size: 1.5rem;
    }

    .btn-send {
        width: 40px;
        height: 40px;
    }

    /* --- Music --- */
    .songs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .search-suggestions {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .suggestion-chip {
        flex-shrink: 0;
    }

    /* --- Profile --- */
    .profile-card-stats {
        flex-direction: column;
        gap: 8px;
    }

    .stat-divider {
        width: 60%;
        height: 1px;
    }

    .avatar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .modal-content {
        width: 95% !important;
    }

    /* --- Vault --- */
    .file-modern-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
    }

    .keypad-grid {
        gap: 10px;
        max-width: 250px;
        margin: 0 auto;
    }

    .key-btn {
        font-size: 1.2rem;
    }

    .lock-title {
        font-size: 1.2rem;
    }

    /* --- Secret Room --- */
    .corner-ornament.top-left {
        top: 40px;
        left: 10px;
    }

    .corner-ornament.bottom-right {
        bottom: 40px;
        right: 10px;
    }

    .gatekeeper {
        padding: 30px 20px;
        margin: 10px;
    }

    .gate-title {
        font-size: 2.5rem;
    }

    .gate-icon {
        font-size: 3rem;
    }

    /* --- Letters --- */
    .luxury-page-header h1 {
        font-size: 2rem;
    }

    .luxury-page-header {
        margin-bottom: 40px;
    }

    .letter-card {
        padding: 25px 20px;
    }

    .letter-icon {
        font-size: 3rem;
    }

    .fab-write-letter {
        bottom: 20px;
        right: 15px;
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .paper-scroll-area {
        padding: 30px 20px !important;
    }

    /* --- When I'm Gone --- */
    .page-title {
        font-size: 1.8rem;
    }

    .capsule-card {
        padding: 25px 20px;
    }

    .immersive-capsule {
        padding: 25px 15px;
    }

    /* --- Games --- */
    .vs-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .vs-name {
        font-size: 0.85rem;
    }

    .quick-stats-row {
        gap: 8px;
    }

    .quick-stat-card {
        padding: 14px 12px;
    }

    .qs-value {
        font-size: 1.1rem;
    }

    /* --- Growth --- */
    .growth-overview {
        grid-template-columns: 1fr;
    }

    /* --- Healing Room --- */
    .breathing-circle-wrapper {
        width: 150px;
        height: 150px;
    }

    .breathing-instruction {
        font-size: 1.2rem;
    }

    .player-controls {
        gap: 8px;
    }

    .control-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .control-btn.control-main {
        width: 50px;
        height: 50px;
    }

    /* --- Calendar --- */
    .calendar-grid-header,
    .calendar-grid-body {
        font-size: 0.75rem;
    }

    .calendar-day {
        padding: 6px 4px;
        min-height: 50px;
    }

    /* --- Journal --- */
    .journal-modal {
        padding: 25px 20px;
    }

    .detail-mood-lg {
        font-size: 3rem;
    }

    .detail-date-lg {
        font-size: 1.5rem;
    }

    /* --- Mood Sync --- */
    .form-split {
        flex-direction: column;
        gap: 0;
    }

    .mood-grid-classic {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Memories --- */
    .masonry-grid {
        column-count: 1;
    }

    .detail-card {
        max-width: 100%;
    }

    .detail-card .detail-image-section {
        max-height: 250px;
    }
}

/* ============================================
   EXTRA SMALL SCREENS (max-width: 360px)
   ============================================ */
@media (max-width: 360px) {
    .main-content {
        padding: 12px 8px !important;
        padding-top: 65px !important;
    }

    .glass-card {
        padding: 12px;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sc-grid .sc-card {
        padding: 16px 14px;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    .file-modern-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FIX: Prevent overflow from fixed-width elements
   ============================================ */
@media (max-width: 768px) {

    /* Ensure table-like layouts don't overflow */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent long text from breaking layout */
    .message-content,
    .note-content,
    .capsule-body,
    .detail-description,
    .journal-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Fix position: fixed elements that might overflow */
    .fab-write-letter,
    .mood-player-mini {
        z-index: 100;
    }

    /* Scrollable horizontal containers */
    .tracker-grid,
    .category-chips,
    .wishlist-tabs,
    .playlist-selector {
        -webkit-overflow-scrolling: touch;
    }

    /* Fix any hard-coded widths */
    .exp-bar-container {
        width: 100%;
        max-width: 250px;
    }

    /* Pin pad mobile fix */
    .pin-modal {
        max-width: 95vw !important;
        padding: 25px !important;
    }

    .pin-pad {
        gap: 12px;
    }

    .pin-pad button {
        height: 55px;
        width: 55px;
        font-size: 1.2rem;
    }

    .pin-display {
        font-size: 2rem;
        letter-spacing: 12px;
    }
}