/* The game stage: the playful look of the whole site, light or dark (docs/design.md, "Themes"). Puzzles switch to the calmer study
   room (body.study, set by the puzzle pages). Colours come from the --arcade-*, --tier-* and --study tokens in
   styles.css. Everything that moves stops under prefers-reduced-motion (bottom of this file). */

body {
  background: radial-gradient(ellipse at 50% -10%, var(--arcade-glow) 0%, var(--arcade-2) 45%, var(--arcade) 80%) fixed;
  background-color: var(--arcade);
  color: var(--arcade-ink);
}
/* Graph paper behind everything: the same grid in both themes (docs/design.md, "Background"). On the light theme it's
   an indigo tint at low alpha that fades out from the top, so long pages stay calm where people read. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgb(var(--grid-rgb) / var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--grid-rgb) / var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}
body main, body .foot, body #banner { position: relative; z-index: 1; }
/* main above the footer: on phones the Play the 60-second round button is fixed to the bottom of the screen from inside
   main, and the footer (later in the page, same layer) used to cover it and swallow taps once you scrolled down. */
body main { z-index: 2; }
body .topbar { z-index: 20; }
body .topbar { background: color-mix(in srgb, var(--arcade) 82%, transparent); border-bottom-color: rgb(var(--line-rgb) / .12); }
body .wordmark, body .wordmark:hover { color: var(--head); }
body .top nav a { color: var(--arcade-muted); }
body .top nav a:hover, body .top nav a[aria-current="page"] { color: var(--head); background: rgb(var(--hl) / .08); }
body .me { color: var(--arcade-muted); }
body .me .signin { color: var(--head); border: 1px solid rgb(var(--hl) / .2); border-radius: 999px; }
body .me .signin:hover { background: rgb(var(--hl) / .08); }
body .foot { background: transparent; border-top-color: rgb(var(--line-rgb) / .12); color: var(--arcade-faint); }
body .foot a { color: var(--arcade-muted); }
/* The signed-out landing page: one game, one button. The nav keeps only Games. */

body .btn.ghost { background: transparent; color: var(--head); border-color: rgb(var(--hl) / .25); }
body .btn.ghost:hover { background: rgb(var(--hl) / .08); color: var(--head); }
body .btn.quiet { color: var(--arcade-accent-soft); }
body .btn.quiet:hover { background: rgb(var(--hl) / .06); color: var(--head); }
body .save-card { background: var(--arcade-card); border-color: var(--arcade-line); color: var(--arcade-ink); }


/* ---------- the study room: puzzles, for serious players ---------- */
body.study { background: var(--study); color: var(--study-ink); }
body.study::before { display: none; }
body.study main h1, body.study main h2, body.study .puzzle-title, body.study .q-statement {
  font-family: "Newsreader", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--study-head); }
body.study .card, body.study .section { background: rgb(var(--hl) / .025); border-color: rgb(var(--line-rgb) / .18); box-shadow: none; }

/* ---------- header ---------- */
.top nav a[aria-current="page"] { color: var(--head); background: color-mix(in srgb, var(--arcade-accent) 22%, transparent);
  box-shadow: inset 0 -2px 0 var(--arcade-accent); }
.streak-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font-weight: 800;
  font-size: .85rem; background: color-mix(in srgb, var(--arcade-flame) 16%, transparent); color: var(--arcade-close); }
.tier-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  font-size: .8rem; font-weight: 800; color: var(--tier); background: color-mix(in srgb, var(--tier) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); }
.tier-chip b { color: var(--head); font-variant-numeric: tabular-nums; }
.gem { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; transform: rotate(45deg); flex: none;
  background: var(--tier); box-shadow: 0 0 10px color-mix(in srgb, var(--tier) 60%, transparent); }
.tier-unrated .gem { background: transparent; border: 2px dashed var(--tier); box-shadow: none; }
.tier-name { color: var(--tier); font-weight: 800; }
.tier-grandmaster { --tier: var(--tier-grandmaster); } .tier-master { --tier: var(--tier-master); }
.tier-quant { --tier: var(--tier-quant); } .tier-senior-trader { --tier: var(--tier-senior-trader); }
.tier-trader { --tier: var(--tier-trader); } .tier-analyst { --tier: var(--tier-analyst); }
.tier-rookie { --tier: var(--tier-rookie); } .tier-unrated { --tier: var(--tier-unrated); }
.tier-grandmaster .gem { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- the hero: copy and the main button on the left, the game on the right ---------- */
.arcade-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem;
  min-height: calc(100vh - 9rem); padding: 1rem 0 2rem; }
.hero-copy { flex: 1 1 22rem; max-width: 29rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hero-copy h1 { margin: 0; font-size: clamp(2.5rem, 4.4vw, 3.9rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 850; color: var(--head); }
.shine { background: linear-gradient(90deg, var(--head) 0%, var(--arcade-accent-pale) 25%, var(--head) 50%, var(--arcade-accent-pale) 75%, var(--head) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shine 6s linear infinite; }
.game-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 750;
  background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-soft); }
.hero-sub { margin: 0; font-size: 1.1rem; color: var(--arcade-muted); line-height: 1.5; }
.hero-fine { margin: 0; font-size: .9rem; color: var(--arcade-faint); }
.hero-fine b { color: var(--arcade-ink); }
.hero-hi { font-size: 1rem; font-weight: 600; color: var(--arcade-muted); }
.btn.play-cta { font-size: 1.25rem; font-weight: 850; padding: 1.15rem 2.2rem; border-radius: 18px; border: 0; margin-top: .3rem;
  background: var(--arcade-accent); color: #fff; animation: glow 2.2s ease-in-out infinite; transition: transform .15s ease; }
.btn.play-cta:hover { background: var(--arcade-accent); color: #fff; transform: translateY(-3px) scale(1.02); }
/* A high-contrast button on the stage: white on dark, ink on light. */
.btn.light { background: var(--head); color: var(--arcade); border-color: var(--head); font-weight: 800; }
.btn.light:hover { background: color-mix(in srgb, var(--head) 88%, var(--arcade)); border-color: transparent; color: var(--arcade); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--felt); font-weight: 850; }
.btn.gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--felt); }
.best-card { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-radius: 18px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.best-card span { display: block; font-size: .78rem; font-weight: 750; color: var(--gold-soft); }
.best-card b { font-size: 2.1rem; color: var(--head); line-height: 1.1; }

/* ---------- cards on the stage ---------- */
.stage-card { background: var(--arcade-card); border: 1px solid var(--arcade-line); border-radius: 22px; padding: 1.15rem 1.25rem;
  box-shadow: var(--stage-shadow); color: var(--arcade-ink); }
.stage-card small { display: block; font-size: .75rem; font-weight: 750; color: var(--gold-soft); }

/* The warm-up */
.warmup { flex: 1 1 32rem; max-width: 42rem; min-width: 0; background: var(--arcade-card); border: 1px solid var(--arcade-line);
  border-radius: 28px; padding: 1.25rem; box-shadow: var(--stage-shadow); }
.warmup-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pips { display: flex; gap: .4rem; }
.pip { width: 2.1rem; height: .6rem; border-radius: 999px; background: rgb(var(--line-rgb) / .25); }
.pip.now { background: color-mix(in srgb, var(--arcade-accent-soft) 60%, transparent); }
.pip.gold { background: var(--gold); } .pip.good { background: var(--arcade-good); }
.pip.close { background: var(--arcade-close); } .pip.miss { background: var(--arcade-miss); }
.round-label { margin-right: auto; font-size: .85rem; font-weight: 700; color: var(--arcade-muted); }
.streak-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--arcade-flame) 16%, transparent); color: var(--arcade-close); font-weight: 800; font-size: .85rem; }
.score-chip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .9rem; border-radius: 999px; font-size: .75rem; font-weight: 750;
  background: color-mix(in srgb, var(--arcade-accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--arcade-accent-soft) 40%, transparent); color: var(--arcade-accent-soft); }
.score-chip b { font-size: 1.15rem; color: var(--head); font-variant-numeric: tabular-nums; }
.score-chip.bump { animation: bump .5s ease-out both; }
.plot-box { position: relative; height: clamp(12.5rem, calc(100vh - 27rem), 23.5rem); border-radius: 20px; background: var(--arcade-well);
  border: 1px solid rgb(var(--line-rgb) / .12); overflow: hidden; }
.plot-box::before, .plot-box::after { content: ""; position: absolute; background: rgb(var(--line-rgb) / .14); }
.plot-box::before { left: 0; right: 0; top: 50%; height: 1px; }
.plot-box::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--arcade-accent-soft);
  box-shadow: 0 0 10px color-mix(in srgb, var(--arcade-accent-soft) 70%, transparent); animation: pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.plus { position: absolute; left: 50%; top: 40%; font-size: 2.75rem; font-weight: 850; font-variant-numeric: tabular-nums; pointer-events: none;
  animation: floatup 1.3s ease-out both; }
.plus.gold, .verdict.gold { color: var(--gold); } .plus.good, .verdict.good { color: var(--arcade-good); }
.plus.close, .verdict.close { color: var(--arcade-close); } .plus.miss, .verdict.miss { color: var(--arcade-miss); }
.guess-label { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem .3rem .6rem; font-size: .9rem; font-weight: 700; color: var(--arcade-soft); }
.guess-label b { font-size: 1.85rem; color: var(--head); }
.arcade-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; outline: none; margin: 0;
  background: linear-gradient(90deg, var(--arcade-track), var(--arcade-accent) 50%, var(--arcade-track)); }
.arcade-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--chip);
  border: 4px solid #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--chip) 60%, transparent); cursor: grab; }
.arcade-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--chip); border: 4px solid #fff; cursor: grab; }
.arcade-range:focus-visible { outline: 3px solid var(--arcade-accent-soft); outline-offset: 4px; }
.scale { position: relative; display: flex; justify-content: space-between; margin: .5rem .1rem 0; font-size: .75rem; font-weight: 700; color: var(--arcade-dimmer); }
.truth-mark { position: absolute; top: -2.4rem; width: 8px; height: 2.1rem; border-radius: 4px; background: var(--gold); transform: translateX(-50%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 80%, transparent); transition: left .4s cubic-bezier(.2, .9, .3, 1.3); }
.warmup-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; min-height: 3.75rem; }
.warmup-actions .btn { padding: .95rem 1.6rem; font-size: 1.05rem; font-weight: 800; border-radius: 14px; }
.verdict { display: block; font-size: 1.6rem; font-weight: 850; letter-spacing: -0.02em; }
.truth-line { font-size: .9rem; color: var(--arcade-soft); }
.truth-line b { color: var(--gold); }
.muted-line { font-size: .9rem; color: var(--arcade-faint); }
.warmup-done { min-height: clamp(18rem, calc(100vh - 19rem), 30rem); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .9rem; text-align: center; }
.wd-kicker { margin: 0; font-size: .85rem; font-weight: 800; color: var(--arcade-faint); }
.wd-score { margin: 0; font-size: 1.4rem; color: var(--arcade-faint); }
.wd-score b { font-size: 5.5rem; line-height: 1; color: var(--head); font-variant-numeric: tabular-nums; }
.rank-chip { margin: 0; padding: .45rem 1rem; border-radius: 999px; font-weight: 800;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-soft); }

/* ---------- signed-in home ---------- */
.arcade-hero.home { min-height: calc(100vh - 13rem); }
.home-side { flex: 1 1 30rem; max-width: 40rem; min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.cg-head { display: flex; align-items: center; gap: .9rem; }
.cg-head b { color: var(--head); font-size: 1rem; }
.cg-icon { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent); }
.cg-count { margin-left: auto; color: var(--gold-soft) !important; font-size: 1.2rem !important; }
.cg-bar { height: .6rem; border-radius: 999px; background: rgb(var(--line-rgb) / .18); overflow: hidden; margin: .85rem 0 .7rem; }
.cg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); animation: fill 1.1s ease-out both; }
.ts-bar i { background: linear-gradient(90deg, var(--arcade-accent), var(--arcade-accent-soft)); }
.cg-foot { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .85rem; color: var(--arcade-muted); }
.cg-foot a, .waiting-card a { color: var(--arcade-accent-soft); font-weight: 700; text-decoration: none; }
.waiting-card ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.waiting-card li a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid rgb(var(--line-rgb) / .12); color: var(--arcade-ink); }
.waiting-card li small { color: var(--arcade-accent-soft); font-size: .8rem; }
.ts-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.ts-head b { color: var(--head); font-size: 1.05rem; }
.ts-head span { font-size: .85rem; color: var(--arcade-dim); }
.ts-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ts-tile { display: flex; flex-direction: column; gap: .3rem; padding: .8rem; border-radius: 14px; text-decoration: none; color: var(--arcade-ink);
  background: rgb(var(--hl) / .04); border: 1px solid rgb(var(--line-rgb) / .22); transition: transform .18s ease, border-color .18s ease; }
.ts-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--arcade-accent-soft) 55%, transparent); color: var(--head); }
.ts-tile b { font-size: .95rem; color: var(--head); }
.ts-tile span { font-size: .8rem; font-weight: 700; color: var(--arcade-accent-soft); }
.ts-tile.done { background: color-mix(in srgb, var(--good) 14%, transparent); border-color: color-mix(in srgb, var(--arcade-good) 35%, transparent); }
.ts-tile.done span { color: var(--arcade-good); }
body .rack { margin: .9rem 0 0; }
body .rack-chip { background: rgb(var(--line-rgb) / .18); border-color: transparent; }
body .rack li.on .rack-chip { background: var(--arcade-flame); border-color: var(--arcade-flame); }
body .rack li.today .rack-chip { border: 2px dashed var(--arcade-close); background: transparent; }
body .rack-day { color: var(--arcade-dimmer); }
.try-next { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 18px; text-decoration: none; color: var(--arcade-ink);
  background: var(--arcade-card); border: 1px solid rgb(var(--line-rgb) / .2); transition: transform .18s ease, border-color .18s ease; }
.try-next:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--arcade-accent-soft) 55%, transparent); color: var(--arcade-ink); }
.tn-tile { width: 3rem; height: 3rem; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: .7rem; background: var(--market-tile); color: var(--market-ink); }
.try-next small { display: block; font-size: .7rem; font-weight: 800; color: var(--arcade-accent-soft); }
.try-next b { color: var(--head); }
.try-next em { display: block; font-style: normal; font-size: .82rem; color: var(--arcade-dim); }
.tn-time { white-space: nowrap; margin-left: auto; font-size: .85rem; color: var(--arcade-dim); }

/* The contest banner */
.contest-banner { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: 18px; margin-bottom: .5rem; }
.contest-banner.open { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background-size: 200% 100%;
  background-image: linear-gradient(100deg, rgba(240, 180, 41, .16) 0%, rgba(240, 180, 41, .06) 40%, rgba(240, 180, 41, .2) 50%, rgba(240, 180, 41, .06) 60%, rgba(240, 180, 41, .16) 100%);
  animation: shine 8s linear infinite; }
