/* ==========================================================================
   Modes Design System
   Scoped stylesheet for the modes redesign (index-modes.html, scorekeeping.html,
   stat-tracking.html, shot-mapping.html). Tokens come from the design handoff in
   Assets/Prototypes/design_handoff_gameon_homepage_modes/README.md and are
   intentionally separate from the tokens in styles.css so the existing pages are
   unaffected. Everything here is namespaced under .modes-page.
   ========================================================================== */

.modes-page {
  --color-bg: #000000;
  --color-surface: #141414;
  --color-text: #f5f5f5;

  --color-accent: #22b573;
  --color-accent-100: #e8f8f1;
  --color-accent-200: #c6eedb;
  --color-accent-300: #93e2bf;
  --color-accent-400: #55cca2;
  --color-accent-500: #22b573;
  --color-accent-600: #1b965f;
  --color-accent-700: #16774c;
  --color-accent-800: #11593a;
  --color-accent-900: #0a3a27;

  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e0e0e0;
  --color-neutral-300: #c2c2c2;
  --color-neutral-400: #a0a0a0;
  --color-neutral-500: #808080;
  --color-neutral-600: #606060;
  --color-neutral-700: #454545;
  --color-neutral-800: #2a2a2a;
  --color-neutral-900: #161616;

  --color-divider: color-mix(in srgb, #f5f5f5 14%, transparent);
  --color-accent-tint: color-mix(in srgb, #22b573 12%, transparent);

  /* Russo One and Francois One each ship weight 400 only, no italic. Anything
     asking for a different weight gets a synthesised fake bold/italic, so
     weight is pinned to 400 everywhere they're used; elements that need a
     real weight range (nav, buttons, form controls, data widgets) use
     --font-ui instead. See STYLE_GUIDE.md's Typography section. */
  --font-heading: "Russo One", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Francois One", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Interface type stays Inter. It carries the full weight range buttons and
     controls rely on, which the single-weight display faces do not. */
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Section-heading size, shared by .modes-h2 and the .mode-h3 headings on the
     mode pages so every heading in that stretch of the page reads at one size. */
  --font-size-section: clamp(22px, 3.2vw, 30px);
}

/* Base -------------------------------------------------------------------- */

.modes-page * {
  box-sizing: border-box;
}

.modes-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.modes-page ::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.modes-page :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.modes-page img {
  max-width: 100%;
  display: block;
}

.modes-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typography helpers ------------------------------------------------------ */

.modes-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 8px;
}

.modes-h2 {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: var(--font-size-section);
  line-height: 1.2;
  margin: 0 0 28px;
}

/* Buttons ----------------------------------------------------------------- */

.modes-btn {
  display: inline-flex;
  align-items: center;
  /* Not --font-heading: that is Russo One now, which ships weight 400 only, so
     the 500 below was being faked by the browser. */
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 12px 20px;
  text-decoration: none;
  background: transparent;
  transition: background 0.18s ease;
}

.modes-btn:hover,
.modes-btn:focus-visible {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.modes-btn--sm {
  font-size: 13px;
  padding: 8px 14px;
}

.modes-btn--md {
  padding: 10px 18px;
}

.modes-btn--lg {
  font-size: 15px;
  padding: 13px 22px;
}

.modes-btn--neutral {
  color: var(--color-text);
  border-color: var(--color-divider);
}

.modes-btn--neutral:hover,
.modes-btn--neutral:focus-visible {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}

/* Nav --------------------------------------------------------------------- */

#nav-sentinel {
  height: 1px;
}

.modes-nav {
  /* Nav links, the dropdown toggle, and badges below need real weights
     (500/600) that the single-weight display/body faces can't provide, so
     the nav stays on --font-ui rather than inheriting --font-body. */
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
  transition:
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modes-nav.is-floating {
  max-width: 1100px;
  margin: 12px auto;
  padding: 20px 24px;
  border-radius: 999px;
  border-bottom-color: transparent;
  top: 10px;
  background: color-mix(in srgb, var(--color-surface) 35%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px var(--color-accent-tint);
}

.modes-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 9999px;
  border: none;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.modes-logo img {
  height: 38px !important;
  width: auto;
  display: block;
  transition: filter 0.2s ease;
}

.modes-logo:hover,
.modes-logo:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform: translateY(-1px);
}

.modes-logo:hover img,
.modes-logo:focus-visible img {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 60%, transparent));
}

.modes-nav-links {
  display: flex;
  flex: 1;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.modes-nav-links > a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-300);
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.modes-nav-links > a:hover,
.modes-nav-links > a:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform: translateY(-1px);
}

.modes-btn--primary,
.modes-nav .modes-btn {
  background: var(--color-accent);
  color: #000000;
  border-radius: 9999px;
  border: none;
  font-weight: 600;
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.modes-btn--primary:hover,
.modes-btn--primary:focus-visible,
.modes-nav .modes-btn:hover,
.modes-nav .modes-btn:focus-visible {
  background: var(--color-accent);
  color: #000000;
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 80%, transparent);
  transform: translateY(-1px);
}

.modes-btn--primary:active,
.modes-nav .modes-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Pushes the CTA to the right end of the nav row. This belongs to the nav, not
   to .modes-btn--primary — that is a colour/shape variant, and an auto margin
   on it outranks justify-content, dragging every primary button that sits in a
   flex container over to the right. */
.modes-nav .modes-btn {
  margin-left: auto;
}

/* While the nav is one row, center the links on the pill itself rather than on
   the gap between logo and CTA — those differ in width, so flex centering
   leaves the group visibly off-center. Taking the links out of flow centers
   them on the nav (which is sticky, so it's the containing block). Below 680px
   the links get their own row and center normally. */
@media (min-width: 681px) {
  .modes-nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
  }
}

/* Nav dropdown ------------------------------------------------------------- */

.modes-dropdown {
  position: relative;
}

.modes-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-300);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.modes-dropdown-toggle:hover,
.modes-dropdown-toggle:focus-visible,
.modes-dropdown:hover .modes-dropdown-toggle {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform: translateY(-1px);
}

.modes-dropdown-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}

.modes-dropdown:hover .modes-dropdown-chevron,
.modes-dropdown:focus-within .modes-dropdown-chevron {
  transform: rotate(180deg);
}

.modes-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 16px;
  border: 1px solid var(--color-accent-tint);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 60;
}

.modes-dropdown:hover .modes-dropdown-menu,
.modes-dropdown:focus-within .modes-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.modes-dropdown-menu a,
.modes-dropdown-menu .modes-dropdown-soon {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  color: var(--color-neutral-300);
  border-radius: 10px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.modes-dropdown-menu a:hover,
.modes-dropdown-menu a:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
  transform: translateX(3px);
}

.modes-dropdown-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0.45;
  cursor: default;
}

.modes-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  white-space: nowrap;
}

/* Hero -------------------------------------------------------------------- */

.modes-hero {
  /* The nav is sticky with only a hairline border under it, so with no top
     padding the video frame's edge sat flush against it. Scales with the
     viewport rather than stepping at a breakpoint. */
  padding: clamp(32px, 4.5vw, 72px) 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* Top-aligned, not centred: centring floated the copy column down so the
     eyebrow sat ~70px below the video's top edge. flex-start lines the eyebrow
     up with the top of the frame. */
  align-items: flex-start;
}

.modes-hero-copy {
  flex: 1 1 480px;
  min-width: 0;
  /* Optical nudge off the frame's top edge. Dead-flush read a touch high, partly
     because the frame's masked edge fades in rather than starting hard. */
  margin-top: 20px;
  /* Size container so the hero lockup can scale off this column's real width
     (cqi) instead of the viewport. vw guesses wrong the moment the flex row
     rebalances or wraps; cqi cannot. */
  container-type: inline-size;
}

.modes-hero-copy .modes-eyebrow {
  margin-bottom: 14px;
}

