/* =============================================
   MOBILE STABILITY & RESPONSIVENESS PATCH
   =============================================
   Applied ONLY at mobile breakpoints.
   Desktop and tablet behavior is fully preserved.
   ============================================= */

/* ------------------------------------------------------------------
   0. GLOBAL OVERFLOW PREVENTION (mobile-safe)
   ------------------------------------------------------------------ */
html {
    overflow-x: hidden; /* belt-and-suspenders with body */
}

/* ------------------------------------------------------------------
   1. FIX HORIZONTAL OVERFLOW
   Mobile-only containment for the entire document
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        -webkit-text-size-adjust: 100%;
    }

    /* Prevent any element from leaking out */
    body > * {
        max-width: 100vw;
    }

    /* ------------------------------------------------------------------
       2. NAV / HAMBURGER VISIBILITY FIX
       ------------------------------------------------------------------ */
    nav {
        width: 100%;
        max-width: 100vw;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box;
    }

    .nav-logo {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 80px); /* leave room for hamburger */
        font-size: clamp(0.72rem, 4vw, 0.95rem);
    }

    .hamburger {
        flex-shrink: 0;
        position: relative;
        right: 0;
        margin-left: auto;
    }

    /* Mobile menu overlay: ensure no overflow */
    .nav-links.open {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Hide the desktop register button (already done, reinforce) */
    .nav-register.nav-register-bar {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       3. HERO SECTION STABILITY
       ------------------------------------------------------------------ */
    #hero {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        /* Use stable viewport height: dvh fallbacks */
        min-height: 100vh;
        min-height: 100dvh;
        /* Prevent layout shift on load */
        contain: layout style;
    }

    #hero-canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw;
    }

    .hero-content {
        max-width: 100%;
        width: 100%;
        padding: 0 0.75rem;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Prevent hero title letter-spacing from causing overflow */
    .hero-title {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .hero-eyebrow {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.2em;
        font-size: clamp(0.45rem, 2.5vw, 0.65rem);
    }

    .hero-tagline {
        letter-spacing: clamp(0.1em, 2vw, 0.3em);
        max-width: 100%;
    }

    .hero-date {
        letter-spacing: clamp(0.08em, 1.5vw, 0.2em);
        max-width: 100%;
    }

    .scroll-indicator {
        margin-top: 25px;
    }

    /* ------------------------------------------------------------------
       4. SECTION SHELL CONTAINMENT
       ------------------------------------------------------------------ */
    .section-shell {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* ------------------------------------------------------------------
       5. ALL SECTIONS: Prevent overflow
       ------------------------------------------------------------------ */
    section,
    #welcome-norse,
    #about,
    #societies,
    #events,
    #reach-realm,
    #hall-of-sagas,
    #contact,
    footer {
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------
       6. WELCOME NORSE SECTION
       ------------------------------------------------------------------ */
    #welcome-norse {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #welcome-norse::before {
        background-image: url('../Assets/yggdrasil_mobile.png');
        inset: 0;
        background-size: cover;
        background-position: center;
    }

    .welcome-container {
        max-width: 100%;
        overflow: hidden;
    }

    /* ------------------------------------------------------------------
       7. ABOUT SECTION - bg runes containment
       ------------------------------------------------------------------ */
    .about-bg-runes {
        overflow: hidden;
        max-width: 100vw;
    }

    /* ------------------------------------------------------------------
       8. NORDIC DIVIDER - prevent shimmer overflow
       ------------------------------------------------------------------ */
    .nordic-divider {
        max-width: 100vw;
        overflow: hidden;
    }

    .nordic-divider-line {
        max-width: 90vw;
    }

    /* ------------------------------------------------------------------
       9. SOCIETIES SECTION
       ------------------------------------------------------------------ */
    .society-name {
        font-size: clamp(0.55rem, 2.5vw, 0.75rem);
        word-break: break-word;
    }

    .rune-circle::before {
        inset: -4px; /* smaller outer ring on mobile */
    }

    /* ------------------------------------------------------------------
       10. EVENTS SECTION
       ------------------------------------------------------------------ */
    #events-canvas {
        max-width: 100vw;
        overflow: hidden;
    }

    .arena-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .arena-grid-center-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .arena-grid-center-row .event-card {
        flex: 0 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    .event-card {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .event-norse {
        font-size: clamp(0.95rem, 4vw, 1.25rem);
        word-break: break-word;
    }

    /* ------------------------------------------------------------------
       11. REACH THE REALM SECTION
       ------------------------------------------------------------------ */
    #reach-realm::before {
        width: 100vw;
        max-width: 100vw;
    }

    .realm-card {
        max-width: 100%;
        overflow: hidden;
    }

    /* ------------------------------------------------------------------
       12. HALL OF SAGAS - saga frame containment
       ------------------------------------------------------------------ */
    .saga-frame {
        max-width: 100%;
        overflow: hidden;
    }

    .saga-shimmer {
        max-width: 100%;
    }

    /* ------------------------------------------------------------------
       13. CONTACT SECTION
       ------------------------------------------------------------------ */
    .contact-content {
        max-width: 100%;
        overflow: hidden;
    }

    .contact-item {
        font-size: clamp(0.75rem, 3.5vw, 0.95rem);
        letter-spacing: 0.1em;
        word-break: break-all;
    }

    .contact-rune-circle {
        max-width: 120px;
        max-height: 120px;
    }

    /* ------------------------------------------------------------------
       14. FOOTER CONTAINMENT
       ------------------------------------------------------------------ */
    footer {
        max-width: 100vw;
        overflow: hidden;
    }

    .footer-texture {
        max-width: 100vw;
    }

    /* ------------------------------------------------------------------
       15. MODAL / OVERLAY FIX
       ------------------------------------------------------------------ */
    #modal-overlay {
        padding: 0.75rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .modal-box {
        max-width: calc(100vw - 1.5rem);
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 1.25rem;
    }

    .modal-rune-ring {
        width: 50px;
        height: 50px;
        top: -25px;
        font-size: 1rem;
    }

    .modal-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-actions .btn-rune {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .modal-illustration {
        max-width: 100%;
    }

    /* ------------------------------------------------------------------
       16. RULEBOOK PANEL FIX
       ------------------------------------------------------------------ */
    .rulebook-panel {
        padding: 0.5rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .rulebook-manuscript {
        max-width: calc(100vw - 1rem);
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 1.25rem;
        clip-path: none;
        border-radius: 10px;
    }

    .rulebook-img {
        max-width: 100%;
    }

    /* ------------------------------------------------------------------
       17. CANVAS CONTAINMENT
       ------------------------------------------------------------------ */
    #particle-canvas {
        width: 100vw !important;
        max-width: 100vw;
        overflow: hidden;
        /* Don't let it cause scrollbars */
        position: fixed;
        left: 0;
        top: 0;
    }

    canvas {
        max-width: 100vw;
    }

    /* ------------------------------------------------------------------
       18. FLOATING RUNE CONTAINMENT
       ------------------------------------------------------------------ */
    .rune-float {
        max-width: 100vw;
        overflow: hidden;
        /* Prevent rune floaters from causing horizontal scroll */
        right: auto;
    }

    /* ------------------------------------------------------------------
       19. SECTION TITLES - ensure wrapping for long text
       ------------------------------------------------------------------ */
    .section-title {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: break-word;
        padding: 0 0.5rem;
    }

    .section-eyebrow {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 0.5rem;
    }

    /* ------------------------------------------------------------------
       20. GLOW LINE CONTAINMENT
       ------------------------------------------------------------------ */
    .glow-line {
        max-width: 100vw;
    }

    /* ------------------------------------------------------------------
       21. FOLKVANGR CARD FIX
       ------------------------------------------------------------------ */
    .folkvangr-wrap {
        max-width: 100%;
        padding: 0;
    }

    .folkvangr-card {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ------------------------------------------------------------------
   EXTRA-SMALL SCREEN FIXES (below 480px)
   ------------------------------------------------------------------ */
@media (max-width: 480px) {

    nav {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .nav-logo {
        font-size: clamp(0.65rem, 3.8vw, 0.85rem);
        max-width: calc(100vw - 70px);
    }

    .hero-content {
        padding: 0 0.5rem;
    }

    .hero-title {
        font-size: clamp(2rem, 12vw, 4rem);
    }

    .hero-eyebrow {
        letter-spacing: 0.15em;
        font-size: clamp(0.4rem, 2.2vw, 0.55rem);
    }

    .hero-tagline {
        letter-spacing: clamp(0.08em, 1.5vw, 0.2em);
    }

    .hero-date {
        letter-spacing: clamp(0.05em, 1vw, 0.15em);
    }

    /* Arena grid: 2 columns, 4 rows for 8 events */
    .arena-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .arena-grid-center-row .event-card {
        flex: 0 1 100%;
    }

    /* Societies: ensure 2-col stays clean */
    .societies-grid {
        gap: 0.75rem;
        padding: 0 0.25rem;
    }

    /* Saga frame */
    .saga-frame {
        aspect-ratio: 4 / 3; /* taller on mobile for better visibility */
    }

    .saga-counter {
        right: 12px;
        bottom: 8px;
        font-size: 0.5rem;
    }

    /* Modal */
    .modal-box {
        padding: 1rem;
        max-height: 88vh;
    }

    /* Realm cards */
    .realm-grid {
        gap: 0.75rem;
    }

    /* Contact */
    .contact-item {
        font-size: clamp(0.7rem, 3.2vw, 0.85rem);
    }
}

/* ------------------------------------------------------------------
   VERY SMALL SCREENS (below 360px)
   ------------------------------------------------------------------ */
@media (max-width: 360px) {

    .nav-logo {
        font-size: 0.65rem;
        letter-spacing: 0.05em;
    }

    .hero-title {
        font-size: clamp(1.8rem, 13vw, 3rem);
    }

    .section-title {
        font-size: clamp(1.3rem, 6vw, 2rem);
    }

    .hero-eyebrow {
        letter-spacing: 0.1em;
        font-size: 0.4rem;
    }
}