.contest-banner.registered { border: 1px solid color-mix(in srgb, var(--arcade-good) 40%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); }
.contest-banner.live { border: 1px solid color-mix(in srgb, var(--arcade-miss) 60%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--chip) 22%, transparent), color-mix(in srgb, var(--chip) 8%, transparent)); }
.cb-text { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .2rem; }
.cb-text b { color: var(--head); font-size: 1.05rem; }
.cb-text span { font-size: .85rem; color: var(--gold-pale); }
.registered .cb-text span { color: var(--good-pale); } .live .cb-text span { color: var(--miss-pale); }
.cb-count { display: flex; flex-direction: column; align-items: flex-end; }
.cb-count small { font-size: .7rem; font-weight: 800; color: var(--gold-soft); }
.registered .cb-count small { color: var(--arcade-good); } .live .cb-count small { color: var(--arcade-miss); }
.cb-count b { font-size: 1.25rem; color: var(--head); }
.contest-banner .btn { padding: .85rem 1.4rem; border-radius: 12px; }
.contest-banner a:not(.btn) { color: var(--arcade-accent-soft); font-weight: 700; }
.cb-check { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; color: var(--arcade-good);
  background: color-mix(in srgb, var(--good) 25%, transparent); }
.live-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; background: var(--chip);
  color: #fff; font-weight: 850; font-size: .8rem; }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1s ease-in-out infinite; }

/* ---------- the end of a run ---------- */
.run-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: stretch; padding: .5rem 0 2rem; }
.rs-main { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem; }
.rs-side { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.rs-kicker { margin: 0; font-size: .85rem; font-weight: 750; color: var(--arcade-dim); }
.rs-score { position: relative; display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; }
.rs-score b { font-size: clamp(4.5rem, 9vw, 7rem); line-height: .9; color: var(--head); letter-spacing: -0.05em; }
.rs-score > span { font-size: 1.1rem; color: var(--arcade-dim); padding-bottom: .6rem; }
.best-badge { margin-left: auto; align-self: flex-start; padding: .45rem .9rem; border-radius: 999px; background: var(--gold); color: var(--felt);
  font-weight: 850; font-size: .9rem; animation: badge .7s cubic-bezier(.2, .9, .3, 1.4) 1.2s both; }
.rs-prev { margin: 0; color: var(--arcade-dim); }
.save-strip { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 14px; color: var(--gold-soft);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.ss-text { flex: 1 1 13rem; display: flex; flex-direction: column; gap: .1rem; }
.ss-text b { color: var(--gold-pale-2); }
.ss-text span { font-size: .85rem; color: var(--gold-pale); }
.ss-actions { display: flex; align-items: center; gap: .5rem; }
.ss-actions a { color: var(--arcade-accent-soft); font-weight: 700; font-size: .9rem; padding: .5rem .3rem; }
.sso-icon { width: 44px; height: 44px; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.sso-icon:hover { transform: translateY(-2px); }
.sso-icon:focus-visible { outline: 3px solid var(--arcade-accent-soft); outline-offset: 2px; }
.sso-icon.google { background: #fff; }
.sso-icon.github { background: #24292F; color: #fff; }
.sso-icon svg { width: 22px; height: 22px; }
/* You vs the crowd (app/games/crowd.py) */
.rs-crowd { padding: .9rem 1rem 1rem; border-radius: 16px; background: var(--arcade-tile); display: grid; gap: .45rem; }
.rs-crowd small { font-size: .75rem; font-weight: 800; color: var(--arcade-dim); }
.rs-crowd.thin p { margin: 0; font-size: .9rem; color: var(--arcade-dim); line-height: 1.45; }
.rc-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.rc-head b { font-size: 1.9rem; line-height: 1; color: var(--arcade-accent); letter-spacing: -.02em; }
.rs-crowd.elite .rc-head b { color: var(--gold); }
.rc-head span { font-size: .9rem; color: var(--arcade-dim); }
.rc-plot { position: relative; padding-bottom: 1.15rem; }
.rc-chart { width: 100%; height: 4.5rem; display: block; }
.rc-chart rect { fill: rgb(var(--hl) / .16); }
.rc-chart rect.beat { fill: color-mix(in srgb, var(--arcade-accent) 55%, transparent); }
.rc-chart line.you { stroke: var(--arcade-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rc-chart line.you.gold { stroke: var(--gold); }
.rc-plot .you-label { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .75rem; font-weight: 800; color: var(--head); }
.rc-marks { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--arcade-dim); }
.rc-marks b { color: var(--head); }
.rs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.rs-stats div { background: var(--arcade-tile); border-radius: 14px; padding: .75rem .9rem; }
.rs-stats b { display: block; font-size: 1.4rem; color: var(--head); }
.rs-stats span { font-size: .8rem; color: var(--arcade-dim); }
.rs-tip { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; color: var(--arcade-accent-soft);
  background: color-mix(in srgb, var(--arcade-accent) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--arcade-accent-soft) 45%, transparent); }
.rs-tip small { display: block; font-size: .75rem; font-weight: 800; color: var(--arcade-accent-soft); }
.rs-tip span { font-size: .92rem; line-height: 1.5; color: var(--arcade-accent-pale); }
.rs-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.rs-actions .btn { flex: 1 1 10rem; padding: 1rem; border-radius: 14px; font-size: 1.05rem; font-weight: 750; }
.btn.play-again { flex: 2 1 12rem; background: var(--arcade-accent); border: 0; color: #fff; font-size: 1.15rem; font-weight: 850;
  animation: glow 2.2s ease-in-out infinite; }
.btn.play-again:hover { background: var(--arcade-accent); color: #fff; transform: translateY(-2px); }
.rs-side .panel-title { margin-top: 0; }
.rs-side .panel-title h3 { color: var(--head); }
.rs-side .counter { color: var(--arcade-dim); font-size: .8rem; }
.rs-all { align-self: center; color: var(--arcade-muted); font-weight: 600; font-size: .9rem; }

/* ---------- motion ---------- */
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .6), 0 12px 40px -10px rgba(99, 102, 241, .8); }
  50% { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0), 0 12px 40px -10px rgba(99, 102, 241, .8); } }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fill { from { width: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes badge { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }
.dot { transform: translate(-50%, -50%); }

/* ---------- phones: the main button stays on screen ---------- */
@media (max-width: 760px) {
  .arcade-hero { gap: 1.25rem; min-height: 0; padding: .5rem 0 6rem; }
  .hero-copy { align-items: stretch; text-align: center; gap: .75rem; }
  .hero-copy .game-badge, .hero-copy .best-card { align-self: center; }
  .hero-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .btn.play-cta { position: fixed; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; justify-content: center; margin: 0;
    font-size: clamp(1rem, 4.6vw, 1.25rem); padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }   /* one line at 320px */
  .warmup { padding: .9rem; border-radius: 22px; }
  .plot-box { height: clamp(11rem, 42vh, 18rem); }
  .ts-tiles { grid-template-columns: 1fr; }
  .rs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .shine, .btn.play-cta, .btn.play-again, .dot, .plus, .score-chip.bump, .cg-bar i, .contest-banner.open, .live-badge i, .best-badge { animation: none; }
  .shine { color: var(--head) !important; background: none; }
  .plus { opacity: 1; transform: translate(-50%, -50%); }
  .ts-tile, .try-next, .sso-icon, .truth-mark, .btn.play-cta { transition: none; }
}

/* ---------- Games hub ---------- */
.btn.glow { animation: glow 2.2s ease-in-out infinite; }
.games-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.games-head h1 { margin: 0; font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; color: var(--head); }
.games-head p { margin: .35rem 0 0; color: var(--arcade-muted); max-width: 560px; }
.contest-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .08); color: var(--gold-soft); font-weight: 700; font-size: .9rem; }
.contest-pill svg { width: 18px; height: 18px; }
.contest-pill:hover { background: rgba(240, 180, 41, .16); color: var(--gold-soft); }
.games-sec { margin: 0 0 2rem; }
.sec-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sec-head h2, .today-strip h2 { margin: 0; font-size: 1.25rem; color: var(--head); }
.sec-head span, .today-strip > div > span { color: var(--arcade-faint); font-size: .85rem; }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.skill-card { display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: var(--arcade-card);
  border: 1px solid var(--arcade-line); transition: transform .2s ease, border-color .2s ease; }
.skill-card:hover { transform: translateY(-3px); border-color: var(--arcade-accent-soft); }
.skill-card.featured { border: 2px solid rgba(99, 102, 241, .6); box-shadow: 0 0 60px -24px rgba(99, 102, 241, .9); }
.sk-visual { position: relative; height: 170px; background: radial-gradient(ellipse at 50% 30%, var(--arcade-glow), var(--arcade-well)); }
.sk-visual.correlation i { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--arcade-accent-soft); box-shadow: 0 0 8px rgba(165, 180, 252, .7); transform: translate(-50%, -50%); animation: pop .5s ease-out both; }
.sk-visual.correlation i:nth-child(3n) { animation-delay: .1s; } .sk-visual.correlation i:nth-child(3n+1) { animation-delay: .2s; }
.sk-visual.market { overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: linear-gradient(160deg, var(--market-tile), #F3E3B5); color: var(--market-ink); font-weight: 700; }
.sk-visual.market b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 2rem; color: #1A1305; }
.sk-visual.market i { font-style: normal; }
.sk-visual.market .bid { color: #047857; } .sk-visual.market .ask { color: #B91C1C; }
.sk-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.sk-body h3 { margin: 0; font-size: 1.55rem; font-weight: 900; color: var(--head); letter-spacing: -.02em; }
.sk-body p { margin: 0; color: var(--arcade-muted); }
.sk-tags { display: flex; gap: .4rem; }
body .tag { background: rgba(165, 180, 252, .14); color: var(--arcade-accent-soft); font-weight: 700; }
body .tag.gold { background: rgba(240, 180, 41, .16); color: var(--gold-soft); }
body .tag.dim { background: rgb(var(--line-rgb) / .12); color: var(--arcade-dim); }
.sk-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .4rem; }
.sk-actions .level-pick select { background: var(--arcade-well); color: var(--arcade-ink); border-color: var(--arcade-line); }
.sk-best { margin-left: auto; text-align: right; line-height: 1.1; }
.sk-best small { display: block; color: var(--arcade-faint); font-size: .75rem; }
.sk-best b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.5rem; color: var(--head); }
.sk-best b.gold { color: var(--gold-soft); }
.sk-more { font-size: .85rem; color: var(--arcade-faint); }
.today-strip { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1rem 1.2rem; margin: 0 0 2rem;
  border-radius: 18px; background: var(--arcade-card); border: 1px solid var(--arcade-line); }
.today-strip > div:first-child { display: flex; flex-direction: column; gap: .15rem; min-width: 140px; }
.today-strip .ts-tiles { flex: 1; min-width: 260px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.quick-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.quick-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-radius: 18px; text-decoration: none;
  background: var(--arcade-card); border: 1px solid var(--arcade-line); color: var(--arcade-ink); transition: transform .15s ease, border-color .15s ease; }
.quick-tile:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--arcade-accent-soft); color: var(--arcade-ink); }
.quick-tile strong { color: var(--head); font-size: 1.05rem; }
.qt-motif { height: 56px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .3rem;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800; letter-spacing: .08em; font-size: 1.05rem;
  background: rgba(45, 212, 191, .12); color: var(--qt-teal); }
.qt-motif.m1, .qt-motif.m5 { background: rgba(165, 180, 252, .12); color: var(--arcade-accent-soft); }
.qt-motif.m2, .qt-motif.m6 { background: rgba(240, 180, 41, .12); color: var(--gold-soft); }
.qt-motif.m3, .qt-motif.m7 { background: rgba(251, 146, 60, .12); color: var(--arcade-flame); }
.qt-hook { color: var(--arcade-muted); font-size: .88rem; }
.qt-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .4rem; font-size: .78rem; color: var(--arcade-faint); }
.qt-foot b { color: var(--gold-soft); white-space: nowrap; }
@media (max-width: 960px) { .quick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .skill-grid { grid-template-columns: 1fr; } .games-head h1 { font-size: 2rem; } }
@media (max-width: 420px) { .quick-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .btn.glow, .sk-visual.correlation i { animation: none; }
  .skill-card, .quick-tile { transition: none; }
  .skill-card:hover, .quick-tile:hover { transform: none; }
}

/* ---------- Contests ---------- */
body.contests { background: radial-gradient(ellipse at 30% -10%, color-mix(in srgb, var(--gold) 22%, var(--arcade)) 0%, var(--arcade-2) 42%, var(--arcade) 78%) fixed; }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.c-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background-color: var(--arcade-card);
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 40%,
    color-mix(in srgb, var(--gold) 18%, transparent) 50%, transparent 60%, color-mix(in srgb, var(--gold) 14%, transparent) 100%);
  background-size: 200% 100%; animation: sweep 9s linear infinite; }
.c-hero.is-live { border-color: color-mix(in srgb, var(--arcade-miss) 60%, transparent); }
.c-hero.empty { animation: none; align-items: flex-start; }
.c-hero h2 { margin: 0; font-size: 2.4rem; line-height: 1.05; font-weight: 900; letter-spacing: -.035em; color: var(--head); }
.c-hero h2 a { color: inherit; text-decoration: none; }
.c-hero h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.c-hero p { margin: 0; color: var(--gold-pale); }
.c-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.c-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 800; font-size: .82rem;
  background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-soft); }
.c-tag.live { background: color-mix(in srgb, var(--chip) 22%, transparent); color: var(--arcade-miss); }
.c-tag.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); animation: blink 1.2s ease-in-out infinite; }
.c-count { font-weight: 700; font-size: .9rem; color: var(--gold-pale); }
.c-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.c-stages li { display: flex; flex-direction: column; gap: .25rem; padding: .85rem; border-radius: 16px;
  background: color-mix(in srgb, var(--arcade) 55%, transparent); border: 1px solid rgb(var(--line-rgb) / .2); }
.c-stages small { font-weight: 800; color: var(--arcade-dim); font-size: .75rem; }
.c-stages strong { color: var(--head); }
.c-stages span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; color: var(--arcade-soft); }
.c-act { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.c-clock { display: flex; gap: .45rem; }
.c-clock span { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: .45rem .6rem; border-radius: 12px;
  background: color-mix(in srgb, var(--arcade) 75%, transparent); }
.c-clock b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.6rem; color: var(--head); line-height: 1.1; }
.c-clock small { font-size: .7rem; font-weight: 700; color: var(--arcade-dim); }
body .btn.c-cta { background: var(--gold); color: var(--felt); border-color: var(--gold); font-weight: 900; font-size: 1.05rem; padding: .9rem 1.6rem;
  border-radius: 14px; animation: goldpulse 2.2s ease-in-out infinite; }
body .btn.c-cta:hover { background: var(--gold-deep); color: var(--felt); }
.c-hero.is-live .btn.c-cta { background: var(--chip); border-color: var(--chip); color: #fff; }
.c-done { padding: .8rem 1.2rem; border-radius: 14px; font-weight: 800; color: var(--arcade-good);
  background: color-mix(in srgb, var(--arcade-good) 16%, transparent); border: 1px solid color-mix(in srgb, var(--arcade-good) 45%, transparent); }
.c-sub { font-size: .88rem; color: var(--gold-pale); }
.c-hero .error:empty { display: none; }
@keyframes sweep { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes goldpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; } }
@keyframes blink { 50% { opacity: .3; } }