.modes-h1 {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: clamp(30px, 6.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.modes-lead {
  font-size: 16px;
  line-height: 1.6;
  /* Francois One reads heavier than Inter, so the neutral-300 grey used
     elsewhere looks muddy set in it; full white keeps body copy legible. */
  color: var(--color-text);
  max-width: 46ch;
  margin: 0 0 24px;
}

.modes-hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Sport availability row */

.modes-sports {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.modes-sport {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.modes-sport--soon {
  color: var(--color-neutral-400);
}

.modes-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  border: 1px solid var(--color-neutral-600);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Hero poster / video panel */

.modes-demo {
  flex: 1 1 490px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modes-demo-video {
  --feather-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><filter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'><feGaussianBlur stdDeviation='2.6'/></filter></defs><rect x='3' y='3' width='94' height='94' rx='9' ry='9' fill='white' filter='url(%23f)'/></svg>");
}

.modes-demo-frame {
  position: relative;
  aspect-ratio: 1 / 1; /* matches the 1080x1080 hero video — no cover-crop */
  /* Invisible while the mask above is doing the rounding; it is the fallback if a
     browser drops the SVG mask, so keep it roughly in step with --feather-round. */
  border-radius: 48px;
  overflow: hidden;
  background: var(--color-bg);
}

.modes-demo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No fade-in: the poster attribute already covers the pre-decode frame, and a
     JS-driven fade would leave reduced-motion users staring at an empty box. */
}

/* Edge feather + corner rounding, done in one mask.
   The clip has a navy backdrop and the page is pure black, so a hard-edged panel
   reads as a pasted-on rectangle. Masking the video (rather than laying black over
   it) dissolves its edges so the page shows through — the only way to actually
   reach #000, since translucent black on navy never quite gets there.
   The mask is a blurred rounded rect rather than crossed linear gradients: with a
   rectangular feather, border-radius does nothing visible, because the corner
   pixels it clips have already been faded to transparent. Here the rounding is
   part of the mask, so it actually shows.
   --feather-blur softens the edge, --feather-round sets the corner (both in
   viewBox units, i.e. percent of the panel). --feather-inset pulls the whole shape
   in so the blur has room to fall off inside the element. */
.modes-demo-video {
  --feather-blur: 2.6;
  --feather-round: 9;
  --feather-inset: 3;
  -webkit-mask-image: var(--feather-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--feather-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Corner falloff on top of the box feather, plus a floor under the chapter bar so
   it always has something to sit against. */
.modes-demo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 92% 92% at 50% 50%,
    transparent 74%,
    rgba(0, 0, 0, 0.38) 100%
  );
}

.modes-demo-chapters {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.modes-demo-chapter {
  flex: 1 1 auto; /* overridden inline with each chapter's real share */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 0; /* pad the top so the hit target clears 24px */
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--color-neutral-300);
  -webkit-tap-highlight-color: transparent;
}

.modes-demo-chapter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1;
  transition: color 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modes-demo-chapter.is-active .modes-demo-chapter-label {
  color: var(--color-accent);
}

.modes-demo-chapter-track {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5f5f5 24%, transparent);
  overflow: hidden;
  transition: height 0.2s ease;
}

.modes-demo-chapter:hover .modes-demo-chapter-track,
.modes-demo-chapter:focus-visible .modes-demo-chapter-track {
  height: 5px;
  background: color-mix(in srgb, #f5f5f5 38%, transparent);
}

.modes-demo-chapter:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.modes-demo-chapter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--color-accent);
  transform-origin: left center;
}

/* The fill is nudged by timeupdate (~4/sec), so it needs a short transition to
   look continuous — but only while playing, or seeking visibly lags the click. */
.modes-demo-chapters.is-playing .modes-demo-chapter-fill {
  transition: width 0.28s linear;
}

@media (prefers-reduced-motion: reduce) {
  .modes-demo-chapter-fill,
  .modes-demo-chapters.is-playing .modes-demo-chapter-fill {
    transition: none;
  }
}

.modes-demo-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border: 1px solid var(--color-accent-800);
  border-radius: 6px;
  padding: 5px 9px;
}

.modes-demo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  display: block;
  animation: modes-pulse 1.8s ease-in-out infinite;
}

@keyframes modes-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* Modes list -------------------------------------------------------------- */

/* Lifted off the black page background so this section reads as its own block.
   Contained rather than full-bleed: the section sits inside .modes-shell, and
   breaking out of it needs 100vw tricks that overflow by the scrollbar width
   and risk the sticky nav. */
.modes-list {
  padding: 64px clamp(18px, 3vw, 32px) 40px;
  background: var(--color-surface);
  border-radius: 16px;
}

.modes-list .modes-h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  margin-bottom: 40px;
  max-width: 34ch;
}

.modes-row {
  display: grid;
  /* Media column carries animating artifacts now, not thumbnails, so it takes a
     real share of the row instead of a 240px strip. The shot-drop artifact is a
     rigid 640x520 that can only be scaled, so its height is bought with width —
     these fractions size it to ~527px tall at desktop. */
  grid-template-columns: minmax(56px, 80px) minmax(0, 0.59fr) minmax(280px, 1fr);
  gap: 20px 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--color-divider);
}

.modes-row-media {
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 992 / 1072;
}

/* Artifact slots set their own height from content and sit on the page
   background — the poster aspect box and surface fill would both fight them. */
.modes-row-media--art {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}

.modes-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modes-row-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-accent);
  padding-top: 2px;
}

.modes-row-body {
  min-width: 0;
}

.modes-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-bottom: 6px;
}

.modes-row-title {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 24px;
  margin: 0 0 12px;
}

.modes-row-copy {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 66ch;
  margin: 0 0 14px;
}

.modes-row-best {
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 18px;
}

.modes-row-best strong {
  color: var(--color-neutral-200);
  font-weight: 400; /* inherits --font-body (Francois One), only weight;
                       emphasis carries through color instead */
}

/* Comparison table -------------------------------------------------------- */

.modes-compare {
  padding: 56px 0 8px;
}

.modes-table-scroll {
  overflow-x: auto;
}

.modes-table-scroll:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.modes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  min-width: 560px;
}

.modes-table th,
.modes-table td {
  border-bottom: 1px solid var(--color-divider);
}

.modes-table thead th {
  text-align: center;
  font-weight: 400; /* Russo One's only weight */
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text);
  padding: 0 4px 12px;
}

.modes-table thead th:first-child {
  text-align: left;
  width: 34%;
  padding: 0 6px 12px 0;
}

.modes-table thead th.is-current {
  color: var(--color-accent);
}

.modes-table tbody th {
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: var(--color-neutral-300);
  padding: 11px 6px 11px 0;
}

.modes-table tbody td {
  text-align: center;
  padding: 11px 4px;
}

.modes-table svg {
  display: inline-block;
}

.modes-icon-yes {
  fill: var(--color-accent);
}

.modes-icon-no {
  fill: var(--color-neutral-600);
}

/* FAQ --------------------------------------------------------------------- */

.modes-faq {
  padding: 64px 0 8px;
  max-width: 760px;
}

.modes-faq .modes-h2 {
  margin-bottom: 24px;
}

.modes-faq details {
  border-top: 1px solid var(--color-divider);
  padding: 16px 0;
}

.modes-faq summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.modes-faq summary::-webkit-details-marker {
  display: none;
}

.modes-faq summary::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-neutral-400);
  border-bottom: 2px solid var(--color-neutral-400);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.modes-faq details[open] summary::after {
  transform: rotate(-135deg);
}

.modes-faq p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-300);
  margin: 12px 0 0;
}

/* Final CTA band ---------------------------------------------------------- */

.modes-cta-band {
  padding: 80px 0 60px;
  border-top: 1px solid var(--color-divider);
  margin-top: 56px;
}

