@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Preahvihear&display=swap');

/* -----------------------------------------------------------------
   Mobile override: keep the DESKTOP layout on mobile and uniformly
   shrink the whole 1512×5805 design canvas so every piece (text,
   buttons, strokes, shadows, characters, ellipses…) keeps its
   exact desktop look and proportions.

   The actual `transform: scale(...)` and outer-wrapper height are
   set from a small inline script in index.html (so the value can
   be computed live from window.innerWidth / 1512). The CSS below
   handles everything else: hiding the mobile-specific shell,
   re-opening scrolling, and clipping horizontal overflow.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {

    /* 1. Show desktop shell, hide the mobile-specific one. */
    .landingShell--desktop { display: block !important; }
    .landingShell--mobile  { display: none  !important; }

    /* 2. The original layout--scaled-1512 mode locks html/body to
          100dvh + overflow:hidden. We need normal scrolling so the
          ~3.84-screens-tall page can be scrolled. */
    html,
    html.layout--scaled-1512 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        font-size: 16px !important;
    }

    html.layout--scaled-1512 body,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
        max-width: 100vw !important;
    }

    html.layout--scaled-1512 #root,
    #root {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* 3. Belt-and-braces: no wrapper introduces horizontal scroll. */
    .landingShell,
    .landingShell--desktop {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* 4. Make the outer wrapper full-width. The exact height is
          set by the inline script (it depends on window.innerWidth). */
    .desktop-scale-outer {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* 5. The canvas keeps its native 1512px design width. The
          inline script writes the right transform: scale(N). */
    .desktop-scale-canvas {
        width: 1512px !important;
        min-width: 1512px !important;
        max-width: none !important;
        min-height: 5805px !important;
        transform-origin: 0 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* 6. The white "fill" strip below the canvas (padding to a
          taller-than-design viewport) is meaningless on mobile. */
    .desktop-scale-canvas__fill {
        display: none !important;
    }
}