.rank-card { border-radius: 26px; padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; background: var(--arcade-card);
  border: 2px solid color-mix(in srgb, var(--tier) 45%, transparent); box-shadow: 0 0 50px -20px color-mix(in srgb, var(--tier) 70%, transparent); }
.rank-card h2 { margin: 0; font-size: .9rem; color: var(--arcade-dim); }
.rk-main { display: flex; align-items: center; gap: 1.1rem; }
.gem.big { width: 2.6rem; height: 2.6rem; border-radius: 12px; margin: 0 .35rem; box-shadow: 0 0 24px color-mix(in srgb, var(--tier) 70%, transparent); }
.rk-main .tier-name { display: block; font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.rk-rating { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.35rem; font-weight: 800; color: var(--head); }
.rk-meta { font-size: .85rem; color: var(--arcade-dim); }
.rk-next { display: flex; justify-content: space-between; margin: 0; font-size: .85rem; font-weight: 700; color: var(--arcade-soft); }
.rk-bar { height: 10px; border-radius: 5px; background: rgb(var(--line-rgb) / .18); overflow: hidden; margin-top: -.5rem; }
.rk-bar i { display: block; height: 100%; border-radius: 5px; background: var(--tier); animation: grow 1.1s ease-out both; }
.rk-deltas { display: flex; align-items: flex-end; gap: .35rem; height: 52px; }
.rk-deltas i { flex: 1; max-width: 36px; border-radius: 4px 4px 0 0; opacity: .85; }
.rk-deltas .up { background: var(--arcade-good); } .rk-deltas .down { background: var(--arcade-miss); }
.rk-pitch { margin: 0; color: var(--arcade-soft); }
.rk-ladder { display: flex; align-items: center; gap: .9rem; padding: .3rem .4rem; }
.rk-ladder .gem { width: .9rem; height: .9rem; }
.rank-card .btn.ghost { align-self: flex-start; }
.how-ranks summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--arcade-accent-soft); }
.how-ranks p { font-size: .85rem; color: var(--arcade-muted); margin: .6rem 0; }
.how-ranks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.how-ranks li { display: grid; grid-template-columns: 1.2rem 1fr auto; align-items: center; gap: .4rem; font-size: .88rem; }
.how-ranks li > span:last-child { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--arcade-dim); font-size: .8rem; }
@keyframes grow { from { width: 0; } }

.c-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.c-more a { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 16px; text-decoration: none;
  background: var(--arcade-card); border: 1px solid var(--arcade-line); color: var(--arcade-muted); }
.c-more a strong { color: var(--head); }
.c-more a:hover { border-color: var(--arcade-accent-soft); }
.past { border-radius: 22px; background: var(--arcade-card); border: 1px solid rgb(var(--line-rgb) / .18); overflow: hidden; margin-bottom: 2rem; }
.past .sec-head { padding: 1.1rem 1.25rem .5rem; margin: 0; }
.past-row { display: grid; grid-template-columns: 2fr 1fr .8fr .8fr 6.5rem; gap: .8rem; align-items: center; padding: .85rem 1.25rem;
  border-top: 1px solid rgb(var(--line-rgb) / .1); text-decoration: none; color: var(--arcade-ink); transition: background .15s ease; }
a.past-row:hover { background: rgb(var(--hl) / .04); color: var(--arcade-ink); }
.past-row strong { color: var(--head); }
.past-row.head { font-size: .78rem; font-weight: 800; color: var(--arcade-dimmer); padding-top: .6rem; padding-bottom: .6rem; }
.past-row .num { font-family: "JetBrains Mono", ui-monospace, monospace; }
.past-row .up { color: var(--arcade-good); font-weight: 800; } .past-row .down { color: var(--arcade-miss); font-weight: 800; }
.winner { display: inline-flex; align-items: center; gap: .5rem; }
.c-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.c-rules div { padding: 1rem; border-radius: 16px; background: color-mix(in srgb, var(--arcade-card) 75%, transparent); border: 1px solid rgb(var(--line-rgb) / .16); }
.c-rules strong { display: block; color: var(--head); margin-bottom: .3rem; }
.c-rules span { font-size: .85rem; color: var(--arcade-muted); line-height: 1.45; }

/* Contest page: ranks on the leaderboard and the podium */
.contest-board td .gem { margin-right: .45rem; vertical-align: middle; }
.contest-board td .tier-name a { color: inherit; }
.podium { list-style: none; margin: .5rem 0 1.2rem; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: .7rem; }
.podium li { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 150px; text-align: center; }
.podium .tier-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .num { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--arcade-soft); }
.podium .step { width: 100%; display: grid; place-items: center; line-height: 1; border-radius: 12px 12px 0 0; font-weight: 900; font-size: 1.4rem; color: var(--felt);
  background: var(--arcade-dim); }
.podium .p1 .step { height: 90px; background: var(--gold); }
.podium .p2 .step { height: 64px; background: var(--arcade-soft); }
.podium .p3 .step { height: 52px; background: var(--arcade-flame); }
.podium .p1 .gem { width: 1rem; height: 1rem; }
/* Unrated players' names stay readable on boards; only the dashed gem marks them */
.contest-board .tier-unrated .tier-name, .podium .tier-unrated .tier-name, .winner.tier-unrated .tier-name { color: var(--head); }
.rk-cap { font-size: .75rem; color: var(--arcade-dim); margin-bottom: -.5rem; }

@media (max-width: 900px) {
  .c-grid { grid-template-columns: 1fr; }
  .c-rules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .c-hero h2 { font-size: 1.8rem; }
  .c-clock span { min-width: 46px; } .c-clock b { font-size: 1.3rem; }
  .past-row { grid-template-columns: 1.6fr .8fr 6rem; }
  .past-row > :nth-child(2), .past-row > :nth-child(4) { display: none; }
  .c-rules { grid-template-columns: 1fr; }
  .podium li { width: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero, .btn.c-cta, .c-tag.live i, .rk-bar i { animation: none; }
  .past-row { transition: none; }
}

/* ---------- You (#/profile): rating, games, puzzles, the deep dive, settings ---------- */
.pf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 1.2rem; margin: .5rem 0 2rem; }
.pf-card { position: relative; overflow: hidden; border-radius: 26px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tier) 26%, transparent), var(--arcade-card) 55%);
  border: 2px solid color-mix(in srgb, var(--tier) 50%, transparent); box-shadow: 0 0 60px -22px color-mix(in srgb, var(--tier) 70%, transparent); }
.pf-who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.pf-who h1 { margin: 0; font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; color: var(--head); overflow-wrap: anywhere; }
.pf-av { box-shadow: 0 0 0 4px var(--arcade), 0 0 0 7px var(--tier); }
.pf-sub { margin: .15rem 0 0; color: var(--arcade-muted); font-size: .92rem; }
.pf-bio { margin: 0; color: var(--arcade-soft); }
.pf-rank { display: flex; align-items: center; gap: 1rem; }
.pf-rank .tier-name { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.pf-rating { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.2rem; font-weight: 800; color: var(--head); }
.pf-meta { font-size: .85rem; color: var(--arcade-dim); }
.pf-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-badge { padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--arcade-accent-soft);
  background: color-mix(in srgb, var(--arcade-accent-soft) 14%, transparent); }
.pf-badge.good { color: var(--arcade-good); background: color-mix(in srgb, var(--arcade-good) 14%, transparent); }
.pf-badge.flame { color: var(--arcade-flame); background: color-mix(in srgb, var(--arcade-flame) 14%, transparent); }
.pf-badge.gold { color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pf-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
body .btn.pf-share { background: var(--tier); border-color: var(--tier); color: var(--arcade); font-weight: 900; }
.tier-unrated .btn.pf-share { background: var(--arcade-accent); border-color: var(--arcade-accent); color: #fff; }

.pf-panel { border-radius: 26px; padding: 1.3rem 1.4rem; background: var(--arcade-card); border: 1px solid var(--arcade-line);
  display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.pf-panel h2 { margin: 0; font-size: 1.15rem; color: var(--head); }
.pf-panel .sec-head { margin: 0; justify-content: space-between; }
.pf-panel.empty p { margin: 0; color: var(--arcade-muted); }
.pf-panel.empty .btn { align-self: flex-start; }
.pf-chart { width: 100%; height: auto; display: block; }
.pf-chart polyline { fill: none; stroke: var(--head); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 2000; animation: draw 1.6s ease-out both; }
.pf-chart circle { fill: var(--tier, var(--arcade-accent-soft)); stroke: var(--arcade); stroke-width: 2; }
.pf-chart .band-label { font: 700 12px Inter, system-ui, sans-serif; }
@keyframes draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.pf-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pf-hist a { display: grid; grid-template-columns: 1fr auto 4rem; gap: .8rem; align-items: center; padding: .45rem .4rem; border-radius: 10px;
  text-decoration: none; color: var(--arcade-ink); font-size: .9rem; }
.pf-hist a:hover { background: rgb(var(--hl) / .04); color: var(--head); }
.pf-hist b { text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; }
.pf-hist .up { color: var(--arcade-good); } .pf-hist .down { color: var(--arcade-miss); }

.pf-sec { margin: 0 0 2.2rem; }
/* The quant profile (skillProfile in app.js): five scores out of 100 under the player card */
.pf-top > .qp { grid-column: 1 / -1; margin: .6rem 0 0; }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .9rem; }
.qp-skill { display: grid; gap: .45rem; padding: 1.1rem 1.2rem 1.15rem; border-radius: 20px; background: var(--arcade-card);
  border: 1px solid var(--arcade-line); color: var(--arcade-ink); text-decoration: none; min-width: 0; }
.qp-label { min-height: 1.45rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; font-weight: 700; color: var(--arcade-muted); }
.qp-label em { font-style: normal; font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px;
  color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.qp-score { display: flex; align-items: baseline; gap: .3rem; }
.qp-score b { font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--head); }
.qp-score small { font-size: 1rem; color: var(--arcade-dim); }
.qp-top { margin-left: auto; font-size: .78rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px;
  color: var(--arcade-accent-soft); background: color-mix(in srgb, var(--arcade-accent-soft) 14%, transparent); }
.qp-bar { height: .5rem; border-radius: 999px; background: rgb(var(--hl) / .08); overflow: hidden; }
.qp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--arcade-accent); }
.qp-skill.best .qp-bar i { background: var(--gold); }
.qp-note { font-size: .8rem; color: var(--arcade-dim); line-height: 1.35; }
.qp-skill.locked { border-style: dashed; transition: border-color .15s ease; }
.qp-skill.locked:hover { border-color: var(--arcade-accent-soft); }
.qp-skill.locked .qp-score b { color: var(--arcade-faint); font-weight: 700; }
.qp-skill.locked .qp-bar i { width: 0; }
.qp-skill.locked .qp-note { color: var(--arcade-accent-soft); font-weight: 700; }
.qp-how { margin-top: .8rem; font-size: .88rem; color: var(--arcade-muted); }
.qp-how summary { cursor: pointer; font-weight: 700; color: var(--arcade-accent-soft); }
.qp-how p { margin: .5rem 0 0; max-width: 46rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) { .qp-bar i { animation: qp-grow .9s ease-out both; } }
@keyframes qp-grow { from { width: 0; } }
@media (max-width: 640px) {
  .qp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .qp-skill { padding: .85rem .9rem .9rem; border-radius: 16px; gap: .35rem; }
  .qp-label { font-size: .82rem; }
  .qp-score b { font-size: 1.9rem; }
  .qp-score small { font-size: .85rem; }
  .qp-score { flex-wrap: wrap; }
  .qp-top { margin-left: 0; }
  .qp-note { font-size: .74rem; }
}
.pf-sec h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--head); }
.pf-skill { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; }
.pf-game { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: .2rem .8rem; padding: 1.1rem 1.2rem;
  border-radius: 20px; text-decoration: none; background: var(--arcade-card); border: 1px solid var(--arcade-line); color: var(--arcade-ink);
  transition: transform .15s ease, border-color .15s ease; }
.pf-game.featured { border-color: color-mix(in srgb, var(--arcade-accent) 60%, transparent); }
.pf-game:hover { transform: translateY(-3px); border-color: var(--arcade-accent-soft); color: var(--arcade-ink); }
.pf-gt { font-weight: 800; color: var(--head); }
.pf-game b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 2rem; color: var(--head); }
.pf-game b.gold { color: var(--gold-soft); }
.pf-gm { font-size: .82rem; color: var(--arcade-dim); }
.pf-play { font-size: .82rem; font-weight: 800; color: var(--arcade-accent-soft); }
.pf-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin-top: .9rem; }
.pf-quick a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 14px;
  text-decoration: none; background: color-mix(in srgb, var(--arcade-card) 70%, transparent); border: 1px solid rgb(var(--line-rgb) / .16); color: var(--arcade-ink); font-size: .9rem; }
.pf-quick a:hover { border-color: var(--arcade-accent-soft); color: var(--head); }
.pf-quick b { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--gold-soft); }
.pf-quick a.none b { color: var(--arcade-dimmer); }
.pf-note { margin: .8rem 0 0; font-size: .88rem; color: var(--arcade-dim); }

.pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.pf-tiles div { padding: 1rem 1.1rem; border-radius: 18px; background: var(--arcade-card); border: 1px solid var(--arcade-line); display: flex; flex-direction: column; gap: .15rem; }
.pf-tiles b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.7rem; color: var(--head); }
.pf-tiles span { font-size: .82rem; color: var(--arcade-dim); }
.pf-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pf-pair > .section { margin: 0; }
.pf-chips { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .6rem; }
.pf-chips li { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; color: var(--arcade-dimmer); }
.pf-chips li.earned { color: var(--arcade-ink); }
.pf-chips .chip-name { font-size: .72rem; font-weight: 700; line-height: 1.2; }
.pf-chips .chip-face { width: 2.2rem; height: 2.2rem; }
.pf-depth > .section, .pf-depth .pf-pair { margin-bottom: 1rem; }
.pf-trend { display: flex; align-items: center; gap: 1rem; margin: .4rem 0; }
.pf-trend div { display: flex; flex-direction: column; }
.pf-trend b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.6rem; color: var(--head); }
.pf-trend b.up { color: var(--arcade-good); } .pf-trend b.down { color: var(--arcade-miss); }
.pf-trend span { font-size: .78rem; color: var(--arcade-dim); }
.pf-trend > span { font-size: 1.3rem; }
.pf-recent summary { display: flex; align-items: baseline; gap: .6rem; cursor: pointer; list-style: none; }
.pf-recent summary::-webkit-details-marker { display: none; }
.pf-recent summary h3 { margin: 0; }
.pf-recent summary::after { content: "Show"; margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--arcade-accent-soft); }
.pf-recent[open] summary::after { content: "Hide"; }
.pf-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.pf-settings > .section { margin: 0; }
.pf-settings .about { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .pf-top, .pf-pair { grid-template-columns: 1fr; }
  .pf-top > .qp { order: 2; margin: .4rem 0; }      /* the quant profile straight after the player card */
  .pf-top > .pf-panel { order: 3; }
  .pf-tiles { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-chart polyline { animation: none; stroke-dasharray: none; }
  .pf-game { transition: none; } .pf-game:hover { transform: none; }
}

/* The front-page line: three beats that rise in one after another; the last one is the truth colour. */
.beats { font-size: clamp(2.3rem, 4vw, 3.45rem) !important; line-height: 1.04 !important; }
.beats span { display: block; animation: beat-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.beats span:nth-child(2) { animation-delay: .22s; }
.beats span:nth-child(3) { animation-delay: .44s; }
.beats .gold { color: var(--gold-soft); text-shadow: 0 0 28px color-mix(in srgb, var(--gold) 45%, transparent); }
@keyframes beat-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .beats { font-size: clamp(1.9rem, 8.4vw, 2.4rem) !important; } }
@media (prefers-reduced-motion: reduce) { .beats span { animation: none; } }

/* "Challenge a friend" at the end of a run: the link to this run, on the stage card. */
.stage-card .linkbox input { background: var(--arcade-well); color: var(--arcade-ink); border-color: var(--arcade-line); box-shadow: none; }
#rs-share:empty { display: none; }

/* ---------- the Play page: short and calm (renderHome) ---------- */
.arcade-hero.home { min-height: 0; }
.arcade-hero.home .hero-sub b { color: var(--head); }
.ts-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.ts-list a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem .9rem;
  border-radius: 12px; text-decoration: none; color: var(--head); font-weight: 650;
  background: rgb(var(--hl) / .03); border: 1px solid rgb(var(--line-rgb) / .22); }
.ts-list a:hover { border-color: var(--arcade-accent-soft); }
.ts-list em { font-style: normal; font-size: .85rem; font-weight: 750; color: var(--arcade-accent-soft); }
.ts-list a.done { color: var(--arcade-muted); }
.ts-list a.done em { color: var(--arcade-good); }
.home-more { align-self: center; font-weight: 650; color: var(--arcade-accent-soft); text-decoration: none; padding: .4rem; }
.home-more:hover { text-decoration: underline; }
@media (max-width: 760px) {
  /* On the Play page the button sits in the page, under the heading, instead of floating over everything. */
  .arcade-hero.home { padding-bottom: 1rem; gap: 1.5rem; }
  .arcade-hero.home .btn.play-cta { position: static; width: 100%; }
}

/* ---------- the front page for new visitors: See → Try → Play (mountLearn) ---------- */
/* One column in reading order: a short hero, then one card that teaches with examples before it asks. */
body.landing main { max-width: 52rem; margin-inline: auto; }
.learn-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 1.5rem 0 1.25rem; }
.learn-hero h1 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--head); max-width: 20ch; }
.learn-hero .hero-sub { max-width: 36rem; }
.learn-hero .hero-fine a { color: var(--arcade-accent-soft); font-weight: 650; }
.learn { background: var(--arcade-card); border: 1px solid var(--arcade-line); border-radius: 26px; padding: clamp(1rem, 3vw, 1.75rem);
  box-shadow: var(--stage-shadow); scroll-margin-top: 5rem; }
.learn-steps { list-style: none; display: flex; gap: .4rem; margin: 0 0 1.1rem; padding: 0; }
.learn-steps li { flex: 1; display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 12px; font-size: .9rem; font-weight: 700;
  color: var(--arcade-dimmer); background: rgb(var(--hl) / .03); border: 1px solid rgb(var(--line-rgb) / .18); }
.learn-steps li i { font-style: normal; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: .78rem;
  background: rgb(var(--line-rgb) / .2); color: var(--arcade-muted); }
.learn-steps li.now { color: var(--head); border-color: var(--arcade-accent-soft); background: color-mix(in srgb, var(--arcade-accent-soft) 10%, transparent); }
.learn-steps li.now i { background: var(--arcade-accent); color: var(--accent-ink); }
.learn-steps li.done { color: var(--arcade-muted); }
.learn-steps li.done i { background: var(--arcade-good); color: var(--accent-ink); }
.learn-h { margin: 0 0 .4rem; font-size: 1.35rem; color: var(--head); }
.learn-p { margin: 0 0 .9rem; color: var(--arcade-ink); line-height: 1.55; }
.learn-p b { color: var(--head); }
.learn-tip { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 12px; font-size: .92rem; color: var(--arcade-ink);
  background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.learn-ask { margin: 0 0 .7rem; font-weight: 650; color: var(--head); line-height: 1.45; min-height: 1.4em; }
.learn-ask:empty { display: none; }
.learn-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.learn-actions .muted-line { margin-right: auto; }
.learn-actions .btn { padding: .9rem 1.5rem; font-size: 1.05rem; font-weight: 800; border-radius: 14px; }
.learn .plot-box.learn-plot { height: clamp(12rem, 38vh, 20rem); }
.learn .you-text { color: var(--chip); }
.learn .truth-text { color: var(--gold-soft); }
.learn-feedback { margin-top: .9rem; padding: .8rem .95rem; border-radius: 14px; background: rgb(var(--hl) / .03); border: 1px solid rgb(var(--line-rgb) / .2); }
.learn-feedback p { margin: 0 0 .35rem; color: var(--arcade-ink); }
.learn-feedback p:last-child { margin-bottom: 0; }
.learn-feedback .verdict { display: inline; font-size: 1.05rem; margin-right: .35rem; }
.learn-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: .5rem 0 .25rem; }
.learn-done .learn-p { max-width: 34rem; }
/* Five labelled examples: what -0.9 … +0.9 look like. Under the slider they line up with the scale. */
.ex-strip { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; }
.ex-strip li { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; min-width: 0; }
.ex-strip b { font-size: 1rem; color: var(--head); }
.ex-strip span { font-size: .78rem; line-height: 1.25; color: var(--arcade-muted); }
.mini-plot { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--arcade-well); border: 1px solid rgb(var(--line-rgb) / .16); }
.mdot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--arcade-accent-soft); transform: translate(-50%, -50%); }
.ex-strip.under-slider { margin-top: .9rem; gap: .45rem; }
.ex-strip.under-slider li > span { display: none; }
.ex-strip.under-slider .mini-plot { max-width: 4.75rem; }
.ex-strip.under-slider b { font-size: .82rem; color: var(--arcade-muted); }
.ex-strip.under-slider .mini-plot { border-radius: 9px; }
@media (max-width: 760px) {
  .learn-hero { padding-top: .75rem; }
  .learn .btn.play-cta { position: static; width: 100%; }
  .learn-steps li { justify-content: center; padding: .4rem; font-size: .85rem; }
  .ex-strip { gap: .35rem; }
  .ex-strip span { font-size: .7rem; }
  .mdot { width: 3.5px; height: 3.5px; }
  .learn-actions .btn { flex: 1 1 auto; }
}

/* ---------- rounds drawn as a view (every game but Guess the correlation and Make a market) ---------- */
.view-board .round-view { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; min-height: 9rem;
  justify-content: center; padding: .4rem 0 .2rem; }
.rv-prompt { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--felt-ink); line-height: 1.45; }
.rv-prompt .muted, .rv-note { color: var(--felt-muted); font-weight: 500; }
.rv-note { margin: 0; font-size: .9rem; }
.rv-problem { margin: .4rem 0; font-size: clamp(2.1rem, 8vw, 3.4rem); font-weight: 850; color: var(--felt-ink); letter-spacing: -0.02em; }
/* playing cards and dice keep a light face in both themes */
.rv-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 9px; font-weight: 850;
  background: var(--felt-ink); color: var(--felt); width: 2.2rem; height: 2.9rem; font-size: 1rem; line-height: 1; }
.rv-card small { font-size: .8em; }
.rv-card.red { color: var(--miss-pale); }
.rv-card.big { width: 4.4rem; height: 5.9rem; font-size: 2.1rem; border-radius: 12px; }
.rv-card.mini { width: 1.75rem; height: 2.35rem; font-size: .78rem; border-radius: 6px; box-shadow: none; }
.rv-cards { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.rv-now, .rv-gone { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.rv-now small, .rv-gone small, .rv-drawn small, .rv-poker small { font-size: .8rem; color: var(--felt-muted); }
.rv-gone-list { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 24rem; }
.rv-dice { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.rv-die { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 12px; border: 3px solid transparent; font: 850 1.6rem/1 inherit;
  background: var(--felt-ink); color: var(--felt); cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.rv-die small { position: absolute; left: 0; right: 0; bottom: -1.35rem; font-size: .7rem; font-weight: 800; color: var(--gold); opacity: 0; }
.rv-die[aria-pressed="true"] { border-color: var(--gold); transform: translateY(-4px); }
.rv-die[aria-pressed="true"] small { opacity: 1; }
.rv-die:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rv-bags { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.rv-bag { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem .8rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--felt-ink) 25%, transparent); color: var(--felt-ink); }
.rv-bag span, .rv-drawn span { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 9rem; }
.rv-drawn { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.rv-ball { width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid var(--felt-ink); }
.rv-ball.light { background: var(--felt-ink); }
.rv-ball.dark { background: var(--arcade-accent-soft); border-color: var(--arcade-accent-soft); }
.rv-betcard { display: flex; gap: .8rem; justify-content: center; }
.rv-betcard > div { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1.1rem; border-radius: 14px; min-width: 8rem;
  border: 1px solid color-mix(in srgb, var(--felt-ink) 25%, transparent); }
.rv-betcard small { font-size: .8rem; color: var(--felt-muted); }
.rv-betcard b { font-size: 1.8rem; color: var(--gold); }
.rv-poker { display: flex; align-items: center; gap: 1.1rem; text-align: left; max-width: 30rem; }
.rv-poker .rv-prompt { margin-top: .35rem; }
/* the options for choice games, under the board */
.rv-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.rv-options.wide { grid-template-columns: 1fr; }
.rv-opt { display: flex; align-items: center; gap: .7rem; min-height: 3.5rem; padding: .8rem 1rem; border-radius: 16px; cursor: pointer;
  text-align: left; font: 650 1rem/1.35 inherit; color: var(--arcade-ink); background: var(--arcade-card); border: 1.5px solid var(--arcade-line);
  box-shadow: var(--stage-shadow); transition: transform .12s ease, border-color .12s ease; }
@media (hover: hover) { .rv-opt:hover:not(:disabled) { border-color: var(--arcade-accent-soft); transform: translateY(-2px); } }
.rv-opt { -webkit-tap-highlight-color: transparent; }
.rv-opt:disabled { opacity: .6; cursor: default; }
.rv-opt:focus-visible { outline: 3px solid var(--arcade-accent-soft); outline-offset: 3px; }
.rv-lab, .rv-key { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; font-weight: 850;
  background: color-mix(in srgb, var(--arcade-accent-soft) 16%, transparent); color: var(--arcade-accent-soft); }
.rv-key { width: 1.5rem; height: 1.5rem; font-size: .8rem; border-radius: 7px; }
.rv-seq { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 0; color: var(--head); }
.rv-seq i { flex: none; width: .62rem; height: .62rem; border-radius: 50%; border: 1.6px solid currentColor; }
.rv-seq i.h { background: currentColor; }
.rv-tap { flex: none; font-size: .78rem; font-weight: 700; color: var(--arcade-muted); }
.typed-answer .typed-row { display: flex; gap: .5rem; }
.typed-answer .typed-row .btn { flex: none; }
.typed-answer input { flex: 1 1 auto; width: 100%; min-width: 0; font: 750 1.5rem/1 inherit; padding: .7rem .9rem; border-radius: 14px; text-align: center; }
.fb-why { color: var(--felt-muted); }
.club-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; }
.club-card h2 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--head); }
.club-card p { margin: 0; max-width: 40rem; color: var(--arcade-muted); }
.sk-motif { font-size: 1.6rem; letter-spacing: .04em; color: var(--head); }
.round-review td { vertical-align: top; }
.round-review .rr-why { display: block; margin-top: .25rem; font-size: .8rem; font-weight: 450; line-height: 1.4; color: var(--arcade-muted); }
@media (max-width: 560px) {
  .rv-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .rv-tap { display: none; }
  .rv-die { width: 3rem; height: 3rem; font-size: 1.4rem; }
  .rv-poker { flex-direction: column; text-align: center; }
}
.sk-visual:not(.correlation):not(.market) { display: grid; place-items: center; }
.typed-answer .typed-row .btn { width: auto; flex: none; padding-inline: 1.2rem; }
.typed-answer .typed-row input { min-width: 6rem; }
.sk-tags { flex-wrap: wrap; min-width: 0; }
.sk-tags .tag { white-space: normal; max-width: 100%; }
.skill-card { min-width: 0; }
.skill-card .sk-body { min-width: 0; }
.rv-dice { margin-bottom: .9rem; }

/* ---------- creating a tournament: pick games in order (renderTournamentNew) ---------- */
.t-games { border: 0; padding: 0; margin: 1rem 0; }
.t-game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .4rem; }
.t-game { position: relative; display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border-radius: 14px; cursor: pointer;
  background: var(--arcade-card); border: 1.5px solid var(--arcade-line); color: var(--arcade-ink); }
.t-game input { position: absolute; opacity: 0; pointer-events: none; }
.t-game span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.t-game b { color: var(--head); font-size: .95rem; }
.t-game small { font-size: .78rem; color: var(--arcade-muted); }
.t-order { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-grid !important; place-items: center;
  border: 1.5px solid var(--arcade-line); font-weight: 850; font-size: .85rem; color: var(--accent-ink); }