.modes-cta-headline {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

/* Footer ------------------------------------------------------------------ */

.modes-footer {
  padding: 40px 0;
  font-size: 13px;
  color: var(--color-neutral-500);
  border-top: 1px solid var(--color-divider);
}

.modes-footer-socials {
  display: flex;
  gap: 16px;
  align-items: center;
}

.modes-footer-socials a {
  color: var(--color-neutral-400);
  transition: color 0.18s ease;
  display: inline-flex;
}

.modes-footer-socials a:hover,
.modes-footer-socials a:focus-visible {
  color: var(--color-accent);
}

.modes-footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.modes-footer-legal-links {
  display: flex;
  gap: 16px;
}

.modes-footer-legal-links a {
  color: var(--color-neutral-400);
  text-decoration: none;
  transition: color 0.18s ease;
}

.modes-footer-legal-links a:hover,
.modes-footer-legal-links a:focus-visible {
  color: var(--color-accent);
}

/* Mode page --------------------------------------------------------------- */

.mode-hero {
  padding: 48px 0 32px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.mode-hero-copy {
  flex: 1 1 480px;
  max-width: 720px;
}

.mode-hero-media {
  flex: 0 1 320px;
  min-width: 240px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-neutral-800);
  aspect-ratio: 992 / 1072;
}

.mode-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Interactive artifact in a mode hero: it sizes itself (940x754 stage scaled
   to the column width), so it drops the fixed portrait frame. */
.mode-hero-media--art {
  flex: 1 1 560px;
  min-width: 280px;
  max-width: 940px;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}

/* Two independent columns: the hero copy and "What it does" stack on the left,
   the artifact and the feature list stack on the right. Columns flow on their
   own so the body copy starts right under the CTA instead of waiting for the
   full height of the artifact. */
.mode-split {
  padding: 48px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.mode-split-col {
  min-width: 0;
}

.mode-split-col--copy {
  flex: 1 1 420px;
  max-width: 720px;
}

.mode-split-col--art {
  flex: 1 1 560px;
  max-width: 940px;
}

/* Inside the split the old section paddings and column widths are the
   flex parent's job. */
.mode-split .mode-hero-media,
.mode-split .mode-body-main,
.mode-split .mode-body-side {
  flex: none;
  width: 100%;
  max-width: 100%;
}

.mode-split .mode-hero-copy {
  flex: none;
  max-width: 100%;
  margin-bottom: 40px;
}

/* Every artifact (scoreboard, cascade, shot-drop) centres itself in the art
   column, so the feature list sits as a block centred under it too — flush
   left under the animation read as an unrelated leftover. `align-items:
   center` only sizes and positions the heading and the <ul> as blocks; it
   doesn't touch the text-align inside them, so each bullet's icon + copy stay
   left-justified within that centred block. */
.mode-split .mode-body-side {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A 720px measure needs more than the 15px the narrower body column used, and
   the extra height also takes up some of the room beside the artifact. */
.mode-split .mode-body-main p {
  font-size: 18px;
  line-height: 1.8;
}

/* Runs the full shell width, edge to edge with the comparison table below it,
   rather than sitting in the narrow right-hand column. No measure cap here on
   purpose — matching the table's width is the point. */
.mode-audience {
  padding: 8px 0 0;
}

/* "What it does", "Feature list" and "Who it's for" all take the same size as
   "What each mode tracks." below them — one heading size down this whole
   stretch of the page. */
.mode-split .mode-h3,
.mode-audience .mode-h3 {
  font-size: var(--font-size-section);
  line-height: 1.2;
  margin-bottom: 16px;
}

.mode-audience p {
  font-size: 21px;
  line-height: 1.7;
  color: var(--color-neutral-300);
  margin: 0;
}

/* Stacked layout: copy first (it already leads in the DOM), art full width. */
@media (max-width: 900px) {
  .mode-hero,
  .mode-split {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .mode-hero-copy {
    order: 0;
    max-width: 100%;
  }

  .mode-hero-media {
    order: 1;
    align-self: center;
    width: 100%;
    max-width: 320px;
  }

  .mode-hero-media--art {
    max-width: 100%;
  }

  /* The audience line is sized to fill a 1280px row; on a phone that is just
     oversized body copy. (The heading follows --font-size-section, which already
     steps down on its own.) */
  .mode-audience p {
    font-size: 18px;
  }
}

.mode-hero .modes-eyebrow {
  margin-bottom: 14px;
}

.mode-hero .modes-h1 {
  font-size: clamp(30px, 5.5vw, 48px);
  line-height: 1.1;
}

.mode-hero p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  margin: 0 0 28px;
}

.mode-body {
  padding: 16px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.mode-body-main {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 66ch;
}

.mode-body-side {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

.mode-h3 {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 22px;
  margin: 0 0 14px;
}

.mode-body-main p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-300);
  margin: 0 0 14px;
}

.mode-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-200);
}

.mode-features svg {
  flex: none;
  margin-top: 3px;
  fill: var(--color-accent);
}

.mode-body-side > .mode-h3:last-of-type {
  margin-bottom: 12px;
}

.mode-body-side p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-neutral-300);
  margin: 0;
}

.mode-signup {
  padding: 64px 0 48px;
  border-top: 1px solid var(--color-divider);
  margin-top: 48px;
}

.mode-signup .modes-h2 {
  margin-bottom: 14px;
}

.mode-signup p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  margin: 0 0 24px;
  max-width: 56ch;
}

.mode-others {
  padding: 16px 0 56px;
  border-top: 1px solid var(--color-divider);
}

.mode-others-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 24px 0 16px;
}

.mode-others-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mode-other-card {
  flex: 1 1 240px;
  min-width: 220px;
  text-decoration: none;
  display: block;
  padding: 18px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-surface);
  transition: border-color 0.18s ease;
}

.mode-other-card:hover,
.mode-other-card:focus-visible {
  border-color: var(--color-accent-800);
}

.mode-other-card .modes-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.mode-other-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 17px;
  color: var(--color-text);
}

/* Pricing Page ------------------------------------------------------------ */

.pricing-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.pricing-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-300);
  margin: 0 auto 28px;
  max-width: 54ch;
}

.pricing-toggle-wrap {
  display: inline-flex;
  background: var(--color-surface);
  padding: 4px;
  border-radius: 30px;
  border: 1px solid var(--color-neutral-800);
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 20px;
}

.pricing-toggle-btn {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 10px 22px;
  border-radius: 24px;
  border: none;
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pricing-toggle-btn.active {
  background: var(--color-accent);
  color: #000;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-bottom: 32px;
}

/* Single-tier layout: keep the lone card from stretching the full row. Still
   narrower than the 1280px shell so it reads as one card rather than a banner,
   but close enough in weight to the full-width blocks under it. */
.pricing-grid--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* Nothing to choose between, so the card isn't interactive */
.pricing-grid--single .pricing-card {
  cursor: default;
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: 14px;
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pricing-card:hover {
  border-color: var(--color-neutral-600);
}

.pricing-card--featured,
.pricing-card--featured:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.pricing-card-title {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 16px;
}

.pricing-card--featured .pricing-card-title {
  color: var(--color-accent);
}

.pricing-card-price-wrap {
  margin-bottom: 6px;
}

.pricing-card-price-was {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400; /* Russo One's only weight */
  line-height: 1;
  color: var(--color-neutral-600);
  text-decoration: line-through;
  margin-right: 10px;
}

.pricing-card-save {
  display: inline-block;
  vertical-align: middle;
  background: var(--color-accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 12px;
  white-space: nowrap;
  margin-left: 10px;
}

.pricing-card-price {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 400; /* Russo One's only weight */
  line-height: 1;
  color: var(--color-text);
}

.pricing-card-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-neutral-400);
  margin-left: 6px;
}

.pricing-card-submeta {
  font-size: 12px;
  color: var(--color-neutral-500);
  margin-bottom: 20px;
}

.pricing-card-tagline {
  font-family: var(--font-ui); /* needs 600; --font-body is 400-only */
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-divider);
}

/* The card's copy is all left-aligned, so at the wider single-tier size a
   one-column list of short features left the right half empty. Two columns fill
   it and keep the card from running tall; auto-fit drops back to one column
   when the card narrows on small screens. */
.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 28px;
}

.pricing-card-features li {
  font-size: 14px;
  color: var(--color-neutral-300);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-card-features .check {
  font-family: var(--font-ui); /* needs 700; --font-body is 400-only */
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-score-box {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: 10px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 64px;
}

.pricing-score-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.pricing-score-heading {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.pricing-score-heading strong {
  font-weight: 400; /* inherits --font-heading (Russo One), only weight */
}

.pricing-score-box-right {
  font-size: 14px;
  color: var(--color-neutral-400);
}

.pricing-section-h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400; /* Russo One's only weight */
  margin: 0 0 6px;
}

.pricing-section-sub {
  font-size: 14px;
  color: var(--color-neutral-400);
  margin: 0 0 24px;
}

/* 64px matches the gap every other section on this page leaves. It was 48px
   while the callout banner sat in between and carried the rest of the spacing
   itself. */
.pricing-compare {
  margin-bottom: 64px;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.pricing-table th,
.pricing-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-divider);
}

.pricing-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-400);
}

.pricing-table tbody td {
  color: var(--color-neutral-300);
}

.pricing-volume {
  margin-bottom: 64px;
}

.pricing-volume-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
  min-width: 640px;
}

.pricing-volume-table th,
.pricing-volume-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--color-divider);
}

.pricing-volume-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-neutral-400);
  font-weight: 500;
}

.pricing-volume-table thead th:first-child,
.pricing-volume-table tbody td:first-child {
  font-family: var(--font-ui); /* needs 600; --font-body is 400-only */
  text-align: left;
  font-weight: 600;
}

/* Promo note under a row's plan name. On its own line so the plan name stays
   the thing you read first, and so the label column doesn't grow wide enough to
   push the price columns into the scroll region. */
.pricing-volume-table .vol-row-note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-accent);
}

.pricing-volume-table .val-accent {
  color: var(--color-accent);
}

.pricing-volume-table .talk-link {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.pricing-volume-table .talk-link:hover {
  text-decoration: underline;
}

.pricing-volume-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.pricing-cta-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-decoration: none;
}

.pricing-cta-link:hover {
  text-decoration: underline;
}

/* Request Demo Form -------------------------------------------------------- */

.demo-hero {
  padding: 48px 0 24px;
  text-align: center;
}

.demo-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-300);
  margin: 0 auto 36px;
  max-width: 52ch;
}

.demo-card {
  max-width: 640px;
  margin: 0 auto 64px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.demo-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-300);
}

.demo-input,
.demo-select,
.demo-textarea {
  /* A touch lighter than .demo-card's --color-surface so fields read as
     distinct wells rather than blending into the card behind them. */
  background: color-mix(in srgb, var(--color-surface) 100%, white 6%);
  border: 1px solid var(--color-neutral-800);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.demo-input:focus,
.demo-select:focus,
.demo-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.demo-textarea {
  resize: vertical;
  min-height: 100px;
}

.demo-submit {
  font-family: var(--font-ui); /* needs 700; --font-body is 400-only */
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 10px;
  cursor: pointer;
}

.demo-success {
  text-align: center;
  padding: 32px 20px;
  display: none;
}

.demo-success.is-visible {
  display: block;
}

.demo-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

/* request-demo.html's success icon is a plain "✓" glyph, styled by `color`
   above; early-access.html's is this SVG instead, so it needs `fill`. */
.demo-success-icon svg {
  fill: var(--color-accent);
}

.demo-success-h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400; /* Russo One's only weight */
  margin: 0 0 8px;
}

