/* WordGamr's page (arcg.co/wordgamr/), on top of game.css. Neutral and warm, built around the walnut of the Marble &
   Brass look and the new sky-and-cobalt wordmark.
   Spacing is an 8-point scale; type is one fluid scale (xs to 4xl) shared by every section. */

.g-wordgamr {
  /* color */
  --ws-walnut: #2B1B11; --ws-ink: #15162A; --ws-ink-2: #1E2038;
  --ws-paper: #FAF8F4;  --ws-mist: #EFEBE4;
  --ws-text: #1C1B22;   --ws-text-2: #4A4752;            /* 16.1:1 and 8.6:1 on paper */
  --ws-on-ink: #ECE8F4; --ws-on-ink-2: #B8B3C7;          /* 14.8:1 and 8.7:1 on ink */
  --ws-sky: #86C8EF;    --ws-cobalt: #173F84;            /* the wordmark's two colors; sky is 9.6:1 on ink */
  --ws-gold: #F2B04A;                                    /* 9.4:1 on ink */
  --ws-hair-dark: rgba(255, 255, 255, .12); --ws-hair-light: rgba(28, 27, 34, .12);

  /* type */
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.25rem + .8vw, 1.875rem);
  --fs-2xl: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --fs-3xl: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);
  --fs-4xl: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);

  /* space */
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(80px, 48px + 6vw, 144px);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 180ms; --dur-2: 280ms; --dur-3: 700ms;

  /* game.css's variables, moved onto the neutral palette */
  --g-deep: var(--ws-ink); --g-deep-2: var(--ws-ink-2); --g-ink: var(--ws-text); --g-ink-2: var(--ws-text-2);
  --g-page: var(--ws-paper); --g-light: var(--ws-mist);
  --g-on-deep: var(--ws-on-ink); --g-on-deep-2: var(--ws-on-ink-2); --g-head-on-deep: #FFE2A8;
  --g-chapter: #B8B3C7; --g-chapter-b: #ECE8F4;
  --g-phone: #0D0E1A; --g-shade: 20, 12, 7; --g-link: #1F55B8; --g-link-hi: #173F84;
}
.g-wordgamr main { font-size: var(--fs-base); line-height: 1.65; }
.g-wordgamr main h2 { font-size: var(--fs-3xl); line-height: 1.03; letter-spacing: -.015em; }
.g-wordgamr main h3 { line-height: 1.12; }
.g-wordgamr .section-intro { max-width: 48ch; margin-top: var(--s-5); font-size: var(--fs-lg); line-height: 1.55; }
.g-wordgamr .eyebrow { margin-bottom: var(--s-4); color: var(--ws-cobalt); font: 800 var(--fs-xs)/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.g-wordgamr .pz .eyebrow, .g-wordgamr .materials .eyebrow { color: var(--ws-sky); }
.g-wordgamr .phone { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 36px 64px -28px rgba(var(--g-shade), .7); }

/* ---------- heroes ---------- */
.g-wordgamr .ws-hero { position: relative; z-index: 1; overflow-x: clip; background: var(--ws-walnut); }   /* above the next section, so the phones can overlap it */
.g-wordgamr .ws-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.g-wordgamr .ws-hero .wrap { position: relative; z-index: 2; }
.ws-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-7); }
.ws-hero-copy { position: relative; }
.ws-logo { margin: 0; line-height: 0; }
.ws-logo img { width: min(100%, 280px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.ws-lede { margin-top: var(--s-5); color: #fff; font: 700 var(--fs-lg)/1.45 var(--body); }
.ws-lede span { display: block; }
.ws-platforms { margin-top: var(--s-3); color: #F5E6CF; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
.g-wordgamr .hero-actions { margin-top: var(--s-6); }

/* walnut (from November 1): WordGamr's own walnut planks. Phones get the tall photo; wide screens the same photo turned
   so the planks run across (2532 px wide, so it stays sharp; turned, never stretched) */
.ws-hero.wn { background: var(--ws-walnut) url("/assets/wordgamr/walnut.webp") 50% 0 / cover no-repeat; }
.ws-hero.wn::before { background: linear-gradient(180deg, rgba(20, 12, 7, .55) 0%, rgba(20, 12, 7, .2) 48%, rgba(20, 12, 7, .45) 100%); }

/* three Themes on the same round, fanned; the side phones slide out from behind once on load */
.fan { position: relative; height: 452px; margin-bottom: -64px; --front: 208px; --side: 172px; --off: 64px; --drop: 28px; }
.fan .phone { position: absolute; left: 50%; bottom: 0; width: var(--side); padding: 7px; border-radius: 30px; translate: calc(-50% + var(--x, 0px)) var(--drop); }
.fan .phone img { border-radius: 24px; }
.fan .front { z-index: 2; width: var(--front); padding: 9px; border-radius: 38px; translate: -50% 0; }
.fan .front img { border-radius: 30px; }
.fan .left { --x: calc(var(--off) * -1); }
.fan .right { --x: var(--off); }
.js .fan .left, .js .fan .right { --x: 0px; opacity: 0; transition: translate var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.js .fan.is-open .left { --x: calc(var(--off) * -1); opacity: 1; }
.js .fan.is-open .right { --x: var(--off); opacity: 1; transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .js .fan .left, .js .fan .right { transition: none; } }

/* the hero: a tablet held sideways behind, the phone in front (game.css .duo) */
.g-wordgamr .duo { justify-self: center; margin-bottom: 48px; }   /* inside the hero (Nov 3) */

/* ---------- Make it yours ---------- */
.pz { position: relative; background: var(--ws-ink); color: var(--ws-on-ink); padding: calc(var(--section-y) + 64px) 0 var(--section-y); overflow-x: clip; }
.pz::before { content: ""; position: absolute; inset: 0; pointer-events: none;   /* the crossword board's grid, faintly */
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(75% 60% at 30% 45%, #000 25%, transparent 75%); mask-image: radial-gradient(75% 60% at 30% 45%, #000 25%, transparent 75%); }
.pz .wrap { position: relative; }
.pz-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "list"; gap: var(--s-7); }
.pz-copy { grid-area: copy; }
.pz-media { grid-area: media; justify-self: center; }
.pz-list { grid-area: list; }
.pz h2 { color: #fff; }
.pz .section-intro { color: var(--ws-on-ink-2); }
.pz-stick { display: flex; flex-direction: column; align-items: center; }
.pz-media .phone { width: 232px; background: #07080F; }
.pz-media video { aspect-ratio: 780 / 1688; background: var(--ws-ink); }
.pz-caption { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: var(--s-5); padding: 0 18px; border-radius: 999px; background: rgba(134, 200, 239, .1); box-shadow: inset 0 0 0 1px rgba(134, 200, 239, .28); color: var(--ws-sky); font: 800 var(--fs-sm)/1 var(--body); letter-spacing: .02em; white-space: nowrap; }
.pz-caption span { display: block; }
.pz-caption span.in { animation: pz-in var(--dur-1) var(--ease-out); }
@keyframes pz-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pz-caption span.in { animation: none; } }

.kinds { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ws-hair-dark); }
.kind { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 2px; align-items: center; align-content: center;   /* a row made taller by its neighbor keeps its title on its description (Magnifiers) */
  padding: var(--s-4) var(--s-3) var(--s-4) var(--s-3); border-bottom: 1px solid var(--ws-hair-dark); transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.kind svg { grid-row: 1 / span 2; width: 26px; height: 26px; fill: none; stroke: var(--ws-sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kind-name { color: #fff; font: 800 var(--fs-lg)/1.2 var(--display); white-space: nowrap; }
.kind-desc { grid-column: 2; color: var(--ws-on-ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.kind-count { grid-row: 1 / span 2; grid-column: 3; color: var(--ws-gold); font: 800 var(--fs-xl)/1 var(--display); font-variant-numeric: tabular-nums; }
.kind[data-active] { background: linear-gradient(90deg, rgba(134, 200, 239, .14), rgba(134, 200, 239, 0) 75%); box-shadow: inset 2px 0 0 var(--ws-sky); }
.kinds-total { margin-top: var(--s-5); color: var(--ws-on-ink-2); font-size: var(--fs-sm); }

/* ---------- Themes ---------- */
.looks { background: var(--ws-paper); padding: var(--section-y) 0; }
.looks-head { max-width: 760px; }
.looks h2 { color: var(--ws-text); }
.looks .section-intro { color: var(--ws-text-2); }
.look-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-7) var(--s-5); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.look { display: flex; flex-direction: column; align-items: center; width: 150px; }
.look .phone { width: 100%; padding: 6px; border-radius: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 24px 40px -24px rgba(21, 22, 42, .45); }
.look .phone img { border-radius: 21px; }
.look-name { position: relative; margin-top: var(--s-4); color: var(--ws-text); font: 800 var(--fs-base)/1.2 var(--display); white-space: nowrap; }
@media (hover: hover) {
  .look .phone { transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .look:hover .phone { translate: 0 -6px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 36px 56px -28px rgba(21, 22, 42, .55); }
  .look-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--ws-gold); scale: 0 1; transform-origin: left; transition: scale var(--dur-2) var(--ease-out); }
  .look:hover .look-name::after { scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) { .look .phone, .look-name::after { transition: none; } }

.features { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--s-9) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ws-hair-light); }
.features li { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--s-4); align-content: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--ws-hair-light); }
.features svg { grid-row: 1 / span 3; width: 26px; height: 26px; fill: none; stroke: var(--ws-cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.features h3 { color: var(--ws-text); font-size: var(--fs-lg); white-space: nowrap; }
.features p { margin-top: 6px; color: var(--ws-text-2); font-size: var(--fs-sm); line-height: 1.55; }
.feat-tag { justify-self: start; align-self: end; margin-top: var(--s-3);   /* on one line across a row */
  padding: 2px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(23, 63, 132, .35); color: var(--ws-cobalt); font: 800 11px/1.5 var(--body); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- How it plays (rules) ---------- */
.g-wordgamr .materials { padding: var(--section-y) 0; }
.g-wordgamr .materials h2 { max-width: none; color: #fff; font-size: var(--fs-3xl); }
.g-wordgamr .mat-grid { gap: var(--s-7) var(--s-6); margin-top: var(--s-8); }
.g-wordgamr .mat-name { gap: var(--s-3); margin-top: 20px; }
.g-wordgamr .mat-name h3 { font-size: var(--fs-xl); }
.g-wordgamr .mat-copy { margin-top: var(--s-4); font-size: var(--fs-sm); }
.g-wordgamr .pill, .g-wordgamr .pill-2, .g-wordgamr .pill-3 { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); color: #FFE2A8; font-size: 12px; letter-spacing: .02em; }

/* the round's other touches: four in a row under the rules (dark section) */
.round-feats { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--s-9) 0 0; padding: 0; list-style: none; }   /* a line above each item, none under the last (Nov 3) */
.round-feats li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-4); align-content: start; padding: var(--s-5) 0; border-top: 1px solid var(--ws-hair-dark); }
.round-feats svg { grid-row: 1 / span 2; width: 26px; height: 26px; fill: none; stroke: var(--ws-sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.round-feats h3 { color: #fff; font-size: var(--fs-lg); white-space: nowrap; }
.round-feats p { margin-top: 6px; color: var(--g-on-deep-2); font-size: var(--fs-sm); line-height: 1.55; }
/* Power-up Rockets: the two launches from the Shop, side by side */
.rk-show { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--ws-hair-dark); scroll-margin-top: 96px; }
.rk-title { margin-top: var(--s-3); color: #fff; font-size: var(--fs-2xl); line-height: 1.1; }
.rk-text { max-width: 46ch; margin-top: var(--s-4); color: var(--g-on-deep-2); font-size: var(--fs-base); line-height: 1.6; }
.rk-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); justify-items: center; }
.rk-phone { width: 100%; max-width: 250px; margin: 0; }
.rk-phone .phone { width: 100%; padding: 4.2%; border-radius: 15% / 7%; background: #0B0C18; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 40px 70px -24px rgba(0, 0, 0, .75); }
.rk-phone video { display: block; aspect-ratio: 780 / 1688; border-radius: 12% / 5.6%; background: #0E1830; }
.rk-phone figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--s-4); color: var(--g-on-deep-2); font-size: var(--fs-sm); line-height: 1.35; text-align: center; white-space: nowrap; }
.rk-phone figcaption b { color: #fff; font-size: var(--fs-base); font-weight: 700; }

/* ---------- Modes ---------- */
.g-wordgamr .modes { padding: var(--section-y) 0; }
.g-wordgamr .modes h2 { max-width: 15ch; font-size: var(--fs-3xl); color: var(--ws-text); }
.g-wordgamr .mode h3 { font-size: var(--fs-xl); color: var(--ws-text); }
.g-wordgamr .phones .phone { transform: none; }
.g-wordgamr .phones .p1 { left: 2%; top: 56px; }
.g-wordgamr .phones .p2 { left: 48%; top: 0; }

/* ---------- Collect ---------- */
.g-wordgamr .collect { padding: var(--section-y) 0; background: var(--ws-paper); border-top: 1px solid var(--ws-hair-light); }
.g-wordgamr .collect h2 { max-width: none; color: var(--ws-text); font-size: var(--fs-3xl); }
.ways { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--s-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ws-hair-light); }
.ways li { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--ws-hair-light); }
.way-n { display: block; color: var(--ws-cobalt); font: 800 var(--fs-xs)/1 var(--body); letter-spacing: .14em; }
.ways h3 { margin-top: var(--s-3); color: var(--ws-text); font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); white-space: nowrap; }
.ways p { max-width: 40ch; margin-top: var(--s-3); color: var(--ws-text-2); font-size: var(--fs-base); }
.g-wordgamr .collect .tile-row { justify-content: flex-start; margin-top: var(--s-8); }   /* on the page's left edge, like the text above it */

/* ---------- VIP: one glow less ---------- */
.g-wordgamr .vip { padding: var(--section-y) 0; }
.g-wordgamr .vip h2 { font-size: var(--fs-3xl); text-shadow: none; }

/* ---------- closing: quiet, on paper ---------- */
.g-wordgamr .closing { background: var(--ws-paper); border-top: 1px solid var(--ws-hair-light); padding: var(--s-9) 0; }
.g-wordgamr .closing h2 { color: var(--ws-text); font-size: var(--fs-2xl); line-height: 1.06; }
.g-wordgamr .closing p { color: var(--ws-text-2); font-size: var(--fs-lg); font-weight: 600; }

/* ---------- 600 px and up ---------- */
@media (min-width: 600px) {
  .round-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .fan { height: 520px; margin-bottom: -80px; --front: 240px; --side: 200px; --off: 104px; --drop: 32px; }
  .ws-logo img { width: min(100%, 320px); }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .look { width: 168px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}

/* ---------- 960 px and up: two columns ---------- */
@media (min-width: 960px) {
  .round-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); }
  .rk-show { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-9); }
  .rk-phones { gap: var(--s-7); }
  .ws-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s-8); align-items: center; padding-top: var(--s-8); }
  .ws-hero-copy { padding-bottom: var(--s-9); }
  .ws-logo img { width: min(100%, 360px); }
  .ws-lede { margin-top: var(--s-6); font-size: 1.5rem; }
  .fan { align-self: end; height: 610px; margin-bottom: -96px; --front: 280px; --side: 236px; --off: 132px; --drop: 36px; }
  .fan .front { padding: 11px; border-radius: 46px; } .fan .front img { border-radius: 36px; }
  .fan .phone:not(.front) { padding: 9px; border-radius: 40px; } .fan .phone:not(.front) img { border-radius: 31px; }
  .ws-hero.wn { background-image: url("/assets/wordgamr/walnut-wide.webp"); background-position: 50% 50%; }
  .ws-hero.wn::before { background: linear-gradient(90deg, rgba(20, 12, 7, .62) 0%, rgba(20, 12, 7, .3) 46%, rgba(20, 12, 7, 0) 72%), linear-gradient(180deg, rgba(20, 12, 7, .3) 0%, rgba(20, 12, 7, 0) 30%); }
  .g-wordgamr .duo { align-self: end; justify-self: end; margin: 8px 0 96px; }   /* room under it, as on Short Stack's hero (Nov 3: the phone nearly touched the edge) */

  .pz { padding-top: calc(var(--section-y) * 1.25 + 96px); padding-bottom: calc(var(--section-y) * 1.25); }
  .pz-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "media copy" "media list"; column-gap: var(--s-9); row-gap: var(--s-7); align-items: start; }
  .pz-media { justify-self: center; align-self: stretch; }   /* centered in its column (Nov 3: it sat hard left) */
  .pz-stick { position: sticky; top: 112px; }
  .pz-media .phone { width: 300px; padding: 11px; border-radius: 48px; } .pz-media video { border-radius: 38px; }

  .kinds { grid-template-columns: minmax(0, 1fr); }   /* one column beside the phone until there's room for two */
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); border-top: 0; }
  .ways li { border-top: 1px solid var(--ws-hair-light); border-bottom: 0; }
  .look-grid { flex-wrap: nowrap; gap: 40px; }
  .look { width: auto; flex: 1 1 0; max-width: 228px; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-wordgamr .phones .p1 { left: 0; }
  .g-wordgamr .phones .p2 { left: 46%; }
}
@media (min-width: 1180px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) and (max-width: 1100px) { .look-name { font-size: var(--fs-sm); } }
@media (max-width: 380px) { .ws-lede { font-size: 1.125rem; } .pz-media .phone { width: 216px; } .look { width: 136px; } .g-wordgamr .phones .p2 { left: auto; right: 0; } }

/* ---------- phones: WORDGAMR's eight letter tiles in two rows of four, WORD over GAMR, as in the logo ---------- */
@media (max-width: 560px) {
  .g-wordgamr .collect .tile-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 300px; margin-inline: auto; }
}

