/* ======================================================================
   Sekond — the Arcade look's own rules (#1030, first piece: the chrome and
   the card language). Every selector is scoped to html[data-sk-theme="arcade"]
   so Original never reads a line of this file. Tokens only (test_tokens_only).

   The hue: each section owns one (tokens.css --hue-*); nav.js writes the
   page's section on <html data-sk-section>, a card may name its own with
   data-hue. --hue / --hue-tint / --hue-ink are what the rules read.
====================================================================== */
html[data-sk-theme="arcade"] { --hue: var(--accent-text); --hue-tint: var(--accent-tint); --hue-ink: var(--accent-ink); --card-pad: var(--sp-4); }
html[data-sk-theme="arcade"][data-sk-section="entrainement"],
html[data-sk-theme="arcade"] [data-hue="entrainement"] { --hue: var(--hue-entrainement); --hue-tint: var(--hue-entrainement-tint); --hue-ink: var(--hue-entrainement-ink); }
html[data-sk-theme="arcade"][data-sk-section="lateam"],
html[data-sk-theme="arcade"] [data-hue="lateam"] { --hue: var(--hue-team); --hue-tint: var(--hue-team-tint); --hue-ink: var(--hue-team-ink); }
html[data-sk-theme="arcade"][data-sk-section="tournois"],
html[data-sk-theme="arcade"] [data-hue="tournois"] { --hue: var(--hue-tournois); --hue-tint: var(--hue-tournois-tint); --hue-ink: var(--hue-tournois-ink); }
html[data-sk-theme="arcade"][data-sk-section="moi"],
html[data-sk-theme="arcade"] [data-hue="moi"] { --hue: var(--hue-moi); --hue-tint: var(--hue-moi-tint); --hue-ink: var(--hue-moi-ink); }
html[data-sk-theme="arcade"] [data-hue="accent"] { --hue: var(--accent-text); --hue-tint: var(--accent-tint); --hue-ink: var(--accent-ink); }

