/* Verso base styles. Every color is a theme token from /css/theme.css (generated from server/themes.js).
   Site pages (landing, lobby, demo, leaderboard, dialogs) use the cartoon look of art-source/v3/mock-*.png, calmed
   down for the calm site backgrounds: soft cream panels with a slate outline and a soft "ledge" shadow, rounded
   buttons (terracotta Play, muted blue Connect), selected chips in ink. The match screen uses the same look (sky page, cream HUD stickers, the scene in an
   ink-outlined card); only the scenes' SVG drawings keep the graphite scene tokens (--bg, --surface-*, --text).
   --player and --opponent mark the two sides; variants are derived here with color-mix(). */
:root {
  --player-hover: color-mix(in srgb, var(--player) 82%, var(--text));
  --player-press: color-mix(in srgb, var(--player) 78%, var(--bg));
  --player-glow: color-mix(in srgb, var(--player) 38%, transparent);
  --player-soft: color-mix(in srgb, var(--player) 14%, transparent);
  --opponent-glow: color-mix(in srgb, var(--opponent) 38%, transparent);
  --opponent-soft: color-mix(in srgb, var(--opponent) 14%, transparent);
  --money-glow: color-mix(in srgb, var(--money) 36%, transparent);
  --money-soft: color-mix(in srgb, var(--money) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --primary-hover: color-mix(in srgb, var(--primary-bg) 88%, var(--text));
  --primary-press: color-mix(in srgb, var(--primary-bg) 86%, var(--bg));
  --focus: var(--ui-player);
  --highlight: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  --lift: 0 10px 30px color-mix(in srgb, var(--shadow) 40%, transparent);
  --backdrop: color-mix(in srgb, var(--bg) 72%, transparent);
  --line-strong: color-mix(in srgb, var(--line) 60%, var(--text-2));
  --panel: color-mix(in srgb, var(--surface-1) 92%, transparent);
  --panel-2: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1));
  --hair: 1px solid var(--line);
  /* the cartoon UI, calm: slate outlines (--edge), soft translucent ledges (--ledge-c), selected chips in ink */
  --edge: var(--ui-line);
  --ledge-c: color-mix(in srgb, var(--ui-line) 42%, transparent);
  --ink-line: 2px solid var(--edge);
  --ink-soft: color-mix(in srgb, var(--ui-line) 26%, transparent);
  --ledge: 0 4px 0 var(--ledge-c);
  --ledge-sm: 0 2.5px 0 var(--ledge-c);
  --float: 0 12px 28px color-mix(in srgb, var(--ui-ink) 13%, transparent);
  --pick-bg: var(--ui-ink);                 /* a selected tab / chip / stake: ink fill, cream text */
  --pick-fg: var(--ui-cream);
  --accent-soft: color-mix(in srgb, var(--ui-sun) 38%, var(--ui-cream));   /* demo chips, hover tints */
  --cream-glass: color-mix(in srgb, var(--ui-cream) 94%, transparent);
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --gap: 24px;
  --bar-in: 60px;           /* the top bar itself */
  --bar-h: 76px;            /* the room it takes, margins included (the match view fits under it) */
  --font-display: 'Fredoka', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { margin: 0; }
body {
  background: var(--ui-sky);
  color: var(--ui-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body[data-view="match"] { background: var(--ui-sky); color: var(--ui-ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }
.asset-missing { display: none !important; }  /* an optional image (cover, icon) that isn't published yet */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; font-weight: 700; }
::selection { background: color-mix(in srgb, var(--ui-sun) 60%, transparent); }
img { max-width: 100%; }

/* ---------- page background ----------
   TEMP-BG-SWITCHER: calm-1..3 + loud-1..3 (<html data-bgopt="calm-1|...">, public/js/theme.js), desktop or phone shape.
   Shown on every page but a match (body[data-bg="page"]); a match shows its own scene. The bright art needs no
   extra light layer: text never sits on the art directly, only on cream panels and "stickers". */
:root, :root[data-bgopt="calm-1"] { --page-art: url(/assets/bg-site-calm-1.webp); --page-art-m: url(/assets/bg-site-calm-1-mobile.webp); }
:root[data-bgopt="calm-2"] { --page-art: url(/assets/bg-site-calm-2.webp); --page-art-m: url(/assets/bg-site-calm-2-mobile.webp); }
:root[data-bgopt="calm-3"] { --page-art: url(/assets/bg-site-calm-3.webp); --page-art-m: url(/assets/bg-site-calm-3-mobile.webp); }
:root[data-bgopt="loud-1"] { --page-art: url(/assets/bg-site-1.webp); --page-art-m: url(/assets/bg-site-1-mobile.webp); }
:root[data-bgopt="loud-2"] { --page-art: url(/assets/bg-site-2.webp); --page-art-m: url(/assets/bg-site-2-mobile.webp); }
:root[data-bgopt="loud-3"] { --page-art: url(/assets/bg-site-3.webp); --page-art-m: url(/assets/bg-site-3-mobile.webp); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--ui-sky) center / cover no-repeat;
}
body[data-bg="page"]::before { background-image: var(--page-art); }
body[data-view="match"]::before { background: var(--ui-sky); }
@media (max-aspect-ratio: 4/5) { body[data-bg="page"]::before { background-image: var(--page-art-m); background-position: center bottom; } }

/* ---------- shared pieces: panels, stickers, buttons ---------- */
.card-panel {
  background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); border-radius: var(--r-lg);
  box-shadow: var(--ledge), var(--float);
}
/* a title or line of text sitting on the page art: a cream sticker so it keeps AA contrast on every background */
.sticker {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  padding: 6px 20px 8px; border-radius: 999px; background: var(--ui-cream); color: var(--ui-ink);
  border: var(--ink-line); box-shadow: var(--ledge-sm);
}
.sticker img { width: 34px; height: 34px; margin-left: -6px; }
.sticker-note {
  display: inline-block; width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 5px 14px; border-radius: 12px;
  background: var(--cream-glass); color: var(--ui-ink-2); font-size: 15px; font-weight: 700; border: 1.5px solid var(--ink-soft);
}
.section-title { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 20px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--ink-line); border-radius: 999px; padding: 10px 20px; line-height: 1.15;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .005em;
  background: var(--ui-cream); color: var(--ui-ink); box-shadow: var(--ledge-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s, filter .15s;
}
.btn img { width: 22px; height: 22px; flex-shrink: 0; margin-left: -4px; object-fit: contain; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge-c); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ledge-c); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-play, .btn-primary { background: var(--ui-play); color: var(--ui-on-play); }
.btn-play:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-play) 90%, var(--ui-cream)); }
.btn-blue { background: var(--ui-player); color: var(--ui-on-play); }
.btn-blue:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-player) 90%, var(--ui-cream)); }
.btn-gold { background: var(--ui-sun); color: var(--ui-ink); }
.btn-gold:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-sun) 85%, var(--ui-cream)); }
.btn-ghost { background: var(--ui-cream); color: var(--ui-ink); }
.btn-ghost:hover:not(:disabled) { background: var(--ui-cream-2); }
.btn-danger { background: var(--ui-cream); color: var(--ui-opponent); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 15px; }
.btn-sm img { width: 18px; height: 18px; }
.btn-big { padding: 14px 26px; font-size: 20px; box-shadow: var(--ledge); }
.btn-big:hover:not(:disabled) { box-shadow: 0 6px 0 var(--ledge-c); }
.btn-big img { width: 26px; height: 26px; }
/* the red play icon sits on a cream disc on the red buttons */
.btn-play img[data-asset="icon-play"] { box-sizing: content-box; width: 15px; height: 15px; padding: 5px 4px 5px 6px; border-radius: 50%; background: var(--ui-cream); }
.btn.dim { filter: saturate(.55); }

.rules-link {
  background: none; border: 0; padding: 0; color: var(--ui-ink-2); font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.rules-link:hover { color: var(--ui-ink); }
.rules-link.arrow { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ink-soft); text-underline-offset: 4px; }
.rules-link.arrow::after { content: '→'; display: inline-block; }
.name-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--ink-soft); text-underline-offset: 3px; }
.name-link:hover { text-decoration-color: currentColor; }
.note { font-size: 14px; color: var(--ui-ink-2); margin: 10px 0 0; }
.note.err { font-size: 14px; color: var(--ui-opponent); font-weight: 700; margin-top: 10px; }
.note.err:empty { display: none; }
.warn { font-size: 14px; color: var(--ui-money); font-weight: 700; margin: 0 0 12px; }
.empty { color: var(--ui-ink-2); font-size: 15px; }

/* round icon buttons (wallet, preview options, sound, help) */
.round-btn, .sound-btn, .help-btn {
  width: 42px; height: 42px; flex-shrink: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm); color: var(--ui-ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.round-btn img, .sound-btn img, .help-btn img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.round-btn:hover, .sound-btn:hover, .help-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge-c); }
.round-btn:active, .sound-btn:active, .help-btn:active, .round-btn[aria-expanded="true"], .sound-btn[aria-expanded="true"] { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }

/* ---------- top bar: a floating cream bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; min-height: var(--bar-in);
  margin: 10px clamp(8px, 2vw, 24px) 6px; padding: 7px 10px 7px 14px;
  position: sticky; top: 8px; z-index: 20;
  background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); border-radius: 999px; box-shadow: var(--ledge-sm), var(--float);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex-shrink: 0; }
/* the logo (public/js/logo.js): mascot art + the SVG "VERSO" wordmark, sized by height */
.brand-logo, .foot-brand, .hero-logo { display: block; line-height: 0; }
.brand-logo { height: 52px; margin: -7px 0; }
.brand-logo svg, .foot-brand svg, .hero-logo svg { height: 100%; width: auto; display: block; overflow: visible; }
.topbar .spacer { flex: 1; }

/* Games | Demo | Leaderboard */
.main-nav {
  display: flex; gap: 4px; padding: 4px; margin-left: 10px; border-radius: 999px; background: var(--ui-cream-2);
  border: 2px solid var(--edge); flex-shrink: 0;
}
.main-nav button {
  border: 0; background: transparent; color: var(--ui-ink); border-radius: 999px; padding: 6px 16px;
  font: 600 17px/1.15 var(--font-display); white-space: nowrap;
}
.main-nav button:hover { background: color-mix(in srgb, var(--ui-cream) 70%, transparent); }
.main-nav button[aria-current="page"] { background: var(--pick-bg); color: var(--pick-fg); }
body[data-view="match"] .main-nav { display: none; }

/* "● N online": admins only (the server never sends the number to anyone else) */
.online-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 2px solid var(--ink-soft);
  color: var(--ui-ink-2); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.online-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-grass); }
.online-chip b { color: var(--ui-ink); }

/* balance pills: real SOL (wallet) and Demo SOL (play money) */
.wallet-chip {
  display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; flex-shrink: 0;
  background: var(--ui-cream); border: var(--ink-line); border-radius: 999px; box-shadow: var(--ledge-sm);
  padding: 3px 14px 3px 4px; line-height: 1.15; color: var(--ui-ink);
}
.wallet-chip img { grid-row: span 2; width: 30px; height: 30px; }
.wallet-chip:hover { background: var(--ui-cream-2); }
.wallet-chip .amt { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.wallet-chip .sub { font-size: 12px; color: var(--ui-ink-2); white-space: nowrap; font-weight: 700; }
.demo-chip { background: var(--accent-soft); }

/* avatar: the mascot head in a disc ringed with a side color */
.avatar {
  --size: 38px; --side-ring: var(--ui-player);
  width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%; padding: 0; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--side-ring) 16%, var(--ui-cream)); border: 2.5px solid var(--side-ring); color: var(--ui-ink);
  font: 700 calc(var(--size) * .44) / 1 var(--font-display);
}
.me-avatar { box-shadow: var(--ledge-sm); }
.me-avatar:hover { transform: translateY(-1px); }
/* mascot avatars: the head from the rig (public/js/mascots/rig.js avatarSvg), clipped to the disc */
.avatar.mascot-avatar { overflow: hidden; }
.avatar.mascot-avatar > svg { width: 118%; height: 118%; margin-top: 12%; }
.avatar.mascot-avatar[data-side="opp"] { --side-ring: var(--ui-opponent); }
.avatar.neutral { --side-ring: var(--ui-ink-2); }

/* ---------- Preview options (public/js/preview.js): every TEMP-<NAME>-SWITCHER row in one panel ---------- */
.preview-slot { position: relative; flex-shrink: 0; display: flex; }
.preview-slot:empty { display: none; }
.pv-floating { position: fixed; right: 12px; bottom: 12px; z-index: 90; }
.pv-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; width: 320px; max-height: min(calc(100vh - 110px), 720px); overflow-y: auto;
  padding: 14px 14px 10px; border-radius: var(--r-md); background: var(--ui-cream); color: var(--ui-ink);
  border: var(--ink-line); box-shadow: var(--ledge-sm), var(--float);
}
.pv-floating .pv-panel { top: auto; bottom: calc(100% + 12px); }
.pv-head { display: grid; margin-bottom: 8px; }
.pv-head b { font: 700 18px/1.2 var(--font-display); }
.pv-head span { font-size: 13px; color: var(--ui-ink-2); }
.pv-row { display: grid; gap: 5px; padding: 9px 0; border-top: 1.5px dashed var(--ink-soft); }
.pv-label { font-size: 13px; font-weight: 700; color: var(--ui-ink-2); }
.pv-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-opts button {
  border: 2px solid var(--edge); background: var(--ui-cream); color: var(--ui-ink); border-radius: 999px; padding: 3px 11px;
  font: 600 14px/1.3 var(--font-display);
}
.pv-opts button:hover { background: var(--ui-cream-2); }
.pv-opts button[aria-pressed="true"] { background: var(--pick-bg); color: var(--pick-fg); }

/* the old in-bar pill (still used by the block selector in /dev/scenes) */
.theme-pill { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; border: 2px solid var(--edge); background: var(--ui-cream); font: 700 12px/1 var(--font-body); color: var(--ui-ink); }
.theme-pill .pill-label { padding: 0 4px 0 7px; color: var(--ui-ink-2); font-size: 11px; }

/* ---------- match HUD in the top bar (art-source/v3/mock-match.png) ----------
   During a match the bar itself is transparent and every piece is its own cream sticker over the sky: brand, Back,
   the game title (the stake under it), the scoreboard (game-ui.css, js/scenes/hud.js), "?", preview options, sound.
   Phones: Back, title (+ stake under it) and the round buttons on one row, the score on a second row. */
