/* Shared standalone Live Play UI. Loaded only by live-play/layout.html and back.html.
   Both brands use the same reboot, base and shell components (U1b); a brand changes token values only
   (tokens.css), never a rule here. */
@layer d2.reboot, d2.legacy, d2.tokens, d2.base, d2.components, d2.states, d2.utilities;
/* Legacy modules, in their former live-play.css order (S1C.2); layout first, so screen overrides can rely on it. */
@import url("layout.css") layer(d2.legacy);
@import url("foundation.css") layer(d2.legacy);
@import url("controls.css") layer(d2.legacy);
@import url("feedback.css") layer(d2.legacy);
@import url("sync-feedback.css") layer(d2.legacy);
@import url("my-games.css") layer(d2.legacy);
@import url("me-panel.css") layer(d2.legacy);

/* Nunito Sans 3.101 (SIL OFL 1.1, /vendor/fonts/nunito-sans/OFL.txt), latin + latin-ext subset, wght 400–900. */
@font-face {
  font-family: "Nunito Sans";
  src: url("../../vendor/fonts/nunito-sans/NunitoSans-wght-latinext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Local face sized to Nunito Sans's average advance and vertical metrics, so the swap moves little. */
@font-face {
  font-family: "Nunito Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 102.2%;
  ascent-override: 98.9%;
  descent-override: 34.5%;
  line-gap-override: 0%;
}

@layer d2.reboot {
  [data-brand] { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  [data-brand] *, [data-brand] *::before, [data-brand] *::after { box-sizing: border-box; }
  [data-brand] body { margin: 0; -webkit-tap-highlight-color: transparent; }
  [data-brand] :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: var(--d2-sp-2); line-height: 1.2; }
  [data-brand] :is(p, ol, ul, dl) { margin-top: 0; margin-bottom: var(--d2-sp-4); }
  [data-brand] :is(ol, ul) { padding-left: var(--d2-sp-8); }
  [data-brand] :is(b, strong) { font-weight: bolder; }
  [data-brand] small { font-size: .875em; }
  [data-brand] :is(img, svg) { vertical-align: middle; }
  [data-brand] table { border-collapse: collapse; }
  [data-brand] th { text-align: inherit; }
  [data-brand] label { display: inline-block; }
  [data-brand] :is(button, input, optgroup, select, textarea) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
  [data-brand] :is(button, select) { text-transform: none; }
  [data-brand] :is(button, [type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: button; appearance: button; }
  [data-brand] :is(button, [type="button"], [type="reset"], [type="submit"]):not(:disabled) { cursor: pointer; }
  [data-brand] textarea { resize: vertical; }
  [data-brand] fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  [data-brand] summary { display: list-item; cursor: pointer; }
}

@layer d2.base {
  [data-brand] body {
    background: var(--d2-bg);
    color: var(--d2-text);
    font-family: var(--d2-font-body);
    font-size: var(--d2-fs-body);
    line-height: var(--d2-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Landscape iPhone: keep content out of the notch (viewport-fit=cover). */
    padding-left: var(--d2-safe-left);
    padding-right: var(--d2-safe-right);
  }
  /* Families only: heading sizes stay contextual (landing hero, court cards) until their screens are restyled. */
  [data-brand] :is(h1, h2, h3, h4) { font-family: var(--d2-font-display); color: var(--d2-text); }
  [data-brand] h1 { font-weight: var(--d2-w-black); letter-spacing: var(--d2-tracking-tight); }
  [data-brand] .lp-title { font-size: var(--d2-fs-display); line-height: var(--d2-lh-display); }

  [data-brand] :is(button, a, input, select, textarea, summary):focus-visible {
    outline: var(--d2-focus-w) solid var(--d2-focus);
    outline-offset: var(--d2-focus-offset);
  }

  [data-brand] :is(.lp-primary, .lp-secondary) {
    border-radius: var(--d2-r-pill);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .lp-primary {
    min-height: var(--d2-h-cta);
    background: var(--d2-action-primary-bg);
    border: 0;
    color: var(--d2-text-on-fill);
    box-shadow: var(--d2-shadow-cta);
  }
  [data-brand] .lp-primary:is(:hover, :active) { background: var(--d2-action-primary-pressed); color: var(--d2-text-on-fill); }
  [data-brand] .lp-secondary {
    background: var(--d2-surface);
    border: var(--d2-border-control-w) solid var(--d2-border-control);
    color: var(--d2-action-quiet-fg);
  }
  [data-brand] .lp-secondary:active { background: var(--d2-surface-sunken); }
  /* Unavailable, not a faded call to action (the reason is in the text next to it): a flat neutral fill,
     no outline, so it reads neither as the primary CTA nor as an enabled secondary. */
  [data-brand] :is(.lp-primary, .lp-secondary):is(:disabled, [aria-disabled="true"]) {
    background: var(--d2-action-disabled-bg);
    border-color: transparent;
    color: var(--d2-action-disabled-fg);
    box-shadow: none;
    opacity: 1;
  }
}

@layer d2.components {
  /* One column for header, content and nav (DA-16). The legacy main is 960 px with per-width paddings. */
  [data-brand] .lp-main {
    max-width: calc(var(--d2-content-max) + 2 * var(--d2-gutter));
    padding-left: var(--d2-gutter);
    padding-right: var(--d2-gutter);
  }
  [data-brand] .d2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  [data-brand] .d2-icon { width: var(--d2-icon); height: var(--d2-icon); flex-shrink: 0; }

  /* AppHeader */
  [data-brand] .d2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d2-sp-3);
    max-width: calc(var(--d2-content-max) + 2 * var(--d2-gutter));
    margin: 0 auto;
    padding: calc(var(--d2-sp-3) + var(--d2-safe-top)) var(--d2-gutter) var(--d2-sp-2);
  }
  [data-brand] .d2-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--d2-touch-min);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-brand);
    font-weight: var(--d2-w-black);
    letter-spacing: var(--d2-tracking-tight);
    line-height: 1;
    color: var(--d2-brand-royal);
    text-decoration: none;
    white-space: nowrap;
  }
  [data-brand] .d2-brand-me { color: var(--d2-brand-me); }
  /* Club wordmark (§4): the pin keeps its own navy and amber. */
  [data-brand] .d2-brand img { width: var(--d2-brand-pin); height: var(--d2-brand-pin); margin-right: var(--d2-sp-2); }
  [data-brand] .d2-header-end { display: flex; align-items: center; gap: var(--d2-sp-2); min-width: 0; }
  [data-brand] .d2-icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--d2-touch-min);
    height: var(--d2-touch-min);
    padding: 0;
    border: 0;
    border-radius: var(--d2-r-round);
    background: var(--d2-surface);
    color: var(--d2-text);
    box-shadow: var(--d2-shadow-md), var(--d2-edge);
  }
  [data-brand] .d2-contrast-toggle[aria-pressed="true"] { background: var(--d2-toggle-on-bg); color: var(--d2-toggle-on-fg); }
  [data-brand] .d2-menu-btn { background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); box-shadow: var(--d2-shadow-md); }
  [data-brand] .d2-menu-btn:active { background: var(--d2-action-repair-pressed); }
  [data-brand] :is(.d2-menu-btn, .d2-contrast-toggle[aria-pressed="true"]):focus-visible { outline-color: var(--d2-focus); }
  /* Club account outside a game (§4): the avatar opens "Moje gry", a person icon logs in. */
  [data-brand] .d2-avatar { background: var(--d2-av-me-bg); color: var(--d2-av-me-fg); font-family: var(--d2-font-display); font-weight: var(--d2-w-black); text-decoration: none; }
  [data-brand] .d2-account { flex-shrink: 0; }
  [data-brand] .d2-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--d2-touch-min);
    min-height: var(--d2-touch-min);
    padding: 0 var(--d2-sp-3);
    border: var(--d2-border-control-w) solid var(--d2-border-control);
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface);
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    text-decoration: none;
  }
  /* compact (< 360 px, G5-2A N1): the club entry header (wordmark + sun + language + account) needs 349 px, so the
     gaps, the language pill's padding and the wordmark give way — every control stays 44 × 44. */
  @media (max-width: 359.98px) {
    [data-brand] .d2-header:has(.d2-account) { gap: var(--d2-sp-2); }
    [data-brand] .d2-header:has(.d2-account) .d2-header-end { gap: var(--d2-sp-1); }
    [data-brand] .d2-header:has(.d2-account) .d2-lang { padding: 0 var(--d2-sp-2); }
    [data-brand] .d2-header:has(.d2-account) .d2-brand { font-size: 18px; }
    [data-brand] .d2-header:has(.d2-account) .d2-brand img { margin-right: var(--d2-sp-1); }
  }
  /* Connection pill: only when the live line has a problem (d2-shell.js). Under 420 px only its icon shows; the
     words stay its accessible name and the menu's "Stan zapisu" line says the whole sentence. */
  [data-brand] .d2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--d2-touch-min);
    min-width: var(--d2-touch-min);
    padding: 0 var(--d2-sp-3);
    border: var(--d2-border-w) solid var(--d2-pending-line);
    border-radius: var(--d2-r-pill);
    background: var(--d2-pending-bg);
    color: var(--d2-pending-strong);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-bold);
    white-space: nowrap;
  }
  [data-brand] .d2-pill[data-state="error"] { border-color: var(--d2-error-line); background: var(--d2-error-bg); color: var(--d2-error-strong); }
  [data-brand] .d2-pill[data-state="connecting"] { border-color: var(--d2-border-line); background: var(--d2-info-bg); color: var(--d2-info-fg); }
  [data-brand] .d2-pill .d2-icon { width: 18px; height: 18px; }
  @media (max-width: 419.98px) {
    [data-brand] .d2-pill { justify-content: center; padding: 0; }
    [data-brand] .d2-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }

  /* BottomNav: Gra · Rundy · Tabela */
  [data-brand] .d2-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--d2-z-dock);
    display: flex;
    justify-content: center;
    padding: var(--d2-sp-2) calc(var(--d2-gutter) + var(--d2-safe-right)) calc(var(--d2-sp-2) + var(--d2-safe-bottom)) calc(var(--d2-gutter) + var(--d2-safe-left));
    background: var(--d2-surface);
    border-top: var(--d2-border-w) solid var(--d2-border-line);
  }
  [data-brand] .d2-nav a {
    flex: 1;
    max-width: calc(var(--d2-content-max) / 3);
    min-height: var(--d2-h-tab);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--d2-r-sm);
    color: var(--d2-text-muted);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-label);
    text-decoration: none;
  }
  [data-brand] .d2-nav-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 30px;
    border-radius: var(--d2-r-pill);
  }
  [data-brand] .d2-nav-icon svg { width: var(--d2-icon-nav); height: var(--d2-icon-nav); }
  [data-brand] .d2-nav a[aria-current="page"] { color: var(--d2-action-quiet-fg); }
  [data-brand] .d2-nav a[aria-current="page"] .d2-nav-icon { background: var(--d2-surface-soft); }
  @media (max-width: 359.98px) {
    [data-brand] .d2-nav-icon { height: 24px; }
  }

  /* Sheet: the modal <dialog> is the full-screen scrim, its panel the sheet (a tap on the scrim closes it). */
  [data-brand] .d2-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--d2-scrim);
    color: var(--d2-text);
    overflow: hidden;
  }
  [data-brand] .d2-sheet::backdrop { background: transparent; }
  [data-brand] .d2-sheet[open] { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
  [data-brand] .d2-sheet-panel {
    display: flex;
    flex-direction: column;
    gap: var(--d2-sp-3);
    width: 100%;
    max-width: var(--d2-content-max);
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    padding: var(--d2-sp-3) calc(var(--d2-gutter) + var(--d2-safe-right)) calc(var(--d2-sp-6) + var(--d2-safe-bottom)) calc(var(--d2-gutter) + var(--d2-safe-left));
    border-radius: var(--d2-r-lg) var(--d2-r-lg) 0 0;
    background: var(--d2-surface);
    box-shadow: var(--d2-shadow-sheet);
    transition: transform var(--d2-dur-sheet) var(--d2-ease);
  }
  @starting-style {
    [data-brand] .d2-sheet[open] .d2-sheet-panel { transform: translateY(100%); }
  }
  @media (min-width: 600px) {
    [data-brand] .d2-sheet[open] { justify-content: center; }
    [data-brand] .d2-sheet-panel { max-width: 480px; padding-bottom: var(--d2-sp-6); border-radius: var(--d2-r-lg); }
  }
  [data-brand] body:has(.d2-sheet[open]) { overflow: hidden; }
  [data-brand] .d2-sheet-handle { align-self: center; width: 40px; height: 5px; border-radius: var(--d2-r-pill); background: var(--d2-border-line); }
  [data-brand] .d2-sheet-title { margin: 0; font-size: var(--d2-fs-title); line-height: var(--d2-lh-title); font-weight: var(--d2-w-black); }
  [data-brand] .d2-sheet-close {
    align-self: center;
    min-height: var(--d2-h-btn);
    padding: 0 var(--d2-sp-6);
    border: 0;
    border-radius: var(--d2-r-pill);
    background: none;
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
  }

  /* Menu */
  [data-brand] .d2-sheet form { margin: 0; }
  [data-brand] .d2-menu-status {
    display: flex;
    align-items: flex-start;
    gap: var(--d2-sp-3);
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface-soft);
    color: var(--d2-info-fg);
  }
  [data-brand] .d2-menu-status p { margin: 0; color: var(--d2-text); }
  [data-brand] .d2-menu-status-label { font-family: var(--d2-font-display); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-menu-status .d2-menu-status-text { font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); color: var(--d2-text-2); overflow-wrap: anywhere; }
  [data-brand] .d2-menu-status-text:empty { display: none; }
  [data-brand] .d2-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--d2-sp-3);
    width: 100%;
    min-height: 56px;
    padding: var(--d2-sp-2) var(--d2-sp-4);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface);
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-body);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-name);
    text-align: center;
    text-decoration: none;
  }
  [data-brand] .d2-menu-item:active { background: var(--d2-surface-sunken); }
  [data-brand] .d2-menu-item > span:last-child { display: flex; flex-direction: column; }
  [data-brand] .d2-menu-item small { font-family: var(--d2-font-body); font-size: var(--d2-fs-small); font-weight: var(--d2-w-medium); color: var(--d2-text-muted); }

  /* ActionBanner (L1): the page's banners in the flow, never fixed. */
  [data-brand] :is(.lp-error, .lp-outbox-late p) {
    position: relative;
    margin: 0 0 var(--d2-sp-4);
    padding: var(--d2-sp-3) var(--d2-sp-4) var(--d2-sp-3) calc(var(--d2-sp-4) + var(--d2-icon) + var(--d2-sp-3));
    border: var(--d2-border-w) solid var(--d2-error-line);
    border-radius: var(--d2-r-sm);
    background: var(--d2-error-bg);
    color: var(--d2-error-strong);
    font-size: var(--d2-fs-small);
    line-height: var(--d2-lh-small);
  }
  [data-brand] :is(.lp-error, .lp-outbox-late p)::before {
    content: "";
    position: absolute;
    left: var(--d2-sp-4);
    top: calc(var(--d2-sp-3) + 0.5px);
    width: var(--d2-icon);
    height: var(--d2-icon);
    background: currentColor;
    -webkit-mask: var(--d2-mask-alert) center / contain no-repeat;
    mask: var(--d2-mask-alert) center / contain no-repeat;
  }
  [data-brand] .lp-outbox-late p { border-color: var(--d2-pending-line); background: var(--d2-pending-bg); color: var(--d2-pending-strong); }
  [data-brand] .lp-outbox-late p::before { -webkit-mask-image: var(--d2-mask-clock); mask-image: var(--d2-mask-clock); }
  [data-brand] .lp-error > :last-child { margin-bottom: 0; }
  [data-brand] :is(.lp-error, .lp-outbox-late p) a:not(.lp-primary, .lp-secondary) { color: inherit; font-weight: var(--d2-w-bold); }
  /* One banner at a time. Until the modules are up, "the page did not finish loading" is the truth and network
     notes (which promise the phone keeps scores) wait; once they are, core.css hides it. Without JS, only noscript. */
  [data-brand]:not([data-outbox="ready"]) #network-message { display: none; }
  @media (scripting: none) {
    [data-brand] .lp-outbox-late { display: none; }
  }

  /* Toasts: one line above the nav, polite, never a decision (those are banners). */
  [data-brand] :is(#live-notice, #local-sync-message) {
    position: fixed;
    left: 50%;
    bottom: calc(var(--d2-nav-h) + var(--d2-sp-3) + var(--d2-safe-bottom));
    transform: translateX(-50%);
    z-index: var(--d2-z-toast);
    width: max-content;
    max-width: min(calc(100vw - 2 * var(--d2-gutter)), var(--d2-content-max));
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border-radius: var(--d2-r-sm);
    background: var(--d2-toast-bg);
    color: var(--d2-toast-fg);
    box-shadow: var(--d2-shadow-lg);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-semi);
    line-height: var(--d2-lh-small);
  }
  [data-brand] body:has(#live-notice:not([hidden])) #local-sync-message { display: none; }
  [data-brand] .d2-toast-action { margin-left: var(--d2-sp-2); color: var(--d2-toast-fg); font-weight: var(--d2-w-bold); white-space: nowrap; }
  [data-brand] .d2-toast-action:focus-visible { outline-color: var(--d2-focus-on-fill); }
}

