/* ============================================================================
   Colour by Number — responsive + layout corrections
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   The game ships as a pre-built Vite/Tailwind bundle (assets/index-*.css) and
   there is no source for it in this repo, so it cannot be rebuilt. That bundle
   was compiled with NO responsive variants at all — `grep '@media'` over it
   returns nothing — because every layout class in the app is an unprefixed
   mobile-first utility (`grid-cols-2`, `px-5`, `min-h-screen`, `h-dvh`).

   The consequence is that the phone layout is the ONLY layout. At 1280px the
   four home tiles measure 607x199px each, the hero banner spans 1225px, and
   the two stat readouts sit ~600px apart. The theme and picture grids stay at
   two columns, so each card is ~600px wide and its 400x400 artwork is scaled
   up to match, which is what pushes a single cupcake past the fold.

   This stylesheet is loaded AFTER the bundle and supplies the breakpoints the
   build never emitted. It only ever sets layout properties (width, height,
   padding, grid tracks) on the bundle's own utility classes — no colours, no
   typography, no rules that would fight the game's visual design.

   It is additive and reversible: delete the <link> in index.html and the game
   returns exactly to its previous behaviour.

   SELECTOR NOTE
   The class names below are Tailwind utilities emitted into the committed
   build. They are stable for as long as that build is the artifact being
   served. If the game is ever rebuilt from real source, fold these rules into
   its Tailwind config as `sm:`/`md:`/`lg:` variants and delete this file.
   ========================================================================== */

:root {
  /* Width of the centred app column on large screens. 1120px matches the
     content width of the shared .ppgh header so the two align. */
  --cbn-shell: 1120px;
  /* Narrower cap for the home screen's hero / 2x2 menu / stats stack, which
     is designed as a phone-shaped column and looks stretched much past this. */
  --cbn-column: 640px;
}

/* ── 1. Full-height screens must not overflow under the shared header ─────────
   The game's screen roots use `min-h-screen` (100vh) and `h-dvh` (100dvh).
   Those are viewport units, but the game root sits BELOW the ~54-64px .ppgh
   header, so a 100dvh child makes the page a full header taller than the
   viewport. On the painting screen that pushes the colour palette and the
   bottom controls off the fold — on phones, where the palette is the primary
   control, that is the single worst layout bug in the app.

   Fix: make #root a flex column (the shared kit already gives it the remaining
   viewport height via `flex: 1 1 auto`) and let the screen roots fill THAT
   instead of the whole viewport. Applies at every width, phones included. */
body.ppgh-body > #root {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The bundle's two wrapper divs between #root and the screen root.

   `!important` is required on the first of these and is not defensive padding:
   the app sets `style="min-height: 100dvh; touch-action: manipulation"` inline
   on that wrapper from JS, and an inline declaration outranks any selector
   specificity. This is the one place in the file that needs it. */
body.ppgh-body > #root > div,
body.ppgh-body > #root > div > .min-h-dvh {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
}

/* Screen roots: drop the viewport-unit heights, grow into the space instead. */
body.ppgh-body #root .min-h-dvh,
body.ppgh-body #root .min-h-screen,
body.ppgh-body #root .h-dvh {
  min-height: 0;
  flex: 1 1 auto;
}
body.ppgh-body #root .h-dvh {
  height: auto;
}

/* Nothing in this app should ever scroll sideways. */
body.ppgh-body {
  overflow-x: hidden;
}

/* ── 2. Phones: keep the palette clear of the home indicator ─────────────────
   Scoped to the painting screen's bottom bar only. The scrolling list screens
   are deliberately left alone: they already carry `pb-6`/`pb-8`, and a blanket
   `padding-bottom` here would overwrite `pb-8` (2rem) with a smaller value.

   `--sab` is the bundle's own `env(safe-area-inset-bottom, 0px)` token, so this
   adds nothing on devices without an inset. */
@media (max-width: 639px) {
  #root .h-dvh > :last-child {
    padding-bottom: calc(var(--sab) + 0.5rem);
  }
}

/* ── 3. Tablet and up: centre the app column instead of stretching it ─────────
   Everything below is width-only. The cream background stays full-bleed (it is
   painted on the screen root's ancestors too) so the centred column reads as
   deliberate composition rather than a floating card. */