body[data-view="match"] .topbar {
  background: transparent; border-color: transparent; box-shadow: none; border-radius: 0;
  margin: 8px 10px 6px; padding: 0 2px; gap: 10px; min-height: 48px; position: relative; top: 0;
}
body[data-view="match"] .topbar .spacer { display: none; }
body[data-view="match"] .brand { padding: 3px 14px 3px 3px; border-radius: 999px; background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm); }
body[data-view="match"] .brand { padding: 2px 10px; }
body[data-view="match"] .brand-logo { height: 38px; margin: 0; }
.back-btn {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; height: 42px; padding: 0 16px 0 9px; border-radius: 999px;
  background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm);
  font: 600 17px/1 var(--font-display); transition: transform .08s ease, box-shadow .08s ease;
}
.back-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.back-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge-c); }
.back-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }
.match-info {
  display: grid; min-width: 0; flex: 0 1 auto; padding: 4px 18px 5px; border-radius: 999px; line-height: 1.15;
  background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm);
}
.match-info .title { font-family: var(--font-display); font-weight: 700; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-info .t-short { display: none; }              /* phones: the short game name (app.js titleHtml) */
.match-info .pot, .match-stake .pot { font-size: 14px; white-space: nowrap; color: var(--ui-ink-2); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.match-info .pot b, .match-stake .pot b { color: var(--ui-money); font-weight: 700; font-family: var(--font-display); font-size: 1.15em; }
.match-info .pot-sub { display: none; }               /* desktop: the stake pill on the right shows it */
.match-stake {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; max-width: 330px; height: 42px; padding: 0 16px 0 5px; margin-left: auto;
  border-radius: 999px; background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm);
}
.match-stake img { width: 30px; height: 30px; flex-shrink: 0; }
.match-stake.is-demo { background: var(--accent-soft); }
.match-stake .pot { color: var(--ui-ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.match-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.match-actions .rules-link.book { display: none; }               /* the rules live behind "?" ... */
body.is-tutorial .match-actions .rules-link.book { display: inline-flex; } /* ... except in a tutorial, which has no "?" */
body[data-view="match"] .match-actions .rules-link.book { padding: 6px 14px; border-radius: 999px; background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm); color: var(--ui-ink); }
body[data-view="match"] .timer-ring .track { stroke: var(--edge); stroke-width: 2; }

/* ---------- landing: hero (one static picture + the pitch in a cream card with the logo), game cards, how it works ---------- */
.landing { --pad-x: clamp(16px, 4vw, 64px); }
.hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: min(760px, calc(100dvh - var(--bar-h) - 24px)); padding: 32px var(--pad-x) 40px; max-width: 1440px; margin: 0 auto;
}
.hero-art {
  position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); width: min(62%, 860px); aspect-ratio: 16 / 10;
  border-radius: var(--r-lg); overflow: hidden; border: var(--ink-line); box-shadow: var(--ledge); background: var(--ui-cream-2);
}
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-img.asset-missing { visibility: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 520px; padding: 26px 32px 26px; }
.hero-logo { display: block; height: 92px; margin: 0 0 14px -4px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 3px 12px 3px 8px; border-radius: 999px;
  background: var(--ui-cream-2); color: var(--ui-ink-2); font-size: 14px; font-weight: 700;
}
.eyebrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-player); box-shadow: 13px 0 0 var(--ui-opponent); margin-right: 14px; }
.hero h1 { font-size: clamp(46px, 5.6vw, 80px); font-weight: 700; letter-spacing: -.02em; line-height: .98; margin-bottom: 14px; }
.hero .sub { color: var(--ui-ink-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.45; margin: 0; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.trust { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; color: var(--ui-ink-2); font-size: 14px; font-weight: 700; }
.trust span + span::before { content: '·'; margin: 0 10px; }
.dev-guest { margin-top: 12px; }

.strip, .how { padding: 24px var(--pad-x) 24px; max-width: 1440px; margin: 0 auto; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.steps li {
  counter-increment: step; display: grid; gap: 4px; padding: 20px 22px 22px;
  background: var(--ui-cream); border: var(--ink-line); border-radius: var(--r-lg); box-shadow: var(--ledge);
}
.steps li::before {
  content: counter(step); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--ui-sun); border: 2.5px solid var(--edge); color: var(--ui-ink); font: 700 19px var(--font-display);
}
.steps b { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.steps span { color: var(--ui-ink-2); font-size: 15px; }
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: 1312px; margin: 24px auto 28px;
  padding: 16px 24px; color: var(--ui-ink-2); font-size: 14px;
}
.landing .site-foot { width: calc(100% - 2 * var(--pad-x)); }
.foot-brand { height: 46px; }
.foot-links { display: flex; gap: 18px; }
.foot-note { margin-left: auto; }

/* ---------- game cards: the main attraction (landing, lobby, demo) ---------- */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 26px; }
.game-card {
  --acc: var(--ui-sun);
  position: relative; display: flex; flex-direction: column; width: calc((100% - 2 * 26px) / 3); min-width: 0;
  background: var(--ui-cream); border: 5px solid color-mix(in srgb, var(--acc) 55%, var(--ui-cream)); border-radius: 26px;
  outline: 2px solid var(--edge); box-shadow: 0 5px 0 2px var(--ledge-c), var(--float);
  cursor: pointer; transition: transform .15s ease;
}
.game-card[data-accent="sky"] { --acc: var(--ui-sky); }
.game-card[data-accent="red"] { --acc: var(--ui-play); }
.game-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.game-card.pressed { animation: card-press .25s ease; }
@keyframes card-press { 40% { transform: scale(.98); } }
.game-card .cover {
  position: relative; margin: 8px 8px 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  border: 2.5px solid var(--edge); background: var(--ui-sky);
}
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card .cover-img { filter: saturate(.84); }      /* the bright covers, a touch calmer next to the calm UI */
.game-card .cover .scene-host { position: absolute; inset: 0; }
.game-card .cover .scene-frame { border-radius: 0; box-shadow: none; }
.game-card .meta { display: grid; justify-items: center; text-align: center; padding: 10px 14px 16px; }
.game-card h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.01em; }
.game-card p { margin: 2px 0 10px; color: var(--ui-ink); font-size: 17px; font-weight: 700; line-height: 1.3; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
.play-btn { min-width: 150px; font-size: 21px; padding: 8px 26px; }

.try-link, .free-tag { font-size: 14px; }
.free-tag { color: var(--ui-ink-2); font-weight: 700; }
.tile-help {
  position: absolute; top: 16px; left: 16px; z-index: 2; width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--edge); background: var(--ui-cream); box-shadow: 0 2px 0 var(--ledge-c);
}
.tile-help img { width: 26px; height: 26px; }
.tile-help:hover { transform: translateY(-1px); }