/* ── The tab bar: the active glyph on a tinted disc of its section hue ── */
html[data-sk-theme="arcade"] .sk-tabbar { background: var(--bg-elevated); border-top: 1px solid var(--hairline); }
html[data-sk-theme="arcade"] .sk-tabbar__item { color: var(--text-muted); font-weight: 500; }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-section="accueil"]      { --tab-hue: var(--accent-text);      --tab-tint: var(--accent-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-section="entrainement"] { --tab-hue: var(--hue-entrainement); --tab-tint: var(--hue-entrainement-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-section="lateam"]       { --tab-hue: var(--hue-team);         --tab-tint: var(--hue-team-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-section="tournois"]     { --tab-hue: var(--hue-tournois);     --tab-tint: var(--hue-tournois-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-section="moi"]          { --tab-hue: var(--hue-moi);          --tab-tint: var(--hue-moi-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__icon { width: 24px; height: 24px; box-sizing: content-box; padding: 3px 12px; border-radius: var(--radius-pill);
                                                 transition: background var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); }
html[data-sk-theme="arcade"] .sk-tabbar__item--active { color: var(--tab-hue); font-weight: 600; }
html[data-sk-theme="arcade"] .sk-tabbar__item--active .sk-tabbar__icon { background: var(--tab-tint); }
html[data-sk-theme="arcade"] .sk-tabbar__item:active .sk-tabbar__icon { transform: scale(0.97); }
html[data-sk-theme="arcade"] .sk-tabbar__item[data-dot="true"]::after { background: var(--tab-hue); }

/* ── The strip (640 px up) and the sub-tabs take the section's hue ── */
html[data-sk-theme="arcade"] .sk-topbar__nav-item--active { border-bottom-color: var(--hue); }
html[data-sk-theme="arcade"] .sk-subtabs__item--active { border-bottom-color: var(--hue); }
html[data-sk-theme="arcade"] .sk-subtabs__item[data-dot="true"]::after { background: var(--hue); }

/* ── Cards: 22 px corners, one shadow, a tinted band on top where the card
      opens with its tag (the first .tag, or the hub's tag row) ── */
html[data-sk-theme="arcade"] :is(.home-card, .hub-card, .tournament, .se-block, .sk-card) {
  border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
}
html[data-sk-theme="arcade"] :is(.home-card, .hub-card) { padding: var(--card-pad); overflow: hidden; }
html[data-sk-theme="arcade"] .home-card { border-left: 1px solid var(--hairline); }
html[data-sk-theme="arcade"] :is(.home-card > .tag:first-child, .hub-card > .hub-card__tags:first-child) {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--sp-3);
  padding: 10px var(--card-pad);
  background: var(--hue-tint); color: var(--hue);
}
html[data-sk-theme="arcade"] .hub-card__tags .tag { color: var(--hue); }
html[data-sk-theme="arcade"] .hub-card__tags .tag--right { color: var(--text-secondary); }
html[data-sk-theme="arcade"] :is(.home-card__title, .hub-card__title, .tournament__title, .se-block__title, .se-done__title) {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.01em;
}
html[data-sk-theme="arcade"] .hub-card__title { font-size: 20px; }
html[data-sk-theme="arcade"] .home-card__title { font-size: 20px; }
html[data-sk-theme="arcade"] .tournament { padding: var(--card-pad); }
html[data-sk-theme="arcade"] .se-block { border-left-width: 6px; }

/* ── Buttons, chips, inputs: the shapes of the look ── */
html[data-sk-theme="arcade"] .sk-btn { border-radius: var(--radius-btn); height: 52px; font-weight: 700; }
html[data-sk-theme="arcade"] .sk-btn--ghost { background: var(--surface); color: var(--text-primary); border: 1px solid var(--hairline); }
html[data-sk-theme="arcade"] .sk-chip { min-height: 40px; padding: 9px var(--sp-4); font-weight: 500; border: 1px solid var(--hairline); }
html[data-sk-theme="arcade"] :is(.sk-chip--active, .sk-chip[aria-pressed="true"], .sk-chip[data-active="1"], .sk-chip--primary, .sk-chip.sel) {
  border-color: var(--hue); color: var(--hue); background: var(--hue-tint);
}
/* a chip's sub-line (its .tag) follows the chip: the Original fill turned it to the ink, the tint needs the hue */
html[data-sk-theme="arcade"] :is(.sk-chip--active, .sk-chip[aria-pressed="true"], .sk-chip[data-active="1"]) .tag { color: var(--hue); opacity: .85; }
html[data-sk-theme="arcade"] .sk-chip .tag { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .sk-input { border-radius: var(--radius-input); background: var(--bg-input); height: 48px; }

/* ── The mono tag keeps its place; inside a band it is the hue ── */
html[data-sk-theme="arcade"] .tag--accent { color: var(--accent-text); }

/* ── Paper: a few surfaces assume dark in the pages; the look sets them right ── */
html[data-sk-theme="arcade"][data-sk-mode="light"] :is(.sk-sheet__content, .se-block, .tournament) { background: var(--surface); }
html[data-sk-theme="arcade"][data-sk-mode="light"] .sk-topbar { background: var(--bg-translucent); }

/* ======================================================================
   Accueil (#1030, piece 2). The home's own blocks take the card language:
   side gutters, the theme of the week and La Team as cards of their hue,
   the live dot on the tournament card, the coach's action zone softened.
====================================================================== */
/* flex: none — #main-screen is a flex column; a card that clips its band
   (overflow hidden) would otherwise be allowed to shrink below its content. */
html[data-sk-theme="arcade"] :is(.home-card, .home-theme, .home-team) { margin: var(--sp-4) var(--sp-4) var(--sp-2); flex: none; }
@media (min-width: 640px)  { html[data-sk-theme="arcade"] :is(.home-card, .home-theme, .home-team) { margin-left: var(--sp-6); margin-right: var(--sp-6); max-width: 720px; } }
@media (min-width: 1024px) { html[data-sk-theme="arcade"] :is(.home-card, .home-theme, .home-team) { margin-left: var(--sp-8); margin-right: var(--sp-8); } }
html[data-sk-theme="arcade"] .home-card__body { font-size: var(--fs-body); }
html[data-sk-theme="arcade"] .home-card__meta { color: var(--text-secondary); }

/* The theme of the week: a card in the Entraînement hue, its tag as the band */
html[data-sk-theme="arcade"] .home-theme { padding: var(--card-pad); background: var(--surface); border: 1px solid var(--hairline);
                                           border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
html[data-sk-theme="arcade"] .home-theme > .home-theme__tag:first-child {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--sp-3); padding: 10px var(--card-pad);
  background: var(--hue-tint); color: var(--hue);
}
html[data-sk-theme="arcade"] .home-theme__tag::before { background: var(--hue); }
html[data-sk-theme="arcade"] .home-theme__title { font-weight: var(--display-weight); letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] .home-theme__meta { color: var(--text-secondary); }

/* La Team: the card in coral, the bars in the hue (own row and the group), the reached state too */
html[data-sk-theme="arcade"] .home-team { padding: var(--card-pad); background: var(--surface); border: 1px solid var(--hairline);
                                          border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .home-team__defi-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] .home-team__defi .tag { color: var(--hue); }
html[data-sk-theme="arcade"] .home-team__bar { height: 8px; border-radius: var(--radius-pill); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .home-team__bar > i { border-radius: var(--radius-pill); }
html[data-sk-theme="arcade"] .home-team__bar > i { background: var(--hue); }
html[data-sk-theme="arcade"] .home-team__list li:not(.home-team__me) .home-team__bar > i { background: var(--text-muted); }   /* bars, not a scoreboard (#692) */
html[data-sk-theme="arcade"] .home-team--reached { border-color: var(--hue); }
html[data-sk-theme="arcade"] :is(.home-team--reached .home-team__defi-label, .home-team__seen--yes, .home-team__extra--done .home-team__num, .home-team__all--done .home-team__num) { color: var(--hue); }
html[data-sk-theme="arcade"] .home-team__num { color: var(--text-secondary); }

/* The coup brillant and the players' list */
html[data-sk-theme="arcade"] .home-brillant__board { border-radius: var(--radius-input); }
html[data-sk-theme="arcade"] .home-brillant__mark { color: var(--accent-text); }
html[data-sk-theme="arcade"] .home-joueurs__pill { color: var(--hue); }

/* The tournament card during a tournament: a live dot in the hue, still only when motion is welcome */
html[data-sk-theme="arcade"][data-sk-register="tournoi"] #home-tournoi > .tag:first-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: 0 0 auto;
  animation: sk-live 1.8s var(--ease-out) infinite;
}
@keyframes sk-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html[data-sk-theme="arcade"] #home-tournoi > .tag:first-child::before { animation: none; } }

/* The coach's and the follower's action zone: the headline in the display face, the aside as a soft card */
html[data-sk-theme="arcade"] .home-between__headline { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; }
html[data-sk-theme="arcade"] .home-between__sub { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .home-active-prep { margin: var(--sp-4) 0 0; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--hairline);
                                                 border-radius: var(--radius-card); border-top: 1px solid var(--hairline); }
html[data-sk-theme="arcade"] .home-active-prep details > summary::after { color: var(--hue); }

/* ======================================================================
   Entraînement (#1030, piece 3): the hub, the lesson page, the séance and
   « Et après ? », Révisions and the Bibliothèque. Amber is the section's
   hue (data-sk-section); correctness stays teal (the accent) on purpose.
====================================================================== */
/* The eyebrow above each page title: the hue, with its dot */
html[data-sk-theme="arcade"] :is(.hub, .pg, .se-head, #ex-listview, .tournois, #parties-hero, .jp, .pr-head, .profil-hero, .stub, .co, .re) > .tag:first-child { color: var(--hue); display: inline-flex; align-items: center; gap: var(--sp-2); }
html[data-sk-theme="arcade"] :is(.hub, .pg, .se-head, #ex-listview, .tournois, #parties-hero, .jp, .pr-head, .profil-hero, .stub, .co, .re) > .tag:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
html[data-sk-theme="arcade"] :is(.hub__heading, .pg__heading, .se-head__title, .ex__heading) { font-weight: var(--display-weight); letter-spacing: -0.02em; }

/* The hub: the week's plan as a card with its band, bars and stops in the hue, the tiles */
html[data-sk-theme="arcade"] .hub-plan { padding: var(--card-pad); background: var(--surface); border: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
                                         border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: var(--sp-4); }
html[data-sk-theme="arcade"] .hub-plan > .hub-card__tags:first-child { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--sp-3); padding: 10px var(--card-pad); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .hub-plan > .hub-card__tags:first-child .tag { color: var(--hue); }
html[data-sk-theme="arcade"] .hub-plan__line { font-size: var(--fs-body); color: var(--text-secondary); }
html[data-sk-theme="arcade"] .hub-card__bar { height: 8px; border-radius: var(--radius-pill); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .hub-card__bar > i { background: var(--hue); border-radius: var(--radius-pill); }
html[data-sk-theme="arcade"] .hub-card__nums { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .hub-card__nums b { color: var(--hue); }
html[data-sk-theme="arcade"] .hub-card__go { color: var(--hue); font-weight: 600; }
html[data-sk-theme="arcade"] .hub-stop i { width: 12px; height: 12px; }
html[data-sk-theme="arcade"] .hub-stop--done i { background: var(--hue); border-color: var(--hue); }
html[data-sk-theme="arcade"] .hub-stop--current i { border-color: var(--hue); box-shadow: 0 0 0 3px var(--hue-tint); }
html[data-sk-theme="arcade"] .hub-card__link span:last-child { color: var(--hue); }
html[data-sk-theme="arcade"] .tile { border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .tile__glyph { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: var(--radius-input); background: var(--hue-tint); color: var(--hue); }
html[data-sk-theme="arcade"] .tile__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; }
html[data-sk-theme="arcade"] .tile__sub { color: var(--text-secondary); }

/* The lesson page: each lesson a card, the coach's line a tinted quote box, the positions as soft tiles */
html[data-sk-theme="arcade"] .ex__lesson { border-top: 0; padding: var(--card-pad); margin: 0 0 var(--sp-4); background: var(--surface); border: 1px solid var(--hairline);
                                           border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .ex__lesson--here { outline: 2px solid var(--hue); outline-offset: 0; border-color: transparent; }
html[data-sk-theme="arcade"] .ex__lesson-title { font-weight: var(--display-weight); font-size: 20px; }
html[data-sk-theme="arcade"] .ex__lesson-date { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .ex__lesson-notes { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--hue); border-left-width: 1px; border-radius: var(--radius-input);
                                                 background: var(--hue-tint); color: var(--text-primary); font-size: var(--fs-body); }
html[data-sk-theme="arcade"] .ex__puz { border-radius: var(--radius-btn); background: var(--surface-raised); padding: var(--sp-2); }
html[data-sk-theme="arcade"] .ex__puz-board { border-radius: 10px; overflow: hidden; }
html[data-sk-theme="arcade"] .ex__puz--done { border-color: var(--accent-text); }
html[data-sk-theme="arcade"] :is(.ex__puz--done .ex__puz-state, .ex__hint--ok) { color: var(--accent-text); }
html[data-sk-theme="arcade"] .ex__puz--todo .ex__puz-state { color: var(--hue); }
html[data-sk-theme="arcade"] button.ex__puz:hover { border-color: var(--hue); }
html[data-sk-theme="arcade"] .ex__coach { border-radius: var(--radius-card); border-left: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-primary); }
html[data-sk-theme="arcade"] .ex-stat > summary::after { color: var(--hue); }
html[data-sk-theme="arcade"] .ex-stat__meta { color: var(--text-secondary); }

/* The séance: the format chips, the card and the blocks with a thicker edge, the steps, the timer, the end */
html[data-sk-theme="arcade"] .se-format { border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--hairline); min-height: 56px; }
html[data-sk-theme="arcade"] .se-format[aria-pressed="true"] { border: 2px solid var(--hue); background: var(--hue-tint); color: var(--hue); }
html[data-sk-theme="arcade"] .se-format__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; }
html[data-sk-theme="arcade"] .se-card { background: var(--surface); border: 1px solid var(--hairline); border-left: 6px solid var(--hue); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .se-card__chapter { font-weight: var(--display-weight); letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] .se-step { height: 6px; }
html[data-sk-theme="arcade"] :is(.se-step--done, .se-step--active) { background: var(--hue); }
html[data-sk-theme="arcade"] .se-blocklabel { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .se-preview__chev { color: var(--hue); }
html[data-sk-theme="arcade"] .se-timer { border-radius: var(--radius-input); background: var(--surface); }
html[data-sk-theme="arcade"] .se-tac-count { color: var(--hue); font-family: var(--font-mono); font-size: 12.5px; }
html[data-sk-theme="arcade"] :is(.se-tac-hint--ok, .se-qz-opt[data-state="ok"], .se-feedback__move) { color: var(--accent-text); }
html[data-sk-theme="arcade"] .se-qz-opt[data-state="ok"] { border-color: var(--accent-text); }
html[data-sk-theme="arcade"] .se-qz-exp { border-radius: var(--radius-input); border-left-width: 1px; border: 1px solid var(--accent-text); background: var(--accent-tint); }
html[data-sk-theme="arcade"] .se-feedback { border-radius: var(--radius-input); }
html[data-sk-theme="arcade"] .se-return-title { font-family: var(--font-display); font-weight: var(--display-weight); }
/* « Et après ? »: the bilan as a card with the proud mascot, the next step as a card edged in the hue */
html[data-sk-theme="arcade"] .se-done { text-align: left; padding: var(--card-pad); margin-top: var(--sp-4); background: var(--surface); border: 1px solid var(--hairline);
                                        border-radius: var(--radius-card); box-shadow: var(--shadow-card); position: relative; }
html[data-sk-theme="arcade"] .se-done__title { font-weight: var(--display-weight); letter-spacing: -0.02em; padding-right: 72px; }
html[data-sk-theme="arcade"] .se-done__mascot { display: block; position: absolute; top: var(--card-pad); right: var(--card-pad); width: 44px; height: 66px; padding: 6px 10px;
                                                box-sizing: content-box; border-radius: var(--radius-input); background: var(--hue-tint); color: var(--hue); }
html[data-sk-theme="arcade"][data-sk-register="tournoi"] .se-done__mascot { display: none; }   /* no celebration in the Tournoi register (brand §11) */
html[data-sk-theme="arcade"] .se-done__summary { margin-left: 0; max-width: none; }
html[data-sk-theme="arcade"] .se-done__delta { line-height: 2.2; }
html[data-sk-theme="arcade"] .se-delta { border: 1px solid transparent; font-family: var(--font-mono); font-weight: 600; }
html[data-sk-theme="arcade"] .se-delta.pos { border-color: var(--accent-text); color: var(--accent-text); }
html[data-sk-theme="arcade"] .se-next { padding: var(--card-pad); background: var(--surface); border: 1px solid var(--hairline); border-left: 6px solid var(--hue);
                                        border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .se-next__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; }

/* Révisions and the Bibliothèque: the rows' call in the hue */
html[data-sk-theme="arcade"] .row__cta { color: var(--hue); font-weight: 600; }
html[data-sk-theme="arcade"] .row__meta { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .pg__link { color: var(--hue); }

/* ======================================================================
   Messages and La Team (#1030, piece 4). Messages has no section of its
   own, so its hue is the accent; La Team is coral. The unread counts keep
   the accent on purpose — no red alarm badges (brand).
====================================================================== */
html[data-sk-theme="arcade"] .eq__heading { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] :is(.eq-list__title, .eq-sheet__title, .eq-empty__line) { font-weight: var(--display-weight); }

/* The inbox: each conversation a card (the swipe wrapper is the card, the row paints its surface) */
html[data-sk-theme="arcade"] .eq-swipe { margin: 0 0 var(--sp-3); border-radius: var(--radius-card); border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .eq-swipe .eq-row, html[data-sk-theme="arcade"] .eq-row { border-bottom: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border-radius: var(--radius-card); }
html[data-sk-theme="arcade"] .eq-row:focus-visible { border-radius: var(--radius-card); outline-color: var(--hue); }
html[data-sk-theme="arcade"] .eq-swipe__unread { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
html[data-sk-theme="arcade"] .eq-row__disc:not(.eq-row__disc--game) { width: 44px; height: 44px; border-radius: var(--radius-input); background: var(--accent-tint); color: var(--accent-text); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .eq-row__disc--team { background: var(--hue-team-tint); color: var(--hue-team); border: 0; }
html[data-sk-theme="arcade"] :is(.eq-row__disc--game, .eq-view__disc--game) { border-radius: 12px; }   /* the board thumbnail keeps its gradient (its text is transparent) */
html[data-sk-theme="arcade"] .eq-row__disc--play { background: transparent; color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-row__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; }
html[data-sk-theme="arcade"] .eq-row__when { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq-row--unread .eq-row__when { color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-row__arrow { color: var(--accent-text); }

/* The thread: the head's disc like the rows', the bubbles as cards, mine on the accent tint, the reactions as pills */
html[data-sk-theme="arcade"] .eq-view__back { border-radius: var(--radius-input); background: var(--surface); }
html[data-sk-theme="arcade"] .eq-view__disc:not(.eq-view__disc--game) { border-radius: 12px; background: var(--accent-tint); color: var(--accent-text); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .eq-view__disc--team { background: var(--hue-team-tint); color: var(--hue-team); border: 0; }
html[data-sk-theme="arcade"] .eq-view__titles b { font-family: var(--font-display); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .eq-msg { border-radius: var(--radius-card); background: var(--surface); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .eq-msg--mine { background: var(--accent-tint); border-color: transparent; box-shadow: none; }
html[data-sk-theme="arcade"] .eq-msg--sekond { border-left: 3px solid var(--accent-text); }
html[data-sk-theme="arcade"] .eq-msg--sekond .eq-msg__who { color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-msg--flagged { border-color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-msg__who { font-weight: 600; }
html[data-sk-theme="arcade"] .eq-msg__when { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq-msg__board { border-radius: 12px; }
html[data-sk-theme="arcade"] .eq-msg__mark { color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-msg__body .mention { color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-msg__glyph { color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-react { min-height: 32px; padding: 2px 10px; background: var(--surface-raised); }
html[data-sk-theme="arcade"] .eq-react.mine { background: var(--accent-tint); border-color: var(--accent-text); }
html[data-sk-theme="arcade"] .eq-addreact { min-height: 32px; background: var(--surface-raised); }
html[data-sk-theme="arcade"] .eq-react__n { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq-act { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq__compose { background: var(--bg); }
html[data-sk-theme="arcade"] .eq__input { border-radius: var(--radius-input); background: var(--surface); min-height: 48px; padding: 12px 14px; }
html[data-sk-theme="arcade"] .eq__input:focus { outline-color: var(--accent-text); }
html[data-sk-theme="arcade"] :is(.eq__attach, .eq__send) { width: 48px; height: 48px; border-radius: var(--radius-input); }
html[data-sk-theme="arcade"] .eq__attach { background: var(--surface); }
html[data-sk-theme="arcade"] .eq__attach--live { border-color: var(--accent-text); color: var(--accent-text); }
html[data-sk-theme="arcade"] .mention-menu { border-radius: var(--radius-input); background: var(--surface); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .eq-sheet__panel { border-radius: var(--radius-card); background: var(--surface); }

/* La Team: the roster discs in coral, the atelier, the défi, the friendly game and the atelier to review as cards */
html[data-sk-theme="arcade"] .eq-hero__member .sk-avatar { width: 44px; height: 44px; border-radius: var(--radius-input); background: var(--hue-tint); color: var(--hue); font-size: 17px; font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .eq-hero__member--coach .sk-avatar { background: transparent; color: var(--hue); border: 2px solid var(--hue); }
html[data-sk-theme="arcade"] .eq-hero__member--me .sk-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--hue); }
html[data-sk-theme="arcade"] .eq-hero__name { color: var(--text-primary); }
html[data-sk-theme="arcade"] .eq-hero__edit:hover, html[data-sk-theme="arcade"] .eq-hero__edit:focus-visible { color: var(--hue); border-color: var(--hue); }
html[data-sk-theme="arcade"] :is(.eq-atelier, .eq-defi, .eq-play, .eq-ac) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-pad); }
html[data-sk-theme="arcade"] :is(.eq-atelier .tag, .eq-defi .tag, .eq-salon .tag, .eq-ac .tag) { color: var(--hue); }
html[data-sk-theme="arcade"] :is(.eq-atelier__title, .eq-play__title, .eq-ac__title, .eq-defi__label) { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] .eq-defi__label { font-size: 20px; }
html[data-sk-theme="arcade"] .eq-atelier__notice::before { background: var(--hue); }
html[data-sk-theme="arcade"] .eq-atelier__count--open, html[data-sk-theme="arcade"] .eq-door[data-open="true"] { color: var(--hue); }
html[data-sk-theme="arcade"] .eq-defi__bar { height: 8px; border-radius: var(--radius-pill); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .eq-defi__bar > i { background: var(--hue); border-radius: var(--radius-pill); }
html[data-sk-theme="arcade"] .eq-defi__m-bar > i { background: var(--hue); }
html[data-sk-theme="arcade"] .eq-defi--reached { border-color: var(--hue); }
html[data-sk-theme="arcade"] .eq-defi--reached .eq-defi__label { color: var(--hue); }
html[data-sk-theme="arcade"] .eq-defi__num { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq-play__pawn { color: var(--hue); }
html[data-sk-theme="arcade"] .eq-play__sub b { color: var(--hue); }
html[data-sk-theme="arcade"] .eq-salon__go { color: var(--hue); font-weight: 600; }
html[data-sk-theme="arcade"] .eq-salon__when { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .eq-salon__row { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .eq-ac__seen { color: var(--hue); }

/* ======================================================================
   Tournois (#1030, piece 5): the card and its rail, the round in play, the
   capture sheet, Mes parties and the game sheet, Mes joueurs. Green is the
   section's hue; a win takes it, a loss keeps the status colour, Elo deltas
   keep the accent. The Tournoi register stays sober: no mascot here.
====================================================================== */
html[data-sk-theme="arcade"] :is(.tournois__heading, .parties__heading, .jp__heading, .tournament__bilan-rank) { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] .tournois__sub { color: var(--text-secondary); font-size: var(--fs-body); }
html[data-sk-theme="arcade"] .tournament { padding: var(--card-pad); }
html[data-sk-theme="arcade"] .tournament__meta { color: var(--text-secondary); }
/* the rail */
html[data-sk-theme="arcade"] .tl::before { background: var(--hue-tint); width: 3px; left: 5px; }
html[data-sk-theme="arcade"] .tl__dot { width: 13px; height: 13px; border-width: 2px; background: var(--surface); }
html[data-sk-theme="arcade"] .tl__step--done .tl__dot { background: var(--hue); border-color: var(--hue); }
html[data-sk-theme="arcade"] .tl__step--current .tl__dot { background: var(--hue); border-color: var(--hue); box-shadow: 0 0 0 4px var(--hue-tint); }
html[data-sk-theme="arcade"] .tl__step--current .tl__head { color: var(--hue); }
html[data-sk-theme="arcade"] .tl__badge { color: var(--hue); border-color: var(--hue); background: var(--hue-tint); border-radius: var(--radius-pill); padding: 2px 8px; }
html[data-sk-theme="arcade"] .tl__item--ready::after { color: var(--hue); }
html[data-sk-theme="arcade"] .tl__line { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .tl__live-label { color: var(--text-primary); font-size: 11px; }
html[data-sk-theme="arcade"] .tl__live-label::before { color: var(--hue); }
html[data-sk-theme="arcade"] .tl__clock { color: var(--hue); background: var(--hue-tint); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 15px; }
html[data-sk-theme="arcade"] .tl__gallery > summary::after, html[data-sk-theme="arcade"] .tl__share > summary { color: var(--hue); }
html[data-sk-theme="arcade"] .tl__game-cta { color: var(--hue); }
/* the rounds: the one in play (it carries the result chips) becomes a card edged in the hue */
html[data-sk-theme="arcade"] .tournament__round-row { padding: var(--sp-3) 0; }
html[data-sk-theme="arcade"] .tournament__round-row:has(.round-row__chips) { margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--hue); border-radius: var(--radius-card); background: var(--surface-raised); }
html[data-sk-theme="arcade"] .round-row__chips { padding-top: var(--sp-2); }
html[data-sk-theme="arcade"] .round-row__chips .sk-chip { min-height: 44px; }
html[data-sk-theme="arcade"] .round-row__result--win, html[data-sk-theme="arcade"] .round-row__status { color: var(--hue); }
html[data-sk-theme="arcade"] .round-row__link { color: var(--hue); }
html[data-sk-theme="arcade"] .round-row__feuille { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .round-row__opponent { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .round-row__badge { border-radius: var(--radius-pill); color: var(--text-secondary); }
html[data-sk-theme="arcade"] .round-chip { border-radius: var(--radius-pill); min-height: 36px; }
html[data-sk-theme="arcade"] .round-chip--ready { border-color: var(--hue); color: var(--hue); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .games-list__chip--win { background: var(--hue); color: var(--hue-ink); }
html[data-sk-theme="arcade"] .tournaments-section__heading { color: var(--hue); }
html[data-sk-theme="arcade"] .add-form input { background: var(--surface); height: 52px; }
html[data-sk-theme="arcade"] .add-form button { height: 52px; font-weight: 700; }
html[data-sk-theme="arcade"] .add-form__for select { background: var(--surface); }
html[data-sk-theme="arcade"] .tournament__suivi-qr { border-radius: var(--radius-input); }
/* Mes parties: each game a card with its result swatch in the hue, the tabs underlined in the hue */
html[data-sk-theme="arcade"] .parties-nav__item--active { color: var(--hue); border-bottom-color: var(--hue); }
html[data-sk-theme="arcade"] .parties-lib__back { color: var(--hue); }
html[data-sk-theme="arcade"] .games-list__item { border-top: 0; margin: 0 0 var(--sp-3); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
html[data-sk-theme="arcade"] .games-list__btn { padding: var(--sp-3) var(--sp-4); }
html[data-sk-theme="arcade"] .games-list__btn:hover, html[data-sk-theme="arcade"] .games-list__btn:active { background: var(--surface-raised); }
html[data-sk-theme="arcade"] .games-list__opponent { font-weight: 600; }
html[data-sk-theme="arcade"] .games-list__swatch--win { background: var(--hue); }
html[data-sk-theme="arcade"] .games-list__swatch--loss { background: var(--surface-raised); }
html[data-sk-theme="arcade"] :is(.games-list__date, .games-list__elo, .games-list__sub-meta, .games-list__acc) { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .games-list__brilliant { color: var(--accent-text); }
html[data-sk-theme="arcade"] .games-group__header { color: var(--hue); }
html[data-sk-theme="arcade"] :is(.empty-card, .famous-card) { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .famous-card__title { font-family: var(--font-display); font-weight: var(--display-weight); }
/* the game sheet and its thread */
html[data-sk-theme="arcade"] .game-detail__context { color: var(--hue); }
html[data-sk-theme="arcade"] .game-detail__result { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; }
html[data-sk-theme="arcade"] .game-detail__replay-board.cg-wrap { border-radius: 12px; }
html[data-sk-theme="arcade"] .game-detail__player-elo { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .gt-msg { border-radius: var(--radius-btn); background: var(--surface); padding: var(--sp-3) var(--sp-4); }
html[data-sk-theme="arcade"] .gt-msg--mine { background: var(--accent-tint); border-color: transparent; }
html[data-sk-theme="arcade"] .gt-msg--sekond { background: transparent; }
html[data-sk-theme="arcade"] .gt__input { border-radius: var(--radius-input); background: var(--surface); min-height: 44px; }
html[data-sk-theme="arcade"] :is(.gt__btn, .gt__send) { width: 44px; height: 44px; border-radius: var(--radius-input); }
html[data-sk-theme="arcade"] .gt__btn { background: var(--surface); }
html[data-sk-theme="arcade"] .gt-chip { background: var(--accent-tint); border-color: transparent; color: var(--accent-text); }
html[data-sk-theme="arcade"] .gt__move { color: var(--accent-text); }
/* the capture sheet: the options as tiles, the frame in the hue */
html[data-sk-theme="arcade"] .ocr-sheet { border-radius: var(--radius-card) var(--radius-card) 0 0; }
html[data-sk-theme="arcade"] .ocr-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; }
html[data-sk-theme="arcade"] .ocr-sub { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .ocr-opt { border-radius: var(--radius-btn); border-width: 1px; }
html[data-sk-theme="arcade"] .ocr-opt.sel { border-color: var(--hue); background: var(--hue-tint); color: var(--hue); }
html[data-sk-theme="arcade"] .ocr-cam { border-radius: var(--radius-card); }
html[data-sk-theme="arcade"] .ocr-cam__frame { border-color: var(--hue); border-radius: 10px; }
html[data-sk-theme="arcade"] .ocr-cam__frame::before { background: var(--hue); }
html[data-sk-theme="arcade"] .ocr-step { border-radius: var(--radius-input); background: var(--surface); }
html[data-sk-theme="arcade"] .ocr-preview { border-radius: var(--radius-input); background: var(--surface); }
/* Mes joueurs: a card per player, the player's disc in the hue */
html[data-sk-theme="arcade"] .jp-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-pad); }
html[data-sk-theme="arcade"] .jp-card--target { box-shadow: 0 0 0 2px var(--hue); }
html[data-sk-theme="arcade"] .jp-card__head .sk-avatar { width: 44px; height: 44px; border-radius: var(--radius-input); background: var(--hue-tint); color: var(--hue); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .jp-card__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; }
html[data-sk-theme="arcade"] .jp-pill { border-radius: var(--radius-pill); }
html[data-sk-theme="arcade"] .jp-pill--live { color: var(--hue); border-color: var(--hue); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .jp-row__res--win { color: var(--hue); }
html[data-sk-theme="arcade"] .jp-card__links a { color: var(--hue); font-weight: 600; }

/* ======================================================================
   Parcours, Moi (Profil · Objectif · Réglages) and the coach pages
   (#1030, piece 6). Parcours and the coach pages sit under Entraînement
   (amber); Moi is violet. Numbers in the display face where they are the
   point (the Elo on Profil); correctness and status colours untouched.
====================================================================== */
/* Parcours: the path's stops and bars in the hue, the current chapter lifted */
html[data-sk-theme="arcade"] .pr-head__title { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] .pr-head__sub { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .pr-section__tag { color: var(--hue); }
html[data-sk-theme="arcade"] :is(.pr-milestone, .pr-card) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-pad); }
html[data-sk-theme="arcade"] .pr-milestone--current { border: 2px solid var(--hue); background: var(--surface); box-shadow: 0 0 0 4px var(--hue-tint), var(--shadow-card); }
html[data-sk-theme="arcade"] :is(.pr-milestone__name, .pr-card__title) { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] :is(.pr-milestone--current .pr-milestone__name, .pr-milestone__zone, .pr-milestone__pct) { color: var(--hue); }
html[data-sk-theme="arcade"] .pr-stop-row::before { background: var(--hue-tint); width: 3px; left: 10.5px; }
html[data-sk-theme="arcade"] .pr-stop-row[data-state="past"] .pr-stop__disc { fill: var(--hue); stroke: var(--hue); }
html[data-sk-theme="arcade"] .pr-stop-row[data-state="current"] .pr-stop { color: var(--hue); }
html[data-sk-theme="arcade"] .pr-stop-row[data-state="current"] .pr-stop__disc { fill: var(--hue); stroke: var(--hue); }
html[data-sk-theme="arcade"] .pr-stop__halo { stroke: var(--hue); }
html[data-sk-theme="arcade"] .pr-bar { height: 8px; border-radius: var(--radius-pill); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .pr-bar__fill { background: var(--hue); border-radius: var(--radius-pill); }
html[data-sk-theme="arcade"] .pr-pill { border-radius: var(--radius-btn); }
html[data-sk-theme="arcade"] .pr-pill__minibar-fill { background: var(--hue); }
html[data-sk-theme="arcade"] .pr-goal-link__value, html[data-sk-theme="arcade"] .pr-review__cta { color: var(--hue); }
/* Profil: the name and the Elo in the display face, the cards, the primary platform edged in the hue */
html[data-sk-theme="arcade"] :is(.profil-hero__name, .identity__name) { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] .profil-hero__elo { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 34px; color: var(--hue); }
html[data-sk-theme="arcade"] .profil-hero__elo-lbl { color: var(--text-secondary); }
html[data-sk-theme="arcade"] :is(.profil .card, .plat-card, .goal-card) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .profil .card { padding: var(--card-pad); }
html[data-sk-theme="arcade"] .profil .card__title { font-weight: var(--display-weight); font-size: 20px; letter-spacing: -0.01em; }
html[data-sk-theme="arcade"] .plat-card--primary { border-left: 6px solid var(--hue); }
html[data-sk-theme="arcade"] .plat-card:hover { border-color: var(--hue); }
html[data-sk-theme="arcade"] .plat-card__pill { color: var(--hue); border-color: var(--hue); background: var(--hue-tint); border-radius: var(--radius-pill); padding: 2px 7px; }
html[data-sk-theme="arcade"] .objectif-row__value { color: var(--hue); }
/* Objectif and Réglages */
html[data-sk-theme="arcade"] .obj-topbar__title { font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .goal-card { padding: var(--card-pad); }
html[data-sk-theme="arcade"] .goal-card__title { font-family: var(--font-display); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .stub__heading { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] .stub__section-heading { color: var(--hue); }
html[data-sk-theme="arcade"] .stub__list { border-top: 0; padding: 0 var(--card-pad); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-sk-theme="arcade"] .stub__list li:last-child { border-bottom: 0; }
html[data-sk-theme="arcade"] .stub__list-value { color: var(--text-secondary); }
html[data-sk-theme="arcade"] .stub__action { border-radius: var(--radius-btn); background: var(--surface); min-height: 48px; }
html[data-sk-theme="arcade"] .stub__action:hover { border-color: var(--hue); color: var(--hue); }
/* The coach pages: Préparer une leçon and Suivi des élèves (amber, under Entraînement) */
html[data-sk-theme="arcade"] :is(.co__heading, .re__heading) { font-weight: var(--display-weight); letter-spacing: -0.02em; }
html[data-sk-theme="arcade"] .co-step__num { color: var(--hue); }
html[data-sk-theme="arcade"] .co-step__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; }
html[data-sk-theme="arcade"] .co-card { border-radius: var(--radius-btn); background: var(--surface); }
html[data-sk-theme="arcade"] .co-card:hover { border-color: var(--hue); }
html[data-sk-theme="arcade"] .co-card[aria-pressed="true"] { border: 2px solid var(--hue); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .co-card[aria-pressed="true"] .co-card__pick { color: var(--hue); }
html[data-sk-theme="arcade"] .co-card__board { border-radius: 10px; overflow: hidden; }
html[data-sk-theme="arcade"] .co-lesson { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-pad); margin-bottom: var(--sp-3); }
html[data-sk-theme="arcade"] .co-lesson__title { font-family: var(--font-display); font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .co-link { color: var(--hue); }
html[data-sk-theme="arcade"] .re__section-title { color: var(--hue); }
html[data-sk-theme="arcade"] .re__lesson-title { font-weight: var(--display-weight); font-size: 19px; }
html[data-sk-theme="arcade"] .re__lesson-head::after { color: var(--hue); }
html[data-sk-theme="arcade"] .re__lesson-head:hover .re__lesson-title { color: var(--hue); }
html[data-sk-theme="arcade"] .re__cell { border-radius: 8px; }
html[data-sk-theme="arcade"] .re__bartrack { border-radius: var(--radius-pill); background: var(--hue-tint); }
html[data-sk-theme="arcade"] .re__bar { border-radius: var(--radius-pill); }
/* The follower's « Lien de suivi » page: the card language only */
html[data-sk-theme="arcade"] .sv__title { font-weight: var(--display-weight); }
html[data-sk-theme="arcade"] .sv__card { border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }