/* ============================================================================
 * TRAX - phone layout.
 *
 * Everything here is scoped under `html.view-phone`, which the inline script in
 * index.html sets before the first paint. Nothing in this file applies unless
 * that class is present, so style.css is untouched and the desktop layout
 * cannot be affected by anything written here.
 *
 * WHY A CLASS AND NOT A MEDIA QUERY
 * A media query keys off the viewport, which means a desktop visitor could
 * never see the phone layout and the "Phone" button would be a lie. Keying off
 * a class lets the choice be a real choice on any device. style.css keeps its
 * `@media (max-width: 880px)` block as the no-JavaScript fallback - if the
 * inline script never runs, a narrow screen still gets a sane page.
 *
 * WHAT MAKES THIS A PHONE LAYOUT RATHER THAN A NARROW DESKTOP ONE
 *   - one column everywhere, and the picture leads each game section
 *   - type scaled down, line lengths shortened
 *   - the nav becomes a scrolling strip instead of vanishing
 *   - touch targets are at least 44px, per the usual accessibility floor
 *   - heavy decoration (frames, rotation, large shadows) is dropped
 *
 * The element overrides at the end of style.css put geometry inside
 * `@media (min-width: 881px)`, so per-element desktop tuning does NOT leak in
 * here. That is deliberate and is why this file can stay short.
 * ==========================================================================*/