.t-game.on { border-color: var(--arcade-accent-soft); background: color-mix(in srgb, var(--arcade-accent-soft) 10%, var(--arcade-card)); }
.t-game.on .t-order { background: var(--arcade-accent); border-color: var(--arcade-accent); }
.t-game:has(input:focus-visible) { outline: 3px solid var(--arcade-accent-soft); outline-offset: 2px; }
/* a tournament's games, in order, on its page (on the felt) */
.t-stages { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .4rem; counter-reset: st; }
.t-stages li { counter-increment: st; display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .6rem .8rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--felt-ink) 18%, transparent); color: var(--felt-ink); }
.t-stages li::before { content: counter(st); font-weight: 850; color: var(--felt-muted); margin-right: .2rem; }
.t-stages li > span:first-child { flex: 1; }
.t-stages li.done { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.t-stages li.next { border-color: var(--arcade-accent-soft); }
@media (max-width: 560px) { .t-game-list { grid-template-columns: 1fr; } }

/* ---------- rounds on a phone: a board that fits what it shows, and options you can't miss ---------- */
@media (max-width: 560px) {
  .view-board { padding: 1rem 1rem 1.1rem; }
  .view-board .round-view { min-height: 0; gap: .6rem; padding: .2rem 0 0; }
  .view-board .feedback { margin: 0 0 .4rem; min-height: 1.4em; font-size: .95rem; }
  .view-board ~ .score-line { display: none; }          /* the rules were on the page before the clock started */
  .rv-prompt { font-size: 1.15rem; }
  .rv-card.big { width: 3.6rem; height: 4.8rem; font-size: 1.75rem; }
  .rv-cards { flex-wrap: nowrap; gap: .9rem; }
  .rv-cards .rv-now small { display: none; }
  .rv-gone { min-width: 0; align-items: flex-start; }
  .rv-gone-list { justify-content: flex-start; gap: 2px; }
  .rv-card.mini { width: 1.45rem; height: 1.95rem; font-size: .68rem; border-radius: 5px; }
  .rv-cards + .rv-prompt { font-size: 1rem; }
  .rv-poker { flex-direction: row; text-align: left; gap: .9rem; }
  .rv-options { margin-top: .9rem; }
  .rv-opt { justify-content: center; text-align: center; min-height: 4.6rem; padding: .9rem .8rem; font-size: 1.15rem; font-weight: 750;
    border-radius: 18px; }
  .rv-options.wide .rv-opt { justify-content: flex-start; text-align: left; min-height: 5rem; }
  .rv-seq { gap: 4px; }
  .rv-seq i { width: .8rem; height: .8rem; }
  .rv-lab { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
  .rv-opt .rv-lab + span:not(.rv-seq) { flex: 1; }
}
/* Number badges are keyboard hints (press 1 to 4): not on touch screens. */
@media (hover: none) { .rv-key { display: none; } }

/* After the first answer the line above the board is empty (nothing shows between rounds): take no space. */
.play .feedback:empty { display: none; }

/* ---------- always-on contests: today, this week, this month (seriesCards) ---------- */
.c-series { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.cs-h { margin: 0; font-size: 1rem; font-weight: 800; color: var(--arcade-muted); }
.cs-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--arcade-card);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); box-shadow: var(--stage-shadow); }
.cs-card.played { border-color: rgb(var(--line-rgb) / .25); }
.cs-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cs-left { font-size: .85rem; font-weight: 700; color: var(--arcade-muted); }
.cs-card h3 { margin: 0; font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; color: var(--head); }
.cs-card h3 a { color: inherit; text-decoration: none; }
.cs-card h3 a:hover { text-decoration: underline; }
.cs-size { margin: 0; font-weight: 700; color: var(--arcade-ink); }
.cs-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; }
.cs-stages li { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 650; color: var(--arcade-ink); font-size: .92rem; }
.lv { flex: none; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.lv-easy { color: var(--arcade-good); background: color-mix(in srgb, var(--arcade-good) 15%, transparent); }
.lv-medium { color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.lv-hard { color: var(--arcade-accent-soft); background: color-mix(in srgb, var(--arcade-accent-soft) 16%, transparent); }
.cs-act { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.cs-act .btn { padding: .65rem 1.3rem; }
.cs-card .c-done { padding: .55rem .9rem; }
.cs-card .c-sub { color: var(--arcade-muted); }
.c-special { margin: -0.8rem 0 2rem; }
.c-grid > .rank-card { align-self: start; }
@media (max-width: 560px) {
  .cs-stages { grid-template-columns: 1fr; }
}

.c-practice { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.cs-card.is-live { border-color: color-mix(in srgb, var(--arcade-miss) 55%, transparent); }

/* ---------- a run on a phone: the question and the answer on one screen, above the keyboard ---------- */
@media (max-width: 560px) {
  body.in-run .top nav { display: none; }
  body.in-run main { padding-top: .6rem; }
  body.in-run .hud { grid-template-columns: auto 1fr auto; gap: .2rem .7rem; margin-bottom: .55rem; }
  body.in-run .clock .num { font-size: 1.35rem; }
  body.in-run .hud-stats { grid-column: auto; gap: .7rem; font-size: .8rem; flex-wrap: nowrap; }
  body.in-run .hud-stats .num { font-size: 1rem; }
  body.in-run .hud-stats > span.muted { display: none; }          /* the contest line: said on the rules screen */
  body.in-run .score-line, body.in-run .typed-help { display: none; }
  body.in-run .board { padding: .8rem .9rem; }
  body.in-run .feedback { min-height: 0; margin: 0 0 .35rem; font-size: .85rem; }
  body.in-run .quote-board { min-height: 0; gap: .3rem; }
  body.in-run .contract { font-size: 1.15rem; }
  body.in-run .quote-answer, body.in-run .answer { margin-top: .6rem; }
  body.in-run .quote-row { flex-wrap: nowrap; align-items: end; }
  body.in-run .quote-box input { width: 100%; min-width: 0; font-size: 1.25rem; padding: .55rem .6rem; }
  body.in-run .quote-box { flex: 1 1 0; min-width: 0; }
  body.in-run .quote-row .btn { flex: none; flex-basis: auto; margin-bottom: 0; padding: .7rem 1rem; }
  body.in-run .plot { max-height: 38vh; width: auto; margin: 0 auto; }
  body.in-run .rv-problem { font-size: 2.3rem; margin: .1rem 0; }
  body.in-run .view-board .round-view { gap: .45rem; }
  body.in-run .typed-answer input { font-size: 1.3rem; padding: .55rem .7rem; }
  body.in-run .quote-row .btn { width: auto; }
  body.in-run .quote-at { flex: none; padding-bottom: .55rem; }
  body.in-run .rv-bags { flex-wrap: nowrap; gap: .5rem; }
  body.in-run .rv-bag { padding: .45rem .55rem; gap: .3rem; }
  body.in-run .rv-bag span { max-width: 7.5rem; }
  body.in-run .rv-ball { width: .8rem; height: .8rem; }
  body.in-run .rv-prompt { font-size: 1.05rem; }
  body.in-run .guessval { font-size: 2.2rem; }
  body.in-run .answer-row .typed .small { display: none; }
  body.in-run .answer-row .typed input { padding: .45rem .6rem; font-size: 1.15rem; }
  body.in-run .answer .btn { padding-block: .75rem; }
}
.past-practice { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 800;
  color: var(--arcade-accent-soft); background: color-mix(in srgb, var(--arcade-accent-soft) 14%, transparent); }
.past-row > :last-child { text-align: right; }

/* ---------- a game in progress, on every page (checkResume) ---------- */
.carry-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: .7rem; width: min(36rem, calc(100% - 24px)); padding: .65rem .7rem .65rem 1rem;
  border-radius: 18px; background: var(--arcade-card); border: 1.5px solid var(--arcade-accent-soft); box-shadow: var(--stage-shadow);
  color: var(--arcade-ink); font-size: .95rem; }
.carry-bar.ended { border-color: rgb(var(--line-rgb) / .35); }
.rb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--arcade-accent-soft); animation: blink 1.2s ease-in-out infinite; }
.carry-bar.ended .rb-dot { background: var(--gold); animation: none; }
.rb-text { flex: 1; min-width: 0; line-height: 1.35; }
.rb-text b { color: var(--head); }
.carry-bar .btn.rb-go { flex: none; padding: .6rem 1.1rem; }
.rb-x { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 10px; background: transparent; color: var(--arcade-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rb-x:hover { background: rgb(var(--hl) / .06); }
body.has-carry-on main, body.has-carry-on footer { padding-bottom: 5.5rem; }
body.in-run #carry-bar { display: none; }
body.in-run #contest-live { display: none; }
/* A live contest on every other page (Nov 11): big, at the top, and honest that the clock is running. */
.contest-live { display: flex; align-items: center; gap: .9rem 1.2rem; margin: .8rem auto 0; max-width: var(--wrap);
  padding: 1rem 1.25rem; border-radius: 18px; background: radial-gradient(120% 160% at 0% 0%, var(--felt-2), var(--felt) 65%);
  color: var(--felt-ink); box-shadow: 0 0 0 2px var(--gold), 0 16px 34px -24px rgb(15 23 42 / .8); }
#contest-live { padding: 0 16px; }
.cl-dot { flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 60%, transparent); animation: cl-pulse 1.4s infinite; }
@keyframes cl-pulse { 70% { box-shadow: 0 0 0 .6rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cl-text { flex: 1 1 auto; line-height: 1.45; }
.cl-text b { color: var(--felt-ink); }
.cl-text .num { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.cl-text small { display: block; color: var(--felt-muted); font-size: .88rem; margin-top: .15rem; }
.btn.cl-go { flex: none; padding: .8rem 1.5rem; font-size: 1.05rem; background: var(--gold); color: var(--felt); border-color: var(--gold); }
@media (max-width: 640px) {
  .contest-live { flex-wrap: wrap; padding: .9rem 1rem; } .cl-dot { display: none; }
  .btn.cl-go { width: 100%; text-align: center; }
  .btn.rt-go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cl-dot { animation: none; } }
/* The reading-time countdown on a contest game's rules page (Nov 11). */
.rules-timer { max-width: 60rem; margin: 1rem auto .2rem; padding: 1rem 1.25rem; border-radius: 18px;
  background: radial-gradient(120% 160% at 0% 0%, var(--felt-2), var(--felt) 65%); color: var(--felt-ink); }
.rt-row { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; }
.rt-big { font-size: clamp(2.6rem, 8vw, 3.8rem); font-weight: 900; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }
.rt-copy { flex: 1 1 14rem; }
.rules-timer b { display: block; font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--felt-ink); }
.rules-timer span { color: var(--felt-muted); font-size: .92rem; }
.btn.rt-go { flex: none; padding: .75rem 1.3rem; background: var(--gold); color: var(--felt); border-color: var(--gold); }
.rt-bar { height: .45rem; margin-top: .75rem; border-radius: 99px; background: color-mix(in srgb, var(--felt-ink) 12%, transparent); overflow: hidden; }
.rt-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width .25s linear; }
.rules-timer.urgent .rt-bar i { background: var(--bad); }
.rules-timer.urgent .rt-big { color: var(--bad); }
body.contest-live-on #contest-banner .contest-banner.live { display: none; }
@media (prefers-reduced-motion: reduce) { .rb-dot { animation: none; } }
.rs-main .share-card { margin: 0; }
@media (min-width: 521px) { .rs-main .share-card .sc-actions { flex-wrap: nowrap; } .rs-main .share-card .sc-main { flex: 1 1 auto; } }

/* Games page sections (Nov 7, 2026): jump links under Today's set. */
.games-sec { scroll-margin-top: 5rem; }

/* Balloon and Count and trade round views. */
.rv-balloon { display: flex; flex-direction: column; align-items: center; margin: .2rem 0 .6rem; }
.rv-balloon-b { width: 54px; height: 66px; border-radius: 50% 50% 46% 46%; background: var(--arcade-accent); opacity: .85; }
.rv-balloon-s { width: 2px; height: 26px; background: rgb(var(--line-rgb) / .6); }
.rv-hidden { display: flex; gap: .35rem; }
.rv-back { width: 38px; height: 54px; border-radius: 6px; border: 1px solid rgb(var(--line-rgb) / .35);
  background: repeating-linear-gradient(45deg, rgb(var(--hl) / .06) 0 4px, rgb(var(--hl) / .14) 4px 8px); }
.rv-problem.long { font-size: clamp(1.5rem, 5.5vw, 2.4rem); }
body.in-run .rv-problem.long { font-size: 1.8rem; }

/* Firms that test each game (Nov 7, 2026): monogram chips on game cards, a firm filter, and the note. */
.firm-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: .1rem 0 .7rem; }
.firm-lab { font-size: .72rem; font-weight: 600; color: var(--arcade-faint); margin-right: .1rem; }
.firm-chip { --h: var(--arcade-accent); display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem .18rem .2rem;
  border-radius: 99px; font-size: .78rem; font-weight: 650; color: var(--head); text-decoration: none; line-height: 1.2;
  background: color-mix(in srgb, var(--h) 9%, transparent); border: 1px solid color-mix(in srgb, var(--h) 28%, transparent);
  transition: transform .12s ease, border-color .12s ease, background .12s ease; font-family: inherit; cursor: pointer; }
.firm-chip i { font-style: normal; display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .2rem;
  border-radius: 99px; font-size: .62rem; font-weight: 800; letter-spacing: .02em; color: var(--accent-ink); background: var(--h); }
.firm-chip:hover { transform: translateY(-1px); border-color: var(--h); background: color-mix(in srgb, var(--h) 15%, transparent); }
.firm-chip.is-pick { border-color: var(--h); box-shadow: 0 0 0 2px color-mix(in srgb, var(--h) 30%, transparent); }
.firm-chip.hue-indigo { --h: var(--arcade-accent); }
.firm-chip.hue-teal { --h: var(--qt-teal); }
.firm-chip.hue-green { --h: var(--arcade-good); }
.skill-card.firm-off { display: none; }
.firm-note { color: var(--arcade-faint); font-size: .8rem; margin: .4rem 0 1.4rem; }
[data-theme="dark"] .firm-chip i { color: var(--paper); }
.firm-chip i.logo-tile, .firm-pick-btn i.logo-tile { padding: .12rem; min-width: 0; width: 1.45rem; background: var(--logo-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 25%, transparent); }
.firm-pick-btn i.logo-tile { width: 1.6rem; }
.firm-pick-btn[aria-pressed="true"] i.logo-tile { background: var(--logo-bg); }

/* Rules page: the answers you can give (Nov 7, 2026). */
.rules-box { margin: 1rem 0; padding: .8rem 1rem; border-radius: 12px; border: 1px solid rgb(var(--line-rgb) / .25); background: rgb(var(--hl) / .03); }
.rules-box h2 { font-size: .95rem; margin: 0 0 .4rem; color: var(--head); }
.rules-box ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.rules-box li { line-height: 1.5; }

/* Games page, Nov 7: card art, section bar and firm bar. Art colours are the --art-* tokens in styles.css. */
.sk-visual.art-night { --a1: var(--art-night-a); --a2: var(--art-night-b); --ai: var(--art-night-ink); --aa: var(--art-night-acc); }
.sk-visual.art-paper { --a1: var(--art-paper-a); --a2: var(--art-paper-b); --ai: var(--art-paper-ink); --aa: var(--art-paper-acc); }
.sk-visual.art-felt { --a1: var(--art-felt-a); --a2: var(--art-felt-b); --ai: var(--art-felt-ink); --aa: var(--art-felt-acc); }
.sk-visual.art-slate { --a1: var(--art-slate-a); --a2: var(--art-slate-b); --ai: var(--art-slate-ink); --aa: var(--art-slate-acc); }
.sk-visual[class*="art-"]:not(.market):not(.correlation) { background: radial-gradient(120% 90% at 20% 0%, var(--a2), var(--a1) 70%); overflow: hidden; }
.sk-visual[class*="art-"]:not(.market):not(.correlation)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ai) 12%, transparent) 1px, transparent 0); background-size: 18px 18px; opacity: .6; }
.sk-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transition: transform .35s ease; }
.skill-card:hover .sk-art { transform: scale(1.04); }
.sk-art text { font-family: Inter, system-ui, sans-serif; font-weight: 800; fill: var(--ai); }
.sk-art .a-label { font-size: 18px; fill: var(--aa); }
.sk-art .a-small { font-size: 12px; font-weight: 700; fill: var(--aa); letter-spacing: .02em; }
.sk-art .a-small.dark { fill: var(--art-card-ink); }
.sk-art .a-small.gold, .sk-art .a-mono.gold, .sk-art .a-big.gold { fill: var(--gold); }
.sk-art .a-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 19px; }
.sk-art .a-mono.sm { font-size: 13px; fill: var(--aa); }
.sk-art .a-big { font-size: 46px; font-weight: 900; letter-spacing: -.02em; }
.sk-art .a-big.sm { font-size: 34px; }
.sk-art .a-q { font-size: 64px; font-weight: 900; fill: var(--gold); }
.sk-art .a-coin { stroke: color-mix(in srgb, var(--ai) 50%, transparent); stroke-width: 1.5; }
.sk-art .a-coin.h { fill: var(--gold); } .sk-art .a-coin.t { fill: color-mix(in srgb, var(--ai) 22%, transparent); }
.sk-art .a-cointxt { font-size: 12px; fill: var(--a1); }
.sk-art .a-card { fill: var(--art-card); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.sk-art .a-cardtxt { font-size: 14px; fill: var(--art-card-ink); }
.sk-art .a-cardbig { font-size: 26px; fill: var(--art-card-ink); }
.sk-art .a-cardtxt.red, .sk-art .a-cardbig.red { fill: var(--art-suit); }
.sk-art .a-back { fill: var(--art-back); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.sk-art .a-back-in { fill: none; stroke: color-mix(in srgb, var(--art-card) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sk-art .a-pill { fill: var(--art-card); } .sk-art .a-pill + .a-mono { fill: var(--art-card-ink); font-weight: 800; }
.sk-art .a-chip { fill: var(--art-chip); stroke: var(--art-card); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sk-art .a-chip.b { fill: var(--art-chip-2); }
.sk-art .a-chip-in { fill: var(--art-card); }
.sk-art .a-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sk-art .a-dot { fill: var(--gold); }
.sk-art .a-ticket { fill: var(--art-card); stroke: var(--aa); stroke-width: 2; stroke-dasharray: 6 4; }
.sk-art .a-ticket ~ .a-mono { fill: var(--art-card-ink); font-size: 16px; }
.sk-art .a-ticket + .a-label { fill: var(--aa); }
.sk-art .a-vs { fill: var(--gold); }
.sk-art .a-die { fill: var(--art-card); filter: drop-shadow(0 5px 6px rgb(0 0 0 / .35)); }
.sk-art .a-die.held { stroke: var(--gold); stroke-width: 3; }
.sk-art .a-pip { fill: var(--art-card-ink); }
.sk-art .a-up { fill: var(--aa); } .sk-art .a-down { fill: color-mix(in srgb, var(--ai) 45%, transparent); }
.sk-art .a-bag { fill: color-mix(in srgb, var(--ai) 14%, transparent); stroke: color-mix(in srgb, var(--ai) 45%, transparent); stroke-width: 2; }
.sk-art .a-tie { fill: none; stroke: color-mix(in srgb, var(--ai) 55%, transparent); stroke-width: 2; }
.sk-art .a-ball.a { fill: var(--art-chip-2); } .sk-art .a-ball.b { fill: var(--art-chip); }
.sk-art .a-balloon { fill: var(--art-chip); } .sk-art .a-shine { fill: rgb(255 255 255 / .45); }
.sk-art .a-string { fill: none; stroke: var(--ai); stroke-width: 1.5; }
.sk-art .a-ring { fill: none; stroke: color-mix(in srgb, var(--ai) 18%, transparent); stroke-width: 8; }
.sk-art .a-ring-on { fill: none; stroke: var(--aa); stroke-width: 8; stroke-linecap: round; }
.sk-art .a-cap { fill: var(--aa); }
.sk-art .a-arc { fill: none; stroke: var(--aa); stroke-width: 2; stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: reduce) { .sk-art, .skill-card:hover .sk-art { transition: none; transform: none; } }

/* Group colours for the section bar and headers (art palette, so each section matches its cards). */
.gj-estimation, .gs-estimation { --g: var(--art-night-b); }
.gj-markets, .gs-markets { --g: var(--art-paper-acc); }
.gj-probability, .gs-probability { --g: var(--art-felt-b); }
.gj-speed, .gs-speed { --g: var(--art-slate-acc); }
.games-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.8rem; padding: 0; border: 0; background: none; }
.games-jump a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 16px; text-decoration: none;
  background: var(--arcade-card); border: 1px solid var(--arcade-line); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.games-jump a:hover { transform: translateY(-2px); border-color: var(--g); box-shadow: 0 10px 24px -16px var(--g); }
.games-jump a[hidden] { display: none; }
.gj-ico, .gs-ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: color-mix(in srgb, var(--g) 16%, transparent); }
.gj-ico svg, .gs-ico svg { width: 1.3rem; height: 1.3rem; fill: var(--g); stroke: var(--g); }
.gj-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.gj-txt b { color: var(--head); font-size: .92rem; }
.gj-txt small { color: var(--arcade-faint); font-size: .78rem; font-weight: 600; }
.sec-head { align-items: center; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--arcade-line); }
.sec-head > div { display: flex; flex-direction: column; gap: .1rem; }
.sec-head h2 { font-size: 1.4rem; font-weight: 850; letter-spacing: -.01em; }
.games-sec { scroll-margin-top: 5rem; }

/* Firm bar: pick a firm to filter the cards. */
.firm-bar { margin: 0 0 1.4rem; padding: 1rem 1.1rem 1.1rem; border-radius: 20px; background: var(--arcade-card); border: 1px solid var(--arcade-line);
  background-image: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--arcade-accent) 10%, transparent), transparent 60%); }
