/* Reset, the font, the body, the focus ring, and the primitives every page uses: .btn (.btn-gold .btn-white .btn-ghost), .pill, .badge (.badge-new .badge-members
   .badge-time .badge-soon), .card with its hover lift, .fade-bottom and .fade-left, .gold-text, .pic (a picture over its placeholder). Only transform and opacity
   move (plus colour on text, buttons and chips); the press and the hover lift are the script's springs (public/js/lib/press.js). */
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
#app { container: page / inline-size; position: relative; overflow-x: clip; flex: 1 0 auto; }
/* The client draws #app after its scripts arrive; until it has, the footer is hidden: it would stand at the foot of the first screen and then be pushed down by the page (a layout shift of the largest
   element on the home, 0.169 in Lighthouse). A hidden element is not a shift. The documents (privacy, terms) and the 404 have no #app. */
@media (scripting: enabled) { #app:empty ~ .site-footer { visibility: hidden; } }   /* (with scripts off #app stays empty for good: the footer stays) */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, canvas, svg { display: block; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.probe { display: none; }
/* Shown from the wide layout up only: hidden here by a rule that outranks any one class, shown again by the page's wide block (`.thing.wide-only`) */
.wide-only.wide-only { display: none; }
#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* what the script's press() adds to everything that presses: no grey tap flash, no double-tap-to-zoom wait, no ghost image drag. The press itself (scale, the
   spring back) is the script's, from the first frame of the touch (public/js/lib/press.js). */
.press { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-drag: none; user-select: none; cursor: pointer; }

