/* A game's own page (arcg.co/shortstack/, arcg.co/wordgamr/), inside the company header and footer from site.css.
   Every game page shares this layout; each game keeps its own colors and fonts through the variables on .g-<game>. */

@font-face { font-family: "Baloo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-2-700.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-2-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("/assets/fonts/nunito-sans.woff2") format("woff2"); }

/* Short Stack: walnut, amber and cream */
.g-shortstack {
  --g-deep: #2C1B10; --g-deep-2: #3E2817; --g-ink: #3A2314; --g-ink-2: #4B3626;
  --g-accent: #F5AE45; --g-accent-hi: #FFBC57; --g-page: #FFFBF3; --g-light: #E5F2EF;
  --g-on-deep: #F7E6CF; --g-on-deep-2: #E3CBAE; --g-head-on-deep: #FFE2B0; --g-chapter: #CDB79B; --g-chapter-b: #E9D6BC;
  --g-phone: #1E140C; --g-shade: 28, 16, 6; --g-closing-ink: #4A2E14; --g-link: #0F6F75; --g-link-hi: #0A5458;
  --g-pill-2: #8FD8DD; --g-pill-3: #C9CED3;
  --g-hero: #3b4a2a url("/assets/img/bg.webp") center 18% / cover no-repeat;
}
/* WordGamr: its base colors; wordgamr.css moves them onto the neutral walnut palette */
.g-wordgamr {
  --g-deep: #1A1A4A; --g-deep-2: #26266A; --g-ink: #1D2050; --g-ink-2: #3A3F6E;
  --g-accent: #F5AE45; --g-accent-hi: #FFBC57; --g-page: #FAFBFF; --g-light: #E7F0FC;
  --g-on-deep: #E8E9FB; --g-on-deep-2: #C3C6EE; --g-head-on-deep: #FFD98A; --g-chapter: #B9BCE6; --g-chapter-b: #DDDFFA;
  --g-phone: #0E1030; --g-shade: 12, 18, 58; --g-closing-ink: #3A2408; --g-link: #2C4FC4; --g-link-hi: #1F3C9C;
  --g-pill-2: #A9CDF7; --g-pill-3: #D3C8FF;
  --g-hero: #2B1B11;   /* wordgamr.css draws its heroes */
}

.game { --display: "Baloo 2", system-ui, sans-serif; --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.game main, .game .game-bar, .game dialog.howto { font-family: var(--body); font-size: 18px; line-height: 1.6; }
.game main { background: var(--g-page); color: var(--g-ink); }
.game main h1, .game main h2, .game main h3, .game dialog.howto h2 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -0.005em; }
.game main a { color: var(--g-link); }
.game main a:hover { color: var(--g-link-hi); }
.game main :focus-visible, .game .game-bar :focus-visible, .game dialog.howto :focus-visible { outline-color: var(--g-accent); }

/* ---------- the game's own bar, under the company header: one row at every width, and it stays at the top while
   the game's page scrolls. Wide screens list the sections; narrower ones put them under "Sections". ---------- */
html:has(.game-bar) { scroll-padding-top: 72px; }
.game-bar { position: sticky; top: 0; z-index: 40; background: var(--g-deep); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.game-bar nav { display: flex; align-items: center; gap: 0 28px; min-height: 56px; }
.game-name { flex: none; margin-right: 4px; color: #fff; font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1; text-decoration: none; }
.game-name:hover { color: #fff; }
.game-sections { display: flex; align-items: center; gap: 0 26px; min-width: 0; }
.game-sections a, .game-sections button, .sections-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--g-head-on-deep); font: 700 15px/1 var(--body); text-decoration: none; white-space: nowrap; }
.game-sections a:hover, .game-sections button:hover, .sections-btn:hover, .sections-btn[aria-expanded="true"] { color: #fff; }
.sections-btn { display: none; gap: 6px; }
.sections-btn .nav-chev { width: 12px; height: 12px; transition: transform .2s ease; }
.sections-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.game-help { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: auto; padding: 0 16px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); color: #fff; font: 700 14px/1 var(--body); text-decoration: none; white-space: nowrap; transition: background-color .12s ease; }
.game-help:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.game-help svg { width: 18px; height: 18px; flex: none; }
/* the sheet under "Sections" */
.sections-sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--g-deep); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 28px 48px -24px rgba(0, 0, 0, .7); }
.sections-sheet[hidden] { display: none; }
.sections-sheet ul { margin: 0; padding: 6px 0; list-style: none; }
.sections-sheet li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.sections-sheet ul a, .sections-sheet ul button { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--g-head-on-deep); font: 700 17px/1.2 var(--body); text-align: left; text-decoration: none; }
.sections-sheet ul a:hover, .sections-sheet ul button:hover { color: #fff; }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 20px; margin: 0; padding: 6px 0 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sheet-foot a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 700 15px/1.2 var(--body); text-decoration: none; }
.sheet-foot a:hover { color: var(--g-accent); }
@media (prefers-reduced-motion: reduce) { .sections-btn .nav-chev { transition: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border: 0; border-radius: 18px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.btn svg { flex: none; }
.btn span { display: block; padding-top: var(--btn-nudge, 0px); }
.btn-amber { background: var(--g-accent); color: var(--g-deep); box-shadow: 0 10px 30px -12px rgba(var(--g-shade), .6); }
.btn-amber:hover { background: var(--g-accent-hi); color: var(--g-deep); }
.btn-dark { background: var(--g-deep); color: var(--g-head-on-deep); }
.btn-dark:hover { background: var(--g-deep-2); color: var(--g-head-on-deep); }
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color .15s ease; } .btn:active { transform: none; } }
.play-icon { width: 22px; height: 22px; }

/* ---------- phone frames (screenshots keep their own aspect ratio) ---------- */
.phone { width: 300px; padding: 11px; border-radius: 48px; background: var(--g-phone); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 40px 70px -24px rgba(var(--g-shade), .7); }
.phone img, .phone video { width: 100%; height: auto; border-radius: 38px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--g-hero); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--g-shade), .5) 0%, rgba(var(--g-shade), 0) 18%), linear-gradient(90deg, rgba(var(--g-shade), .66) 0%, rgba(var(--g-shade), .4) 44%, rgba(var(--g-shade), 0) 72%); }
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; padding-top: 56px; }
.hero-copy { padding-bottom: 128px; }
.hero-logo { width: 100%; max-width: 470px; height: auto; filter: drop-shadow(0 12px 24px rgba(var(--g-shade), .45)); }
.hero-lede { max-width: 30ch; margin-top: 32px; color: #fff; font-size: 24px; line-height: 1.4; font-weight: 600; text-shadow: 0 2px 12px rgba(var(--g-shade), .55); }
.hero-platforms { margin-top: 16px; color: #FFF1DC; font-size: 17px; font-weight: 700; text-shadow: 0 1px 8px rgba(var(--g-shade), .6); }
.g-wordgamr .hero-platforms { color: #FFF4D6; }
.hero-actions { margin-top: 40px; }
.hero-phone { position: relative; z-index: 2; justify-self: center; margin-bottom: -112px; }
/* the hero shows both: a tablet held sideways on the left, and the phone in front on its right, taller, standing as high
   as the tablet and higher (Jerry, Oct 15). The box keeps its shape, so the two never drift apart at any width. */
.duo { position: relative; z-index: 2; width: 100%; max-width: 720px; aspect-ratio: 100 / 76; justify-self: end; align-self: center; margin: 8px 0 -56px; }
.duo .duo-tablet { position: absolute; top: 19.2%; left: 0; width: 66%; padding: 1.1%; border-radius: 2.5% / 3.6%; }
.duo .duo-tablet img { border-radius: 1.6% / 2.3%; }
/* the hero's phone in the same proportions as every other phone on the page (300 wide, 11 bezel, corners 48 and 38): a
   bezel 3.67% of its width, corners 16% of its width, the screen's corners concentric (Jerry, Nov 2: "the phone border on
   the hero doesn't look good like the rest of the page"). Percent padding counts the hero box's width: 37% x 3.67% = 1.36%. */
.duo .duo-phone { position: absolute; top: 0; right: 0; width: 37%; padding: 1.36%; border-radius: 16% / 7.7%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(var(--g-shade), .75), 0 0 0 1px rgba(0, 0, 0, .25); }
.duo .duo-phone img, .duo .duo-phone video { border-radius: 13.7% / 6.33%; }
.g-shortstack .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
/* WordGamr's wordmark is long and short: a wider, lower logo than Short Stack's stacked one */
.g-wordgamr .hero-logo { max-width: 540px; }
.g-wordgamr .hero-copy { padding-bottom: 160px; }

/* ---------- how it plays: five rules, pieces or tools ---------- */
.materials { background: var(--g-deep); color: var(--g-on-deep); padding: 120px 0 120px; }   /* the hero's devices stay inside the hero now (Nov 3) */
.materials h2 { max-width: 14ch; color: var(--g-head-on-deep); font-size: 60px; }
.section-intro { max-width: 46ch; margin-top: 24px; font-size: 20px; }
.materials .section-intro { color: var(--g-on-deep-2); }
.mat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px; margin: 64px 0 0; padding: 0; list-style: none; }
.mat-tile { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.mat-name { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
.mat-name h3 { color: #fff; font-size: 30px; }
.g-shortstack .mat-name h3 { color: #FFF3E0; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--g-accent); color: var(--g-deep); font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.pill-flip, .pill-2 { background: var(--g-pill-2); }
.pill-static, .pill-3 { background: var(--g-pill-3); }
.mat-copy { margin-top: 14px; color: var(--g-on-deep-2); font-size: 16px; line-height: 1.6; }

/* ---------- phone and tablet: the same game, laid out for each (Jerry, Oct 15: show both) ---------- */
.devices { background: var(--g-page); padding: 128px 0; overflow-x: clip; }
.devices-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px 72px; align-items: end; }
.devices h2 { max-width: 15ch; color: var(--g-deep); font-size: 56px; }
.devices .section-intro { color: var(--g-ink-2); }
.dev-ways { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.dev-ways li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.dev-ways svg { width: 40px; height: 40px; fill: none; stroke: var(--g-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dev-ways h3 { color: var(--g-deep); font-size: 24px; line-height: 1.15; }
.dev-ways p { margin-top: 4px; color: var(--g-ink-2); font-size: 17px; line-height: 1.5; }
/* side by side, never overlapping, so both layouts show whole; about the same height */
.dev-stage { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 1fr); gap: 48px; align-items: end; margin: 72px 0 0; }
.dev-tablet, .dev-phone { margin: 0; }
.tablet { padding: 1.25%; border-radius: 2.8% / 4%; background: var(--g-phone); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 44px 80px -30px rgba(var(--g-shade), .6); }
.tablet img { width: 100%; height: auto; border-radius: 1.7% / 2.5%; }
.dev-phone .phone { width: 100%; padding: 4.2%; border-radius: 16% / 7.4%; }
.dev-phone .phone img { border-radius: 12% / 5.6%; }
.dev-stage figcaption { margin-top: 18px; color: var(--g-ink-2); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-align: center; }

/* ---------- modes ---------- */
.modes { background: var(--g-light); padding: 128px 0; }
.modes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.phones { position: relative; height: 640px; }
.phones .phone { position: absolute; width: 270px; }
.phones .p1 { left: 4%; top: 40px; transform: rotate(-6deg); }
.phones .p2 { left: 40%; top: 0; transform: rotate(5deg); }
.modes h2 { max-width: 16ch; color: var(--g-deep); font-size: 56px; }
.mode-list { display: flex; flex-direction: column; gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.mode { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; }
.mode img { width: 64px; height: auto; }
.mode h3 { color: var(--g-deep); font-size: 30px; }
.mode p { max-width: 42ch; margin-top: 8px; color: var(--g-ink-2); }

/* ---------- Styles to collect ---------- */
.collect { padding: 128px 0; }
.collect-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
.collect h2 { max-width: 12ch; color: var(--g-deep); font-size: 56px; }
.collect .section-intro { max-width: 44ch; color: var(--g-ink-2); }
.tile-row { display: flex; flex-wrap: wrap; row-gap: 24px; margin-top: 56px; padding-left: 6px; }
.tile-row img { width: 62px; height: 62px; margin-left: -6px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(var(--g-shade), .28)); }
.tile-row img:nth-child(even) { transform: translateY(14px); }
.g-wordgamr .tile-row img { width: 64px; height: 64px; margin-left: -2px; }
.collect-phone { justify-self: center; }

/* ---------- closing band ---------- */
.closing { background: var(--g-accent); padding: 96px 0; }
.closing-row { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.closing h2 { color: var(--g-deep); font-size: 56px; }
.closing p { margin-top: 16px; color: var(--g-closing-ink); font-size: 20px; font-weight: 600; }

/* ---------- VIP ---------- */
.vip { position: relative; overflow: hidden; background: #130B22; color: #E9E2FF; padding: 128px 0; }
.vip::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 65% at 80% 45%, rgba(255, 79, 216, .22), rgba(255, 79, 216, 0) 70%), radial-gradient(45% 55% at 10% 90%, rgba(79, 227, 255, .14), rgba(79, 227, 255, 0) 70%); }
.vip .wrap { position: relative; }
.vip-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.vip h2 { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 64px; text-shadow: 0 0 28px rgba(255, 79, 216, .45); }
.trophy { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; color: #FFF3E6; background: radial-gradient(circle at 50% 35%, #FF7A3C, #B3260F 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 30px rgba(255, 110, 50, .45); }
.trophy svg { width: 33px; height: 33px; }
.vip .section-intro { max-width: 40ch; color: #D3C9F4; }
.vip-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 40px; }
.bt { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
img.bt { object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.vip-list { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; margin: 40px 0 0; padding: 0; list-style: none; }
.vip-list li { position: relative; padding-left: 28px; color: #E9E2FF; }
.vip-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(145deg, #4FE3FF, #FF4FD8); box-shadow: 0 0 10px rgba(255, 79, 216, .6); }
.vip-note { margin-top: 24px; color: #A99CCF; font-size: 15px; }
.vip-phone { justify-self: center; }
.vip-phone .phone { background: #07040D; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 0 90px -12px rgba(255, 79, 216, .5), 0 40px 70px -24px rgba(0, 0, 0, .8); }
.vip-phone video { aspect-ratio: 780 / 1688; background: #130B22; }

/* ---------- How it plays overlay ---------- */
dialog.howto { width: min(820px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--g-deep); color: var(--g-on-deep); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .7); overflow: auto; }
dialog.howto::backdrop { background: rgba(var(--g-shade), .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.howto[open] { animation: howto-in .28s ease-out; }
@keyframes howto-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.howto[open] { animation: none; } }
.howto-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px; }
.howto-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.howto-close:hover { background: rgba(255, 255, 255, .2); }
.howto-video { position: relative; }
.howto-video .phone { width: auto; padding: 10px; border-radius: 40px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.howto-video video { height: min(640px, calc(100dvh - 128px)); width: auto; aspect-ratio: 780 / 1688; border-radius: 31px; background: var(--g-phone); }
.howto-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 20px 0 0 16px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 15px/1 var(--body); cursor: pointer; }
.howto-toggle:hover { background: rgba(255, 255, 255, .18); }
.howto-text h2 { color: var(--g-head-on-deep); font-size: 40px; }
.howto-text > p { margin-top: 12px; color: var(--g-on-deep-2); font-size: 17px; }
.chapters { display: flex; flex-direction: column; gap: 4px; margin: 24px 0 0; padding: 0; list-style: none; }
.chapter { position: relative; display: block; width: 100%; padding: 12px 16px 14px; border: 0; border-radius: 14px; background: none; color: var(--g-chapter); text-align: left; cursor: pointer; font: inherit; }
.chapter:hover { background: rgba(255, 255, 255, .05); }
.chapter b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--g-chapter-b); }
.chapter span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; }
.chapter[aria-current="true"] { background: rgba(245, 174, 69, .14); color: var(--g-on-deep); }
.chapter[aria-current="true"] b { color: var(--g-head-on-deep); }
.chapter i { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.chapter i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--g-accent); border-radius: 3px; }
.chapter:not([aria-current="true"]) i { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .vip { padding: 96px 0; }
  .vip-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .vip h2 { font-size: 44px; gap: 14px; }
  .trophy { width: 48px; height: 48px; }
  .trophy svg { width: 26px; height: 26px; }
  .hero-grid, .g-shortstack .hero-grid, .modes-grid, .collect-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 40px; padding-top: 36px; }
  .hero-copy, .g-wordgamr .hero-copy { padding-bottom: 0; }
  /* WordGamr's sky is bright edge to edge: on narrow screens the text runs into the clouds, so the shade covers the
     whole width behind it and fades out below */
  .g-wordgamr .hero::before { background: linear-gradient(180deg, rgba(var(--g-shade), .62) 0%, rgba(var(--g-shade), .46) 46%, rgba(var(--g-shade), 0) 70%); }
  .g-wordgamr .hero { background-position: 30% 30%; }
  .hero-lede { font-size: 20px; margin-top: 24px; }
  .hero-actions { margin-top: 32px; }
  .hero-phone { margin-bottom: -88px; }
  .duo { justify-self: center; max-width: 600px; margin: 0 0 48px; }   /* inside the hero, with room under it: no device half over the next section (Nov 3) */
  .phone { width: 248px; padding: 9px; border-radius: 40px; }
  .phone img, .phone video { border-radius: 31px; }
  .materials { padding: 88px 0 88px; }
  .materials h2, .modes h2, .collect h2, .closing h2 { font-size: 40px; }
  .section-intro { font-size: 18px; }
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 48px; }
  .mat-tile { width: 88px; height: 88px; }
  .modes, .collect { padding: 88px 0; }
  .modes-grid, .collect-grid { gap: 56px; }
  .phones { height: 520px; }
  .phones .phone { width: 210px; }
  .phones .p2 { left: 38%; }
  .mode-list { margin-top: 40px; }
  .closing { padding: 72px 0; }
}
@media (max-width: 720px) {
  .howto-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 64px 16px 20px; justify-items: center; }
  .howto-video video { height: min(540px, calc(100dvh - 360px)); min-height: 280px; }
  .howto-text { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .howto-text .chapters { width: 100%; }
  .howto-toggle { margin: 12px 0 0; }
  .howto-text h2, .howto-text > p { display: none; }
  .chapters { margin-top: 0; }
  .chapter:not([aria-current="true"]) { display: none; }
  .chapter { text-align: center; padding: 12px 16px 16px; }
}
@media (max-width: 380px) { .mode h3 { font-size: 26px; } }
@media (max-width: 960px) {
  .devices { padding: 96px 0; }
  .devices-head { grid-template-columns: minmax(0, 1fr); }
  .devices h2 { font-size: 40px; }
  .dev-stage { margin-top: 48px; gap: 28px; }
}
@media (max-width: 560px) {
  .devices { padding: 72px 0; }
  .dev-ways h3 { font-size: 21px; }
  .dev-ways p { font-size: 16px; }
  .dev-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dev-phone { width: 52%; justify-self: center; }
  .dev-stage figcaption { margin-top: 12px; font-size: 13px; }
}
@media (max-width: 900px) {
  .game-sections { display: none; }
  .sections-btn { display: inline-flex; }
}
@media (max-width: 600px) {
  .game-bar nav { gap: 0 18px; min-height: 52px; }
  .game-name { font-size: 19px; margin-right: 0; }
  .game-help { min-height: 38px; padding: 0 14px 0 10px; }
}
@media (max-width: 359px) {
  .game-help span { display: none; }   /* the icon alone on the narrowest phones */
  .game-help { padding: 0 10px; }
}
@media (max-width: 560px) {
  .vip-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 300px; gap: 12px; }
  .mat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mat-grid > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .mat-grid .mat-tile { width: 72px; height: 72px; grid-row: span 2; }
  .mat-name { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; }   /* the tag always under the name (Nov 3) */
  .tile-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-left: 0; margin-top: 40px; }
  .tile-row img, .g-wordgamr .tile-row img { width: 100%; height: auto; margin-left: 0; }
  .tile-row img:nth-child(even) { transform: none; }
  .phones { height: 440px; }
  .phones .phone { width: 180px; }
  .phones .p1 { left: 2%; }
  .phones .p2 { left: auto; right: 4%; }
  .hero-lede { font-size: 19px; }
}

/* ---------- Nov 3 QA pass ---------- */
/* Short Stack's hero photo is a 1080-wide phone background: on a wide screen it's enlarged, so it's softened on purpose
   (no blocky edges) and the text side is shaded darker so the lines stay readable over the bright lake */
.g-shortstack .hero { overflow: clip; isolation: isolate; background: #2C3A20; }
.g-shortstack .hero::after { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--g-hero); filter: blur(6px); }
.g-shortstack .hero::before { background: linear-gradient(180deg, rgba(var(--g-shade), .5) 0%, rgba(var(--g-shade), 0) 18%), linear-gradient(90deg, rgba(var(--g-shade), .78) 0%, rgba(var(--g-shade), .55) 44%, rgba(var(--g-shade), 0) 72%); }
@media (max-width: 960px) {
  .g-shortstack .hero::before { background: linear-gradient(180deg, rgba(var(--g-shade), .7) 0%, rgba(var(--g-shade), .55) 50%, rgba(var(--g-shade), .15) 80%); }
}

/* ---------- Nov 3 QA (Short Stack and the shared game layout) ---------- */
/* each Modes heading is two sentences, and a line never breaks across them */
.modes h2 .hl { display: block; text-wrap: balance; }
/* the Styles row: one clean line of tiles, evenly spaced, none overlapping or stepped */
.tile-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; max-width: 600px; padding-left: 0; row-gap: 10px; }
.tile-row img, .g-wordgamr .tile-row img { width: 100%; height: auto; margin-left: 0; }
.tile-row img:nth-child(even) { transform: none; }
@media (max-width: 600px) { .tile-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
/* VIP: no glow on the heading's letters (the trophy keeps its own), and each animated block shows its still picture
   from the start, so the row is never an empty gap */
.vip h2 { text-shadow: none; }
.vip-tiles canvas.bt { background: center / contain no-repeat; }
/* Short Stack's section labels, like WordGamr's: amber over a dark section, the deep teal link color over a light one */
.g-shortstack main .eyebrow { margin-bottom: 16px; color: var(--g-link); font: 800 13px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.g-shortstack .materials .eyebrow { color: var(--g-accent); }
/* the hero: the tagline in even lines (the platforms line breaks before "iPhone and iPad coming soon.") */
.hero-lede { text-wrap: balance; }
/* one block size for the two rows of Styles: 343 Styles' ten and VIP's eight (Nov 3 QA) */
@media (min-width: 601px) {
  .g-shortstack .collect .tile-row { max-width: 630px; gap: 10px; }
  .vip-tiles { max-width: 502px; gap: 10px; }
}
@media (max-width: 600px) { .g-shortstack .phones .p1 { left: 6%; } .g-shortstack .phones .p2 { right: 5%; } }   /* the tilted pair evenly inside the margins */
/* Modes: the heading across the top, one sentence per line, then the phones and the three modes side by side */
.modes-head { margin-bottom: 56px; }
.modes h2, .g-wordgamr .modes h2 { max-width: none; }
.modes .mode-list { margin-top: 0; }
@media (max-width: 960px) { .modes-head { margin-bottom: 40px; } }
/* Nov 3 QA, second pass: Short Stack's hero copy sits evenly between the bar and the hero's end; on a phone each game's
   hero button is the same width; the tablet's shadow is lighter on a phone, so its caption isn't in a grey haze */
@media (min-width: 961px) { .g-shortstack .hero-grid { padding-top: 80px; } .g-shortstack .hero-copy { padding-bottom: 96px; } }
@media (max-width: 560px) { .hero-actions .btn { width: 100%; max-width: 300px; } }
@media (max-width: 600px) { .dev-tablet .tablet, .devices .tablet { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 18px 30px -18px rgba(var(--g-shade), .55); } }
@media (max-width: 600px) { .g-wordgamr .rk-show { margin-top: 0; } }