.demo-success-p {
  font-size: 14px;
  color: var(--color-neutral-300);
  max-width: 44ch;
  margin: 0 auto 24px;
}

/* Homepage Hero Update --------------------------------------------------- */

.modes-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.modes-hero-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-300);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  padding: 6px 18px;
}

/* Rotating headline ------------------------------------------------------- */

/* We use a CSS grid with a hidden placeholder to automatically size the line
   to the longest phrase, preventing hero jumping while avoiding excess blank space. */
.modes-h1-line {
  display: grid;
}

.modes-h1-line::after {
  /* Must stay the longest phrase the reel can show, otherwise the line resizes
     mid-spin and shoves the hero around. */
  content: "Illuminates Every Moment.";
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

.modes-h1-rotator-wrap {
  grid-area: 1 / 1;
}

/* Sub-header bloom — "slow swell".
   The word blooms into focus as a light switches on: blurred, over-exposed and
   loose in tracking at the start, resolving to normal. Replaces the slot-machine
   spin that used to live here.

   The sizer survives from that design and still earns its place: it is invisible
   but real inline text, so it gives the element its width — the line never
   resizes as the word changes — and its baseline, which is why the bloomed word
   sits on the same baseline as "Every" beside it without any font-metric
   guesswork. Must stay the WIDEST word in WORDS as rendered, not the longest by
   character count ("Moment." measures wider than "Playoff.").

   Values are the "slow swell" config from font-test.html. */
.modes-h1-reel {
  --bloom-blur: 20px;
  --bloom-bright: 2.2;
  --bloom-glow: 46px;
  --bloom-track: 0.13em;
  --bloom-dur: 3000ms;
  position: relative;
  display: inline-block;
}

.modes-h1-reel-sizer {
  visibility: hidden;
}

.modes-h1-bloom {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  animation: modes-h1-bloom-in var(--bloom-dur) cubic-bezier(0.4, 0, 0.15, 1) forwards;
  will-change: filter, opacity, letter-spacing;
}

@keyframes modes-h1-bloom-in {
  0% {
    opacity: 0;
    filter: blur(var(--bloom-blur)) brightness(var(--bloom-bright));
    letter-spacing: var(--bloom-track);
    text-shadow: 0 0 var(--bloom-glow) var(--color-accent);
  }
  55% {
    opacity: 1;
    filter: blur(0) brightness(calc(1 + (var(--bloom-bright) - 1) * 0.22));
    text-shadow: 0 0 calc(var(--bloom-glow) * 0.55) var(--color-accent);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    letter-spacing: -0.005em;
    text-shadow: 0 0 calc(var(--bloom-glow) * 0.12)
      color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modes-h1-bloom {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

/* Homepage hero lockup ----------------------------------------------------- */

/* The wordmark carries the block on one line and the rotating phrase sits under
   it as a tagline, so the headline fills the hero's copy column horizontally
   instead of stacking three short lines down it. Scoped to the modifier because
   .modes-hero .modes-h1 is also the "Be first to the hoop." heading on
   early-access.html, which should stay at its normal size. */
/* "GameOn!" measures ~4.1em wide at this tracking, so 23.5cqi fills the column
   almost exactly. The px cap stops it running away once the column is wide. */
.modes-h1--lockup {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: clamp(38px, 23.5cqi, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  /* Breathing room under the "Illuminates Every ___." line. Also gives the
     bloom's glow somewhere to fall off — at full strength it spreads ~46px, and
     at 14px it was landing on the paragraph below. */
  margin-bottom: 34px;
}

.modes-h1--lockup .modes-h1-mark {
  display: block;
  /* No green offset shadow — Russo One is heavier and wider than the Inter it
     replaced, and the hard second layer read as clutter against it. Set
     --mark-shadow (e.g. 0.045em 0.045em 0 var(--color-accent)) to bring it back. */
  text-shadow: var(--mark-shadow, none);
}

/* The longest phrase the rotator can show ("Sharpens the Resolution of Every
   Game.") measures ~18.1em, so it fits on one line at up to ~5.5cqi. 5cqi keeps
   ~10% headroom for metric differences, and nowrap enforces the rest — the
   tagline must never break to two lines. Sized off the container rather than
   the wordmark so the guarantee holds even when the wordmark hits its cap.
   The negative margin pulls it up through the wordmark's half-leading, which is
   dead space no amount of positive tightening can remove. */
.modes-h1--lockup .modes-h1-line {
  font-size: clamp(14px, 5cqi, 34px);
  font-weight: 400; /* inherits --font-heading (Russo One), only weight */
  line-height: 1.15;
  letter-spacing: -0.005em;
  white-space: nowrap;
  margin-top: -0.1em;
}

.gradient-resolution {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-reality {
  background: linear-gradient(135deg, #c084fc 0%, #34d399 50%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sits above the wordmark as the hero's eyebrow, on one line: "There are games •
   There are plays • But there are moments". Wrapping is still allowed as a
   fallback rather than letting the row overflow the column. */
.modes-hero-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* No column gap: the separator bullet carries its own margins, so the space
     around it stays symmetric. Row gap still applies when the list wraps. */
  gap: 8px 0;
}

/* Uppercase runs ~12% wider than the mixed case it replaces, so the size stays
   well below the lead paragraph — it reads as a kicker, not a headline. */
/* Deliberately not a flex container. As flex, each child became its own item, so
   the accent word sat a 10px flex gap away while the words inside the phrase were
   a 3.6px word space apart — the same sentence spaced two different ways. Inline
   flow gives every word the one natural space. */
.modes-hero-highlights li {
  font-family: var(--font-ui); /* needs 600; --font-body is 400-only */
  font-size: clamp(10px, 1.8cqi, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Each bullet leads its own item in the markup, so hiding the first one turns
   the remaining two into separators between the three phrases. */
.modes-hero-highlights li:first-child .bullet-green {
  display: none;
}

/* Drawn as a box rather than the • glyph. The glyph sat low because
   vertical-align: middle centres against the x-height, and this row is all caps —
   its optical centre is half the CAP height above the baseline, which is higher.
   As a box the position is ours to state outright instead of inheriting whatever
   the font happens to do.
   Sizing in em keeps it locked to the row as the font-size clamps across
   breakpoints; the span keeps the inherited font-size so em means the row's size. */
.modes-hero-highlights .bullet-green {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--color-accent);
  color: transparent; /* hides the literal • still in the markup */
  /* Solved against a cap-height probe rather than derived from font metrics: the
     span still contains the • character, so its baseline comes from that text and
     not from the box edge, which put a metrics-based value ~5px too high. This
     value lands the dot's centre on the cap centre. */
  vertical-align: -0.36em;
  /* Right is the shorter of the two: the newline after the bullet in the markup
     renders as a ~0.34em word space, and the two together match the left. */
  margin-left: 1.03em;
  margin-right: 0.69em;
}

.modes-hero-highlights .highlight-word {
  color: var(--color-accent);
  font-weight: 700;
}

.modes-hero .modes-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 54ch;
  margin-bottom: 32px;
}

.modes-sports-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.modes-sports-row svg {
  flex: none;
  fill: var(--color-accent);
}

.modes-sport-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-neutral-400);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.modes-sport-badge svg,
.modes-sport-badge .modes-sport-icon {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

/* Basketball - Accentuating active sport */
.modes-sport-badge.is-active,
.modes-sport-badge--active {
  background: rgba(255, 107, 0, 0.16);
  border: 1.5px solid var(--color-accent, #ff6b00);
  color: var(--color-accent, #ff6b00);
  box-shadow:
    0 0 16px rgba(255, 107, 0, 0.3),
    inset 0 0 10px rgba(255, 107, 0, 0.12);
  transform: scale(1.08);
  opacity: 1;
}

.modes-sport-badge.is-active svg,
.modes-sport-badge.is-active .modes-sport-icon,
.modes-sport-badge--active svg,
.modes-sport-badge--active .modes-sport-icon {
  color: var(--color-accent, #ff6b00);
  fill: var(--color-accent, #ff6b00);
}

/* Soccer & Baseball - Muted / Grayed out */
.modes-sport-badge.is-muted,
.modes-sport-badge--muted {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  filter: grayscale(1) opacity(0.45);
}

.modes-sport-badge.is-muted svg,
.modes-sport-badge.is-muted .modes-sport-icon,
.modes-sport-badge--muted svg,
.modes-sport-badge--muted .modes-sport-icon {
  color: var(--color-neutral-500);
  fill: var(--color-neutral-500);
}

.modes-sport-badge.is-muted:hover,
.modes-sport-badge--muted:hover {
  opacity: 0.65;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Content pages (FAQ, About, Early Access) --------------------------------- */

.modes-page-hero {
  padding: 56px 0 8px;
  text-align: center;
}

.modes-page-hero .modes-eyebrow {
  display: flex;
  justify-content: center;
}

.modes-page-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  max-width: 60ch;
  margin: 0 auto;
}

.modes-section {
  padding: 56px 0;
  border-top: 1px solid var(--color-divider);
}

.modes-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.modes-section-head .modes-eyebrow {
  display: flex;
  justify-content: center;
}

.modes-section-head .modes-h2 {
  margin-bottom: 12px;
}

.modes-section-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  margin: 0;
}

.modes-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.modes-info-card {
  padding: 24px;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  background: var(--color-surface);
}

.modes-info-card-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.modes-info-card h3 {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 17px;
  margin: 0 0 8px;
}

.modes-info-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  margin: 0;
}

.modes-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modes-icon-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-neutral-300);
  font-size: 14px;
  line-height: 1.5;
}

.modes-icon-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  flex-shrink: 0;
}

.modes-icon-list-icon svg {
  width: 15px;
  height: 15px;
}

.modes-founder-card {
  text-align: center;
}

.modes-founder-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  border: 3px solid var(--color-accent);
  display: block;
}

.modes-founder-name {
  font-family: var(--font-heading);
  font-weight: 400; /* Russo One's only weight */
  font-size: 18px;
  margin: 0 0 4px;
}

.modes-founder-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.modes-founder-card p {
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-300);
  margin: 0 0 12px;
}

.modes-founder-card p:last-of-type {
  margin-bottom: 0;
}

.modes-founder-card em {
  color: var(--color-neutral-400);
}

.modes-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.modes-role-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.modes-role-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.modes-role-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modes-role-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-neutral-800);
  border-radius: 8px;
  background: #0d1117;
  font-size: 13px;
  color: var(--color-neutral-300);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.modes-role-option-label svg {
  flex: none;
  fill: var(--color-accent);
}

.modes-role-option input:checked + .modes-role-option-label {
  border-color: var(--color-accent);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.modes-role-option input:focus-visible + .modes-role-option-label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.modes-conditional {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.modes-conditional.is-visible {
  display: flex;
}

.modes-form-foot {
  font-size: 12px;
  color: var(--color-neutral-500);
  text-align: center;
  margin: 0;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 860px) {
  .modes-row {
    grid-template-columns: minmax(40px, 60px) minmax(0, 1fr);
  }

  .modes-row-media {
    grid-column: 2;
    max-width: 280px;
  }

  /* Scale the nav down rather than stacking it: logo, links and CTA all shrink
     so they keep sharing one row. */
  .modes-nav {
    gap: 10px;
    row-gap: 10px;
  }

  .modes-logo {
    padding: 4px 8px;
  }

  .modes-logo img {
    height: 30px !important;
  }

  .modes-nav-links {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .modes-nav-links > a,
  .modes-dropdown-toggle {
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .modes-dropdown-toggle {
    gap: 4px;
  }

  .modes-nav .modes-btn {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .modes-nav.is-floating {
    max-width: calc(100% - 24px);
    margin: 8px auto;
    padding: 12px 14px;
    border-radius: 20px;
    top: 10px;
  }
}

@media (max-width: 680px) {
  #card-premier {
    order: -1;
  }

  /* Once the row wraps, the separator bullet lands at the start of the new line
     and reads as a list marker instead of a divider, with the second line no
     longer aligned to the first. Stacking makes each phrase own a line, and the
     line breaks then do the separating the bullets were there for. */
  .modes-hero-highlights {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px 0;
  }

  .modes-hero-highlights .bullet-green {
    display: none;
  }

  /* Below this the shrunk one-row nav runs out of room, so the links drop to
     their own row under the logo and CTA. */
  .modes-nav-links {
    order: 3;
    /* flex-basis must be 100% (not just width) so the links actually drop to a
       new row — flex: 1 otherwise forces a 0% basis and they get squeezed. */
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .modes-nav .modes-btn {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .modes-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modes-row-media {
    grid-column: 1;
    max-width: 100%;
  }

  .modes-row-num {
    margin-bottom: 8px;
  }

  .modes-dropdown-menu {
    left: 0;
    transform: translateX(0);
  }

  .modes-dropdown:hover .modes-dropdown-menu,
  .modes-dropdown:focus-within .modes-dropdown-menu {
    transform: translateX(0) translateY(0);
  }
}

/* Small phones: shrink once more so the link row still fits the pill. Wrapping
   is allowed again here as a fallback — overflowing the pill looks worse. */
@media (max-width: 480px) {
  .modes-logo img {
    height: 26px !important;
  }

  .modes-nav-links {
    flex-wrap: wrap;
    gap: 4px;
  }

  .modes-nav-links > a,
  .modes-dropdown-toggle {
    font-size: 12px;
    padding: 6px 8px;
  }

  .modes-nav .modes-btn {
    font-size: 11px;
    padding: 7px 10px;
  }
}

/* 320px-class phones: the four links need ~16px more room to stay on one line. */
@media (max-width: 400px) {
  .modes-nav-links {
    gap: 3px;
  }

  .modes-nav-links > a,
  .modes-dropdown-toggle {
    padding: 6px 6px;
  }

  .modes-nav.is-floating {
    max-width: calc(100% - 24px);
    margin: 8px auto;
    padding: 14px 18px;
    border-radius: 20px;
    top: 10px;
  }

  .modes-dropdown-menu {
    left: 0;
    transform: translateX(0);
  }

  .modes-dropdown:hover .modes-dropdown-menu,
  .modes-dropdown:focus-within .modes-dropdown-menu {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 680px) {
  #card-premier {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modes-page *,
  .modes-page *::before,
  .modes-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Cascade artifact ---------------------------------------------------------

   Ported from Assets/Screenshots_and_Images/gameon-cascade-v8.html, which is a
   standalone page. Everything page-level was left behind: its `* { margin:0 }`
   reset, the body gradient and min-height:100vh, its own <h1>/subtitle, the
   "Old Way vs GameOn" comparison block, and the Supabase audio element. What
   remains is the cascade diagram, scoped under .modes-cascade so none of the
   artifact's generic class names (.tier, .label, .value, .particle) can reach
   the rest of the site.

   The artifact was drawn for a 900px page; the fit block at the end squeezes it
   into the row's media column. Keep edits there rather than in the ported rules,
   so re-porting an updated artifact stays a mechanical job.
   -------------------------------------------------------------------------- */

.modes-cascade {
  /* Ported artifact UI (player names/numbers, stat values) needs 500/700
     weights the single-weight --font-body face can't provide. */
  font-family: var(--font-ui);
  position: relative;
  display: flex;
  justify-content: center;
  container-type: inline-size;
}

.modes-cascade .cascade-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 0 60px;
}

.modes-cascade .lines-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.modes-cascade .flow-line {
  stroke: rgba(34, 197, 94, 0.3);
  stroke-width: 2;
  fill: none;
}

.modes-cascade .flow-line.active {
  stroke: rgba(34, 197, 94, 0.8);
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
}

.modes-cascade .extend-line {
  stroke: rgba(34, 197, 94, 0.25);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.modes-cascade .extend-line.active {
  stroke: rgba(34, 197, 94, 0.6);
}

.modes-cascade .endpoint-circle {
  fill: none;
  stroke: rgba(34, 197, 94, 0.25);
  stroke-width: 2;
}

.modes-cascade .endpoint-circle.active {
  stroke: rgba(34, 197, 94, 0.6);
}

.modes-cascade .tier {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.modes-cascade .input-tiles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 35px;
  position: relative;
  z-index: 10;
}

.modes-cascade .tile-connector {
  width: 30px;
  height: 3px;
  background: rgba(34, 197, 94, 0.4);
  position: relative;
}

.modes-cascade .tile-connector.active {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

.modes-cascade .center-drop {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: rgba(34, 197, 94, 0.4);
  border-radius: 50%;
}

.modes-cascade .tile-connector.active .center-drop {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

.modes-cascade .player-tile {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.modes-cascade .player-tile.active {
  box-shadow:
    0 0 0 3px #22c55e,
    0 8px 32px rgba(34, 197, 94, 0.4);
}

.modes-cascade .player-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
}

.modes-cascade .player-name {
  font-size: 0.8rem;
  color: #1a1a1a;
  font-weight: 500;
  margin-top: 2px;
}

.modes-cascade .score-pop {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #22c55e;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.modes-cascade .score-pop.show {
  opacity: 1;
  transform: scale(1);
}

.modes-cascade .action-tile {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border: 3px solid #22c55e;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.modes-cascade .action-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4);
}

.modes-cascade .action-tile:active {
  transform: scale(0.95);
}

.modes-cascade .action-tile.pulsing {
  animation: modes-cascade-pulse 1.5s ease-in-out infinite;
}

.modes-cascade .action-tile:hover,
.modes-cascade .action-tile:active {
  animation: none;
}

@keyframes modes-cascade-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.3);
  }
}

.modes-cascade .action-tile span {
  font-size: 2rem;
  font-weight: 700;
  color: #22c55e;
}

.modes-cascade .stat-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  min-width: 120px;
}

.modes-cascade .stat-node.active {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.modes-cascade .stat-node .label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.modes-cascade .stat-node .value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
}

.modes-cascade .stat-node.active .value {
  color: #22c55e;
}

.modes-cascade .particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  box-shadow:
    0 0 10px #22c55e,
    0 0 20px rgba(34, 197, 94, 0.5);
}

.modes-cascade .ripple {
  position: absolute;
  border: 2px solid #22c55e;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
}

.modes-cascade .tap-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin-top: 8px;
  margin-bottom: 28px;
  text-align: center;
}

/* Fit block: the ported rules assume a 900px page. */
.modes-cascade .cascade-container {
  max-width: 100%;
  padding: 0 12px;
}

.modes-cascade .tier {
  gap: 10px;
  margin-bottom: 20px;
}

.modes-cascade .stat-node {
  min-width: 0;
  padding: 9px 12px;
}

.modes-cascade .stat-node .label {
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.modes-cascade .stat-node .value {
  font-size: 15px;
}

.modes-cascade .player-tile,
.modes-cascade .action-tile {
  width: 74px;
  height: 74px;
}

.modes-cascade .player-number {
  font-size: 26px;
}

.modes-cascade .player-name {
  font-size: 10px;
}

.modes-cascade .action-tile span {
  font-size: 22px;
}

.modes-cascade .input-tiles {
  margin-bottom: 24px;
}

.modes-cascade .tap-hint {
  font-size: 11px;
  margin-bottom: 20px;
}

/* Shot-drop artifact -------------------------------------------------------

   Ported from Assets/Screenshots_and_Images/gameon-shot-drop-v6.html. Its page
   chrome (the `*` reset and the body gradient / 100vh / flex centring) is left
   behind; the :root custom properties moved onto .modes-shot rather than :root,
   because names like --line, --txt and --g are far too generic to sit loose on
   the document.

   Unlike the cascade, this artifact is a FIXED 640x520 composition — its parts
   are absolutely positioned at literal pixel coordinates — so it cannot reflow
   into a narrower column and has to be scaled instead. --shot-scale is set from
   the container width by the script, which also divides the drag coordinates by
   it; without that the marks land at the wrong spot on the court.
   -------------------------------------------------------------------------- */

.modes-shot {
  --shot-scale: 1;
  position: relative;
  width: 100%;
  /* Reserve the scaled height — a transform paints smaller but still occupies
     the original 520px, so the row would otherwise lay out around empty space. */
  height: calc(520px * var(--shot-scale));
  /* Optical nudge left. The script centres on the content's bounding box, but the
     bench chip on the left counts toward that box while the court is what the eye
     actually centres on — so pure bbox centring reads a touch right. Relative
     offset, so it shifts the whole thing without disturbing the script's maths
     (which measures content against this element's own rect). */
  right: 40px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.modes-shot {
  --ink: #0a0e1a;
  --line: #232e40;
  --court: #33445e;
  --key: #22304a;
  --txt: #e8eef6;
  --dim: #7b8ba3;
  --g: #4ade80;
  --gDim: rgba(74, 222, 128, 0.28);
  --miss: #e0655a;
}

.modes-shot .stage {
  position: relative;
  width: 640px;
  height: 520px;
}

.modes-shot .card {
  position: relative;
  width: 78px;
  height: 82px;
  border-radius: 15px;
  background: #fff;
  border: 2.5px solid #0b0f16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modes-shot .card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 16px;
  right: 16px;
  height: 9px;
  background: #3a4553;
  border-radius: 0 0 7px 7px;
}

.modes-shot .card .num {
  font:
    800 30px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: #0b0f16;
  letter-spacing: -0.02em;
}

.modes-shot .card .nm {
  font:
    700 11px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: #0b0f16;
  margin-top: 7px;
}

.modes-shot .bench {
  position: absolute;
  top: 194px;
  left: 0;
  width: 100px;
  text-align: center;
}

.modes-shot .hint {
  font:
    600 8px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modes-shot .chip {
  cursor: grab;
  display: inline-block;
  transition:
    transform 0.2s,
    filter 0.2s;
}

.modes-shot .chip:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6));
}

.modes-shot .chip.held {
  opacity: 0.18;
}

.modes-shot .chip.pulse {
  animation: modes-shot-nudge 2.8s ease-in-out infinite;
}

@keyframes modes-shot-nudge {
  0%,
  88%,
  100% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(-5px);
  }
}

.modes-shot .ghost {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.04) rotate(-3deg);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.75));
}

.modes-shot .ghost .zn {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  color: var(--g);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}

.modes-shot .ghost.over .zn {
  opacity: 1;
}

.modes-shot .ghost.over .card {
  border-color: var(--g);
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.5);
}

.modes-shot .court {
  position: absolute;
  top: 88px;
  left: 120px;
  width: 352px;
  height: 331px;
  background: #0f1622;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.modes-shot .court.armed {
  border-color: var(--gDim);
  background: #111c26;
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.12);
}

.modes-shot .court svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.modes-shot .cl {
  fill: none;
  stroke: var(--court);
  stroke-width: 1.6;
}

.modes-shot .ck {
  fill: none;
  stroke: var(--key);
  stroke-width: 1.4;
}

.modes-shot .ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--g);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.modes-shot .ring.x {
  border-color: var(--miss);
}

