/* =====================================================================
   ItsMe Design System v1  ->  public/design-system.css
   Load in index.html <head> BEFORE the Fontshare link and the inline <style>:
     <link rel="preload" href="/assets/fonts/anton-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/design-system.css?v=__HUB_ASSET_VERSION__">
   Structure
     1) tokens on :root (--ds-*)                 single source of truth
     2) bridge (:root:root / .it-site.it-site)   re-points legacy variable names, beats later :root{} blocks
     3) @layer ds { base + components }          layered = never overrides legacy unlayered CSS;
                                                 pages opt in by class (ds-*), then delete their own look rules
   Reference pages: home hero, /giochi + /stagione (gx/pg), CREA composer, /gioca + /events (competitive).
   ===================================================================== */

/* Titoli: Clash Display Semibold. Un solo file per tutti i pesi: le regole che chiedono 400 (eredità di Anton)
   prendono comunque il semibold. Testo: Satoshi. Entrambi Fontshare (ITF Free Font License), ospitati qui. */
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clash-display-600.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 100 449; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 450 599; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
/* Anton resta per i giochi che lo disegnano su canvas (Spike Arena, Spike Battle): si scarica solo lì. */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: dark;

  /* surfaces: one ink family, warm black from the ITSME logo, never blue or neutral grey */
  --ds-ink-950: #070605;  /* overlays, fullscreen game stages, footer base */
  --ds-ink-900: #0b0a09;  /* page + body background */
  --ds-ink-850: #151311;  /* card / panel */
  --ds-ink-800: #1e1b18;  /* raised: input, popover, sheet */
  --ds-ink-700: #2a2622;  /* hover / selected row */
  --ds-line: rgba(244, 242, 236, .1);
  --ds-line-strong: rgba(244, 242, 236, .22);
  --ds-scrim: rgba(7, 6, 5, .74);
  --ds-art-scrim-x: linear-gradient(90deg, #0b0a09 0%, rgba(11, 10, 9, .9) 34%, rgba(11, 10, 9, .3) 64%, rgba(11, 10, 9, 0) 100%);
  --ds-art-scrim-y: linear-gradient(0deg, #0b0a09 0%, rgba(11, 10, 9, .86) 40%, rgba(11, 10, 9, 0) 80%);

  /* text */
  --ds-text: #f4f2ec;     /* paper: headings + body on ink (17.9:1) */
  --ds-text-2: #b8b1a6;   /* secondary (9.4:1) */
  --ds-text-3: #9a9286;   /* meta / disabled label (6.5:1). nothing dimmer for text */

  /* brand: ONE gold (the ITSME crown), ONE red. The --ds-lime* names stay so every page keeps working:
     the value is now the ITSME gold. */
  --ds-brand-lime: #d8ac40;            /* ITSME gold, safe on cream inversions */
  --ds-lime: var(--ds-brand-lime);     /* primary action, active state, "you", progress */
  --ds-lime-hover: #ecc35e;
  --ds-lime-soft: rgba(216, 172, 64, .12);
  --ds-lime-line: rgba(216, 172, 64, .5);
  --ds-on-lime: #0b0a09;               /* ink on gold 9.6:1 */
  --ds-brand-red: #c0301f;             /* the red stamp of the ITSME logo: brand marks only, not for text */
  --ds-red: #ff4655;                   /* VALORANT red: enemy, attack, live, destructive, Spike Chess title word */
  --ds-red-hover: #ff6b77;
  --ds-red-soft: rgba(255, 70, 85, .14);
  --ds-on-red: #0b0a09;                /* ink on red 5.8:1 (white is 3.4:1) */

  /* semantic (system feedback only: toasts, inline validation, status chips) */
  --ds-success: #3fe0a0;
  --ds-warning: #f4ca64;
  --ds-info: #58cfff;
  --ds-danger: var(--ds-red);
  --ds-live: var(--ds-red);

  /* data accents (charts, map sites, rarity, tiers, game titles). NEVER for buttons */
  --ds-site-a: #22c8f0;  --ds-site-b: #c25cff;  --ds-spike: #ff8a3d;
  --ds-rarity-common: #9aa7b3;  --ds-rarity-rare: #4ab8ff;  --ds-rarity-epic: #b06bff;  --ds-rarity-legend: #ffcf4a;
  --ds-tier-bronze: #d08a52;  --ds-tier-silver: #c9d3dc;  --ds-tier-gold: #ffcf4a;
  --ds-cat-clip: #ff4655;  --ds-cat-meme: #ffb84d;  --ds-cat-fanart: #b28cff;  --ds-cat-aim: #4fe3c1;  --ds-cat-disc: #7cc4ff;

  /* cream "paper" band: max ONE per page, only through .ds-cream */
  --ds-cream: #f4f2ec;  --ds-cream-2: #e9e5d8;  --ds-on-cream: #0b0a09;  --ds-on-cream-2: #4a443c;  --ds-cream-accent: #6b4f0e;

  /* type: two families only */
  --ds-font-display: "Clash Display", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; /* semibold, minuscolo */
  --ds-font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* 400/500/700 */
  --ds-display-case: none;   /* i titoli non sono più tutti maiuscoli (era Anton maiuscolo) */
  --ds-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* IDs, codes only */
  --ds-display-xl: clamp(46px, 7.2vw, 108px); /* home hero + game landing H1 */
  --ds-display-l:  clamp(34px, 4.6vw, 68px); /* page H1 (utility pages) + home band H2 */
  --ds-display-m:  clamp(25px, 2.6vw, 40px); /* section H2 inside a page */
  --ds-display-s:  clamp(19px, 1.7vw, 24px); /* card / panel title */
  --ds-lh-display: 1;
  --ds-tracking-display: -.02em;
  --ds-text-lg: 18px;  /* lede */
  --ds-text-md: 16px;  /* body, inputs (also stops iOS zoom) */
  --ds-text-sm: 14px;  /* secondary */
  --ds-text-xs: 12px;  /* meta: FLOOR for any sentence-case text */
  --ds-eyebrow-size: 12px;
  --ds-label-size: 11px;  /* only uppercase + tracked stat labels may go this small */
  --ds-tracking-caps: .14em;

  /* space: 4px grid */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px;
  --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; --ds-space-9: 96px;
  --ds-section-y: clamp(56px, 7vw, 104px);       /* vertical padding of a page band */
  --ds-section-y-tight: clamp(40px, 4.5vw, 64px);

  /* layout: one shell for header, every page and footer (left edges line up) */
  --ds-shell-max: 1440px;                 /* content width, gutters excluded */
  --ds-gutter: clamp(16px, 4vw, 64px);    /* 16 @390, 58 @1440, 64 @1600+ */
  --ds-read: 68ch;
  --ds-tap: 44px;
  --ds-topnav-h: 64px;
  --ds-bottomnav-h: 64px;                 /* + env(safe-area-inset-bottom) */
  /* breakpoints (docs only, media queries cannot read vars): sm 560 · md 820 (bottom bar) · lg 1180 · xl 1440 */

  /* shape: four radii, nothing else */
  --ds-r-0: 0;           /* bands, full-bleed media */
  --ds-r-1: 10px;        /* controls: buttons, inputs, chips, tabs, tiles */
  --ds-r-2: 16px;        /* cards, panels, popovers, sheets, toasts */
  --ds-r-pill: 999px;    /* avatars, status dots, count badges, level ring ONLY */

  /* depth: borders first, shadows only for floating layers */
  --ds-shadow-1: 0 8px 24px rgba(0, 0, 0, .28);
  --ds-shadow-2: 0 24px 64px rgba(0, 0, 0, .5);
  --ds-glow-lime: 0 0 0 1px rgba(216, 172, 64, .35), 0 12px 32px -12px rgba(216, 172, 64, .45); /* "your turn", "claimable" only */
  --ds-focus-color: var(--ds-lime-hover);
  --ds-focus-width: 3px;
  --ds-focus-offset: 3px;

  /* motion */
  --ds-ease: cubic-bezier(.2, .8, .2, 1);
  --ds-dur-1: 120ms;  /* press */
  --ds-dur-2: 180ms;  /* hover, colour */
  --ds-dur-3: 320ms;  /* sheets, reveals */

  /* layers: use only these */
  --ds-z-raised: 1;  --ds-z-sticky: 50;  --ds-z-dropdown: 60;  --ds-z-bottomnav: 70;  --ds-z-fab: 80;
  --ds-z-overlay: 100;  /* modal, sheet, composer, quick search, Altro */
  --ds-z-game: 200;     /* fullscreen game stages */
  --ds-z-celebrate: 300;/* card reveal, confetti */
  --ds-z-toast: 400;
}
@media (max-width: 819.98px) { :root { --ds-topnav-h: 56px; } }

/* ---------------------------------------------------------------- 2. BRIDGE
   (0,2,0) beats the later ":root {}" (index.html, modern.css, competitive-shell.css)
   and ".it-site {}" (site-competitive.css, social-v2.css) blocks: one lime, one ink, one font, at once. */
:root:root {
  /* index.html inline */
  --bg: var(--ds-ink-900); --surface: var(--ds-ink-850); --raised: var(--ds-ink-800);
  --line: var(--ds-line); --line-strong: var(--ds-line-strong);
  --text: var(--ds-text); --muted: var(--ds-text-2); --dim: var(--ds-text-3);
  --accent: var(--ds-lime); --accent-soft: var(--ds-lime-soft); --accent-ink: var(--ds-on-lime);
  --coral: var(--ds-red);
  --radius: var(--ds-r-2); --radius-sm: var(--ds-r-1);
  --font-display: var(--ds-font-display); /* retires Clash Display */
  --font-body: var(--ds-font-body);
  /* modern.css */
  --m-bg: var(--ds-ink-900); --m-surface: var(--ds-ink-850); --m-surface-2: var(--ds-ink-800); --m-surface-3: var(--ds-ink-700);
  --m-line: var(--ds-line); --m-line-strong: var(--ds-line-strong);
  --m-text: var(--ds-text); --m-muted: var(--ds-text-2); --m-dim: var(--ds-text-3);
  --m-lime: var(--ds-lime); --m-red: var(--ds-red);
  --m-cyan: var(--ds-lime);          /* modern.css focus ring + cyan eyebrows become lime */
  --m-radius-sm: var(--ds-r-1); --m-radius: var(--ds-r-2);
  --m-fast: var(--ds-dur-2) var(--ds-ease);
  /* competitive-shell.css */
  --competitive-bg: var(--ds-ink-900); --competitive-surface: var(--ds-ink-850); --competitive-surface-2: var(--ds-ink-800);
  --competitive-line: var(--ds-line-strong); --competitive-line-soft: var(--ds-line);
  --competitive-text: var(--ds-text); --competitive-muted: var(--ds-text-2); --competitive-dim: var(--ds-text-3);
  --competitive-lime: var(--ds-lime); --competitive-lime-hover: var(--ds-lime-hover);
  font-synthesis-weight: none;       /* Clash Display is one semibold file: never fake-bold it */
}
.it-site.it-site {
  /* site-competitive.css */
  --it-ink: var(--ds-ink-900); --it-paper: var(--ds-text); --it-lime: var(--ds-lime);
  --it-muted: var(--ds-text-2); --it-line: var(--ds-line-strong); --it-gutter: var(--ds-gutter);
  --it-display: var(--ds-font-display);
  /* social-v2.css */
  --sx-bg: var(--ds-ink-900); --sx-card: var(--ds-ink-850); --sx-card-2: var(--ds-ink-800);
  --sx-line: var(--ds-line); --sx-line-strong: var(--ds-line-strong);
  --sx-text: var(--ds-text); --sx-muted: var(--ds-text-2);
  --sx-lime: var(--ds-lime); --sx-lime-ink: var(--ds-on-lime); --sx-glow: var(--ds-glow-lime);
  --sx-display: var(--ds-font-display); --sx-body: var(--ds-font-body);
  --sx-clip: var(--ds-cat-clip); --sx-meme: var(--ds-cat-meme); --sx-fanart: var(--ds-cat-fanart); --sx-aim: var(--ds-cat-aim); --sx-disc: var(--ds-cat-disc);
}
/* Feature blocks keep their names; each owner changes values to aliases (one line per token), e.g.
   .gx-page { --gx-ink: var(--ds-ink-900); --gx-lime: var(--ds-lime); --gx-paper: var(--ds-text); --gx-display: var(--ds-font-display); }
   same for main.it-home --it-*, --pg-*, --sw-*, --sb-*, --sc-*, --fr-*, --ar-*, --ac-*, --pv3-*, --cp-*. */

/* ---------------------------------------------------------------- 3. BASE + COMPONENTS */
@layer ds {
  /* base: beats UA styles, loses to any legacy rule */
  :where(button, input, select, textarea) { font: inherit; }
  :where(input[type="range"], input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--ds-lime); }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--ds-focus-width) solid var(--ds-focus-color); outline-offset: var(--ds-focus-offset);
  }
  :where([id]) { scroll-margin-top: calc(var(--ds-topnav-h) + 16px); }
  :where(.ds-num) { font-variant-numeric: tabular-nums; }

  /* shell: header, every page band and footer share it */
  .ds-shell { width: 100%; max-width: calc(var(--ds-shell-max) + 2 * var(--ds-gutter)); margin-inline: auto; padding-inline: var(--ds-gutter); }
  .ds-band { padding-block: var(--ds-section-y); }
  .ds-band--tight { padding-block: var(--ds-section-y-tight); }

  /* ---------- display type ---------- */
  .ds-display { margin: 0; font: 400 var(--ds-display-l)/var(--ds-lh-display) var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: var(--ds-display-case); text-wrap: balance; }
  .ds-display--xl { font-size: var(--ds-display-xl); line-height: .86; }
  .ds-display--m { font-size: var(--ds-display-m); line-height: .95; }
  .ds-display em, .ds-display .ds-accent { color: var(--ds-lime); font-style: normal; }
  .ds-display .ds-dot { color: var(--ds-lime); }          /* the lime full stop: "GIOCHI." */
  .ds-lede { max-width: 56ch; margin: 0; color: var(--ds-text-2); font: 400 var(--ds-text-lg)/1.55 var(--ds-font-body); }

  .ds-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-3); margin: 0; color: var(--ds-lime); font: 700 var(--ds-eyebrow-size)/1.3 var(--ds-font-body); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
  .ds-eyebrow--rule::after { content: ""; flex: 0 1 64px; min-width: 0; height: 1px; background: currentColor; opacity: .6; }
  @media (max-width: 559.98px) { .ds-eyebrow--rule::after { display: none; } }
  .ds-eyebrow--muted { color: var(--ds-text-2); }

  .ds-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-5); margin-bottom: var(--ds-space-5); padding-bottom: var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
  .ds-section-head h2 { margin: var(--ds-space-2) 0 0; font: 400 var(--ds-display-m)/.95 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: var(--ds-display-case); }
  .ds-section-head__meta { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }

  /* ---------- buttons ---------- */
  .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-3); min-height: 48px; padding: 0 var(--ds-space-5);
    border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-1); background: transparent; color: var(--ds-text);
    font: 700 15px/1.2 var(--ds-font-body); letter-spacing: .005em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--ds-dur-2) var(--ds-ease), border-color var(--ds-dur-2) var(--ds-ease), color var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease); }
  .ds-btn svg { width: 20px; height: 20px; flex: none; }
  @media (max-width: 559.98px) { .ds-btn { max-width: 100%; white-space: normal; } }
  .ds-btn:hover { border-color: var(--ds-text); }
  .ds-btn:active { transform: translateY(1px); }
  .ds-btn--primary { border-color: var(--ds-lime); background: var(--ds-lime); color: var(--ds-on-lime); }
  .ds-btn--primary:hover { border-color: var(--ds-lime-hover); background: var(--ds-lime-hover); }
  .ds-btn--ghost { min-height: var(--ds-tap); padding-inline: 2px; border-color: transparent; color: var(--ds-lime); }
  .ds-btn--ghost:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 5px; }
  .ds-btn--danger { border-color: var(--ds-red); background: var(--ds-red); color: var(--ds-on-red); }
  .ds-btn--danger:hover { border-color: var(--ds-red-hover); background: var(--ds-red-hover); }
  .ds-btn--on-art { border-color: rgba(243, 240, 231, .5); background: rgba(7, 6, 5, .64); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ds-btn--lg { min-height: 56px; padding-inline: var(--ds-space-6); font-size: 17px; }
  .ds-btn--lg.ds-btn--arrow { justify-content: space-between; gap: var(--ds-space-6); }
  .ds-btn--sm { min-height: 40px; padding-inline: var(--ds-space-4); font-size: 14px; }  /* desktop-dense only */
  .ds-btn--block { width: 100%; }
  .ds-btn:disabled, .ds-btn[aria-disabled="true"] { border-style: dashed; border-color: var(--ds-line-strong); background: var(--ds-ink-800); color: var(--ds-text-3); cursor: not-allowed; transform: none; }
  .ds-btn__hint { display: block; color: var(--ds-text-3); font: 600 var(--ds-text-xs)/1.3 var(--ds-font-body); } /* reason under a disabled button */
  /* "Accedi con Discord" = .ds-btn--primary + Discord glyph. No blurple, no red, no ink variant on dark */

  .ds-icon-btn { position: relative; display: inline-grid; place-items: center; width: var(--ds-tap); height: var(--ds-tap); padding: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-r-1); background: transparent; color: var(--ds-text); cursor: pointer; transition: border-color var(--ds-dur-2) var(--ds-ease), color var(--ds-dur-2) var(--ds-ease); }
  .ds-icon-btn svg { width: 22px; height: 22px; }
  .ds-icon-btn:hover { border-color: var(--ds-line-strong); }
  .ds-icon-btn[aria-current], .ds-icon-btn[aria-expanded="true"] { border-color: var(--ds-lime); color: var(--ds-lime); }
  .ds-icon-btn--lime { border-color: var(--ds-lime); background: var(--ds-lime); color: var(--ds-on-lime); }
  .ds-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--ds-ink-900); border-radius: var(--ds-r-pill); background: var(--ds-red); color: var(--ds-on-red); font: 700 11px/16px var(--ds-font-body); text-align: center; font-variant-numeric: tabular-nums; }

  /* ---------- avatar + level ---------- */
  .ds-avatar { --size: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-avatar-bg, #3a332c); color: var(--ds-text); font: 400 calc(var(--size) * .42)/1 var(--ds-font-display); text-transform: uppercase; }
  .ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .ds-avatar--sm { --size: 32px; } .ds-avatar--lg { --size: 56px; } .ds-avatar--xl { --size: 96px; }
  /* deterministic fallback colour: hash(handle) % 6 -> data-tone */
  .ds-avatar[data-tone="0"] { --ds-avatar-bg: #2b4a1f; } .ds-avatar[data-tone="1"] { --ds-avatar-bg: #1f3d52; }
  .ds-avatar[data-tone="2"] { --ds-avatar-bg: #4a2433; } .ds-avatar[data-tone="3"] { --ds-avatar-bg: #3d2f57; }
  .ds-avatar[data-tone="4"] { --ds-avatar-bg: #4d3a1c; } .ds-avatar[data-tone="5"] { --ds-avatar-bg: #1f4744; }
  .ds-level { --pct: 0; position: relative; display: inline-grid; place-items: center; padding: 3px; border-radius: var(--ds-r-pill); background: conic-gradient(var(--ds-lime) calc(var(--pct) * 1%), var(--ds-line-strong) 0); }
  .ds-level > .ds-avatar { border: 2px solid var(--ds-ink-900); }
  .ds-level__lv { position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 18px; padding: 0 4px; border: 2px solid var(--ds-ink-900); border-radius: var(--ds-r-1); background: var(--ds-lime); color: var(--ds-on-lime); font: 400 12px/14px var(--ds-font-display); text-align: center; }

  /* ---------- cards ---------- */
  .ds-card { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: var(--ds-space-3); padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-r-2); background: var(--ds-ink-850); color: var(--ds-text); }
  .ds-card--flush { padding: 0; overflow: hidden; }
  .ds-card--interactive { cursor: pointer; transition: border-color var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease); }
  .ds-card--interactive:hover { border-color: var(--ds-line-strong); transform: translateY(-2px); }
  .ds-card--feature { border-top: 2px solid var(--ds-card-accent, var(--ds-lime)); }
  .ds-card__title { margin: 0; font: 400 var(--ds-display-s)/1 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: var(--ds-display-case); }
  .ds-card__meta { margin: 0; color: var(--ds-text-3); font-size: var(--ds-text-xs); }
  .ds-card__body { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.5; }
  .ds-card__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: auto; padding-top: var(--ds-space-2); }
  /* game card: official art 16:10, title over scrim, accent = the game's own colour (title word + top rule only) */
  .ds-game-card { --ds-card-accent: var(--ds-lime); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 260px; overflow: hidden; border: 1px solid var(--ds-line); border-top: 2px solid var(--ds-card-accent); border-radius: var(--ds-r-2); background: var(--ds-ink-850); color: var(--ds-text); text-decoration: none; isolation: isolate; transition: border-color var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease); }
  .ds-game-card:hover { border-color: var(--ds-line-strong); border-top-color: var(--ds-card-accent); transform: translateY(-2px); }
  .ds-game-card__art { position: absolute; inset: 0; z-index: -1; margin: 0; }
  .ds-game-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
  .ds-game-card__art::after { content: ""; position: absolute; inset: 0; background: var(--ds-art-scrim-y); }
  .ds-game-card__body { align-self: end; display: grid; justify-items: start; gap: var(--ds-space-2); padding: var(--ds-space-5); }
  .ds-game-card__title { margin: 0; font: 400 clamp(26px, 2.6vw, 40px)/.9 var(--ds-font-display); text-transform: var(--ds-display-case); overflow-wrap: anywhere; }
  .ds-game-card__title em { color: var(--ds-card-accent); font-style: normal; }
  .ds-game-card__fallback { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; color: var(--ds-line-strong); font: 400 120px/1 var(--ds-font-display); }

  /* ---------- chips, badges, status ---------- */
  .ds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-1); background: transparent; color: var(--ds-text-2); font: 700 var(--ds-label-size)/1 var(--ds-font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  button.ds-chip, a.ds-chip { min-height: var(--ds-tap); padding-inline: 14px; cursor: pointer; text-decoration: none; }
  .ds-chip--lime { border-color: var(--ds-lime-line); color: var(--ds-lime); }
  .ds-chip--red { border-color: var(--ds-red); color: var(--ds-red); }
  .ds-chip--solid { border-color: var(--ds-text); background: var(--ds-text); color: var(--ds-ink-900); }
  .ds-chip[aria-pressed="true"], .ds-chip.is-active { border-color: var(--ds-lime); background: var(--ds-lime-soft); color: var(--ds-lime); }  /* "selected" = lime tint + lime border, everywhere */
  .ds-chip--live { border-color: var(--ds-red); color: var(--ds-text); }
  .ds-chip--live::before, .ds-dot { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--ds-r-pill); background: var(--ds-live); }
  .ds-chip--live::before { animation: ds-pulse 1.6s var(--ds-ease) infinite; }
  .ds-dot--online { background: var(--ds-lime); } .ds-dot--off { background: var(--ds-text-3); }

  /* ---------- tabs (page-level), subnav (section switcher), segmented (sort) ---------- */
  .ds-tabs { display: flex; gap: var(--ds-space-1); min-width: 0; contain: inline-size; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ds-line);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .ds-tabs::-webkit-scrollbar { display: none; }
  .ds-tab { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 48px; padding: 0 var(--ds-space-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ds-text-2); font: 700 13px/1 var(--ds-font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
  .ds-tab:hover { color: var(--ds-text); }
  .ds-tab[aria-selected="true"], .ds-tab[aria-current="page"] { border-bottom-color: var(--ds-lime); color: var(--ds-text); }
  .ds-segmented { display: inline-flex; width: max-content; max-width: 100%; gap: 2px; padding: 2px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-1); background: var(--ds-ink-850); }
  .ds-segmented > button { min-height: 40px; min-width: var(--ds-tap); padding: 0 var(--ds-space-4); border: 0; border-radius: 2px; background: none; color: var(--ds-text-2); font: 700 14px/1 var(--ds-font-body); cursor: pointer; }
  .ds-segmented > button[aria-pressed="true"] { background: var(--ds-lime-soft); box-shadow: inset 0 0 0 1px var(--ds-lime); color: var(--ds-lime); }

  /* ---------- stats, progress ---------- */
  .ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border: 1px solid var(--ds-line); border-radius: var(--ds-r-2); }
  .ds-stat { display: grid; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-4); border-right: 1px solid var(--ds-line); }
  .ds-stat:last-child { border-right: 0; }
  .ds-stat__label { color: var(--ds-text-2); font: 700 var(--ds-label-size)/1.2 var(--ds-font-body); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
  .ds-stat__value { font: 400 clamp(28px, 3vw, 40px)/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
  .ds-stat__value small { margin-left: 4px; color: var(--ds-text-3); font: 600 var(--ds-text-xs)/1 var(--ds-font-body); }
  .ds-progress { --pct: 0; height: 6px; overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-line); }
  .ds-progress::after { content: ""; display: block; width: calc(var(--pct) * 1%); height: 100%; background: var(--ds-lime); transition: width var(--ds-dur-3) var(--ds-ease); }

  /* ---------- list rows (missions, notifications, leaderboard, lobbies) ---------- */
  .ds-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-line); }
  .ds-row { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--ds-row-action, 112px); align-items: center; gap: var(--ds-space-4); min-height: 64px; padding: var(--ds-space-3) 0; border-bottom: 1px solid var(--ds-line); color: inherit; text-decoration: none; }
  a.ds-row:hover, button.ds-row:hover { background: linear-gradient(90deg, transparent, var(--ds-ink-700) 12%, var(--ds-ink-700) 88%, transparent); }
  .ds-row__lead { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ds-text-2); }
  .ds-row__title { margin: 0; font: 600 var(--ds-text-md)/1.3 var(--ds-font-body); }
  .ds-row__meta { margin: 2px 0 0; color: var(--ds-text-3); font-size: var(--ds-text-xs); }
  .ds-row__action { justify-self: end; }
  .ds-row__action .ds-btn__icon-only { display: none; }
  @media (max-width: 559.98px) {  /* phones: trailing action collapses to a 44px arrow so titles keep the width */
    .ds-row { --ds-row-action: 44px; gap: var(--ds-space-3); }
    .ds-row__action.ds-btn { width: var(--ds-tap); min-height: var(--ds-tap); padding: 0; }
    .ds-row__action .ds-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ds-row__action .ds-btn__icon-only { display: block; }
  }
  .ds-row[data-unread="true"] .ds-row__title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: var(--ds-r-pill); background: var(--ds-lime); vertical-align: 2px; }
  .ds-check { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); color: transparent; }
  .ds-check[data-done="true"] { border-color: var(--ds-lime); background: var(--ds-lime); color: var(--ds-on-lime); }

  /* ---------- empty / error / loading ---------- */
  .ds-empty { display: grid; justify-items: center; gap: var(--ds-space-3); padding: var(--ds-space-7) var(--ds-space-5); border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-2); text-align: center; }
  .ds-empty h3 { margin: 0; font: 400 var(--ds-display-s)/1 var(--ds-font-display); text-transform: var(--ds-display-case); }
  .ds-empty p { max-width: 44ch; margin: 0; color: var(--ds-text-2); font-size: 15px; line-height: 1.5; }
  .ds-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4); border: 1px solid var(--ds-red-soft); border-left: 3px solid var(--ds-red); border-radius: var(--ds-r-2); background: var(--ds-ink-850); color: var(--ds-text-2); font-size: var(--ds-text-sm); }
  .ds-skeleton { display: block; min-height: 16px; border-radius: var(--ds-r-1); background: linear-gradient(90deg, var(--ds-ink-800) 0%, var(--ds-ink-700) 50%, var(--ds-ink-800) 100%) 0 0 / 300% 100%; animation: ds-shimmer 1.4s linear infinite; }
  .ds-skeleton--row { height: 64px; margin-bottom: 1px; }
  .ds-skeleton--title { width: 60%; height: 40px; }

  /* ---------- forms ---------- */
  .ds-field { display: grid; gap: var(--ds-space-2); }
  .ds-label { display: flex; justify-content: space-between; gap: var(--ds-space-3); color: var(--ds-text-2); font: 700 var(--ds-eyebrow-size)/1.2 var(--ds-font-body); letter-spacing: .1em; text-transform: uppercase; }
  .ds-label small { color: var(--ds-text-3); font-weight: 600; letter-spacing: 0; text-transform: none; }
  .ds-input, .ds-select, .ds-textarea { width: 100%; min-height: 48px; padding: 12px var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-1); background: var(--ds-ink-800); color: var(--ds-text); font: 500 var(--ds-text-md)/1.4 var(--ds-font-body); }
  .ds-textarea { min-height: 112px; resize: vertical; }
  .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-3); }
  .ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--ds-lime); outline: none; box-shadow: 0 0 0 3px var(--ds-lime-soft); }

  /* ---------- hero (promotes ui.jsx SitePageHero) ---------- */
  .ds-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--ds-line); background: var(--ds-ink-900); }
  .ds-hero__art { position: absolute; inset: 0 0 0 30%; z-index: -1; margin: 0; }
  .ds-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; }
  .ds-hero__art::before { content: ""; position: absolute; inset: 0; background: var(--ds-art-scrim-x); }
  .ds-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ds-space-6); padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
  .ds-hero__copy { display: grid; gap: var(--ds-space-4); max-width: 760px; }
  .ds-hero h1 { margin: 0; font: 400 var(--ds-display-l)/var(--ds-lh-display) var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: var(--ds-display-case); text-wrap: balance; }
  .ds-hero h1 em { color: var(--ds-hero-accent, var(--ds-lime)); font-style: normal; }
  .ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); padding-top: var(--ds-space-2); }
  .ds-hero--feature h1 { font-size: var(--ds-display-xl); line-height: .86; }
  .ds-hero--feature .ds-hero__inner { min-height: min(72vh, 640px); }
  .ds-hero--compact .ds-hero__inner { padding-block: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 36px); }
  .ds-hero--compact .ds-hero__art { inset-inline-start: 45%; }
  @media (max-width: 819.98px) {
    .ds-hero__art, .ds-hero--compact .ds-hero__art { inset: 0 0 auto 0; height: min(62vw, 300px); }
    .ds-hero__art::before { background: var(--ds-art-scrim-y); }
    .ds-hero__inner { grid-template-columns: 1fr; padding-top: min(46vw, 210px); }
    /* compact keeps its short padding only without art: with art the copy must start below the image */
    .ds-hero--compact[data-art="true"] .ds-hero__inner { padding-top: min(46vw, 210px); }
    /* senza immagine (arte non caricata o assente) niente fascia vuota sopra il titolo */
    .ds-hero[data-art="none"] .ds-hero__inner { padding-top: 40px; }
    .ds-hero--feature .ds-hero__inner { min-height: 0; }
    .ds-hero__actions .ds-btn { flex: 1 1 100%; }
  }
  /* in-app game header: compact bar with HUD stats + tab row (Spike Wars, Aim Pro, in-match Chess) */
  .ds-game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-5); padding-block: var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
  .ds-game-bar h1 { margin: 0; font: 400 clamp(32px, 3.4vw, 48px)/.9 var(--ds-font-display); text-transform: var(--ds-display-case); }

  /* ---------- overlays: scrim + sheet (modal on desktop, bottom sheet on phones) ---------- */
  .ds-scrim { position: fixed; inset: 0; z-index: var(--ds-z-overlay); background: var(--ds-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ds-fade var(--ds-dur-2) var(--ds-ease); }
  .ds-sheet { position: fixed; z-index: calc(var(--ds-z-overlay) + 1); left: 50%; top: 50%; display: flex; flex-direction: column; width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 860px); overflow: hidden; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-2); background: var(--ds-ink-850); box-shadow: var(--ds-shadow-2); transform: translate(-50%, -50%); animation: ds-pop var(--ds-dur-3) var(--ds-ease); }
  .ds-sheet__head { display: flex; align-items: start; justify-content: space-between; gap: var(--ds-space-4); padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
  .ds-sheet__title { margin: var(--ds-space-1) 0 0; font: 400 clamp(28px, 3vw, 36px)/.95 var(--ds-font-display); text-transform: var(--ds-display-case); }
  .ds-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--ds-space-5); }
  .ds-sheet__foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5) calc(var(--ds-space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-line); }
  .ds-sheet__handle { display: none; }
  @media (max-width: 819.98px) {
    .ds-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92svh; border-bottom: 0; border-radius: var(--ds-r-2) var(--ds-r-2) 0 0; transform: none; animation: ds-rise var(--ds-dur-3) var(--ds-ease); }
    .ds-sheet__handle { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--ds-r-pill); background: var(--ds-line-strong); }
  }

  /* popover menu (account, Altro on desktop, post overflow) */
  .ds-menu { position: absolute; z-index: var(--ds-z-dropdown); min-width: 260px; padding: var(--ds-space-2); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-2); background: var(--ds-ink-800); box-shadow: var(--ds-shadow-1); }
  .ds-menu__group + .ds-menu__group { margin-top: var(--ds-space-2); padding-top: var(--ds-space-2); border-top: 1px solid var(--ds-line); }
  .ds-menu__label { padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-text-3); font: 700 var(--ds-label-size)/1 var(--ds-font-body); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
  .ds-menu__item { display: flex; align-items: center; gap: var(--ds-space-3); width: 100%; min-height: var(--ds-tap); padding: 0 var(--ds-space-3); border: 0; border-radius: var(--ds-r-1); background: none; color: var(--ds-text); font: 600 var(--ds-text-sm)/1.2 var(--ds-font-body); text-align: left; text-decoration: none; cursor: pointer; }
  .ds-menu__item svg { width: 20px; height: 20px; color: var(--ds-text-2); flex: none; }
  .ds-menu__item:hover, .ds-menu__item[aria-current="page"] { background: var(--ds-ink-700); }
  .ds-menu__item[aria-current="page"] svg { color: var(--ds-lime); }
  .ds-menu__item small { margin-left: auto; color: var(--ds-text-3); font-size: var(--ds-text-xs); font-weight: 500; }
  .ds-menu__item--danger { color: var(--ds-red); }

  /* toasts: above the bottom bar on phones */
  .ds-toast-host { position: fixed; z-index: var(--ds-z-toast); right: var(--ds-gutter); bottom: 24px; display: grid; gap: var(--ds-space-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
  .ds-toast { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-left: 3px solid var(--ds-toast-accent, var(--ds-lime)); border-radius: var(--ds-r-2); background: var(--ds-ink-800); box-shadow: var(--ds-shadow-1); color: var(--ds-text); font: 600 var(--ds-text-sm)/1.4 var(--ds-font-body); pointer-events: auto; animation: ds-rise var(--ds-dur-3) var(--ds-ease); }
  .ds-toast--error { --ds-toast-accent: var(--ds-red); } .ds-toast--info { --ds-toast-accent: var(--ds-text-2); }
  .ds-toast svg { width: 20px; height: 20px; color: var(--ds-toast-accent, var(--ds-lime)); }
  @media (max-width: 819.98px) { .ds-toast-host { left: 16px; right: 16px; width: auto; bottom: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom) + 12px); } }

  /* ---------- shell: top nav ---------- */
  .ds-topnav { position: sticky; top: 0; z-index: var(--ds-z-sticky); height: var(--ds-topnav-h); border-bottom: 1px solid var(--ds-line); background: rgba(11, 10, 9, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .ds-topnav__inner { display: flex; align-items: center; gap: var(--ds-space-5); height: 100%; }
  .ds-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ds-text); font: 600 24px/1 var(--ds-font-display); letter-spacing: -.02em; text-decoration: none; }
  .ds-brand img { width: auto; height: 36px; flex: none; }
  .ds-nav { display: flex; align-items: stretch; gap: var(--ds-space-1); height: 100%; margin-left: var(--ds-space-4); }   /* never overflow:auto */
  .ds-navlink { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--ds-space-3); border: 0; background: none; color: var(--ds-text-2); font: 700 14px/1 var(--ds-font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
  .ds-navlink svg { width: 14px; height: 14px; }
  .ds-navlink:hover { color: var(--ds-text); }
  .ds-navlink[aria-current="page"], .ds-navlink[aria-expanded="true"] { color: var(--ds-text); }
  .ds-navlink[aria-current="page"]::after { content: ""; position: absolute; left: var(--ds-space-3); right: var(--ds-space-3); bottom: -1px; height: 2px; background: var(--ds-lime); }
  .ds-topnav__end { display: flex; align-items: center; gap: var(--ds-space-2); margin-left: auto; }
  .ds-topnav__end .ds-icon-btn { width: 40px; height: 40px; }
  .ds-create { min-height: 40px; padding-inline: var(--ds-space-4); }
  .ds-mega { position: absolute; z-index: var(--ds-z-dropdown); top: calc(100% + 1px); display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(200px, 1fr)); gap: var(--ds-space-2) var(--ds-space-5); padding: var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-top: 2px solid var(--ds-lime); border-radius: 0 0 var(--ds-r-2) var(--ds-r-2); background: var(--ds-ink-850); box-shadow: var(--ds-shadow-2); }
  @media (max-width: 1179.98px) { .ds-create__label { display: none; } .ds-nav { margin-left: 0; } .ds-navlink { padding-inline: 10px; } }
  @media (max-width: 819.98px) {
    .ds-nav, .ds-topnav__desktop-only { display: none; }
    .ds-topnav__end { gap: var(--ds-space-1); }
    .ds-topnav__end .ds-icon-btn { width: var(--ds-tap); height: var(--ds-tap); }
    .ds-brand { font-size: 22px; }
    .ds-brand img { height: 32px; }
    /* Sul telefono "Crea" è un'icona neutra con il bordo: il lime resta per le azioni principali della pagina. */
    .ds-create { width: var(--ds-tap); min-height: var(--ds-tap); padding: 0; border-color: var(--ds-line-strong); background: transparent; color: var(--ds-text); }
  }

  /* ---------- shell: bottom tab bar (phones) ---------- */
  .ds-bottomnav { display: none; }
  @media (max-width: 819.98px) {
    .ds-bottomnav { position: fixed; z-index: var(--ds-z-bottomnav); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid var(--ds-line); background: rgba(7, 6, 5, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    .ds-bottomnav__tab { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; min-width: 0; border: 0; background: none; color: var(--ds-text-3); font: 600 11px/1 var(--ds-font-body); text-decoration: none; cursor: pointer; }
    .ds-bottomnav__tab svg { width: 24px; height: 24px; }
    .ds-bottomnav__tab[aria-current="page"] { color: var(--ds-text); }
    .ds-bottomnav__tab[aria-current="page"] svg { color: var(--ds-lime); }
    .ds-bottomnav__tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 2px; background: var(--ds-lime); }
    .ds-bottomnav__tab .ds-count { top: 6px; right: calc(50% - 22px); }
    body { padding-bottom: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom)); }
  }

  /* ---------- footer ---------- */
  .ds-footer { padding-block: var(--ds-space-8) var(--ds-space-6); border-top: 1px solid var(--ds-line); background: var(--ds-ink-950); color: var(--ds-text-2); }
  .ds-footer__grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: var(--ds-space-6); }
  .ds-footer h2 { margin: 0 0 var(--ds-space-3); color: var(--ds-text); font: 700 var(--ds-eyebrow-size)/1 var(--ds-font-body); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
  .ds-footer a:not(.ds-btn) { display: flex; align-items: center; gap: var(--ds-space-2); min-height: 36px; color: var(--ds-text-2); font-size: var(--ds-text-sm); text-decoration: none; }
  .ds-footer a:not(.ds-btn):hover { color: var(--ds-text); }
  .ds-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3); margin-top: var(--ds-space-7); padding-top: var(--ds-space-5); border-top: 1px solid var(--ds-line); color: var(--ds-text-3); font-size: var(--ds-text-xs); }
  @media (max-width: 819.98px) { .ds-footer__grid { grid-template-columns: 1fr 1fr; } .ds-footer__brand { grid-column: 1 / -1; } .ds-footer a:not(.ds-btn) { min-height: var(--ds-tap); } }

  /* ---------- cream band: swaps tokens, every component above adapts ---------- */
  .ds-cream { --ds-ink-850: var(--ds-cream-2); --ds-ink-800: #fffdf6; --ds-text: var(--ds-on-cream); --ds-text-2: var(--ds-on-cream-2); --ds-text-3: #5d6b76;
    --ds-line: rgba(11, 10, 9, .14); --ds-line-strong: rgba(11, 10, 9, .32); --ds-lime: var(--ds-cream-accent); --ds-lime-soft: rgba(107, 79, 14, .1); --ds-lime-line: rgba(107, 79, 14, .5); --ds-focus-color: var(--ds-on-cream);
    background: var(--ds-cream); color: var(--ds-on-cream); }
  .ds-cream .ds-btn--primary { border-color: var(--ds-on-cream); background: var(--ds-on-cream); color: var(--ds-brand-lime); }  /* lime on cream = 1.04:1, so invert */
  .ds-cream .ds-btn--primary:hover { background: #2a2622; }

  /* ---------- notifications popover (header bell): over the page, never navigates ----------
     Portal in <body>: desktop = panel anchored under the bell (--nt-top/--nt-right/--nt-caret set from JS),
     phones (<=640px) = bottom sheet over .ds-scrim. Look of .ds-menu: ink-800, line-strong, lime accent. */
  .ds-notif { position: fixed; z-index: calc(var(--ds-z-overlay) - 1); top: var(--nt-top, calc(var(--ds-topnav-h) + 8px)); right: var(--nt-right, 16px); display: flex; flex-direction: column; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 640px); border: 1px solid var(--ds-line-strong); border-top: 2px solid var(--ds-lime); border-radius: var(--ds-r-2); background: var(--ds-ink-800); box-shadow: var(--ds-shadow-2); color: var(--ds-text); font: 400 var(--ds-text-sm)/1.4 var(--ds-font-body); text-align: left; animation: ds-fade var(--ds-dur-2) var(--ds-ease); }
  .ds-notif::before { content: ""; position: absolute; top: -8px; right: var(--nt-caret, 20px); width: 12px; height: 12px; border-top: 2px solid var(--ds-lime); border-left: 1px solid var(--ds-line-strong); background: var(--ds-ink-800); transform: rotate(45deg); }
  .ds-notif__handle { display: none; }
  .ds-notif__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--ds-space-3) 6px var(--ds-space-2) var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
  .ds-notif__heading { display: flex; flex: 1 1 auto; align-items: center; gap: var(--ds-space-2); min-width: 0; }
  .ds-notif__title { margin: 0; color: var(--ds-text); font: 400 22px/1 var(--ds-font-display); letter-spacing: .01em; text-transform: var(--ds-display-case); }
  .ds-notif__title:focus, .ds-notif__title:focus-visible { outline: none; }   /* tabindex=-1: only where reading starts, not a control */
  .ds-notif__new { padding: 3px 6px; border: 1px solid var(--ds-lime-line); border-radius: var(--ds-r-1); color: var(--ds-lime); font: 700 var(--ds-label-size)/1.1 var(--ds-font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .ds-notif__close { display: none; }
  .ds-notif__mark { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: var(--ds-tap); padding: 0 6px; border: 0; border-radius: var(--ds-r-1); background: none; color: var(--ds-lime); font: 700 13px/1.2 var(--ds-font-body); white-space: nowrap; cursor: pointer; }
  .ds-notif__mark:hover:not(:disabled) { background: var(--ds-lime-soft); }
  .ds-notif__mark:disabled { color: var(--ds-text-3); cursor: default; }
  .ds-notif__mark svg { flex: none; }
  .ds-notif__dm { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-tap); margin: var(--ds-space-2) var(--ds-space-3) 0; padding: 0 var(--ds-space-3); border: 1px solid var(--ds-lime-line); border-radius: var(--ds-r-1); background: var(--ds-lime-soft); color: var(--ds-text); font: 700 var(--ds-text-sm)/1.2 var(--ds-font-body); text-decoration: none; }
  .ds-notif__dm span { flex: 1; }
  .ds-notif__dm svg { flex: none; color: var(--ds-lime); }
  .ds-notif__dm:hover { border-color: var(--ds-lime); }
  .ds-notif__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ds-space-2); }
  .ds-notif__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .ds-notif__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 10px; align-items: center; gap: var(--ds-space-3); min-height: 64px; padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2); border-radius: var(--ds-r-1); color: var(--ds-text-2); text-decoration: none; transition: background-color var(--ds-dur-2) var(--ds-ease); }
  .ds-notif__item:hover { background: var(--ds-ink-700); }
  .ds-notif__item:focus-visible { outline-offset: -3px; }
  .ds-notif__item[data-unread="true"] { background: rgba(216, 172, 64, .06); color: var(--ds-text); }
  .ds-notif__item[data-unread="true"]:hover { background: var(--ds-ink-700); }
  .ds-notif__lead { display: grid; place-items: center; width: 40px; height: 40px; }
  .ds-notif__glyph { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-pill); background: var(--ds-ink-850); color: var(--ds-lime); }
  .ds-notif__copy { display: grid; gap: 3px; min-width: 0; }
  .ds-notif__text { display: -webkit-box; overflow: hidden; font: 500 var(--ds-text-sm)/1.35 var(--ds-font-body); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
  .ds-notif__text strong { color: var(--ds-text); font-weight: 700; }
  .ds-notif__time { color: var(--ds-text-3); font: 500 var(--ds-text-xs)/1.2 var(--ds-font-body); }
  .ds-notif__dot { width: 10px; height: 10px; border-radius: var(--ds-r-pill); background: var(--ds-lime); box-shadow: 0 0 0 3px var(--ds-lime-soft); }
  .ds-notif__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ds-notif__retry { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); margin-bottom: var(--ds-space-2); padding: 0 0 0 var(--ds-space-3); border-left: 3px solid var(--ds-red); background: var(--ds-ink-850); color: var(--ds-text-2); font-size: var(--ds-text-xs); }
  .ds-notif__retry button { min-height: var(--ds-tap); padding: 0 var(--ds-space-3); border: 0; background: none; color: var(--ds-lime); font: 700 var(--ds-text-sm)/1 var(--ds-font-body); cursor: pointer; }
  .ds-notif__state { display: grid; justify-items: center; gap: var(--ds-space-2); padding: var(--ds-space-6) var(--ds-space-4); text-align: center; }
  .ds-notif__state strong { color: var(--ds-text); font: 700 var(--ds-text-md)/1.3 var(--ds-font-body); }
  .ds-notif__state p { max-width: 30ch; margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.45; }
  .ds-notif__state .ds-btn { margin-top: var(--ds-space-2); min-height: var(--ds-tap); }
  .ds-notif__state-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--ds-space-1); border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-pill); color: var(--ds-text-3); }
  .ds-notif__state--error .ds-notif__state-icon { border: 1px solid var(--ds-red); background: var(--ds-red-soft); color: var(--ds-red); }
  .ds-notif__skel-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--ds-space-3); min-height: 64px; padding: var(--ds-space-2); }
  .ds-notif__skel-avatar { width: 40px; height: 40px; border-radius: var(--ds-r-pill); }
  .ds-notif__skel-lines { display: grid; gap: 8px; }
  .ds-notif__skel-lines .ds-skeleton { min-height: 12px; height: 12px; }
  .ds-notif__skel-lines .ds-skeleton + .ds-skeleton { width: 40%; }
  .ds-notif__foot { border-top: 1px solid var(--ds-line); }
  .ds-notif__all { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: 48px; padding: 0 var(--ds-space-4); border-radius: 0 0 var(--ds-r-2) var(--ds-r-2); color: var(--ds-lime); font: 700 var(--ds-text-sm)/1 var(--ds-font-body); text-decoration: none; }
  .ds-notif__all:hover { background: var(--ds-lime-soft); }
  .ds-notif__all:focus-visible { outline-offset: -3px; }
  @media (max-width: 640px) {
    .ds-notif { z-index: calc(var(--ds-z-overlay) + 1); top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82svh; border-bottom: 0; border-radius: var(--ds-r-2) var(--ds-r-2) 0 0; padding-bottom: env(safe-area-inset-bottom); animation: ds-rise var(--ds-dur-3) var(--ds-ease); }
    .ds-notif::before { display: none; }
    .ds-notif__handle { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--ds-r-pill); background: var(--ds-line-strong); }
    .ds-notif__head { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-1) var(--ds-space-4); }
    .ds-notif__close { display: inline-grid; flex: none; }
    .ds-notif__mark { flex-basis: 100%; justify-content: flex-start; margin-left: calc(-1 * var(--ds-space-2)); }
    .ds-notif__all { min-height: 52px; border-radius: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .ds-notif, .ds-notif__item { animation: none; transition: none; } }

  /* ---------- motion ---------- */
  @keyframes ds-fade { from { opacity: 0; } }
  @keyframes ds-pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }
  @keyframes ds-rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes ds-shimmer { to { background-position: -150% 0; } }
  @keyframes ds-pulse { 50% { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-card--interactive, .ds-game-card, .ds-progress::after { transition: none; }
    .ds-card--interactive:hover, .ds-game-card:hover { transform: none; }
    .ds-sheet, .ds-scrim, .ds-toast, .ds-skeleton, .ds-chip--live::before { animation: none; }
  }
}