@media (min-width: 640px) {
  /* Keep the page background continuous behind the centred column. */
  body.ppgh-body > #root,
  body.ppgh-body > #root > div,
  body.ppgh-body > #root > div > .min-h-dvh {
    background-color: rgb(255 248 231); /* bg-cream */
  }

  /* Cap and centre every screen root. */
  #root .min-h-screen.bg-cream,
  #root .h-dvh.bg-cream {
    width: 100%;
    max-width: var(--cbn-shell);
    margin-inline: auto;
  }

  /* Home screen: the header row, hero banner, 2x2 menu and stats strip are one
     phone-shaped stack. Cap them together so they stay aligned with each other
     rather than each spreading to the full shell width. */
  #root .flex.items-center.justify-between.px-5,
  #root .flex.items-center.justify-center.px-5,
  #root .px-5.mb-6,
  #root .px-5.mb-4,
  #root .px-5.py-4.mt-2,
  #root .px-5.grid.grid-cols-2.flex-1 {
    width: 100%;
    max-width: var(--cbn-column);
    margin-inline: auto;
  }

  /* The 2x2 menu is `flex-1`, so on a tall desktop window it absorbs all the
     leftover height and each tile balloons to ~200px. Pin the rows to a sane
     height and let the leftover space fall below the stats strip instead. */
  #root .px-5.grid.grid-cols-2.flex-1 {
    flex: 0 0 auto;
    grid-auto-rows: minmax(96px, 116px);
  }

  /* Scrolling list bodies (themes, gallery, stickers) keep their own scroll
     container full-width — capping that would clip the scrollbar to the middle
     of the screen — so cap the content inside it instead. */
  #root .flex-1.overflow-y-auto.px-5 > * {
    width: 100%;
    max-width: var(--cbn-shell);
    margin-inline: auto;
  }
}

/* ── 4. Wide screens: cap card width instead of growing cards ────────────────
   The theme and picture grids are hard-coded `grid-cols-2`, so at desktop
   widths each card is ~500px. That matters more than it looks: each card's
   thumbnail is `className="w-full"` with an inline `aspectRatio: "1"`, so the
   artwork is a square whose height tracks the card's width. A 500px card means
   a 500px-tall picture — which is why the theme detail screen renders a single
   cupcake taller than the viewport.

   `auto-fit` with a max track size caps the card at 240px and lets the column
   count fall out of the available width, so there is no breakpoint at which
   cards jump in size. `justify-content: center` keeps a short final row
   centred under the rest rather than stranded on the left.

   This mirrors the technique already used by the apps/kids copy of this game
   (see its inline <style> block in index.html), so the two deployments stay
   visually consistent.

   The home menu grid is excluded (`:not(.flex-1)`) — its 2x2 arrangement is
   intentional and only four tiles ever exist. */
@media (min-width: 640px) {
  #root .grid.grid-cols-2:not(.flex-1) {
    grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
    justify-content: center;
    align-items: start;
  }

  /* Cards are usually <button>, sometimes <div>; both must fill their track. */
  #root .grid.grid-cols-2:not(.flex-1) > * {
    width: 100%;
  }
}

/* ── 5. Painting screen on desktop ───────────────────────────────────────────
   The artwork is an <svg viewBox="0 0 400 400"> with the default
   preserveAspectRatio, so it already letterboxes and centres itself correctly
   at any container size — it does not distort. What it does do is sit inside a
   stage that spans the full shell width, which strands the palette far from
   the picture. Cap the stage so picture and palette stay visually paired. */
@media (min-width: 640px) {
  #root .h-dvh .flex-1.relative.overflow-hidden {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  /* The colour palette strip below the picture. `:not(.bg-surface)` excludes
     the painting screen's top bar, which carries the same `z-10` and is meant
     to span the full width as a surface. */
  #root .h-dvh > .z-10:not(.bg-surface) {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
}

/* ── 6. Pointer devices: the app was built touch-only ────────────────────────
   Every control is a tap target with no hover state and no visible focus ring
   for keyboard users. Add both for desktop without touching the game's colours
   beyond a neutral outline. */
@media (hover: hover) and (pointer: fine) {
  #root button:not(:disabled),
  #root a {
    cursor: pointer;
  }
}

#root button:focus-visible,
#root a:focus-visible {
  outline: 3px solid rgb(255 184 77); /* primary */
  outline-offset: 2px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  #root .animate-float,
  #root .animate-shimmer {
    animation: none !important;
  }
}

/* Image-led welcome screen. The selector is specific to the name/avatar gate,
   so painting and gallery screens keep their purpose-built layouts. */
#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  min-height: calc(100dvh - var(--ppgh-height, 64px));
  padding: clamp(36px, 7vw, 92px);
  background: #31206f url('/colour-by-number/assets/images/colour-by-number-banner.webp') center / cover no-repeat;
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(29 20 88 / 36%), transparent 58%);
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 > div:first-child {
  max-width: 520px;
  color: white;
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 h1 {
  color: white !important;
  font-size: clamp(2.25rem, 5vw, 4.7rem);
  line-height: .96;
  text-align: left;
  text-shadow: 0 3px 22px rgb(19 10 65 / 35%);
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 h1 * {
  color: white !important;
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 > div:first-child p {
  color: #f3efff;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

#root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 > .flex.flex-col {
  width: min(100%, 390px);
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 28px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 20px 55px rgb(24 13 72 / 25%);
  backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
  #root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 {
    justify-content: flex-end;
    gap: 16px;
    min-height: calc(100dvh - var(--ppgh-height, 56px));
    padding: 190px 18px 26px;
    background-position: 64% center;
  }
  #root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8::before {
    background: linear-gradient(0deg, rgb(25 14 77 / 94%) 0%, rgb(25 14 77 / 67%) 48%, transparent 78%);
  }
  #root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 h1 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }
  #root .flex.flex-col.items-center.justify-center.min-h-screen.bg-cream.px-6.py-10.gap-8 > .flex.flex-col {
    padding: 18px;
    gap: 12px;
  }
}