.firm-bar-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .75rem; }
.firm-bar-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--head); }
.firm-bar-head span { color: var(--arcade-faint); font-size: .85rem; }
.firm-bar-list { display: flex; gap: .45rem; flex-wrap: wrap; }
.firm-pick-btn { --h: var(--arcade-accent); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem .3rem .3rem; border-radius: 999px; border: 1px solid rgb(var(--line-rgb) / .3); background: transparent;
  color: var(--head); font-weight: 650; font-size: .88rem; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.firm-pick-btn.all { padding-left: .8rem; }
.firm-pick-btn i { font-style: normal; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--h); color: var(--paper); font-size: .7rem; font-weight: 800; }
.firm-pick-btn small { color: var(--arcade-faint); font-weight: 700; font-size: .75rem; }
.firm-pick-btn:hover { transform: translateY(-1px); border-color: var(--h); background: color-mix(in srgb, var(--h) 10%, transparent); }
.firm-pick-btn[aria-pressed="true"] { background: var(--h); border-color: var(--h); color: var(--paper); }
.firm-pick-btn[aria-pressed="true"] small { color: inherit; opacity: .8; }
.firm-pick-btn[aria-pressed="true"] i { background: var(--paper); color: var(--h); }
.firm-pick-btn.hue-indigo { --h: var(--arcade-accent); } .firm-pick-btn.hue-teal { --h: var(--qt-teal); } .firm-pick-btn.hue-green { --h: var(--arcade-good); }
@media (max-width: 760px) {
  .games-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .firm-bar-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1.1rem; padding: 0 1.1rem .2rem; }
  .firm-bar-list::-webkit-scrollbar { display: none; }
  .firm-pick-btn { flex: none; }
}
[data-theme="dark"] .gj-estimation, [data-theme="dark"] .gs-estimation { --g: var(--art-night-acc); }
[data-theme="dark"] .gj-markets, [data-theme="dark"] .gs-markets { --g: var(--art-chip); }
[data-theme="dark"] .gj-probability, [data-theme="dark"] .gs-probability { --g: var(--art-felt-acc); }
.sec-head { flex-wrap: nowrap; }

/* Game cards, Nov 7 (2): the art is a link with its badges on it; no tag row; one footer with Play, Challenge and
   your best. The level is picked on the rules page, not on the card. */
a.sk-visual { display: block; text-decoration: none; }
.sk-visual.market { display: flex; }
.sk-badges { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: flex; gap: .4rem; }
.sk-badge { padding: .22rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .35); }
.sk-badge.gold { background: var(--gold); color: var(--art-card-ink); }
.sk-badge.new { background: var(--arcade-accent); color: var(--paper); }
.sk-time { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 750; color: var(--art-card-ink);
  background: color-mix(in srgb, var(--art-card) 88%, transparent); backdrop-filter: blur(4px); }
.sk-time svg { width: .9rem; height: .9rem; }
.sk-body h3 a { color: inherit; text-decoration: none; }
.sk-body h3 a:hover { color: var(--arcade-accent); }
.sk-body h3 a:focus-visible { outline: 2px solid var(--arcade-accent); outline-offset: 3px; border-radius: 4px; }
.sk-actions { padding-top: .8rem; border-top: 1px solid var(--arcade-line); }
.sk-best.fresh small { font-size: .8rem; font-weight: 600; }
.sec-count { margin-left: auto; align-self: center; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--g); background: color-mix(in srgb, var(--g) 12%, transparent); white-space: nowrap; }

/* The rules page: the game's art on top, then how it works, answers, the level and the start button. */
.ready.rules-page { max-width: 42rem; padding: 0; overflow: hidden; }
.rules-page .rp-art { display: block; height: 170px; border-radius: 0; }
.rules-page .rp-art.market, .try-next .tn-art.market { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rp-body { padding: 1.6rem 2rem 2rem; }
.rp-body h1 { margin: 0 0 .3rem; }
.rp-trains { margin: 0 0 .7rem; color: var(--muted); }
.rp-trains::first-letter { text-transform: uppercase; }
.rp-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.rp-meta span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
  font-weight: 650; background: rgb(var(--hl) / .05); color: var(--head); }
.rp-meta svg { width: 1rem; height: 1rem; }
.rp-meta b.gold { color: var(--gold-soft); font-family: "JetBrains Mono", ui-monospace, monospace; }
.rp-h { display: block; margin: 0 0 .4rem; padding: 0; font-size: .95rem; font-weight: 800; color: var(--head); }
.rp-levels { border: 0; margin: 1.4rem 0 0; padding: 0; }
.rp-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .3rem; }
.rp-level { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgb(var(--line-rgb) / .3); transition: border-color .15s ease, background .15s ease; }
.rp-level input { position: absolute; opacity: 0; pointer-events: none; }
.rp-level b { color: var(--head); font-size: .95rem; }
.rp-level small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.rp-level:hover { border-color: var(--arcade-accent); }
.rp-level:has(input:checked) { border-color: var(--arcade-accent); background: color-mix(in srgb, var(--arcade-accent) 9%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arcade-accent) 18%, transparent); }
.rp-level:has(input:checked) b { color: var(--arcade-accent); }
.rp-level:has(input:focus-visible) { outline: 2px solid var(--arcade-accent); outline-offset: 2px; }
.rp-note { margin: 1rem 0 0; }
.rp-go { display: flex; align-items: center; gap: .9rem; margin-top: 1.2rem; }
.rp-go .btn { padding: .8rem 1.6rem; font-size: 1.05rem; }
.rp-example { margin-top: 1.4rem; border-top: 1px solid rgb(var(--line-rgb) / .2); padding-top: 1rem; }
.rp-example > summary { cursor: pointer; font-weight: 700; color: var(--arcade-accent); }
.rp-example .game-example { margin-top: .8rem; }
.rp-example .game-example > h2 { display: none; }
@media (max-width: 600px) {
  .rp-body { padding: 1.2rem 1.1rem 1.4rem; }
  .rp-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-page .rp-art { height: 140px; }
  .rp-go .small { display: none; }
}

/* Try next after a run: the game's own art as the tile. */
.try-next .tn-art { display: block; position: relative; flex: none; width: 92px; height: 54px; border-radius: 12px; overflow: hidden; }
.try-next .tn-art.market { align-items: center; justify-content: center; }
.try-next .tn-art.market { gap: 0; } .try-next .tn-art.market span { display: none; }
.try-next .tn-art.market b { font-size: .8rem; }
.try-next .tn-art.correlation i { width: 4px; height: 4px; box-shadow: none; }
.try-next em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The free mock interview offer (docs/mock-offer.md): a big banner on the new-visitor home page, then a short step
   that asks for the role and firms before /call. The banner sits on the felt (dark in both themes) with gold. */
.mock-offer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem 0 .5rem;
  padding: 1.6rem 1.8rem; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, var(--felt-2), var(--felt) 60%);
  color: var(--felt-ink); box-shadow: 0 18px 40px -28px rgb(15 23 42 / .8); position: relative; overflow: hidden; }
.mock-offer::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent), transparent 70%); pointer-events: none; }
.mo-text { position: relative; z-index: 1; max-width: 40rem; }
.mo-pill { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
  background: var(--gold); color: var(--felt); }
.mock-offer h2 { margin: .6rem 0 .4rem; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; color: var(--felt-ink); }
.mock-offer p { margin: 0; color: var(--felt-muted); }
.mo-btn { position: relative; z-index: 1; flex: none; padding: .85rem 1.4rem; font-size: 1.02rem; background: var(--gold);
  color: var(--felt); border-color: var(--gold); }
.mo-btn:hover { filter: brightness(1.05); }
.mo-dlg { width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--rule); border-radius: 20px;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgb(15 23 42 / .45); }
.mo-dlg::backdrop { background: rgb(15 23 42 / .55); }
.mo-form { position: relative; display: grid; gap: .8rem; padding: 1.5rem 1.5rem 1.3rem; }
.mo-form h2 { margin: 0; font-size: 1.3rem; color: var(--head); }
.mo-form p { margin: 0; }
.mo-form label { display: grid; gap: .3rem; font-weight: 650; font-size: .92rem; }
.mo-form input { font: inherit; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--page); color: var(--ink); }
.mo-note { display: grid; gap: .2rem; padding: .7rem .8rem; border-radius: 12px; background: var(--accent-soft); }
.mo-note small { color: var(--muted); font-weight: 700; }
.mo-note output { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; color: var(--ink); word-break: break-word; }
.mo-x { position: absolute; top: .6rem; right: .7rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.mo-x:hover { background: rgb(var(--hl) / .06); }
[data-theme="dark"] .mock-offer { border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
/* Club Battle on the home pages (Nov 11): the same felt as the offer it replaced, with this month's top 3. */
.club-banner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem 2rem; align-items: center;
  margin: 1rem 0 .5rem; padding: 1.5rem 1.8rem; border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--felt-2), var(--felt) 60%); color: var(--felt-ink);
  box-shadow: 0 18px 40px -28px rgb(15 23 42 / .8); }
