/* ============================================================
   ANOTHER WORD GAME — app landing page
   The App Store badge comes from jimeo.css, loaded alongside this
   file. The rest is this page's own: a centred hero with three
   claims under it, a card per game mode, and the unlock block.
   ============================================================ */

/* the app's accept green from DesignSystem.swift, the colour a valid word
   lights up in (and the Rounds card's) */
.awg { --awg-green: #aaf100; }

/* ---- hero ----
   Everything centred on one axis, each piece with its own measure: the
   headline on the h1 rung, the lead at body size, the fine print small. */
.awg-hero {
  padding-top: calc(var(--nav-h) + clamp(var(--s-5), 12vh, var(--s-6)));
  text-align: center;
}
.awg-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The mark is a long lockup, almost six times as wide as it is tall, and it
   is the smallest thing here on purpose: it names the page, the headline
   makes the claim. Tracks the viewport, capped. */
.awg-hero__mark {
  margin: 0 0 var(--s-4);
  line-height: 0; /* the img is the whole line: no strut, no gap under it */
}
.awg-hero__mark img {
  display: inline-block;
  width: clamp(150px, 18vw, 210px);
  height: auto;
}

.awg-hero__title {
  margin: 0;
  max-width: 24ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
}
.awg-hero__lead {
  margin: var(--s-3) 0 0;
  max-width: 44ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}
.awg-hero__cta { margin: var(--s-4) 0 0; }
/* The button is the point of the hero, so it is bigger here than beside the
   Jimeo facts: 56px tall, which is what the game's own primary buttons are.
   Height only, as always with this artwork. */
.awg-hero__cta .badge-appstore img { height: 56px; }

/* ---- download band ----
   Full bleed in the Rounds green, black on it: the one place on the page
   that is not black. Title on the left at the h1 rung, the line and the
   badge on the right, both halves centred on the same axis. */
.awg-download {
  padding-block: clamp(var(--s-5), 8vh, var(--s-6));
  background: var(--awg-green);
  color: #000;
}
.awg-download__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) clamp(var(--s-4), 7vw, var(--s-6));
  align-items: center;
}
.awg-download__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
}
/* the name in bold, the verb as it was (Evan, 2026-09-23) */
.awg-download__name { font-weight: 700; }
.awg-download__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
/* left-aligned here, under the line, where the hero's copy centres it. The
   .awg-soon rule is further down the file, hence the extra specificity. */
.awg-download__cta { margin: var(--s-3) 0 0; }
.awg-download .awg-soon { align-items: flex-start; }
.awg-download__cta .badge-appstore img { height: 56px; }
/* Apple's black lockup is already a black shape on this ground, so the dim
   needs less: at .38 it sank into the green. The note is black like the rest. */
.awg-download .badge-appstore--soon { opacity: 0.55; }
.awg-download .awg-soon__note { color: #000; }

/* ---- fine print ----
   One centred line above the footer: the platform, then the two links, with
   bars between. Small and faint, the links in the site's white. */
.awg-fine { padding: var(--s-3) 0; }
.awg-fine__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-2);
  margin: 0 auto; /* a bare `margin: 0` here had undone .container's centring */
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-faint);
  text-align: center;
}
.awg-fine__divider { color: var(--hairline); }

/* ---- App Store badge, before there is a store page ----
   Apple's artwork, untouched: opacity is the one thing the guidelines leave
   free, so it carries the whole of "coming soon". It is a span rather than a
   link, so there is nothing to hover, focus or follow; the hover rule in
   jimeo.css is answered here so the dimmed badge does not react to a cursor
   as though it led somewhere. */
.badge-appstore--soon {
  opacity: 0.38;
  cursor: default;
}
@media (hover: hover) {
  .badge-appstore--soon:hover { opacity: 0.38; }
}
/* the words carry the meaning, for the eye and for a screen reader alike: the
   badge above them is aria-hidden, since a dimmed logo announces nothing */
.awg-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.awg-soon__note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink);
}