/* ---------- lobby and demo: games in the middle, the stake in a rail at the edge ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px; }
.page-head h1 { font-size: clamp(26px, 2.8vw, 38px); }
.page-head .lead { flex-basis: 100%; margin: 0; }
.demo-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ui-sun); color: var(--ui-ink);
  border: 2px solid var(--edge); font: 600 14px/1.3 var(--font-display); white-space: nowrap; vertical-align: middle;
}
.stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stakes button {
  display: grid; justify-items: center; gap: 0; padding: 7px 2px 6px; border-radius: 14px; line-height: 1.15;
  border: 2px solid var(--edge); background: var(--ui-cream); color: var(--ui-ink); box-shadow: 0 2px 0 var(--ledge-c);
  transition: transform .08s, background .15s;
}
.stakes button:hover { background: var(--ui-cream-2); }
.stakes button:active { transform: translateY(2px); box-shadow: none; }
.stakes button b { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; }
.stakes button small { font-size: 11px; color: var(--ui-ink-2); white-space: nowrap; font-weight: 700; }
.stakes button small.wait.on { color: var(--ui-win); }
.stakes button[aria-pressed="true"] { background: var(--pick-bg); color: var(--pick-fg); }
.stakes button[aria-pressed="true"] small, .stakes button[aria-pressed="true"] small.wait.on { color: var(--pick-fg); }
/* the stake: "0.1 SOL", "≈ 1.8M $VERSO" under it, one "Win ≈ …" line (the fee is a note at the bottom of the page) */
.stake-sum { display: grid; gap: 1px; border-top: 2px dashed var(--ink-soft); padding-top: 10px; margin: 14px 0 12px; min-width: 0; }
.ss-main { font: 700 30px/1.05 var(--font-display); color: var(--ui-ink); white-space: nowrap; }
.ss-tok { font-size: 14px; font-weight: 700; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-win { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-win b { color: var(--ui-win); font: 700 19px/1.1 var(--font-display); }
.fee-note {
  display: block; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 3px 12px; border-radius: 12px;
  background: var(--cream-glass); color: var(--ui-ink-2); font-size: 13px; font-weight: 700; border: 1.5px solid var(--ink-soft);
}
.fee-note:empty, .foot-fee:empty { display: none; }
.foot-fee::before { content: '\00B7'; margin: 0 8px; }
.summary { border-top: 2px dashed var(--ink-soft); padding-top: 10px; margin: 14px 0 12px; font-size: 15px; }
.summary .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; color: var(--ui-ink-2); font-weight: 700; }
.summary .row b { color: var(--ui-ink); }
.summary .row.big span { color: var(--ui-ink); font-size: 17px; }
.summary .row.big b { color: var(--ui-win); font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.summary small { color: var(--ui-ink-2); font-weight: 400; }
.summary.flat { border-top: 0; padding-top: 0; margin-top: 0; }
.demo-balance {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 8px 8px 6px;
  border-radius: 14px; background: var(--accent-soft); border: 2px solid var(--edge);
}
.demo-balance img { width: 32px; height: 32px; }
.demo-balance b { display: block; font: 700 19px/1.1 var(--font-display); }
.demo-balance small { display: block; font-size: 11px; font-weight: 700; color: var(--ui-ink-2); }

.history { list-style: none; margin: 0; padding: 4px 18px; }
.history li {
  display: grid; grid-template-columns: 76px 1.3fr 1fr auto 90px; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 2px dashed var(--ink-soft); font-size: 15px;
}
.history li:last-child { border-bottom: 0; }
.history li.empty { display: block; }
.history .pill { border-radius: 999px; text-align: center; padding: 2px 0; font: 600 14px/1.3 var(--font-display); color: var(--ui-ink); border: 2px solid var(--edge); background: var(--ui-cream-2); }
.history .pill.res-win { background: var(--ui-win); color: var(--ui-on-play); }
.history .pill.res-loss { background: var(--ui-opponent); color: var(--ui-on-play); }
.history .h-game { font-weight: 700; }
.history .h-opp, .history .h-delta, .history .h-time { color: var(--ui-ink-2); }
.history .h-delta.money { color: var(--ui-win); font-weight: 700; }
.history .h-time { text-align: right; white-space: nowrap; }
.history.compact { padding: 0; background: none; border: 0; box-shadow: none; }

/* ---------- queue ---------- */
.queue-overlay {
  position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--ui-ink) 45%, transparent);
  display: grid; place-items: center; padding: 16px;
}
.queue-box { text-align: center; width: min(560px, 100%); padding: 22px clamp(18px, 5vw, 48px) 26px; }
.queue-box h2 { font-size: clamp(26px, 3.4vw, 34px); }
.queue-box .timer { font-family: var(--font-display); font-size: 54px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.queue-box p { color: var(--ui-ink-2); font-size: 17px; margin: 0 0 18px; font-weight: 700; }
.queue-box p b { color: var(--ui-money); }
.q-scene { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: var(--r-md); overflow: hidden; border: 2.5px solid var(--edge); background: var(--ui-sky); }

/* ---------- dialogs ---------- */
/* Every dialog: a header (title + Close ✕) that never scrolls away, a body that scrolls inside the window, and an
   optional footer that keeps the main buttons in view. */
dialog {
  color: var(--ui-ink); padding: 0; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: hidden;
  background: var(--ui-cream); border: var(--ink-line); border-radius: var(--r-lg); box-shadow: var(--ledge), var(--float);
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: color-mix(in srgb, var(--ui-ink) 50%, transparent); }
dialog h2 { font-size: 28px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
dialog h2 img { width: 34px; height: 34px; }
.modal-head {
  flex: none; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 64px;
  padding: 10px 12px 10px 22px; background: var(--ui-cream); border-bottom: 2px dashed var(--ink-soft);
}
.modal-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 26px; overflow-wrap: anywhere; }
.modal-x {
  flex: none; margin-left: auto; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.modal-x svg { width: 20px; height: 20px; pointer-events: none; }
.modal-x path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.modal-x:hover { background: var(--ui-cream-2); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge-c); }
.modal-x:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 22px; }
.modal-foot {
  flex: none; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 22px 16px;
  background: var(--ui-cream); border-top: 2px dashed var(--ink-soft);
}
dialog .modal-foot.row-btns { margin-top: 0; }
dialog ol, dialog ul { padding-left: 22px; color: var(--ui-ink-2); }
dialog li { margin-bottom: 6px; }
dialog .row-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
dialog label { display: block; font-size: 14px; font-weight: 700; color: var(--ui-ink-2); margin: 12px 0 4px; }
dialog input, .claim-row input {
  width: 100%; background: var(--ui-cream-2); color: var(--ui-ink); border: 2px solid var(--edge); border-radius: var(--r-sm); padding: 10px 12px;
}
dialog input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.rules-cover { position: relative; aspect-ratio: 16 / 9; margin: 0 0 12px; border-radius: var(--r-md); overflow: hidden; border: 2.5px solid var(--edge); }
.w-head, #dlgProfile h3 { font-size: 18px; margin: 20px 0 8px; }
.addr { word-break: break-all; background: var(--ui-cream-2); border: 2px solid var(--edge); padding: 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--ui-ink); }
.claim-row { display: flex; gap: 8px; align-items: center; }
.claim-row input { flex: 1; min-width: 0; }
.claim-row .btn { padding: 8px 16px; }
.w-head:first-of-type { margin-top: 16px; }
/* "Your character" in Wallet & settings: the head, what you wear, Customize */
.w-char { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-char .avatar { --size: 44px; }
.w-char-txt { flex: 1 1 160px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ui-ink-2); line-height: 1.3; }
.w-char-txt b { display: block; color: var(--ui-ink); font: 700 17px/1.2 var(--font-display); }
.w-account { border-top: 2px dashed var(--ink-soft); padding-top: 14px; justify-content: space-between; }
dialog .summary .row.big b { color: var(--ui-ink); }

/* result */
#dlgResult { width: min(600px, calc(100vw - 24px)); }
#dlgResult .modal-body { text-align: center; padding-top: 8px; }
#dlgResult .modal-head { background: transparent; }
#dlgResult::before { /* sun rays behind the title on a win */
  content: ''; position: absolute; inset: -30% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--res-glow, transparent), transparent 70%);
}
#dlgResult.res-win { --res-glow: color-mix(in srgb, var(--ui-sun) 55%, transparent); }
#dlgResult.res-loss { --res-glow: color-mix(in srgb, var(--ui-opponent) 18%, transparent); }
#dlgResult > * { position: relative; }
.result-kicker { display: inline-block; margin-right: auto; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ui-ink-2); margin-bottom: 4px; }
#dlgResult.res-demo .result-kicker { padding: 2px 10px; border-radius: 999px; background: var(--ui-sun); color: var(--ui-ink); border: 2px solid var(--edge); }
.result-title { font-size: clamp(44px, 7vw, 66px) !important; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0 !important; line-height: 1.05; justify-content: center; }
.result-title.loss { color: var(--ui-opponent); }
.result-amt { font-family: var(--font-display); font-size: clamp(34px, 6vw, 52px); font-weight: 700; line-height: 1.15; color: var(--ui-win); margin-top: 2px; }
#dlgResult.res-loss .result-amt { color: var(--ui-opponent); }
.result-amt.small { font-size: 19px; line-height: 1.5; color: var(--ui-ink-2) !important; }
.result-amt:empty { display: none; }
#resInfo { color: var(--ui-ink-2); margin: 8px 0 0; font-weight: 700; }
.result-tok { font-size: 15px; font-weight: 700; color: var(--ui-ink-2); margin-top: 2px; }
.result-tok:empty { display: none; }
#dlgResult .row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#dlgResult .btn { padding: 12px 10px; font-size: 19px; }
.share-box { margin-top: 16px; text-align: left; display: grid; gap: 10px; }
.share-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 2.5px solid var(--edge); background: var(--ui-cream-2); }
.share-box label { margin-top: 0; }
#claimMsg:empty { display: none; }
#claimMsg { margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px;
  background: var(--ui-cream); color: var(--ui-ink); padding: 9px 12px 9px 16px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: var(--ink-line); box-shadow: var(--ledge-sm), var(--float); max-width: calc(100vw - 24px); width: max-content;
}
.toast::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-grass); flex-shrink: 0; }
.toast.err::before { background: var(--ui-play); }
.toast .btn { flex-shrink: 0; }

/* ---------- team badge (leaderboard rows) ---------- */
.team-badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--ink-soft);
  background: var(--ui-cream-2); color: var(--ui-ink-2); font: 700 12px/1.3 var(--font-body); vertical-align: middle; white-space: nowrap;
}