.club-banner::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); pointer-events: none; }
.cbb-text { position: relative; z-index: 1; }
.club-banner h2 { margin: .6rem 0 .4rem; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; color: var(--felt-ink); }
.club-banner p { margin: 0; color: var(--felt-muted); }
.club-banner p b { color: var(--felt-ink); }
.cbb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1rem; }
.cbb-btn { padding: .75rem 1.25rem; background: var(--gold); color: var(--felt); border-color: var(--gold); }
.cbb-btn:hover { filter: brightness(1.05); }
.cbb-btn svg { width: 16px; height: 16px; margin-right: .35rem; vertical-align: -2px; }
.cbb-link { color: var(--felt-ink); font-weight: 700; text-underline-offset: 3px; }
.cbb-days { color: var(--felt-muted); font-size: .88rem; }
.cbb-top { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cbb-top li { display: grid; grid-template-columns: 1.4rem auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--felt-ink) 7%, transparent); }
.cbb-top li.mine { box-shadow: inset 0 0 0 2px var(--gold); }
.cbb-top li:first-child .cbb-rank { color: var(--gold); }
.cbb-rank { font-weight: 900; color: var(--felt-muted); text-align: center; }
.cbb-top a { color: var(--felt-ink); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbb-top a:hover { text-decoration: underline; }
.cbb-top b { color: var(--gold); font-variant-numeric: tabular-nums; }
.cbb-top .club-mono { min-width: 2rem; height: 2rem; font-size: .62rem; }
.cbb-top .club-mono.has-logo { width: 2rem; min-width: 0; }
.cbb-empty { position: relative; z-index: 1; }
[data-theme="dark"] .club-banner { border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
@media (max-width: 760px) {        /* phones: compact, so the game stays on the first screen (only the leader shows) */
  .club-banner { grid-template-columns: 1fr; gap: .8rem; padding: 1rem 1.1rem; border-radius: 18px; }
  .club-banner h2 { font-size: 1.15rem; margin: .45rem 0 .3rem; }
  .club-banner p { font-size: .9rem; line-height: 1.4; }
  .cbb-actions { margin-top: .7rem; gap: .5rem .9rem; }
  .cbb-btn { padding: .55rem 1rem; font-size: .95rem; }
  .cbb-days { display: none; }
  .cbb-top li { padding: .45rem .7rem; }
  .cbb-top li:nth-child(n+2) { display: none; }
}
/* The slim version (job board): one line, same dialog. */
.mock-offer.compact { gap: .75rem 1rem; padding: .6rem .75rem .6rem 1rem; margin: 0 0 1rem; border-radius: 14px; flex-wrap: wrap; }
.mock-offer.compact p { margin: 0; flex: 1 1 18rem; font-size: .93rem; line-height: 1.4; }
.mock-offer.compact .mo-btn { padding: .5rem 1rem; font-size: .9rem; }
@media (max-width: 700px) {
  .mock-offer { flex-direction: column; align-items: stretch; padding: 1.3rem 1.2rem; gap: 1rem; }
  .mock-offer.compact { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .65rem .8rem; gap: .5rem .75rem; min-height: 0; }
  .mock-offer.compact .mo-pill { font-size: .72rem; }
  .mock-offer.compact p { flex-basis: 100%; order: 2; font-size: .9rem; }
  .mock-offer.compact .mo-btn { order: 3; width: auto; }
  .mo-btn { width: 100%; }
}

/* The job board (#/jobs, web/jobs.js). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jb { max-width: 60rem; margin: 0 auto; padding: 1.5rem 0 2rem; }
.jb-head h1 { margin: 0 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.03em; color: var(--head); }
.jb-head p { margin: 0; max-width: 44rem; }
.jb-filters { display: grid; gap: .6rem; margin: 1.4rem 0 1rem; padding: 1rem; border-radius: 18px; background: var(--arcade-card);
  border: 1px solid var(--arcade-line); }
.jb-search input { width: 100%; box-sizing: border-box; font: inherit; padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid rgb(var(--line-rgb) / .35); background: var(--paper); color: var(--ink); }
.jb-search input:focus { outline: none; border-color: var(--arcade-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--arcade-accent) 20%, transparent); }
.jb-row-chips, .jb-firms { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.jb-firms { padding-top: .6rem; border-top: 1px solid var(--arcade-line); }
.jb-chip { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; line-height: 1.25; height: auto; }
.jb-chip { font: inherit; cursor: pointer; padding: .32rem .75rem; border-radius: 999px; border: 1px solid rgb(var(--line-rgb) / .3);
  background: transparent; color: var(--head); font-size: .86rem; font-weight: 600; }
.jb-chip small { color: var(--arcade-faint); font-weight: 700; }
.jb-chip:hover { border-color: var(--arcade-accent); }
.jb-chip[aria-pressed="true"] { background: var(--arcade-accent); border-color: var(--arcade-accent); color: var(--paper); }
.jb-chip[aria-pressed="true"] small { color: inherit; opacity: .8; }
.jb-count { margin: .6rem 0 .4rem; font-weight: 700; color: var(--head); }
.jb-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.jb-sort { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--arcade-muted); }
.jb-sort select { font: inherit; color: var(--head); background: var(--paper); border: 1px solid rgb(var(--line-rgb) / .3);
  border-radius: 10px; padding: .3rem .55rem; }
.jb-chip[data-empty] { opacity: .45; }
.jb-firms-note { margin: .45rem 0 0; font-size: .8rem; color: var(--arcade-faint); }
/* Filters on phones: a button bottom right opens them in a bottom sheet (the same chips move in). */
.jb-facet-h { display: none; }
.jb-fab, .jb-sheet-sort { display: none; }
.jb-sheet { margin: auto 0 0; padding: 0; width: 100%; max-width: none; max-height: 86vh; border: 0; border-radius: 22px 22px 0 0;
  background: var(--paper); color: var(--head); box-shadow: 0 -12px 40px rgb(var(--line-rgb) / .25); }   /* solid: cards are translucent in dark */
.jb-sheet[open] { display: flex; flex-direction: column; }
.jb-sheet::backdrop { background: rgb(15 23 42 / .45); }
.jb-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .5rem; }
.jb-sheet-head h2 { margin: 0; font-size: 1.15rem; }
.jb-sheet-head .mo-x { position: static; }
.jb-sheet-body { overflow-y: auto; padding: 0 1.1rem 1rem; overscroll-behavior: contain; }
.jb-sheet .jb-facet-h { display: block; margin: 1rem 0 .45rem; font-size: .8rem; font-weight: 700; color: var(--arcade-muted); }
.jb-sheet .jb-row-chips, .jb-sheet .jb-firms { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; border: 0; }
.jb-sheet .jb-sheet-sort { display: flex; justify-content: space-between; margin-top: 1.2rem; font-size: .9rem; }
.jb-sheet-foot { display: flex; gap: .6rem; padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--arcade-line); background: var(--paper); }
.jb-sheet-foot .btn { flex: 1; justify-content: center; margin: 0; }
.jb-sheet-foot .btn.ghost { flex: 0 0 auto; }
@media (max-width: 640px) {
  .jb-filters .jb-facets { display: none; }                 /* the search box stays; the rest is behind the button */
  .jb-filters { padding: .6rem; }
  .jb-fab { display: inline-flex; align-items: center; gap: .45rem; position: fixed; right: 1rem; z-index: 40;
    bottom: calc(1rem + env(safe-area-inset-bottom)); padding: .75rem 1.05rem; border: 0; border-radius: 999px; font: inherit;
    font-weight: 700; color: var(--paper); background: var(--arcade-accent); box-shadow: 0 10px 28px rgb(var(--hl) / .25); cursor: pointer; }
  .jb-fab b { min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: .75rem; background: var(--paper); color: var(--arcade-accent); }
  .jb-fab b[hidden] { display: none; }
  body.jb-sheet-open .jb-fab { display: none; }
  .jb-more-wrap { padding-bottom: 4rem; }                   /* the last row and Show more stay clear of the button */
}
/* Practice posters and the newsletter on the job board (Nov 8: turn job readers into players and subscribers). */
.jb-posters { display: grid; gap: .8rem; }
.jb-poster { display: block; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--head); background: var(--arcade-card);
  border: 1px solid var(--arcade-line); box-shadow: 0 10px 28px rgb(var(--hl) / .08); transition: transform .15s, border-color .15s; }
.jb-poster:hover { border-color: var(--arcade-accent); transform: translateY(-2px); }
.jb-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.jb-pb { display: grid; gap: .25rem; padding: .8rem .95rem .95rem; }
.jb-pb small { font-weight: 800; font-size: .76rem; color: var(--arcade-accent); }
.jb-pb b { font-size: 1.05rem; line-height: 1.25; }
.jb-pb > span:not(.btn) { font-size: .86rem; color: var(--arcade-muted); line-height: 1.4; }
.jb-pb .btn { justify-self: start; margin-top: .35rem; }
.jb-poster.tall .jb-pb b { font-size: 1.2rem; }
.jb-aside .jb-news + h2 { margin-top: 1.3rem; }
.jb-news { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--accent-soft); border: 1px solid rgb(var(--line-rgb) / .12); }
.jb-news h2 { margin: 0 0 .3rem; font-size: 1rem; color: var(--head); }
.jb-news p { margin: 0 0 .7rem; font-size: .9rem; color: var(--arcade-muted); }
.jb-news-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.jb-news-form input { flex: 1 1 12rem; min-width: 0; font: inherit; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid rgb(var(--line-rgb) / .25); background: var(--paper); color: var(--head); }
.jb-news-form .btn { flex: none; margin: 0; }
.jb-news-fine { margin: .55rem 0 0 !important; font-size: .78rem !important; }
.jb-news.done h2 { color: var(--arcade-accent); }
.jb > .jb-news { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.jb > .jb-news.lead { margin: 0 0 1.1rem; }               /* under the heading, before the jobs */
.jb > .jb-news h2, .jb > .jb-news p { margin: 0; }
.jb > .jb-news p { flex: 1 1 16rem; }
.jb > .jb-news .jb-news-form { flex: 1 1 22rem; }
.jb > .jb-news .jb-news-fine { flex-basis: 100%; }
.jb-promo a { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .6rem; border-radius: 16px;
  text-decoration: none; color: var(--head); background: linear-gradient(120deg, var(--accent-soft), var(--arcade-card));
  border: 1px solid rgb(var(--line-rgb) / .14); }
.jb-promo a:hover { border-color: var(--arcade-accent); }
.jb-promo img { width: 100%; height: auto; border-radius: 10px; aspect-ratio: 1200 / 630; object-fit: cover; }
.jb-promo span { display: grid; gap: .25rem; }
.jb-promo small { font-weight: 800; font-size: .76rem; color: var(--arcade-accent); }
.jb-promo b { font-size: .98rem; line-height: 1.3; }
.jb-promo .btn { justify-self: start; }
.jb-crumbs { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: none; }
.jb-share { font: inherit; font-size: .85rem; font-weight: 600; color: var(--arcade-muted); background: none; border: 1px solid var(--arcade-line);
  border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.jb-share:hover { color: var(--arcade-accent); border-color: var(--arcade-accent); }
@media (max-width: 520px) { .jb-promo a { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .7rem; } }
/* One job's page (#/jobs/<id>) */
.jb-back { color: var(--arcade-muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
.jb-back:hover { color: var(--arcade-accent); }
.jb-job-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; margin: .6rem 0 1.4rem;
  padding: 1.2rem; border-radius: 18px; background: var(--arcade-card); border: 1px solid var(--arcade-line); }
.jb-job-head h1 { margin: 0 0 .25rem; font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.2; }
.jb-job-head .jb-meta a { color: inherit; text-decoration: none; }
.jb-job-head .jb-meta a:hover b { color: var(--arcade-accent); }
.jb-job-head .jb-when { margin-left: .4rem; }
.jb-mono.lg { width: 3.5rem; height: 3.5rem; border-radius: 16px; font-size: 1.05rem; }
.jb-mono.sm { width: 2rem; height: 2rem; border-radius: 9px; font-size: .7rem; flex: none; }
.jb-apply.big { padding: .7rem 1.2rem; font-size: 1rem; }
.jb-job-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem; align-items: start; }
.jb-desc { padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--arcade-card); border: 1px solid var(--arcade-line);
  line-height: 1.65; color: var(--arcade-ink); overflow-wrap: anywhere; }
.jb-desc h2, .jb-desc h3, .jb-desc h4 { color: var(--head); margin: 1.2rem 0 .4rem; font-size: 1.05rem; }
.jb-desc ul, .jb-desc ol { padding-left: 1.3rem; }
.jb-desc li { margin: .2rem 0; }
.jb-source { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid rgb(var(--line-rgb) / .14); }
.jb-aside h2 { font-size: .95rem; margin: 0 0 .5rem; color: var(--head); }
.jb-aside > * + h2 { margin-top: 1.3rem; }
.jb-minis { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.jb-minis a { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 12px; text-decoration: none;
  color: var(--head); border: 1px solid var(--arcade-line); background: var(--arcade-card); }
.jb-minis a:hover { border-color: var(--arcade-accent); }
.jb-minis b { display: block; font-size: .88rem; color: var(--head); line-height: 1.3; }
.jb-minis small { color: var(--arcade-muted); font-size: .78rem; }
.jb-job-bar { display: none; }
@media (max-width: 860px) {
  .jb-job-body { grid-template-columns: 1fr; }
  .jb-job-head { grid-template-columns: auto 1fr; }
  .jb-job-cta { display: none; }
  /* Fixed, not sticky: iOS browsers slide their toolbars back in when you scroll up, and a sticky bar inside the page
     ends up under them. A fixed bar stays on the visible screen; the page keeps room for it at the bottom. */
  .jb-job-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: .75rem; align-items: center;
    justify-content: space-between; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--arcade-card); border-top: 1px solid var(--arcade-line); box-shadow: 0 -8px 24px rgb(var(--line-rgb) / .12); }
  .jb-job-bar span { min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jb-job-bar .jb-apply { flex: none; }
  body:has(.jb-job-bar) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }   /* room for the bar */
}
.jb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.jb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .9rem 1rem;
  border-radius: 16px; background: var(--arcade-card); border: 1px solid var(--arcade-line); transition: border-color .15s ease, transform .15s ease; }
.jb-row:hover { border-color: color-mix(in srgb, var(--arcade-accent) 45%, transparent); transform: translateY(-1px); }
.jb-mono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-weight: 800; font-size: .85rem;
  color: var(--paper); background: var(--arcade-accent); }