.gold-text {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the fades pictures take into the page */
.fade-left { -webkit-mask-image: var(--mask-left); mask-image: var(--mask-left); }
.fade-bottom { -webkit-mask-image: var(--mask-bottom); mask-image: var(--mask-bottom); }
/* both on one element: the two fades compose (a picture that fades on its left and its bottom); a page that wants one of them only sets the other's custom
   property to --mask-all for that layout */
.fade-left.fade-bottom { -webkit-mask-image: var(--mask-left), var(--mask-bottom); mask-image: var(--mask-left), var(--mask-bottom); -webkit-mask-composite: source-in; mask-composite: intersect; }

/* a picture over its blurred placeholder: it fades up when it has loaded, in its own compositor layer */
.pic { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.pic picture { display: contents; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateZ(0); transition: opacity var(--picture-fade-ms) ease-out; }
.pic.is-loaded img { opacity: 1; }

/* buttons: Baloo 2 sits high in its line box, so the padding is a point heavier under the words (the mockups' own 9px 18px 7px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: var(--radius-btn); font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap; transition: color var(--fade-ms), background-color var(--fade-ms), border-color var(--fade-ms); }
.btn svg { flex: none; width: 22px; height: 22px; }
.btn-gold { background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 800; }
.btn-white { background: #fff; color: var(--ink); }
.btn-ghost { background: rgba(110, 110, 115, .55); color: #fff; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-white:hover { background: var(--softer); }
.btn-ghost:hover { background: rgba(130, 130, 135, .6); }

/* the Get the game chip: a pill on a phone, the same gold as a rectangle on a wide page (the mockups' top bars) */
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; padding: 6px 12px 4px; border-radius: 999px; transition: background-color var(--fade-ms); }
.pill svg { width: 13px; height: 13px; margin-top: -2px; }
.pill:hover { background: var(--gold-hi); }
@container page (min-width: 700px) {
  .pill { gap: 8px; font-size: 16px; padding: 9px 18px 7px; border-radius: var(--radius-btn); }
  .pill svg { width: 15px; height: 15px; }
  .pill.wide-only { display: inline-flex; }
}

/* the badges on a card (11 px on the wide cards, 10 px on the phone's) */
.badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; white-space: nowrap; }
.badge-new { background: var(--red); color: #fff; }
.badge-members { background: rgba(10, 10, 11, .8); color: var(--gold); border: 1px solid rgba(255, 197, 61, .6); }
.badge-time, .badge-soon { background: #fff; color: var(--ink); }

/* a card: the poster (a picture, PART N, a badge, and on a wide page the show's name) and, on a wide page, its caption. It lifts on hover and presses on touch:
   the transform is the script's spring; the deeper shadow is a layer under the poster whose opacity follows .is-lifted */
.card { position: relative; flex: 0 0 var(--card-w); width: var(--card-w); display: block; border-radius: var(--radius-card); }
.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--card-h); border-radius: inherit; box-shadow: 0 22px 40px rgba(0, 0, 0, .7), 0 6px 14px rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--fade-ms) ease-out; pointer-events: none; }
.card.is-lifted::before { opacity: 1; }
.poster { position: relative; display: block; width: 100%; height: var(--card-h); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); transform: translateZ(0); }
.card:focus-visible { outline: none; }
.card:focus-visible .poster { outline: 2px solid var(--gold); outline-offset: 3px; }
.card-label { position: absolute; z-index: 2; font-family: var(--display); font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.card-label span { color: var(--gold); }
.card-caption { display: block; margin-top: 9px; font-size: 14px; color: var(--soft); }
.card-caption b { color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pic img, .card::before { transition-duration: var(--fade-ms); }
}

/* ---- the site footer (src/render.ts footerHtml): after #app on every shell. art/ui/web/watch/desktop.html draws it at 1440: a rule, then one row (the social line, sixaroo.com, Privacy, Terms, Contact,
   and the year pushed to the right) at 14 px, 28 px between its parts and 16 between the networks. The page above supplies the gap over the rule (the home's 64 px of bottom padding is the mockup's
   margin). Below 760 px the row does not fit (it needs 670 px of the width less the margins), and no frame draws it: the same pieces stacked, on the page's own margin (the top bar's: 22 px on a phone,
   clamp(24px, 4.4444cqw, 64px) from 700). Its width is its own container (`foot`), so that margin is the one the top bar has. ---- */
.site-footer { container: foot / inline-size; flex: none; }
.sf { margin: 0 22px; padding: 22px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #222; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; }
.sf nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sf-social { color: var(--softer); font-weight: 600; }
.sf a { position: relative; display: block; padding: 5px 0; transition: color var(--fade-ms); }
.sf a:hover { color: #fff; }
/* a touch target of 44 px, from a pseudo-element: the rows stay the height of their words (the gate's boxes and ink do not move). The social line and the links are 10 px apart, which cannot
   hold two 44 px targets, so each takes 13 px on its outer side and 5 on the side that faces the other row (26 + 18 = 44); across, 8 px each side (the links are 16 px apart) */
.sf a::after { content: ""; position: absolute; inset: -5px -8px -13px; }
.sf-social a::after { inset: -13px -8px -5px; }
@container foot (min-width: 700px) { .sf { margin-inline: clamp(24px, 4.4444cqw, 64px); } }
@container foot (min-width: 760px) {
  .sf { padding: 28px 0 40px; flex-direction: row; align-items: center; gap: 28px; }
  .sf .sf-links { gap: 0 28px; }
  .sf a { padding: 0; }
  .sf .sf-social a::after, .sf .sf-links a::after { inset: -14px -8px; }                  /* one row: 16 + 28 */
  .sf-copy { margin-left: auto; }
}

/* ---- the top bar ------------------------------------------------------------------------------------------------------------------ */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; padding: 8px var(--pad) 0; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 30px; width: auto; }
.brand-watch { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .22em; color: var(--gold); padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); line-height: 22px; }
.nav-links { gap: 26px; margin-left: 44px; font-size: 15px; color: var(--soft); }
.nav-links .on { color: #fff; font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-slot { position: relative; display: flex; }
.nav-slot a { display: block; font-size: 15px; font-weight: 600; transition: opacity var(--fade-ms) ease-out; }
/* "Account" is wider than "Sign in": it stands in the slot's place and runs left into the gap, so the button beside it never moves when the answer arrives */
.nav-account { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; opacity: 0; pointer-events: none; }
.nav-slot.is-member .nav-signin { opacity: 0; pointer-events: none; }
.nav-slot.is-member .nav-account { opacity: 1; pointer-events: auto; }
.nav { --pad: 22px; }

@container page (min-width: 700px) {
  .nav { --pad: clamp(24px, 4.4444cqw, 64px); height: 76px; padding: 0 var(--pad); background: linear-gradient(180deg, rgba(10, 10, 11, .85), rgba(10, 10, 11, 0)); }
  .brand-logo { height: 44px; }
  .brand-watch.wide-only { display: block; }
  .nav-links.wide-only { display: flex; }
  .nav-slot.wide-only { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-slot a { transition-duration: var(--fade-ms); }
}

/* ---- the drop clock (public/js/lib/countdown.js): DAYS : HRS : MIN : SEC cells; the home's pre-drop hero and a part's page draw it, each at its own mockup's size ----------- */
.clock { display: flex; align-items: center; gap: 8px; }
.clock-cell { width: 74px; height: 74px; border-radius: var(--radius-big); background: #17171b; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clock-num { display: flex; overflow: hidden; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; }
.digit { position: relative; display: inline-block; }
.digit-old { position: absolute; left: 0; top: 0; }
.clock-cell small { font-size: 10px; letter-spacing: .14em; color: var(--faint); margin-top: 3px; }
.clock-colon { font-family: var(--display); font-weight: 800; font-size: 22px; color: #52525b; margin-top: -8px; }