/* ---- the games ----
   One card per game, holding the screenshot and its copy together: the phone
   in one half, the words centred against it in the other. The phone swaps
   sides each card, so the stack reads as a zigzag rather than a column of
   screenshots with a column of text beside it. */
.awg-modes__title { text-align: center; }
.awg-modes__list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.awg-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) clamp(var(--s-4), 7vw, var(--s-6));
  align-items: center;
  padding: var(--panel-pad);
  border-radius: var(--radius);
  background: var(--bg-card);
}
/* the copy leads in the source; here the odd cards put the phone first */
.awg-mode:nth-child(odd) .awg-mode__shot { order: -1; }

.awg-mode__shot {
  display: flex;
  justify-content: center;
}

/* A simulator screenshot is a bare rectangle; the radius gives it a screen's
   corners (an iPhone 17 Pro's are about 13% of its width). The screen is
   black and the card nearly so, so a hairline ring draws the phone's edge
   and the shadow lifts it. Width is capped so the shot never outgrows a real
   phone. */
.awg-mode__shot img,
.awg-mode__shot video {
  display: block;
  width: min(100%, 300px);
  height: auto;
  border-radius: 13% / 6%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.awg-mode__copy {
  max-width: 46ch;
  justify-self: center;
}

/* a small pill over the title: whether this game costs anything is the first
   thing a reader wants to know about it */
.awg-mode__tag {
  display: inline-block;
  margin: 0 0 var(--s-2);
  padding: 4px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.awg-mode__tag--free {
  border-color: transparent;
  background: rgba(170, 241, 0, 0.14);
  color: var(--awg-green);
}

.awg-mode__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
}
/* the line from the app's own paywall, set as the game's strapline */
.awg-mode__line {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
}
.awg-mode__text {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}

/* ---- features ----
   Two tiles side by side, copy under each: a bold lead-in running straight
   into a dim sentence, the Apple product-page pattern. */
.awg-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-3);
  align-items: start;
}
.awg-feature__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.awg-feature__copy {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--ink-dim);
}
.awg-feature__copy strong {
  font-weight: 500;
  color: var(--ink);
}

/* ---- the leaderboard tile ----
   LeaderboardBoardView, in CSS. Every number is the app's design token at
   the phone it was drawn for: rows 62 tall (a 54 avatar in 4 of padding,
   which is the ring), 8 apart, from 124 wide to 48 short of the well's edge,
   in a well of 10% white with 38px corners that crops the first and last row.
   Colours are DesignSystem.swift's: the leader's yellow, the player's white,
   and the friend palette in slot order. */
.awg-board {
  --awg-row-min: 124px;
  --awg-row-gap-right: 48px;
  --awg-avatar: 54px;
  --awg-row-pad: 4px;
  --awg-chip: calc(var(--awg-avatar) + var(--awg-row-pad) * 2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 363px);
  /* hugs its rows: the app's well is a fixed 412 with room for more friends,
     but here the board is the whole tile and the air under the last row was
     only air (Evan, 2026-09-23). Its height now lands on the Daily card's. */
  overflow: hidden;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.10);
}