.modes-shot .ring.go {
  animation: modes-shot-ripple 0.7s ease-out forwards;
}

@keyframes modes-shot-ripple {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}

.modes-shot .mark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition:
    transform 0.3s cubic-bezier(0.2, 1.5, 0.4, 1),
    opacity 0.3s;
}

.modes-shot .mark.in {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modes-shot .mark.make {
  background: var(--g);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
}

.modes-shot .mark.miss {
  background: none;
  border: 1.5px solid var(--miss);
}

.modes-shot .freelayer {
  position: absolute;
  top: 88px;
  left: 120px;
  width: 352px;
  height: 331px;
  overflow: visible;
  pointer-events: none;
  z-index: 30;
}

.modes-shot .tile {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.65));
}

.modes-shot .tile .card {
  width: 78px;
  height: 82px;
}

.modes-shot .tile.settle {
  animation: modes-shot-settle 0.26s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

@keyframes modes-shot-settle {
  0% {
    transform: translate(-50%, -50%) scale(1.04) rotate(-3deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

.modes-shot .tile.make .card {
  border-color: var(--g);
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.55);
}

.modes-shot .tile.make .card .nm {
  color: #12833f;
}

.modes-shot .tile.miss .card {
  border-color: var(--miss);
}

.modes-shot .tile.miss .card .nm {
  color: #b83f34;
}

.modes-shot .tile.gone {
  animation: modes-shot-land 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}

@keyframes modes-shot-land {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.86);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
}

.modes-shot .ask {
  position: absolute;
  z-index: 6;
  display: flex;
  background: #0d1420;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transform: translate(-50%, calc(-100% - 22px)) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s ease;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
}

.modes-shot .ask.in {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 22px)) scale(1);
  pointer-events: auto;
}