/* ---------------------------------------------------------------- Owner
   Un solo badge "Owner" con la corona per tutto il sito (menu, profilo, post, commenti, classifiche, partite).
   Fuori da @layer e con la classe ripetuta: le regole delle singole pagine (span/em nelle classifiche)
   non devono poterlo cambiare. Il flag owner arriva solo dal server. */
span.ds-owner-badge.ds-owner-badge {
  --ds-owner-gold: #ffd75e;
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  width: auto; height: 20px; min-width: 0; max-width: none; margin: 0; padding: 0 8px 0 5px; justify-self: start; align-self: center;
  border: 1px solid rgba(255, 215, 94, .55); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 215, 94, .22), rgba(255, 215, 94, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--ds-owner-gold);
  font: 700 11px/1 var(--ds-font-body, system-ui, sans-serif); font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  vertical-align: middle; opacity: 1; overflow: visible;
}
span.ds-owner-badge.ds-owner-badge > .ds-owner-badge__crown { display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 0; text-transform: none; }
span.ds-owner-badge.ds-owner-badge[data-size="xs"] { height: 18px; gap: 3px; padding: 0 6px 0 4px; font-size: 10px; }
span.ds-owner-badge.ds-owner-badge[data-size="xs"] > .ds-owner-badge__crown { font-size: 10px; }
span.ds-owner-badge.ds-owner-badge[data-size="md"] { height: 26px; gap: 5px; padding: 0 11px 0 7px; font-size: 12px; }
span.ds-owner-badge.ds-owner-badge[data-size="md"] > .ds-owner-badge__crown { font-size: 14px; }
span.ds-owner-badge.ds-owner-badge[data-size="lg"] { height: 32px; gap: 6px; padding: 0 14px 0 9px; font-size: 14px; }
span.ds-owner-badge.ds-owner-badge[data-size="lg"] > .ds-owner-badge__crown { font-size: 17px; }
/* La corona al posto del numero del livello sull'avatar dell'owner. */
.ds-level .ds-level__lv.ds-level__lv--owner { min-width: 22px; padding: 0 2px; background: #ffd75e; font: 12px/14px system-ui, sans-serif; }
/* Nota "Modalità owner: gratis per i test" (Collezione, Negozio, Battle Pass). */
.ds-owner-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 10px 14px;
  border: 1px solid rgba(255, 215, 94, .4); border-radius: 8px; background: rgba(255, 215, 94, .07);
  color: var(--ds-text-2, #b4bec6); font: 400 14px/1.45 var(--ds-font-body, system-ui, sans-serif);
}
.ds-owner-note b { color: #ffd75e; font-weight: 700; }
.ds-owner-note__crown { flex: none; font-size: 16px; line-height: 1.3; }