/* Propello Arcade: the tray art direction (ART.md) laid over the motif engine's styles.
   Loaded after tokens.css and motif.css. Single light look by design: the reference icon is drawn on white.
   Overrides only: motif.css stays the engine's source; everything here re-voices it in the Catch the Lead look
   (white ground, 3px navy borders, round corners, navy pill buttons with an ice hover, bold Helvetica). */
.ml-stage, .ml-player {  /* theme: scoped (the Arcade file sets these on :root) */
  color-scheme: light;
  --t-navy: #132B42; --t-lead: #378DCE; --t-line: #5DA7DB; --t-mid: #76BAE8; --t-sky: #87C4EE; --t-ice: #ABD5F3;
  --t-tint: #EEF7FC; --t-hand: #BDC1C8; --t-mist: #D3DBE1; --t-white: #FFFFFF; --t-muted: #4E5D6C; --t-label: #2B72A8;
  /* the engine's roles, mapped to the palette */
  --deep: #132B42; --navy: #132B42; --slate: #4E5D6C; --steel: #87C4EE; --silver: #D3DBE1; --cloud: #EEF7FC; --light: #EEF7FC; --diamond: #ABD5F3;
  --bg: #FFFFFF; --surface: #FFFFFF; --panel: #EEF7FC; --ink: #132B42; --text: #132B42; --muted: #4E5D6C;
  --rule: #ABD5F3; --steel-ink: #87C4EE; --live: #ABD5F3; --live-ink: #132B42;
}
.ml-stage { --stage: #FFFFFF; --stage-rule: #132B42; --steel-ink: #87C4EE; --live: #ABD5F3; --live-ink: #132B42; --surface: #FFFFFF;
  border: 3px solid var(--t-navy); border-radius: 24px; }