/* ---------- character creator (#dlgCustomize): species toggle, the live character, arrows at the slot heights ---------- */
.customizer { width: min(580px, calc(100vw - 24px)); }
.customizer .modal-body { display: grid; gap: 12px; padding-top: 14px; }
.species-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--ui-cream-2); border: 2px solid var(--edge);
}
.species-toggle button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; border: 0; background: transparent;
  border-radius: 999px; padding: 3px 14px 3px 3px; color: var(--ui-ink); font: 600 19px/1.1 var(--font-display);
}
.species-toggle button:hover { background: color-mix(in srgb, var(--ui-cream) 70%, transparent); }
.species-toggle button[aria-checked="true"] { background: var(--pick-bg); color: var(--pick-fg); }
.species-toggle .avatar { --size: 36px; }
.cust-stage, .prof-stage {
  position: relative; overflow: hidden; border-radius: var(--r-md); border: 2.5px solid var(--edge);
  background: linear-gradient(to bottom, var(--ui-sky) 0 86%, var(--ui-grass) 86%);
}
.cust-stage { height: clamp(250px, calc(100dvh - 370px), 430px); }
.cust-rig, .prof-rig { position: absolute; inset: 4px 0 0; }
.cust-rig svg, .prof-rig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cust-slots { position: absolute; inset: 0; pointer-events: none; }
/* one side of a slot: the arrow centered on the slot's height (--y, set by app.js from the rig), its caption under it */
.cust-side {
  position: absolute; top: var(--y, 50%); width: clamp(70px, 24%, 128px); display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: translateY(-21px); pointer-events: none; transition: top .25s ease;
}
/* the shoes sit at the bottom edge: their caption goes above the arrow */
.cust-side[data-row="feet"] { transform: translateY(calc(-100% + 21px)); }
.cust-side[data-row="feet"] .cust-cap { order: -1; }
.cust-side.l { left: max(4px, calc(50% - 205px)); }
.cust-side.r { right: max(4px, calc(50% - 205px)); }
.cust-side.l { align-items: flex-start; }
.cust-side.r { align-items: flex-end; }   /* a long name grows inward, never off the stage */
.cust-arrow {
  width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; pointer-events: auto;
  background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.cust-arrow svg { width: 20px; height: 20px; pointer-events: none; }
.cust-arrow path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.cust-arrow:hover { background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge-c); }
.cust-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }
.cust-cap {
  padding: 1px 8px 2px; border-radius: 10px; text-align: center; line-height: 1.2; white-space: nowrap; pointer-events: none;
  background: var(--cream-glass); border: 1.5px solid var(--ink-soft); color: var(--ui-ink); font: 600 13px/1.2 var(--font-display);
}
.cust-cap.slot { font: 700 11px/1.3 var(--font-body); color: var(--ui-ink-2); text-transform: uppercase; letter-spacing: .06em; }
.cust-cap.bump { animation: cap-bump .3s ease; }
@keyframes cap-bump { 40% { transform: scale(1.08); } }
.cust-name label { margin: 0 0 4px; }
.cust-name .acct { margin: 0; font-size: 15px; font-weight: 700; color: var(--ui-ink-2); }
.cust-name .acct b { color: var(--ui-ink); font-family: var(--font-display); font-size: 18px; }
.cust-name .note { margin-top: 4px; font-size: 13px; }
.customizer #custErr { margin: 0; }
.customizer .modal-foot .btn { min-width: 170px; }

/* ---------- leaderboard ---------- */
.board { max-width: 1000px; margin: 0 auto; padding: 18px clamp(12px, 2.5vw, 36px) 64px; }
.board .page-head h1 img { width: 36px; height: 36px; }
.board-card { padding: 14px 16px 16px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 2px; scrollbar-width: thin; }
.tabs button {
  flex-shrink: 0; border: 2px solid var(--edge); background: var(--ui-cream); border-radius: 999px; padding: 5px 14px;
  color: var(--ui-ink); white-space: nowrap; font: 600 15px/1.3 var(--font-display);
}
.tabs button:hover { background: var(--ui-cream-2); }
.tabs button[aria-selected="true"] { background: var(--pick-bg); color: var(--pick-fg); }
.board .note { margin: 2px 0 8px; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { border-bottom: 2px dashed var(--ink-soft); }
.board-list li:last-child { border-bottom: 0; }
.board-list li.empty { padding: 14px 4px; }
.b-row {
  display: grid; grid-template-columns: 36px 30px 40px minmax(0, 1fr) 62px 104px; align-items: center; gap: 10px; width: 100%;
  padding: 9px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-ink); text-align: left;
}
.b-row:hover { background: var(--ui-cream-2); }
.b-row .place { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ui-ink-2); }
.b-row.top .place { color: var(--ui-money); }
.b-row .avatar { --size: 38px; }
.b-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.b-name b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.b-rate { font-family: var(--font-display); font-weight: 700; font-size: 19px; text-align: right; font-variant-numeric: tabular-nums; }
.b-matches { color: var(--ui-ink-2); font-size: 14px; text-align: right; font-weight: 700; }
.board-more { display: flex; justify-content: center; margin-top: 12px; }
.board-more .btn:not(.hidden) { min-width: 180px; }

/* card rank badge: a tiny playing card with the rank and a spade */
.rank-badge {
  display: inline-grid; place-items: center; align-content: center; width: 20px; height: 27px; margin-left: 6px; vertical-align: -6px; flex-shrink: 0;
  border-radius: 4px; background: var(--ui-cream); color: var(--ui-ink); border: 1.5px solid var(--edge); box-shadow: 1px 1px 0 var(--ledge-c);
  font-family: var(--font-display); line-height: .9; letter-spacing: -.04em;
}
.rank-badge b { font-size: 11px; font-weight: 700; }
.rank-badge i { font-style: normal; font-size: 8px; }
.rank-badge.big { width: 28px; height: 38px; margin: 0; border-width: 2px; border-radius: 6px; box-shadow: 2px 2px 0 var(--ledge-c); transform: rotate(-4deg); }
.rank-badge.big b { font-size: 15px; }
.rank-badge.big i { font-size: 11px; }
.top .rank-badge.big { background: color-mix(in srgb, var(--ui-sun) 50%, var(--ui-cream)); }
.rank-space { width: 28px; }

/* ---------- profile: name + key stats, their character big next to their most played games, the rest below ---------- */
.profile-dialog { width: min(640px, calc(100vw - 24px)); }
.profile-dialog .modal-head h2 { flex-wrap: wrap; gap: 4px 6px; }
.profile-dialog .modal-body { padding-top: 12px; }
.profile-dialog h3 { font-size: 18px; margin: 20px 0 8px; }
.profile-name { display: flex; align-items: center; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-grid div { display: grid; justify-items: center; align-content: center; padding: 8px 4px; border-radius: var(--r-sm); background: var(--ui-cream-2); border: 2px solid var(--edge); }
.stat-grid b { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.stat-grid span { font-size: 12px; color: var(--ui-ink-2); text-align: center; font-weight: 700; line-height: 1.2; }
.prof-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.prof-stage { height: 250px; }
#profCustomize { flex: none; white-space: nowrap; }
.prof-top { display: grid; align-content: start; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ui-cream-2); border: 2px solid var(--edge); }
.prof-top h3 { margin: 0 !important; font-size: 17px; }
.prof-top .empty { font-size: 14px; margin: 0; }
.top-game { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.top-game b { font: 600 16px/1.2 var(--font-display); min-width: 0; }
.top-game span { font-size: 13px; font-weight: 700; color: var(--ui-ink-2); white-space: nowrap; }
.top-game i { grid-column: 1 / -1; height: 8px; border-radius: 4px; border: 1px solid var(--ink-soft); background: linear-gradient(90deg, var(--ui-player) var(--w), var(--ui-cream) var(--w)); }
.history.compact li { grid-template-columns: 60px 1fr auto; font-size: 14px; }
.history.compact .h-opp { grid-column: 2; }
dialog .summary .row { color: var(--ui-ink-2); }
dialog .summary .row span { min-width: 0; }
dialog .summary .row b { white-space: nowrap; }
.dist { display: grid; gap: 6px; margin: 6px 0 10px; }
.dist-row { display: grid; grid-template-columns: 70px 1fr 42px; align-items: center; gap: 8px; font-size: 14px; }
.dist-row i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ui-opponent) var(--w), var(--ui-cream-2) var(--w)); border: 1px solid var(--ink-soft); }
.dist-row b { text-align: right; }
.summary.tells { margin-bottom: 4px; }

