/* ═══════════════════════════════════════════════════════════════════════════
   career.css — Throw Career Mode (web)

   Everything namespaced .cr- to avoid collisions with the site's global
   stylesheet. Visual language is the approved mock-ups:
     - cream and paper outside a match (#f2efe8 / #fffefb)
     - the lights go down for build-up / match / result (#121517, oxblood glow)
     - Bebas Neue for display, DM Sans for body
     - money is directional: outgoings oxblood #99231a with −,
       income green #1e7a3e with +; bright red #d5372a for warnings only
   ═══════════════════════════════════════════════════════════════════════ */

.cr-app {
  --cr-bg: #f2efe8;
  --cr-surface: #fffefb;
  --cr-surfaceAlt: #faf7f0;
  --cr-text: #121517;
  --cr-muted: rgba(18, 21, 23, .70);
  --cr-faint: rgba(18, 21, 23, .45);
  --cr-border: rgba(18, 21, 23, .10);
  --cr-borderStrong: rgba(18, 21, 23, .16);
  --cr-brand: #99231a;          /* oxblood: outgoing money, defeat */
  --cr-brandPressed: #701812;
  --cr-brandWash: rgba(153, 35, 26, .12);
  --cr-danger: #d5372a;         /* warnings only */
  --cr-amber: #a8730c;
  --cr-success: #1e7a3e;        /* money in, a win */
  --cr-dark: #121517;
  --cr-paper: #fdfaf2;
  --cr-bebas: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--cr-text);
  background: var(--cr-bg);
  max-width: 720px;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
  position: relative;
}

.cr-app * { box-sizing: border-box; }
.cr-app a { text-decoration: none; color: inherit; }
.cr-app button { font-family: inherit; cursor: pointer; }

/* ── views ──────────────────────────────────────────────────────────────── */
.cr-view { display: none; }
.cr-view.cr-on { display: block; animation: crFade .22s ease; }
@keyframes crFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* dark views (build-up, match, result) — the lights go down */
.cr-view-dark {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(153, 35, 26, .42), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(153, 35, 26, .20), transparent 60%),
    linear-gradient(180deg, #191d21 0%, #0d1013 55%, #121517 100%);
  color: #f2efe8;
  min-height: calc(100vh - 60px);
  position: relative;
  overflow: hidden;
}
.cr-view-dark.cr-won-glow {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(30, 122, 62, .36), transparent 60%),
    linear-gradient(180deg, #191d21, #0d1013 60%, #121517);
}
/* crowd speckle across the top of the arena */
.cr-view-dark::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 40%, rgba(242, 239, 232, .5), transparent),
    radial-gradient(1.5px 1.5px at 30% 22%, rgba(242, 239, 232, .35), transparent),
    radial-gradient(1.5px 1.5px at 47% 55%, rgba(242, 239, 232, .4), transparent),
    radial-gradient(1.5px 1.5px at 66% 28%, rgba(242, 239, 232, .3), transparent),
    radial-gradient(1.5px 1.5px at 82% 48%, rgba(242, 239, 232, .45), transparent),
    radial-gradient(1.5px 1.5px at 92% 18%, rgba(242, 239, 232, .3), transparent),
    radial-gradient(1.5px 1.5px at 21% 68%, rgba(242, 239, 232, .25), transparent),
    radial-gradient(1.5px 1.5px at 57% 12%, rgba(242, 239, 232, .35), transparent);
}
.cr-dark-in { position: relative; padding: 18px 16px 24px; }