.modes-shot .freelayer .ask {
  pointer-events: none;
}

.modes-shot .freelayer .ask.in {
  pointer-events: auto;
}

.modes-shot .ask.below {
  transform: translate(-50%, 22px) scale(0.9);
}

.modes-shot .ask.below.in {
  transform: translate(-50%, 22px) scale(1);
}

.modes-shot .ask b {
  font:
    600 8px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  color: var(--dim);
  padding: 11px 10px;
  border-right: 1px solid var(--line);
  align-self: center;
}

.modes-shot .ask button {
  border: 0;
  background: none;
  color: var(--txt);
  cursor: pointer;
  padding: 10px 16px;
  /* Was "inherit": with --font-body now Francois One (400 only), the 600
     weight here would get a synthesised fake bold. This widget already runs
     its own system font stack throughout, so match that instead. */
  font:
    600 12px/1 ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
}

.modes-shot .ask button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.modes-shot .ask .mk {
  color: var(--g);
}

.modes-shot .ask .ms {
  color: var(--miss);
  border-left: 1px solid var(--line);
}

.modes-shot .wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.modes-shot .edge {
  fill: none;
  stroke: var(--g);
  stroke-width: 1.6;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.55));
}

.modes-shot .dot {
  fill: var(--g);
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.9));
}

.modes-shot .wire.cold .edge {
  stroke: var(--miss);
  filter: drop-shadow(0 0 4px rgba(224, 101, 90, 0.55));
}

.modes-shot .wire.cold .dot {
  fill: var(--miss);
  filter: drop-shadow(0 0 6px rgba(224, 101, 90, 0.9));
}

.modes-shot .stat {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 16px;
  text-align: center;
  transition:
    border-color 0.35s,
    box-shadow 0.35s,
    background 0.35s;
}

.modes-shot .stat.lit {
  border-color: var(--gDim);
  background: rgba(74, 222, 128, 0.045);
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.16);
}