/* --- The toggle itself. Visible in both views. ---------------------------- */
.view-switch {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  flex: 0 0 auto;
  /* The desktop header is a grid, and a grid item stretches to fill its whole
     column by default - which turned this pill into an empty bar ~480px wide
     with the two buttons huddled at one end. It is a fixed-size control. */
  justify-self: start;
  width: max-content;
}
.view-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cfcfd6;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1;
  min-height: 28px;
}
.view-switch button:hover { color: #fff; }
.view-switch button[aria-pressed="true"] {
  background: var(--speedway-yellow, #ffd23f);
  color: #16161a;
}
/* Same width as in desktop view (same padding and type); only taller, because
   44px is the usual minimum a fingertip can hit reliably. */
html.view-phone .view-switch button { min-height: 44px; }

/* Never show the switch inside the editor's own chrome or the lightbox. */
body.tx-editing .view-switch { opacity: .6; }

/* ==========================================================================
 * PHONE
 * ========================================================================*/

html.view-phone body { -webkit-text-size-adjust: 100%; }

/* Phone view on a wide window is a phone-width column, not the phone layout
   blown up to 1800px - a 1050px-wide box art and a 255px logo plate is what
   that produced. 480 is the widest a current phone reports (a Galaxy S26
   Ultra at some zoom settings; iPhone Pro Max is 440), so every real phone
   still fills its screen edge to edge and only a wider window shows the cap. */
html.view-phone { background: #2a2a30; }
html.view-phone body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
/* ...but only as a PREVIEW on a computer. On a touch device the phone layout
   is the real thing, so it fills the screen: an upright tablet (744-1032) in a
   480 column would be a phone emulator with dark bars. The TABLET block below
   makes the extra room look intended. */
@media (pointer: coarse) {
  html.view-phone body { max-width: none; box-shadow: none; }
}

/* --- Neutralise the desktop per-element tuning ----------------------------
 * The editor's Layout panel writes geometry into the ELEMENT OVERRIDES block at
 * the end of style.css, inside `@media (min-width: 881px)`. That keeps it away
 * from a NARROW screen - but "phone view" is a choice, not a width, so on a
 * wide screen those rules were still applying underneath this layout. The
 * result was 751px of horizontal overflow from hand-tuned values like
 * `top: -694px` on a pulled-out logo.
 *
 * Every override is `!important`, so undoing them needs `!important` too. These
 * selectors are (0,1,1) against the overrides' (0,1,0), which is what makes
 * them win - see the specificity note in CLAUDE.md.
 *
 * Only the properties that can push content off-screen are reset. Margins are
 * deliberately left alone: the overrides only ever use `auto` or positive
 * values (checked), so they cost nothing here, and blanket-resetting them would
 * throw away the base stylesheet's spacing.
 */
html.view-phone [data-el],
html.view-phone [data-edit-img],
html.view-phone [data-edit] {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* Images still need to keep their aspect ratio once width is back to auto. */
html.view-phone img[data-edit-img] { height: auto !important; object-fit: contain !important; }

/* Let the page use the full width; the desktop `wrap` is far too padded. */
html.view-phone .wrap { width: 100%; padding-left: 16px; padding-right: 16px; }

/* --- Header --------------------------------------------------------------- */
html.view-phone .site-header { position: static; }
/* display: flex is load-bearing. The desktop header is a GRID, and a grid
   container ignores flex-basis and flex-grow entirely - so `flex: 0 0 100%` on
   the switch below did nothing at all and it kept sitting at its content width,
   overflowing the row. Switching the container to flex is what makes the
   ordering and the full-width switch work. */
html.view-phone .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 10px;
}
html.view-phone .cormel-mark { order: 1; }
html.view-phone .cormel-mark img { max-height: 44px !important; width: auto !important; }
html.view-phone .brand { order: 2; font-size: 1.5rem; }
/* A fixed-size pill, the same as in desktop view - never stretched to a share
 * of the screen.
 *
 * `flex: 0 0 auto` is what stops it being squeezed: `overflow: hidden` makes a
 * flex item's automatic minimum size zero, so as a shrinkable item it was cut
 * to 121px and clipped its own second button. It cannot shrink now, so when it
 * does not fit beside the logo and TRAX it wraps onto its own row instead
 * (the header is flex-wrap), centred by the header's justify-content. */
html.view-phone .view-switch {
  order: 3;
  flex: 0 0 auto !important;
  margin: 2px 0 0;
}

/* The desktop rule hides the nav links entirely on narrow screens. A phone
   visitor still needs to reach the sections, so bring them back as a strip
   that scrolls sideways rather than wrapping into a tall block. */
html.view-phone .site-header nav {
  order: 4;
  width: 100% !important;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.view-phone .site-header nav::-webkit-scrollbar { display: none; }
html.view-phone .site-header nav a,
html.view-phone .site-header nav a:not(.nav-cta) {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 40px !important;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .85rem;
}
/* The grey pill is for the plain links only. On the CTA it replaced the
   yellow, and with the CTA's own near-black text "Get Notified" was invisible
   on the dark header. The CTA keeps its style.css background, shine included. */
html.view-phone .site-header nav a:not(.nav-cta) { background: rgba(255, 255, 255, .07); }

/* --- Hero ----------------------------------------------------------------- */
html.view-phone .hero { padding: 34px 0 30px; }
html.view-phone .hero h1 { font-size: calc(2rem * var(--scale-display, 1)); line-height: 1.12; }
html.view-phone .hero .eyebrow { font-size: calc(.72rem * var(--scale-body, 1)); }
html.view-phone .hero-sub p { font-size: calc(.98rem * var(--scale-body, 1)); }
/* The copy uses <br> to control desktop line breaks. Those land badly in a
   narrow column, so let the text wrap naturally instead. */
html.view-phone .hero-sub br { display: none; }
html.view-phone .hero .btn {
  display: block;
  width: 100% !important;
  max-width: 320px !important;
  margin: 18px auto 0;
  min-height: 52px !important;
  line-height: 52px;
  padding: 0 20px;
  font-size: 1.05rem;
}

/* --- Game sections -------------------------------------------------------- */
html.view-phone .game-section { padding: 36px 0; }

/* One column in ONE fixed reading order, the same for all three games:
 *   1 logo   2 ages/players/minutes   3 box art (full width)   4 tagline
 *   5 description   6 card images   7 video   8 testimonials   9 art note
 *
 * The markup splits those between two desktop columns (copy and visual) plus
 * blocks after the grid, so no single container holds them all. display:
 * contents dissolves the grid and both columns on a phone, which makes every
 * piece a direct flex item of the SECTION - and only then can `order`
 * interleave the box art and cards between the copy's paragraphs. */
html.view-phone .game-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
html.view-phone .game-grid,
html.view-phone .game-grid.reverse,
html.view-phone .game-copy,
html.view-phone .game-visual { display: contents; }

/* The grid's .wrap supplied the side padding, and it is gone with the grid. */
html.view-phone .game-copy > *,
html.view-phone .game-visual > * { margin-left: 16px; margin-right: 16px; }

html.view-phone .game-section .logo-plate,
html.view-phone .game-section .logo-slot     { order: 1; }
html.view-phone .game-section .stat-row      { order: 2; }
html.view-phone .game-section .box-art-frame,
html.view-phone .game-visual > .box-art      { order: 3; }
html.view-phone .game-section .game-tagline  { order: 4; }
html.view-phone .game-section .game-body     { order: 5; }
html.view-phone .game-section .card-strip,
html.view-phone .game-section .card-collage,
html.view-phone .game-section .postcards     { order: 6; }
html.view-phone .game-section .video-slot    { order: 7; }
html.view-phone .game-section .testimonials  { order: 8; }
html.view-phone .game-section .artwork-note  { order: 9; }

html.view-phone .logo-plate { padding: 10px; }
html.view-phone .game-logo-img { max-width: 78% !important; height: auto !important; margin: 0 auto; display: block; }
/* The Speedway picture is only 79% lettering (the others are 92-96%), so at
   the same width its logo read noticeably smaller. 93% evens out the visible
   lettering: ~248px against Candy Rush 253 and Road Trip 244 at 390 wide. */
html.view-phone .speedway-logo-img { max-width: 93% !important; }

/* position: relative is put back with !important because the [data-el] reset
   above makes every marked container static, and the wheel badge below is
   anchored to this frame. Without it the badge floats off to the viewport. */
html.view-phone .box-art-frame { padding: 0; background: none; box-shadow: none; position: relative !important; }
html.view-phone .box-art { width: 100% !important; height: auto !important; border-radius: 0; }
/* Box art runs the full width of the screen, edge to edge. */
html.view-phone .game-visual > .box-art,
html.view-phone .game-visual > .box-art-frame { margin-left: 0; margin-right: 0; }

/* The Speedway wheel badge, scaled down with the picture. The frame's
   desktop padding-bottom is an !important override, so it needs one back. */
html.view-phone [data-el="speedway-art-frame"] { padding-bottom: 34px !important; }
html.view-phone .wheel-slot { width: 84px; left: 6px; bottom: 6px; }
html.view-phone .wheel-slot img { width: 100% !important; }

/* Game logos at the head of each copy column. */
html.view-phone .logo-slot { margin-bottom: 0; }
html.view-phone .artwork-note { margin-top: 4px; font-size: .85rem; }

/* Card images flow in rows, 3 across on a normal phone and 2 on a small one
   (iPhone SE), wrapping onto the next row. Never a sideways-scrolling strip.
   Each one still opens full size in the lightbox. */
html.view-phone .card-strip,
html.view-phone .card-collage,
html.view-phone .postcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  overflow: visible;
}
html.view-phone .card-strip img,
html.view-phone .card-collage img,
html.view-phone .postcard-grid img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  /* the desktop postcards alternate a slight rotation; it reads as sloppy at
     this size */
  transform: none;
}
/* Road Trip's strip is one composite picture of several cards: give it the row. */
html.view-phone .card-strip img:only-child { grid-column: 1 / -1; }

/* Stats box on the right, 45% of the column, numbers spread evenly across it.
   min-width: on most phones 45% is less than the three stats need (~185px), so
   the box grows just enough instead of spilling - exactly 45% only from a
   ~410px-wide column up. !important on width: the [data-el] reset sets it. */
html.view-phone .stat-row {
  gap: 8px;
  justify-content: space-between;
  width: 45% !important;
  min-width: max-content;
  margin-left: auto;
}
/* Labels bold, and dark at full strength on the light Candy Rush and Road
   Trip backgrounds, where the faded default all but disappeared. */
html.view-phone .stat-label { font-weight: 700; }
html.view-phone .theme-candyrush .stat-label { color: var(--candy-label); opacity: 1; }
html.view-phone .theme-roadtrip .stat-label  { color: var(--road-label); opacity: 1; }
html.view-phone .stat { padding: 8px 4px; }
html.view-phone .stat-num { font-size: calc(1.25rem * var(--scale-display, 1)); }
html.view-phone .stat-label { font-size: calc(.66rem * var(--scale-body, 1)); }

html.view-phone .game-tagline { font-size: calc(1rem * var(--scale-body, 1)); }
html.view-phone .game-body p { font-size: calc(.95rem * var(--scale-body, 1)); }

html.view-phone .video-slot { margin-top: 0; }
html.view-phone .video-placeholder { font-size: .85rem; padding: 22px 12px; }

/* --- Testimonials --------------------------------------------------------- */
html.view-phone .testimonials {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 12px;
  margin-top: 0;
}
html.view-phone .testimonials blockquote { font-size: calc(.92rem * var(--scale-body, 1)); padding: 14px 16px; }

/* --- Signup --------------------------------------------------------------- */
html.view-phone .signup-section { padding: 38px 0; }
html.view-phone .signup-inner { width: 100%; }
html.view-phone .signup-form { flex-direction: column; gap: 10px; }
html.view-phone .signup-form input,
html.view-phone .signup-form button {
  flex: 0 0 auto;
  width: 100% !important;
  /* 16px minimum, or iOS Safari zooms the whole page in when the field is
     focused and the visitor is left scrolled sideways. */
  font-size: 16px;
  min-height: 50px !important;
}
html.view-phone .signup-fine { font-size: .78rem; }

/* --- Footer --------------------------------------------------------------- */
html.view-phone .site-footer { padding: 22px 0 30px; font-size: .78rem; }

/* --- Tablet (upright), and anything else touch-first and wide --------------
 * index.html sends a tablet held upright (744-1032 wide) to the phone layout,
 * and a tablet on its side to desktop. Upright, the phone layout simply
 * stretched would be 800px lines of text and box art taller than the screen.
 * So past 600px the content becomes a centred column: text at a readable
 * line length, box art at a sensible size (no longer edge to edge), cards 5-6
 * across from the same auto-fill grid, and slightly larger type.
 *
 * `pointer: coarse` is what keeps this off the desktop preview: there the
 * WINDOW is wide but the page is a 480 column, and this query only sees the
 * window. A phone on its side (~850-950 wide) gets it too, which suits it.
 *
 * width/max-width are !important because the [data-el]/[data-edit] reset at
 * the top of this file sets both with !important - see trap 2 in CLAUDE.md. */
@media (min-width: 600px) and (pointer: coarse) {
  html.view-phone .game-copy > *,
  html.view-phone .game-visual > * {
    width: calc(100% - 32px) !important;
    max-width: 720px !important;
    margin-left: auto;
    margin-right: auto;
  }
  html.view-phone .game-visual > .box-art,
  html.view-phone .game-visual > .box-art-frame {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin-left: auto;
    margin-right: auto;
  }
  html.view-phone .box-art-frame .box-art { width: 100% !important; }
  /* The stats box keeps its 45%, of the centred column, at its right edge. */
  html.view-phone .game-copy > .stat-row {
    width: calc(min(720px, 100% - 32px) * .45) !important;
    max-width: none !important;
    margin-left: auto;
    margin-right: max(16px, calc((100% - 720px) / 2));
  }
  html.view-phone .box-art { border-radius: 10px; }
  html.view-phone .game-section > .wrap,
  html.view-phone .hero-inner,
  html.view-phone .signup-inner { max-width: 752px !important; margin-left: auto; margin-right: auto; }
  html.view-phone .game-logo-img { max-width: 60% !important; }
  html.view-phone .speedway-logo-img { max-width: 72% !important; }

  html.view-phone .hero h1 { font-size: calc(2.5rem * var(--scale-display, 1)); }
  html.view-phone .hero-sub p { font-size: calc(1.1rem * var(--scale-body, 1)); }
  html.view-phone .game-tagline { font-size: calc(1.15rem * var(--scale-body, 1)); }
  html.view-phone .game-body p { font-size: calc(1.05rem * var(--scale-body, 1)); }
  html.view-phone .stat-num { font-size: calc(1.6rem * var(--scale-display, 1)); }
  html.view-phone .stat-label { font-size: calc(.78rem * var(--scale-body, 1)); }
  html.view-phone .testimonials blockquote { font-size: calc(1rem * var(--scale-body, 1)); }
}

/* --- Phone held sideways --------------------------------------------------
 * Height is a real signal, not just width. A phone in landscape is wide but
 * only ~390px tall, so the generous vertical padding that suits a portrait
 * phone eats most of the screen and the hero alone fills it.
 *
 * `orientation: landscape` on its own would also catch a desktop window that
 * happens to be wide, so this pairs it with a height ceiling - which is what
 * actually distinguishes "a phone on its side" from "a normal screen".
 */
@media (orientation: landscape) and (max-height: 520px) {
  html.view-phone .hero { padding: 18px 0 16px; }
  html.view-phone .hero h1 { font-size: calc(1.6rem * var(--scale-display, 1)); }
  html.view-phone .hero .btn { margin-top: 12px; min-height: 46px !important; line-height: 46px; }
  html.view-phone .game-section { padding: 22px 0; }
  html.view-phone .site-header { padding-top: 6px; padding-bottom: 4px; }

  /* No two-column version here: it would split the fixed reading order of the
     game sections (see "Game sections" above) back into two columns. */

  /* The lightbox cap has to come down or the picture runs off the screen. */
  html.view-phone .lightbox-img { max-height: calc(100vh - 90px) !important; }
}

/* --- Lightbox ------------------------------------------------------------- */
/* The desktop cap is half the viewport height, which on a phone leaves the
   picture tiny. Give it the room it needs. */
html.view-phone .lightbox { padding: 12px; }
html.view-phone .lightbox-img { max-height: calc(100vh - 150px); max-width: 100%; }
html.view-phone .lightbox-close,
html.view-phone .lightbox-prev,
html.view-phone .lightbox-next {
  min-width: 48px;
  min-height: 48px !important;
  font-size: 1.6rem;
}
html.view-phone .lightbox-caption { font-size: .85rem; }

/* ==========================================================================
 * DESKTOP-ONLY tidy-ups
 * Anything that should apply when the desktop view is chosen ON a narrow
 * screen - i.e. someone pressed "Desktop" on a phone. They asked for the wide
 * layout, so give it to them and let the page scroll sideways rather than
 * mangling it.
 * ========================================================================*/
html.view-desktop body { min-width: 1000px; }