/* entrance animations for the build-up */
.cr-rise { opacity: 0; transform: translateY(14px); animation: crRise .62s cubic-bezier(.2, .7, .25, 1) forwards; }
@keyframes crRise { to { opacity: 1; transform: none; } }
.cr-slideL { opacity: 0; transform: translateX(-40px); animation: crInL .6s cubic-bezier(.16, .8, .24, 1) forwards; }
.cr-slideR { opacity: 0; transform: translateX(40px); animation: crInR .6s cubic-bezier(.16, .8, .24, 1) forwards; }
@keyframes crInL { to { opacity: 1; transform: none; } }
@keyframes crInR { to { opacity: 1; transform: none; } }
.cr-pop { opacity: 0; transform: scale(.6); animation: crPop .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes crPop { to { opacity: 1; transform: none; } }

/* ── shared cream primitives ────────────────────────────────────────────── */
.cr-top {
  background: var(--cr-dark); color: #fff; padding: 16px 18px 20px;
}
.cr-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cr-kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; }
.cr-top-name { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 24px; margin-top: 3px; line-height: 1.12; }
.cr-nick {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em;
  color: var(--cr-danger); text-transform: uppercase; margin-top: 3px; font-family: 'DM Sans', sans-serif;
}
.cr-nick::before { content: '“'; } .cr-nick::after { content: '”'; }
.cr-diffchip {
  font-size: 9.5px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase;
  border: 1.5px solid var(--cr-danger); color: #ff9c90; padding: 4px 9px; border-radius: 100px; white-space: nowrap;
}
.cr-standing { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
.cr-stat .cr-k { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 700; }
.cr-stat .cr-v { font-size: 21px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }
.cr-stat .cr-v small { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.cr-up { color: #6ee7a0; font-size: 11px; font-weight: 700; }
.cr-down { color: #ff9c90; font-size: 11px; font-weight: 700; }
.cr-bal-low { color: #ffb4a8; }

/* season goal — always the current rung's target */
.cr-goal { background: var(--cr-brand); color: #fff; padding: 13px 18px; }
.cr-goal .cr-gt { font-size: 11.5px; font-weight: 700; }
.cr-goal .cr-gs { font-size: 11px; color: rgba(255, 255, 255, .75); margin-top: 2px; }
.cr-goal .cr-bar { height: 6px; background: rgba(255, 255, 255, .24); border-radius: 100px; margin-top: 9px; overflow: hidden; }
.cr-goal .cr-bar i { display: block; height: 100%; background: #fff; border-radius: 100px; }
.cr-goal .cr-barlabels { display: flex; justify-content: space-between; font-size: 9.5px; color: rgba(255, 255, 255, .7); margin-top: 5px; font-weight: 600; }

.cr-body { padding: 16px 14px 90px; display: flex; flex-direction: column; gap: 13px; }
.cr-card { background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 14px; overflow: hidden; }
.cr-card-h { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 0; }
.cr-card-h h3 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin: 0; }
.cr-link { font-size: 11px; color: var(--cr-brand); font-weight: 700; background: none; border: 0; padding: 0; }

.cr-btn {
  display: block; width: 100%; text-align: center; padding: 13px; border-radius: 11px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; border: 0;
}
.cr-btn-primary { background: var(--cr-brand); color: #fff; }
.cr-btn-primary:active { background: var(--cr-brandPressed); }
.cr-btn-ghost { background: transparent; border: 1.5px solid var(--cr-borderStrong); color: var(--cr-text); }
.cr-btn-disabled { background: rgba(18, 21, 23, .14); color: var(--cr-faint); pointer-events: none; }
.cr-btn-row { display: flex; gap: 8px; }
.cr-btn-row .cr-btn-ghost { flex: 0 0 108px; }
.cr-btn-row .cr-btn-primary { flex: 1; }

/* money discipline — always directional, always signed */
.cr-money-out { color: var(--cr-brand); font-weight: 800; }
.cr-money-in { color: var(--cr-success); font-weight: 800; }

/* ── hub: next event card ───────────────────────────────────────────────── */
.cr-ev-pad { padding: 14px; }
.cr-ev-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cr-ev-name { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 20px; line-height: 1.15; }
.cr-ev-when { font-size: 11.5px; color: var(--cr-muted); margin-top: 4px; }
.cr-ev-badge {
  background: var(--cr-brandWash); color: var(--cr-brand); font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
}
.cr-ev-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cr-border);
  border: 1px solid var(--cr-border); border-radius: 10px; overflow: hidden; margin-top: 13px;
}
.cr-ev-cell { background: var(--cr-surfaceAlt); padding: 9px 10px; }
.cr-ev-cell .cr-k { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-ev-cell .cr-v { font-size: 14px; font-weight: 800; margin-top: 3px; }
.cr-ev-cell .cr-v.cr-warn { color: var(--cr-brand); }
.cr-field { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--cr-muted); }
.cr-fieldbar { flex: 1; height: 5px; background: rgba(18, 21, 23, .09); border-radius: 100px; position: relative; }
.cr-fieldbar i { position: absolute; top: 0; bottom: 0; background: var(--cr-amber); border-radius: 100px; }
.cr-fieldbar u { position: absolute; top: -4px; width: 2px; height: 13px; background: var(--cr-dark); border-radius: 2px; }

/* ── press card (hub) ───────────────────────────────────────────────────── */
.cr-press { background: var(--cr-paper); border: 1px solid var(--cr-borderStrong); border-radius: 14px; overflow: hidden; }
.cr-press-mast { background: var(--cr-dark); color: var(--cr-paper); padding: 6px 14px; display: flex; justify-content: space-between; align-items: center; }
.cr-press-mast b { font-family: var(--cr-bebas); font-size: 13px; letter-spacing: .06em; font-weight: 700; }
.cr-press-mast span { font-size: 9px; letter-spacing: .1em; color: rgba(255, 255, 255, .55); font-weight: 700; }
.cr-press-body { padding: 13px 14px 14px; }
.cr-headline {
  font-family: var(--cr-bebas); font-size: 30px; line-height: .96; letter-spacing: .005em;
  text-transform: uppercase; color: var(--cr-text);
}
.cr-standfirst {
  font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 13px; line-height: 1.45; color: var(--cr-muted);
  margin-top: 8px; border-left: 3px solid var(--cr-brand); padding-left: 9px;
}
.cr-press-foot { display: flex; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--cr-borderStrong); flex-wrap: wrap; }
.cr-react { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.cr-react .cr-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── meters (fans / form) ───────────────────────────────────────────────── */
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cr-meter { padding: 12px 13px 13px; }
.cr-meter .cr-k { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-meter .cr-v { font-size: 19px; font-weight: 800; margin-top: 5px; display: flex; align-items: baseline; gap: 6px; }
.cr-meter .cr-v em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--cr-faint); }
.cr-mbar { height: 5px; background: rgba(18, 21, 23, .09); border-radius: 100px; margin-top: 9px; overflow: hidden; }
.cr-mbar i { display: block; height: 100%; border-radius: 100px; }
.cr-meter .cr-sub { font-size: 10.5px; color: var(--cr-faint); margin-top: 7px; line-height: 1.35; }

/* recent form squares */
.cr-form { display: flex; gap: 5px; padding: 0 14px 13px; align-items: center; }
.cr-f { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; }
.cr-f.cr-w { background: var(--cr-success); }
.cr-f.cr-l { background: rgba(18, 21, 23, .28); }
.cr-form-note { margin-left: auto; font-size: 11px; color: var(--cr-faint); }

/* ── sponsor rows + happiness pips ──────────────────────────────────────── */
.cr-sp { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--cr-border); }
.cr-sp:first-of-type { border-top: 0; }
.cr-sp-logo {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--cr-bebas); font-size: 14px; color: #fff; flex: none; background: var(--cr-dark);
}
.cr-sp-name { font-size: 13.5px; font-weight: 700; }
.cr-sp-terms { font-size: 11px; color: var(--cr-faint); margin-top: 1px; }
.cr-sp-state { margin-left: auto; text-align: right; flex: none; }
.cr-sp-state .cr-s { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cr-pips { display: flex; gap: 2.5px; margin-top: 4px; justify-content: flex-end; }
.cr-pips i { width: 12px; height: 4px; border-radius: 2px; background: rgba(18, 21, 23, .13); }

/* ── rival row ──────────────────────────────────────────────────────────── */
.cr-rival { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.cr-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--cr-dark); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none;
}
.cr-avatar.cr-grudge-ring { border: 2px solid var(--cr-danger); }
.cr-rival-n { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-tag {
  background: var(--cr-danger); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 5px; border-radius: 4px; text-transform: uppercase;
}
.cr-tag.cr-tag-ally { background: var(--cr-success); }
.cr-rival-s { font-size: 11px; color: var(--cr-muted); margin-top: 2px; }
.cr-rival-s b { color: var(--cr-danger); letter-spacing: .08em; font-size: 10px; }
.cr-rival-r { margin-left: auto; text-align: right; }
.cr-rival-r .cr-k { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-rival-r .cr-v { font-size: 16px; font-weight: 800; margin-top: 2px; }

/* ── calendar ───────────────────────────────────────────────────────────── */
.cr-budget { background: var(--cr-surface); border-bottom: 1px solid var(--cr-border); padding: 12px 16px 13px; position: sticky; top: 60px; z-index: 5; }
.cr-brow { display: flex; align-items: flex-end; gap: 14px; }
.cr-bcell .cr-k { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-bcell .cr-v { font-size: 17px; font-weight: 800; margin-top: 2px; letter-spacing: -.02em; }
.cr-bcell.cr-right { margin-left: auto; text-align: right; }
.cr-bbar { height: 7px; background: rgba(18, 21, 23, .09); border-radius: 100px; margin-top: 10px; overflow: hidden; display: flex; }
.cr-bbar i { display: block; height: 100%; transition: width .25s; background: var(--cr-brand); }
.cr-bnote { font-size: 10.5px; margin-top: 7px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cr-bnote .cr-d { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.cr-mo { display: flex; align-items: center; gap: 10px; margin: 16px 2px 8px; }
.cr-mo .cr-m { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 15px; }
.cr-mo .cr-ln { flex: 1; height: 1px; background: var(--cr-border); }
.cr-mo .cr-n { font-size: 10px; color: var(--cr-faint); font-weight: 700; }

.cr-cal-ev {
  background: var(--cr-surface); border: 1.5px solid var(--cr-border); border-radius: 14px; padding: 12px 13px;
  margin-top: 8px; display: flex; gap: 12px; cursor: pointer; transition: .15s; position: relative;
}
.cr-cal-ev:hover { border-color: var(--cr-borderStrong); }
.cr-cal-ev.cr-sel { border-color: var(--cr-success); background: #f6fbf7; }
.cr-cal-ev.cr-done { opacity: .72; cursor: default; background: var(--cr-surfaceAlt); }
.cr-cal-ev.cr-locked { cursor: not-allowed; background: var(--cr-surfaceAlt); border-style: dashed; }
.cr-cal-ev.cr-locked .cr-cal-nm, .cr-cal-ev.cr-locked .cr-cal-vn { color: var(--cr-faint); }
.cr-date { width: 46px; flex: none; text-align: center; border-right: 1px solid var(--cr-border); padding-right: 11px; }
.cr-date .cr-d { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 20px; line-height: 1; }
.cr-date .cr-w { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin-top: 3px; }
.cr-cal-mid { flex: 1; min-width: 0; }
.cr-cal-nm { font-size: 14px; font-weight: 800; line-height: 1.2; }
.cr-cal-vn { font-size: 11px; color: var(--cr-muted); margin-top: 3px; }
.cr-chips { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.cr-chip {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 5px; background: rgba(18, 21, 23, .06); color: var(--cr-muted);
}
.cr-chip.cr-chip-rank { background: rgba(153, 35, 26, .1); color: var(--cr-brand); }
.cr-chip.cr-chip-field { background: rgba(168, 115, 12, .12); color: var(--cr-amber); }
.cr-chip.cr-chip-share { background: rgba(30, 122, 62, .12); color: var(--cr-success); }
.cr-cal-rt { flex: none; text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.cr-cost { font-size: 15px; font-weight: 800; color: var(--cr-brand); }
.cr-cost em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); display: block; margin-bottom: 2px; }
.cr-cost small { display: block; font-size: 9.5px; font-weight: 700; color: var(--cr-faint); margin-top: 2px; }
.cr-prize { font-size: 11px; color: var(--cr-success); font-weight: 800; margin-top: 8px; }
.cr-prize em { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); display: block; margin-bottom: 2px; font-weight: 800; }
.cr-res-lbl { font-size: 11px; font-weight: 800; margin-top: 6px; text-align: right; }
.cr-lock-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--cr-faint); text-align: right; line-height: 1.35; max-width: 110px; }
.cr-lock-lbl .cr-you { color: var(--cr-amber); }
.cr-bgnote {
  background: var(--cr-surfaceAlt); border: 1px dashed var(--cr-borderStrong); border-radius: 12px;
  padding: 10px 12px; margin-top: 8px; font-size: 11px; color: var(--cr-faint); line-height: 1.4;
}
.cr-bgnote b { color: var(--cr-muted); }
.cr-cal-cta { position: sticky; bottom: 0; background: var(--cr-surface); border-top: 1px solid var(--cr-border); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }

/* ── build-up (dark) ────────────────────────────────────────────────────── */
.cr-bu-evt { text-align: center; }
.cr-bu-evt .cr-e1 { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(242, 239, 232, .5); font-weight: 800; }
.cr-bu-evt .cr-e2 { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 24px; margin-top: 5px; }
.cr-bu-evt .cr-e3 { font-size: 11px; color: rgba(242, 239, 232, .55); margin-top: 4px; }
.cr-grudge {
  margin: 14px auto 0; display: inline-flex; align-items: center; gap: 7px; background: var(--cr-danger);
  padding: 5px 12px; border-radius: 100px; font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; box-shadow: 0 0 22px rgba(213, 55, 42, .5); color: #fff;
}
.cr-grudge .cr-pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: crBlink 1.3s infinite; }
@keyframes crBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cr-cent { text-align: center; }

.cr-vs { display: flex; align-items: stretch; margin-top: 20px; gap: 8px; }
.cr-pl { flex: 1; text-align: center; min-width: 0; }
.cr-pl .cr-av {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  font-size: 23px; font-weight: 800; font-family: var(--cr-bebas);
  background: linear-gradient(150deg, #2b3036, #171b1f); border: 2.5px solid rgba(242, 239, 232, .22); color: #f2efe8;
}
.cr-pl.cr-me .cr-av { border-color: var(--cr-danger); box-shadow: 0 0 26px rgba(213, 55, 42, .42); }
.cr-pl .cr-seed { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .45); font-weight: 800; margin-top: 10px; }
.cr-pl .cr-nm { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 17px; margin-top: 3px; line-height: 1.15; }
.cr-pl .cr-nk { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-danger); margin-top: 4px; }
.cr-pl .cr-nk::before { content: '“'; } .cr-pl .cr-nk::after { content: '”'; }
.cr-pl .cr-av3 { font-size: 20px; font-weight: 800; margin-top: 9px; letter-spacing: -.02em; }
.cr-pl .cr-av3 span { font-size: 9.5px; font-weight: 700; color: rgba(242, 239, 232, .45); letter-spacing: .1em; display: block; margin-top: 1px; }
.cr-frm { display: flex; gap: 3px; justify-content: center; margin-top: 9px; }
.cr-frm i {
  width: 15px; height: 15px; border-radius: 4px; font-style: normal; font-size: 8.5px; font-weight: 800;
  display: grid; place-items: center; color: #fff;
}
.cr-frm i.cr-w { background: var(--cr-success); }
.cr-frm i.cr-l { background: rgba(242, 239, 232, .2); }
.cr-mid-vs { width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cr-vsx { font-family: var(--cr-bebas); font-size: 26px; color: rgba(242, 239, 232, .3); font-style: italic; }

.cr-h2h { margin-top: 22px; background: rgba(242, 239, 232, .05); border: 1px solid rgba(242, 239, 232, .11); border-radius: 13px; padding: 12px 14px; }
.cr-h2h .cr-lab { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 232, .45); font-weight: 800; text-align: center; }
.cr-h2hbar { display: flex; height: 7px; border-radius: 100px; overflow: hidden; margin-top: 9px; background: rgba(242, 239, 232, .12); }
.cr-h2hbar b { display: block; }
.cr-h2hnum { display: flex; justify-content: space-between; margin-top: 7px; font-size: 15px; font-weight: 800; }
.cr-h2hnum span { font-size: 9.5px; font-weight: 700; color: rgba(242, 239, 232, .45); letter-spacing: .08em; }
.cr-lasttime { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(242, 239, 232, .1); font-size: 10.5px; color: rgba(242, 239, 232, .55); text-align: center; }
.cr-lasttime b { color: #f2efe8; }

.cr-strip { margin-top: 12px; background: var(--cr-paper); color: var(--cr-text); border-radius: 11px; overflow: hidden; display: flex; }
.cr-strip .cr-stag {
  background: var(--cr-dark); color: var(--cr-paper); font-size: 8.5px; font-weight: 800; letter-spacing: .12em;
  padding: 11px 8px; writing-mode: vertical-rl; text-orientation: mixed; display: grid; place-items: center;
}
.cr-strip .cr-stxt { padding: 10px 12px; }
.cr-strip .cr-sh { font-family: var(--cr-bebas); text-transform: uppercase; font-size: 19px; line-height: .98; }
.cr-strip .cr-ss { font-size: 10px; color: rgba(18, 21, 23, .55); margin-top: 4px; }

.cr-stake {
  margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: rgba(242, 239, 232, .13); border: 1px solid rgba(242, 239, 232, .13); border-radius: 12px; overflow: hidden;
}
.cr-stk { background: #12161a; padding: 10px 8px; text-align: center; }
.cr-stk .cr-k { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 239, 232, .45); font-weight: 800; }
.cr-stk .cr-v { font-size: 14px; font-weight: 800; margin-top: 4px; }
.cr-stk .cr-v.cr-g { color: #6ee7a0; }
.cr-walkon { margin-top: 22px; }
.cr-walkon .cr-btn {
  background: var(--cr-danger); color: #fff; padding: 16px; border-radius: 13px;
  font-size: 16px; letter-spacing: .04em; box-shadow: 0 8px 26px rgba(213, 55, 42, .36);
}
.cr-walkon-sub { text-align: center; font-size: 10.5px; color: rgba(242, 239, 232, .42); margin-top: 10px; }

/* ── match (dark) ───────────────────────────────────────────────────────── */
.cr-m-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cr-m-evt { min-width: 0; }
.cr-m-e1 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 239, 232, .5); font-weight: 800; }
.cr-m-e2 { font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .02em; margin-top: 2px; }
.cr-m-quit {
  background: transparent; border: 1.5px solid rgba(242, 239, 232, .25); color: rgba(242, 239, 232, .75);
  border-radius: 9px; padding: 8px 13px; font-size: 11.5px; font-weight: 800;
}
.cr-m-quit:hover { border-color: var(--cr-danger); color: #ff9c90; }
.cr-m-banner {
  text-align: center; font-family: var(--cr-bebas); font-size: 22px; letter-spacing: .06em; height: 30px;
  color: #6ee7a0; opacity: 0; transition: opacity .25s; margin-top: 6px;
}
.cr-m-banner.cr-m-banner-show { opacity: 1; }
/* The pre-parity scorer's CSS (the .cr-m-grid / .cr-m-side / .cr-m-score /
   .cr-m-log family, and the old #crMatchKeypad host) was DELETED here, not
   left dormant (live regression, 2026-08-15, screenshot evidence). While
   those rules shipped, a stale cached career-match.js still emitting the
   old DOM got the rejected side-by-side panel scorer back fully styled —
   polished enough to reach a play-test instead of failing loudly. With the
   rules gone, the only scorer that can render styled is career-match.js's
   parity board (game.css's .x01-board column). Do not reintroduce any of
   it; the parity harness now fails if those class names reappear in CSS
   or in the live DOM. */

/* ── result (dark, oxblood for a loss — a result, not an error) ─────────── */
.cr-verdict { text-align: center; }
.cr-verdict .cr-word { font-family: var(--cr-bebas); font-size: 54px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.cr-verdict .cr-word.cr-won { color: #6ee7a0; }
.cr-verdict .cr-word.cr-lost { color: #d0655a; }
.cr-verdict .cr-sc { font-family: var(--cr-bebas); font-size: 44px; margin-top: 8px; letter-spacing: .02em; }
.cr-verdict .cr-sc em { font-style: normal; color: rgba(242, 239, 232, .35); font-size: 30px; margin: 0 4px; }
.cr-verdict .cr-who { font-size: 12px; color: rgba(242, 239, 232, .6); margin-top: 6px; }
.cr-verdict .cr-who b { color: #f2efe8; }
.cr-earned { margin: 18px 0 0; border-radius: 13px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.cr-earned.cr-earn-won { background: rgba(30, 122, 62, .16); border: 1px solid rgba(110, 231, 160, .3); }
.cr-earned.cr-earn-lost { background: rgba(153, 35, 26, .16); border: 1px solid rgba(153, 35, 26, .42); }
.cr-earned .cr-big { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cr-earned.cr-earn-won .cr-big { color: #6ee7a0; }
.cr-earned.cr-earn-lost .cr-big { color: #e8b4ac; }
.cr-earned .cr-tx { font-size: 11.5px; color: rgba(242, 239, 232, .72); line-height: 1.35; }
.cr-earned .cr-tx b { color: #f2efe8; }

.cr-cmp { margin-top: 18px; background: rgba(242, 239, 232, .05); border: 1px solid rgba(242, 239, 232, .11); border-radius: 13px; overflow: hidden; }
.cr-cmp-h { display: flex; padding: 9px 14px; background: rgba(242, 239, 232, .06); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.cr-cmp-h .cr-l { flex: 1; color: rgba(242, 239, 232, .5); }
.cr-cmp-h .cr-c { width: 96px; }
.cr-cmp-h .cr-r { flex: 1; text-align: right; color: rgba(242, 239, 232, .5); }
.cr-cmp-row { display: flex; align-items: center; padding: 9px 14px; border-top: 1px solid rgba(242, 239, 232, .08); }
.cr-cmp-row .cr-l, .cr-cmp-row .cr-r { flex: 1; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.cr-cmp-row .cr-r { text-align: right; }
.cr-cmp-row .cr-c { width: 96px; text-align: center; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 239, 232, .4); font-weight: 800; }
/* comparative colouring, direction respected. The loss red is lightened —
   true oxblood on near-black is close to unreadable. */
.cr-cmp-row .cr-better { color: #6ee7a0; }
.cr-cmp-row .cr-worse { color: #ff8a7a; }
.cr-cmp-row .cr-level { color: rgba(242, 239, 232, .5); }

.cr-conseq { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cr-cq { display: flex; align-items: center; gap: 10px; background: rgba(242, 239, 232, .05); border: 1px solid rgba(242, 239, 232, .1); border-radius: 11px; padding: 10px 13px; }
.cr-cq .cr-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; color: #fff; }
.cr-cq .cr-t { font-size: 12px; line-height: 1.3; }
.cr-cq .cr-t span { display: block; font-size: 10.5px; color: rgba(242, 239, 232, .5); margin-top: 1px; }
.cr-cq .cr-v { margin-left: auto; font-size: 13px; font-weight: 800; white-space: nowrap; }

.cr-presswait { margin-top: 16px; background: var(--cr-paper); color: var(--cr-text); border-radius: 13px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.cr-presswait .cr-pv { width: 34px; height: 34px; border-radius: 50%; background: #cdc6b6; color: #5b5546; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.cr-presswait .cr-t { font-size: 12.5px; font-weight: 700; }
.cr-presswait .cr-t span { display: block; font-size: 11px; font-weight: 400; color: var(--cr-faint); margin-top: 1px; }
.cr-presswait .cr-go { margin-left: auto; background: var(--cr-brand); color: #fff; font-size: 11.5px; font-weight: 800; padding: 8px 13px; border-radius: 9px; white-space: nowrap; border: 0; }
.cr-nextbtn {
  margin-top: 14px; display: block; width: 100%; text-align: center; background: rgba(242, 239, 232, .1);
  border: 1.5px solid rgba(242, 239, 232, .2); color: #f2efe8; padding: 13px; border-radius: 12px;
  font-size: 14px; font-weight: 800; letter-spacing: .03em;
}

/* ── rankings (cream) ───────────────────────────────────────────────────── */
.cr-youbar { background: var(--cr-brand); color: #fff; padding: 12px 18px; display: flex; align-items: center; gap: 14px; }
.cr-youbar .cr-pos { font-family: var(--cr-bebas); font-size: 30px; line-height: 1; }
.cr-youbar .cr-mv { font-size: 11px; font-weight: 800; color: #ffd9d3; }
.cr-youbar .cr-rt { margin-left: auto; text-align: right; }
.cr-youbar .cr-rt .cr-k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); font-weight: 800; }
.cr-youbar .cr-rt .cr-v { font-size: 19px; font-weight: 800; margin-top: 2px; }
.cr-cutnote { background: #fdf3e2; border-bottom: 1px solid var(--cr-border); padding: 9px 18px; font-size: 11.5px; color: #7c5407; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cr-cutnote .cr-d { width: 7px; height: 7px; border-radius: 50%; background: var(--cr-amber); flex: none; }
.cr-rk-list { padding: 6px 12px 90px; }
.cr-li { display: flex; align-items: center; gap: 11px; background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 12px; padding: 10px 12px; margin-top: 7px; }
.cr-li.cr-li-you { border-color: var(--cr-brand); border-width: 2px; background: #fff; box-shadow: 0 3px 14px rgba(153, 35, 26, .13); }
.cr-li .cr-p { width: 26px; font-size: 14px; font-weight: 800; color: var(--cr-faint); text-align: center; flex: none; }
.cr-li.cr-li-you .cr-p { color: var(--cr-brand); }
.cr-li .cr-liav { width: 32px; height: 32px; border-radius: 50%; background: var(--cr-dark); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.cr-li.cr-li-you .cr-liav { background: var(--cr-brand); }
.cr-li .cr-linm { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.cr-li .cr-link2 { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-danger); margin-top: 2px; }
.cr-li .cr-link2::before { content: '“'; } .cr-li .cr-link2::after { content: '”'; }
.cr-li .cr-limo { margin-left: auto; text-align: right; flex: none; }
.cr-li .cr-limo .cr-m2 { font-size: 14px; font-weight: 800; }
.cr-cutline { display: flex; align-items: center; gap: 10px; margin: 11px 2px 4px; }
.cr-cutline .cr-ln { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--cr-amber) 0 7px, transparent 7px 13px); }
.cr-cutline .cr-tx { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-amber); font-weight: 800; }
.cr-rk-tabs { display: flex; border-bottom: 1px solid var(--cr-border); background: var(--cr-surface); }
.cr-rk-tab { flex: 1; text-align: center; padding: 11px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); background: none; border: 0; border-bottom: 2px solid transparent; }
.cr-rk-tab.cr-on { color: var(--cr-brand); border-bottom-color: var(--cr-brand); }

/* ── interview + back page ──────────────────────────────────────────────── */
.cr-iv-res { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cr-iv-res .cr-sc2 { background: var(--cr-success); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.cr-iv-res .cr-sc2.cr-lost { background: var(--cr-brand); }
.cr-iv-res .cr-tx { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.cr-presser { display: flex; gap: 11px; margin-bottom: 16px; }
.cr-pav2 { width: 34px; height: 34px; border-radius: 50%; background: #cdc6b6; color: #5b5546; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.cr-pq { background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 14px; border-top-left-radius: 4px; padding: 11px 13px; }
.cr-pq .cr-who { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin-bottom: 5px; }
.cr-pq .cr-q { font-size: 15px; line-height: 1.42; font-family: var(--cr-bebas); letter-spacing: .02em; }
.cr-opts { display: flex; flex-direction: column; gap: 9px; }
.cr-opt {
  background: var(--cr-surface); border: 1.5px solid var(--cr-border); border-radius: 13px; padding: 13px 14px;
  font-size: 14.5px; line-height: 1.45; cursor: pointer; transition: .16s; font-family: var(--cr-bebas);
  letter-spacing: .02em; text-align: left; width: 100%;
}
.cr-opt:hover { border-color: var(--cr-borderStrong); transform: translateY(-1px); }
.cr-opt::before { content: '“'; } .cr-opt::after { content: '”'; }
.cr-iv-hint { text-align: center; font-size: 11px; color: var(--cr-faint); margin-top: 14px; font-style: italic; }

.cr-paper {
  background: var(--cr-paper); border: 1px solid rgba(18, 21, 23, .2);
  box-shadow: 0 20px 46px rgba(18, 21, 23, .22); position: relative; margin: 0 14px;
}
.cr-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(18, 21, 23, .016) 0 1px, transparent 1px 3px);
}
.cr-mast2 { background: var(--cr-dark); color: var(--cr-paper); padding: 9px 18px; display: flex; justify-content: space-between; align-items: baseline; }
.cr-mast2 b { font-family: var(--cr-bebas); font-size: 19px; letter-spacing: .06em; }
.cr-mast2 span { font-size: 9.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); font-weight: 700; }
.cr-rule { height: 4px; background: var(--cr-brand); }
.cr-paper-in { padding: 16px 18px 18px; }
.cr-sect { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cr-brand); font-weight: 800; }
.cr-hl { font-family: var(--cr-bebas); text-transform: uppercase; line-height: .93; letter-spacing: .005em; margin-top: 8px; font-size: 42px; }
.cr-sf { font-family: var(--cr-bebas); letter-spacing: .02em; font-size: 14px; line-height: 1.5; color: var(--cr-muted); margin-top: 12px; border-left: 3px solid var(--cr-brand); padding-left: 11px; }
.cr-byline { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(18, 21, 23, .14); }
.cr-receipt { background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 14px; padding: 14px 15px; margin: 14px; }
.cr-receipt h4 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin: 0 0 11px; }
.cr-rline { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cr-border); }
.cr-rline:first-of-type { border-top: 0; }
.cr-rico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.cr-rtx { font-size: 12.5px; line-height: 1.35; }
.cr-rtx .cr-mutd { color: var(--cr-faint); font-size: 11px; }
.cr-rval { margin-left: auto; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* ── sponsors view ──────────────────────────────────────────────────────── */
.cr-inc { padding: 13px 14px 14px; }
.cr-incrow { display: flex; gap: 12px; }
.cr-ic2 { flex: 1; }
.cr-ic2 .cr-k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-ic2 .cr-v { font-size: 16px; font-weight: 800; margin-top: 2px; }
.cr-split { display: flex; height: 7px; border-radius: 100px; overflow: hidden; margin-top: 12px; background: rgba(18, 21, 23, .08); }
.cr-split b { display: block; }
.cr-splitkey { display: flex; gap: 14px; margin-top: 7px; font-size: 10px; color: var(--cr-faint); font-weight: 700; }
.cr-splitkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cr-covers { margin-top: 11px; font-size: 11px; color: var(--cr-muted); line-height: 1.45; background: var(--cr-surfaceAlt); border-radius: 9px; padding: 9px 11px; }
.cr-deal { padding: 13px 14px; border-top: 1px solid var(--cr-border); }
.cr-dhead { display: flex; align-items: center; gap: 11px; }
.cr-dn { font-size: 14px; font-weight: 800; }
.cr-dt2 { font-size: 10.5px; color: var(--cr-faint); margin-top: 1px; }
.cr-terms { display: flex; gap: 12px; margin-top: 11px; }
.cr-tm { flex: 1; background: var(--cr-surfaceAlt); border-radius: 9px; padding: 8px 10px; }
.cr-tm .cr-k { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-tm .cr-v { font-size: 14px; font-weight: 800; margin-top: 2px; }
.cr-expect { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 11.5px; color: var(--cr-muted); line-height: 1.4; }
.cr-expect .cr-b { width: 7px; height: 7px; border-radius: 50%; background: var(--cr-amber); flex: none; margin-top: 4px; }
.cr-warn2 { margin-top: 9px; font-size: 11px; color: var(--cr-brand); font-weight: 700; line-height: 1.4; background: rgba(153, 35, 26, .07); border-radius: 8px; padding: 8px 10px; }
.cr-offer { border: 2px solid var(--cr-amber); }
.cr-why { padding: 0 14px 4px; font-size: 11.5px; color: var(--cr-muted); line-height: 1.45; }
.cr-clause { display: flex; gap: 9px; align-items: flex-start; margin-top: 8px; font-size: 11.5px; line-height: 1.4; }
.cr-clause .cr-i { width: 17px; height: 17px; border-radius: 5px; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; margin-top: 1px; }
.cr-conflict { margin-top: 12px; background: rgba(153, 35, 26, .06); border: 1px solid rgba(153, 35, 26, .25); border-radius: 10px; padding: 10px 12px; }
.cr-conflict .cr-h { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-brand); font-weight: 800; }
.cr-conflict .cr-t { font-size: 11.5px; line-height: 1.45; margin-top: 4px; color: var(--cr-muted); }
.cr-offer-btns { display: flex; gap: 8px; margin-top: 13px; }
.cr-offer-btns .cr-y { flex: 1; background: var(--cr-amber); color: #fff; border: 0; padding: 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; }
.cr-offer-btns .cr-n { flex: 0 0 112px; background: transparent; border: 1.5px solid var(--cr-borderStrong); color: var(--cr-text); padding: 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; }
.cr-sp-hint { text-align: center; font-size: 11px; color: var(--cr-faint); font-style: italic; padding: 0 14px 13px; }

/* ── badges ─────────────────────────────────────────────────────────────── */
.cr-bd-detail { background: var(--cr-surface); border-bottom: 1px solid var(--cr-border); padding: 15px 16px 16px; display: flex; gap: 14px; align-items: flex-start; position: sticky; top: 60px; z-index: 5; min-height: 104px; }
.cr-bd-detail .cr-n { font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .02em; line-height: 1.05; }
.cr-bd-detail .cr-d { font-size: 12px; color: var(--cr-muted); margin-top: 5px; line-height: 1.4; }
.cr-dmeta { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.cr-btag { font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: rgba(18, 21, 23, .06); color: var(--cr-muted); }
.cr-btag.cr-rare { background: rgba(153, 35, 26, .11); color: var(--cr-brand); }
.cr-btag.cr-got { background: rgba(30, 122, 62, .13); color: var(--cr-success); }
.cr-btag.cr-plus { background: rgba(168, 115, 12, .15); color: #7c5407; }
.cr-bd-sec { padding: 15px 13px 4px; }
.cr-bd-sech { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.cr-bd-sech .cr-t { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.cr-bd-sech .cr-ln { flex: 1; height: 1px; background: var(--cr-border); }
.cr-bd-sech .cr-n { font-size: 10px; color: var(--cr-faint); font-weight: 800; }
.cr-bd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px 7px; }
@media (min-width: 560px) { .cr-bd-grid { grid-template-columns: repeat(6, 1fr); } }
.cr-bd { text-align: center; cursor: pointer; }
.cr-medal {
  width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  position: relative; font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .02em; color: #fff; transition: transform .14s;
}
.cr-bd:hover .cr-medal { transform: translateY(-3px); }
.cr-bd.cr-sel .cr-medal { box-shadow: 0 0 0 3px var(--cr-bg), 0 0 0 5px var(--cr-brand); }
.cr-medal::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); }
.cr-medal.cr-m-green { background: radial-gradient(circle at 32% 26%, #5fd18c, #1e7a3e 62%, #145229); }
.cr-medal.cr-m-gold { background: radial-gradient(circle at 32% 26%, #e6b756, #a8730c 62%, #7c5407); }
.cr-medal.cr-m-red { background: radial-gradient(circle at 32% 26%, #d0655a, #99231a 62%, #701812); }
.cr-medal.cr-m-dark { background: radial-gradient(circle at 32% 26%, #5b636b, #22262a 62%, #0d1013); }
.cr-medal.cr-m-steel { background: radial-gradient(circle at 32% 26%, #b9c2c9, #7d8a93 62%, #5a656d); }
.cr-medal.cr-off { background: repeating-linear-gradient(45deg, #e3ded2 0 5px, #dbd5c7 5px 10px) !important; color: rgba(18, 21, 23, .26) !important; box-shadow: none; }
.cr-medal.cr-off::after { border-color: rgba(18, 21, 23, .1); }
.cr-bn { font-size: 9.5px; font-weight: 800; margin-top: 6px; line-height: 1.2; }
.cr-br { font-size: 9px; font-weight: 800; margin-top: 2px; color: var(--cr-faint); }
.cr-br.cr-r1 { color: var(--cr-brand); }
.cr-keybar { padding: 12px 16px 90px; margin-top: 8px; }
.cr-key { background: var(--cr-surfaceAlt); border: 1px solid var(--cr-border); border-radius: 12px; padding: 11px 13px; font-size: 11px; color: var(--cr-muted); line-height: 1.5; }
.cr-key b { color: var(--cr-text); }

/* ── the locker room: a retired career's archive, and the way back ─────── */
.cr-arch {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  background: var(--cr-surfaceAlt); border: 1px solid var(--cr-border);
  border-radius: 12px;
}
.cr-arch + .cr-arch { margin-top: 8px; }
.cr-arch[data-open="1"] { cursor: pointer; }
.cr-arch[data-open="1"]:active { background: rgba(18, 21, 23, .06); }
.cr-arch-medal {
  background: linear-gradient(150deg, #b98b2e, #8a5f16);
  font-family: var(--cr-bebas); font-size: 17px;
}
.cr-arch-b { flex: 1; min-width: 0; }
.cr-arch-n {
  font-size: 14px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cr-arch-s { font-size: 11px; color: var(--cr-muted); margin-top: 2px; }
.cr-arch-go { color: var(--cr-faint); font-size: 20px; line-height: 1; flex: none; }
.cr-arch-new { font-family: var(--cr-bebas); font-size: 19px; letter-spacing: .01em; }

/* ── setup ──────────────────────────────────────────────────────────────── */
.cr-hero { background: var(--cr-dark); color: #fff; padding: 22px 18px 24px; text-align: center; }
.cr-hero .cr-t { font-family: var(--cr-bebas); font-size: 30px; letter-spacing: .02em; margin-top: 4px; }
.cr-hero .cr-s { font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 8px; line-height: 1.5; }
.cr-sec { background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 14px; padding: 14px; }
.cr-lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin-bottom: 11px; }
.cr-lab span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--cr-faint); }
.cr-fld { background: var(--cr-surfaceAlt); border: 1px solid var(--cr-border); border-radius: 10px; padding: 9px 12px; }
.cr-fld .cr-k { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-fld input {
  display: block; width: 100%; background: transparent; border: 0; outline: none; font-family: inherit;
  font-size: 16px; font-weight: 700; color: var(--cr-text); margin-top: 3px; padding: 0;
}
.cr-fld .cr-ro { font-size: 16px; font-weight: 700; margin-top: 3px; }
.cr-fhint { font-size: 10.5px; color: var(--cr-faint); line-height: 1.45; margin-top: 7px; }
.cr-youavg { font-size: 11.5px; color: var(--cr-muted); background: var(--cr-surfaceAlt); border-radius: 9px; padding: 9px 11px; margin-bottom: 11px; line-height: 1.45; }
.cr-diffs { display: flex; flex-direction: column; gap: 8px; }
.cr-diff { border: 1.5px solid var(--cr-border); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: .14s; }
.cr-diff:hover { border-color: var(--cr-borderStrong); }
.cr-diff.cr-on { border-color: var(--cr-brand); background: #fff; box-shadow: 0 3px 14px rgba(153, 35, 26, .12); }
.cr-drow { display: flex; align-items: center; gap: 10px; }
.cr-dnum { width: 24px; height: 24px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.cr-dnm { font-size: 14px; font-weight: 800; }
.cr-dwho { font-size: 10.5px; color: var(--cr-faint); margin-top: 1px; }
.cr-drec { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-success); background: rgba(30, 122, 62, .12); padding: 3px 7px; border-radius: 5px; }
.cr-dceil { display: flex; gap: 10px; margin-top: 9px; }
.cr-dc { flex: 1; background: var(--cr-surfaceAlt); border-radius: 8px; padding: 7px 9px; }
.cr-dc .cr-k { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-dc .cr-v { font-size: 15px; font-weight: 800; margin-top: 2px; }
.cr-seg2 { display: flex; gap: 8px; }
.cr-seg2 > div { flex: 1; border: 1.5px solid var(--cr-border); border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: .14s; }
.cr-seg2 > div.cr-on { border-color: var(--cr-brand); background: #fff; box-shadow: 0 3px 12px rgba(153, 35, 26, .1); }
.cr-seg2 .cr-t { font-size: 13px; font-weight: 800; }
.cr-seg2 .cr-s { font-size: 10px; color: var(--cr-faint); margin-top: 2px; }
.cr-startbox { background: var(--cr-dark); color: #fff; border-radius: 14px; padding: 16px; text-align: center; }
.cr-startbox .cr-k { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 800; }
.cr-startbox .cr-t { font-family: var(--cr-bebas); font-size: 24px; letter-spacing: .02em; margin-top: 5px; line-height: 1.1; }
.cr-startbox .cr-s { font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 8px; line-height: 1.5; }

/* ── moments (card lost / retirement / season review) ───────────────────── */
.cr-moment { text-align: center; padding: 30px 20px; }
.cr-moment .cr-mword { font-family: var(--cr-bebas); font-size: 44px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.cr-moment .cr-msub { font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
.cr-moment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; text-align: left; }
.cr-moment-cell { background: rgba(242, 239, 232, .06); border: 1px solid rgba(242, 239, 232, .12); border-radius: 11px; padding: 11px 13px; }
.cr-moment-cell .cr-k { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .45); font-weight: 800; }
.cr-moment-cell .cr-v { font-size: 17px; font-weight: 800; margin-top: 3px; }
.cr-moment-cream .cr-moment-cell { background: var(--cr-surface); border-color: var(--cr-border); }
.cr-moment-cream .cr-moment-cell .cr-k { color: var(--cr-faint); }

/* ── career tab strip (view switcher) ───────────────────────────────────── */
.cr-tabs {
  position: sticky; bottom: 0; z-index: 20; background: var(--cr-dark);
  display: flex; justify-content: space-around; padding: 9px 0 calc(13px + env(safe-area-inset-bottom));
  /* the strip can never widen the page: tabs shrink and ellipsise before
     they overflow (fallback fonts run ~40px wider than DM Sans at 390) */
  width: 100%; min-width: 0; overflow-x: clip;
}
.cr-tab {
  text-align: center; color: rgba(255, 255, 255, .42); font-size: 9px; font-weight: 700;
  letter-spacing: .05em; background: none; border: 0; padding: 0 6px;
  flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 420px) { .cr-tab { letter-spacing: 0; padding: 0 4px; } }
.cr-tab.cr-on { color: #fff; }
.cr-tab .cr-ic { font-size: 17px; display: block; margin-bottom: 3px; opacity: .9; font-style: normal; }

/* misc */
.cr-empty { text-align: center; color: var(--cr-faint); font-size: 12px; padding: 26px 16px; line-height: 1.5; }
.cr-offline { background: #fdf3e2; color: #7c5407; font-size: 11px; font-weight: 700; text-align: center; padding: 7px 12px; }
.cr-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: var(--cr-dark); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 11px 18px; border-radius: 100px; opacity: 0; pointer-events: none;
  transition: .25s; z-index: 200; box-shadow: 0 10px 30px rgba(18, 21, 23, .35); max-width: 90vw;
}
.cr-toast.cr-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-14 — play-test revisions
   1) The career match scorer is local play's clean x01 board (game.css owns
      .x01-spine / .x01-heroes / .x01-ledger / .ctrl-card). The match view
      goes CREAM for the scorer — build-up and result keep the dark arena.
   2) The amateur narrative is a social feed, not a paper: generic feed-card
      grammar (avatar circle, bold name, @handle, timestamp, ♡/💬), no real
      platform branded.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the match view flips to cream while a match is live ─────────────── */
.cr-view-dark#crView-match.cr-match-cream {
  background: var(--cr-bg);
  color: var(--cr-text);
}
.cr-match-cream .cr-dark-in { background: transparent; }

/* career event bar, cream variant (comp · round · Concede) */
.cr-m-bar-cream {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cr-surface); border: 1px solid var(--cr-border);
  border-radius: 14px; padding: 10px 14px; margin: 10px 0 10px;
}
.cr-m-bar-cream .cr-m-e1 {
  font-family: var(--cr-bebas); font-size: 19px; letter-spacing: .6px;
  color: var(--cr-text); line-height: 1;
}
.cr-m-bar-cream .cr-m-e2 {
  font-size: 11px; color: var(--cr-faint); font-weight: 700; margin-top: 3px;
  letter-spacing: .04em;
}
.cr-m-bar-cream .cr-m-quit {
  background: none; border: 1px solid var(--cr-borderStrong);
  color: var(--cr-brand); font-weight: 800; font-size: 12px;
  padding: 8px 14px; border-radius: 100px; cursor: pointer; flex: none;
}
.cr-m-bar-cream .cr-m-quit:hover { border-color: var(--cr-danger); color: var(--cr-danger); }

/* ── the scorer's vertical budget — proportion fix, 2026-08-15 ─────────
   Play-test: "scorer not in proportion when suggested checkouts appears."
   Two career-side faults, both fixed here; game.css stays untouched:

   1. The old fixed heights (calc(100dvh − 165/192px)) drifted from the
      event bar's real height, so at 390×844 the keypad's bottom 18px sat
      off-screen and the hero panels were squeezed to game.css's 74px
      floor — too short to host the checkout banner, which then escaped
      the panel and pushed the column about. The board now FLEX-FILLS
      whatever is genuinely left below the bar, so the budget can never
      drift from the bar's real height again.

   2. game.html reserves room for the banner with @media(max-height)
      conventions keyed on the VIEWPORT. Career's bar eats ~130px at any
      viewport, so those media queries fire too late here. The same
      conventions are restated below as @container queries keyed on the
      match column's own height — the height that actually matters. */
.cr-match-cream .cr-dark-in {
  display: flex; flex-direction: column; min-height: 0;
  container: crboard / size;
}
.cr-match-cream .cr-m-bar-cream { flex: none; }
.cr-scorer.x01-board { flex: 1 1 auto; height: auto; min-height: 0; }

/* the site's mobile stylesheet forces section{padding:56px 0 !important};
   game.html's board lives in a plain div and never pays the bottom half.
   Keep the 56px top (topbar clearance), drop the rest, and pin the match
   view to the viewport so the flex column above has a real height. */
#crView-match.cr-view.cr-on {
  display: flex; flex-direction: column;
  height: 100dvh; padding: 56px 0 0 !important;
}
#crView-match .cr-dark-in { flex: 1 1 auto; padding: 12px 16px 14px; }
/* desktop clears the taller site chrome; the tab pill is hidden during a
   match so 62px (the topbar figure the rest of career.css uses) is all */
@media (min-width: 900px) {
  #crView-match.cr-view.cr-on { padding: 62px 28px 0 !important; }
}

/* horizontal parity with local play: game.html's board sits inside
   .app{padding:0 10px} as well as the 16px page gutter, so its column is
   390−52=338 at phone width. Match the inset exactly. */
@media (max-width: 760px) {
  .cr-match-cream .cr-scorer.x01-board { margin: 0 10px; width: auto; }
  .cr-match-cream .cr-m-bar-cream { margin-left: 10px; margin-right: 10px; }
}

/* game.css's short-viewport conventions, restated against the column.
   Thresholds keep game's 780/680/600 figures because the career column's
   own chrome (~130px of bar + padding) sits within a few px of game.html's
   118px page chrome — the numbers buy the same amount of board room. */
@container crboard (max-height: 780px) {
  .cr-scorer.x01-board { gap: 8px; }
  .cr-scorer .numpad button { height: 37px; font-size: 19px; }
  .cr-scorer .numpad .np-miss,
  .cr-scorer .numpad button[data-quick] { height: 25px; font-size: 12px; }
  /* softer than game's 74: the ledger gives back only what the event bar
     took, so the heroes stay a shade UNDER local play's, never over */
  .cr-scorer .x01-lg-body { height: 110px; }
  .cr-scorer .x01-spine { padding: 8px 12px; }
  .cr-scorer .x01-sp-legs { font-size: 24px; }
  .cr-scorer .x01-heroes { min-height: 60px; }
  .cr-scorer .x01-heroes .player-card { padding: 6px 8px; }
  .cr-scorer .x01-heroes .pc-name { font-size: 10px; letter-spacing: 1.2px; }
  .cr-scorer .x01-heroes .checkout-banner { margin-top: 5px; padding: 5px 10px; }
  .cr-scorer .x01-heroes .checkout-banner .co-route { font-size: clamp(13px, 2.8vw, 18px); }
}
@container crboard (max-height: 680px) {
  .cr-scorer .x01-lg-body { height: 74px; }
  .cr-scorer .x01-heroes .checkout-banner { margin-top: 3px; }
}
@container crboard (max-height: 600px) {
  .cr-scorer .numpad button { height: 32px; font-size: 17px; }
  .cr-scorer .x01-lg-body { height: 58px; }
  .cr-scorer .x01-heroes { min-height: 48px; }
}

/* the reserved-height convention itself, keyed on the HERO's own height
   (game.css keys it on viewport ≤680px — same idea, tighter target):
   when the panel is too short to host name + number + route, the name
   yields and the number shrinks WHILE the hint shows, so the hint never
   grows the panel or spills out of it. The player-card is already a size
   container in game.css, so the unnamed query resolves against it. */
@container (max-height: 129px) {
  .cr-scorer .player-card:has(.checkout-banner:not(.co-hidden)) .pc-name { display: none; }
  .cr-scorer .player-card:has(.checkout-banner:not(.co-hidden)) .pc-score { font-size: clamp(26px, 40cqh, 58px); }
}

/* game.css already paints the throwing panel solid oxblood with a WHITE
   number (.player-card.throwing .pc-score { color:#fff }) — do NOT
   restyle the number here. A previous override painted it oxblood, which
   is invisible on the oxblood panel: the active player's remaining
   simply vanished (play-test screenshot, 2026-08-14). */

/* game.css declares `.x01-heroes .checkout-banner { display:flex … }`
   AFTER `.checkout-banner.co-hidden { display:none }`; equal specificity
   means source order wins and the "hidden" banner renders as an empty
   "—" pill escaping the panel's bottom edge. Re-hide it decisively. */
.cr-scorer .checkout-banner.co-hidden { display: none !important; }

/* set dots under the spine score (sets formats only) */
.cr-setdots { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; }
.cr-setdots i {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: rgba(18, 21, 23, .14);
}
.cr-setdots i.on { background: var(--cr-brand); }
.cr-setdots i.on.r { background: var(--cr-dark); }
.cr-setdots b { width: 10px; }

/* double-in state on the hero cards */
.cr-di-badge {
  margin-top: 7px; font-size: 9.5px; font-weight: 900; letter-spacing: .14em;
  color: var(--cr-amber); background: rgba(168, 115, 12, .12);
  border: 1px solid rgba(168, 115, 12, .3); border-radius: 100px; padding: 3px 10px;
}
.cr-di-badge.cr-di-in {
  color: var(--cr-success); background: rgba(30, 122, 62, .1);
  border-color: rgba(30, 122, 62, .3);
}

/* pairs — who is on the oche (all four names) */
.cr-pairs-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--cr-faint);
  background: var(--cr-surface); border: 1px solid var(--cr-border);
  border-radius: 100px; padding: 6px 14px;
}
.cr-pairs-strip .cr-pp-sep { opacity: .4; }
.cr-pairs-strip .cr-pp.cr-pp-on {
  color: var(--cr-brand);
  text-decoration: underline; text-underline-offset: 3px;
}

/* bot thinking cell in the pending ledger row */
.cr-thinking { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; color: var(--cr-faint) !important; }

/* confirm sheets: checkout darts · double-in dart */
.cr-mmodal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 21, 23, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.cr-mm-card {
  background: var(--cr-surface); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 720px; padding: 20px 18px 26px;
  box-shadow: 0 -12px 40px rgba(18, 21, 23, .25);
}
.cr-mm-t { font-family: var(--cr-bebas); font-size: 26px; line-height: 1; }
.cr-mm-s { font-size: 13px; color: var(--cr-muted); margin: 6px 0 14px; }
.cr-mm-row { display: flex; gap: 8px; }
.cr-mm-btn {
  flex: 1; height: 52px; border-radius: 12px; border: 1px solid var(--cr-borderStrong);
  background: var(--cr-surfaceAlt); font-size: 16px; font-weight: 800; cursor: pointer;
  color: var(--cr-text);
}
.cr-mm-btn:hover { border-color: var(--cr-brand); color: var(--cr-brand); }
.cr-mm-bust {
  width: 100%; margin-top: 10px; height: 44px; border-radius: 12px;
  border: none; background: none; color: var(--cr-brand);
  font-weight: 800; font-size: 13px; cursor: pointer;
}

/* ── the amateur game's social feed ──────────────────────────────────── */
.cr-soc-card {
  background: var(--cr-surface); border: 1px solid var(--cr-border);
  border-radius: 14px; padding: 13px 14px; margin: 0 14px 10px;
}
.cr-soc-card.cr-soc-reply { margin-left: 34px; }
.cr-soc-head { display: flex; align-items: center; gap: 10px; }
.cr-soc-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--cr-surfaceAlt); border: 1px solid var(--cr-borderStrong);
  font-weight: 800; font-size: 13px; color: var(--cr-muted);
}
.cr-soc-av.cr-soc-shield {
  background: var(--cr-brandWash); border-color: rgba(153, 35, 26, .3);
  font-size: 17px;
}
.cr-soc-name { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.cr-soc-meta { font-size: 11px; color: var(--cr-faint); font-weight: 600; }
.cr-soc-body { font-size: 14px; line-height: 1.45; margin-top: 9px; }
.cr-soc-actions {
  display: flex; gap: 18px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--cr-border);
  font-size: 12px; font-weight: 700; color: var(--cr-faint);
}
.cr-soc-replyto {
  margin: 4px 14px 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint);
}
.cr-soc-thread { padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-14b — play-test fixes: nationality picker, World Cup call-up
   moment, and a proper desktop layout (≥900px). Phone keeps the current
   single-column app.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── nationality chips (setup) ───────────────────────────────────────── */
.cr-natgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.cr-nat {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--cr-surface); border: 1px solid var(--cr-borderStrong);
  border-radius: 100px; padding: 7px 13px 7px 8px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--cr-muted);
}
.cr-nat b {
  font-family: var(--cr-bebas); font-size: 12px; letter-spacing: .08em;
  background: var(--cr-surfaceAlt); border: 1px solid var(--cr-border);
  border-radius: 6px; padding: 3px 6px; color: var(--cr-text);
}
.cr-nat.cr-on { border-color: var(--cr-brand); color: var(--cr-brand); background: var(--cr-brandWash); }
.cr-nat.cr-on b { background: var(--cr-brand); border-color: var(--cr-brand); color: #fff; }

/* ── World Cup call-up moment ────────────────────────────────────────── */
.cr-mkicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 10px;
}
.cr-callup-partner {
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 14px 16px; margin-top: 20px;
}
.cr-callup-partner .cr-avatar { flex: none; }
.cr-cp-n { font-weight: 800; font-size: 15px; color: #f2efe8; }
.cr-cp-k { font-family: var(--cr-bebas); font-size: 13px; letter-spacing: .1em; color: rgba(242, 239, 232, .55); margin-top: 1px; }
.cr-cp-s { font-size: 12px; color: rgba(242, 239, 232, .6); margin-top: 5px; line-height: 1.4; }

/* ── desktop (≥900px): a real layout, not a stretched phone ──────────────
   The rule for every view below: use the width by REARRANGING, never by
   stretching a phone column. A 1,920px monitor should show more of the
   career at once, not the same ribbon with bigger margins either side. */
@media (min-width: 900px) {
  /* The app shell runs the full viewport so the hub's broadcast bands can
     bleed edge to edge; the 1,400px container moves onto each VIEW. Every
     view keeps exactly the geometry it had (1400 incl. 28px gutters) —
     only the hub opts out and re-constrains its cream body itself. */
  .cr-app {
    max-width: none;
    min-height: calc(100vh - 60px);
    padding: 0;
  }
  .cr-view {
    width: 100%; max-width: 1400px;
    margin-left: auto; margin-right: auto;
    padding: 0 28px;
  }
  /* the tab strip sits under the topbar as a centred pill row, not glued
     to the bottom of a 27-inch monitor */
  .cr-tabs {
    position: sticky; top: 62px; bottom: auto; z-index: 20;
    order: -1;
    margin: 12px auto 4px; width: fit-content; max-width: calc(100% - 32px);
    border-radius: 100px; padding: 6px 8px;
    gap: 4px; justify-content: center;
    box-shadow: 0 6px 24px rgba(18, 21, 23, .18);
  }
  .cr-app { display: flex; flex-direction: column; }
  .cr-tab { padding: 7px 16px; border-radius: 100px; font-size: 10.5px; flex: 0 1 auto; }
  .cr-tab .cr-ic { display: inline-block; margin: 0 6px 0 0; font-size: 14px; vertical-align: -1px; }
  .cr-tab.cr-on { background: rgba(255, 255, 255, .12); }

  /* the hub becomes two columns: what needs a decision on the left,
     the meters and the story of the season on the right */
  .cr-hub-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 20px; align-items: start; }
  .cr-hub-body > .cr-offline { grid-column: 1 / -1; }
  .cr-hub-l, .cr-hub-r { min-width: 0; }

  /* Sponsors is a stack of self-contained .cr-card blocks, so it columns
     cleanly. Scoped to the view rather than applied to every .cr-body:
     the gate, the setup form and the interview also use .cr-body, and a
     form or a question is *meant* to be one column — splitting those
     would be filling the width for its own sake. */
  #crView-sponsors .cr-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    align-items: start;
  }
  #crView-sponsors .cr-body > .cr-card { min-width: 0; }
  /* anything that is really a full-width banner stays one */
  #crView-sponsors .cr-body > .cr-offline,
  #crView-sponsors .cr-body > .cr-empty { grid-column: 1 / -1; }

  /* The single-column screens — the gate, setup, an interview — get a
     deliberate reading width instead of running the full 1,400px. These
     are forms and questions, not dashboards. */
  #crView-gate .cr-body,
  #crView-setup .cr-body,
  #crView-interview .cr-body { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* The season and the rankings are long lists. Columned, a whole season
     is on screen at once instead of ten events and a scrollbar. */
  .cr-cal-list,
  .cr-rk-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    align-items: start;
  }
  /* the month rules and the top-64 cutline are dividers — they span, or
     the grouping stops meaning anything */
  .cr-cal-list > .cr-mo,
  .cr-rk-list > .cr-cutline,
  .cr-rk-list > .cr-cutnote { grid-column: 1 / -1; }

  /* badges: a wall, not a ribbon */
  .cr-bd-grid { grid-template-columns: repeat(8, 1fr); }

  /* views breathe at desktop width */
  .cr-view { padding-bottom: 40px; }
  .cr-hero { padding-top: 26px; }

  /* the toast anchors above content, not above a phantom phone tab bar */
  .cr-toast { bottom: 40px; }

  /* ── the scorer ──────────────────────────────────────────────────────
     NO desktop rearrangement (ruling, 2026-08-14, screenshot evidence):
     the career scorer is game.html's local-play column at EVERY width —
     centred, max-width 760px, two equal hero panels, full-width ledger,
     full-width keypad. game.css owns all of it; career adds nothing here
     beyond the event bar above the board. The earlier side-by-side
     ledger/keypad grid is deliberately gone — do not reintroduce it. */

  /* the event bar and the banner hug the column they belong to */
  .cr-m-bar-cream,
  .cr-m-banner { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ── wide desktop (≥1440px): a third column where the content earns it ── */
@media (min-width: 1440px) {
  .cr-cal-list,
  .cr-rk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-bd-grid { grid-template-columns: repeat(10, 1fr); }
  /* the scorer stays the 760px local-play column even here — see the
     ruling above; only the browsing screens earn the extra columns */
}
/* phone/narrow: the hub grid collapses to the existing single column */
@media (max-width: 899.98px) {
  .cr-hub-body { display: block; }
  /* the phone board budget is no longer a hand-tuned calc: the board
     flex-fills the match column (see the proportion-fix block above), so
     Submit is on screen by construction whatever the bar wraps to. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAME_SPEC §7 — the player card before the walk-on. Ported verbatim from
   mockup-10-player-card.html (same class names inside .cr-pcard) so the
   approved design and the shipped one cannot drift.
   ═══════════════════════════════════════════════════════════════════════ */
.cr-cards-wrap { padding: 18px 14px 40px; text-align: center; }
.cr-cards-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(242, 239, 232, .5); margin-bottom: 16px;
}
/* Equal-height cards (2026-08-14 ruling): grid stretch, so the two dossiers
   are always the same size. The sponsors block inside reserves its space
   whether or not there is anything to put in it, and the campaign strip
   sits at the same bottom edge on both. */
.cr-cards-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 392px));
  gap: 22px; justify-content: center; align-items: stretch;
}
@media (max-width: 839.98px) {
  .cr-cards-row { grid-template-columns: minmax(0, 392px); }
}

/* the press strip and the stakes strip sit under the cards, at card width */
.cr-cards-strip { max-width: 806px; margin-left: auto; margin-right: auto; text-align: left; }
.cr-cards-stake { max-width: 806px; margin-left: auto; margin-right: auto; }
.cr-cards-wrap .cr-walkon .cr-btn { max-width: 320px; margin: 0 auto; display: block; }

.cr-pcard {
  width: 392px; max-width: 100%; border-radius: 18px; overflow: hidden;
  position: relative; color: #fff; background: #0e1113; text-align: left;
  box-shadow: 0 24px 60px rgba(18, 21, 23, .4);
  display: flex; flex-direction: column;
}
/* inside the grid row the track owns the width */
.cr-cards-row .cr-pcard { width: auto; }
/* chalk / scratch texture */
.cr-pcard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .55;
  background:
    radial-gradient(ellipse 60% 30% at 12% 8%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(ellipse 50% 26% at 88% 94%, rgba(255, 255, 255, .04), transparent 70%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(69deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 11px);
}
/* oxblood brush swipes, mirroring the broadcast look */
.cr-pcard .swipe { position: absolute; left: -8%; right: -8%; height: 74px; z-index: 0; filter: blur(.4px); }
.cr-pcard .swipe.top {
  top: -26px; transform: rotate(-3.2deg); opacity: .92;
  background: linear-gradient(96deg, transparent 0%, #701812 14%, #99231a 38%, #d5372a 56%, #99231a 74%, transparent 96%);
  -webkit-mask-image: repeating-linear-gradient(93deg, #000 0 6px, rgba(0, 0, 0, .72) 6px 9px, #000 9px 15px);
  mask-image: repeating-linear-gradient(93deg, #000 0 6px, rgba(0, 0, 0, .72) 6px 9px, #000 9px 15px);
}
.cr-pcard .swipe.bot {
  bottom: -30px; transform: rotate(2.4deg); height: 60px; opacity: .5;
  background: linear-gradient(86deg, transparent 2%, #99231a 22%, #d5372a 48%, #701812 72%, transparent 98%);
  -webkit-mask-image: repeating-linear-gradient(88deg, #000 0 5px, rgba(0, 0, 0, .6) 5px 8px, #000 8px 14px);
  mask-image: repeating-linear-gradient(88deg, #000 0 5px, rgba(0, 0, 0, .6) 5px 8px, #000 8px 14px);
}
/* flex column: the table takes what it needs, the sponsors block is pushed
   to the bottom, the campaign strip closes the card — so the footer line
   sits at the same height on both cards whatever the content above. */
.cr-pcard .inner {
  position: relative; z-index: 2; padding: 30px 0 0;
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.cr-pcard .nm { text-align: center; padding: 0 20px; }
.cr-pcard .nm .first {
  font-family: var(--cr-bebas); font-size: 31px; letter-spacing: .10em;
  line-height: 1; color: rgba(255, 255, 255, .9);
}
.cr-pcard .nm .last { font-family: var(--cr-bebas); font-size: 63px; letter-spacing: .012em; line-height: .94; margin-top: 1px; }
.cr-pcard .nm .nick { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--cr-danger); margin-top: 9px; }
.cr-pcard .nm .nick::before { content: '“'; }
.cr-pcard .nm .nick::after { content: '”'; }
.cr-pcard .flagline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; }
.cr-pcard .flag {
  width: 24px; height: 18px; object-fit: cover; display: block; border-radius: 2px;
  overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.cr-pcard .flagline .cty { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: rgba(255, 255, 255, .55); }

.cr-pcard .tbl { margin-top: 22px; }
.cr-pcard .tr {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 22px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.cr-pcard .tr:first-child { border-top: 1px solid rgba(255, 255, 255, .2); }
.cr-pcard .tr .k { font-size: 14px; color: rgba(255, 255, 255, .94); font-weight: 400; }
.cr-pcard .tr .v { font-size: 14.5px; color: #6ee7a0; font-weight: 700; text-align: right; white-space: nowrap; }
.cr-pcard .tr .v.plain { color: #fff; }
.cr-pcard .tr.rnd .k { color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.cr-pcard .tr.rnd .v { font-size: 13.5px; }
.cr-pcard .tr.head { padding-top: 15px; padding-bottom: 6px; border-top: 1px solid rgba(255, 255, 255, .2); }
.cr-pcard .tr.head .k {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); font-weight: 800;
}
/* Always rendered, space reserved (2026-08-14 ruling): min-height covers
   the label plus one chip row, so a sponsorless card shows the label over
   empty space rather than shrinking. margin-top:auto pins it (and the
   strip below) to the bottom of the flex column. */
.cr-pcard .spon {
  padding: 13px 22px 4px; border-top: 1px solid rgba(255, 255, 255, .2);
  margin-top: auto; min-height: 84px; box-sizing: border-box;
}
.cr-pcard .spon .lbl {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); font-weight: 800;
}
.cr-pcard .chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cr-pcard .chip {
  display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; padding: 6px 10px 6px 6px;
}
.cr-pcard .chip .mk {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--cr-bebas); font-size: 12px; color: #fff; flex: none; letter-spacing: .02em;
}
.cr-pcard .chip .tx { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .9); white-space: nowrap; }
/* ── the campaign strip (2026-08-14 ruling) ──────────────────────────────
   ONE full-width mark running along the bottom of the card, replacing the
   old logo-left / lockup-right footer pair: the Throw knockout logo, then
   OUT DISCRIMINATION — DARTS FOR EVERYONE in Bebas ('Discrimination' in
   the brand red, 'Everyone' in the logo green), thin rules either side.
   Reusable: drop campaignStrip() into any dark surface (result screen). */
.cr-campstrip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 16px; margin-top: 10px;
}
.cr-campstrip .rule { flex: 1 1 8px; min-width: 8px; height: 1px; background: rgba(255, 255, 255, .26); }
.cr-campstrip .cs-logo { height: 19px; display: block; flex: none; }
.cr-campstrip .cs-tx {
  font-family: var(--cr-bebas); font-size: 13.5px; letter-spacing: .1em;
  color: #fff; white-space: nowrap; flex: none; line-height: 1;
}
.cr-campstrip .cs-tx b { font-weight: 400; }
.cr-campstrip .cs-red { color: #ba2e1b; }
.cr-campstrip .cs-green { color: #3e8c46; }
.cr-campstrip .cs-dash { margin: 0 7px; color: rgba(255, 255, 255, .45); }

/* the pair card: two names stacked at equal weight */
.cr-pcard .nm .last.duo { font-size: 34px; letter-spacing: .03em; line-height: 1.05; }
.cr-pcard .nm.nm-duo { padding-top: 6px; }

@media (max-width: 899.98px) {
  .cr-cards-row { gap: 16px; }
  .cr-pcard { width: 100%; }
  .cr-pcard .nm .last { font-size: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAME_SPEC §6 Go Live · §8 darts step · §1 persona
   ═══════════════════════════════════════════════════════════════════════ */
.cr-persona { color: var(--cr-brand) !important; font-weight: 800 !important; }
.cr-meter .cr-v em { font-size: 12px; font-style: normal; color: var(--cr-faint); font-weight: 700; }

/* hub Go Live card */
.cr-golive .cr-card-h { align-items: center; }
.cr-golive-v { font-size: 11px; font-weight: 800; color: var(--cr-brand); }
.cr-fresh-full { color: var(--cr-success) !important; }
.cr-fresh-partial { color: var(--cr-amber) !important; }
.cr-fresh-stale { color: var(--cr-brand) !important; }

/* the live screen */
.cr-live-wrap { padding: 30px 18px 40px; text-align: center; max-width: 560px; margin: 0 auto; }
.cr-live-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase; color: #f2efe8;
}
.cr-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cr-danger);
  box-shadow: 0 0 0 0 rgba(213, 55, 42, .6); animation: crLivePulse 1.7s infinite;
}
@keyframes crLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(213, 55, 42, .55); }
  70% { box-shadow: 0 0 0 9px rgba(213, 55, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(213, 55, 42, 0); }
}
.cr-live-h { font-family: var(--cr-bebas); font-size: 40px; line-height: 1; color: #f2efe8; margin-top: 12px; }
.cr-live-sub { font-size: 13px; color: rgba(242, 239, 232, .62); line-height: 1.5; margin-top: 10px; }
.cr-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.cr-live-cell {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 13px 8px;
}
.cr-live-cell .cr-k {
  font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(242, 239, 232, .45);
}
.cr-live-cell .cr-v { font-family: var(--cr-bebas); font-size: 27px; color: #f2efe8; margin-top: 4px; line-height: 1; }
.cr-live-cell .cr-v-sm { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800; }
.cr-live-fresh { margin-top: 14px; font-size: 12px; font-weight: 700; }
.cr-live-spon { margin-top: 14px; font-size: 12px; font-weight: 700; color: #6ee7a0; }

/* live session: the stream bar over the practice board */
.cr-live-session { padding: 10px 12px 30px; }
.cr-live-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px; padding: 8px 10px 8px 16px; margin-bottom: 10px;
}
.cr-live-left { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 900; letter-spacing: .16em; color: #f2efe8; }
.cr-live-count { font-family: var(--cr-bebas); font-size: 21px; letter-spacing: .04em; margin-left: 4px; }
.cr-live-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(242, 239, 232, .5); }
.cr-live-session .cr-m-quit { border-color: rgba(255, 255, 255, .3); color: #f2efe8; }

/* chat moment */
.cr-chat-card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.cr-chat-who { font-size: 11.5px; font-weight: 800; color: var(--cr-amber); }
.cr-chat-tx { font-size: 13.5px; color: #f2efe8; margin-top: 4px; line-height: 1.4; }
.cr-chat-opts { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.cr-chat-opt {
  text-align: left; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; padding: 10px 12px; color: #f2efe8; font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; line-height: 1.35;
}
.cr-chat-opt:hover { border-color: var(--cr-danger); }
.cr-chat-done { font-size: 12px; font-weight: 800; color: #6ee7a0; padding: 8px 2px; }
/* the practice board is a single hero — let it fill the width */
.cr-scorer-solo .x01-heroes-solo { grid-template-columns: 1fr; }

/* §8 darts step */
.cr-seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cr-seg3 > div {
  background: var(--cr-surface); border: 1px solid var(--cr-borderStrong); border-radius: 12px;
  padding: 10px 9px; cursor: pointer; text-align: center;
}
.cr-seg3 > div.cr-on { border-color: var(--cr-brand); background: var(--cr-brandWash); }
.cr-seg3 > div.cr-seg-off { opacity: .45; cursor: not-allowed; }
.cr-seg3 .cr-t { font-size: 12.5px; font-weight: 800; }
.cr-seg3 .cr-s { font-size: 10px; color: var(--cr-faint); margin-top: 3px; line-height: 1.3; }
.cr-darts-quick, .cr-darts-custom { margin-top: 10px; }
.cr-darts-quick input[type=range] { width: 100%; accent-color: var(--cr-brand); }
.cr-darts-w { font-family: var(--cr-bebas); font-size: 22px; text-align: right; margin-top: 2px; }
.cr-darts-quick select {
  width: 100%; padding: 9px 10px; border-radius: 10px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--cr-borderStrong); background: var(--cr-surface); color: var(--cr-text);
}
/* practice board: no opponent, so the ledger is three columns. The solo
   hero keeps game.css's own .x01-heroes-solo sizing — no career caps
   (scorer-parity ruling, 2026-08-14). */
.cr-ledger-solo .x01-lg-head,
.cr-ledger-solo .x01-lg-row { grid-template-columns: 1fr 1fr 46px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Concept C hub (approved 14 Aug 2026 — HUB_SPEC.md, mockup-12).
   A dark BROADCAST top — lower-third, oxblood strap, THE TOUR ticker — then
   the career lives on cream. The dark top is chrome, not a match surface;
   dark still means a match everywhere else. #ba2e1b is the broadcast brand
   red (the bug, the underline, the fans bar), distinct from oxblood money.
   ═══════════════════════════════════════════════════════════════════════ */

.cr-bcast {
  background:
    radial-gradient(ellipse 90% 70% at 85% -10%, rgba(186, 46, 27, .45), transparent 60%),
    linear-gradient(180deg, #16191d, #0e1113);
  color: #f2efe8; padding: 18px 16px 14px;
}
.cr-lt { display: flex; align-items: flex-end; gap: 12px; }
.cr-lt-av {
  width: 60px; height: 60px; border-radius: 12px; flex: none;
  background: linear-gradient(150deg, #2b3036, #171b1f); border: 2px solid #ba2e1b;
  display: grid; place-items: center; font-family: var(--cr-bebas); font-size: 22px;
}
.cr-lt-id { min-width: 0; }
.cr-lt-first { font-family: var(--cr-bebas); font-size: 16px; letter-spacing: .14em; color: rgba(242, 239, 232, .75); line-height: 1; }
.cr-lt-last { font-family: var(--cr-bebas); font-size: 37px; letter-spacing: .02em; line-height: .95; }
.cr-lt-nick { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; color: #ff8a7a; margin-top: 4px; }
.cr-lt-flag { height: 9px; vertical-align: -1px; }
.cr-persona-pill {
  margin-left: auto; align-self: flex-start; font-size: 8.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid rgba(242, 239, 232, .35); border-radius: 100px;
  padding: 5px 9px; color: rgba(242, 239, 232, .8);
}

/* the oxblood stats strap — a band of its own, directly under the
   broadcast top (sibling markup, so it can bleed on desktop) */
.cr-strap { display: flex; margin: 0; background: linear-gradient(90deg, var(--cr-brand), #ba2e1b 60%, #701812); }
.cr-strap-c { flex: 1; min-width: 0; padding: 9px 12px; border-right: 1px solid rgba(255, 255, 255, .22); }
.cr-strap-c:last-child { border-right: 0; }
.cr-strap-k { font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .65); font-weight: 800; white-space: nowrap; }
.cr-strap-v { font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .03em; margin-top: 1px; color: #fff; white-space: nowrap; }
.cr-strap-v small { font-size: 11px; color: rgba(255, 255, 255, .75); font-family: var(--cr-bebas); }

/* THE TOUR ticker — a broadcast bug with its red underline */
.cr-tick {
  background: #0a0d0f; padding: 8px 0; overflow: hidden; white-space: nowrap;
  position: relative; border-bottom: 3px solid #ba2e1b;
}
.cr-tick-lbl {
  position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center;
  background: #ba2e1b; padding: 0 10px; font-size: 8.5px; font-weight: 800;
  letter-spacing: .14em; z-index: 2; color: #fff;
}
.cr-tick-run {
  display: inline-block; font-size: 11px;
  color: rgba(242, 239, 232, .75); animation: crTickRun 24s linear infinite;
}
/* the clearance under the THE TOUR bug lives INSIDE each half of the loop
   (career-ui.js prepends one spacer per half), so translateX(-50%) always
   lands on an identical frame and no item can start behind the bug */
.cr-tick-pad { display: inline-block; width: 100px; }
.cr-tick-run b, .cr-tick-static b { color: #fff; font-weight: 700; }
.cr-tick-sep { color: #ba2e1b; margin: 0 10px; }
.cr-tick-static { display: none; padding-left: 100px; font-size: 11px; color: rgba(242, 239, 232, .75); }
@keyframes crTickRun { to { transform: translateX(-50%); } }

/* pending prompts slot directly under the ticker, above the billboard */
.cr-hub-banners { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 13px; }

/* the hub columns space their own cards — the body's flex gap only reaches
   its direct children */
.cr-hub-l, .cr-hub-r { display: flex; flex-direction: column; gap: 13px; }

/* the page footer: campaign strip + the retire footnote. On the phone it
   stacks exactly where the two blocks always sat; the desktop grid spans
   it under both columns */
.cr-hub-foot { display: flex; flex-direction: column; gap: 13px; min-width: 0; margin-top: 13px; }

/* ── the fixture billboard ── */
.cr-bill { padding: 10px 14px 14px; }
.cr-bill-name { font-family: var(--cr-bebas); font-size: 25px; line-height: 1; letter-spacing: .01em; }
.cr-bill-sub { font-size: 11px; color: var(--cr-muted); margin-top: 3px; }
.cr-opp {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
  background: var(--cr-bg); border: 1px solid var(--cr-borderStrong); border-radius: 11px; padding: 9px 11px;
}
.cr-oav {
  width: 36px; height: 36px; border-radius: 50%; background: var(--cr-dark); color: #fff;
  flex: none; display: grid; place-items: center; font-family: var(--cr-bebas); font-size: 14px;
}
.cr-opp-id { min-width: 0; }
.cr-opp-n { font-size: 12.5px; font-weight: 700; }
.cr-opp-n span { color: #ba2e1b; font-size: 9px; font-weight: 800; }
.cr-opp-s { font-size: 10px; color: var(--cr-faint); margin-top: 1px; }
.cr-opp-m { margin-left: auto; text-align: right; flex: none; }
.cr-opp-k { font-size: 7.5px; letter-spacing: .12em; color: var(--cr-faint); font-weight: 800; text-transform: uppercase; }
.cr-opp-v { font-family: var(--cr-bebas); font-size: 19px; color: var(--cr-brand); }
.cr-bill-strip { font-size: 10.5px; color: var(--cr-muted); font-style: italic; margin-top: 9px; }
.cr-cta-row { display: flex; gap: 8px; margin-top: 12px; }
.cr-cta-main { flex: 1; }
.cr-cta-skip { flex: 0 0 80px; }

/* ── the season rail: the goal on solid oxblood ── */
.cr-rail { background: var(--cr-brand); color: #fff; border-radius: 14px; padding: 13px 15px; }
.cr-rail-t { font-size: 12px; font-weight: 800; }
.cr-rail-s { font-size: 10.5px; color: rgba(255, 255, 255, .75); margin-top: 2px; }
.cr-railbar { height: 6px; background: rgba(255, 255, 255, .25); border-radius: 100px; margin-top: 9px; overflow: hidden; }
.cr-railbar i { display: block; height: 100%; background: #fff; border-radius: 100px; }

/* ── the meters ── */
.cr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cr-g { padding: 12px 13px; }
.cr-g-k { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; }
.cr-g-v { font-family: var(--cr-bebas); font-size: 26px; margin-top: 2px; letter-spacing: .02em; }
.cr-g-v small { font-size: 13px; color: var(--cr-faint); font-family: var(--cr-bebas); }
.cr-g-bar { height: 4px; background: rgba(18, 21, 23, .1); border-radius: 100px; margin-top: 8px; overflow: hidden; }
.cr-g-bar i { display: block; height: 100%; border-radius: 100px; }
.cr-g-s { font-size: 9.5px; color: var(--cr-faint); margin-top: 4px; line-height: 1.35; }

/* ── the press cutting: tilted, THE OCHE masthead ── */
.cr-cutwrap { padding: 4px 6px 4px; }
.cr-cut {
  background: var(--cr-paper); border: 1px solid rgba(18, 21, 23, .18); border-radius: 4px;
  overflow: hidden; transform: rotate(-.6deg); box-shadow: 0 8px 20px rgba(18, 21, 23, .16);
}
.cr-cut-m { background: var(--cr-dark); color: var(--cr-paper); padding: 6px 13px; display: flex; justify-content: space-between; align-items: center; }
.cr-cut-m b { font-family: var(--cr-bebas); font-size: 13px; letter-spacing: .08em; font-weight: 400; text-transform: uppercase; }
.cr-cut-m span { font-size: 9px; color: rgba(255, 255, 255, .55); font-weight: 700; }
.cr-cut-h { font-family: var(--cr-bebas); font-size: 23px; line-height: .98; padding: 10px 13px 4px; }
.cr-cut-s { font-size: 10.5px; color: rgba(18, 21, 23, .6); padding: 0 13px 12px; line-height: 1.4; }

/* PROGRESSION v2 §5 — inbox letters: the cutting's language WITHOUT the
   tilt (mockup-13 isn't approved; nothing new is invented here). A drop or
   a card-loss letter takes the oxblood masthead — a defeat, not a warning. */
.cr-cutwrap-flat { padding-top: 0; }
.cr-cut-flat { transform: none; box-shadow: 0 4px 12px rgba(18, 21, 23, .10); }
.cr-cut-bad .cr-cut-m { background: var(--cr-brand); }
.cr-cut-bad .cr-cut-m span { color: rgba(255, 255, 255, .75); }

/* §8 — a locked billboard reads greyed, its reasons in the sub line */
.cr-bill-locked .cr-bill-name { color: var(--cr-faint); }
.cr-bill-locked .cr-bill-sub { color: var(--cr-brand); font-weight: 700; line-height: 1.5; }

/* ── go live ── */
.cr-live2 { display: flex; align-items: center; gap: 11px; padding: 13px 14px; }
.cr-dotp { width: 9px; height: 9px; border-radius: 50%; background: #ba2e1b; flex: none; animation: crBlink 1.2s infinite; }
@keyframes crBlink { 50% { opacity: .25; } }
.cr-live-id { min-width: 0; }
.cr-live-t { font-size: 12.5px; font-weight: 800; }
.cr-live-s { font-size: 10px; color: var(--cr-faint); margin-top: 1px; }
.cr-live-go { margin-left: auto; background: #ba2e1b; color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 12px; font-weight: 800; width: auto; display: inline-block; flex: none; }

/* ── the campaign strip, light variant — closes the page on cream ── */
.cr-camp-light { overflow: hidden; min-width: 0; }
.cr-camp-light .cr-campstrip { padding: 14px 2px 4px; margin-top: 0; }
.cr-camp-light .cr-campstrip .rule { background: rgba(18, 21, 23, .25); }
.cr-camp-light .cr-campstrip .cs-tx { color: var(--cr-text); font-size: 12px; }
.cr-camp-light .cr-campstrip .cs-logo { height: 15px; }
.cr-camp-light .cr-campstrip .cs-dash { color: rgba(18, 21, 23, .45); }
/* the lockup must never widen the page — on a phone it scales down instead
   of overflowing the column */
@media (max-width: 480px) {
  .cr-camp-light .cr-campstrip { gap: 7px; }
  .cr-camp-light .cr-campstrip .cs-tx { font-size: 10.5px; letter-spacing: .08em; }
  .cr-camp-light .cr-campstrip .cs-logo { height: 13px; }
}

/* desktop: the three broadcast bands — dark top, oxblood strap, ticker —
   run FULL BLEED, edge to edge of the viewport (HUB_SPEC: "broadcast top
   full-width, ticker under it full-width"; ruling 14 Aug). The hub view
   opts out of the 1,400px view container; the bands span it; the cream
   body and the prompt banners re-constrain themselves to the container
   grid. Band CONTENT stays aligned to that grid via the gutter variable:
   the cream cards' left edge sits at (viewport − 1344)/2 + 14, so
   --crg mirrors it (percentages here resolve against the full-width view,
   never vw, so a classic scrollbar can never cause sideways overflow). */
@media (min-width: 900px) {
  #crView-hub {
    max-width: none;
    padding: 0;
    --crg: max(42px, calc(50% - 658px));
  }
  #crView-hub .cr-hub-banners,
  #crView-hub .cr-body {
    width: 100%; max-width: 1400px;
    margin-left: auto; margin-right: auto;
    padding-left: 28px; padding-right: 28px;
  }
  /* the body keeps its own 14px inside the 28px container gutter, exactly
     the geometry it had when the container lived on .cr-app — the cream
     cards' edge is the 42px line the band content aligns to */
  #crView-hub .cr-body { padding-left: 42px; padding-right: 42px; }
  .cr-bcast { padding: 26px var(--crg) 16px; }
  .cr-strap { padding: 0 max(30px, calc(50% - 670px)); } /* cells carry 12px */
  .cr-tick-pad { width: 128px; }
  .cr-tick-static { padding-left: 128px; }
  .cr-hub-banners {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px; padding-top: 16px;
  }
  .cr-lt-last { font-size: 44px; }
  .cr-strap-v { font-size: 22px; }
  /* the footer runs under BOTH columns of the hub grid */
  .cr-hub-body > .cr-hub-foot { grid-column: 1 / -1; }
}

/* ── desktop proportion pass (≥1200px), ruling 15 Aug: the hub composed
   for width, not the phone layout stretched. Specifics from the live-site
   review: a dense broadcast band with the nav pills absorbed into it, a
   strap with desktop-scale figures, a ticker that clears its bug and
   crawls at a sane speed, cream cards at desktop density, ENTER at button
   width rather than bar width, and retire demoted to a footnote. ─────── */
@media (min-width: 1200px) {
  /* 1 ── the broadcast band, composed for width. Tighter vertically, the
     lower third at real broadcast scale, the persona pill riding WITH the
     name block instead of orphaned at the far edge. */
  .cr-bcast { padding: 22px var(--crg) 20px; }
  .cr-lt { align-items: center; gap: 20px; }
  .cr-lt-av { width: 84px; height: 84px; border-radius: 16px; font-size: 30px; border-width: 2.5px; }
  .cr-lt-first { font-size: 21px; letter-spacing: .18em; }
  .cr-lt-last { font-size: 64px; }
  .cr-lt-nick { font-size: 13px; margin-top: 7px; letter-spacing: .18em; }
  .cr-lt-flag { height: 13px; vertical-align: -2px; }
  .cr-persona-pill {
    margin-left: 26px; align-self: center;
    font-size: 10px; padding: 8px 14px; border-width: 1.5px;
  }

  /* the nav pills live INSIDE the broadcast band, top right — one dark
     band fewer between the topbar and the content. Other views keep the
     sticky centred pill row from the ≥900 block. */
  body[data-cr-view="hub"] .cr-app { position: relative; }
  body[data-cr-view="hub"] .cr-tabs {
    position: absolute; top: 16px; right: max(42px, calc(50% - 658px));
    left: auto; bottom: auto; margin: 0; z-index: 30;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: none;
  }

  /* 2 ── the strap: four equal cells on the container grid, desktop-scale
     figures, vertically centred */
  .cr-strap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-strap-c { padding: 14px 12px 16px; display: flex; flex-direction: column; justify-content: center; }
  .cr-strap-k { font-size: 10px; letter-spacing: .22em; }
  .cr-strap-v { font-size: 36px; margin-top: 3px; }
  .cr-strap-v small { font-size: 16px; }

  /* 3 ── the ticker: taller bar, more clearance past the bug (the crawl
     speed is distance-proportional — career-ui.js sets the duration) */
  .cr-tick { padding: 10px 0; }
  .cr-tick-lbl { font-size: 10px; padding: 0 14px; }
  .cr-tick-run, .cr-tick-static { font-size: 12.5px; }
  .cr-tick-pad { width: 156px; }
  .cr-tick-static { padding-left: 156px; }

  /* 4 ── cream body at desktop density */
  .cr-hub-body { gap: 0 24px; }
  #crView-hub .cr-body { padding-top: 20px; padding-bottom: 36px; }
  .cr-hub-l, .cr-hub-r { gap: 16px; }
  .cr-card-h { padding: 14px 20px 0; }
  .cr-card-h h3 { font-size: 11px; }

  /* the fixture billboard */
  .cr-bill { padding: 12px 20px 20px; }
  .cr-bill-name { font-size: 38px; }
  .cr-bill-sub { font-size: 13px; margin-top: 6px; }
  .cr-opp { margin-top: 14px; padding: 13px 16px; gap: 14px; border-radius: 13px; }
  .cr-oav { width: 46px; height: 46px; font-size: 17px; }
  .cr-opp-n { font-size: 15px; }
  .cr-opp-n span { font-size: 11px; }
  .cr-opp-s { font-size: 12px; margin-top: 2px; }
  .cr-opp-k { font-size: 9px; }
  .cr-opp-v { font-size: 26px; }
  .cr-bill-strip { font-size: 12px; margin-top: 11px; }
  /* ENTER is a button, not a bar — auto width beside Skip, left-aligned */
  .cr-cta-row { margin-top: 16px; justify-content: flex-start; }
  .cr-cta-row .cr-cta-main { flex: 0 0 auto; width: auto; min-width: 280px; padding: 13px 30px; }
  .cr-cta-row .cr-cta-skip { flex: 0 0 auto; width: auto; min-width: 110px; padding: 13px 22px; }

  /* the season rail */
  .cr-rail { padding: 18px 22px; border-radius: 15px; }
  .cr-rail-t { font-size: 16px; }
  .cr-rail-s { font-size: 12.5px; margin-top: 4px; }
  .cr-railbar { height: 8px; margin-top: 12px; }

  /* the meters */
  .cr-g { padding: 16px 18px 18px; }
  .cr-g-k { font-size: 10px; }
  .cr-g-v { font-size: 40px; margin-top: 4px; }
  .cr-g-v small { font-size: 17px; }
  .cr-g-bar { height: 5px; margin-top: 10px; }
  .cr-g-s { font-size: 11.5px; margin-top: 7px; }

  /* the press cutting reads like a back page, not a stamp */
  .cr-cut-m { padding: 8px 17px; }
  .cr-cut-m b { font-size: 15px; }
  .cr-cut-m span { font-size: 10px; }
  .cr-cut-h { font-size: 30px; padding: 13px 17px 6px; }
  .cr-cut-s { font-size: 12.5px; padding: 0 17px 14px; }

  /* go live */
  .cr-live2 { padding: 18px 20px; gap: 13px; }
  .cr-live-t { font-size: 15px; }
  .cr-live-s { font-size: 12px; margin-top: 2px; }
  .cr-live-go { padding: 12px 26px; font-size: 13px; border-radius: 10px; }

  /* 5 ── the footer: campaign strip full-width under both columns, and
     retire demoted from a card-slot button to a quiet footnote link */
  .cr-hub-foot { margin-top: 12px; gap: 6px; }
  .cr-hub-foot .cr-camp-light .cr-campstrip { padding: 18px 2px 6px; }
  .cr-hub-foot .cr-retire {
    width: auto; align-self: center; background: none; border: 0;
    padding: 6px 10px; font-size: 12px; font-weight: 600;
    color: var(--cr-faint); text-decoration: underline; letter-spacing: 0;
  }
  .cr-hub-foot .cr-retire:hover { color: var(--cr-brand); }
}

/* reduced motion: the ticker parks on its first two items, the live dot
   holds steady (HUB_SPEC §3) */
@media (prefers-reduced-motion: reduce) {
  .cr-tick-run { display: none; }
  .cr-tick-static { display: inline-block; }
  .cr-dotp { animation: none; }
}

/* ═════════════════════ PROGRESSION v3 surfaces ═════════════════════════
   Managers panel, press conference, the hub socials feed. Same grammar as
   the rest of the cream views — cards, oxblood accents, Bebas verdicts. */

/* the managers panel */
.cr-agent-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--cr-border);
}
.cr-agent-row:last-child { border-bottom: 0; }
.cr-agent-row.cr-agent-locked { opacity: .55; }
.cr-agent-row.cr-agent-cur { background: var(--cr-brandWash); border-radius: 10px; padding: 13px 10px; }
.cr-agent-gr {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .5px;
  background: var(--cr-dark); color: #fff;
}
.cr-agent-gr-A { background: var(--cr-brand); }
.cr-agent-gr-B { background: var(--cr-amber); }
.cr-agent-gr-C { background: #4a5560; }
.cr-agent-id { flex: 1 1 auto; min-width: 0; }
.cr-agent-nm { font-size: 13px; font-weight: 800; }
.cr-agent-nm small { font-weight: 600; color: var(--cr-muted); margin-left: 4px; }
.cr-agent-bl { font-size: 11.5px; color: var(--cr-muted); margin-top: 2px; line-height: 1.45; }
.cr-agent-ct { font-size: 11px; font-weight: 700; color: var(--cr-brand); margin-top: 4px; }
.cr-agent-act { flex: 0 0 auto; align-self: center; text-align: right; max-width: 40%; }
.cr-agent-act .cr-btn { padding: 8px 12px; font-size: 11.5px; }
.cr-agent-tag {
  font-family: var(--cr-bebas); font-size: 15px; letter-spacing: 1px;
  color: var(--cr-brand);
}
.cr-agent-gate { font-size: 10.5px; color: var(--cr-faint); font-weight: 600; line-height: 1.4; display: inline-block; }

/* the hub socials feed — reuse the social-card grammar, tighter */
.cr-socfeed .cr-soc-card { margin-bottom: 8px; }
.cr-socfeed .cr-soc-card:last-child { margin-bottom: 0; }
.cr-socfeed .cr-soc-body { font-size: 12.5px; }

/* Season controls (31 Aug): the quiet fork under a moment's main button —
   retire from the review, or admire the record from the retirement card. */
.cr-moment-retire {
  display: block; margin: 14px auto 0; background: none; border: 0;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: rgba(242, 239, 232, .55); text-decoration: underline;
  font-family: inherit; letter-spacing: 0;
}
.cr-moment-retire:hover { color: #d0655a; }

/* When the lights go down, ALL of them go down: with a dark view active
   the page ground behind it goes dark too, so no cream sliver shows above
   the fold or past a short moment screen (Michael, 31 Aug: "format the
   page so it fills properly"). :has() is supported by every browser the
   scorer runs on; elsewhere this rule is simply ignored. */
html:has(.cr-view-dark.cr-on),
body:has(.cr-view-dark.cr-on) { background: #0d1013 !important; }
/* the same rule for the app shell itself — .cr-app paints the cream
   ground, so it must go dark with the view (the body rule alone left a
   cream band under a short moment screen). */
.cr-app:has(.cr-view-dark.cr-on) { background: #0d1013; }
/* the quiet way off the walk-on screen — nothing is logged before the
   Walk On, so backing out is free and the hub's Continue resumes it */
.cr-cards-back {
  display: block; margin: 10px auto 0; background: none; border: 0;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: rgba(242, 239, 232, .5); text-decoration: underline;
  font-family: inherit;
}
.cr-cards-back:hover { color: #f2efe8; }

/* ═══════════════════════════════════════════════════════════════════════════
   KIT-01 — THE KIT ROOM (3 Sep 2026). The shirt is drawn by js/career-kit.js;
   these are the frames it sits in: the editor (setup + Kit Room), the hub
   card, the sponsors card and the walk-on card slot.
   ═══════════════════════════════════════════════════════════════════════════ */
.cr-kit-svg { display: block; width: 100%; height: auto; }

/* editor */
.cr-kit-ed { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cr-kit-studio {
  position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(18,21,23,.18);
  background: linear-gradient(180deg, #1a1e22 0%, #131619 55%, #0b0d0f 100%);
  padding: 22px 16px 10px; display: flex; align-items: center; justify-content: center;
}
.cr-kit-cap { position: absolute; top: 9px; left: 12px; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: rgba(236,234,229,.4); }
.cr-kit-fig { width: 100%; max-width: 280px; margin: 0 auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.cr-kit-ctl { min-width: 0; }
.cr-kit-lab { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); font-weight: 800; margin: 12px 0 7px; display: flex; justify-content: space-between; align-items: baseline; }
.cr-kit-lab:first-child { margin-top: 0; }
.cr-kit-lab b { color: var(--cr-brand); letter-spacing: .1em; }
.cr-kit-lab span { font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 700; }
.cr-kit-fam { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-faint); opacity: .8; margin: 8px 0 4px; }
.cr-kit-fam:first-of-type { margin-top: 0; }
.cr-kit-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-kit-opt {
  background: var(--cr-surfaceAlt); border: 1px solid var(--cr-borderStrong); border-radius: 8px;
  color: var(--cr-muted); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 9px; cursor: pointer;
}
.cr-kit-opt.cr-on { border-color: var(--cr-brand); background: var(--cr-brandWash); color: var(--cr-text); }
/* KIT-01 rev 2 — one Word-style grid (10 hues across, 6 shades down) with
   zone tabs above it, each tab wearing its current colour. */
.cr-kit-zones { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.cr-kit-zones button {
  display: inline-flex; align-items: center; gap: 7px; background: var(--cr-surfaceAlt); border: 1px solid var(--cr-borderStrong);
  border-radius: 999px; color: var(--cr-muted); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 11px 5px 6px; cursor: pointer;
}
.cr-kit-zones button i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(18,21,23,.25); display: inline-block; }
.cr-kit-zones button.cr-on { border-color: var(--cr-brand); background: var(--cr-brandWash); color: var(--cr-text); }
.cr-kit-sw { display: grid; grid-template-columns: repeat(10, 24px); gap: 3px; }
.cr-kit-sw button { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(18,21,23,.18); cursor: pointer; padding: 0; }
.cr-kit-sw button:hover { transform: scale(1.12); border-color: rgba(18,21,23,.45); }
.cr-kit-sw button.cr-on { box-shadow: 0 0 0 2px var(--cr-surface), 0 0 0 4px var(--cr-brand); border-color: transparent; position: relative; z-index: 1; }
.cr-kit-lab span[data-kit-colname] { color: var(--cr-text); }
.cr-kit-name {
  width: 100%; max-width: 260px; background: var(--cr-surfaceAlt); border: 1px solid var(--cr-borderStrong); border-radius: 10px;
  font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .14em; color: var(--cr-text); padding: 8px 12px 6px; text-transform: uppercase;
}
.cr-kit-name:focus { outline: none; border-color: var(--cr-brand); }
.cr-sec-kit .cr-kit-fig { max-width: 240px; }

/* Kit Room view */
.cr-kit-topact { display: flex; gap: 8px; }
.cr-kit-topact .cr-btn { padding: 9px 14px; }
.cr-kit-room .cr-kit-fig { max-width: 300px; }
.cr-kit-place { display: flex; flex-direction: column; }
.cr-kit-prow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cr-border); font-size: 12.5px; }
.cr-kit-prow:last-child { border-bottom: none; }
.cr-kit-prow .z { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--cr-faint); }
.cr-kit-prow .n { font-weight: 700; color: var(--cr-text); text-align: right; }
.cr-kit-empty { font-size: 11.5px; color: var(--cr-faint); line-height: 1.45; }
.cr-kit-rules { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.cr-kit-rules > div { display: flex; flex-direction: column; font-size: 11px; color: var(--cr-faint); border-top: 1px solid var(--cr-border); padding-top: 6px; }
.cr-kit-rules b { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-text); }

/* sponsors view / Kit Room placement card */
.cr-kit-spcard { display: flex; gap: 16px; align-items: flex-start; }
.cr-kit-spfig { flex: 0 0 132px; width: 132px; border-radius: 10px; padding: 10px 6px 2px; background: linear-gradient(180deg, #1a1e22, #0b0d0f); }
.cr-kit-sptx { flex: 1; min-width: 0; }

/* hub card */
.cr-kit-hubcard { display: flex; gap: 14px; align-items: center; cursor: pointer; padding: 12px 14px; }
.cr-kit-hubcard:hover { border-color: var(--cr-borderStrong); }
.cr-kit-hubfig { flex: 0 0 74px; width: 74px; border-radius: 10px; padding: 6px 3px 0; background: linear-gradient(180deg, #1a1e22, #0b0d0f); }
.cr-kit-hubtx { min-width: 0; }
.cr-kit-hubline { font-family: var(--cr-bebas); font-size: 20px; letter-spacing: .04em; line-height: 1.05; margin: 2px 0 4px; }

/* walk-on card: the shirt between the name and the numbers */
.cr-pcard .kit { display: flex; justify-content: center; padding: 6px 0 2px; }
.cr-pcard .kit .cr-kit-svg { width: 148px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }

@media (max-width: 700px) {
  .cr-kit-ed { grid-template-columns: minmax(0, 1fr); }
  .cr-kit-studio { padding: 18px 14px 6px; }
  .cr-kit-spcard { flex-direction: column; }
  .cr-kit-spfig { width: 112px; }
  .cr-pcard .kit .cr-kit-svg { width: 124px; }
  .cr-kit-rules { grid-template-columns: 1fr; }
  .cr-kit-sw { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 300px; }
  .cr-kit-sw button { width: 100%; aspect-ratio: 1; height: auto; }
}
/* KIT-01 polish: the placement card keeps its padding without a figure, and
   the ghost button reads on the dark header. */
.cr-kit-spcard { padding: 14px; }
.cr-kit-topact .cr-btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.cr-kit-topact .cr-btn-ghost:hover { background: rgba(255,255,255,.08); }
.cr-kit-room { padding: 14px; }