/* ---------- match additions (the Scout sheet and the rules card are styled in game-ui.css) ---------- */
.scout-btn {
  border: 2px solid var(--edge); background: var(--ui-cream); border-radius: 999px; padding: 2px 10px; font: 600 12px/1.3 var(--font-display);
  color: var(--ui-opponent); white-space: nowrap; box-shadow: 0 2px 0 var(--ledge-c);
}
.scout-btn:hover, .scout-btn[aria-expanded="true"] { background: var(--ui-opponent); color: var(--ui-on-play); }
/* the sheets' title + Close stay at the top while their content scrolls */
.scout-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -14px -16px 8px; padding: 8px 10px 8px 16px;
  position: sticky; top: -14px; z-index: 2; background: var(--ui-cream); border-bottom: 2px dashed var(--ink-soft);
}
.modal-x.sm { width: 34px; height: 34px; }
.modal-x.sm svg { width: 16px; height: 16px; }
.scout-head h3 { font-size: 18px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .pot-extra, .pot-tok { display: none; }
  .game-card { width: calc((100% - 26px) / 2); }
  .history li { grid-template-columns: 70px 1fr auto; }
  .history .h-opp, .history .h-time { display: none; }
  .main-nav button { padding: 6px 12px; font-size: 16px; }
  .wallet-chip .sub { display: none; }
  .wallet-chip { grid-template-columns: auto auto; }
  .wallet-chip img { grid-row: auto; }
}
@media (max-width: 860px) {
  :root { --bar-in: 50px; --bar-h: 66px; }
  .topbar { flex-wrap: wrap; gap: 6px 8px; margin: 6px 8px 4px; padding: 5px 6px 5px 10px; border-radius: 26px; top: 6px; }
  .brand { gap: 6px; }
  .brand-logo { height: 50px; margin: -6px 0; }
  /* the nav takes its own row under the bar's buttons */
  .main-nav { order: 10; flex-basis: 100%; margin: 0 0 2px; justify-content: stretch; }
  .main-nav button { flex: 1; padding: 5px 6px; font-size: 16px; }
  body[data-view="landing"] .main-nav { display: none; }
  .round-btn, .sound-btn, .help-btn { width: 36px; height: 36px; }
  .round-btn img, .sound-btn img, .help-btn img { width: 24px; height: 24px; }
  .wallet-chip { padding: 2px 10px 2px 3px; column-gap: 5px; }
  .wallet-chip img { width: 24px; height: 24px; }
  .wallet-chip .amt { font-size: 15px; }
  .avatar.me-avatar { --size: 34px; }
  .online-chip { padding: 2px 7px; font-size: 12px; }
  .online-chip .lbl { display: none; }
  .btn-sm { padding: 5px 11px; font-size: 14px; }
  .pv-panel { position: fixed; left: 8px; right: 8px; top: auto; width: auto; margin-top: 10px; max-height: 70dvh; }
  .preview-slot { position: static; }

  /* landing on phones: the picture on top, the pitch in a card under it */
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 0; padding: 12px 12px 16px; }
  .hero-art { position: relative; right: auto; top: auto; transform: none; width: 100%; height: auto; }
  .hero-copy { padding: 16px 16px 18px; max-width: none; margin-top: -14px; }
  .hero-logo { height: 66px; margin-bottom: 8px; }
  .eyebrow { margin-bottom: 10px; font-size: 13px; }
  .hero h1 { font-size: clamp(36px, 11vw, 52px); margin-bottom: 10px; }
  .hero .sub { font-size: 16px; }
  .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .hero .actions .btn { padding: 12px 14px; font-size: 19px; }
  .trust { font-size: 13px; margin-top: 12px; }
  .strip, .how { padding: 18px 12px 12px; }
  .section-title { font-size: 24px; margin-bottom: 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .site-foot { padding: 14px 16px; margin: 16px 12px 24px; }
  .landing .site-foot { width: auto; }
  .foot-note { margin-left: 0; }

  /* cards on phones: cover on the left, name + hook + Play on the right (art-source/v3/mock-mobile.png) */
  .card-grid { gap: 20px; }
  .game-card { width: 100%; flex-direction: row; align-items: stretch; border-width: 4px; border-radius: 22px; box-shadow: 0 4px 0 2px var(--ledge-c), var(--float); }
  .game-card:hover { transform: none; }
  .game-card .cover { flex: 0 0 54%; margin: 6px 0 6px 6px; aspect-ratio: 16 / 11; border-radius: 13px; align-self: center; }
  .game-card .meta { flex: 1; min-width: 0; align-content: center; padding: 6px 8px 8px; }
  .game-card h3 { font-size: clamp(18px, 5.6vw, 23px); line-height: 1.05; }
  .game-card p { font-size: 13.5px; margin: 3px 0 8px; }
  .card-actions { gap: 4px; flex-direction: column; }
  .play-btn { min-width: 0; width: 100%; font-size: 19px; padding: 5px 10px; }
  .try-link, .free-tag { font-size: 12.5px; }
  .tile-help { top: 10px; left: 10px; width: 30px; height: 30px; }
  .tile-help img { width: 20px; height: 20px; }

  /* the stake chips on phones: one scrolling row */
  .stakes { display: flex; gap: 6px; overflow-x: auto; position: relative; padding: 2px 2px 5px; scrollbar-width: none; }
  .stakes::-webkit-scrollbar { display: none; }
  .stakes button { flex-shrink: 0; padding: 3px 11px 4px; border-radius: 999px; }
  .stakes button b { font-size: 16px; }
  .stakes button small { font-size: 10px; }
  .stakes .usd-part { display: none; }
  .ss-main { font-size: 21px; }
  .ss-tok { font-size: 13px; }
  .ss-win { margin: 0 0 0 auto; font-size: 13px; }
  .ss-win b { font-size: 16px; }
  .warn { grid-column: 1 / -1; margin: 0; }
  .demo-balance { margin: 0; padding: 5px 6px; }
  .demo-balance img { width: 26px; height: 26px; }
  .demo-balance b { font-size: 17px; }
  .page-head h1 { font-size: 24px; padding: 4px 16px 6px; }
  .sticker-note { font-size: 13.5px; margin-top: 8px; }
  .lead.sticker-note { display: none; }

  .board { padding: 10px 10px 40px; }
  .board-card { padding: 10px 8px 12px; }
  .b-row { grid-template-columns: 26px 28px 34px minmax(0, 1fr) 46px; gap: 7px; padding: 8px 4px; }
  .b-row .avatar { --size: 34px; }
  .b-row .place { font-size: 15px; }
  .b-row .b-matches { display: none; }
  .b-rate { font-size: 17px; }
  .rank-badge.big { width: 24px; height: 32px; }
  .rank-badge.big b { font-size: 13px; }
  .rank-space { width: 24px; }
  .b-name b { font-size: 15px; }
  .b-name .team-badge { font-size: 11px; padding: 0 7px; }

  dialog { padding: 18px 16px; }
  dialog h2 { font-size: 24px; }
  .modal-head { min-height: 56px; padding: 8px 10px 8px 16px; }
  .modal-head h2 { font-size: 22px; }
  .modal-x { width: 38px; height: 38px; }
  .modal-body { padding: 14px 16px 18px; }
  .modal-foot { padding: 10px 16px 12px; }
  .customizer .modal-body { gap: 10px; padding-top: 12px; }
  .species-toggle button { font-size: 17px; }
  .species-toggle .avatar { --size: 30px; }
  .cust-stage { height: clamp(220px, calc(100dvh - 345px), 400px); }
  .cust-side { width: 72px; }
  .cust-arrow { width: 40px; height: 40px; }
  .cust-cap { font-size: 11.5px; padding: 1px 5px 2px; }
  .cust-cap.slot { font-size: 10px; }
  .customizer .modal-foot .btn { flex: 1; }
  .stat-grid { gap: 6px; }
  .stat-grid div { padding: 6px 2px; }
  .stat-grid b { font-size: 21px; }
  .stat-grid span { font-size: 11px; }
  .prof-hero { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
  .prof-stage { height: 200px; }
  .prof-top { padding: 8px 10px; gap: 6px; }
  .prof-top h3 { font-size: 15px; }
  .top-game b { font-size: 14px; }
  .top-game span { font-size: 12px; }
  .history { padding: 2px 12px; }
  .history li { grid-template-columns: 60px 1fr auto; gap: 10px; }
  .history .h-opp { display: block; grid-column: 2; grid-row: 2; font-size: 13px; }
  .history .h-time { display: block; grid-column: 3; grid-row: 2; font-size: 13px; }
  .history .h-game { min-width: 0; }
  .history .pill { grid-row: span 2; }
  .history .h-delta { text-align: right; }
  .history.compact { padding: 0; }
  #dlgResult .btn { padding: 11px 6px; font-size: 17px; }

  /* match HUD on phones: Back, title + stake, the round buttons; the score on its own row */
  .brand:has(~ .match-info:not(.hidden)) { display: none; }
  .pot-extra { display: none; }
  .result-kicker { font-size: 12px; letter-spacing: .04em; }
  body[data-view="match"] .topbar { flex-wrap: wrap; gap: 6px 6px; margin: 6px 6px 4px; padding: 0; min-height: 0; }
  .back-btn { height: 36px; width: 36px; padding: 0; justify-content: center; }
  .back-btn .lbl { display: none; }
  .back-btn svg { width: 20px; height: 20px; }
  .match-info { flex: 1 1 0; padding: 2px 12px 3px; border-radius: 18px; }
  .match-info .title { font-size: 15.5px; max-width: 100%; }
  .match-info .t-long { display: none; }
  .match-info .t-short { display: inline; }
  .match-info .pot-sub { display: block; font-size: 11.5px; max-width: 100%; }
  .match-info .pot b { font-size: 12.5px; }
  .match-stake { display: none; }
  .match-actions { gap: 6px; }
  body[data-view="match"] .match-actions .rules-link.book { display: none; }
  .scout-btn { padding: 2px 7px; font-size: 11px; }
}
/* short phones: the controls and hint must fit without scrolling */
@media (max-width: 860px) and (max-height: 760px) {
  :root { --bar-h: 60px; --bar-in: 46px; }
  .topbar { padding-top: 3px; padding-bottom: 3px; }
  .hero-logo { height: 52px; }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 15px; }
}
@media (max-width: 400px) {
  .topbar { gap: 5px 4px; padding-left: 8px; }
  .wallet-chip { padding-right: 8px; }
  .online-chip { padding: 2px 6px; gap: 4px; }
  .online-chip:has(~ #topConnect:not(.hidden)) { display: none; } /* (dev / admins only) a guest bar keeps one row */
  .brand:has(~ .wallet-chip:not(.hidden)) .brand-logo, .brand:has(~ .demo-chip:not(.hidden)) .brand-logo { height: 46px; margin: -5px 0; }
  .wallet-chip:not(.hidden) ~ #walletBtn { display: none; } /* the balance pill opens the wallet */
  .avatar.me-avatar { --size: 32px; }
  .modal-head h2 { font-size: 20px; }
  #dlgResult .btn { font-size: 16px; white-space: nowrap; }
  /* Connect as a round wallet button, so a guest's bar (balance, your head, Connect, options, sound) fits one row */
  #topConnect { width: 36px; height: 36px; padding: 0; flex-shrink: 0; }
  #topConnect img { margin: 0; }
  #topConnect .lbl { display: none; }
  .game-card .cover { flex-basis: 50%; }
  .game-card h3 { font-size: 18px; }
  .play-btn { font-size: 17px; }
}
/* ---------- the Play page: the same for real matches and the demo ----------
   One panel: the game tiles to tick on the left, the stake (with the Real | Demo switch), the summary and the big button
   on the right; then Challenge a friend, recent matches and the leaderboard's top 5. Phones: one column. */
.play-page { max-width: 1400px; margin: 0 auto; padding: 18px clamp(12px, 2.5vw, 36px) 48px; display: grid; gap: 22px; }
.play-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: 'games side' 'ch side'; grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: hidden; }
.play-games { grid-area: games; padding: 20px 22px 6px; min-width: 0; }
.play-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; border-left: 2px dashed var(--ink-soft); min-width: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.play-title, .play-side h2 { font: 700 clamp(24px, 2.2vw, 30px)/1.1 var(--font-display); margin: 0; }
.chip-all {
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--edge); background: var(--ui-cream); color: var(--ui-ink);
  font: 600 16px/1.2 var(--font-display);
}
.chip-all[aria-pressed="true"] { background: var(--pick-bg); color: var(--pick-fg); }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ptile { position: relative; min-width: 0; }
.ptile-pick {
  position: relative; display: grid; width: 100%; padding: 0; overflow: hidden; text-align: left; color: var(--ui-ink);
  background: var(--ui-cream); border: var(--ink-line); border-radius: var(--r-md); box-shadow: var(--ledge-sm);
  transition: transform .12s ease, background .15s;
}
.ptile-pick:hover { transform: translateY(-2px); }
.ptile-pick:active { transform: translateY(1px); }
.ptile-pick[aria-pressed="false"] .tile-cover { filter: grayscale(.55) brightness(.92); }
.ptile-pick[aria-pressed="false"] .tile-meta { opacity: .75; }
.ptile-pick[aria-pressed="true"] { background: var(--ui-cream-2); outline: 3px solid var(--pick-bg); outline-offset: 0; }
.ptile-check {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-cream); border: 2px solid var(--edge);
}
.ptile-check svg { width: 20px; height: 20px; fill: none; stroke: transparent; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ptile-pick[aria-pressed="true"] .ptile-check { background: var(--pick-bg); }
.ptile-pick[aria-pressed="true"] .ptile-check svg { stroke: var(--pick-fg); }
.ptile .tile-help { top: 10px; left: 10px; width: 32px; height: 32px; }
.ptile .tile-help img { width: 22px; height: 22px; }
.tile-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--ui-cream-2); border-bottom: var(--ink-line); }
.tile-cover img, .tile-cover .scene-host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-meta { display: grid; gap: 2px; padding: 8px 12px 10px; }
.tile-meta b { font: 700 20px/1.1 var(--font-display); }
.tile-meta small { color: var(--ui-ink-2); font-size: 14px; font-weight: 700; }
.play-games > .note { margin-top: 12px; }
.mode-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 2px solid var(--edge); background: var(--ui-cream-2); }
.mode-switch button {
  padding: 5px 16px; border: 0; border-radius: 999px; background: none; color: var(--ui-ink-2); font: 600 16px/1.2 var(--font-display);
}
.mode-switch button[aria-checked="true"] { background: var(--pick-bg); color: var(--pick-fg); }
.play-page[data-mode="demo"] .mode-switch button[aria-checked="true"] { background: var(--ui-sun); color: var(--ui-ink); }
.play-side .demo-balance { margin: 0; }
.pstakes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.play-page[data-mode="demo"] .pstakes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.play-sum { margin: 2px 0 0; }
.play-sum .ss-main { font-size: 36px; }
.play-sum .ss-tok { font-size: 15px; }
.play-sum .ss-win { margin-top: 6px; font-size: 16px; }
.play-sum .ss-win b { font-size: 21px; }
.play-side .warn { margin: 0; }
.play-go { width: 100%; justify-content: center; font-size: 22px; padding: 13px 20px; margin-top: auto; }
.play-go img[data-asset="icon-play"] { width: 18px; height: 18px; }
.play-side .note { margin: 0; font-size: 13px; }
.play-side .dev-guest { margin: 0; align-self: center; }