.awg-row {
  --awg-target: calc(var(--awg-row-min) + (100% - var(--awg-row-min) - var(--awg-row-gap-right)) * var(--f));
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--awg-target);
  height: var(--awg-chip);
  padding: var(--awg-row-pad);
  padding-left: 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--awg-fill);
  color: #000;
}
.awg-row--leader { --awg-fill: #e1f100; --awg-mark: #e1f100; }
.awg-row--you    { --awg-fill: #fff;    --awg-mark: #fff; }
.awg-row--orange { --awg-fill: #ff4200; --awg-mark: #ff4200; }
.awg-row--blue   { --awg-fill: #6781d3; --awg-mark: #6781d3; }
.awg-row--green  { --awg-fill: var(--awg-green); --awg-mark: var(--awg-green); }

.awg-row__type {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}
.awg-row__score {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.awg-row__label {
  font-size: 15px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* black, with the mark in the row's own colour, so the avatar reads as part of
   its bar rather than as a chip sitting on one */
.awg-row__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--awg-avatar);
  height: var(--awg-avatar);
  border-radius: 50%;
  background: #000;
  color: var(--awg-mark);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.awg-row__avatar img { display: block; }

/* the average: a dashed line from the axis to where the score sits, a tick
   there, and the number with its label beside it */
.awg-average {
  --awg-x: calc(var(--awg-row-min) + (100% - var(--awg-row-min) - var(--awg-row-gap-right)) * var(--f));
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.awg-average__line {
  width: var(--awg-x);
  height: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.6);
}
.awg-average__tick {
  flex: 0 0 auto;
  width: 4px;
  height: 24px;
  background: #fff;
}
.awg-average__label {
  margin-left: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.awg-average__label b { font-weight: 600; color: #fff; }

/* The deal, as the app plays it: every bar starts as its avatar's chip on the
   axis and grows to its score, top to bottom on a 60ms stagger, and its type
   appears once it has landed (450ms, no bounce). The average's line grows the
   same way with the tick riding its end. --i is the row's place in the deal. */
/* Collapsed only once the script has armed it, so a page without the script
   (or before it runs) shows the finished board rather than a column of chips. */
.awg-board.is-armed:not(.is-dealt) .awg-row { width: var(--awg-chip); }
.awg-board.is-armed:not(.is-dealt) .awg-average__line { width: 0; }
.awg-board.is-armed:not(.is-dealt) .awg-row__type,
.awg-board.is-armed:not(.is-dealt) .awg-average__label { opacity: 0; }
.awg-row,
.awg-average__line {
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.06s);
}
.awg-row__type,
.awg-average__label {
  transition: opacity 0.2s ease-out calc(var(--i) * 0.06s + 0.45s);
}
@media (prefers-reduced-motion: reduce) {
  .awg-row, .awg-average__line, .awg-row__type, .awg-average__label { transition: none; }
}

/* ---- the Daily card tile ----
   DailyCard, in CSS, at the phone it was drawn for (393pt wide, 1pt = 1px):
   a 377 card with 48 corners, its 361 panel with 38, the 88 band at the top
   of the panel, the stat row, the standings line and Play. Everything the app
   sizes with a token is written here as that token's number. */
.awg-feature__tile--daily { padding: var(--s-3); }

.awg-daily {
  --awg-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: min(100%, 377px);
  padding: 16px 8px 8px;
  border-radius: 48px;
  background: #161616;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.30), 0 -1px 8px rgba(0, 0, 0, 0.22);
  font-family: var(--awg-sf);
  color: #fff;
}

.awg-daily__header {
  display: flex;
  align-items: center;
  height: 27px;
  padding: 0 24px;
}
.awg-daily__mark { display: block; width: 20px; height: 20px; margin-right: 12px; }
.awg-daily__title { font-size: 23px; line-height: 1; font-weight: 600; }
.awg-daily__info { margin-left: 6px; color: rgba(255, 255, 255, 0.6); }
/* the four labels in one grid cell, so the row is as wide as the widest and
   nothing shifts as they trade places */
.awg-daily__labels {
  display: grid;
  margin-left: auto;
  justify-items: end;
}
.awg-daily__label {
  grid-area: 1 / 1;
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.awg-daily__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  border-radius: 38px;
  overflow: hidden;
  background: #000;
}
/* the occasion's photo, cover from the top as the app fits it, under a flat
   15% dim; the four of them stacked so a crossfade is two opacities moving */
.awg-daily__backdrops {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.awg-daily__backdrops::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
.awg-daily__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.awg-daily__backdrop.is-on,
.awg-daily__label.is-on { opacity: 1; }
.awg-daily__panel > :not(.awg-daily__backdrops) { position: relative; z-index: 1; }

/* the band: 88 tall flush with the panel's top, the time bar's empty track
   over the photo, top corners the panel's own. The strip runs to the panel's
   edges and fades out over 28 at each side. */
.awg-daily__band {
  display: flex;
  align-items: center;
  height: 88px;
  margin: -16px -16px 0;
  border-radius: 38px 38px 0 0;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* the artwork at 56 tall (4161 x 534, so 436.36 wide) with 16 of air after
   each copy: one unit is 452.36, and the strip moves a unit every 10.28s,
   which is the app's 44pt/s. Two copies, so the second is in place when the
   first has gone. Never paused; the app's does not stop either. */
.awg-daily__marquee {
  display: flex;
  flex: 0 0 auto;
  animation: awg-marquee 10.28s linear infinite;
}
.awg-daily__marquee img {
  display: block;
  width: 436.36px;
  height: 56px;
  margin-right: 16px;
}
@keyframes awg-marquee {
  to { transform: translateX(-452.36px); }
}

.awg-daily__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: center;
}
.awg-daily__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.awg-daily__value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.awg-daily__value img { display: block; height: 19px; width: auto; }
.awg-daily__stat-label {
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
}

/* the standings line: a 52 capsule of glass, the 8 track inset 24, dots whose
   centres run from 26 in to 26 short of the end, the median's tick */
.awg-daily__bar {
  position: relative;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.awg-daily__track {
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.awg-daily__median {
  position: absolute;
  top: 18px;
  left: calc(26px + (100% - 52px) * var(--p));
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}
.awg-daily__dot {
  position: absolute;
  top: 12px;
  left: calc(26px + (100% - 52px) * var(--p));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 2px solid var(--awg-ring);
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}
.awg-daily__dot--orange { --awg-ring: #ff4200; }
.awg-daily__dot--blue   { --awg-ring: #6781d3; }
.awg-daily__dot--green  { --awg-ring: var(--awg-green); }
/* the player: solid white, no ring, the glyph black */
.awg-daily__dot--you { border: 0; background: #fff; color: #000; }

.awg-daily__play {
  margin-top: -8px; /* 12 under the line, not the panel's 20 */
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 40px;
  background: #fff;
  color: #000;
  font-size: 17px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  /* held still, as the app holds it; the looks still trade places, which is
     only opacity */
  .awg-daily__marquee { animation: none; }
}

/* ---- unlock ----
   Price on the left, the three steps on the right: free, try, buy, in the
   order a player meets them. */
.awg-unlock__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5) clamp(var(--s-4), 7vw, var(--s-6));
  align-items: start;
}

.awg-unlock__price {
  margin: var(--s-4) 0 0;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--fs-heading-weight);
}
.awg-unlock__once {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--ink-dim);
}
.awg-unlock__fine {
  margin: var(--s-3) 0 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-faint);
}

.awg-unlock__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: awg-step;
}
.awg-unlock__step {
  counter-increment: awg-step;
  display: grid;
  grid-template-columns: var(--s-4) minmax(0, 1fr);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.awg-unlock__step:last-child { border-bottom: 1px solid var(--hairline); }
.awg-unlock__step::before {
  content: counter(awg-step);
  grid-row: 1 / span 2;
  font-size: var(--fs-small);
  line-height: calc(var(--lh-h4) * var(--fs-h4)); /* sits on the title's line */
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.awg-unlock__title {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fs-heading-weight);
}
.awg-unlock__text {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}

@media (max-width: 860px) {
  /* one column, in source order: the words, then the phone they describe */
  .awg-mode {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-4) var(--s-3);
  }
  .awg-mode:nth-child(odd) .awg-mode__shot { order: 0; }
  .awg-mode__copy { justify-self: start; }
  .awg-mode__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .awg-mode__line { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .awg-mode__shot img,
  .awg-mode__shot video { width: min(100%, 260px); }

  .awg-unlock__grid { grid-template-columns: minmax(0, 1fr); }
  .awg-download__grid { grid-template-columns: minmax(0, 1fr); }
  .awg-features__grid { grid-template-columns: minmax(0, 1fr); }
  .awg-feature__tile { padding: var(--s-3); }
}