/* R2 — the Gra screen: RoundStatus, MyMatchCard, CourtRow/CourtTile, Dock, lobby, "Grasz dziś?" (DS §3.4–3.8, §3.14). */
@layer d2.components {
  /* Room for the fixed dock and nav on the Gra screen only (--d2-dock-h is measured by d2-shell.js; 0 when the
     dock is in the flow). Other pages keep their spacing. */
  [data-brand] .lp-main:has(.d2-dock:not(.d2-dock-static)) {
    padding-bottom: calc(var(--d2-nav-h) + var(--d2-dock-h, 0px) + var(--d2-sp-6) + var(--d2-safe-bottom));
  }
  [data-brand] :is(#live-notice, #local-sync-message) {
    bottom: calc(var(--d2-nav-h) + var(--d2-dock-h, 0px) + var(--d2-sp-3) + var(--d2-safe-bottom));
  }
  /* R3: what the browser scrolls to (the focus coming back from the score sheet, Tab, a court's status) lands above
     the dock and the nav, not under them (WCAG 2.4.11). */
  [data-brand]:has(.d2-dock:not(.d2-dock-static)) { scroll-padding-bottom: calc(var(--d2-nav-h) + var(--d2-dock-h, 0px) + var(--d2-safe-bottom)); }
  [data-brand] .lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* RoundStatus */
  [data-brand] .d2-round { margin: var(--d2-sp-2) 0 var(--d2-sp-4); }
  [data-brand] .d2-round-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-2) var(--d2-sp-3); }
  [data-brand] .d2-round h1 { margin: 0; font-size: var(--d2-fs-display); line-height: var(--d2-lh-display); }
  [data-brand] .d2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: var(--d2-sp-1) 11px var(--d2-sp-1) 9px;
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface-soft);
    color: var(--d2-brand-royal);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-label);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-label);
    letter-spacing: var(--d2-tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }
  [data-brand] .d2-chip:is([data-state="playing"], [data-state="preview"])::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--d2-r-round);
    background: currentColor;
  }
  [data-brand] .d2-chip[data-state="preview"] { background: var(--d2-brand-peach); color: var(--d2-text); }
  [data-brand] .d2-chip[data-state="preview"]::before { background: var(--d2-brand-coral); }
  [data-brand] .d2-chip[data-state="completed"] { background: var(--d2-surface-sunken); color: var(--d2-text); box-shadow: inset 0 0 0 var(--d2-border-w) var(--d2-border-line); }
  [data-brand] .d2-chip[data-state="finished"] { background: var(--d2-finished-bg); color: var(--d2-finished-fg); }
  [data-brand] .d2-chip-icon { width: 13px; height: 13px; }
  [data-brand] .d2-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--d2-sp-1) var(--d2-sp-3);
    margin-top: var(--d2-sp-2);
    color: var(--d2-text-muted);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-medium);
    line-height: var(--d2-lh-small);
  }
  [data-brand] .d2-meta > span { display: inline-flex; align-items: center; gap: 5px; }
  [data-brand] .d2-meta .lp-rules { flex-basis: auto; margin: 0; color: inherit; font-size: inherit; }
  [data-brand] .d2-meta-icon { width: 15px; height: 15px; color: var(--d2-brand-royal); }
  /* 44 px tall for the finger, a 14 px line for the eye: the negative margin keeps the meta row compact. */
  [data-brand] .d2-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: var(--d2-touch-min);
    margin: calc((var(--d2-touch-min) - 20px) / -2) 0;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--d2-text-link);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-meta-link[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }
  [data-brand] .d2-meta-chev { width: 12px; height: 12px; }
  [data-brand] .d2-role-note { margin: var(--d2-sp-2) 0 0; }
  [data-brand] .lp-toolbar-wrap { margin: 0; }
  [data-brand] .lp-tool-panel {
    margin: 0 0 var(--d2-sp-4);
    padding: var(--d2-sp-3) var(--d2-sp-4) var(--d2-sp-4);
    border: 0;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
  }

  /* "Grasz dziś?" (DA-04) */
  [data-brand] .d2-pick {
    margin: 0 0 var(--d2-sp-4);
    padding: var(--d2-sp-4);
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
  }
  [data-brand] .d2-pick h2 { margin: 0 0 var(--d2-sp-1); font-size: var(--d2-fs-name); line-height: var(--d2-lh-name); font-weight: var(--d2-w-black); }
  [data-brand] .d2-pick p { margin: 0 0 var(--d2-sp-3); color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-2) var(--d2-sp-4); }
  [data-brand] :is(.d2-btn-soft, .d2-btn-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--d2-sp-2);
    min-height: var(--d2-h-btn);
    padding: 0 var(--d2-sp-5);
    border: 0;
    border-radius: var(--d2-r-pill);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-body);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-btn-soft { background: var(--d2-surface-soft); color: var(--d2-action-quiet-fg); }
  [data-brand] .d2-btn-soft:active { background: var(--d2-surface-sunken); }
  [data-brand] .d2-btn-link { padding: 0 var(--d2-sp-2); background: none; color: var(--d2-action-quiet-fg); }

  /* Courts: the list, its eyebrow, and "Grasz teraz" pulled to the top (order) — the DOM keeps the court order. */
  [data-brand] .lp-courts { display: flex; flex-direction: column; gap: var(--d2-sp-3); }
  [data-brand] .d2-eyebrow {
    order: -1;
    display: flex;
    align-items: center;
    gap: var(--d2-sp-3);
    margin: var(--d2-sp-2) 2px 0;
    color: var(--d2-text-muted);
    font-size: var(--d2-fs-label);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-label);
    letter-spacing: var(--d2-tracking-caps);
    text-transform: uppercase;
  }
  [data-brand] .d2-eyebrow::after { content: ""; flex: 1; height: var(--d2-border-w); background: var(--d2-border-line); }
  [data-brand] .d2-eyebrow-others { display: none; }
  [data-brand] .lp-courts:has(> .lp-mine:not([data-result-status="PLANNED"])) .d2-eyebrow-others { display: inline; }
  [data-brand] .lp-courts:has(> .lp-mine:not([data-result-status="PLANNED"])) .d2-eyebrow-all { display: none; }
  [data-brand] .lp-courts:not(:has(> .lp-court:not(.lp-mine))) .d2-eyebrow { display: none; }

  /* CourtRow: tile · pairs · score/tag; everything else (forms, notes, local status) spans the card. */
  [data-brand] .d2-court {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--d2-sp-2) var(--d2-sp-3);
    margin: 0;
    padding: 10px 14px 10px 10px;
    border: 0;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
    scroll-margin-top: var(--d2-sp-3);
  }
  [data-brand] .d2-court > * { grid-column: 1 / -1; min-width: 0; }
  [data-brand] .d2-court > .d2-court-tile { grid-column: 1; grid-row: 1; }
  [data-brand] .d2-court > .lp-match { grid-column: 2; grid-row: 1; }
  [data-brand] .d2-court > .d2-court-side { grid-column: 3; grid-row: 1; }
  [data-brand] .d2-court :is(.d2-court-now, .d2-court-viewer, .d2-tag-you) { display: none; }
  /* "Gotowi · czekamy na start" stays for screen readers; the lobby's chip already says it (approved lobby). */
  [data-brand] .d2-court > .d2-court-planned { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-brand] .d2-court-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 54px;
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface-soft);
    color: var(--d2-brand-royal);
    line-height: 1;
  }
  [data-brand] .d2-court-tile::before { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--d2-surface); border-radius: var(--d2-r-xs); }
  [data-brand] .d2-court-tile small {
    position: relative;
    color: var(--d2-text-muted);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-micro);
    font-weight: var(--d2-w-black);
    letter-spacing: var(--d2-tracking-caps);
    text-transform: uppercase;
  }
  [data-brand] .d2-court-tile b {
    position: relative;
    margin-top: 2px;
    font-family: var(--d2-font-display);
    font-size: 27px;
    font-weight: var(--d2-w-black);
    font-variant-numeric: tabular-nums;
  }
  [data-brand] .d2-court .lp-match { display: flex; flex-direction: column; gap: 1px; margin: 0; }
  [data-brand] .d2-court .lp-team {
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-lead);
    font-weight: var(--d2-w-semi);
    line-height: var(--d2-lh-name);
    color: var(--d2-text);
    hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
  }
  [data-brand] .d2-court .lp-team.d2-lost { color: var(--d2-text-muted); font-weight: var(--d2-w-medium); }
  [data-brand] .d2-court .lp-team span { display: inline; margin: 0; font-size: inherit; }
  [data-brand] .d2-court .lp-team span:not(:last-child)::after { content: " + "; }
  [data-brand] .d2-court .lp-team .d2-is-me { color: var(--d2-text-link); }
  [data-brand] .d2-court .lp-versus {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--d2-text-muted);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-micro);
    font-weight: var(--d2-w-black);
    letter-spacing: var(--d2-tracking-caps);
    line-height: 14px;
    text-align: left;
    text-transform: uppercase;
  }
  [data-brand] .d2-court .lp-versus::after { content: ""; width: 28px; height: var(--d2-border-w); background: var(--d2-border-line); }
  [data-brand] .d2-court-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 9.5rem; text-align: right; }
  /* Names come first on a narrow phone: the pairs keep room for a whole surname ("Fitzgerald" at 320 px) and the
     side column gives way, so its tags wrap instead of the name; only a word longer than that still breaks. */
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) { grid-template-columns: 48px minmax(min(6.25rem, 100%), 1fr) auto; }
  @media (max-width: 479.98px) {
    /* "Singiel · poza tabelą" goes to its own line under the pairs; the score and the other tags stay beside them. */
    [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])):has(> .d2-court-side > .d2-court-type:not(.lp-sr)) > .d2-court-side { display: contents; }
    [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-court-side > * { grid-column: 3; grid-row: 1; justify-self: end; }
    [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-court-side > .d2-court-type:not(.lp-sr) { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  }
  [data-brand] .d2-court .lp-saved { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin: 0; padding: 0; border: 0; }
  /* The score is one text ("11 : 7", read as is and kept by live-sync.js); rows draw it as a column, winner first in weight. */
  [data-brand] .d2-court .lp-saved .d2-score-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-brand] .d2-score-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--d2-font-display);
    font-size: 22px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  [data-brand] .d2-score-stack b { color: var(--d2-text-muted); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-score-stack b.d2-won { color: var(--d2-text); font-weight: var(--d2-w-black); }
  [data-brand] .d2-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--d2-sp-1);
    min-height: 28px;
    margin: 0;
    padding: var(--d2-sp-1) 10px;
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface-sunken);
    color: var(--d2-text-2);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-label);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-label);
    text-align: left;
    overflow-wrap: break-word;
  }
  /* "Ćwiczenia — bez wyniku" / "Nie rozegrano" are tags that also carry the card's .lp-saved hook. */
  [data-brand] .d2-court p.lp-saved.d2-tag { flex-direction: row; align-items: center; padding: var(--d2-sp-1) 10px; }
  [data-brand] .d2-tag[data-state="saved"] { background: var(--d2-saved-bg); color: var(--d2-saved-fg); }
  [data-brand] .d2-tag[data-state="waiting"] { background: var(--d2-pending-bg); color: var(--d2-pending-fg); }
  [data-brand] .d2-tag.lp-sr { position: absolute; padding: 0; } /* .d2-tag's padding would undo .lp-sr's 1 px box */
  [data-brand] .d2-court-note { margin: 0; font-size: var(--d2-fs-small); }
  [data-brand] .d2-court summary {
    min-height: var(--d2-touch-min);
    padding: 10px 0;
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-court details { margin: 0; }

  /* Score entry inside the card (R3 turns it into the score sheet over this same form). */
  [data-brand] .lp-score { display: grid; gap: var(--d2-sp-3); margin: 0; }
  [data-brand] .lp-score-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--d2-sp-2); }
  [data-brand] .lp-score-inputs label { display: block; margin: 0; }
  [data-brand] .lp-score-inputs input {
    width: 100%;
    height: var(--d2-h-score);
    min-height: var(--d2-h-score);
    margin: 0;
    padding: 0 var(--d2-sp-2);
    border: var(--d2-border-control-w) solid var(--d2-border-control);
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    color: var(--d2-text);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-score);
    font-weight: var(--d2-w-black);
    line-height: var(--d2-lh-score);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  /* The steppers are 10 px targets next to a 40 px number: the phone keypad (inputmode=numeric) is the way in. */
  [data-brand] .lp-score-inputs input { -moz-appearance: textfield; appearance: textfield; }
  [data-brand] .lp-score-inputs input::-webkit-inner-spin-button,
  [data-brand] .lp-score-inputs input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
  [data-brand] .lp-score-inputs input:focus-visible { box-shadow: 0 0 0 4px var(--d2-surface-soft); }
  [data-brand] .lp-score-inputs > span { color: var(--d2-text-muted); font-family: var(--d2-font-display); font-size: 28px; font-weight: var(--d2-w-black); }
  [data-brand] .lp-score .lp-score-preview { margin: 0; }
  [data-brand] .lp-score button[type="submit"] { min-height: var(--d2-h-btn); }

  /* Lobby: this phone's court as a highlighted row with "Ty". */
  [data-brand] .d2-court.lp-mine[data-result-status="PLANNED"] {
    background: linear-gradient(100deg, var(--d2-brand-peach-2), var(--d2-surface) 55%);
    box-shadow: inset 0 0 0 2px var(--d2-brand-coral-deco);
  }
  [data-brand][data-d2-contrast="high"] .d2-court.lp-mine[data-result-status="PLANNED"] { background: var(--d2-surface); box-shadow: inset 0 0 0 2.5px var(--d2-brand-coral); }
  [data-brand] .d2-court.lp-mine .d2-court-tile { background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); }
  [data-brand] .d2-court.lp-mine .d2-court-tile small { color: var(--d2-text-on-fill); opacity: .85; }
  [data-brand] .d2-court.lp-mine .d2-court-tile::before { border-color: var(--d2-hero-art-line); opacity: .5; }
  [data-brand] .d2-court.lp-mine[data-result-status="PLANNED"] .d2-court-side .d2-tag-you { display: inline-flex; background: var(--d2-brand-peach); color: var(--d2-text); font-weight: var(--d2-w-black); }

  /* MyMatchCard "Grasz teraz" (approved, PO 1A.3 / Gate 2 / Gate 2.1): the same card, first in the list. */
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) {
    order: -3;
    isolation: isolate;
    /* Clips the court decoration like overflow:hidden would, without making it scrollable overflow
       (the visual gate's clip check read the decoration as text cut off). */
    contain: paint;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "num label" "num now";
    align-items: end;
    gap: var(--d2-sp-3);
    padding: 14px;
    border-radius: var(--d2-r-lg);
    background:
      radial-gradient(circle at -14px -14px, color-mix(in srgb, var(--d2-hero-blob) 30%, transparent) 0 56px, transparent 57px),
      radial-gradient(circle at calc(100% + 30px) calc(100% + 40px), var(--d2-brand-peach-blob) 0 120px, transparent 121px),
      var(--d2-hero-bg);
    color: var(--d2-hero-ink);
    box-shadow: var(--d2-hero-shadow);
  }
  [data-brand][data-d2-contrast="high"] .d2-court.lp-mine:not([data-result-status="PLANNED"]) { background: var(--d2-hero-bg); }
  /* Decoration only (DS §3.5): a court seen from above with the ball; it never carries information. */
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"])::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -18px;
    right: -26px;
    width: 170px;
    height: 128px;
    border-radius: var(--d2-r-sm);
    transform: rotate(-24deg) skewX(12deg);
    background:
      radial-gradient(circle at 30% 70%, var(--d2-brand-ball) 0 13px, transparent 14px),
      linear-gradient(90deg, transparent calc(50% - 1px), var(--d2-hero-art-line) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(transparent 30%, var(--d2-hero-art-line) 30% calc(30% + 2px), transparent calc(30% + 2px) calc(70% - 2px), var(--d2-hero-art-line) calc(70% - 2px) 70%, transparent 70%),
      var(--d2-hero-art);
    box-shadow: inset 0 0 0 3px var(--d2-hero-art-line);
    -webkit-mask-image: linear-gradient(100deg, transparent 4%, black 40%);
    mask-image: linear-gradient(100deg, transparent 4%, black 40%);
    pointer-events: none;
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-court-tile { display: contents; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-tile::before { display: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-tile b {
    grid-area: num;
    margin: 0;
    color: var(--d2-hero-num);
    font-size: var(--d2-fs-numeral);
    line-height: .82;
    letter-spacing: -.04em;
    text-shadow: 4px 4px 0 var(--d2-hero-num-shadow);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-tile small { grid-area: label; align-self: end; color: var(--d2-hero-sub); font-size: var(--d2-fs-label); }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-now {
    grid-area: now;
    display: block;
    margin: 0 0 2px;
    color: var(--d2-hero-ink);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-title);
    font-weight: var(--d2-w-black);
    line-height: var(--d2-lh-title);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > :not(.d2-court-tile, .d2-court-now, .lp-sr) { grid-column: 1 / -1; grid-row: auto; }
  /* The pairs side by side in a white box, with initials. */
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    padding: 14px 10px 12px;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    color: var(--d2-text);
    box-shadow: var(--d2-shadow-md);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: var(--d2-sp-1) 0;
    font-size: var(--d2-fs-name);
    font-weight: var(--d2-w-bold);
    text-align: center;
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team span { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team span::before {
    content: attr(data-initial);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--d2-r-round);
    background: var(--d2-av-1-bg);
    color: var(--d2-av-1-fg);
    font-size: 17px;
    font-weight: var(--d2-w-black);
    box-shadow: 0 0 0 3px var(--d2-surface);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team[data-side="b"] span::before { background: var(--d2-av-2-bg); color: var(--d2-av-2-fg); }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team .d2-is-me::before { background: var(--d2-av-me-bg); color: var(--d2-av-me-fg); }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team span { position: relative; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team span:not(:last-child)::after { position: absolute; right: -1.05em; bottom: 0; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team span + span { margin-left: 1.4em; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-versus {
    align-self: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--d2-r-round);
    background: var(--d2-text);
    color: var(--d2-surface);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-versus::after { content: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-team.d2-lost { color: var(--d2-text-muted); }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-side { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-side:not(:has(> :not(.lp-sr, .d2-tag-you, .d2-court-awaiting))) { display: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-awaiting { display: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-saved {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--d2-sp-3);
    padding: var(--d2-sp-3) 14px;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .lp-saved .d2-score-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--d2-text);
    font-family: var(--d2-font-display);
    font-size: 28px;
    font-weight: var(--d2-w-black);
    font-variant-numeric: tabular-nums;
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-score-stack { display: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) .d2-court-viewer {
    display: flex;
    align-items: center;
    gap: var(--d2-sp-2);
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border: var(--d2-border-w) dashed var(--d2-hero-sub);
    border-radius: var(--d2-r-pill);
    color: var(--d2-hero-ink);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-court-note { color: var(--d2-hero-ink); }
  /* "Wpisz wynik" is this card's one step forward (D4 coral, DS §3.5); a saved score is corrected from a quiet button. */
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--d2-sp-3);
    width: 100%;
    min-height: var(--d2-h-cta);
    margin: 0;
    padding: 0 var(--d2-sp-5);
    border: 0;
    border-radius: var(--d2-r-pill);
    background: var(--d2-action-primary-bg);
    color: var(--d2-text-on-fill);
    box-shadow: var(--d2-shadow-cta);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-name);
    font-weight: var(--d2-w-black);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open:active { background: var(--d2-action-primary-pressed); }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open .d2-score-open-chev {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: var(--d2-r-round);
    background: color-mix(in srgb, var(--d2-text-on-fill) 22%, transparent);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open:not([data-kind="enter"]) {
    min-height: var(--d2-h-btn);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    background: var(--d2-surface);
    color: var(--d2-action-quiet-fg);
    box-shadow: none;
    font-size: var(--d2-fs-body);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open:not([data-kind="enter"]) .d2-score-open-chev { width: 20px; height: 20px; padding: 0; background: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open:focus-visible { outline-color: var(--d2-focus); }
  /* R4: a score kept on this phone only shows in the sheet ("Zobacz wynik") — the quiet button; a conflict comes first
     ("Sprawdź wynik") — the repair colour of its answers. outbox-view.js sets data-local. */
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open[data-local="view"] {
    min-height: var(--d2-h-btn);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    background: var(--d2-surface);
    color: var(--d2-action-quiet-fg);
    box-shadow: none;
    font-size: var(--d2-fs-body);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open[data-local="view"] .d2-score-open-chev { width: 20px; height: 20px; padding: 0; background: none; }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open[data-local="check"] {
    min-height: var(--d2-h-cta);
    border: 0;
    background: var(--d2-action-repair-bg);
    color: var(--d2-text-on-fill);
    font-size: var(--d2-fs-name);
    font-weight: var(--d2-w-black);
  }
  [data-brand] .d2-court.lp-mine:not([data-result-status="PLANNED"]) > .d2-score-open[data-local="check"]:active { background: var(--d2-action-repair-pressed); }

  /* "Potem: …" under the card, or "Odpoczywasz" in its place. */
  [data-brand] .lp-my-court { order: -2; margin: 0 2px; padding: 0; border: 0; background: none; color: var(--d2-text-muted); font-size: var(--d2-fs-small); font-weight: var(--d2-w-medium); }
  [data-brand] .lp-my-court p { margin: 0; }
  [data-brand] .lp-my-court.d2-my-rest {
    margin: 0;
    padding: var(--d2-sp-4);
    border-radius: var(--d2-r-lg);
    background: var(--d2-hero-alt-bg);
    color: var(--d2-text-2);
    box-shadow: var(--d2-card-shadow);
  }
  [data-brand] .lp-my-court.d2-my-rest h2 { margin: 0 0 var(--d2-sp-1); font-size: var(--d2-fs-title); line-height: var(--d2-lh-title); font-weight: var(--d2-w-black); }

  /* Resting: initials and names in one line. */
  [data-brand] .lp-rest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-2); margin: var(--d2-sp-4) 2px 0; padding: 0; }
  [data-brand] .lp-rest h2 { margin: 0; color: var(--d2-text-muted); font-family: var(--d2-font-body); font-size: var(--d2-fs-body); font-weight: var(--d2-w-medium); }
  [data-brand] .lp-rest h2::after { content: ":"; }
  [data-brand] .lp-rest-names { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-1) var(--d2-sp-2); }
  [data-brand] .lp-rest-names span { padding: 0; border-radius: 0; background: none; color: var(--d2-text); font-size: var(--d2-fs-body); font-weight: var(--d2-w-semi); }
  [data-brand] .lp-rest-names span:not(:last-child)::after { content: ","; }
  [data-brand] .d2-av {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: -2px;
    border-radius: var(--d2-r-round);
    background: var(--d2-av-3-bg);
    color: var(--d2-av-3-fg);
    font-family: var(--d2-font-display);
    font-size: 13px;
    font-style: normal;
    font-weight: var(--d2-w-black);
  }
  [data-brand] .lp-rest .lp-help { flex-basis: 100%; margin: 0; }

  /* CourtRow for writers (P18, DS §3.7): the whole row opens the court's score sheet; the chevron says so. The button
     lies over the row (its text is for screen readers), so a tap on the names, the tile or the score works too. */
  [data-brand] .d2-court:has(> .d2-score-open):not(.lp-mine:not([data-result-status="PLANNED"])) { padding-right: 28px; }
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open {
    position: absolute;
    grid-area: auto; /* an absolute grid item placed in an area would cover only that area, not the row */
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--d2-text-muted);
    cursor: pointer;
  }
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open .d2-score-open-chev { width: 18px; height: 18px; }
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open:active:not(:disabled) { background: color-mix(in srgb, var(--d2-surface-soft) 55%, transparent); }
  @media (hover: hover) {
    [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open:hover:not(:disabled) { background: color-mix(in srgb, var(--d2-surface-soft) 40%, transparent); color: var(--d2-text-link); }
  }
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open:focus-visible { outline-offset: -3px; }
  [data-brand] .d2-court:not(.lp-mine:not([data-result-status="PLANNED"])) > .d2-score-open .d2-score-open-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-brand] .d2-score-open:disabled { cursor: default; opacity: .55; }
  /* What else a writer can press in the row stays above the button (live sync's choice, a queued score's note). */
  [data-brand] .d2-court > :is(.lp-remote-change, .lp-local-status) { position: relative; z-index: 2; }
  /* Typed in the sheet, neither saved nor queued: "Szkic 11 : 7" on the card (DS §3.13), so closing never hides it. */
  [data-brand] .d2-tag.d2-court-draft { background: var(--d2-surface); color: var(--d2-text-2); box-shadow: inset 0 0 0 var(--d2-border-control-w) var(--d2-border-control); white-space: nowrap; }

  /* ScoreEditor sheet (DS §3.11): title + rule, the pairs over their fields, the live preview, one coral CTA. Lifted
     above the phone keypad by score-sheet.js (--d2-keyboard), so "Zapisz wynik" stays on screen while typing. */
  [data-brand] .d2-score-sheet .d2-sheet-panel { margin-bottom: var(--d2-keyboard, 0px); max-height: calc(88dvh - var(--d2-keyboard, 0px)); }
  [data-brand] .d2-score-rule, [data-brand] .d2-score-now { font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-score-now { margin: 0; color: var(--d2-text); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-score-sheet .lp-score-inputs { align-items: end; }
  [data-brand] .d2-score-sheet .lp-score-inputs > span { align-self: center; margin-top: 1.6em; }
  [data-brand] .d2-score-team {
    display: block;
    margin: 0 0 var(--d2-sp-2);
    color: var(--d2-text);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-small);
    font-weight: var(--d2-w-bold);
    line-height: var(--d2-lh-small);
    overflow-wrap: break-word;
  }
  [data-brand] .d2-score-sheet .lp-score-inputs input { background: var(--d2-surface-soft); }
  [data-brand] .d2-score-sheet .lp-score-inputs input:focus { border-color: var(--d2-brand-royal); background: var(--d2-surface); }
  [data-brand] .d2-score-sheet .lp-score-inputs input[readonly] { border-style: dashed; }
  [data-brand] .d2-score-sheet .lp-score-preview { color: var(--d2-text-link); font-weight: var(--d2-w-semi); }
  /* The CTA sticks to the bottom of the sheet while it scrolls (a short window, the keypad up). */
  [data-brand] .d2-score-sheet .lp-score button[type="submit"] { position: sticky; bottom: 0; z-index: 1; }
  [data-brand] .d2-score-sheet .lp-score button[type="submit"]:not(:disabled) {
    min-height: var(--d2-h-cta);
    border: 0;
    background: var(--d2-action-primary-bg);
    color: var(--d2-text-on-fill);
    box-shadow: var(--d2-shadow-cta);
    font-size: var(--d2-fs-name);
  }
  [data-brand] .d2-score-sheet .lp-score button[type="submit"]:not(:disabled):active { background: var(--d2-action-primary-pressed); }
  [data-brand] .d2-score-sheet .lp-resolution-actions { margin: 0; gap: var(--d2-sp-2); }
  [data-brand] .d2-score-sheet .lp-resolution-actions > .d2-score-or { flex: 1 1 100%; margin: var(--d2-sp-2) 0 0; }
  [data-brand] .d2-score-sheet .lp-resolution-actions > form { flex: 1 1 8rem; }
  [data-brand] .d2-score-unrecord { margin: 0; padding-top: var(--d2-sp-2); border-top: var(--d2-border-w) solid var(--d2-border-line); }
  [data-brand] .d2-score-unrecord > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--d2-sp-2);
    min-height: var(--d2-touch-min);
    padding: var(--d2-sp-2) 0;
    color: var(--d2-action-danger);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    list-style: none;
  }
  [data-brand] .d2-score-unrecord > summary::-webkit-details-marker { display: none; }
  [data-brand] .d2-score-unrecord[open] > summary { justify-content: flex-start; }
  [data-brand] .d2-score-unrecord > p { margin: 0 0 var(--d2-sp-3); }
  [data-brand] .d2-score-sheet :is(.lp-remote-change, .lp-local-status) { margin: 0; }
  /* ScoreConflictSheet (DS §3.12): the server's result and this phone's attempt, each in words, then the two answers. */
  [data-brand] .d2-score-conflict {
    display: grid;
    gap: var(--d2-sp-2);
    padding: var(--d2-sp-4);
    border-radius: var(--d2-r-md);
    background: var(--d2-error-bg);
    box-shadow: inset 0 0 0 var(--d2-border-w) var(--d2-error-hair);
    color: var(--d2-text);
  }
  [data-brand] .d2-score-conflict p { margin: 0; }
  [data-brand] .d2-score-conflict-title { color: var(--d2-error-strong); font-family: var(--d2-font-display); font-weight: var(--d2-w-black); }
  [data-brand] .d2-score-conflict strong { margin-left: var(--d2-sp-1); font-family: var(--d2-font-display); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-score-conflict p[data-state="attempt"] strong { color: var(--d2-pending-strong); }
  [data-brand] .d2-score-conflict .lp-wide + .lp-wide { margin-top: 0; }
  /* Both conflict answers ask first: the attempt to be removed, then remove (danger) or cancel. */
  [data-brand] .d2-confirm-loss { display: grid; gap: var(--d2-sp-2); }
  [data-brand] .d2-confirm-loss p { margin: 0; color: var(--d2-error-strong); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-confirm-loss .lp-wide + .lp-wide { margin-top: 0; }
  [data-brand] .lp-secondary.d2-btn-repair { border-color: transparent; background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); }
  [data-brand] .lp-secondary.d2-btn-repair:active { background: var(--d2-action-repair-pressed); }

  /* Lobby: "Anuluj grę" waits in the page (danger outline), its sheet asks once more (danger fill). */
  [data-brand] .d2-end { margin: var(--d2-sp-6) 0 0; padding-top: var(--d2-sp-4); border-top: var(--d2-border-w) solid var(--d2-border-line); }
  [data-brand] .d2-end > .lp-help { margin: var(--d2-sp-2) 0 0; text-align: center; }
  [data-brand] .lp-secondary.d2-btn-danger { gap: var(--d2-sp-2); border-color: var(--d2-error-hair); color: var(--d2-action-danger); }
  [data-brand] .lp-secondary.d2-btn-danger:active { background: var(--d2-error-bg); }
  [data-brand] .lp-primary.d2-btn-danger-solid { gap: var(--d2-sp-2); background: var(--d2-action-danger); box-shadow: none; }
  [data-brand] .lp-primary.d2-btn-danger-solid:is(:hover, :active) { background: var(--d2-action-danger-pressed); }
  [data-brand] .lp-secondary.d2-btn-ghost { border-color: var(--d2-border-line); }
  [data-brand] .d2-sheet-text { margin: 0; color: var(--d2-text-2); }
  [data-brand] .d2-sheet-panel > .lp-wide + .lp-wide { margin-top: 0; }
  [data-brand] details#live-play-end { margin-top: var(--d2-sp-6); }

  /* Dock: progress + the round's one action, fixed above the nav inside the content column. */
  [data-brand] .d2-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--d2-nav-h) + var(--d2-border-w) + var(--d2-safe-bottom));
    z-index: var(--d2-z-dock);
    display: flex;
    align-items: center;
    gap: var(--d2-sp-3);
    margin: 0;
    padding: var(--d2-sp-5) max(calc(var(--d2-gutter) + var(--d2-safe-right)), calc((100% - var(--d2-content-max)) / 2)) var(--d2-sp-3);
    border: 0;
    border-radius: 0;
    background: linear-gradient(to top, var(--d2-bg) 78%, transparent);
  }
  [data-brand][data-d2-contrast="high"] .d2-dock { background: var(--d2-bg); box-shadow: 0 calc(-1 * var(--d2-border-w)) 0 var(--d2-border-line); padding-top: var(--d2-sp-3); }
  [data-brand] .d2-dock:not(:has(.d2-progress, .d2-dock-actions > *)) { display: none; }
  [data-brand] .d2-progress { flex: 1; min-width: 0; }
  [data-brand] .d2-progress-count { margin: 0; font-family: var(--d2-font-display); font-size: var(--d2-fs-body); font-weight: var(--d2-w-black); line-height: var(--d2-lh-name); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-dock .lp-missing, [data-brand] .d2-progress-note {
    display: block;
    margin: 1px 0 0;
    color: var(--d2-text-muted);
    font-size: 13px;
    font-weight: var(--d2-w-medium);
    line-height: 1.35;
  }
  [data-brand] .d2-dock .lp-missing a { display: inline; min-height: 0; min-width: 0; padding: 0; background: none; color: var(--d2-text-link); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-dock .lp-missing a + a::before { content: ", "; color: var(--d2-text-muted); }
  [data-brand] .d2-progress-check { color: var(--d2-error-fg); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-track { display: flex; gap: var(--d2-sp-1); margin-top: 7px; }
  [data-brand] .d2-track i { flex: 1; height: 6px; border-radius: var(--d2-r-pill); background: var(--d2-border-line); }
  [data-brand] .d2-track i[data-state="saved"] { background: var(--d2-saved-line); }
  [data-brand] .d2-track i[data-local="pending"] { background: repeating-linear-gradient(135deg, var(--d2-pending-line) 0 4px, var(--d2-pending-bg) 4px 8px); }
  [data-brand] .d2-track i[data-local="error"] { background: var(--d2-error-line); }
  [data-brand] .d2-dock-actions { display: flex; align-items: center; gap: 10px; flex: none; }
  [data-brand] .d2-dock-actions form { margin: 0; }
  [data-brand] .d2-dock-actions :is(.lp-primary, .lp-secondary) { width: auto; min-height: var(--d2-h-cta); padding: 0 var(--d2-sp-5); font-size: var(--d2-fs-name); white-space: nowrap; }
  [data-brand] .d2-dock:not(:has(.d2-progress)) .d2-dock-actions { flex: 1; }
  [data-brand] .d2-dock:not(:has(.d2-progress)) .d2-dock-main { flex: 1; }
  [data-brand] .d2-dock:not(:has(.d2-progress)) .d2-dock-main .lp-primary { width: 100%; }
  [data-brand] .d2-dock-viewer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 13rem; margin: 0; color: var(--d2-text-link); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-small); text-align: right; }
  [data-brand] .d2-dock-viewer svg { flex: none; }
  /* compact (< 360 px, Gate 2.1): progress above, the action across the column. */
  @media (max-width: 359.98px) {
    [data-brand] .d2-dock { flex-wrap: wrap; gap: var(--d2-sp-2); padding-top: var(--d2-sp-3); }
    [data-brand] .d2-progress, [data-brand] .d2-dock-actions { flex: 1 1 100%; }
    [data-brand] .d2-dock-actions > :is(form, button) { flex: 1; }
    [data-brand] .d2-dock-actions :is(.lp-primary, .lp-secondary) { width: 100%; font-size: var(--d2-fs-body); }
    [data-brand] .d2-dock-viewer { max-width: none; text-align: left; }
  }
  /* A short window (landscape, 200 % zoom): the dock scrolls with the content instead of covering it. */
  @media (max-height: 499.98px) {
    [data-brand] .d2-dock { position: static; margin-top: var(--d2-sp-4); padding: 0; background: none; box-shadow: none; }
  }
  /* R7 S2 FinalSummary (DS §3.23): a finished game has no dock; its card sits above the last round's courts. */
  [data-brand] .d2-final { display: flex; flex-direction: column; gap: var(--d2-sp-4); margin: 0 0 var(--d2-sp-6); padding: var(--d2-sp-5); border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-final-head { display: flex; align-items: center; gap: var(--d2-sp-3); }
  [data-brand] .d2-final-icon { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: var(--d2-r-round); background: var(--d2-brand-navy); color: var(--d2-text-on-fill); }
  [data-brand] .d2-final-head h2 { display: flex; flex-direction: column; margin: 0; }
  [data-brand] .d2-final-eyebrow { color: var(--d2-text-2); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-small); }
  [data-brand] .d2-final-title { font-family: var(--d2-font-display); font-size: var(--d2-fs-title); font-weight: var(--d2-w-black); line-height: var(--d2-lh-title); }
  [data-brand] .d2-final-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d2-sp-2); margin: 0; }
  [data-brand] .d2-final-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--d2-sp-1); min-width: 0; padding: var(--d2-sp-3) var(--d2-sp-2); border-radius: var(--d2-r-sm); background: var(--d2-surface-sunken); text-align: center; }
  [data-brand] .d2-final-stats dd { margin: 0; font-family: var(--d2-font-display); font-size: var(--d2-fs-display); font-weight: var(--d2-w-black); line-height: var(--d2-lh-display); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-final-stats dt { color: var(--d2-text-2); font-size: var(--d2-fs-label); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-label); overflow-wrap: break-word; }
  [data-brand] .d2-final-top-title { margin: 0; font-size: var(--d2-fs-small); font-weight: var(--d2-w-bold); line-height: var(--d2-lh-small); }
  [data-brand] .d2-final-table { display: flex; flex-direction: column; gap: var(--d2-sp-1); margin: calc(-1 * var(--d2-sp-2)) 0 0; padding: 0; list-style: none; }
  [data-brand] .d2-final-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--d2-sp-3); padding: var(--d2-sp-2) 0; border-bottom: var(--d2-border-w) solid var(--d2-border-line); }
  [data-brand] .d2-final-row:last-child { border-bottom: 0; }
  [data-brand] .d2-final-more { padding: var(--d2-sp-2) 0 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-final-rest { margin-top: var(--d2-sp-2); border-top: var(--d2-border-w) dashed var(--d2-border-control); }
  [data-brand] .d2-final-name { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  [data-brand] .d2-final-name strong { font-family: var(--d2-font-display); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-final-score { color: var(--d2-text-2); font-size: var(--d2-fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
  [data-brand] .d2-final-row.d2-is-me { margin-inline: calc(-1 * var(--d2-sp-2)); padding-inline: var(--d2-sp-2); border-radius: var(--d2-r-xs); box-shadow: inset 0 0 0 2px var(--d2-brand-coral-deco); }
  [data-brand][data-d2-contrast="high"] .d2-final-row.d2-is-me { box-shadow: inset 0 0 0 2.5px var(--d2-brand-coral); }
  [data-brand] .d2-final-row.d2-is-me :is(.d2-final-you, strong) { color: var(--d2-text-link); font-weight: var(--d2-w-bold); }
  [data-brand] :is(.d2-final-fine, .d2-final-none) { margin: 0; }
  [data-brand] .d2-final-actions { display: flex; flex-direction: column; gap: var(--d2-sp-2); }
  [data-brand] .d2-final-actions > .lp-wide { gap: var(--d2-sp-2); margin: 0; }
  [data-brand] .d2-final > .lp-help:last-child { margin: 0; text-align: center; }
}

/* R4 — save state (DS §3.10, §3.13, §2.10): the save banner, the "Stan zapisu" sheet, tags at the match, P4 and P13. */
@layer d2.components {
  /* Save banner: one ActionBanner line in the flow, the whole of it a button that opens "Stan zapisu". */
  [data-brand] .d2-save-banner { margin: 0 0 var(--d2-sp-4); }
  [data-brand] .d2-save-banner > button {
    display: flex;
    align-items: center;
    gap: var(--d2-sp-3);
    width: 100%;
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-3) var(--d2-sp-3) var(--d2-sp-4);
    border: var(--d2-border-w) solid var(--d2-pending-line);
    border-radius: var(--d2-r-sm);
    background: var(--d2-pending-bg);
    color: var(--d2-pending-strong);
    font: inherit;
    font-size: var(--d2-fs-small);
    line-height: var(--d2-lh-small);
    text-align: left;
  }
  [data-brand] .d2-save-banner[data-state="error"] > button { border-color: var(--d2-error-line); background: var(--d2-error-bg); color: var(--d2-error-strong); }
  [data-brand] .d2-save-banner[data-state="info"] > button { border-color: var(--d2-border-line); background: var(--d2-info-bg); color: var(--d2-text); }
  [data-brand] .d2-save-banner svg { flex: none; width: var(--d2-icon); height: var(--d2-icon); }
  [data-brand] .d2-save-banner .d2-save-banner-chev { width: 18px; height: 18px; margin-left: auto; }
  [data-brand] .d2-save-banner-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
  [data-brand] .d2-save-banner-text strong { font-family: var(--d2-font-display); font-size: var(--d2-fs-body); font-weight: var(--d2-w-black); }
  /* One banner at a time (DS §3.10): with scores on this phone the save banner says "no internet" for both; any other
     network note (a failed write, "this needs the internet") outranks it while it is shown. */
  [data-brand] .lp-main:has(#local-summary:not([hidden])) #network-message[data-kind="offline"] { display: none; }
  [data-brand] .lp-main:has(#network-message:not([hidden]):not([data-kind="offline"])) #local-summary { display: none; }

  /* Menu: "Stan zapisu" is an item that opens its sheet; the small line is the connection in words. */
  [data-brand] .d2-menu-save small:empty { display: none; }

  /* "Stan zapisu" sheet */
  [data-brand] .d2-save-facts { display: grid; gap: var(--d2-sp-2); }
  [data-brand] .d2-save-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--d2-sp-1) var(--d2-sp-3);
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border: var(--d2-border-w) solid var(--d2-border-line);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface-soft);
    color: var(--d2-text-2);
  }
  [data-brand] .d2-save-fact strong { color: var(--d2-text); font-weight: var(--d2-w-bold); text-align: right; overflow-wrap: anywhere; }
  [data-brand] .d2-save-eyebrow { order: 0; margin: var(--d2-sp-2) 2px 0; }
  [data-brand] .d2-save-list, [data-brand] #local-drafts { display: grid; gap: var(--d2-sp-2); }
  [data-brand] :is(.d2-save-list, #local-drafts)[hidden] { display: none; }
  [data-brand] .d2-save-sheet :is(.d2-save-row, .lp-draft-warning) {
    display: grid;
    gap: var(--d2-sp-2);
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface);
    color: var(--d2-text);
    font-size: var(--d2-fs-small);
    line-height: var(--d2-lh-small);
    overflow-wrap: anywhere;
  }
  [data-brand] .d2-save-sheet :is(.d2-save-row, .lp-draft-warning) p { margin: 0; }
  [data-brand] .d2-save-sheet .d2-save-row[data-state="PENDING"] { border-color: var(--d2-pending-line); }
  [data-brand] .d2-save-sheet .d2-save-row[data-state="CONFLICT"], [data-brand] .d2-save-sheet .d2-save-row[data-state="FAILED"] { border-color: var(--d2-error-line); }
  [data-brand] .d2-save-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--d2-sp-2); }
  [data-brand] .d2-save-row-where { color: var(--d2-text-2); }
  [data-brand] .d2-save-row-result { font-family: var(--d2-font-display); font-size: var(--d2-fs-name); font-weight: var(--d2-w-black); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-save-row-note { color: var(--d2-text-2); }
  [data-brand] .d2-save-sheet :is(.d2-save-row, .lp-draft-warning) :is(button, a.lp-secondary) { min-height: var(--d2-h-btn-sm); margin: 0; }
  [data-brand] .d2-save-sheet .d2-confirm-loss { display: grid; gap: var(--d2-sp-2); }
  [data-brand] .d2-save-empty { margin: 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); }
  [data-brand] .d2-save-sheet:has(.d2-save-list:not([hidden])) .d2-save-empty { display: none; }
  [data-brand] .d2-save-sheet:has(#local-drafts:not([hidden])) .d2-save-empty { display: none; }
  /* The warning about clearing browser data only when this phone keeps something to lose. */
  [data-brand] .d2-save-sheet .d2-save-warning { display: none; }
  [data-brand] .d2-save-sheet:has(.d2-save-list:not([hidden])) .d2-save-warning { display: block; }
  [data-brand] .d2-save-sheet:has(#local-drafts:not([hidden])) .d2-save-warning { display: block; }
  [data-brand] .d2-save-note {
    margin: 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface-soft);
    color: var(--d2-text-2);
    font-size: var(--d2-fs-small);
    line-height: var(--d2-lh-small);
  }

  /* Tags (§3.13): an icon and a word, colour never alone. */
  [data-brand] .d2-local-tag svg { flex: none; width: 16px; height: 16px; }
  [data-brand] .d2-local-tag[data-state="pending"] { background: var(--d2-pending-bg); color: var(--d2-pending-fg); box-shadow: inset 0 0 0 var(--d2-border-w) var(--d2-pending-line); }
  [data-brand] .d2-local-tag[data-state="info"] { background: var(--d2-info-bg); color: var(--d2-info-fg); }
  [data-brand] .d2-local-tag[data-state="error"] { background: var(--d2-error-bg); color: var(--d2-error-fg); box-shadow: inset 0 0 0 var(--d2-border-w) var(--d2-error-line); }

  /* At the match: the score this phone keeps, its tag, and what happens next. The row stays one tap target. */
  [data-brand] .d2-court > .lp-local-status.d2-local {
    pointer-events: none;
    margin: 0;
    padding: var(--d2-sp-2) var(--d2-sp-3);
    border: var(--d2-border-w) solid var(--d2-pending-line);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface);
    color: var(--d2-text);
    font-size: var(--d2-fs-small);
    line-height: var(--d2-lh-small);
  }
  [data-brand] .d2-court > .lp-local-status.d2-local[data-state="CONFLICT"], [data-brand] .d2-court > .lp-local-status.d2-local[data-state="FAILED"] { border-color: var(--d2-error-line); }
  [data-brand] .d2-court > .lp-local-status.d2-local[data-state="SYNCING"] { border-color: var(--d2-border-line); }
  [data-brand] .d2-local-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-1) var(--d2-sp-3); margin: 0; }
  [data-brand] .d2-local-line > strong { font-family: var(--d2-font-display); font-size: var(--d2-fs-name); font-weight: var(--d2-w-black); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-local-note { margin: var(--d2-sp-1) 0 0; color: var(--d2-text-2); }

  /* P4: offline the score sheet's button says "Zapisz na telefonie" (navy, a phone), with the line under it. */
  [data-brand] .d2-offline-only { display: none; }
  [data-brand][data-d2-network="offline"] .d2-online-only { display: none; }
  [data-brand][data-d2-network="offline"] span.d2-offline-only { display: inline-flex; align-items: center; gap: var(--d2-sp-2); }
  [data-brand][data-d2-network="offline"] p.d2-offline-only { display: block; }
  [data-brand][data-d2-network="offline"] .d2-score-sheet .lp-score button[type="submit"]:not(:disabled) { background: var(--d2-brand-navy); box-shadow: none; }
  [data-brand][data-d2-network="offline"] .d2-score-sheet .lp-score button[type="submit"]:not(:disabled):active { background: var(--d2-text-2); }
  [data-brand] .d2-score-offline-hint { margin: 0; text-align: center; color: var(--d2-text-2); }

  /* P13: needs the server, offline — still focusable (aria-disabled), a lock in front, the reason on a tap. */
  [data-brand] button[data-d2-offline][aria-disabled="true"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--d2-sp-2); }
  [data-brand] button[data-d2-offline][aria-disabled="true"]::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--d2-mask-lock) center / contain no-repeat;
    mask: var(--d2-mask-lock) center / contain no-repeat;
  }
  /* R7: offline, the confirm of "Zakończyć grę?", "Anulować grę?" and "Zakończ udział" is unavailable, not a dimmed
     red action — the neutral disabled fill (ink on grey, the lock), pressed or not. Only these sheets; the danger fill
     everywhere else stays as it is. */
  [data-brand] :is(#live-play-finish, #live-play-cancel, dialog.d2-sheet[id^="d2-player-"][id$="-end"]) .lp-primary.d2-btn-danger-solid[aria-disabled="true"],
  [data-brand] :is(#live-play-finish, #live-play-cancel, dialog.d2-sheet[id^="d2-player-"][id$="-end"]) .lp-primary.d2-btn-danger-solid[aria-disabled="true"]:is(:hover, :active) {
    background: var(--d2-action-disabled-bg);
    color: var(--d2-action-disabled-fg);
  }
  [data-brand] .d2-offline-reason { margin: 0; color: var(--d2-error-fg); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-small); }
  /* F2: a sheet whose action the game no longer offers (changed on another phone) says so instead of acting. */
  [data-brand] .d2-stale-note { margin: 0; padding: var(--d2-sp-3); border: var(--d2-border-w) solid var(--d2-border-line); border-radius: var(--d2-r-md); background: var(--d2-info-bg); color: var(--d2-text); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-small); }
}