.lobby-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lobby-row > .card-panel { padding: 16px 18px 18px; min-width: 0; }
.lobby-row h2 { font-size: 22px; margin: 0 0 4px; }
/* Challenge a friend: a strip under the game tiles (phones: under the big button) */
.ch-panel { grid-area: ch; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
  margin: 10px 22px 20px; padding: 14px 18px; border-radius: var(--r-md); background: var(--ui-cream-2); border: 2px solid var(--edge); }
.ch-panel h2 { grid-column: 1; margin: 0; font: 700 22px/1.1 var(--font-display); }
.ch-panel .note { grid-column: 1; margin: 0; }
.ch-panel .ch-open { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: auto; padding-left: 22px; padding-right: 22px; }
.recent .history { padding: 0; margin-top: 8px; }
.lb-top { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 2px; }
.lb-top li.empty { color: var(--ui-ink-2); font-size: 14px; padding: 6px 0; }
.lb-row {
  width: 100%; display: grid; grid-template-columns: 22px 30px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 12px; border: 0; background: none; color: var(--ui-ink); text-align: left;
}
.lb-row:hover { background: var(--ui-cream-2); }
.lb-row .place { font: 700 17px var(--font-display); text-align: center; }
.lb-row .rank-space { width: 30px; }
.lb-row .avatar { width: 34px; height: 34px; }
.lb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rate { font: 700 16px var(--font-display); color: var(--ui-win); }
.lobby-foot { justify-content: center; text-align: center; }

