/* Propello Arcade: the WEBSITE look of the games (13 Oct 2026). Loaded after tray.css. Every rule is scoped to
   .ml-stage[data-skin="site"], which the engine writes only when mounted with opts.skin 'site' (or under a data-skin="site"
   ancestor). Without it nothing here matches and the Arcade look (tray.css, ART.md) renders exactly as before.
   The reference is the theme's master-branch games (Mesh the gears): flat bold silhouettes on a light stage, no rounded
   corners, the site's blue-grey ladder. The games keep one code path: the same role classes, restyled here.
   Palette: deep #101E28, navy #1F2A37, slate #546E7A, steel #82A2BE, light #ECEFF1, white; from the same ladder silver
   #B0BEC5 (the hand, the faintest motion stroke) and cloud #DEE0E2 (inactive, lost: master's pale grey).
   The weight: the tray's main fill (sky) becomes solid navy, its secondary fills slate and steel, and every coloured
   shape's outline takes its own fill colour, so outlined shapes read as solid silhouettes. White and tint shapes keep a
   deep outline: they are the panels and frames, as on master. */
.ml-stage[data-skin="site"] {
  --s-deep: #101E28; --s-navy: #1F2A37; --s-slate: #546E7A; --s-steel: #82A2BE; --s-silver: #B0BEC5; --s-cloud: #DEE0E2;
  --s-light: #ECEFF1; --s-white: #FFFFFF;
  /* the tray palette, remapped */
  --t-navy: var(--s-deep); --t-lead: var(--s-navy); --t-line: var(--s-slate); --t-mid: var(--s-slate); --t-sky: var(--s-navy);
  --t-ice: var(--s-steel); --t-tint: var(--s-white); --t-hand: var(--s-silver); --t-mist: var(--s-cloud); --t-white: var(--s-white);
  --t-muted: var(--s-slate); --t-label: var(--s-slate);
  /* the engine's roles */
  --deep: #101E28; --navy: #1F2A37; --slate: #546E7A; --steel: #82A2BE; --silver: #B0BEC5; --cloud: #DEE0E2; --light: #ECEFF1;
  --diamond: #82A2BE; --bg: #ECEFF1; --surface: #FFFFFF; --panel: #FFFFFF; --ink: #101E28; --text: #1F2A37; --muted: #546E7A;
  --rule: #B0BEC5; --steel-ink: #82A2BE; --live: #82A2BE; --live-ink: #101E28;
  --stage: #ECEFF1; --stage-rule: transparent;
  color-scheme: light; background: var(--s-light); border: 0; border-radius: 0;
}

/* ---- square: every HTML corner, except the pills (buttons, chips, the email field) ---- */
.ml-stage[data-skin="site"] *, .ml-stage[data-skin="site"] *::before, .ml-stage[data-skin="site"] *::after { border-radius: 0 !important; }
.ml-stage[data-skin="site"] .ml-btn, .ml-stage[data-skin="site"] .ml-input, .ml-stage[data-skin="site"] .ml-chip { border-radius: 999px !important; }
/* svg: square rectangles, mitred joins, butt ends */
.ml-stage[data-skin="site"] .ml-svg rect { rx: 0; ry: 0; }
.ml-stage[data-skin="site"] .to, .ml-stage[data-skin="site"] .to2, .ml-stage[data-skin="site"] .th-hand,
.ml-stage[data-skin="site"] .th-sleeve, .ml-stage[data-skin="site"] .th-cuff, .ml-stage[data-skin="site"] .ml-svg .ic * { stroke-linejoin: miter; }
.ml-stage[data-skin="site"] .to, .ml-stage[data-skin="site"] .to2, .ml-stage[data-skin="site"] .tm1, .ml-stage[data-skin="site"] .tm2,
.ml-stage[data-skin="site"] .tm3, .ml-stage[data-skin="site"] .tlink, .ml-stage[data-skin="site"] .th-line,
.ml-stage[data-skin="site"] .k-spoke, .ml-stage[data-skin="site"] .k-cue-br, .ml-stage[data-skin="site"] .ml-svg [class*="s-"] { stroke-linecap: butt; }
.ml-stage[data-skin="site"] .tguide { stroke-linecap: butt; stroke-dasharray: 6 6; }

/* ---- silhouettes: a coloured shape's outline is its own fill ---- */
.ml-stage[data-skin="site"] .tf-navy:is(.to, .to2) { stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .tf-lead:is(.to, .to2), .ml-stage[data-skin="site"] .tf-sky:is(.to, .to2) { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .tf-line:is(.to, .to2), .ml-stage[data-skin="site"] .tf-mid:is(.to, .to2) { stroke: var(--s-slate); }
.ml-stage[data-skin="site"] .tf-ice:is(.to, .to2) { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .tf-hand:is(.to, .to2) { stroke: var(--s-silver); }
.ml-stage[data-skin="site"] .tf-mist:is(.to, .to2) { stroke: var(--s-cloud); }
/* white and tint shapes are the panels and frames: a crisp deep line, slimmer than the tray's */
.ml-stage[data-skin="site"] .tf-white.to, .ml-stage[data-skin="site"] .tf-tint.to { stroke-width: 3.5; }
.ml-stage[data-skin="site"] .tf-white.to2, .ml-stage[data-skin="site"] .tf-tint.to2 { stroke-width: 2.5; }
/* tint is ground: on the site a white field with no line (the tray's tinted grounds read as master's white bodies) */
.ml-stage[data-skin="site"] .tf-tint:is(.to, .to2) { stroke: var(--s-white); }
/* an outline with no fill (a frame line, a seam) stays deep */

/* ---- ROLES (13 Oct 2026): classes a game adds to a shape so the site can give it master's weight. None of them has a
   rule in tray.css, so the Arcade look is untouched. ----
   tr-deep    a slab, header bar or label plate: solid deep          tr-navy   a main mass: solid navy
   tr-steel   a secondary mass: solid steel                          tr-light  an inner disc or well: light, no line
   tr-white   a body or card: white, no line                         tr-ground a backing plate the site does not need: gone
   tt-ond     type on a shape the site turns dark: light            tr-line   a frame or seam line: deep stroke only */
.ml-stage[data-skin="site"] .ml-svg .tr-deep { fill: var(--s-deep); stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .tr-navy { fill: var(--s-navy); stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .ml-svg .tr-steel { fill: var(--s-steel); stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .tr-light { fill: var(--s-light); stroke: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .tr-white { fill: var(--s-white); stroke: var(--s-white); }
.ml-stage[data-skin="site"] .ml-svg .tr-ground { fill: none; stroke: none; }
.ml-stage[data-skin="site"] .ml-svg .tr-line { fill: none; stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .tr-cloud { fill: var(--s-cloud); stroke: var(--s-cloud); }
/* a header bar that only the site draws: the game adds a rect classed 'f-none tr-deep' (f-none: invisible in the Arcade) */
/* ROLE ic-ond on a kit icon (g.ic) that sits on a deep bar: light line icon, as master's header icons */
.ml-stage[data-skin="site"] .ml-svg .ic.ic-ond .ic-b { fill: none; stroke: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic.ic-ond :is(.ic-d, .ic-l, .ic-h) { stroke: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic.ic-ond .ic-n { fill: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic.ic-ond .ic-h { fill: none; }
/* quoted text inside a line of type (inbound-marketing's answer): steel against the deep of one's own words */
.ml-stage[data-skin="site"] tspan.tf-sky { fill: var(--s-steel); }

/* the white gap around overlapping objects becomes the stage's light */
.ml-stage[data-skin="site"] .tgap, .ml-stage[data-skin="site"] .tl .tl-gap, .ml-stage[data-skin="site"] .tf-face .tf-face-gap { fill: var(--s-light); }
.ml-stage[data-skin="site"] .tgap-o { fill: var(--s-light); stroke: var(--s-light); }

/* motion, impact, guides, links */
.ml-stage[data-skin="site"] .tm1 { stroke: var(--s-slate); } .ml-stage[data-skin="site"] .tm2 { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .tm3 { stroke: var(--s-silver); }
.ml-stage[data-skin="site"] .tguide { stroke: var(--s-slate); stroke-width: 2.5; }
.ml-stage[data-skin="site"] .tlink { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .k-spoke { stroke: var(--s-deep); } .ml-stage[data-skin="site"] .k-spoke.is-steel { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .s-steel { stroke: var(--s-steel); }

/* type: deep on light; ROLE tt-ond: a label that sits on a fill the site turns dark (sky, mid, lead) reads light here.
   The class has no rule in tray.css, so the Arcade is untouched. */
.ml-stage[data-skin="site"] .tt.tt-ond, .ml-stage[data-skin="site"] .tt-s.tt-ond, .ml-stage[data-skin="site"] text.tt-ond { fill: var(--s-light); }
/* ROLE tf-ond: a detail drawn in navy on a shape the site turns dark (a stroke or fill that must stay visible) */
.ml-stage[data-skin="site"] .tf-ond { fill: var(--s-light); }
.ml-stage[data-skin="site"] .ts-ond { stroke: var(--s-light) !important; }

/* the lead token: navy disc, light person, steel ring when live, cloud when lost */
.ml-stage[data-skin="site"] .tl { color: var(--s-navy); }
.ml-stage[data-skin="site"] .tl .tl-person { fill: var(--s-light); }
.ml-stage[data-skin="site"] .tl .tl-ring { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .tl.is-lost { color: var(--s-cloud); }
.ml-stage[data-skin="site"] .tl.is-lost .tl-person { fill: var(--s-white); }
/* name tags: master's label plates, a deep square with light bold type */
.ml-stage[data-skin="site"] .tl-tag rect { fill: var(--s-deep); stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .tl-tag text { fill: var(--s-light); }

/* faces: light gap, white ground, deep ring; the portrait's treatment by data-face-tone (filters made by TrayArt) */
.ml-stage[data-skin="site"] .tf-face .tf-face-ground { fill: var(--s-white); }
.ml-stage[data-face-tone="duotone"] .tf-face image { filter: url(#tf-tone-duotone); }
.ml-stage[data-face-tone="tonal"] .tf-face image { filter: url(#tf-tone-tonal); }
.ml-stage[data-face-tone="duotone"] .tf-face.is-dim image, .ml-stage[data-face-tone="tonal"] .tf-face.is-dim image { filter: url(#tf-tone-duotone); opacity: .6; }
.ml-stage[data-skin="site"] .tf-face.is-dim .tf-face-ring { stroke: var(--s-cloud); }
.ml-stage[data-skin="site"] .tf-face.is-dim .tf-face-ground { fill: var(--s-cloud); }

/* the hand: deep sleeve, steel cuff, silver hand, deep line */
.ml-stage[data-skin="site"] .th-button { fill: var(--s-light); }
.ml-stage[data-skin="site"] .th-sliver-t { fill: var(--s-light); stroke: var(--s-light); }

/* the kit's icons: the body solid navy with light details; light tones keep deep details */
.ml-stage[data-skin="site"] .ml-svg .ic .ic-b { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-d { stroke: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-n { fill: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-l { stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-r { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .ic:is([data-tone="steel"], [data-tone="panel"], [data-tone="live"], [data-tone="ground"]) .ic-b { stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="live"] .ic-b { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .ic:is([data-tone="steel"], [data-tone="panel"], [data-tone="live"], [data-tone="ground"]) .ic-d { stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .ic:is([data-tone="steel"], [data-tone="panel"], [data-tone="live"], [data-tone="ground"]) .ic-n { fill: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="steel"] .ic-l { stroke: var(--s-slate); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="live"] .ic-l { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="ground"] .ic-l { stroke: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="lead"] .ic-b { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="mist"] .ic-b { fill: var(--s-cloud); stroke: var(--s-cloud); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-gap { fill: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-disc { fill: var(--s-navy); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-glyph { fill: var(--s-light); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-tone="mist"] .ic-disc { fill: var(--s-cloud); }
.ml-stage[data-skin="site"] .ml-svg .ic[data-icon="cursor"] .ic-d { stroke: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-svg .ic .ic-cuff { fill: var(--s-steel); }

/* two colours one game (website-design) writes as attributes: CSS wins over a presentation attribute */
.ml-stage[data-skin="site"] [stroke="#378DCE"] { stroke: var(--s-navy); }
.ml-stage[data-skin="site"] [stroke="#ABD5F3"] { stroke: var(--s-steel); }

/* ================= HTML layers ================= */
.ml-stage[data-skin="site"] .ml-clock { background: var(--s-white); }
.ml-stage[data-skin="site"] .ml-clock i { background: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-clock.is-late i { background: var(--s-slate); }
.ml-stage[data-skin="site"] .ml-round, .ml-stage[data-skin="site"] .ml-pts { background: var(--s-white); border: 0; }
.ml-stage[data-skin="site"] .ml-round b { background: var(--s-deep); color: var(--s-light); }
.ml-stage[data-skin="site"] .ml-third { background: var(--s-white); border: 0; border-top: 4px solid var(--s-deep); }
.ml-stage[data-skin="site"] .ml-card.is-final, .ml-stage[data-skin="site"] .ml-card.is-intro,
.ml-stage[data-skin="site"] .ml-card.is-attract-card { background: var(--s-white); border: 0; box-shadow: none; }
.ml-stage[data-skin="site"] .ml-card.is-final, .ml-stage[data-skin="site"] .ml-card.is-intro { border-top: 4px solid var(--s-deep); }
.ml-stage[data-skin="site"] .ml-dim { background: var(--s-light); }
.ml-stage[data-skin="site"] .ml-cmp > div { background: var(--s-light); }
.ml-stage[data-skin="site"] .ml-cmp-b { background: var(--s-deep) !important; }
.ml-stage[data-skin="site"] .ml-cmp-b span { color: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-cmp-b small { color: var(--s-silver); }
.ml-stage[data-skin="site"] .ml-delta { background: var(--s-deep); color: var(--s-light); }
.ml-stage[data-skin="site"] .ml-bar { background: var(--s-light); }
.ml-stage[data-skin="site"] .ml-track .is-a u { background: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-how-steps b { background: var(--s-deep); border-color: var(--s-deep); color: var(--s-light); }
.ml-stage[data-skin="site"] .ml-btn { border-color: var(--s-deep) !important; background: var(--s-deep); color: var(--s-white); }
.ml-stage[data-skin="site"] .ml-btn:hover, .ml-stage[data-skin="site"] .ml-btn:focus-visible { background: var(--s-navy) !important; border-color: var(--s-navy) !important; color: var(--s-white) !important; }
.ml-stage[data-skin="site"] .ml-btn.is-done { background: var(--s-steel); color: var(--s-deep); }
.ml-stage[data-skin="site"] .ml-q:focus-visible, .ml-stage[data-skin="site"] .ml-chip:focus-visible { background: var(--s-light); }
@media (hover: hover) { .ml-stage[data-skin="site"] .ml-q:hover, .ml-stage[data-skin="site"] .ml-chip:hover { background: var(--s-light); } }
.ml-stage[data-skin="site"] .ml-q[aria-expanded="true"] { background: var(--s-deep); color: var(--s-white); }
.ml-stage[data-skin="site"] .ml-card.is-final .ml-q { text-decoration-color: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-input:focus { box-shadow: 0 0 0 3px var(--s-steel); }
.ml-stage[data-skin="site"] .ml-demo-cap { background: var(--s-deep); }
.ml-stage[data-skin="site"] :is(.ml-demo-link, .ml-demo-skip) { text-decoration-color: var(--s-steel); }
.ml-stage[data-skin="site"] .ml-svg .ml-pop rect { fill: var(--s-deep); }