/* R5 — Gracze (sub-screen + player sheets), Rundy, Tabela (DS §3.16–3.18). */
@layer d2.components {
  /* Sub-screen: a full-height sheet with a back arrow and a title; the page under it stays where it was. */
  [data-brand] .d2-screen { background: var(--d2-bg); }
  [data-brand] .d2-screen[open] { justify-content: flex-start; }
  [data-brand] .d2-screen-panel {
    width: 100%;
    max-width: calc(var(--d2-content-max) + 2 * var(--d2-gutter));
    height: 100%;
    overflow-y: auto;
    padding: calc(var(--d2-sp-3) + var(--d2-safe-top)) calc(var(--d2-gutter) + var(--d2-safe-right)) calc(var(--d2-sp-8) + var(--d2-safe-bottom)) calc(var(--d2-gutter) + var(--d2-safe-left));
  }
  [data-brand] .d2-screen-head { display: flex; align-items: center; gap: var(--d2-sp-3); margin: 0 0 var(--d2-sp-3); }
  [data-brand] .d2-back svg { transform: scaleX(-1); }
  [data-brand] .d2-screen-title { margin: 0; font-size: var(--d2-fs-display); line-height: var(--d2-lh-display); font-weight: var(--d2-w-black); }
  [data-brand] .d2-players > .lp-help { margin: 0 0 var(--d2-sp-2); }
  [data-brand] .d2-players-group { display: flex; flex-direction: column; gap: var(--d2-sp-2); margin: var(--d2-sp-3) 0 0; }
  [data-brand] .d2-players-group .d2-eyebrow { order: 0; margin: 0 2px var(--d2-sp-1); }
  [data-brand] :is(.d2-player-list, .d2-round-rows, .d2-table) { display: flex; flex-direction: column; gap: var(--d2-sp-2); margin: 0; padding: 0; list-style: none; }
  [data-brand] .d2-player { margin: 0; padding: 0; border: 0; }
  [data-brand] .d2-player-open {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--d2-sp-3);
    width: 100%;
    min-height: 64px;
    padding: 10px 14px 10px 12px;
    border: 0;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
    color: var(--d2-text);
    font: inherit;
    text-align: left;
  }
  [data-brand] div.d2-player-open { grid-template-columns: 40px minmax(0, 1fr) auto; }
  [data-brand] button.d2-player-open:active { background: var(--d2-surface-sunken); }
  [data-brand] :is(.d2-player-open, .d2-player-head, .d2-standing) .d2-av { width: 40px; height: 40px; margin: 0; font-size: var(--d2-fs-body); }
  [data-brand] .d2-player-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  [data-brand] .d2-player-text strong { font-family: var(--d2-font-display); font-size: var(--d2-fs-name); line-height: var(--d2-lh-name); font-weight: var(--d2-w-bold); overflow-wrap: anywhere; }
  [data-brand] .d2-player-text > span { color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-player-text > .lp-help { margin: 0; }
  [data-brand] .d2-player-text > .lp-linked { color: var(--d2-saved-fg); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-player-open .d2-tag[data-state="court"] { background: var(--d2-surface-soft); color: var(--d2-brand-royal); }
  [data-brand] .d2-player-chev { width: 18px; height: 18px; color: var(--d2-action-quiet-fg); }
  [data-brand] .d2-player.d2-is-me .d2-player-open { box-shadow: inset 0 0 0 2px var(--d2-brand-coral-deco), var(--d2-card-shadow); }
  [data-brand][data-d2-contrast="high"] .d2-player.d2-is-me .d2-player-open { box-shadow: inset 0 0 0 2.5px var(--d2-brand-coral); }
  [data-brand] .d2-player.d2-is-me .d2-av { background: var(--d2-av-me-bg); color: var(--d2-av-me-fg); }
  [data-brand] .d2-player.d2-is-me strong { color: var(--d2-text-link); }
  [data-brand] .d2-player-add { display: flex; flex-direction: column; gap: var(--d2-sp-2); margin: var(--d2-sp-5) 0 0; }
  [data-brand] .d2-player-add label { font-weight: var(--d2-w-semi); }
  [data-brand] .d2-player-add input { min-height: var(--d2-h-btn); }
  /* Player sheet */
  [data-brand] .d2-player-head { display: flex; align-items: center; gap: var(--d2-sp-3); }
  [data-brand] .d2-player-head p { margin: 2px 0 0; color: var(--d2-text-2); }
  [data-brand] .d2-player-head .d2-sheet-title { overflow-wrap: anywhere; }
  [data-brand] .d2-player-effect { margin: 0; padding: var(--d2-sp-3) var(--d2-sp-4); border-radius: var(--d2-r-sm); background: var(--d2-surface-soft); color: var(--d2-text); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-player-sheet .d2-menu-item.d2-player-end { border-color: var(--d2-error-hair); color: var(--d2-action-danger); }

  /* Rundy */
  [data-brand] .d2-rounds .d2-eyebrow { order: 0; margin: var(--d2-sp-5) 2px var(--d2-sp-3); }
  [data-brand] .d2-round-card { display: flex; flex-direction: column; gap: var(--d2-sp-2); margin: 0 0 var(--d2-sp-4); padding: 0; border: 0; background: none; box-shadow: none; }
  [data-brand] .d2-round-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d2-sp-2) var(--d2-sp-3); margin: 0 2px var(--d2-sp-1); }
  [data-brand] .d2-round-card-head h2 { margin: 0; font-size: var(--d2-fs-title); line-height: var(--d2-lh-title); font-weight: var(--d2-w-black); }
  [data-brand] .d2-round-progress { margin-left: auto; color: var(--d2-text-muted); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-round-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--d2-sp-3);
    min-height: 64px;
    padding: 8px 12px 8px 8px;
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
    color: var(--d2-text);
    text-decoration: none;
  }
  [data-brand] .d2-round-row > .d2-player-chev { grid-column: 4; }
  [data-brand] a.d2-round-row:active { background: var(--d2-surface-sunken); }
  [data-brand] .d2-round-row .d2-court-tile { width: 44px; height: 48px; }
  [data-brand] .d2-round-row .d2-court-tile b { font-size: 22px; }
  [data-brand] .d2-round-pairs { display: flex; flex-direction: column; min-width: 0; }
  [data-brand] .d2-round-pairs .lp-team { font-family: var(--d2-font-display); font-size: var(--d2-fs-body); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-name); overflow-wrap: break-word; }
  [data-brand] .d2-round-pairs .lp-team.d2-lost { color: var(--d2-text-muted); font-weight: var(--d2-w-medium); }
  [data-brand] .d2-round-pairs .lp-team span:not(:last-child)::after { content: " + "; }
  [data-brand] .d2-round-pairs .lp-versus { color: var(--d2-text-muted); font-family: var(--d2-font-display); font-size: var(--d2-fs-micro); font-weight: var(--d2-w-black); letter-spacing: var(--d2-tracking-caps); text-transform: uppercase; }
  [data-brand] .d2-round-row .d2-score-stack { font-size: 20px; }
  [data-brand] :is(.d2-round-pairs, .d2-round-people) .d2-is-me { color: var(--d2-text-link); font-weight: var(--d2-w-bold); }
  [data-brand] li:has(.d2-is-me) > .d2-round-row { box-shadow: inset 0 0 0 2px var(--d2-brand-coral-deco), var(--d2-card-shadow); }
  [data-brand][data-d2-contrast="high"] li:has(.d2-is-me) > .d2-round-row { box-shadow: inset 0 0 0 2.5px var(--d2-brand-coral); }
  [data-brand] .d2-round-people { margin: var(--d2-sp-1) 2px 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-round-people strong { color: var(--d2-text); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-rounds-plan > .lp-help { margin: 0 2px var(--d2-sp-3); }
  [data-brand] .d2-plan details { margin: 0 0 var(--d2-sp-2); padding: var(--d2-sp-3) var(--d2-sp-4); border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-plan summary { min-height: var(--d2-touch-min); display: flex; align-items: center; justify-content: space-between; gap: var(--d2-sp-3); font-family: var(--d2-font-display); font-weight: var(--d2-w-bold); list-style: none; }
  /* A closed round of the plan says it opens: a chevron that turns when it does (the flex summary has no marker). */
  [data-brand] .d2-plan summary::-webkit-details-marker { display: none; }
  [data-brand] .d2-plan summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px; border: solid var(--d2-action-quiet-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  [data-brand] .d2-plan details[open] > summary::after { margin: 4px 4px 0; transform: rotate(-135deg); }
  [data-brand] .d2-plan details p { margin: var(--d2-sp-1) 0; font-size: var(--d2-fs-small); overflow-wrap: anywhere; }
  [data-brand] .d2-plan small { color: var(--d2-text-muted); }
  [data-brand] .d2-rounds-back { margin-top: var(--d2-sp-4); }
  /* Gra: the way to the plan, which lives in Rundy (PO D2). */
  [data-brand] .d2-plan-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d2-sp-3);
    min-height: var(--d2-touch-min);
    margin: var(--d2-sp-4) 0 0;
    padding: var(--d2-sp-2) var(--d2-sp-4);
    border-radius: var(--d2-r-md);
    background: var(--d2-surface);
    box-shadow: var(--d2-card-shadow);
    color: var(--d2-text-link);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    text-decoration: none;
  }
  [data-brand] .d2-plan-link svg { flex: none; color: var(--d2-action-quiet-fg); }

  /* Tabela */
  [data-brand] .d2-table-head,
  [data-brand] .d2-standing { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) 3.4rem 3rem; align-items: center; gap: var(--d2-sp-2); }
  [data-brand] .d2-table-head { padding: 0 14px var(--d2-sp-2) 12px; color: var(--d2-text-muted); font-size: var(--d2-fs-label); font-weight: var(--d2-w-bold); letter-spacing: var(--d2-tracking-caps); text-transform: uppercase; }
  [data-brand] .d2-table-head > span:nth-child(2) { grid-column: 2 / 4; }
  [data-brand] .d2-table-head > span:nth-child(n+3) { text-align: right; }
  [data-brand] .d2-standing { margin: 0; padding: 10px 14px 10px 12px; border: 0; border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--d2-r-round); box-shadow: inset 0 0 0 var(--d2-border-w) var(--d2-border-line); font-family: var(--d2-font-display); font-size: var(--d2-fs-small); font-weight: var(--d2-w-black); font-variant-numeric: tabular-nums; }
  [data-brand] .d2-rank[data-top="1"] { background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); box-shadow: none; }
  [data-brand] .d2-rank:is([data-top="2"], [data-top="3"]) { background: var(--d2-surface-soft); box-shadow: none; }
  [data-brand] .d2-standing .lp-ranking-player { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  [data-brand] .d2-standing .lp-ranking-player strong { font-family: var(--d2-font-display); font-size: var(--d2-fs-name); line-height: var(--d2-lh-name); font-weight: var(--d2-w-bold); overflow-wrap: anywhere; hyphens: auto; }
  [data-brand] .d2-standing .lp-ranking-player .lp-help { margin: 0; font-size: var(--d2-fs-small); }
  /* "Mecze: 1 · 100%": a part never breaks inside, and the separator in front of a part that starts a line sits in the
     clipped margin — no "·" alone at a line's start on a narrow phone. */
  [data-brand] .d2-standing .lp-stats { --d2-stats-sep: 0.9em; display: flex; flex-wrap: wrap; column-gap: var(--d2-stats-sep); overflow: hidden; color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-standing .lp-stats > span { margin-left: calc(-1 * var(--d2-stats-sep)); white-space: nowrap; }
  [data-brand] .d2-standing .lp-stats > span::before { content: "·"; content: "·" / ""; display: inline-block; width: var(--d2-stats-sep); text-align: center; }
  [data-brand] .d2-standing-wl, [data-brand] .d2-standing .lp-diff { text-align: right; font-family: var(--d2-font-display); font-size: var(--d2-fs-name); font-weight: var(--d2-w-black); font-variant-numeric: tabular-nums; white-space: nowrap; }
  [data-brand] .d2-standing .lp-diff { color: var(--d2-brand-royal); }
  [data-brand] .d2-standing.d2-is-me { box-shadow: inset 0 0 0 2px var(--d2-brand-coral-deco), var(--d2-card-shadow); }
  [data-brand][data-d2-contrast="high"] .d2-standing.d2-is-me { box-shadow: inset 0 0 0 2.5px var(--d2-brand-coral); }
  [data-brand] .d2-standing.d2-is-me .d2-av { background: var(--d2-av-me-bg); color: var(--d2-av-me-fg); }
  [data-brand] .d2-standing.d2-is-me strong { color: var(--d2-text-link); }
  [data-brand] .d2-standings > .lp-help { margin: var(--d2-sp-4) 2px; }
  [data-brand] .lp-main:has(.d2-rounds) { padding-bottom: calc(var(--d2-nav-h) + var(--d2-sp-6) + var(--d2-safe-bottom)); }
  [data-brand] .lp-main:has(.d2-standings) { padding-bottom: calc(var(--d2-nav-h) + 72px + var(--d2-safe-bottom)); }
  [data-brand] .d2-mybar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--d2-nav-h) + var(--d2-sp-3) + var(--d2-safe-bottom));
    transform: translateX(-50%);
    z-index: var(--d2-z-dock);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d2-sp-3);
    width: calc(100% - 2 * var(--d2-gutter));
    max-width: var(--d2-content-max);
    min-height: var(--d2-h-btn);
    padding: 0 var(--d2-sp-5);
    border: 0;
    border-radius: var(--d2-r-pill);
    background: var(--d2-toast-bg);
    color: var(--d2-toast-fg);
    box-shadow: var(--d2-shadow-lg);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-body);
    font-weight: var(--d2-w-black);
    text-align: left;
  }
  [data-brand] .d2-mybar[hidden] { display: none; }
  [data-brand] .d2-mybar svg { transform: rotate(90deg); flex: none; }
  [data-brand] .d2-mybar:focus-visible { outline-color: var(--d2-focus-on-fill); }
  /* A narrow phone keeps the whole name on its line: the court / rest tag goes under it. */
  @media (max-width: 399.98px) {
    [data-brand] .d2-player-open { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: var(--d2-sp-1); }
    [data-brand] .d2-player-open > .d2-av { grid-row: 1 / span 2; }
    [data-brand] .d2-player-open > .d2-player-text { grid-column: 2; grid-row: 1; }
    [data-brand] .d2-player-open > .d2-tag { grid-column: 2; grid-row: 2; justify-self: start; }
    [data-brand] .d2-player-open > .d2-player-chev { grid-column: 3; grid-row: 1 / span 2; }
  }
  @media (max-width: 359.98px) {
    [data-brand] .d2-table-head, [data-brand] .d2-standing { grid-template-columns: 26px 32px minmax(0, 1fr) 2.8rem 2.6rem; gap: 6px; }
    [data-brand] .d2-standing .d2-av { width: 32px; height: 32px; }
  }
}

