/* ============================================================================
   Moonfall responsive layer — LOADED LAST on purpose.

   This stylesheet is the cascade authority for mobile/touch overrides: it is
   linked after every other stylesheet so equal-specificity media rules here
   win without !important. Screen-specific rules stay in each screen's own
   stylesheet; only cross-screen primitives and shared mobile contracts live
   here.

   BREAKPOINT CONVENTIONS (use these; do not invent new values):
     - canonical widths:  480px (phone), 768px (large phone / small tablet),
                          1024px (tablet / small laptop)
     - touch:                 @media (pointer: coarse)
     - phone-landscape-battle: @media (pointer: coarse) and
                               (orientation: landscape) and (max-height: 520px)
       (mirrored in JS by UI.Platform.isCoarseLandscapePhone)
   ========================================================================== */

/* ---- Global mobile primitives ------------------------------------------ */

html {
  /* Stop iOS/Android from inflating text on orientation change. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* The game provides its own press feedback; the gray tap flash reads as jank. */
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  body {
    /* No pull-to-refresh / rubber-band while dragging cards at screen edges. */
    overscroll-behavior: none;
  }
}

/* ---- Touch scroll contracts --------------------------------------------- */
/* Card catalogs use pointerdown/up tap inspection (UI.TouchPreview).
   Declaring pan-y on each catalog scroll container keeps one-finger vertical
   swipes as native scrolling (the resulting pointercancel aborts the pending
   tap) instead of letting touches over cards eat the pan gesture.
   Containers (all verified in DOM-producing JS/HTML):
     .collection-content            collection modal body (cards grid + sections)
     .collection-section-deckbuilder embedded deck-builder scroller
     .collection-section-exchange   exchange section (scrolls on short screens)
     .collection-section-packs      packs section incl. reveal fan (#card-packs-cards)
     .deck-builder-container        standalone deck-builder scroller
     .moon-exchange-listings        exchange listings grid
     #moon-dream-panel              Moon Dream results scroller */

.collection-content,
.collection-section-deckbuilder,
.collection-section-exchange,
.collection-section-packs,
.deck-builder-container,
.moon-exchange-listings,
#moon-dream-panel {
  /* `pinch-zoom` as well as `pan-y`: every one of these scrollers contains
     cards, and a pinch that touches a card is the phone's magnifier
     (touch-policy.css). Bare `pan-y` would remove it from every card inside,
     because touch-action composes by restriction up to the viewport. */
  touch-action: pan-y pinch-zoom;
}

/* Hover previews use inline max-int z-index values. Keep their desktop visual
   priority while reserving the browser's final stacking slot for the portrait
   blocker below. !important is intentionally required to beat those inline
   declarations without coupling every preview producer to orientation state. */
.card-hover-preview {
  z-index: 2147483646 !important;
}

/* ---- Rotate-device prompt: the WHOLE APP is landscape-only --------------- */
/* Moonfall does not support portrait anywhere (menus included) — a phone/tablet
   held vertically gets a full-screen "rotate" prompt over everything, and the
   app reflows the instant it turns landscape. The max-int z-index sits above
   every transient/modal layer; #rotate-overlay is a top-level fixed element so
   it covers the lobby, foundry, collection, and battle alike. */

#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #eedbf1;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(74, 50, 112, 0.65), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(123, 104, 238, 0.25), transparent 60%),
    #07050d;
}

/* VIEWPORT-driven (not pointer:coarse, so it also fires in a device emulator)
   and NOT scoped to game-active, so it guards every screen. max-width:1024
   covers phones + portrait tablets (incl. iPad Pro 1024w) without hijacking a
   genuine large desktop portrait monitor. */
@media (orientation: portrait) and (max-width: 1024px) {
  #rotate-overlay {
    display: flex;
  }
}

.rotate-overlay-card {
  max-width: 420px;
  font-family: 'Spectral', Georgia, serif;
}

.rotate-overlay-glyph {
  width: 64px;
  height: 40px;
  margin: 0 auto 18px;
  border: 2px solid #b9a6ff;
  border-radius: 8px;
  position: relative;
  animation: rotate-overlay-turn 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(123, 104, 238, 0.6));
}

.rotate-overlay-glyph::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 4px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: #b9a6ff;
}

@keyframes rotate-overlay-turn {
  0%, 20% { transform: rotate(-90deg); }
  55%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-overlay-glyph {
    animation: none;
  }
}

.rotate-overlay-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  color: #f4ecff;
}

.rotate-overlay-body {
  font-size: 1rem;
  line-height: 1.55;
  color: #cdbce0;
}