/* ---- svg classes for the tray look (ART.md) ---- */
.to  { stroke: var(--t-navy); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.to2 { stroke: var(--t-navy); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tf-navy { fill: var(--t-navy); } .tf-lead { fill: var(--t-lead); } .tf-line { fill: var(--t-line); } .tf-mid { fill: var(--t-mid); }
.tf-sky { fill: var(--t-sky); } .tf-ice { fill: var(--t-ice); } .tf-tint { fill: var(--t-tint); } .tf-hand { fill: var(--t-hand); }
.tf-mist { fill: var(--t-mist); } .tf-white { fill: var(--t-white); } .tf-none { fill: none; }
.tgap { fill: var(--t-white); stroke: none; }
/* the gap as a halo: the same shape drawn first with a white stroke 5 wider on each side than the 4.5 outline */
.tgap-o { fill: var(--t-white); stroke: var(--t-white); stroke-width: 14.5; stroke-linejoin: round; stroke-linecap: round; }
.tm1, .tm2, .tm3 { fill: none; stroke-width: 5; stroke-linecap: round; }
.tm1 { stroke: var(--t-line); } .tm2 { stroke: var(--t-sky); } .tm3 { stroke: var(--t-ice); }
.tguide { fill: none; stroke: var(--t-sky); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }   /* a dotted guide */
.tlink { fill: none; stroke: var(--t-lead); stroke-width: 5; stroke-linecap: round; }                          /* a made connection */
.tt { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; fill: var(--t-navy); }
.tt-s { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 13px; fill: var(--t-muted); }
.tt.tt-on, .tt-s.tt-on { fill: var(--t-white); }
/* type floors in real pixels, the same rule the engine uses for its t- classes (--px is stage units per CSS px) */
.ml-stage .tt { font-size: max(16px, calc(var(--px, 1) * 15px)); }
.ml-stage .tt-s { font-size: max(13px, calc(var(--px, 1) * 13px)); }
/* the teaser is a picture: small labels (tt-s, or tt-hide on a bold label) leave it */
.ml-stage[data-mode="attract"] .ml-svg text.tt-s, .ml-stage[data-mode="attract"] .ml-svg text.tt-hide { visibility: hidden; }

/* the lead token (TrayArt.lead) */
.tl { color: var(--t-lead); }
.tl .tl-disc { fill: currentColor; }
.tl .tl-person { fill: var(--t-white); }
.tl .tl-gap { fill: var(--t-white); }
.tl .tl-ring { fill: none; stroke: var(--t-ice); stroke-width: 6; opacity: 0; }
.tl.is-live .tl-ring { opacity: 1; }
.tl.is-lost { color: var(--t-mist); }
.tl-tag rect { fill: var(--t-white); stroke: var(--t-navy); stroke-width: 3; }
.tl-tag text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; fill: var(--t-navy); }
/* a character face (TrayArt.face): white gap, tint ground, portrait, navy outline; dim = lost or unhappy (mist, faded) */
.tf-face .tf-face-gap { fill: var(--t-white); }
.tf-face .tf-face-ground { fill: var(--t-tint); }
.tf-face .tf-face-ring { fill: none; stroke: var(--t-navy); stroke-width: 4.5; }
.tf-face image { transition: opacity .3s, filter .3s; }
.tf-face.is-dim image { filter: grayscale(1); opacity: .45; }
.tf-face.is-dim .tf-face-ring { stroke: var(--t-mist); }
.tf-face.is-dim .tf-face-ground { fill: var(--t-mist); }
@media (prefers-reduced-motion: reduce) { .tf-face image { transition: none; } }

/* the player's hand (TrayArt.hand). grip: stage units. tray: icon units (outline 15), scaled by the caller */
.th-sleeve { fill: var(--t-navy); stroke: var(--t-navy); stroke-width: 4.5; stroke-linejoin: round; }
.th-cuff { fill: var(--t-ice); stroke: var(--t-navy); stroke-width: 4.5; stroke-linejoin: round; }
.th-button { fill: var(--t-ice); }
.th-hand { fill: var(--t-hand); stroke: var(--t-navy); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.th-line { fill: none; stroke: var(--t-navy); stroke-width: 3; stroke-linecap: round; }
.th-sleeve-t { fill: var(--t-navy); } .th-cuff-t { fill: var(--t-ice); }
.th-hand-t { fill: var(--t-hand); stroke: var(--t-navy); stroke-width: 15; stroke-linejoin: round; }
.th-crease-t { fill: var(--t-navy); stroke: var(--t-navy); stroke-width: 15; stroke-linejoin: round; stroke-linecap: round; }
.th-sliver-t { fill: var(--t-white); stroke: var(--t-white); stroke-width: 4; stroke-linejoin: round; }

/* ---- the kit's icons (kit.js): parts carry roles, the icon's data-tone carries colour ---- */
.ml-svg .ic .ic-b { fill: var(--t-sky); stroke: var(--t-navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ml-svg .ic .ic-d { fill: none; stroke: var(--t-navy); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ml-svg .ic .ic-l { fill: none; stroke: var(--t-navy); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ml-svg .ic .ic-n { fill: var(--t-navy); stroke: none; }
.ml-svg .ic .ic-h { fill: var(--t-white); stroke: var(--t-navy); stroke-width: 2.25; }
.ml-svg .ic .ic-r { fill: none; stroke: var(--t-ice); stroke-width: 3.5; }
.ml-svg .ic[data-tone="steel"] .ic-b { fill: var(--t-white); }
.ml-svg .ic[data-tone="steel"] .ic-l { stroke: var(--t-line); }
.ml-svg .ic[data-tone="live"] .ic-b { fill: var(--t-ice); }
.ml-svg .ic[data-tone="live"] .ic-l { stroke: var(--t-lead); }
.ml-svg .ic[data-tone="panel"] .ic-b { fill: var(--t-tint); }
.ml-svg .ic[data-tone="ground"] .ic-b { fill: var(--t-ice); }               /* on navy panels: an ice shape, navy details */
.ml-svg .ic[data-tone="ground"] .ic-l { stroke: var(--t-ice); }
.ml-svg .ic[data-tone="lead"] .ic-b { fill: var(--t-lead); }
.ml-svg .ic[data-tone="lead"] .ic-d { stroke: var(--t-white); } .ml-svg .ic[data-tone="lead"] .ic-n { fill: var(--t-white); }
.ml-svg .ic[data-tone="mist"] .ic-b { fill: var(--t-mist); stroke: var(--t-mist); }   /* lost: mist, never red */
.ml-svg .ic[data-tone="mist"] .ic-d { stroke: var(--t-white); } .ml-svg .ic[data-tone="mist"] .ic-n { fill: var(--t-white); }
.ml-svg .ic[data-tone="mist"] .ic-l { stroke: var(--t-mist); } .ml-svg .ic[data-tone="mist"] .ic-h { stroke: var(--t-mist); }
/* the person icon is the lead token */
.ml-svg .ic .ic-gap { fill: var(--t-white); }
.ml-svg .ic .ic-disc { fill: var(--t-lead); }
.ml-svg .ic .ic-glyph { fill: var(--t-white); }
.ml-svg .ic[data-tone="mist"] .ic-disc { fill: var(--t-mist); }
.ml-svg .ic[data-tone="ground"] .ic-gap { fill: none; }                    /* on a navy panel the gap would show as a ring */
/* the ghost hand (the kit's cursor) */
.ml-svg .ic .ic-hand { fill: var(--t-hand); stroke: var(--t-navy); stroke-width: 2; stroke-linejoin: round; }
.ml-svg .ic .ic-cuff { fill: var(--t-ice); stroke: var(--t-navy); stroke-width: 2; stroke-linejoin: round; }
.ml-svg .ic .ic-sleeve { fill: var(--t-navy); stroke: var(--t-navy); stroke-width: 2; stroke-linejoin: round; }
.ml-svg .ic[data-icon="cursor"] .ic-d { stroke-width: 1.5; }

/* ---- the engine's legacy svg classes, re-voiced so untouched shapes already sit in the palette ---- */
.ml-svg .f-ink, .ml-svg .f-navy { fill: var(--t-navy); }
.ml-svg .f-steel { fill: var(--t-sky); } .ml-svg .f-mist { fill: var(--t-mist); } .ml-svg .f-panel { fill: var(--t-tint); }
.ml-svg .f-ground { fill: var(--t-white); } .ml-svg .f-live { fill: var(--t-ice); }
.ml-svg .s-ink { stroke: var(--t-navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ml-svg .s-thin { stroke: var(--t-navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ml-svg .s-steel { stroke: var(--t-sky); stroke-linecap: round; } .ml-svg .s-rule { stroke: var(--t-ice); stroke-linecap: round; }
.ml-svg .s-live { stroke: var(--t-lead); stroke-linecap: round; } .ml-svg .s-mist { stroke: var(--t-mist); stroke-linecap: round; }
/* kit effects: impact-line spokes, and the cue's brackets (the tag is a navy pill drawn by kit.js) */
.ml-svg .k-spoke { stroke: var(--t-line); stroke-width: 4; stroke-linecap: round; }
.ml-svg .k-spoke.is-steel { stroke: var(--t-sky); stroke-width: 3.5; }
.ml-svg .k-cue-br { stroke: var(--t-navy); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* ================= HTML layers: HUD, lower third, cards, buttons (Catch the Lead) ================= */
/* HUD: the clock along the top edge, the round as a white pill with a navy border */
.ml-clock { height: max(4px, calc(var(--u) * 6)); background: var(--t-tint); }
.ml-clock i { background: var(--t-navy); border-radius: 0 999px 999px 0; }
.ml-clock.is-late i { background: var(--t-line); }
.ml-round { top: calc(var(--u) * 16); left: calc(var(--u) * 16); height: max(28px, calc(var(--u) * 36)); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 5);
  background: var(--t-white); color: var(--t-navy); border: 3px solid var(--t-navy); border-radius: 999px;
  font: 700 max(13px, calc(var(--u) * 15))/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.ml-round b { border-radius: 999px; background: var(--t-navy); color: var(--t-white); min-width: 1.65em; height: 1.65em; }

/* the turn: a lower third as a rounded white card on the frozen scene */
.ml-third { left: calc(var(--u) * 14); right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); height: max(64px, calc(var(--u) * 92));
  background: var(--t-white); border: 3px solid var(--t-navy); border-radius: 20px; padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 26); }
.ml-third-n .ml-num { color: var(--t-navy); }
.ml-third-n span { text-transform: uppercase; letter-spacing: .14em; color: var(--t-label); }
.ml-third-line { color: var(--t-navy); font-weight: 700; }
.ml-btn-go .ml-prog { height: max(3px, calc(var(--u) * 5)); background: var(--t-ice); }
.ml-btn-go:hover .ml-prog, .ml-btn-go:focus-visible .ml-prog { background: var(--t-navy); }

/* the result card: white ground, 3px navy border, 24px corners; the two rounds as tinted panels, the win in navy */
.ml-dim.is-on { opacity: .9; }
.ml-card.is-final { left: calc(var(--u) * 24); bottom: calc(var(--u) * 24); background: var(--t-white); border: 3px solid var(--t-navy); border-radius: 24px; }
.ml-eyebrow { color: var(--t-label); letter-spacing: .14em; }
.ml-eyebrow i { color: var(--t-muted); }
.ml-delta { border-radius: 999px; background: var(--t-ice); color: var(--t-navy); padding: calc(var(--u) * 5) calc(var(--u) * 12); }
.ml-cmp { align-items: stretch; gap: calc(var(--u) * 10); }
.ml-cmp > div { align-content: start; padding: calc(var(--u) * 14) calc(var(--u) * 18); border-radius: 16px; background: var(--t-tint); }
.ml-cmp span { color: var(--t-label); letter-spacing: .14em; }
.ml-cmp-a .ml-num { color: var(--t-navy); }
.ml-cmp-b { background: var(--t-navy) !important; }
.ml-cmp-b span { color: var(--t-sky); }
.ml-cmp-b .ml-num { color: var(--t-white); }
.ml-cmp-b small { color: var(--t-ice); }
.ml-cmp-to { align-self: center; padding-bottom: 0 !important; color: var(--t-navy); }
.ml-bar { height: max(6px, calc(var(--u) * 10)); border-radius: 999px; background: var(--t-tint); overflow: hidden; }
.ml-bar u { border-radius: 999px; background: var(--t-navy); }
.ml-track .is-a u { background: var(--t-sky); }
.ml-line { color: var(--t-navy); font-weight: 700; }
.ml-board { color: var(--t-navy); }
.ml-peer { color: var(--t-muted); }

/* buttons: the primary is a navy pill (ice on hover); the secondaries are white pills with a navy border */
.ml-btn { border-radius: 9999px !important; border: 3px solid var(--t-navy) !important; background: var(--t-navy); color: var(--t-white); font-weight: 700; }
.ml-btn:hover, .ml-btn:focus-visible { background: var(--t-ice) !important; color: var(--t-navy) !important; box-shadow: none; }
.ml-btn.is-done { background: var(--t-ice); color: var(--t-navy); }
.ml-q { background: var(--t-white); color: var(--t-navy); border: 3px solid var(--t-navy); font-weight: 700; }
.ml-q:focus-visible { background: var(--t-ice); color: var(--t-navy); }
@media (hover: hover) { .ml-q:hover { background: var(--t-ice); color: var(--t-navy); } }
.ml-q[aria-expanded="true"] { background: var(--t-navy); color: var(--t-white); }

/* panels inside the card: challenge link, email form, seat question */
.ml-msg { color: var(--t-navy); }
.ml-input { background: var(--t-white); color: var(--t-navy); border: 3px solid var(--t-navy); border-radius: 999px; padding: 0 18px !important; }
.ml-input:focus { outline: none; box-shadow: 0 0 0 3px var(--t-ice); }
.ml-err { color: var(--t-navy); }
.ml-consent, .ml-opt { color: var(--t-muted); }
.ml-seat p { color: var(--t-navy); font-weight: 700; }
.ml-chip { background: var(--t-white); color: var(--t-navy); border: 3px solid var(--t-navy); font-weight: 700; }
.ml-chip.is-skip { border-color: var(--t-mist); color: var(--t-muted); }
.ml-chip:focus-visible { background: var(--t-ice); color: var(--t-navy); }
@media (hover: hover) { .ml-chip:hover { background: var(--t-ice); color: var(--t-navy); } }

/* the attract card: one white pill, as Catch the Lead's "Play the point" tag: the title and Play */
.ml-card.is-attract-card { left: calc(var(--u) * 18); bottom: calc(var(--u) * 18); flex-direction: row; align-items: center; gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 24); background: var(--t-white); border: 3px solid var(--t-navy); border-radius: 9999px; }
.ml-card.is-attract-card .ml-eyebrow { display: none; }
.ml-card.is-attract-card .ml-card-title { font-size: max(15px, calc(var(--u) * 22)); color: var(--t-navy); white-space: nowrap; }
.ml-card.is-attract-card .ml-btn { min-height: max(40px, calc(var(--u) * 48)); }

/* the how-to-play card (engine: def.how): centred on the held, dimmed scene; title, one goal, up to three numbered steps, Start */
.ml-stage[data-phase="intro"] > .ml-svg, .ml-stage[data-phase="intro"] > .ml-svg * { pointer-events: none !important; }
.ml-dim.is-on.is-intro { opacity: .78; }
.ml-card.is-intro { inset: 0; margin: auto; width: calc(var(--u) * 470); height: fit-content; max-height: calc(100% - var(--u) * 32); overflow: auto;
  flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 12); padding: calc(var(--u) * 30) calc(var(--u) * 34) calc(var(--u) * 32);
  background: var(--t-white); color: var(--t-navy); border: 3px solid var(--t-navy); border-radius: 24px; text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ml-card.is-intro .ml-card-title { font-size: max(22px, calc(var(--u) * 34)); font-weight: 700; color: var(--t-navy); letter-spacing: -.02em; }
.ml-how-goal { margin: 0; font-size: max(16px, calc(var(--u) * 19)); line-height: 1.35; font-weight: 700; color: var(--t-navy); text-wrap: pretty; }
.ml-how-steps { list-style: none; margin: calc(var(--u) * 4) 0 calc(var(--u) * 8); padding: 0; display: grid; gap: calc(var(--u) * 10); }
.ml-how-steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: calc(var(--u) * 12);
  font-size: max(15px, calc(var(--u) * 17)); line-height: 1.35; font-weight: 600; color: var(--t-muted); text-wrap: pretty; }
.ml-how-steps b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-top: -.12em; border-radius: 999px;
  background: var(--t-tint); border: 2px solid var(--t-navy); color: var(--t-navy); font-size: .85em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-card.is-intro .ml-btn-start { min-width: calc(var(--u) * 160); }
.ml-stage.is-phone .ml-card.is-intro { width: calc(var(--u) * 560); padding: calc(var(--u) * 26) calc(var(--u) * 32); gap: calc(var(--u) * 10); }

/* the demo (engine: def.demo): a quiet "Watch the demo" link under Start; during the demo a caption in the cue tag style
   (navy pill, white bold type) at the bottom centre and a small Skip text link where the points pill sits */
.ml-stage[data-phase="demo"] > .ml-svg, .ml-stage[data-phase="demo"] > .ml-svg * { pointer-events: none !important; }
.ml-demo-link { align-self: flex-start; min-height: 40px; margin: calc(var(--u) * -4) 0 calc(var(--u) * -10); padding: 0 calc(var(--u) * 4);
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--t-muted);
  font: 600 max(13px, min(15px, calc(var(--u) * 15))) "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline; text-decoration-color: var(--t-ice); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ml-demo-link:focus-visible { color: var(--t-navy); outline: 3px solid var(--t-ice); outline-offset: 0; }
@media (hover: hover) { .ml-demo-link:hover { color: var(--t-navy); text-decoration-color: var(--t-navy); } }
.ml-demo-cap { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--u) * 20); transform: translateX(-50%); max-width: calc(100% - var(--u) * 40);
  box-sizing: border-box; padding: calc(var(--u) * 9) calc(var(--u) * 20); border-radius: 999px; background: var(--t-navy); color: var(--t-white);
  font: 700 max(15px, calc(var(--u) * 18))/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; text-align: center; pointer-events: none; }
.ml-demo-cap[hidden] { display: none; }
.ml-demo-skip { position: absolute; z-index: 5; top: calc(var(--u) * 14); right: calc(var(--u) * 14); min-height: 40px; min-width: 56px;
  padding: 0 calc(var(--u) * 12); background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--t-muted);
  font: 600 max(13px, min(16px, calc(var(--u) * 16))) "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline; text-decoration-color: var(--t-ice); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ml-demo-skip:focus-visible { color: var(--t-navy); outline: 3px solid var(--t-ice); outline-offset: 0; }
@media (hover: hover) { .ml-demo-skip:hover { color: var(--t-navy); text-decoration-color: var(--t-navy); } }
.ml-stage.is-phone .ml-demo-link, .ml-stage.is-phone .ml-demo-skip { min-height: 44px; }

/* ---- the result card, built to close (10 Oct): one primary action at full width, everything else quiet ---- */
.ml-card.is-final { gap: calc(var(--u) * 12); padding: calc(var(--u) * 26) calc(var(--u) * 28); }
.ml-card.is-final .ml-num { font-size: max(36px, calc(var(--u) * 64)); }
.ml-card.is-final .ml-cmp > div { padding: calc(var(--u) * 10) calc(var(--u) * 16); }
.ml-card.is-final .ml-btn-cta { width: 100%; min-height: max(48px, calc(var(--u) * 60)); font-size: max(16px, min(20px, calc(var(--u) * 19))); gap: calc(var(--u) * 12); }
/* the secondaries: one row of small text links with icons, not pills */
.ml-card.is-final .ml-sec-quiet { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 calc(var(--u) * 14); margin-top: calc(var(--u) * -4); }
.ml-card.is-final .ml-q { min-height: 40px; padding: 0 calc(var(--u) * 8); background: none; border: 0; border-radius: 8px; color: var(--t-muted);
  font: 600 max(13px, min(15px, calc(var(--u) * 14))) "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: underline; text-decoration-color: var(--t-ice);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ml-card.is-final .ml-q svg { width: 1em; height: 1em; }
.ml-card.is-final .ml-q:focus-visible { background: none; color: var(--t-navy); outline: 3px solid var(--t-ice); outline-offset: 0; }
@media (hover: hover) { .ml-card.is-final .ml-q:hover { background: none; color: var(--t-navy); text-decoration-color: var(--t-navy); } }
.ml-card.is-final .ml-q[aria-expanded="true"] { background: none; color: var(--t-navy); text-decoration-color: var(--t-navy); }
.ml-card.is-final .ml-panel > :first-child { margin-top: 0; }
.ml-card.is-open .ml-cmp > div { padding-block: calc(var(--u) * 6); }
.ml-stage.is-phone .ml-card.is-final { padding: calc(var(--u) * 20) calc(var(--u) * 24); gap: calc(var(--u) * 10); }
.ml-stage.is-phone .ml-card.is-final .ml-num { font-size: max(32px, calc(var(--u) * 58)); }
.ml-stage.is-phone .ml-card.is-final .ml-q { min-height: 44px; }
.ml-stage.is-phone .ml-card.is-final .ml-btn-cta { min-height: max(48px, calc(var(--u) * 66)); }
.ml-card.is-final > .ml-eyebrow, .ml-card.is-final p { max-width: none; }

/* ---- points (engine: api.react): a quiet counter in the HUD, a "+120" tag at the move, one line on the result card ---- */
.ml-pts { position: absolute; top: calc(var(--u) * 16); right: calc(var(--u) * 16); display: inline-flex; align-items: baseline; gap: .3em;
  height: max(28px, calc(var(--u) * 36)); padding: 0 calc(var(--u) * 14); box-sizing: border-box; align-items: center;
  background: var(--t-white); color: var(--t-muted); border: 3px solid var(--t-navy); border-radius: 999px;
  font: 600 max(12px, calc(var(--u) * 13))/1 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; }
.ml-pts[hidden] { display: none; }
.ml-pts b { color: var(--t-navy); font-weight: 700; font-size: max(13px, calc(var(--u) * 15)); font-variant-numeric: tabular-nums; }
.ml-svg .ml-pop rect { fill: var(--t-navy); }
.ml-svg .ml-pop text { fill: var(--t-white); font-variant-numeric: tabular-nums; }
.ml-pts-line { margin: 0; font-size: max(14px, calc(var(--u) * 16)); line-height: 1.3; font-weight: 600; color: var(--t-muted); }
.ml-pts-line b { color: var(--t-navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-card.is-open .ml-pts-line { display: none; }