/* r1432 callsigns (part 1): plates, chips, editor, progress, finish calls.
   Brand rules: mint (#2FE3D0) is the edge (cuts, selection), gold
   (#E8C879) is founder/legendary only, and only the founder plate moves. */

:root {
    --cs-mint: #2FE3D0;
    --cs-gold: #E8C879;
    --cs-night: #121A22;
    --cs-deep: #0E141A;
    --cs-line: #2A3540;
    --cs-line-soft: #1C2630;
    --cs-chalk: #EDF2F6;
    --cs-muted: #9AA7B4;
    --cs-mint-ink: #2FE3D0;
    --cs-gold-ink: #E8C879;
    --cs-hover: #151E27;
    --cs-selected: var(--cs-night);
    --cs-mono: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    --cs-display: var(--font-display, var(--font-body, system-ui, sans-serif));
}

/* Light mode: callsign controls, cards and text follow the page; plates stay dark
   objects (they re-declare the dark palette below), emblems sit on a dark coin,
   nicknames darken their ink, and mint and gold text use deeper shades. */
html[data-theme="light"] {
    --cs-night: #FFFFFF;
    --cs-deep: #FFFFFF;
    --cs-line: #C5D1DB;
    --cs-line-soft: #D7E0E8;
    --cs-chalk: #182735;
    --cs-muted: #526778;
    --cs-mint-ink: #0B7F75;
    --cs-gold-ink: #87620F;
    --cs-hover: #F1F5F8;
    --cs-selected: #EAFBF8;
}
.cs-plate, .cs-plate-swatch {
    --cs-night: #121A22;
    --cs-deep: #0E141A;
    --cs-line: #2A3540;
    --cs-line-soft: #1C2630;
    --cs-chalk: #EDF2F6;
    --cs-muted: #9AA7B4;
    --cs-mint-ink: #2FE3D0;
    --cs-gold-ink: #E8C879;
}
html[data-theme="light"] .cs-chip__emblem,
html[data-theme="light"] .cs-option__card img,
html[data-theme="light"] .cs-emblem-row img {
    background: radial-gradient(circle at 50% 38%, #2A3947 0%, #131B23 78%);
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
}
html[data-theme="light"] .fe-identity-avatar--callsign {
    background: radial-gradient(circle at 50% 38%, #2A3947 0%, #131B23 78%) !important;
    border-radius: 50% !important;
}
html[data-theme="light"] .fe-identity-avatar--callsign > img { padding: 7%; box-sizing: border-box; }
html[data-theme="light"] .cs-chip__nick,
html[data-theme="light"] .cs-ink-text {
    color: color-mix(in srgb, var(--cs-ink, #526778) 45%, #0B1015) !important;
}
html[data-theme="light"] .cs-belt > path:first-child { stroke: rgba(24, 39, 53, 0.45); }
html[data-theme="light"] .cs-swatch { box-shadow: 0 0 0 1px rgba(24, 39, 53, 0.28); }
html[data-theme="light"] .cs-finish-note--error { color: #A1470A; }

/* ── Chip (lists: forum, leaderboards) ─────────────────────────────── */
.cs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    min-width: 0;
}
.cs-chip__emblem {
    width: 22px;
    height: 22px;
    flex: none;
    display: block;
}
.cs-chip__nick {
    font-family: var(--cs-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}
.cs-chip__belt { flex: none; display: block; }
.cs-chip__emblem--inline { display: inline-block; vertical-align: middle; margin: -3px 6px 0 0; }
.cs-chip-line { display: flex; margin-top: 5px; }
.cs-belt { display: block; overflow: visible; }
.cs-belt--stat { width: 64px; height: auto; }
.cs-stat-belt__link { font-size: 12px; margin-top: 4px; }

/* ── Plate ─────────────────────────────────────────────────────────── */
.cs-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 132px;
    box-sizing: border-box;
    padding: 18px 34px 18px 16px;
    background: var(--cs-night);
    border-top: 1px solid var(--cs-line);
    color: var(--cs-chalk);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    overflow: hidden;
    isolation: isolate;
}
.cs-plate--compact { min-height: 104px; padding: 12px 28px 12px 12px; gap: 14px; }
.cs-plate__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cs-plate__cut {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background: linear-gradient(225deg, transparent 0 calc(50% - 1px), var(--cs-mint) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
    z-index: 2;
}
.cs-plate__emblem { position: relative; z-index: 1; flex: none; display: flex; }
.cs-plate__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 200px; }
.cs-plate__nick {
    font-family: var(--cs-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The name keeps at least 200px; when the side block (record, belt, founder belt) does not fit
   beside it, the side wraps to a second row instead of squeezing the name. */
.cs-plate:not(.cs-plate-swatch) { container-type: inline-size; flex-wrap: wrap; row-gap: 10px; }
/* Sized by the plate, never broken mid-name; long handles step down, then ellipsis. */
.cs-plate__handle {
    font-family: var(--cs-display);
    font-size: clamp(20px, 5.2cqi, 42px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-plate__handle--long { font-size: clamp(16px, 3.6cqi, 30px); }
.cs-plate__meta, .cs-plate__belt small, .cs-plate__record small {
    font-family: var(--cs-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--cs-muted);
}
.cs-plate__side { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: center; gap: 18px; }
.cs-plate__record { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cs-plate__record span { font-family: var(--cs-mono); font-size: 22px; letter-spacing: 0.02em; white-space: nowrap; }
.cs-plate__rule { width: 1px; height: 52px; background: var(--cs-line); }
.cs-plate__belt { display: flex; flex-direction: column; gap: 7px; }
/* Founder plate: the turning belt shows only once WebGL is live. */
.cs-plate__founder-belt { display: none; width: 112px; height: 112px; margin: -10px 0; }
.cs-plate__founder-belt[data-cs-live] { display: block; }

/* Finishes: all still. */
.cs-plate--slate { background: linear-gradient(115deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 42%), linear-gradient(180deg, #24303B 0%, #19212A 100%); border-top-color: #4A5662; }
.cs-plate--carbon {
    background-color: #12191F;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 55%), linear-gradient(27deg, #141B21 5px, transparent 5px), linear-gradient(207deg, #141B21 5px, transparent 5px), linear-gradient(27deg, #1D252D 5px, transparent 5px), linear-gradient(207deg, #1D252D 5px, transparent 5px), linear-gradient(90deg, #182027 10px, transparent 10px), linear-gradient(#1A2229 25%, #161D24 25%, #161D24 50%, transparent 50%, transparent 75%, #1F2830 75%, #1F2830);
    background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
    background-position: 0 0, 0 5px, 10px 0px, 0px 10px, 10px 5px, 0 0, 0 0;
    border-top-color: #3A4652;
}
.cs-plate--brushed {
    background-color: #2E3740;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 3px), linear-gradient(100deg, #262E36 0%, #3E4852 24%, #283039 48%, #3A444E 74%, #252C34 100%);
    border-top-color: #7A8692;
}
.cs-plate--brushed .cs-plate__meta, .cs-plate--brushed small { color: #C9D2DA; }
.cs-plate--edge { border-top-color: var(--cs-mint); }
.cs-plate--edge .cs-plate__overlay { inset: 5px; border: 1px solid rgba(47,227,208,0.5); }
.cs-plate--oxblood { background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 38%), linear-gradient(90deg, #3C131B 0%, #2B0F15 48%, #1F0B10 100%); border-top-color: #7A3340; }
.cs-plate--oxblood .cs-plate__overlay { inset: 7px; border: 1px dashed rgba(255,214,214,0.3); }
.cs-plate--oxblood .cs-plate__meta, .cs-plate--oxblood small { color: #C9B5B8; }
.cs-plate--graphite {
    background-color: #10161C;
    background-image: linear-gradient(rgba(237,242,246,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(237,242,246,0.07) 1px, transparent 1px), linear-gradient(rgba(237,242,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(237,242,246,0.04) 1px, transparent 1px);
    background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    border-top-color: #3A4652;
}
.cs-plate--ember { background: radial-gradient(120% 150% at 16% 135%, rgba(255,90,54,0.34) 0%, rgba(255,90,54,0) 56%), linear-gradient(90deg, #1C1311 0%, #121A22 72%); border-top-color: rgba(255,110,80,0.6); box-shadow: inset 0 -1px 0 rgba(255,90,54,0.45); }
.cs-plate--founder { background: linear-gradient(90deg, #17140D 0%, #121A22 60%); border-top-color: var(--cs-gold); }
.cs-plate--founder .cs-plate__meta { color: var(--cs-gold); }
.cs-plate__sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background: linear-gradient(100deg, rgba(232,200,121,0) 0%, rgba(232,200,121,0.10) 45%, rgba(255,255,255,0.16) 50%, rgba(232,200,121,0.10) 55%, rgba(232,200,121,0) 100%);
    transform: translateX(-260px);
    animation: csSheen 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes csSheen { 0% { transform: translateX(-260px); } 55%, 100% { transform: translateX(1400px); } }

/* Forged sigils turn slowly on the plate; the cut holds still. */
.cs-emblem { display: block; overflow: visible; }
.cs-emblem--spin .cs-emblem__a { animation: csSpin 150s linear infinite; transform-origin: 0 0; }
.cs-emblem--spin .cs-emblem__b { animation: csSpinR 100s linear infinite; transform-origin: 0 0; }
.cs-emblem--spin .cs-emblem__core { animation: csSpin 260s linear infinite; transform-origin: 0 0; }
@keyframes csSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes csSpinR { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cs-plate__sheen, .cs-emblem--spin .cs-emblem__a, .cs-emblem--spin .cs-emblem__b, .cs-emblem--spin .cs-emblem__core { animation: none; }
    .cs-plate__sheen { display: none; }
}

@media (max-width: 640px) {
    .cs-plate { flex-wrap: wrap; padding-right: 28px; }
    .cs-plate__side { margin-left: 0; width: 100%; justify-content: space-between; }
    .cs-plate__emblem .cs-emblem { width: 64px; height: 64px; }
}

/* ── Shared pieces for the callsign pages ──────────────────────────── */
.cs-page { display: flex; flex-direction: column; gap: 22px; }
.cs-kicker { font-family: var(--cs-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cs-muted); text-transform: uppercase; }
.cs-kicker--mint { color: var(--cs-mint-ink); }
.cs-kicker--gold { color: var(--cs-gold-ink); }
.cs-section { display: flex; flex-direction: column; gap: 12px; }
.cs-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-section__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-heading, var(--cs-chalk)); }
.cs-note { font-size: 13px; line-height: 1.5; color: var(--text-muted, var(--cs-muted)); margin: 0; }
.cs-flash-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Editor ────────────────────────────────────────────────────────── */
.cs-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cs-options--wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cs-options--inks { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.cs-options--inks .cs-option__name { white-space: nowrap; }
/* Nickname inks carry a PRO or 1 OF 1 tag: it sits under the name instead of being clipped. */
.cs-options--inks-tagged { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.cs-options--inks-tagged .cs-option__card { flex-wrap: wrap; row-gap: 2px; }
.cs-options--inks-tagged .cs-option__tag { margin-left: 0; flex-basis: 100%; padding-left: 32px; }
.cs-save-status { min-height: 18px; margin: 10px 0 0; font-family: var(--cs-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cs-mint-ink); }
.cs-option { position: relative; display: block; }
.cs-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-option__card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--cs-line-soft);
    background: var(--cs-deep);
    border-radius: 2px;
    cursor: pointer;
    color: var(--cs-chalk);
    transition: border-color 120ms ease, background 120ms ease;
}
.cs-option__card:hover { background: var(--cs-hover); }
.cs-option input:checked + .cs-option__card { border-color: var(--cs-mint-ink); background: var(--cs-selected); }
.cs-option input:focus-visible + .cs-option__card { outline: 2px solid var(--cs-mint-ink); outline-offset: 2px; }
.cs-option input:disabled + .cs-option__card { cursor: not-allowed; opacity: 0.5; }
.cs-option__name { font-size: 14px; font-weight: 700; line-height: 1.2; }
.cs-option__sub { font-size: 12px; line-height: 1.35; color: var(--cs-muted); }
.cs-option__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-option__tag { margin-left: auto; font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--cs-muted); white-space: nowrap; }
.cs-option__tag--pro { color: var(--cs-chalk); }
.cs-option__tag--gold { color: var(--cs-gold-ink); }
.cs-swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.cs-plate-swatch { width: 56px; height: 24px; flex: none; clip-path: polygon(0 0, 48px 0, 56px 8px, 56px 24px, 0 24px); border-top: 1px solid var(--cs-line); }
.cs-plate-swatch.cs-plate { min-height: 0; padding: 0; display: block; }
/* Plate options (part 2 on): a long tag (LOCKED · SEASON 01) drops under the text instead of squeezing it. */
.cs-options--plates .cs-option__card { flex-wrap: wrap; row-gap: 4px; }
.cs-options--plates .cs-option__card > .cs-option__text { flex: 1 1 120px; }
.cs-editor-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The preview (plate and save status, nothing else) stays pinned while you pick,
   on a page-coloured backdrop. The member-number note sits with the sigil options. */
.cs-editor-preview {
    position: sticky; top: calc(var(--cs-pin-top, 0px) + 12px); z-index: 3;
    background: var(--fe-canvas, #0B1015); padding-bottom: 6px;
    box-shadow: 0 -12px 0 0 var(--fe-canvas, #0B1015), 0 12px 14px -12px rgba(0, 0, 0, 0.8);
}
html[data-theme="light"] .cs-editor-preview {
    box-shadow: 0 -12px 0 0 var(--fe-canvas, #F5F6F8), 0 12px 14px -12px rgba(24, 39, 53, 0.3);
}
body[data-fe-workflow-shell="1"] .cs-editor-preview { --cs-pin-top: calc(var(--fe-shell-header-h, 56px) + env(safe-area-inset-top, 0px)); }
.cs-member-note { margin-top: -4px; }
/* Phones: a slim pinned plate (emblem, nickname, handle) so the options under it stay readable. */
@media (max-width: 760px) {
    .cs-editor-preview { top: var(--cs-pin-top, 0px); padding-top: 6px; }
    .cs-editor-preview .cs-plate { min-height: 0; padding: 8px 26px 8px 8px; gap: 12px; flex-wrap: nowrap; }
    .cs-editor-preview .cs-plate__side, .cs-editor-preview .cs-plate__meta { display: none; }
    .cs-editor-preview .cs-plate__emblem .cs-emblem,
    .cs-editor-preview .cs-plate__emblem .cs-emblem-3d { width: 52px !important; height: 52px !important; }
    .cs-editor-preview .cs-plate__copy { flex: 1 1 auto; gap: 4px; }
    .cs-editor-preview .cs-plate__handle { font-size: clamp(16px, 7cqi, 26px); }
    .cs-editor-preview .cs-save-status { margin-top: 6px; }
}

/* ── Progress ──────────────────────────────────────────────────────── */
.cs-meter { height: 6px; background: var(--cs-line-soft); position: relative; overflow: hidden; border-radius: 3px; }
.cs-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cs-mint); border-radius: 3px; }
.cs-meter--quiet .cs-meter__fill { background: #6B7782; }
.cs-belt-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cs-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--cs-deep); border-top: 1px solid var(--cs-line-soft); }
.cs-stat__value { font-family: var(--cs-mono); font-size: 22px; color: var(--cs-chalk); }
.cs-stat__label { font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--cs-muted); text-transform: uppercase; }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cs-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    background: var(--cs-deep);
    border-left: 2px solid var(--cs-line-soft);
    min-width: 0;
}
.cs-card--earned { background: var(--cs-night); border-left-color: var(--cs-mint-ink); }
.cs-card--founder { border-left-color: var(--cs-gold); }
.cs-card__top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--cs-mono); font-size: 9px; letter-spacing: 0.14em; color: #6B7782; }
.cs-card__name { font-family: var(--cs-mono); font-size: 13px; letter-spacing: 0.05em; color: var(--cs-muted); text-transform: uppercase; overflow-wrap: anywhere; }
.cs-card--earned .cs-card__name { color: var(--cs-chalk); }
.cs-card__rule { font-size: 13px; line-height: 1.4; color: var(--cs-muted); }
.cs-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cs-card__foot .cs-meter { flex: 1; height: 3px; }
.cs-card__state { font-family: var(--cs-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--cs-muted); white-space: nowrap; }
.cs-card--earned .cs-card__state { color: var(--cs-mint-ink); }
.cs-rarity--rare { color: var(--cs-mint-ink); }
.cs-rarity--legendary, .cs-rarity--founder { color: var(--cs-gold-ink); }
.cs-emblem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cs-emblem-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--cs-deep); }
.cs-emblem-row img { width: 56px; height: 56px; flex: none; }
.cs-emblem-row--locked img { opacity: 0.35; }
.cs-new { display: inline-block; padding: 2px 6px; border: 1px solid var(--cs-mint-ink); color: var(--cs-mint-ink); font-family: var(--cs-mono); font-size: 9px; letter-spacing: 0.14em; }

@media (max-width: 760px) {
    .cs-belt-hero { grid-template-columns: 1fr; }
}

/* ── Lock or Fade: optional finish call ────────────────────────────── */
.cs-finish { margin: -2px 0 6px; padding: 0 12px 8px; }
.cs-finish summary { cursor: pointer; font-size: 12px; color: var(--text-dim, var(--cs-muted)); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.cs-finish summary::-webkit-details-marker { display: none; }
.cs-finish summary::before { content: "+"; font-family: var(--cs-mono); color: var(--cs-mint-ink); }
.cs-finish[open] summary::before { content: "–"; }
.cs-finish form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cs-finish select {
    min-height: 36px;
    padding: 0 10px;
    background: var(--bg-input, var(--cs-night));
    color: var(--cs-chalk);
    border: 1px solid var(--cs-line);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
}
.cs-finish button { min-height: 36px; }
.cs-finish-note { font-size: 12px; color: var(--cs-mint-ink); }
.cs-finish-note--error { color: #FF9F43; }
.cs-finish-locked { padding: 0 12px 8px; font-size: 12px; color: var(--text-dim, var(--cs-muted)); }

/* ── Trivia: Fight IQ streak ───────────────────────────────────────── */
.cs-iq { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px; background: var(--cs-deep); border-left: 2px solid var(--cs-mint-ink); }
.cs-iq__value { font-family: var(--cs-mono); font-size: 22px; color: var(--cs-chalk); }
.cs-iq__label { font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--cs-muted); }

/* ── r1433 part 2: seasons, patches, XP, standings ─────────────────────
   Ember (#FF5A36) belongs to Season 01 only: the season accent, never a
   rank colour. Season art is drawn in light strokes, so it sits on a dark
   coin or tile in light mode, like the emblems above. */
:root { --cs-ember: #FF5A36; --cs-ember-ink: #FF7A5C; }
html[data-theme="light"] { --cs-ember-ink: #B4380F; }
.cs-plate, .cs-plate-swatch { --cs-ember-ink: #FF7A5C; }
.cs-option__tag--season { color: var(--cs-ember-ink); }
.cs-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--cs-chalk); cursor: pointer; }
.cs-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--cs-mint-ink); }
.cs-plate__stamps { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cs-plate__stamps img { display: block; width: 30px; height: 30px; }
.cs-meter__fill--season { background: var(--cs-season-ink, var(--cs-ember)); }

.cs-season-soon { padding: 16px; background: var(--cs-deep); border-top: 1px solid var(--cs-ember); }
.cs-season-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    background: var(--cs-deep);
    border-top: 1px solid var(--cs-season-ink, var(--cs-ember));
}
.cs-season-emblem { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cs-season-emblem > svg { flex: none; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1B2530 0%, #0E141A 78%); }
.cs-season-emblem > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-season-tier { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-season-tier__value { font-family: var(--cs-mono); font-size: 28px; letter-spacing: 0.06em; color: var(--cs-chalk); }

/* The track scrolls sideways inside its own box on phones; the page never does. */
.cs-track { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.cs-track__row { display: grid; grid-template-columns: 92px repeat(10, minmax(66px, 1fr)); gap: 2px; min-width: 780px; }
.cs-track__label {
    position: sticky; left: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 10px;
    background: var(--cs-deep);
    font-family: var(--cs-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted);
}
.cs-track__label strong { font-weight: 700; color: var(--cs-chalk); }
.cs-track__label small { font-size: 10px; letter-spacing: 0.02em; text-transform: none; }
.cs-track__tier { padding: 6px 0; text-align: center; background: var(--cs-deep); border-bottom: 2px solid var(--cs-line-soft); font-family: var(--cs-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cs-muted); }
.cs-track__tier.is-reached { color: var(--cs-chalk); border-bottom-color: var(--cs-season-ink, var(--cs-ember)); }
.cs-track__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 86px; padding: 8px 4px; background: var(--cs-deep); }
.cs-track__cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--cs-line-soft); }
.cs-track__reward { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0.5; }
.cs-track__cell.is-reached .cs-track__reward, .cs-track__reward.is-held { opacity: 1; }
.cs-track__reward small { max-width: 74px; font-size: 10px; line-height: 1.25; color: var(--cs-muted); overflow-wrap: anywhere; }
.cs-track__reward.is-held small { color: var(--cs-chalk); }
.cs-track-icon { display: block; }
html[data-theme="light"] .cs-track-icon { padding: 4px; border-radius: 6px; background: #131B23; }

.cs-patches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cs-patch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 10px 6px; background: var(--cs-deep); text-align: center; }
.cs-patch svg { display: block; width: 56px; height: auto; }
.cs-patch figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.cs-patch__kind { font-family: var(--cs-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--cs-muted); }
.cs-patch.is-got .cs-patch__kind { color: var(--cs-chalk); }
.cs-patch__big { font-family: var(--cs-mono); font-size: 13px; color: var(--cs-chalk); overflow-wrap: anywhere; }
.cs-patch__small { font-size: 11px; line-height: 1.3; color: var(--cs-muted); overflow-wrap: anywhere; }
.cs-patch.is-missed { opacity: 0.6; }
.cs-patch.is-ahead { background: transparent; box-shadow: inset 0 0 0 1px var(--cs-line-soft); }

.cs-xp-table { display: flex; flex-direction: column; gap: 2px; }
.cs-xp-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 96px 64px; gap: 10px; align-items: center; padding: 10px 12px; background: var(--cs-deep); font-size: 13px; color: var(--cs-chalk); }
.cs-xp-table__row > span:not(:first-child) { font-family: var(--cs-mono); font-size: 12px; text-align: right; white-space: nowrap; }
.cs-xp-table__row strong { display: block; font-weight: 700; }
.cs-xp-table__row small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--cs-muted); }
.cs-xp-table__row.cs-xp-table__row--head { padding-top: 0; padding-bottom: 4px; background: transparent; }
.cs-xp-table__row.cs-xp-table__row--head > span { font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-muted); }

.cs-standings { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cs-standings__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 12px; background: var(--cs-deep); font-size: 14px; }
.cs-standings__row a { overflow: hidden; font-weight: 700; color: var(--cs-chalk); text-overflow: ellipsis; white-space: nowrap; }
.cs-standings__row.is-mine { background: var(--cs-selected); box-shadow: inset 2px 0 0 var(--cs-season-ink, var(--cs-ember)); }
.cs-standings__rank { font-family: var(--cs-mono); font-size: 12px; color: var(--cs-muted); }
.cs-standings__pts { font-family: var(--cs-mono); font-size: 13px; color: var(--cs-chalk); white-space: nowrap; }
.cs-standings__meta { font-family: var(--cs-mono); font-size: 11px; color: var(--cs-muted); white-space: nowrap; }

.cs-admin-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-admin-start label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.cs-admin-start input[type="text"] { min-height: 36px; padding: 0 8px; background: var(--bg-input, var(--cs-night)); color: var(--cs-chalk); border: 1px solid var(--cs-line); border-radius: var(--radius-sm, 6px); }

@media (max-width: 760px) {
    .cs-season-head { grid-template-columns: 1fr; }
    .cs-season-emblem > svg { width: 88px; height: 88px; }
    .cs-patches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .cs-patches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-xp-table__row { grid-template-columns: minmax(0, 1fr) 40px 76px 44px; gap: 6px; padding: 9px 10px; }
    .cs-standings__row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; }
    .cs-standings__meta { grid-column: 2 / -1; }
}

/* ── r1433 part 2: pick receipts and Breakdown threads (forum) ──────── */
.cs-receipt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    margin: 10px 0 2px;
    padding: 10px 12px;
    background: var(--cs-deep);
    border-left: 2px solid var(--cs-line);
    font-size: 13px;
    color: var(--cs-chalk);
}
.cs-receipt__head { grid-column: 1 / -1; font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-muted); overflow-wrap: anywhere; }
.cs-receipt__fight { grid-column: 1 / -1; font-weight: 700; overflow-wrap: anywhere; }
.cs-receipt__body { color: var(--cs-muted); overflow-wrap: anywhere; }
.cs-receipt__stamp { justify-self: end; padding: 3px 8px; border: 1px solid currentColor; font-family: var(--cs-mono); font-size: 11px; letter-spacing: 0.14em; white-space: nowrap; color: var(--cs-muted); }
.cs-receipt--hidden { border-left-style: dashed; }
.cs-receipt--correct { border-left-color: var(--cs-mint-ink); }
.cs-receipt--correct .cs-receipt__stamp { color: var(--cs-mint-ink); }
.cs-receipt--wrong { border-left-color: #C25B4E; }
.cs-receipt--wrong .cs-receipt__stamp { color: #E58475; }
html[data-theme="light"] .cs-receipt--wrong .cs-receipt__stamp { color: #A33A2C; }
.cs-breakdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0; padding: 10px 12px; background: var(--cs-deep); border-top: 1px solid var(--cs-mint-ink); }
.cs-breakdown__kind { font-family: var(--cs-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--cs-mint-ink); }
.cs-breakdown__fight { font-weight: 800; color: var(--cs-chalk); overflow-wrap: anywhere; }
.cs-breakdown__event { font-size: 12px; color: var(--cs-muted); }
.cs-composer-extras { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.cs-attach { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-primary, var(--cs-chalk)); }
.cs-attach select {
    max-width: 100%;
    min-height: 40px;
    padding: 0 10px;
    background: var(--bg-input, var(--cs-night));
    color: var(--cs-chalk);
    border: 1px solid var(--cs-line);
    border-radius: var(--radius-sm, 6px);
    font-size: 14px;
}
.cs-attach small { font-size: 12px; line-height: 1.4; color: var(--text-muted, var(--cs-muted)); }
.cs-attach[hidden] { display: none; }
@media (max-width: 760px) {
    .cs-attach select { font-size: 16px; }
}