@media (max-width: 1100px) {
  .play-panel { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  .play-page { padding: 10px 10px 36px; gap: 14px; }
  .play-panel { grid-template-columns: 1fr; grid-template-areas: 'games' 'side' 'ch'; grid-template-rows: auto; }
  .ch-panel { margin: 0 12px 14px; padding: 12px; grid-template-columns: 1fr; }
  .ch-panel .ch-open { grid-column: 1; grid-row: auto; width: 100%; margin-top: 8px; }
  .play-games { padding: 14px 12px 12px; }
  .play-side { border-left: 0; border-top: 2px dashed var(--ink-soft); padding: 14px 12px 16px; gap: 10px; }
  .sec-head { margin-bottom: 10px; }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-meta { padding: 6px 9px 8px; }
  .tile-meta b { font-size: 16px; }
  .tile-meta small { font-size: 12px; }
  .ptile-check { top: 6px; right: 6px; width: 26px; height: 26px; }
  .ptile-check svg { width: 16px; height: 16px; }
  .ptile .tile-help { top: 6px; left: 6px; width: 26px; height: 26px; }
  .ptile .tile-help img { width: 18px; height: 18px; }
  .play-games > .note { display: none; }
  .play-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
  .play-sum .ss-main { font-size: 24px; }
  .play-sum .ss-tok { font-size: 13px; }
  .play-sum .ss-win { margin: 0 0 0 auto; font-size: 13px; }
  .play-sum .ss-win b { font-size: 16px; }
  .play-go { font-size: 20px; padding: 11px 14px; }
  .mode-switch button { padding: 4px 13px; font-size: 15px; }
  .lobby-row { grid-template-columns: 1fr; gap: 14px; }
}

/* very narrow bars: a slightly smaller logo, and no room for the admin-only online chip */
@media (max-width: 380px) {
  .brand .brand-logo, .brand:has(~ .wallet-chip:not(.hidden)) .brand-logo { height: 40px; margin: -3px 0; }
  .online-chip { display: none !important; }   /* admins only: no room next to the logo on the narrowest phones */
}
/* ---------- challenge a friend: the dialog (#dlgChallenge) and the card a friend sees (#dlgChallengeCard) ---------- */
.ch-open { margin-top: 10px; }
[data-challenge] { position: relative; }
[data-challenge][data-news]:not([data-news=""])::after {
  content: attr(data-news); position: absolute; top: -7px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font: 700 13px/1 var(--font-display); background: var(--ui-play); color: var(--ui-on-play); border: 2px solid var(--edge);
}
.ch-h { margin: 14px 0 0; font: 600 18px/1.2 var(--font-display); color: var(--ui-ink); }
#chForm .ch-h:first-of-type { margin-top: 0; }
.ch-for { margin-top: 0; font-weight: 700; color: var(--ui-ink); }
.ch-games { margin: 8px 0 0; }
.ch-stakes { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
.ch-stakes button:disabled { opacity: .5; cursor: not-allowed; }
.ch-sum { display: grid; gap: 1px; margin: 10px 0 0; min-width: 0; }
.ch-sum .ss-main { font-size: 28px; }
.ch-as { margin-top: 12px; }
.ch-ready { margin: 0 0 10px; color: var(--ui-ink); font-size: 16px; }
.ch-link { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.ch-link input { flex: 1; min-width: 0; margin: 0; font: 600 15px/1.2 var(--font-body); }
.ch-share { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-share a { text-decoration: none; }
.ch-mine { margin-top: 18px; padding-top: 6px; border-top: 2px dashed var(--ink-soft); }
.ch-list { list-style: none; padding: 0 !important; margin: 8px 0 0; display: grid; gap: 6px; }
.ch-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 !important;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--ui-cream-2); border: 2px solid var(--edge); }
.ch-item .pill { border-radius: 999px; text-align: center; padding: 2px 0; font: 600 13px/1.3 var(--font-display); color: var(--ui-ink); border: 2px solid var(--edge); background: var(--ui-cream); }
.ch-item.st-accepted .pill { background: var(--ui-win); color: var(--ui-on-play); }
.ch-item.st-cancelled, .ch-item.st-expired, .ch-item.st-started { opacity: .7; }
.ch-what { display: grid; min-width: 0; }
.ch-what b { font: 600 16px/1.2 var(--font-display); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-what small { font-size: 13px; font-weight: 700; color: var(--ui-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ch-acts .rules-link { margin: 0; }
#dlgChallenge .modal-foot, #dlgChallengeCard .modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
#dlgChallengeCard .modal-foot .rules-link { margin-right: auto; }
.cc-hero { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px; align-items: center; }
.cc-stage { height: 230px; border-radius: var(--r-md); background: var(--ui-cream-2); border: 2px solid var(--edge); overflow: hidden; }
.cc-rig, .cc-rig svg { width: 100%; height: 100%; display: block; }
.cc-kicker { margin: 0; font-size: 13px; font-weight: 700; color: var(--ui-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cc-name { margin: 0 0 8px; font: 700 28px/1.1 var(--font-display); color: var(--ui-ink); overflow-wrap: anywhere; }
.cc-games { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-game { display: grid; gap: 3px; width: 96px; }
.cc-game b { font: 600 14px/1.15 var(--font-display); color: var(--ui-ink); }
.cc-cover { display: block; width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 2px solid var(--edge); background: var(--ui-cream-2); }
.cc-pick { margin-top: 6px; font-size: 13px; }
.cc-msg { margin: 14px 0 0; color: var(--ui-ink); font-size: 16px; }
.cc-wait { display: flex; gap: 10px; align-items: center; }
.cc-spin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ink-soft); border-top-color: var(--ui-play); animation: ccSpin 0.9s linear infinite; }
@keyframes ccSpin { to { transform: rotate(360deg); } }
.cc-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; padding: 10px; border-radius: var(--r-sm); background: var(--ui-cream-2); border: 2px solid var(--edge); }
.cc-me label { margin-top: 0; }
.cc-me input { margin: 0; }
.cc-me-head .avatar { width: 46px; height: 46px; }
.prof-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@media (max-width: 560px) {
  .ch-stakes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-item { grid-template-columns: 78px minmax(0, 1fr); }
  .ch-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .cc-hero { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; }
  .cc-stage { height: 180px; }
  .cc-name { font-size: 22px; }
  .cc-game, .cc-cover { width: 76px; }
  .cc-me { grid-template-columns: auto minmax(0, 1fr); }
  .cc-me .btn { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .game-card:hover, .btn:hover:not(:disabled), .round-btn:hover { transform: none; }
}