.modes-shot .stat.lit.cold {
  border-color: rgba(224, 101, 90, 0.3);
  background: rgba(224, 101, 90, 0.045);
  box-shadow: 0 0 26px rgba(224, 101, 90, 0.15);
}

.modes-shot .stat.lit.cold .v {
  color: var(--miss);
}

.modes-shot .stat .k {
  font:
    600 9px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
}

.modes-shot .stat .v {
  font:
    700 21px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--txt);
  margin-top: 10px;
  transition: color 0.35s;
}

.modes-shot .stat.lit .v {
  color: var(--g);
}

.modes-shot .stat.score {
  width: 236px;
}

.modes-shot .stat.score .v {
  font-size: 26px;
}

.modes-shot .stat.mini {
  width: 110px;
  border-radius: 10px;
  padding: 9px 8px;
}

.modes-shot .stat.mini .k {
  font-size: 7.5px;
  letter-spacing: 0.16em;
}

.modes-shot .stat.mini .v {
  font-size: 15px;
  margin-top: 7px;
}

/* Must come AFTER the ported rules: the artifact ships its own
   `.stage { position: relative; width: 640px }`, which has the same specificity,
   so an earlier override silently loses.

   Absolute, not merely transformed. A transform paints smaller but does not
   change layout size, so an in-flow 640px stage still pushed the row's grid
   track to 640px and scrolled the page sideways on mobile. Out of flow it
   contributes nothing to intrinsic sizing, leaving the wrapper free to be as
   narrow as the column. */
.modes-shot .stage {
  position: absolute;
  top: 0;
  left: 0;
  /* translateX is in unscaled stage px because it is applied before scale().
     --shot-nudge is measured by the script: the artifact's composition only
     fills ~473 of its 640px canvas, so without this it hugs the left edge while
     the cascade above it sits centred. */
  transform: scale(var(--shot-scale)) translateX(var(--shot-nudge, 0px));
  transform-origin: top left;
}

/* Baseline scorekeeper artifact --------------------------------------------
   GENERATED by tools/port-baseline.py from
   Assets/Screenshots_and_Images/gameon-cascade-scorekeeper.html.
   Do not hand-edit: edit the source artifact and re-run the script.
   -------------------------------------------------------------------------- */

.modes-baseline {
  position: relative;
  width: 100%;
}

.modes-baseline {
  --paper: #212429;
  --onDark: #e6e9ee;
  --onDim: #868d97;
  --onLine: rgba(255, 255, 255, 0.15);
  --card: #ffffff;
  --ink: #14171c;
  --line: #e3e3df;
  --line2: #d6d6d1;
  --dim: #8b9098;
  --dim2: #a9aeb5;
  --label: #6b717a;
  --gInk: #2e7d51;
  --gBg: #eef6f0;
  --gLine: #dbeae1;
  --oInk: #c2410c;
  --oBg: #fdf1ea;
  --oLine: #f5ddcf;
  --rInk: #b3261e;
  --rBg: #fdecec;
  --rLine: #f6d8d6;
  --sInk: #3f5b8c;
  --sBg: #eef2f8;
  --sLine: #dde5f0;
  --wireG: #17a05e;
  --wireO: #e07b19;
  --wireS: #5478b4;
  --crimson: #e11d48;
}

.modes-baseline #wrap {
  width: 100%;
  max-width: 940px;
  position: relative;
}

.modes-baseline #stage {
  position: relative;
  width: 940px;
  height: 754px;
  transform-origin: top left;
}

.modes-baseline #skWire {
  position: absolute;
  inset: 0;
  width: 940px;
  height: 754px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.modes-baseline .edge {
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke: var(--wireG);
  opacity: 0.95;
}

.modes-baseline .edge.o {
  stroke: var(--wireO);
}

.modes-baseline .edge.s {
  stroke: var(--wireS);
}

.modes-baseline .edge.r {
  stroke: var(--crimson);
}

.modes-baseline .pip {
  fill: var(--wireG);
}

.modes-baseline .pip.o {
  fill: var(--wireO);
}

.modes-baseline .pip.s {
  fill: var(--wireS);
}

.modes-baseline .pip.r {
  fill: var(--crimson);
}

.modes-baseline .board,
.modes-baseline .p,
.modes-baseline .bp,
.modes-baseline .ghost .p,
.modes-baseline .ghost .bp {
  color: var(--ink);
}

.modes-baseline .board {
  position: absolute;
  left: 110px;
  top: 18px;
  width: 720px;
  height: 96px;
  z-index: 5;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 14px 34px rgba(0, 0, 0, 0.34);
  display: flex;
  overflow: hidden;
}

.modes-baseline .crest {
  width: 76px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
}

.modes-baseline .crest svg {
  width: 44px;
  height: 48px;
}

.modes-baseline .teams {
  width: 310px;
  display: flex;
  flex-direction: column;
}

.modes-baseline .trow {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 9px;
  position: relative;
}

.modes-baseline .trow + .trow {
  border-top: 1px solid var(--line);
}

.modes-baseline .poss {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.modes-baseline .poss.on {
  opacity: 1;
}

.modes-baseline .poss.ping svg {
  animation: modes-baseline-possIn 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes modes-baseline-possIn {
  0% {
    transform: translateX(9px) scale(0.5);
  }
  100% {
    transform: none;
  }
}

.modes-baseline .poss svg {
  width: 11px;
  height: 13px;
  fill: var(--ink);
}

.modes-baseline .tname {
  color: var(--ink);
  font:
    800 17px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.modes-baseline .to {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.modes-baseline .to i {
  font:
    700 9px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  color: var(--label);
  font-style: normal;
}

.modes-baseline .pips {
  display: flex;
  gap: 2.5px;
}

.modes-baseline .pips b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  display: block;
}

.modes-baseline .pips b.off {
  background: #c6cad0;
}

.modes-baseline .fouls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.modes-baseline .fouls i {
  font:
    700 9px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  color: var(--label);
  font-style: normal;
}

.modes-baseline .fouls .n {
  color: var(--ink);
  font:
    800 15.5px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  padding: 3px 4px;
  border-radius: 5px;
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}

.modes-baseline .fouls .n.lit {
  color: var(--oInk);
  background: var(--oBg);
  box-shadow: 0 0 0 2px rgba(224, 123, 25, 0.24);
}

.modes-baseline .bonus {
  font:
    800 7px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  color: var(--oInk);
  background: var(--oBg);
  border: 1px solid var(--oLine);
  border-radius: 4px;
  padding: 3px 4px;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.modes-baseline .bonus.on {
  opacity: 1;
  transform: scale(1);
}

.modes-baseline .scores {
  width: 80px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.modes-baseline .sbox {
  flex: 1;
  display: grid;
  place-items: center;
  transition:
    background 0.35s,
    box-shadow 0.35s;
}

.modes-baseline .sbox + .sbox {
  border-top: 1px solid var(--line);
}

.modes-baseline .sbox span {
  color: var(--ink);
  font:
    800 34px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
  transition: color 0.35s;
}

.modes-baseline .sbox.lit {
  background: var(--gBg);
  box-shadow: inset 0 0 0 2px rgba(23, 160, 94, 0.28);
}

.modes-baseline .sbox.lit span {
  color: var(--gInk);
}

.modes-baseline .clock {
  width: 120px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
}

.modes-baseline .clock .t {
  color: var(--ink);
  font:
    800 32px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
}

.modes-baseline .clock .per {
  font:
    700 9.5px/1 ui-monospace,
    monospace;
  letter-spacing: 0.2em;
  color: var(--label);
  margin-top: 5px;
}

.modes-baseline .ctrl {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.modes-baseline .ctrl .row {
  display: flex;
  gap: 5px;
}

.modes-baseline .play {
  width: 38px;
  height: 28px;
  border-radius: 6px;
  background: #22c55e;
  display: grid;
  place-items: center;
}

.modes-baseline .play svg {
  width: 11px;
  height: 13px;
  fill: #fff;
}

.modes-baseline .pause {
  width: 33px;
  height: 28px;
  border-radius: 6px;
  background: #eeeeeb;
  display: grid;
  place-items: center;
}

.modes-baseline .pause svg {
  width: 8px;
  height: 10px;
  fill: #b9bcc0;
}

.modes-baseline .endp {
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.13em;
  color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 6px 9px;
  background: var(--card);
}

.modes-baseline .col {
  position: absolute;
  z-index: 4;
}

.modes-baseline #colBenchL,
.modes-baseline #colBenchR {
  opacity: 0.5;
  transition: opacity 0.32s;
}

.modes-baseline #colBenchL:hover,
.modes-baseline #colBenchR:hover,
.modes-baseline .col.wake {
  opacity: 1;
}

.modes-baseline #colBenchL {
  left: 150px;
  top: 150px;
  width: 110px;
}

.modes-baseline #colHome {
  left: 302px;
  top: 150px;
  width: 88px;
}

.modes-baseline #colAct {
  left: 424px;
  top: 150px;
  width: 92px;
}

.modes-baseline #colAway {
  left: 550px;
  top: 150px;
  width: 88px;
}

.modes-baseline #colBenchR {
  left: 680px;
  top: 150px;
  width: 110px;
}

