/* ===================================================
   MOBILE FIXES – VÉGLEGES, MŰKÖDŐ VERZIÓ
   (minden méret és elrendezés változatlan!)
=================================================== */

/* --- EREDETI MŰKÖDŐ BLOKKOK MEGTARTVA --- */
@media (max-width: 768px) {

  html, body { overflow-x: hidden; }

  .page-frame.fixed-frame {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-nav {
    gap: 18px !important;
    font-size: 12px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .calendar-grid {
    grid-template-columns: repeat(4, 70px) !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }

  .gallery-row-wrapper { overflow-x: hidden !important; }
  .gallery-row img { max-width: 90px !important; max-height: 90px !important; }
}


/* ===================================================
   MOBIL: ZENE GOMB ELTÜNTETÉSE
=================================================== */
@media (max-width: 768px) {
    #soundToggle,
    .sound-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* ===================================================
   MOBIL: SCROLL / FEHÉR OLDALSÁV TILTÁSA
=================================================== */
@media (max-width: 768px) {

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;

        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        background: none !important;
    }

    body::-webkit-scrollbar {
        display: none !important;
    }
}


/* ===================================================
   FIX HÁTTÉRRÉTEG – (háttér + hó rétegzése)
=================================================== */
@media (max-width: 768px) {

    /* Háttér – legalsó réteg */
    .fixed-bg-layer {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #0a1a2a !important;
        z-index: -2 !important;
        pointer-events: none !important;
        touch-action: none !important;
    }

    /* Hó – háttér fölött, tartalom alatt */
    #snowCanvas {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -1 !important;
        pointer-events: none !important;
        touch-action: none !important;
    }

    /* Tartalom scrollozható marad */
    .page-frame,
    .fixed-frame,
    .quiz-frame {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        min-height: 100vh !important;
    }
}


@media (max-width: 768px) {
    html, body {
        background-color: #0a1a2a !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: none !important;
    }
}


@media (max-width: 768px) {

    /* HTML NE kapjon hátteret – ezzel megszűnik a „plusz háttér” hatás */
    html {
        background: transparent !important;
    }

    /* BODY kapja a jelenlegi kék hátteret, torzítás nélkül */
    body {
        background-color: #0a1a2a !important; /* a jelenlegi kék */
        min-height: 100vh !important;         /* kitölti a kijelzőt */
        height: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: none !important; /* ne villanjon fehér */
    }
}

@media (max-width: 480px) {
  .advent-title,
  h1 {
    margin-top: 12px;
    margin-bottom: 16px;
  }
}