/* TOUCH TABLETS, BOTH ORIENTATIONS — sizing follows the POINTER, not the
   aspect ratio.

   This block used to borrow the BATTLE tier's query, `(orientation: landscape)
   ... and (max-aspect-ratio: 17/10)`. Those two terms exist because `vmin`
   rails crowd a squarish landscape screen; they say nothing about how big a
   fingertip is. Borrowing them meant a portrait iPad Pro — 1024x1366, which is
   what Chrome DevTools' "iPad Pro" preset actually opens — and a Galaxy Tab S9
   in landscape (1280x704, aspect 1.82) both fell out of the band and rendered
   the 30px pills built for a mouse.

   `any-pointer: coarse` is the term that was always meant: "this device can be
   touched at all". Plain `pointer: coarse` would have missed an iPad Pro
   wearing a Magic Keyboard, which reports its trackpad as the PRIMARY pointer
   and is still a tablet you reach out and tap. It is false on a desktop with a
   mouse, so the desktop bar is untouched by construction rather than by a
   width guess. The floor is 769px so anything already in the phone `mobile-ui`
   layout keeps its own established scale, and 561px of height keeps landscape
   phones out. The battle tier next door is unchanged and still landscape-only.

   THE SECOND HALF OF THE UNION IS THE OLD QUERY, KEPT ON PURPOSE. Dropping it
   would have been a regression in the other direction: a mouse-driven window at
   1024x768 — a size the repo's own QA list calls "tablet 4:3", and one you
   reach by just resizing a desktop browser — used to get the enlarged chrome
   and would have fallen back to 30px pills. Keeping both means nothing that
   had the larger controls loses them, while portrait iPads and wide Android
   tablets finally gain them. A true desktop window is excluded either way: at
   1400x640, 1920x1080 and 1366x768 the aspect ratio is above 17/10 and the
   pointer is fine, so neither half matches. */
@media (any-pointer: coarse) and (min-width: 769px) and (min-height: 561px) and (max-width: 1560px),
       (orientation: landscape) and (min-width: 960px) and (min-height: 561px) and (max-width: 1560px) and (max-aspect-ratio: 17/10) {
  :root {
    /* THE WHOLE ROW IS ONE SIZE, and that is what makes the corner square.
       48px is both the pill height and the round triggers' diameter, so the
       outermost trigger's top gap and right gap are the same 0.75rem and it
       reads as a corner rather than as something nudged. */
    --mf-rail-btn: 48px;
  }

  /* SEAT THE RAIL BY MOVING THESE TOKENS, NEVER ONE CONTROL'S `top`.
     main.css warns about exactly this: "Writing the drop as `top` on a single
     control is what left the full-screen trigger behind on row one, printing it
     directly over the audio trigger at 1024x768." The landscape-tablet lobby
     rule did it anyway — it moved `#audio-volume-control` alone — and on an
     iPad Pro 12.9 landscape the two 44px circles overlapped by 41.6 x 37px, the
     maximize button printed on top of mute. Both triggers read these two
     tokens, so moving the tokens moves the rail as one piece and the
     full-screen slot reservation survives.

     ON `body`, NOT `:root`. soundtrack.css's narrow-lobby block writes
     `--mf-rail-top: 3rem` on `body:not(.foundry-surface-active)`, and `body` is
     a nearer ancestor of both triggers than `:root` is — so a `:root`
     declaration here lost to it on every tablet under 1100px wide and left the
     corner reading top 48px against right 16px. Matching its selector wins on
     source order instead (responsive.css is loaded after soundtrack.css), and
     matching its `:not()` keeps the Foundry surface on the deliberate
     tab-bar-aligned placement that block exists to protect. */
  body:not(.foundry-surface-active) {
    --mf-rail-top: calc(var(--mf-safe-top, 0px) + 0.75rem);
    --mf-rail-edge: calc(var(--mf-safe-right, 0px) + 0.75rem);
  }

  /* 48px reaches the chrome's own controls WITHOUT touching `--mf-touch` at
     `:root`: that token has 112 call sites and raising it globally would move
     the deck builder, the foundry, the mulligan and the board. Custom
     properties inherit, so declaring it on these subtrees changes only them. */
  .user-controls,
  .lobby-language-cluster,
  .lobby-quests-btn,
  .referral-banner,
  #audio-volume-control,
  #fullscreen-toggle {
    --mf-touch: 48px;
  }

  .user-controls {
    gap: 8px;
    height: 48px;
  }

  .user-controls > *,
  .user-username,
  .user-stardust,
  .signout-btn {
    height: 48px;
    min-height: 48px;
    font-size: 15px;
  }

  .language-selector,
  .language-btn {
    height: 48px;
    min-height: 48px;
  }

  .language-btn {
    font-size: 15px;
  }

  /* Colour comes from main.css — the lavender is the same at every size. */
  .legal-footer-bar {
    font-size: 13px;
  }
}