/* R6 — entry: landing, Nowa gra (SetupForm + ValidationSummary + replace warning), Udostępnij (ShareLinkCard / QR),
   join, unavailable, back (DS §3.19–3.22, Gate 2.1 01–09). The same fields, ids and forms as before. */
@layer d2.components {
  [data-brand] .d2-entry { padding-bottom: var(--d2-sp-8); }
  [data-brand] .d2-entry h1 { color: var(--d2-text); }
  [data-brand] .d2-entry .lp-lead { margin: 0 0 var(--d2-sp-4); color: var(--d2-text-2); font-size: var(--d2-fs-body); line-height: var(--d2-lh-body); }
  [data-brand] .d2-entry .lp-help { margin: var(--d2-sp-2) 0; color: var(--d2-text-muted); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-entry .lp-center { text-align: center; }
  [data-brand] .d2-entry .lp-wide { display: flex; align-items: center; justify-content: center; gap: var(--d2-sp-2); width: 100%; padding: var(--d2-sp-2) var(--d2-sp-5); text-align: center; text-decoration: none; }
  [data-brand] .d2-entry .lp-wide + .lp-wide { margin-top: var(--d2-sp-3); }
  [data-brand] .d2-entry .lp-secondary { min-height: var(--d2-h-btn); }
  [data-brand] .d2-entry .lp-secondary.d2-btn-link { min-height: var(--d2-touch-min); border: 0; background: none; }
  /* The CTA's arrow is an icon in a soft circle, never a "→" in the copy (copy §1.6). */
  [data-brand] .d2-cta-chev { width: 30px; height: 30px; padding: 5px; border-radius: var(--d2-r-round); background: var(--d2-cta-chev-bg); }
  [data-brand] .d2-btn-sm { min-height: var(--d2-h-btn-sm); padding: 0 var(--d2-sp-4); }

  /* Page head: back (44 px) + the screen title, like the sub-screens of R5. */
  [data-brand] .d2-page-head { display: flex; align-items: center; gap: var(--d2-sp-3); margin: var(--d2-sp-2) 0 var(--d2-sp-2); }
  [data-brand] .d2-page-head .d2-icon-btn { flex: none; color: var(--d2-action-quiet-fg); text-decoration: none; box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-page-head .d2-screen-title { min-width: 0; overflow-wrap: break-word; }

  /* Fields of the entry forms: label above, 52 px control, the control's border at 3:1. */
  [data-brand] .d2-entry .d2-field-label { display: flex; justify-content: space-between; gap: var(--d2-sp-3); margin: var(--d2-sp-3) 0 var(--d2-sp-2); color: var(--d2-text); font-family: var(--d2-font-display); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-entry .d2-field-label .lp-muted { color: var(--d2-text-muted); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-entry :is(input:not([type=checkbox], [type=hidden]), textarea, select) {
    width: 100%;
    min-height: var(--d2-h-input);
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border: var(--d2-border-control-w) solid var(--d2-border-control);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface);
    color: var(--d2-text);
  }
  [data-brand] .d2-entry textarea { min-height: 11rem; line-height: 1.6; }
  [data-brand] .d2-entry :is(input, textarea)[aria-invalid="true"] { border-color: var(--d2-error-line); }
  [data-brand] .d2-field-error { display: flex; gap: var(--d2-sp-2); margin: var(--d2-sp-2) 0 0; color: var(--d2-error-fg); font-size: var(--d2-fs-small); font-weight: var(--d2-w-bold); line-height: var(--d2-lh-small); }
  [data-brand] .d2-field-error::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--d2-mask-alert) center / contain no-repeat; mask: var(--d2-mask-alert) center / contain no-repeat; }

  /* ValidationSummary (DS §3.21) and the replace warning: an L1 banner with a title, the server's text and one action. */
  [data-brand] .d2-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--d2-sp-1); margin-top: var(--d2-sp-2); scroll-margin-top: var(--d2-sp-3); }
  [data-brand] .d2-summary > p { margin: 0; }
  [data-brand] .d2-summary-title { font-family: var(--d2-font-display); font-size: var(--d2-fs-body); font-weight: var(--d2-w-black); }
  [data-brand] .d2-summary > :is(button, a) { margin-top: var(--d2-sp-2); }
  [data-brand] .d2-summary > .lp-wide + .lp-wide { margin-top: var(--d2-sp-1); }
  [data-brand] :is(.lp-error, .d2-note)[data-tone="pending"] { border-color: var(--d2-pending-line); background: var(--d2-pending-bg); color: var(--d2-pending-strong); }
  [data-brand] .d2-summary:focus-visible { outline-offset: 2px; }

  /* "Wróć do bieżącej gry" (ActionBanner info, priority 9): one row, the whole of it a link. */
  [data-brand] .d2-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d2-sp-3);
    min-height: var(--d2-touch-min);
    margin: var(--d2-sp-2) 0 var(--d2-sp-3);
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border-radius: var(--d2-r-sm);
    background: var(--d2-info-bg);
    color: var(--d2-info-fg);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    text-decoration: none;
  }

  /* SetupForm (DS §3.20): three step cards, the layout preview, the CTA kept on screen at the bottom. */
  [data-brand] .d2-step { margin: 0 0 var(--d2-sp-3); padding: var(--d2-sp-4); border: 0; border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-step > h2 { display: flex; align-items: center; gap: var(--d2-sp-3); margin: 0 0 var(--d2-sp-2); font-size: var(--d2-fs-title); font-weight: var(--d2-w-black); line-height: var(--d2-lh-title); }
  [data-brand] .d2-step .lp-step { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; margin: 0; border-radius: var(--d2-r-round); background: var(--d2-surface-soft); color: var(--d2-brand-royal); font-size: var(--d2-fs-body); font-weight: var(--d2-w-black); }
  [data-brand] .d2-setup textarea { background: var(--d2-surface-sunken); }

  /* Segmented control (courts, score presets): one row of 44 px radios in a soft track. */
  [data-brand] .d2-seg { display: flex; gap: var(--d2-sp-1); margin: 0; padding: var(--d2-sp-1); border-radius: var(--d2-r-pill); background: var(--d2-surface-sunken); box-shadow: var(--d2-edge); }
  [data-brand] .d2-seg > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--d2-h-seg);
    padding: 0 var(--d2-sp-2);
    border: 0;
    border-radius: var(--d2-r-pill);
    background: transparent;
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-size: var(--d2-fs-lead);
    font-weight: var(--d2-w-black);
    white-space: nowrap;
  }
  [data-brand] .d2-seg > button[aria-checked="true"] { background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); box-shadow: var(--d2-shadow-sm); }
  [data-brand] .d2-seg > button[aria-checked="true"]:focus-visible { outline-color: var(--d2-focus); }
  /* Once setup-controls.js has drawn the segments, the select stays the submitted field, out of sight. */
  [data-brand] .d2-entry select.d2-seg-source { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-brand] .d2-setup .lp-presets { margin: var(--d2-sp-2) 0 var(--d2-sp-4); }

  /* Switch (singles instead of waiting, win by two): the checkbox itself, role=switch — still the only form field. */
  [data-brand] .d2-switch-row {
    display: flex;
    align-items: center;
    gap: var(--d2-sp-3);
    margin: var(--d2-sp-3) 0 0;
    padding: var(--d2-sp-3) var(--d2-sp-4);
    border-radius: var(--d2-r-sm);
    background: var(--d2-surface-sunken);
    box-shadow: var(--d2-edge);
    color: var(--d2-text);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    cursor: pointer;
  }
  [data-brand] .d2-switch-row > span { flex: 1; min-width: 0; }
  [data-brand] .d2-switch-row small { display: block; margin-top: var(--d2-sp-1); color: var(--d2-text-2); font-family: var(--d2-font-body); font-size: var(--d2-fs-small); font-weight: var(--d2-w-regular); line-height: var(--d2-lh-small); }
  [data-brand] .d2-switch-row input[role="switch"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 56px;
    height: 32px;
    margin: 6px 0;
    border: var(--d2-border-control-w) solid var(--d2-border-control);
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface);
    cursor: pointer;
    transition: background-color var(--d2-dur-fast) var(--d2-ease);
  }
  [data-brand] .d2-switch-row input[role="switch"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: var(--d2-r-round);
    background: var(--d2-border-control);
    transition: transform var(--d2-dur-fast) var(--d2-ease);
  }
  [data-brand] .d2-switch-row input[role="switch"]:checked { border-color: var(--d2-action-repair-bg); background: var(--d2-action-repair-bg); }
  [data-brand] .d2-switch-row input[role="switch"]:checked::before { background: var(--d2-surface); transform: translateX(24px); }

  /* NumericField "Punkty do wygranej": label left, a big number right. */
  [data-brand] .d2-number-row { display: flex; align-items: center; justify-content: space-between; gap: var(--d2-sp-3); }
  [data-brand] .d2-number-row label { margin: 0; font-family: var(--d2-font-display); font-weight: var(--d2-w-bold); }
  [data-brand] .d2-entry .d2-number-row input { width: 7.5rem; flex: none; background: var(--d2-surface-sunken); font-family: var(--d2-font-display); font-size: var(--d2-fs-title); font-weight: var(--d2-w-black); text-align: center; }
  [data-brand] .d2-more { margin: var(--d2-sp-4) 0 0; }
  [data-brand] .d2-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d2-sp-2);
    min-height: var(--d2-h-btn);
    padding: var(--d2-sp-2) var(--d2-sp-4);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    border-radius: var(--d2-r-sm);
    color: var(--d2-action-quiet-fg);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
    list-style: none;
  }
  [data-brand] .d2-more > summary::-webkit-details-marker { display: none; }
  [data-brand] .d2-more[open] > summary svg { transform: rotate(90deg); }

  /* "Układ rundy" (HTMX /shape): an info block with the court icon; the previous preview stays until the answer. */
  [data-brand] .d2-setup #shape-preview {
    position: relative;
    margin: var(--d2-sp-4) 0;
    padding: var(--d2-sp-4) var(--d2-sp-4) var(--d2-sp-4) calc(var(--d2-sp-4) + var(--d2-icon) + var(--d2-sp-3));
    border: 0;
    border-radius: var(--d2-r-md);
    background: var(--d2-info-bg);
    color: var(--d2-text);
  }
  [data-brand] .d2-setup #shape-preview::before {
    content: "";
    position: absolute;
    left: var(--d2-sp-4);
    top: calc(var(--d2-sp-4) + 2px);
    width: var(--d2-icon);
    height: var(--d2-icon);
    background: var(--d2-brand-royal);
    -webkit-mask: var(--d2-mask-court) center / contain no-repeat;
    mask: var(--d2-mask-court) center / contain no-repeat;
  }
  [data-brand] .d2-setup #shape-preview strong { font-family: var(--d2-font-display); font-weight: var(--d2-w-black); }
  [data-brand] .d2-setup #shape-preview p { margin: var(--d2-sp-1) 0 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-setup #shape-preview .lp-shape { margin: var(--d2-sp-1) 0; color: var(--d2-text); font-family: var(--d2-font-display); font-size: var(--d2-fs-name); font-weight: var(--d2-w-black); }
  [data-brand] .d2-setup #shape-preview.htmx-request { opacity: 1; }
  /* The CTA stays reachable while the form scrolls (DS §3.20 "CTA w doku"); the page has no bottom nav. */
  [data-brand] .d2-setup-cta {
    position: sticky;
    bottom: calc(var(--d2-sp-3) + var(--d2-safe-bottom));
    z-index: var(--d2-z-dock);
    margin-top: var(--d2-sp-3);
  }
  [data-brand] .d2-next-step { margin-top: var(--d2-sp-3); }
  /* With the replace warning on screen its "Tak" is the one decision (L1): the CTA waits in the flow. */
  [data-brand] .d2-setup:has(#replace-warning) .d2-setup-cta { position: static; }
  @media (max-height: 499.98px) {
    [data-brand] .d2-setup-cta { position: static; }
  }

  /* The account's crew (club, §4): the last roster button and name chips. */
  [data-brand] .d2-setup .lp-crew { margin: 0 0 var(--d2-sp-3); padding: 0 0 var(--d2-sp-3); border-bottom: var(--d2-border-w) solid var(--d2-border-line); }
  [data-brand] .d2-setup .lp-crew .lp-secondary { flex-direction: column; min-height: var(--d2-h-cta); }
  [data-brand] .d2-setup .lp-crew .lp-secondary small { display: block; color: var(--d2-text-2); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); }
  [data-brand] .d2-setup .lp-who { display: flex; flex-wrap: wrap; gap: var(--d2-sp-2); margin: var(--d2-sp-2) 0 0; }
  [data-brand] .d2-setup .lp-who-name {
    min-height: var(--d2-touch-min);
    padding: 0 var(--d2-sp-4);
    border: var(--d2-border-control-w) solid var(--d2-border-line);
    border-radius: var(--d2-r-pill);
    background: var(--d2-surface);
    color: var(--d2-text);
    font-family: var(--d2-font-display);
    font-weight: var(--d2-w-bold);
  }
  [data-brand] .d2-setup .lp-who-name[aria-pressed="true"] { border-color: var(--d2-action-repair-bg); background: var(--d2-action-repair-bg); color: var(--d2-text-on-fill); }

  /* Landing */
  [data-brand] .d2-landing-hero {
    position: relative;
    isolation: isolate;
    /* Clips the decoration without scrollable overflow (as "Grasz teraz"; the visual gate's clip check). */
    contain: paint;
    margin: var(--d2-sp-2) 0 var(--d2-sp-6);
    padding: var(--d2-sp-6) var(--d2-sp-5) var(--d2-sp-4);
    border-radius: var(--d2-r-lg);
    background:
      radial-gradient(circle at -10px -10px, var(--d2-hero-blob) 0 46px, transparent 47px),
      radial-gradient(circle at calc(100% + 24px) calc(100% + 30px), var(--d2-landing-blob, var(--d2-brand-peach-blob)) 0 40px, transparent 41px),
      var(--d2-hero-bg);
    box-shadow: var(--d2-hero-shadow);
    color: var(--d2-hero-ink);
  }
  /* Decoration only: the court seen from above with the ball (as on "Grasz teraz"). */
  [data-brand] .d2-landing-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -22px;
    right: -38px;
    width: 180px;
    height: 136px;
    border-radius: var(--d2-r-sm);
    transform: rotate(-24deg) skewX(12deg);
    background:
      radial-gradient(circle at 30% 70%, var(--d2-brand-ball) 0 13px, transparent 14px),
      linear-gradient(90deg, transparent calc(50% - 1px), var(--d2-hero-art-line) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(transparent 30%, var(--d2-hero-art-line) 30% calc(30% + 2px), transparent calc(30% + 2px) calc(70% - 2px), var(--d2-hero-art-line) calc(70% - 2px) 70%, transparent 70%),
      var(--d2-hero-art);
    box-shadow: inset 0 0 0 3px var(--d2-hero-art-line);
    -webkit-mask-image: linear-gradient(100deg, transparent 4%, black 40%);
    mask-image: linear-gradient(100deg, transparent 4%, black 40%);
    pointer-events: none;
  }
  [data-brand] .d2-kicker { margin: 0 0 var(--d2-sp-2); padding-right: 5.5rem; color: var(--d2-hero-sub); font-family: var(--d2-font-display); font-size: var(--d2-fs-label); font-weight: var(--d2-w-black); letter-spacing: var(--d2-tracking-caps); text-transform: uppercase; }
  [data-brand] .d2-landing-hero h1 { margin: 0 0 var(--d2-sp-3); color: var(--d2-hero-ink); font-size: clamp(2.1rem, 9.4vw, 2.75rem); line-height: 1.05; overflow-wrap: break-word; text-wrap: balance; }
  [data-brand] .d2-landing-hero .lp-lead { color: var(--d2-hero-sub); font-size: var(--d2-fs-lead); line-height: var(--d2-lh-lead); text-wrap: pretty; }
  [data-brand] .d2-landing-hero .lp-primary {
    margin-top: var(--d2-sp-2);
    background: var(--d2-landing-cta-bg, var(--d2-action-primary-bg));
    color: var(--d2-landing-cta-fg, var(--d2-text-on-fill));
    box-shadow: var(--d2-landing-cta-edge, var(--d2-shadow-cta));
  }
  [data-brand] .d2-landing-hero .lp-primary:is(:hover, :active) {
    background: var(--d2-landing-cta-pressed, var(--d2-action-primary-pressed));
  }
  [data-brand] .d2-landing-hero .lp-primary:focus-visible { outline-color: var(--d2-landing-focus, var(--d2-focus)); }
  [data-brand] .d2-landing-note span { text-wrap: balance; }
  [data-brand] .d2-landing-note { display: flex; align-items: center; justify-content: center; gap: var(--d2-sp-2); margin: var(--d2-sp-3) 0 0; color: var(--d2-hero-sub); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); text-align: center; }
  [data-brand] .d2-entry > .d2-eyebrow { order: 0; margin: 0 2px var(--d2-sp-3); }
  [data-brand] .d2-how { display: flex; flex-direction: column; gap: var(--d2-sp-3); margin: 0 0 var(--d2-sp-6); padding: 0; list-style: none; }
  [data-brand] .d2-how > li { display: flex; gap: var(--d2-sp-4); padding: var(--d2-sp-4); border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] :is(.d2-how-ic, .d2-share-ic, .d2-empty-ic) { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--d2-r-sm); background: var(--d2-surface-soft); color: var(--d2-brand-royal); }
  [data-brand] .d2-how h3 { margin: 0 0 var(--d2-sp-1); font-size: var(--d2-fs-name); font-weight: var(--d2-w-black); line-height: var(--d2-lh-name); }
  [data-brand] .d2-how p { margin: 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); line-height: var(--d2-lh-small); }
  [data-brand] .d2-example { margin: 0; }
  [data-brand] .d2-example-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--d2-sp-2) var(--d2-sp-3); padding: 10px 14px 10px 10px; border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-example-pairs { display: flex; flex-direction: column; margin: 0; font-family: var(--d2-font-display); font-size: var(--d2-fs-body); font-weight: var(--d2-w-bold); line-height: var(--d2-lh-name); overflow-wrap: anywhere; }
  [data-brand] .d2-example-score { display: flex; flex-direction: column; align-items: flex-end; margin: 0; font-family: var(--d2-font-display); font-size: var(--d2-fs-title); font-weight: var(--d2-w-black); line-height: 1.1; font-variant-numeric: tabular-nums; }
  [data-brand] .d2-example-score span { color: var(--d2-text-muted); }
  [data-brand] .d2-example-row > .d2-tag { grid-column: 2 / -1; justify-self: start; }
  [data-brand] .d2-example figcaption { margin: var(--d2-sp-2) 2px 0; }

  /* ShareLinkCard / QR (DS §3.19) */
  [data-brand] .d2-share-card { margin: 0 0 var(--d2-sp-4); padding: var(--d2-sp-4); border-radius: var(--d2-r-md); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); }
  [data-brand] .d2-share-head { display: flex; align-items: center; gap: var(--d2-sp-3); margin: 0 0 var(--d2-sp-3); }
  [data-brand] .d2-share-head h2 { margin: 0; font-size: var(--d2-fs-title); font-weight: var(--d2-w-black); line-height: var(--d2-lh-title); }
  [data-brand] .d2-share-head p { margin: 2px 0 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); }
  [data-brand] .d2-share-card[data-kind="cohost"] .d2-share-ic { background: var(--d2-pending-bg); color: var(--d2-pending-fg); }
  [data-brand] .d2-share-card > p { color: var(--d2-text-2); }
  /* Navy modules on white, the quiet zone inside the server's SVG; 220 px or 62 % of a narrow screen. */
  [data-brand] .d2-share .lp-qr { width: min(220px, 62vw); max-width: none; margin: var(--d2-sp-2) auto 0; padding: var(--d2-sp-2); border: var(--d2-border-w) solid var(--d2-border-line); border-radius: var(--d2-r-sm); background: var(--d2-qr-bg); }
  [data-brand] .d2-share .lp-qr svg { display: block; width: 100%; height: auto; }
  [data-brand] .d2-qr-hint { margin: var(--d2-sp-2) 0 0; color: var(--d2-text-muted); font-size: var(--d2-fs-small); text-align: center; }
  [data-brand] .d2-share #share-link { margin: 0 0 var(--d2-sp-3); background: var(--d2-surface-sunken); font-family: var(--d2-font-mono); font-size: var(--d2-fs-small); text-overflow: ellipsis; }
  [data-brand] #share-feedback { min-height: 1.4em; margin: var(--d2-sp-2) 0 0; color: var(--d2-text-2); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); text-align: center; }
  [data-brand] #share-feedback[data-state="done"] { color: var(--d2-saved-fg); }
  [data-brand] #share-feedback[data-state="done"]::before { content: "✓ " / ""; }
  [data-brand] .d2-note { margin: 0 0 var(--d2-sp-3); padding: var(--d2-sp-3) var(--d2-sp-4); border: var(--d2-border-w) solid; border-radius: var(--d2-r-sm); font-size: var(--d2-fs-small); font-weight: var(--d2-w-semi); line-height: var(--d2-lh-small); }

  /* EmptyState (DS §3.22): join, unavailable, back — one card, an icon, one sentence, at most two actions. */
  [data-brand] .d2-empty-card { display: flex; flex-direction: column; align-items: stretch; margin: var(--d2-sp-2) 0 0; padding: var(--d2-sp-6) var(--d2-sp-5) var(--d2-sp-5); border-radius: var(--d2-r-lg); background: var(--d2-surface); box-shadow: var(--d2-card-shadow); text-align: left; }
  [data-brand] .d2-empty-card > .d2-empty-ic { align-self: center; width: 64px; height: 64px; border-radius: var(--d2-r-round); }
  [data-brand] .d2-empty-card > .d2-empty-ic svg { width: 28px; height: 28px; }
  [data-brand] .d2-empty-card > h1 { margin: var(--d2-sp-4) 0 var(--d2-sp-3); font-size: var(--d2-fs-display); line-height: var(--d2-lh-display); text-align: center; overflow-wrap: break-word; }
  [data-brand] .d2-empty-card > p { color: var(--d2-text-2); }
  [data-brand] .d2-empty-card > .lp-error { margin: 0 0 var(--d2-sp-4); }
  [data-brand] .d2-empty-card > form { margin: var(--d2-sp-2) 0 0; }
  [data-brand] .d2-empty-card > a.lp-wide:first-of-type { margin-top: 0; }
  [data-brand] .d2-points { display: flex; flex-direction: column; gap: var(--d2-sp-3); margin: 0 0 var(--d2-sp-4); padding: 0; list-style: none; }
  [data-brand] .d2-points li { display: flex; gap: var(--d2-sp-3); color: var(--d2-text-2); }
  [data-brand] .d2-points svg { margin-top: 1px; color: var(--d2-brand-royal); }
  /* back: a spinner while the refresh runs; still under reduced motion the page leaves by itself. */
  [data-brand] .d2-spinner { align-self: center; width: 44px; height: 44px; border: 4px solid var(--d2-surface-soft); border-top-color: var(--d2-brand-royal); border-radius: var(--d2-r-round); animation: d2-spin .9s linear infinite; }
  @keyframes d2-spin { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) {
    [data-brand] .d2-spinner { animation: none; }
  }
  [data-brand] .d2-empty .lp-title { text-align: center; }
}