/* Chubblies phone layer (v01).
   Loaded after every page's own stylesheets. Each rule sits inside a small-screen media query,
   so tablets and desktop keep exactly the layouts above; this file only re-composes them for a
   phone held in portrait: shorter sections, controls sized for a thumb, and the editor laid out
   as a touch tool. Breakpoints follow the compact window class (< 600 px), with a few extra
   adjustments under 360 px for the narrowest phones. */

@media (max-width: 599.98px) {
  /* ── Page rhythm ──────────────────────────────────────── */
  .u-band { padding: 52px 0; }
  .u-head { margin-bottom: 22px; }
  .u-head p { font-size: 1.02rem; }
  .u-head-row { gap: 12px; margin-bottom: 22px; }
  .u-head-row .u-link, .u-shelfsec-head .u-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Header and menu ──────────────────────────────────── */
  .u-header-row { min-height: 60px; gap: 12px; }
  .u-brand img:first-child { width: 40px; height: 40px; }
  .u-brand-word { width: 108px; }
  .u-nav { gap: 6px; padding-bottom: 14px; }
  .u-nav a { min-height: 44px; padding-block: .2rem; font-size: 1.15rem; }

  /* ── Footer ───────────────────────────────────────────── */
  .u-footer { margin-top: 96px; }
  .u-footer-grid { gap: 20px 16px; padding: 36px 0 24px; }
  .u-footer-brand p { margin: 10px 0 14px; }
  .u-footer ul.u-links { gap: 0; }
  .u-footer ul.u-links a { padding: 10px 0; }

  /* ── Home hero: brand, world, characters, next step on one screen ── */
  .u-hero-copy { padding-top: 22px; }
  .u-hero-word { width: min(330px, 86%); }
  .u-hero-line { max-width: 22em; margin: 10px auto 0; font-size: 1.3rem; }
  html body .u-hero-copy .u-hero-sub { max-width: 30em; margin: 8px auto 16px; font-size: 1rem; line-height: 1.45; }
  .u-hero .u-actions { flex-wrap: wrap; gap: 10px; }
  .u-hero .u-actions > a { flex: 1 1 auto; min-height: 48px; padding: .5rem .9rem; font-size: 1rem; }
  .u-valley { height: 250px; margin-top: 0; }
  .u-bubble { max-width: calc(100% - 16px); padding: 8px 14px 10px; white-space: nowrap; }
  .u-bubble strong { font-size: 1.15rem; }
  .u-bubble::after { left: calc(50% + var(--tail, 0px)); }

  /* ── Apps ─────────────────────────────────────────────── */
  .u-apps { gap: 18px; }
  .u-app { padding: 18px 18px 20px; border-radius: 24px; }
  .u-app-icon { width: 76px; height: 76px; border-radius: 20px; }
  .u-app h3 { margin-top: 12px; font-size: 1.6rem !important; }
  .u-app-facts { margin: 10px 0 16px; }

  /* ── Who lives here? A swipeable cast and a compact card ── */
  .u-picker {
    gap: 8px; margin: 0 -16px 14px; padding: 8px 16px 14px; scroll-padding-inline: 16px;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .u-pick { flex: 0 0 82px; padding: 6px 4px 8px; }
  .u-pick img { width: 58px; height: 58px; }
  .u-pick span { font-size: 1rem; }
  .u-pick[aria-selected="true"] { transform: translateY(-4px); }
  .u-who {
    grid-template-columns: 92px minmax(0, 1fr); align-items: end; gap: 0 16px;
    padding: 18px 16px 18px; border-radius: 26px; text-align: left; box-shadow: 5px 6px 0 var(--u-ink);
  }
  .u-who-copy { display: contents; }
  .u-who-art { grid-row: 1 / span 2; width: 92px; margin: 0; }
  .u-who-art img { width: 92px; }
  .u-who-kind { grid-column: 2; align-self: end; font-size: .95rem; }
  .u-who h3 { grid-column: 2; align-self: start; font-size: 2.3rem !important; }
  .u-who-quote { grid-column: 1 / -1; margin: 14px 0 0; font-size: 1.18rem; line-height: 1.25; }
  .u-who h4 { grid-column: 1 / -1; margin: 16px 0 8px; }
  .u-finds { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; }
  .u-finds li, .u-finds a { width: 100%; }
  .u-finds a { min-height: 56px; padding: 5px 12px 5px 5px; border-radius: 16px; box-shadow: 0 3px 0 var(--u-ink); line-height: 1.2; }
  .u-finds img { width: 44px; height: 44px; border-radius: 10px; }

  /* ── 120 Chubblies: copy, action, then the crowd at a sensible size ── */
  .u-world { padding: 52px 0 44px; }
  .u-world-grid { gap: 22px; }
  .u-world p { margin: 12px auto 20px; font-size: 1.02rem; }
  .u-world-art { width: min(300px, 84%); margin-inline: auto; }

  /* ── Print shelf and FAQ on the home page ─────────────── */
  .u-shelf { gap: 14px; }
  .u-shelf li { padding-top: 44px; }
  .u-shelf .u-peek { width: 64px; height: 64px; right: 10px; }
  .u-tile span { padding: 10px 12px 14px; }
  .u-tile strong { font-size: 1.15rem; }
  .u-tile em { font-size: .9rem; }
  .u-soon { margin-top: 22px; }
  .u-faq summary { padding: 14px 16px; font-size: 1.06rem; }
  .u-faq details p { padding: 0 16px 16px; }

  /* ── Activities: hub, shelves, filters, cards ─────────── */
  .u-legend { gap: 6px 16px; margin-top: 16px; font-size: .95rem; }
  .u-acts-body { padding-top: 22px; }
  .u-catnav { gap: 8px; margin-bottom: 18px; }
  .u-catnav a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .9rem; font-size: 1rem; }
  .u-friends-filter { margin-bottom: 24px; }
  .u-ff-row {
    margin: 0 -16px; padding: 2px 16px 10px; scroll-padding-inline: 16px;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .u-ff { min-height: 44px; }
  .u-ff img { width: 36px; height: 36px; }
  .u-shelfsec { margin-bottom: 44px; }
  .u-shelfsec-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 12px; margin-bottom: 14px; }
  .u-shelfsec-head img { width: 48px; height: 48px; }
  .u-shelfsec-head h2 { font-size: 1.6rem !important; }
  .u-shelfsec-head .u-link { grid-column: 1 / -1; justify-self: start; }
  .u-acts { gap: 12px; }
  .u-act { border-radius: 18px; }
  .u-act-thumb { aspect-ratio: 1; padding: 8px; }
  .u-act-name { padding: 10px 12px 4px; font-size: 1rem; }
  .u-act .u-badges { gap: 5px; padding: 4px 12px 12px; }
  .u-badge { font-size: .8rem; }

  /* Older printable shelves (category grids, packs) */
  .final-category-grid, .final-content-grid, .ia-discovery-grid, .launch-activities, .dice-grid { gap: 12px; }
  :is(.final-category-card, .final-content-card) a > div, .launch-activity .activity-card-copy, .dice-card > div { padding: 12px 12px 14px; }

  /* ── One activity: title, then Play / Print ───────────── */
  html body .printable-hero[data-u-act] { padding: 14px 0 24px; }
  [data-u-act] .breadcrumbs { min-height: 52px; margin-bottom: 4px; padding-right: 108px; align-content: center; }
  .u-act-top { position: relative; display: block; }
  .u-act-friends { position: absolute; right: 0; bottom: calc(100% + 4px); }
  .u-act-friends img { width: 52px; height: 52px; }
  .u-act-friends img + img { margin-left: -8px; }
  .u-act-top p { font-size: 1.02rem; }
  .u-choose { gap: 10px; margin-top: 18px; }
  .u-choice { min-height: 64px; padding: 8px 16px 8px 8px; }
  .u-choice-icon { width: 44px; height: 44px; }
  .u-choice strong { font-size: 1.25rem; }
  .u-print { padding: 44px 0; }
  .u-more { padding-top: 44px; }
  html body .u-print .printable-actions > * { flex: 1 1 100%; }

  /* ── Character pages ──────────────────────────────────── */
  .u-c-hero { padding: 36px 0 40px; }
  .u-p-hero { padding: 20px 0 36px; }
  .u-p-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 14px; }
  .u-p-hero h1 { font-size: 3rem !important; }
  .u-p-identity { font-size: 1.1rem; }
  .u-p-traits { gap: 8px; margin-top: 16px; }
  .u-p-portrait { width: min(220px, 64%); }
  .u-p-card { padding: 20px 18px; }
  .u-p-card h2 { font-size: 1.6rem !important; }
  .u-p-motto { padding: 22px 18px; }

  /* ── Games page ───────────────────────────────────────── */
  .u-g-hero { padding: 36px 0 40px; }
  .u-g-band { padding: 48px 0; }
  .u-g-grid { gap: 28px; }

  /* ── Play online: shared frame for every game ─────────── */
  .play-online { padding: 36px 0 40px; scroll-margin-top: 64px; }
  .play-head { margin-bottom: 14px; }
  .play-title { font-size: 1.9rem; }
  .play-hint { margin-top: 8px; font-size: .98rem; line-height: 1.5; }
  .play-hud { gap: 8px 12px; margin-bottom: 10px; }
  .play-tool, .color-zoom button, .roll-mode-btn { min-height: 44px; }
  .maze-levels .roll-mode-btn { min-width: 0; padding-inline: .3rem; }
  /* Letter tracing: the alphabet keys stay finger-sized (six per row, below the board) */
  .lt-side { padding: 12px; }
  .lt-alpha { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lt-case button { min-height: 44px; }

  /* ── Coloring: the picture edge to edge, tools in one row, colors in a tray ── */
  .play-color .play-hud { display: grid; grid-template-columns: minmax(0, 1fr); }
  .play-color .play-status { font-size: .98rem; }
  .play-color .play-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .play-color .play-tool { padding: .3rem .4rem; line-height: 1.15; }
  /* Clear all is the destructive one: last in the row and in its own colour, never mistaken for Undo */
  .play-color .play-tool:nth-child(2) { order: 3; border-color: rgba(176, 32, 44, .5); color: #a01c28; }
  .play-color .play-board { margin-inline: -16px; border-inline: 0; padding: 6px; }
  .color-zoom { right: 8px; bottom: 8px; gap: 6px; }
  .color-zoom button { width: 44px; height: 44px; }
  .color-palette {
    position: sticky; bottom: 0; z-index: 4;
    grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: none;
    margin: 0 -16px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 3px solid var(--u-ink); background: var(--u-paper);
  }
  .color-swatch { min-height: 36px; }
  .color-swatch[aria-checked="true"] { transform: scale(1.1); }
  /* Every remaining link and button stays at least 44 px for a finger */
  .u-brand { min-height: 44px; }
  .u-footer ul.u-links a { min-width: 44px; }
  html body .breadcrumbs { row-gap: 0; }
  html body .breadcrumbs a, html body .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  html body .breadcrumbs a { min-width: 44px; }
  html body .button, :is(.final-category-card, .final-content-card, .launch-activity, .dice-card) :is(.ia-button, .button) { min-height: 44px; }
  /* iOS Safari: a quick second tap on a control must not zoom the page */
  .play-tool, .color-zoom button, .color-swatch, .lt-alpha button, .lt-case button { touch-action: manipulation; }
}

/* Phones too narrow for eight 44 px colours in a row: the tray keeps its rows by hue and scrolls sideways */
@media (max-width: 417.98px) {
  .color-palette {
    grid-template-columns: repeat(8, 44px); justify-content: start; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
  }
  .color-swatch { width: 44px; min-height: 44px; }
}

/* Narrowest phones (iPhone SE and similar) */
@media (max-width: 359.98px) {
  .u-hero-word { width: 88%; }
  .u-hero-line { font-size: 1.2rem; }
  /* keep both hero actions on one row where the words allow, so the valley stays on the first screen */
  .u-hero .u-actions { gap: 8px; }
  .u-hero .u-actions > a { padding-inline: .6rem; font-size: .9rem; }
  .u-pick { flex-basis: 76px; }
  .u-who { grid-template-columns: 76px minmax(0, 1fr); gap: 0 12px; padding-inline: 12px; }
  .u-who-art, .u-who-art img { width: 76px; }
  .u-who h3 { font-size: 2rem !important; }
  .u-acts { gap: 10px; }
  .u-act-name { padding-inline: 10px; font-size: .95rem; }
  .u-act .u-badges { padding-inline: 10px; }
  .u-catnav a { padding-inline: .75rem; }
  .maze-levels .roll-mode-btn { font-size: .8rem; padding-inline: .2rem; }
  /* Letter keys: five per row keeps each key at least 44 px */
  .lt-alpha { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}