/* ---------- Oct 29 (v1.29-RC): the Theme gallery, Clock Run in the Modes phones, the Passes, the blue hero ---------- */
.look-tag { margin-top: 4px; color: var(--ws-text-2); font: 800 11px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.look-tag.t-col { color: var(--ws-cobalt); } .look-tag.t-sub { color: #0E7468; } .look-tag.t-vip { color: #A8321F; }
.look-grid.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 148px; justify-content: start; gap: var(--s-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 6px 16px var(--s-5); }
.gallery .look { width: auto; scroll-snap-align: start; }
.g-wordgamr .phones video { display: block; aspect-ratio: 780 / 1688; background: #0E1830; }
.passes .pass-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: 680px; margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.pass { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; padding: var(--s-5); border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pass img { width: 52px; height: 52px; }
.pass-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }   /* the tag always under the name */
.pass h3 { color: #fff; font-size: var(--fs-lg); line-height: 1.2; white-space: nowrap; }
.pass p { margin-top: 6px; color: #D3C9F4; font-size: var(--fs-sm); line-height: 1.55; }
.pass-ads { display: inline-block; padding: 1px 9px; border-radius: 999px; color: #9FF0C9; box-shadow: inset 0 0 0 1px rgba(159, 240, 201, .45); font: 800 11px/1.5 var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pass-ads.keeps { color: #C9BEEA; box-shadow: inset 0 0 0 1px rgba(201, 190, 234, .35); }
.passes .vip-phone video { display: block; }
.passes .eyebrow { color: #C9A7FF; }
/* the blue hero (sample B): Cobalt & Silver's crystal facets, never enlarged past their own size on a phone */
.ws-hero.cb { background: #0B2A6B url("/assets/wordgamr/facets.webp") 50% 30% / cover no-repeat; }
.ws-hero.cb::before { background: linear-gradient(180deg, rgba(6, 18, 52, .5) 0%, rgba(6, 18, 52, .15) 48%, rgba(6, 18, 52, .45) 100%); }
@media (min-width: 600px) {
  .look-grid.gallery { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: var(--s-7) var(--s-5); }
}
@media (min-width: 960px) {
  .look-grid.gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
  .gallery .look { max-width: none; }
  .ws-hero.cb { background-image: url("/assets/wordgamr/facets-wide.webp"); background-position: 50% 50%; }
  .ws-hero.cb::before { background: linear-gradient(90deg, rgba(6, 18, 52, .62) 0%, rgba(6, 18, 52, .25) 46%, rgba(6, 18, 52, 0) 72%); }
}

/* Oct 29, second pass: the hero's phone plays a round in Cobalt & Silver (Jerry: "that should be in the hero") */
.wn-duo .duo-phone video { display: block; aspect-ratio: 780 / 1688; background: #0E1830; }

/* ---------- Oct 30 (Google Play launch): the Google Play spot, About the game (the store listing) and the trailer ---------- */
.g-wordgamr .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
/* "Coming soon to Google Play" until the listing is live; then build.py swaps in Google's badge (.play-badge) */
.play-soon { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; margin: 0; padding: 7px 20px 8px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 12px; background: rgba(10, 10, 20, .55); color: #fff; line-height: 1.15; }
.play-soon span { color: rgba(255, 255, 255, .82); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.play-soon strong { font: 800 1.25rem/1.15 var(--body); }
.play-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.play-badge img { width: auto; height: 64px; }
.play-badge:focus-visible { outline: 3px solid var(--ws-gold); outline-offset: 2px; }

.listing { padding: calc(var(--section-y) * .7) 0 var(--section-y); background: var(--ws-paper); color: var(--ws-text); scroll-margin-top: 64px; }
.listing + .pz { padding-top: var(--section-y); }
.listing-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-4); align-items: start; }
.listing-icon { width: 72px; height: 72px; border-radius: 22%; box-shadow: 0 12px 28px -14px rgba(21, 22, 42, .55); }
.g-wordgamr .listing-id h2 { color: var(--ws-text); font-size: var(--fs-2xl); line-height: 1.05; }
.listing-dev { margin-top: 4px; color: var(--ws-cobalt); font-size: var(--fs-sm); font-weight: 800; }
.listing-short { max-width: 52ch; margin-top: var(--s-2); color: var(--ws-text-2); font-size: var(--fs-lg); line-height: 1.45; }
.listing-get { grid-column: 1 / -1; }
.listing .play-soon { border-color: var(--ws-ink); background: var(--ws-ink); }


.listing-about h3 { color: var(--ws-text); font-size: var(--fs-xl); }
.listing-about h3 + p { margin-top: var(--s-3); }
.listing-about p + p { margin-top: var(--s-3); }
/* a heading sits with what it heads: well clear of the text above it, close to the text under it (Jerry, Nov 3: "There
   needs to be distinctly more space above the title than below it") */
.listing-about h4 { margin-top: 44px; color: var(--ws-cobalt); font: 800 var(--fs-xs)/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.listing-about ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.listing-about h4 + ul, .listing-about h4 + p { margin-top: 6px; }
.listing-about li + li { margin-top: 4px; }
.listing-fine { max-width: 72ch; margin-top: var(--s-5) !important; color: var(--ws-text-2); font-size: var(--fs-sm); line-height: 1.6; }
.listing-fine a { color: var(--ws-cobalt); font-weight: 700; text-underline-offset: 3px; }

/* the trailer: our own poster until someone presses play, then YouTube's player (privacy-enhanced mode) */
.trailer { height: 100%; }
.trailer-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #000; cursor: pointer; line-height: 0; }
.trailer-play img { width: 100%; height: 100%; object-fit: cover; }
.trailer-btn { position: absolute; inset: 0; display: grid; place-items: center; }
.trailer-btn svg { width: 76px; height: auto; transition: transform var(--dur-1) ease; }
.trailer-play:hover .trailer-btn svg { transform: scale(1.06); }
.trailer-play:focus-visible { outline: 3px solid var(--ws-gold); outline-offset: 3px; }
.trailer iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the play button over the poster's middle phone, clear of the tagline (Nov 2) */
.trailer-btn { align-items: end; padding-bottom: calc(14.6% - 27px); }

@media (min-width: 760px) {
  .listing-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4) var(--s-5); align-items: center; }
  .listing-get { grid-column: auto; }
  .listing-icon { width: 112px; height: 112px; }
}
@media (min-width: 960px) {
  .listing { padding-top: calc(var(--section-y) * .8); }
  .listing + .pz { padding-top: calc(var(--section-y) * 1.25); }
}
@media (max-width: 380px) { .play-soon strong { font-size: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .trailer-btn svg { transition: none; } }

/* ---------- Nov 3 (Jerry): About as a carousel of the wide pictures (the trailer first) and the store text with its 9:16
   screenshots beside it. "I don't really like this design, especially the scrollbar ... the user can play it or swipe to
   see the next image (active carousel dot is indicated below the video/image). I would only have wide video and images in
   that carousel. The 9:16 style images can be placed throughout the text" ---------- */
.reel { margin-top: var(--s-7); }
.reel-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border-radius: 18px; background: var(--ws-ink); box-shadow: 0 24px 48px -28px rgba(21, 22, 42, .65); outline: none; }
.reel.is-ready .reel-track { scrollbar-width: none; }
.reel.is-ready .reel-track::-webkit-scrollbar { display: none; }
.reel-track:focus-visible { outline: 3px solid var(--ws-gold); outline-offset: 3px; }
.reel-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; }
.reel-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-nav { display: none; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.reel.is-ready .reel-nav { display: flex; }
.reel-dots { display: flex; align-items: center; }
.reel-dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.reel-dot::before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: rgba(21, 22, 42, .22); transition: width var(--dur-1) ease, background-color var(--dur-1) ease; }
.reel-dot:hover::before { background: rgba(21, 22, 42, .42); }
.reel-dot[aria-current="true"]::before { width: 26px; background: var(--ws-cobalt); }
.reel-dot[aria-current="true"] { width: 40px; }
.reel-dot:focus-visible, .reel-arrow:focus-visible { outline: 3px solid var(--ws-gold); outline-offset: -4px; border-radius: 12px; }
.reel-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ws-text); cursor: pointer; }
.reel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reel-arrow:hover { background: rgba(21, 22, 42, .07); }
.reel-arrow:disabled { opacity: .28; cursor: default; background: none; }
.reel-more { margin-top: var(--s-2); text-align: center; }
.yt-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px; border: 1px solid rgba(21, 22, 42, .16); border-radius: 999px; background: #fff; color: var(--ws-text); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px -10px rgba(21, 22, 42, .35); transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.yt-link:hover { border-color: rgba(21, 22, 42, .32); box-shadow: 0 8px 20px -10px rgba(21, 22, 42, .45); }
.yt-link:focus-visible { outline: 3px solid var(--ws-gold); outline-offset: 2px; }

.listing-about { margin-top: var(--s-8); }
.about-row + .about-row, .about-row + .about-cols { margin-top: var(--s-8); }
.about-text > :first-child { margin-top: 0; }
.about-shots { display: flex; justify-content: center; gap: var(--s-4); margin-top: var(--s-5); }
.about-shots img { display: block; width: min(44%, 200px); height: auto; border-radius: 16px; background: var(--ws-ink); box-shadow: 0 18px 36px -22px rgba(21, 22, 42, .6); }
.about-shots.one img { width: min(56%, 220px); }
.about-cols > div + div { margin-top: 44px; }   /* on phones, the second heading clears the list above it like the others */
.about-cols > div > :first-child { margin-top: 0; }
.listing-about .about-cols + .listing-fine { margin-top: var(--s-7) !important; }
@media (min-width: 760px) {
  .about-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; }
  .about-row.flip { grid-template-columns: auto minmax(0, 1fr); }
  .about-row.flip .about-shots { order: -1; }
  .about-shots { margin-top: 0; }
  .about-shots img { width: 180px; }
  .about-shots.one img { width: 200px; }
  .about-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }   /* never 2 + 1 */
  .about-cols > div + div { margin-top: 0; }
  .about-cols > div > :first-child { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .reel-dot::before { transition: none; } }

/* the Boost Box under the Rockets, mirrored: its phone on the left on wide screens (Jerry, Nov 3: "where is the boost box?") */
.bx-show { margin-top: var(--s-8); padding-top: var(--s-8); }
.bx-show .rk-phones { grid-template-columns: minmax(0, 1fr); }
.bx-show .rk-phone { max-width: min(250px, calc((100% - var(--s-5)) / 2)); }   /* the size of one Rocket phone beside it */
@media (min-width: 960px) { .bx-show .rk-phone { max-width: min(250px, calc((100% - var(--s-7)) / 2)); } }
@media (min-width: 960px) {
  .bx-show { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .bx-show .rk-phones { order: -1; }
}

/* ---------- Nov 3 QA pass ---------- */
.g-wordgamr .mat-tile { object-position: left center; }   /* each picture's left edge on its heading's */
@media (min-width: 960px) { .about-cols { gap: var(--s-7); } }

/* ---------- Nov 3 QA: the Theme gallery on a phone shows two whole phones at a time, never a cut-off one, with the
   same arrows and dots as the About carousel; every gallery phone wears the one frame (bezel 3.67%, corners 16%) ---------- */
.look .phone { padding: 3.67%; border-radius: 16% / 7.4%; }
.look .phone img { border-radius: 13.7% / 6.33%; }
@media (max-width: 599px) {
  .look-grid.gallery { grid-auto-columns: calc((100% - var(--s-5)) / 2); gap: var(--s-5); margin-inline: 0; padding: 8px 0 var(--s-4); scroll-padding-inline: 0; }
  .gallery .look { scroll-snap-align: none; }
  .gallery .look:nth-child(odd) { scroll-snap-align: start; scroll-snap-stop: always; }
  .look-grid.gallery.is-ready { scrollbar-width: none; }
  .look-grid.gallery.is-ready::-webkit-scrollbar { display: none; }
  .gallery-nav:not([hidden]) { display: flex; margin-top: 0; }
}
@media (min-width: 600px) { .gallery-nav { display: none !important; } }
/* the trailer's play button: YouTube's red, sized to the poster (68 to 96px), centered over the middle phone */
.trailer-btn { --b: clamp(68px, 9vw, 96px); padding-bottom: calc(14.6% - var(--b) * .353); }
.trailer-btn svg { width: var(--b); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.trailer-play:hover .trailer-btn svg path:first-child { fill: #E00000; }
/* WordGamr's Styles row spells WORDGAMR: eight tiles in one even row (two rows of four on a phone, set above) */
.g-wordgamr .collect .tile-row { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 560px) { .g-wordgamr .collect .tile-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 300px; } }
@media (max-width: 599px) { .gallery-nav + .features { margin-top: var(--s-6); } }
/* the Passes heading: two sentences, one per line (the VIP heading's flex row is only for Short Stack's trophy) */
.g-wordgamr .passes h2 { display: block; }
.g-wordgamr .passes h2 .hl { display: block; text-wrap: balance; }
/* Make it yours: each row's name and count share the top line and the description runs the row's full width under
   them, so names line up across the two columns and descriptions get room (Nov 3 QA: "stepped rows, cramped text") */
.kind { align-items: center; align-content: start; }
.kind svg { grid-row: 1; }
.kind-count { grid-row: 1; font-size: var(--fs-lg); }
.kind-desc { grid-column: 2 / 4; text-wrap: pretty; }
/* the hero's two actions: the same height and corners, and on a phone the same width, stacked */
.play-soon { border-radius: 18px; }
@media (max-width: 560px) {
  .g-wordgamr .ws-hero .hero-actions { flex-direction: column; align-items: stretch; max-width: 300px; }
  .g-wordgamr .ws-hero .hero-actions > * { width: 100%; }
  .g-wordgamr .ws-hero .play-soon { align-items: center; text-align: center; }
}
/* Words on a phone: each picture centered in the same 72px column, so a tall jar and a round coin carry the same weight */
@media (max-width: 600px) { .g-wordgamr .mat-tile { object-position: center; } }
/* the Theme gallery on a phone: room inside the swipe area for the phones' shadows */
@media (max-width: 599px) {
  .look-grid.gallery { margin-inline: -16px; padding: 8px 16px 28px; scroll-padding-inline: 16px; }
}
/* on a phone, How it plays' lists and the Rockets sit closer: no gap much bigger than the ones inside the lists */
@media (max-width: 600px) {
  .round-feats { margin-top: var(--s-7); }
  .rk-show { margin-top: var(--s-5); padding-top: var(--s-8); }
}
/* WORDGAMR's letters under the three ways: bigger, centered under all three (still sharp: each picture is 200px) */
@media (min-width: 561px) { .g-wordgamr .collect .tile-row { grid-template-columns: repeat(8, 80px); justify-content: center; gap: 24px; max-width: none; } }
.g-wordgamr .modes h2 { max-width: none; }   /* the Modes heading runs across the top now, one sentence per line */
/* the carousels' arrows: a round outlined button, not a bare glyph */
.reel-arrow { border: 1px solid rgba(21, 22, 42, .18); background: #fff; color: var(--ws-text); }
.reel-arrow:hover { background: #F1F2F8; }
.reel-arrow:disabled { background: #fff; }
@media (min-width: 1100px) { .g-wordgamr .passes .vip-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }   /* "Four ways to get more." on one line */

/* ---------- Nov 5: WordGamr is live on Google Play. Google's badge (unaltered) has clear space built into its picture:
   the black badge is 133.4 x 38.4 of its 155 x 60. --bh is the height of the black badge itself; the picture is scaled
   to match and pulled out by its clear space, so the visible badge lines up with the content edge and, in the hero,
   is exactly as tall as the "How it plays" button. ---------- */
.play-badge { --bh: 56px; border-radius: calc(var(--bh) * .11); }
.play-badge img { max-width: none; height: calc(var(--bh) * 60 / 38.4); margin: calc(var(--bh) * -10.8 / 38.4); }
.listing-get .play-badge { --bh: 48px; }
@media (max-width: 560px) {
  /* stacked on a phone: the button and the badge the same width, both on the left edge */
  .g-wordgamr .ws-hero .hero-actions { align-items: flex-start; }
  .g-wordgamr .ws-hero .hero-actions > .btn { width: calc(var(--bh, 56px) * 133.4 / 38.4); min-width: 0; padding: 0 16px; }
  .g-wordgamr .ws-hero .hero-actions > .play-badge { width: auto; }
}
/* below 760px the badge sits under the name and tagline, on the text's left edge, not under the icon (Jerry, Nov 5) */
@media (max-width: 759px) { .listing-get { grid-column: 2; margin-top: var(--s-2); } }
/* the badge also closes the page (beside "How it plays", the same height) and sits under the phone and tablet (Jerry, Nov 5) */
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.dev-get { display: flex; justify-content: center; margin-top: var(--s-7); }
.dev-get .play-badge { --bh: 56px; }
@media (max-width: 560px) {
  .closing-actions { flex-direction: column; align-items: flex-start; }
  .closing-actions > .btn { width: calc(56px * 133.4 / 38.4); min-width: 0; padding: 0 16px; }
}