.modes-baseline .glabel {
  font:
    600 8.5px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.19em;
  color: #6f7681;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 9px 4px;
}

.modes-baseline .glabel.mute {
  color: #d3d5d8;
}

.modes-baseline .ctitle {
  text-align: center;
  margin-bottom: 10px;
}

.modes-baseline .ctitle .a {
  font:
    800 13px/1.2 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  color: var(--onDark);
}

.modes-baseline .ctitle .b {
  font:
    600 11.5px/1.2 ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--onDim);
}

.modes-baseline .p {
  position: relative;
  width: 88px;
  height: 92px;
  margin-bottom: 6px;
  touch-action: none;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.2, 1.2, 0.4, 1),
    box-shadow 0.22s,
    border-color 0.3s;
}

.modes-baseline .p .tab {
  position: absolute;
  top: -1px;
  left: 17px;
  right: 17px;
  height: 9px;
  background: #3a4553;
  border-radius: 0 0 6px 6px;
}

.modes-baseline .p .num {
  color: var(--ink);
  font:
    800 31px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
}

.modes-baseline .p .nm {
  color: var(--ink);
  font:
    700 12px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  margin-top: 7px;
}

.modes-baseline .p {
  cursor: grab;
}

.modes-baseline .p:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}

.modes-baseline .p.sel {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 14px 26px rgba(0, 0, 0, 0.45);
}

.modes-baseline .p.trouble {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.13);
}

.modes-baseline .p.trouble .num,
.modes-baseline .p.trouble .nm {
  color: var(--crimson);
}

.modes-baseline .p.trouble .tab {
  background: none;
  border-top: 3px dashed var(--crimson);
  border-radius: 0;
}

.modes-baseline .p.trouble.sel {
  box-shadow:
    0 0 0 3px rgba(225, 29, 72, 0.3),
    0 12px 22px rgba(225, 29, 72, 0.2);
}

.modes-baseline .p .warn {
  position: absolute;
  left: 6px;
  top: 20px;
  color: var(--crimson);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.modes-baseline .p.trouble .warn {
  opacity: 1;
}

.modes-baseline .p .pf {
  position: absolute;
  bottom: 7px;
  font:
    800 8px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--crimson);
  border-radius: 7px;
  padding: 3px 6px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.modes-baseline .p.trouble .pf {
  opacity: 1;
  transform: scale(1);
}

.modes-baseline .p.trouble .nm {
  margin-bottom: 12px;
}

.modes-baseline .p.hitG {
  border-color: var(--gInk);
  box-shadow: 0 0 0 3px rgba(23, 160, 94, 0.26);
}

.modes-baseline .p.hitO {
  border-color: var(--oInk);
  box-shadow: 0 0 0 3px rgba(224, 123, 25, 0.28);
}

.modes-baseline .p.hitS {
  border-color: var(--sInk);
  box-shadow: 0 0 0 3px rgba(84, 120, 180, 0.28);
}

.modes-baseline .delta {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, 0);
  font:
    800 15px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--gInk);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 9;
}

.modes-baseline .delta.go {
  animation: modes-baseline-rise 0.95s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.modes-baseline .delta.o {
  color: var(--oInk);
}

.modes-baseline .delta.s {
  color: var(--sInk);
}

@keyframes modes-baseline-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.8);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -30px) scale(0.95);
  }
}

.modes-baseline .bp {
  position: relative;
  width: 70px;
  height: 72px;
  margin: 0 auto 6px;
  cursor: grab;
  touch-action: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modes-baseline .bp .tab {
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 5px;
  background: #dcdcd8;
  border-radius: 0 0 4px 4px;
}

.modes-baseline .bp .num {
  font:
    800 21px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: #4a505a;
}

.modes-baseline .bp .nm {
  font:
    600 9.5px/1 ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--label);
  margin-top: 5px;
}

.modes-baseline .bp:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.4);
}

.modes-baseline .bp.held,
.modes-baseline .p.held,
.modes-baseline .act.held {
  opacity: 0.15;
  transform: none;
  box-shadow: none;
}

.modes-baseline .ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.55));
}

.modes-baseline .ghost .bp,
.modes-baseline .ghost .p,
.modes-baseline .ghost .act {
  margin: 0;
  cursor: grabbing;
  box-shadow: none;
  transform: none;
}

.modes-baseline .ghost .bp {
  border-color: var(--sInk);
  border-width: 2px;
}

.modes-baseline .p.armed {
  border-color: var(--sInk);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(122, 164, 235, 0.55),
    0 14px 26px rgba(0, 0, 0, 0.45);
}

.modes-baseline .p.armed .num,
.modes-baseline .p.armed .nm {
  opacity: 0.35;
}

.modes-baseline .p.target {
  transform: translateY(-3px);
}

.modes-baseline .p.target.tg {
  border-color: var(--gInk);
  box-shadow:
    0 0 0 3px rgba(23, 160, 94, 0.3),
    0 12px 24px rgba(23, 160, 94, 0.18);
}

.modes-baseline .p.target.to {
  border-color: var(--oInk);
  box-shadow:
    0 0 0 3px rgba(224, 123, 25, 0.32),
    0 12px 24px rgba(224, 123, 25, 0.18);
}

.modes-baseline .bp .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

.modes-baseline .p.swapping,
.modes-baseline .bp.swapping {
  animation: modes-baseline-swap 0.52s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes modes-baseline-swap {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  42% {
    transform: scale(0.74);
    opacity: 0.15;
  }
  58% {
    transform: scale(0.74);
    opacity: 0.15;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes modes-baseline-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modes-baseline .coach {
  width: 60px;
  margin: 0 auto;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  font:
    700 8px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  color: #d3d5d8;
}

.modes-baseline .act {
  width: 92px;
  height: 88px;
  margin-bottom: 5px;
  border-radius: 12px;
  touch-action: none;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  font:
    800 22px/1.1 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  border: 1px solid transparent;
  transition:
    transform 0.2s cubic-bezier(0.2, 1.2, 0.4, 1),
    box-shadow 0.25s,
    background 0.25s,
    border-color 0.25s;
}

.modes-baseline .act {
  cursor: grab;
  border-width: 1.5px;
}

.modes-baseline .act.g {
  background: rgba(35, 190, 110, 0.14);
  color: #5fe39a;
  border-color: rgba(35, 190, 110, 0.38);
}

.modes-baseline .act.o {
  background: rgba(238, 142, 46, 0.15);
  color: #ffb267;
  border-color: rgba(238, 142, 46, 0.4);
}

.modes-baseline .act:hover {
  transform: translateY(-2px);
}

.modes-baseline .act.g:hover {
  background: rgba(35, 190, 110, 0.23);
  border-color: rgba(35, 190, 110, 0.6);
  color: #7aeaad;
}

.modes-baseline .act.o:hover {
  background: rgba(238, 142, 46, 0.24);
  border-color: rgba(238, 142, 46, 0.62);
  color: #ffc287;
}

.modes-baseline .act.fire,
.modes-baseline .act.armed {
  transform: translateY(-2px) scale(1.03);
}

.modes-baseline .act.g.fire,
.modes-baseline .act.g.armed {
  background: rgba(35, 190, 110, 0.32);
  border-color: #3fd68a;
  color: #a6f5c8;
  box-shadow:
    0 0 0 3px rgba(35, 190, 110, 0.26),
    0 14px 28px rgba(0, 0, 0, 0.5);
}

.modes-baseline .act.o.fire,
.modes-baseline .act.o.armed {
  background: rgba(238, 142, 46, 0.34);
  border-color: #f2a259;
  color: #ffd3a6;
  box-shadow:
    0 0 0 3px rgba(238, 142, 46, 0.28),
    0 14px 28px rgba(0, 0, 0, 0.5);
}

.modes-baseline .foot {
  position: absolute;
  left: 110px;
  top: 706px;
  width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modes-baseline .tip {
  font:
    600 9px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.17em;
  color: var(--onDim);
  text-transform: uppercase;
  transition: color 0.3s;
}

.modes-baseline .tip.hot {
  color: #f0973f;
}

.modes-baseline .replay {
  font:
    600 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.15em;
  color: var(--onDim);
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--onLine);
  border-radius: 12px;
  padding: 7px 12px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}

.modes-baseline .replay:hover {
  color: var(--onDark);
  border-color: rgba(255, 255, 255, 0.34);
}

.modes-baseline .replay:focus-visible,
.modes-baseline .p:focus-visible,
.modes-baseline .act:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .modes-baseline * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Must come AFTER the ported rules — the artifact ships its own
   `#stage { position: relative; width: 940px }` at equal specificity. A
   transform paints smaller but does not change layout size, so an in-flow stage
   pushed the row's grid track to 940px and scrolled the page sideways on
   mobile. #wrap reserves the scaled height itself, so this costs nothing. */
.modes-baseline #stage {
  position: absolute;
  top: 0;
  left: 0;
}