.jb-mono.hue-teal { background: var(--qt-teal); } .jb-mono.hue-green { background: var(--arcade-good); }
.jb-mono.has-logo { background: var(--paper); border: 1px solid rgb(var(--line-rgb) / .14); padding: .3rem; overflow: hidden; }
.jb-mono.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-theme="dark"] .jb-mono.has-logo { background: color-mix(in srgb, var(--head) 94%, transparent); }   /* logos are drawn for light backgrounds */
.jb-chip-logo { width: 1rem; height: 1rem; flex: none; object-fit: contain; border-radius: 3px; }
.jb-admin-logo { border-radius: 6px; border: 1px solid rgb(var(--line-rgb) / .14); }
.jb-title { font-weight: 700; color: var(--head); text-decoration: none; font-size: 1.02rem; }
.jb-title:hover { color: var(--arcade-accent); }
.jb-meta { margin: .15rem 0 .35rem; font-size: .88rem; color: var(--arcade-muted); }
.jb-meta b { color: var(--head); font-weight: 650; }
.jb-tags { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.jb-tag { padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgb(var(--hl) / .06); color: var(--arcade-muted); }
.jb-tag.r-trading { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-ink); }
.jb-tag.r-research { background: var(--accent-soft); color: var(--arcade-accent); }
.jb-tag.r-engineering { background: color-mix(in srgb, var(--qt-teal) 16%, transparent); color: var(--qt-teal); }
.jb-tag.new { background: var(--arcade-good); color: var(--paper); }
.jb-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.jb-when { font-size: .8rem; color: var(--arcade-faint); white-space: nowrap; }
.jb-apply { padding: .45rem 1rem; font-size: .9rem; }
.jb-empty { padding: 2rem 1rem; text-align: center; color: var(--arcade-muted); }
.jb-more-wrap { text-align: center; margin: 1rem 0; }
.jb-more-wrap [hidden] { display: none; }        /* .btn sets display, which beats the hidden attribute */
.jb-fine { margin-top: 1.5rem; }
.jb-consent { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .5rem; font-weight: 500 !important; }
@media (max-width: 640px) {
  .jb-row { grid-template-columns: auto minmax(0, 1fr); }
  .jb-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .jb-firms, .jb-row-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jb-firms .jb-chip, .jb-row-chips .jb-chip { flex: none; padding: .28rem .65rem; font-size: .86rem; }
  .jb-firms, .jb-row-chips { margin-right: -1rem; padding-right: 1rem; }          /* scroll to the card's edge */
}

/* ---------- Wide screens (Nov 8): use the width instead of a narrow column with empty sides. Everything here is inside
   min-width queries, so phones and tablets keep exactly the layout they had. ---------- */
@media (min-width: 1100px) {
  /* Landing: the headline beside the learn-the-game widget. */
  body.landing main { max-width: var(--wrap); display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  body.landing main > * { grid-column: 1 / -1; }
  /* Not sticky (Nov 9): a sticky element sticks for its whole parent, here all of <main>, so the headline slid under the
     testimonials and everything after it. tools/ui_check.js now catches this. */
  body.landing main > .learn-hero { grid-column: 1; text-align: left; align-items: flex-start;
    margin: 2.5rem 0 0; }
  body.landing main > .learn-hero h1, body.landing main > .learn-hero .hero-sub { margin-left: 0; margin-right: 0; }
  body.landing main > .learn { grid-column: 2; margin-top: 2rem; }
  /* A game's rules: the art as a tall panel beside the rules and level picker. */
  .ready.rules-page { max-width: 68rem; display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .rules-page .rp-art { height: auto; min-height: 100%; }
  .rp-body { padding: 2.2rem 2.6rem 2.4rem; }
  /* The job board: filters in a sticky column beside the list. */
  .jb:not(.jb-job) { max-width: none; display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .jb:not(.jb-job) > * { grid-column: 2; }
  .jb:not(.jb-job) > .jb-head, .jb:not(.jb-job) > .jb-news.lead { grid-column: 1 / -1; }
  .jb:not(.jb-job) > .jb-news.lead { grid-row: 2; }
  .jb:not(.jb-job) > .jb-filters { grid-column: 1; grid-row: 3 / span 5; position: sticky; top: 5rem;
    max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
  .jb-filters .jb-facet-h { display: block; margin: 1rem 0 .45rem; font-size: .8rem; font-weight: 700; color: var(--arcade-muted); }
  .jb-filters .jb-firms { border-top: 0; padding-top: 0; }
  .jb-filters .jb-row-chips, .jb-filters .jb-firms { margin: 0; }
  .jb-job { max-width: none; }
  .jb-job-body { grid-template-columns: minmax(0, 1fr) 22rem; }
  /* Signed-in home: let the side column grow with the page. */
  .home-side { max-width: 56rem; }
}
@media (min-width: 1280px) {
  /* Puzzles: two columns of rows in each topic. */
  body.study .section > .qlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

/* ---------- Club Battle (#/clubs; docs/clubs.md) ---------- */
.cb-head { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 2rem; margin-bottom: 1.4rem; }
.cb-head h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; color: var(--head); }
.cb-head p { margin: .35rem 0 0; color: var(--arcade-muted); font-size: 1.05rem; max-width: 40rem; }
.cb-season { margin-left: auto; text-align: right; }
.cb-season b { display: block; font-size: 1.05rem; color: var(--head); }
.cb-season span { color: var(--arcade-dim); font-size: .9rem; }
.cb-tabs { display: inline-flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgb(var(--hl) / .06); margin-bottom: 1.4rem; }
.cb-tabs a { white-space: nowrap; padding: .4rem 1rem; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--arcade-muted); text-decoration: none; }
.cb-tabs a.on { background: var(--arcade-card); color: var(--head); box-shadow: 0 1px 4px rgb(var(--hl) / .12); }
.hof { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.hof-month { background: var(--arcade-card); border: 1px solid var(--arcade-line); border-radius: 18px; padding: 1.1rem 1.2rem; }
.hof-month h2 { margin: 0 0 .8rem; font-size: 1.15rem; color: var(--head); }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.hof-card { display: flex; gap: .75rem; align-items: center; min-width: 0; padding: .85rem 1rem; border-radius: 16px; background: rgb(var(--hl) / .04); border: 1px solid var(--arcade-line); }
.hof-card > div { min-width: 0; }
.hof-card b { color: var(--head); overflow-wrap: anywhere; }
.hof-card a { color: inherit; text-decoration: none; }
.hof-card a:hover b { text-decoration: underline; }
.hof-card small { display: block; color: var(--arcade-dim); font-size: .78rem; }
.hof-card small:first-child { font-weight: 700; color: var(--arcade-muted); }
.hof-card.gold { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--arcade-card)); }
.hof-card.gold small:first-child { color: var(--gold-ink, var(--gold)); }
.hof-q { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; border: 2px dashed rgb(var(--line-rgb) / .35); color: var(--arcade-dim); font-weight: 900; }
.hof-empty { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.hof-lede { margin: 0; color: var(--arcade-muted); max-width: 44rem; }
.hof-lede b { color: var(--head); }
.cb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1rem; align-items: end; margin-bottom: 1.6rem; }
.cb-p { border-radius: 22px; padding: 1.2rem 1.2rem 1.3rem; background: var(--arcade-card); border: 1px solid var(--arcade-line); display: grid; gap: .45rem; justify-items: center; text-align: center; min-width: 0; }
.cb-p.first { background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 60%), var(--felt);
  color: var(--felt-ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); padding-top: 1.6rem; padding-bottom: 1.6rem; }
.cb-p .place { font-size: .8rem; font-weight: 800; color: var(--arcade-dim); }
.cb-p.first .place { color: var(--gold); }
.club-mono.big { min-width: 3.4rem; height: 3.4rem; border-radius: 16px; font-size: .95rem; }
.cb-p.first .club-mono.big { min-width: 4.2rem; height: 4.2rem; font-size: 1.1rem; box-shadow: 0 0 0 3px var(--gold); }
.club-mono.has-logo.big { width: 3.4rem; min-width: 0; }
.cb-p.first .club-mono.has-logo.big { width: 4.2rem; }
.cb-p .name { font-weight: 800; font-size: 1.02rem; color: var(--head); overflow-wrap: anywhere; }
.cb-p.first .name { color: var(--felt-ink); font-size: 1.15rem; }
.cb-p .pts { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; color: var(--head); font-variant-numeric: tabular-nums; }
.cb-p.first .pts { color: var(--gold); font-size: 2.4rem; }
.cb-p .meta { font-size: .82rem; color: var(--arcade-dim); }
.cb-p.first .meta { color: var(--felt-muted); }
.cb-you { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 18px; margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--arcade-accent) 8%, var(--arcade-card)); border: 1.5px solid color-mix(in srgb, var(--arcade-accent) 45%, transparent); }
.cb-you.join { grid-template-columns: 1fr auto; }
.cb-you b { color: var(--head); }
.cb-you .sub { color: var(--arcade-muted); font-size: .92rem; margin-top: .15rem; }
.cb-you .gain { font-weight: 900; font-size: 1.5rem; color: var(--arcade-accent); text-align: right; }
.cb-you .gain small { display: block; font-size: .78rem; font-weight: 700; color: var(--arcade-dim); }
.cb-table { width: 100%; border-collapse: separate; border-spacing: 0 .45rem; }
.cb-table th { text-align: left; font-size: .78rem; font-weight: 700; color: var(--arcade-dim); padding: 0 .8rem; }
.cb-table td { background: var(--arcade-card); padding: .75rem .8rem; border-top: 1px solid var(--arcade-line); border-bottom: 1px solid var(--arcade-line); color: var(--arcade-ink); vertical-align: middle; }
.cb-table td:first-child { border-left: 1px solid var(--arcade-line); border-radius: 14px 0 0 14px; font-weight: 900; color: var(--head); width: 3rem; text-align: center; }
.cb-table td:last-child { border-right: 1px solid var(--arcade-line); border-radius: 0 14px 14px 0; }
.cb-table tr.mine td { background: color-mix(in srgb, var(--arcade-accent) 7%, var(--arcade-card)); border-color: color-mix(in srgb, var(--arcade-accent) 40%, transparent); }
.cb-club { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cb-club b { color: var(--head); }
.cb-club a.cb-name, .cb-p a.name, .cb-you a { color: inherit; text-decoration: none; }
.cb-club a.cb-name:hover b, .cb-p a.name:hover, .cb-you a:hover { text-decoration: underline; }
.cb-club small { display: block; color: var(--arcade-dim); font-size: .78rem; }
.mv { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.mv.up { color: var(--arcade-good); } .mv.down { color: var(--arcade-flame); } .mv.same, .mv.new { color: var(--arcade-dim); }
.cb-pts { font-weight: 900; font-size: 1.1rem; color: var(--head); font-variant-numeric: tabular-nums; }
.cb-table .bar { display: block; height: .4rem; width: 9rem; max-width: 100%; border-radius: 99px; background: rgb(var(--hl) / .08); overflow: hidden; margin-top: .3rem; }
.cb-table .bar i { display: block; height: 100%; background: var(--arcade-accent); border-radius: inherit; }
.cb-how { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px dashed var(--arcade-line); color: var(--arcade-muted); font-size: .93rem; }
.cb-how summary { cursor: pointer; }
.cb-how b { color: var(--head); }
.club-result { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.club-result .club-mono { min-width: 2rem; height: 2rem; font-size: .65rem; }
.club-result .club-mono.has-logo { width: 2rem; min-width: 0; }
@media (max-width: 760px) {
  .cb-podium { grid-template-columns: 1fr; }
  .cb-tabs { max-width: 100%; }
  .cb-tabs a { padding: .4rem .75rem; font-size: .88rem; }
  .cb-p:not(.first) { display: none; }          /* the table right below has them; keep the first screen short */
  .cb-season { margin-left: 0; text-align: left; }
  .cb-table .hide-sm { display: none; }
  .cb-you { grid-template-columns: auto 1fr; }
  .cb-you .gain { grid-column: 1 / -1; text-align: left; }
  .cb-you.join { grid-template-columns: 1fr; }
  .cb-table { table-layout: fixed; }
  .cb-table th:first-child, .cb-table td:first-child { width: 2.2rem; }
  .cb-table th:nth-child(3) { width: 5.6rem; }
  .cb-table th:last-child { width: 3.4rem; }
  .cb-table .bar { width: 4.5rem; }
  .cb-table td, .cb-table th { padding: .65rem .45rem; }
  .cb-club { gap: .5rem; }
  .cb-club b { overflow-wrap: anywhere; }
  .cb-club .club-mono { min-width: 2rem; height: 2rem; font-size: .62rem; }
  .cb-club .club-mono.has-logo { width: 2rem; min-width: 0; }
}
/* A small floating note on the home pages (a fix players should know of); × hides it for good. */
.site-notice { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 55; width: min(22rem, calc(100vw - 32px)); padding: .9rem 2.4rem .95rem 1rem; border-radius: 16px;
  background: var(--paper); color: var(--ink); border: 1px solid rgb(var(--line-rgb) / .14);
  box-shadow: 0 18px 40px -20px rgb(15 23 42 / .45); animation: sn-in .35s ease-out; }
.site-notice b { display: block; margin-top: .45rem; color: var(--head); }
.site-notice p { margin: .25rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.sn-pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sn-x { position: absolute; top: .45rem; right: .5rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sn-x:hover { background: rgb(var(--hl) / .06); color: var(--head); }
body.has-carry-on .site-notice { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@keyframes sn-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .site-notice { animation: none; } }
/* A tournament's sign-in nudge for guests (Nov 11): name on the leaderboard, back to the same page after. */
.t-signin { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  margin: .8rem 0; padding: .75rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--felt-ink) 8%, transparent); }
.t-signin p { margin: 0; flex: 1 1 16rem; }
.t-start-sub { margin-top: .5rem; }

/* Mock interviews on the job board (Nov 14; docs/mock-interviews.md): the card at the top of the list, one inside
   the list, the card on a job's page, the line under Apply and the note after applying. Felt and gold, like the offer. */
.mock-offer.jobs { align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.mock-offer.jobs .mo-text { flex: 1 1 24rem; }
.mock-offer.jobs h2 { margin-top: .25rem; }
.mock-offer.jobs p { line-height: 1.55; }
.mo-k { color: var(--gold) !important; font-weight: 700; font-size: .85rem; }
.mo-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.mo-price { color: var(--felt-ink); font-weight: 700; font-size: .95rem; }
.jb-mock { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
  margin: .4rem 0; padding: 1rem 1.2rem; border-radius: 16px; background: var(--felt); color: var(--felt-ink); }
.jb-mock > div { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 20rem; }
.jb-mock small { color: var(--gold); font-weight: 700; }
.jb-mock b { font-size: 1.05rem; }
.jb-mock span { color: var(--felt-muted); font-size: .92rem; line-height: 1.5; }
.jb-mock .btn, .jb-mockcard .btn, .jb-applied .btn { background: var(--gold); border-color: var(--gold); color: var(--felt); font-weight: 700; }
.jb-mockcard { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.2rem 1.25rem; margin-bottom: 1rem;
  border-radius: 18px; background: var(--felt); color: var(--felt-ink); }
.jb-mockcard small { color: var(--gold); font-weight: 700; }
.jb-mockcard h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--felt-ink); }
.jb-mockcard p { margin: 0; color: var(--felt-muted); font-size: .92rem; line-height: 1.55; }
.jb-mockcard-price { color: var(--felt-muted); font-size: .85rem; }
.jb-mocklink { display: block; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--accent); }
.jb-applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.2rem; margin: .4rem 0 1rem;
  padding: .95rem 1.2rem; border-radius: 16px; background: var(--felt); color: var(--felt-ink); }
.jb-applied p { margin: 0; flex: 1 1 22rem; display: flex; flex-direction: column; gap: .15rem; }
.jb-applied span { color: var(--felt-muted); font-size: .92rem; }
@media (max-width: 720px) {
  .mock-offer.jobs { align-items: stretch; }
  .mock-offer.jobs .mo-text { flex: none; }                 /* stacked: the desktop basis would become a height */
  .mock-offer.jobs .mo-side { align-items: stretch; }
}