/* Realms of Elynia — hahmolakana, Training grounds ja julkinen profiili
   kolmelletoista attribuutille (doc 58 F4-05, doc 60 PR 7).

   HAHMOLAKANA on referenssi v3.0 (Castra + Tabula, lukittu 6.11.2026): sen
   säännöt ovat tiedoston lopussa omassa osiossaan. Alla oleva v2.0:n kuvaus
   koskee Training groundsia, respecin katselmusta ja julkista profiilia, jotka
   pysyvät v2.0:ssa (referenssi v2.0, Scutum); v2.0-lakanan omat säännöt
   (sankaririvi, Combat-kortti, Skills-kortti, Aediculan paikka) poistuivat.

   SIIRRETTY LUKITUSTA REFERENSSISTÄ: Facelift/Character/REFERENCE.html v2.0
   (SHA-256 8a385156…dd273, lukittu 24.10.2026). Säännöt ovat referenssin
   .fl-cs-osion säännöt, jokainen .fl-cs-juuren alla (sopimus 7: mikään sääntö
   ei ulotu juuren ulkopuolelle). Tuotannon erot referenssiin:
   - referenssin kehyksen --gf-bottom on tässä --cs-bottom, pelin oikean
     alapalkin korkeus puhelimella. Sen mittaa views/attrSheet.js pelin omasta
     .nav-palkista (merkit ja safe area muuttavat sitä); alla oleva arvo on
     vain vara ennen ensimmäistä mittausta;
   - Equipment on pelin oma Aedicula-kortti (sopimus 3.13: sisältö ja rakenne
     kuten rakennettu). Säännöt lopussa vain sijoittavat sen ruudukkoon ja
     antavat sen jakaa ylimääräisen korkeuden osioilleen. Jalusta ja lompakko
     muuttuvat aedicula.js:ssä ja aedTreasuryssä omilla säännöillään
     (styles.css), eivät tämän juuren kautta;
   - Skills-rivit ovat linkkejä ammattisivulle kuten tänään, joten rivi on
     vähintään 44 px korkea (Brand 6.6);
   - referenssin merkinnät (.cs-note, .cs-rest, .cs-pane-note) ja Equipment-
     piirros (.cs-eq-*, .cs-slot, .cs-por, .cs-plinth, .cs-purse) jäävät pois.
   Muutos tähän tiedostoon on muutos lukittuun ulkoasuun: se tarvitsee uuden
   referenssiversion. Ladataan kuoren mukana (assetVersion.js
   SHELL_STYLESHEETS); seitsemällä attribuutilla mikään näkymä ei käytä
   .fl-cs-juurta, joten tiedosto ei muuta mitään. */
@font-face { font-family: 'Cinzel RoE'; src: url('/assets/fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter RoE'; src: url('/assets/fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@media (max-width: 899px) { .fl-cs { --cs-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* ═══ THE REFERENCE (.fl-cs) ══════════════════════════════════════════════ */
.fl-cs {
  --cs-night: #100c09; --cs-panel: rgba(18, 13, 9, .94); --cs-raise: #1b140e; --cs-well: rgba(6, 5, 4, .55);
  --cs-ivory: #eee2ca; --cs-text2: #cbbd9f; --cs-muted: #a8987b;
  --cs-gold: #c99744; --cs-gold-hi: #e5c278; --cs-gold-dim: #8c6a32;
  --cs-line: rgba(201, 151, 68, .32); --cs-line-soft: rgba(201, 151, 68, .16);
  --cs-laurel: #a8c77c; --cs-crimson: #e08a7c; --cs-note: #8fb6e0;
  --cs-r-rare: #6f93d8; --cs-r-epic: #a678d6; --cs-r-leg: #e39a45;
  color: var(--cs-ivory);
  font: 400 16px/1.45 'Inter RoE', 'Segoe UI', system-ui, sans-serif;
}
/* The reference's global helpers, scoped: a closed tile detail stays closed. */
.fl-cs [hidden] { display: none !important; }
.fl-cs .nw { white-space: nowrap; }
.fl-cs .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Resets carry no specificity (:where), so every component rule below wins. */
:where(.fl-cs) :where(h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.fl-cs) :where(ul, ol) { list-style: none; }
:where(.fl-cs) a { color: var(--cs-gold-hi); text-underline-offset: 3px; }
:where(.fl-cs) button { font: inherit; color: inherit; cursor: pointer; }
:where(.fl-cs) img { display: block; }
.fl-cs :focus-visible { outline: 2px solid var(--cs-gold-hi); outline-offset: 2px; }

.fl-cs.cs-root { container: cs / inline-size; width: 100%; }
.fl-cs .cs { display: grid; gap: 16px; padding: 16px 20px 28px; width: 100%; max-width: 1640px; margin-inline: auto; }
@container cs (width < 560px) { .fl-cs .cs { padding: 12px 16px 24px; gap: 12px; } }

.fl-cs .cs-card { position: relative; min-width: 0; padding: 16px 18px 18px; background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 4px; box-shadow: 0 16px 36px rgba(0, 0, 0, .4); }
@container cs (width < 560px) { .fl-cs .cs-card { padding: 14px 14px 16px; } }
.fl-cs .cs-h { font: 700 18px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .06em; color: var(--cs-gold-hi); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fl-cs .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--cs-line); border-radius: 3px; background: rgba(201, 151, 68, .08); color: var(--cs-ivory); font: 600 15px/1.15 'Inter RoE', sans-serif; text-decoration: none; text-align: center; }
.fl-cs .cs-btn:hover { border-color: var(--cs-gold-hi); }
.fl-cs .cs-btn-primary { background: linear-gradient(180deg, #e9c983, #b8862f); border-color: #f0d08a; color: #1c1309; font-weight: 700; }
.fl-cs .cs-btn-quiet { background: transparent; color: var(--cs-text2); }
.fl-cs .cs-btn[disabled] { opacity: .5; cursor: not-allowed; }
.fl-cs .cs-btn[aria-busy="true"] { opacity: .8; cursor: progress; }
/* The tile stepper: every button is at least 44 by 44 and says what it moves. */
.fl-cs .cs-stepbtn { min-width: 44px; height: 44px; padding: 0 5px; border: 1px solid var(--cs-gold-dim); border-radius: 3px; background: linear-gradient(180deg, #33260f, #1d150c); color: var(--cs-gold-hi); font: 700 16px/1 'Inter RoE', sans-serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-stepbtn:hover:not([disabled]) { border-color: var(--cs-gold-hi); background: linear-gradient(180deg, #4a3716, #2a1e0f); }
.fl-cs .cs-stepbtn[disabled] { opacity: .38; cursor: not-allowed; }
.fl-cs .cs-stepbtn.is-minus { color: var(--cs-text2); }

/* ── Notices: route banner, obstacle, alert, warning (Brand 6.11) ─────── */
/* Release reset line (contract 3.6): one line under the Attributes head in
   place of the banner (owner, 25.10.2026). */
.fl-cs .cs-reset-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 4px 6px 4px 12px; border: 1px solid rgba(229, 194, 120, .35); border-left: 3px solid var(--cs-gold-hi); border-radius: 3px; background: rgba(120, 90, 30, .18); }
.fl-cs .cs-reset-line p { margin: 0; flex: 1 1 260px; min-width: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-reset-line b { font-weight: 700; color: var(--cs-gold-hi); }
.fl-cs .cs-reset-more { flex: none; padding: 0 12px; }
/* Obstacle: a server-stated reason the action cannot run (working, nothing to reset). */
.fl-cs .cs-block { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(238, 226, 202, .35); border-left: 3px solid var(--cs-gold); border-radius: 3px; background: var(--cs-well); font: 400 15px/1.4 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-block b { color: var(--cs-gold-hi); font-weight: 700; }
.fl-cs .cs-block img { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
/* Alert: something needs the player (failed, out of date). Never fades on its own. */
.fl-cs .cs-alert { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(224, 138, 124, .6); border-left: 3px solid var(--cs-crimson); border-radius: 3px; background: rgba(120, 40, 30, .22); font: 400 15px/1.4 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-alert b { color: #f2b2a6; font-weight: 700; }
.fl-cs .cs-alert.is-stale { border-color: rgba(229, 194, 120, .6); border-left-color: var(--cs-gold-hi); background: rgba(120, 90, 30, .22); }
.fl-cs .cs-alert.is-stale b { color: var(--cs-gold-hi); }
.fl-cs .cs-alert .cs-btn { justify-self: start; margin-top: 4px; }
.fl-cs .cs-ref { font: 400 12px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* ── The board (Scutum) ────────────────────────────────────────────────── */
.fl-cs .cs-board { container: board / inline-size; display: flex; flex-direction: column; padding: 0; }
.fl-cs .cs-board-in { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
@container cs (width < 560px) { .fl-cs .cs-board-in { padding: 14px 12px 16px; gap: 12px; } }
.fl-cs .cs-attr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.fl-cs .cs-attr-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fl-cs .cs-sum { font: 500 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-sum b { color: var(--cs-ivory); font-weight: 700; }
.fl-cs .cs-nothing { flex: 1 1 100%; }

/* Spend box: one band across the board */
.fl-cs .cs-spend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border: 1px solid rgba(229, 194, 120, .5); border-radius: 3px; background: linear-gradient(180deg, rgba(201, 151, 68, .16), rgba(201, 151, 68, .04)); }
.fl-cs .cs-spend-pts { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.fl-cs .cs-spend-pts b { font: 700 34px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; }
.fl-cs .cs-spend-pts > span { font: 600 16px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-spend-of { font: 500 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; }
.fl-cs .cs-spend-how { font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-spend .cs-spend-how { flex: 1 1 220px; }
.fl-cs .cs-step-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fl-cs .cs-step-row > span { font: 500 14px/1.2 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-step { display: inline-flex; border: 1px solid var(--cs-line); border-radius: 3px; overflow: hidden; background: var(--cs-well); }
.fl-cs .cs-step button { min-width: 50px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--cs-text2); font: 700 16px/1 'Cinzel RoE', Georgia, serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-step button + button { border-left: 1px solid var(--cs-line); }
.fl-cs .cs-step button[aria-pressed="true"] { background: linear-gradient(180deg, #5a4420, #33260f); color: var(--cs-gold-hi); box-shadow: inset 0 -2px 0 var(--cs-gold); }
.fl-cs .cs-step button[disabled] { opacity: .5; cursor: not-allowed; }
.fl-cs .cs-status { font: 500 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-laurel); }

/* Panels: a face with its two groups beside it. Offense holds Power and
   Precision, Defense and support holds Resilience and Support (answer 2). */
.fl-cs .cs-panel { display: grid; gap: 8px; }
.fl-cs .cs-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-bottom: 5px; border-bottom: 1px solid var(--cs-line); }
.fl-cs .cs-panel-h h3 { font: 700 18px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-gold-hi); }
.fl-cs .cs-panel-h span { font: 400 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-panel-body { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "face" "c1" "c2"; }
/* 520 to 600: the face above, its two groups side by side under it. From 600
   the face sits between them and gives way to the tiles (34 % of the board,
   180 to 232 px), so a tile is never too narrow for its name. */
@container board (width >= 520px) { .fl-cs .cs-panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "face face" "c1 c2"; align-items: start; } }
@container board (width >= 600px) { .fl-cs .cs-panel-body { grid-template-columns: minmax(0, 1fr) clamp(180px, 34cqi, 232px) minmax(0, 1fr); grid-template-areas: "c1 face c2"; } }
.fl-cs .cs-panel-c1 { grid-area: c1; min-width: 0; }
.fl-cs .cs-panel-c2 { grid-area: c2; min-width: 0; }
.fl-cs .cs-panel-face { grid-area: face; display: grid; justify-items: center; align-self: center; min-width: 0; }
.fl-cs .cs-panel-face .cs-face { width: 100%; max-width: 232px; }
.fl-cs .cs-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fl-cs .cs-colh h4 { font: 700 13px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-colh p { margin-top: 2px; font: 400 14px/1.25 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-tiles { display: grid; gap: 8px; }

/* Tile: medallion, name, trained value with plan and gear, plus on the right.
   While planned, minus takes the medallion's place on the left, so the plus
   never moves and the tile keeps its height. */
.fl-cs .cs-tile { container: tile / inline-size; position: relative; border: 1px solid #4e3f28; border-radius: 4px; background: linear-gradient(180deg, #261c11, #1b140d); transition: border-color .12s ease; }
.fl-cs .cs-tile.has-plan { border-color: rgba(255, 243, 208, .55); }
.fl-cs .cs-tile.is-hot { border-color: rgba(229, 194, 120, .75); }
/* The selected tile is unmistakable (owner, 10 Nov 2026: "jos on Dexterity
   valittuna, se Dexterity-ruutu voisi olla värjättynä"): a gold wash, a 2 px
   gold ring and a gold name. The ring is a shadow, not a border, so nothing moves. */
.fl-cs .cs-tile.is-sel { border-color: var(--cs-gold-hi); background: linear-gradient(180deg, rgba(229, 194, 120, .26), rgba(201, 151, 68, .1)), linear-gradient(180deg, #261c11, #1b140d); box-shadow: 0 0 0 2px var(--cs-gold-hi), 0 0 18px rgba(229, 194, 120, .3); }
.fl-cs .cs-tile.is-sel .cs-tile-name { color: var(--cs-gold-hi); }
/* The whole tile selects (attrSheet.js bindSelect), so the whole tile says so. */
.fl-cs .cs-tile { cursor: pointer; }
.fl-cs .cs-tile-det { cursor: auto; }
.fl-cs .cs-tile-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "code main plus" "price price price"; gap: 2px 8px; align-items: center; padding: 9px 10px 7px; }
.fl-cs .cs-code { grid-area: code; justify-self: center; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .04em; color: var(--cs-gold-hi);
  background: radial-gradient(circle, #1d150c 58%, transparent 60%), conic-gradient(var(--cs-gold) calc(var(--p, 0) * 1%), rgba(238, 226, 202, .12) 0); }
.fl-cs .cs-tile-minus { grid-area: code; align-self: center; }
.fl-cs .cs-tile-plus { grid-area: plus; align-self: center; }
/* Name and value are one button (at least 44 px tall) that selects the tile. */
.fl-cs .cs-tile-main { grid-area: main; display: grid; gap: 2px; align-content: center; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.fl-cs .cs-tile-name { min-width: 0; font: 600 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-tile-main:hover .cs-tile-name { text-decoration: underline; text-decoration-color: var(--cs-gold); text-underline-offset: 4px; }
.fl-cs .cs-tile-val { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cs .cs-num { font: 700 22px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-ivory); }
.fl-cs .cs-plan { font: 700 15px/1 'Inter RoE', sans-serif; color: var(--cs-gold-hi); }
.fl-cs .cs-plan::before { content: "\2192\00a0"; }
.fl-cs .cs-gear { font: 600 14px/1 'Inter RoE', sans-serif; color: var(--cs-laurel); }
.fl-cs .cs-tile-price { grid-area: price; margin-top: 4px; font: 500 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-tile-price b { color: var(--cs-ivory); font-weight: 600; }
.fl-cs .cs-tile-price.is-short b { color: var(--cs-crimson); }
.fl-cs .cs-tile-price.is-plan { color: var(--cs-gold-hi); font-weight: 600; }
.fl-cs .cs-ribbon { position: absolute; z-index: 1; top: -10px; right: 60px; display: flex; gap: 4px; }
.fl-cs .cs-tag { padding: 1px 7px; border: 1px solid rgba(229, 194, 120, .55); border-radius: 999px; background: #3a2b14; color: var(--cs-gold-hi); font: 600 12px/1.2 'Inter RoE', sans-serif; white-space: nowrap; }
.fl-cs .cs-tag.is-cap { background: #1b140d; border-color: rgba(238, 226, 202, .5); color: var(--cs-ivory); }
.fl-cs .cs-bar { display: flex; height: 4px; margin: 0 10px 8px; background: rgba(238, 226, 202, .1); overflow: hidden; }
.fl-cs .cs-bar i { display: block; height: 100%; }
.fl-cs .cs-bar .b-tr { background: #a97e34; }
.fl-cs .cs-bar .b-plan { background: repeating-linear-gradient(135deg, #fff3d0 0 3px, #c99744 3px 6px); }
.fl-cs .cs-bar .b-gear { background: var(--cs-laurel); }
.fl-cs .cs-tile.is-max .cs-bar .b-tr { background: linear-gradient(90deg, #b8862f, #f0d08a); }
.fl-cs .cs-tile-det { margin: 0 8px 8px; padding: 8px 10px 10px; border-top: 1px solid var(--cs-line-soft); background: var(--cs-well); }
/* Narrow tile: no medallion (the code is on the face); minus goes under plus,
   so the plus still keeps its place. */
@container tile (width < 210px) {
  .fl-cs .cs-tile-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main plus" "price price"; row-gap: 4px; }
  .fl-cs .cs-tile.has-plan .cs-tile-in { grid-template-areas: "main plus" "main minus" "price price"; }
  .fl-cs .cs-tile-in > .cs-code { display: none; }
  .fl-cs .cs-tile-plus { align-self: start; }
  .fl-cs .cs-tile-main { align-self: start; }
  .fl-cs .cs-tile-minus { grid-area: minus; }
}

/* Description band: the selected attribute, between the two panels. Every
   attribute's text is drawn in the same cell and only the selected one is
   visible, so the band is always as tall as the longest text and choosing
   another attribute moves nothing on the board (owner, V80 staging 24.10.2026:
   "tekstit liikkuvat ikävästi"). On a phone the same text opens under the
   tapped tile instead. */
.fl-cs .cs-board-in > .cs-band { flex: none; }
.fl-cs .cs-band-pane { grid-area: 1 / 1; align-self: start; display: grid; align-content: start; gap: 8px; min-width: 0; visibility: hidden; }
.fl-cs .cs-band-pane.is-on { visibility: visible; }
.fl-cs .cs-tile-det > * + * { margin-top: 8px; }
.fl-cs .cs-band { display: grid; min-height: 120px; padding: 12px 16px 12px 14px; border: 1px solid var(--cs-line-soft); border-left: 3px solid var(--cs-gold); border-radius: 3px; background: var(--cs-well); }
/* Head: the same code medallion as the tile, the name and its group, so the
   selected attribute reads at a glance (owner, 25.10.2026). The opened tile on a
   phone carries its own name, so it shows the text without the head. */
.fl-cs .cs-band-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl-cs .cs-band-code { flex: none; width: 40px; height: 40px; font-size: 13px; }
.fl-cs .cs-band-title { display: grid; gap: 2px; min-width: 0; }
.fl-cs .cs-band-name { margin: 0; font: 700 19px/1.15 'Cinzel RoE', Georgia, serif; letter-spacing: .05em; color: var(--cs-gold-hi); }
.fl-cs .cs-band-grp { margin: 0; font: 600 12px/1.3 'Inter RoE', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-tile-det .cs-band-head { display: none; }
.fl-cs .cs-band-desc { margin: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-ivory); }
/* The numbers in labelled columns: Now, Plan, Trained, Gear. */
.fl-cs .cs-band-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin: 0; padding: 8px 0; border-block: 1px solid var(--cs-line-soft); font-variant-numeric: tabular-nums; }
.fl-cs .cs-band-facts > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.fl-cs .cs-band-facts dt { font: 600 12px/1.3 'Inter RoE', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-band-facts dd { margin: 0; font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-band-facts dd b { font-weight: 600; color: var(--cs-ivory); }
.fl-cs .cs-band-facts dd small { display: block; font-size: 13px; color: var(--cs-muted); }
.fl-cs .cs-band-facts .is-now dd b { color: var(--cs-gold-hi); }
.fl-cs .cs-band-facts .is-plan dd, .fl-cs .cs-band-facts .is-plan dd b { color: var(--cs-gold-hi); }
.fl-cs .cs-band-facts .is-gear dd, .fl-cs .cs-band-facts .is-gear dd b, .fl-cs .cs-band-facts .is-gear dd small { color: var(--cs-laurel); }
.fl-cs .cs-band-more, .fl-cs .cs-band-cap { margin: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-band-fx { font-weight: 600; color: var(--cs-gold-hi); }
.fl-cs .cs-band-cap { color: var(--cs-gold); }
.fl-cs .cs-band-ladder-h { color: var(--cs-muted); }
.fl-cs .cs-ladder { display: flex; flex-wrap: wrap; gap: 4px 6px; font: 500 14px/1.35 'Inter RoE', sans-serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-ladder li { padding: 1px 6px; border: 1px solid var(--cs-line-soft); border-radius: 2px; color: var(--cs-ivory); }
@container board (width < 520px) { .fl-cs .cs-board-in > .cs-band { display: none; } }
/* Where the band shows, the tile does not open as well: one copy of the text,
   and the tiles below it stay where they are (deviation band-is-the-only-detail). */
@container board (width >= 520px) { .fl-cs .cs-tile-det { display: none; } }

/* Shield face, read only. The stage keeps a gutter for the codes; the plot is
   the square the drawing and the code positions share, so they cannot drift
   apart at any width. */
.fl-cs .cs-face { display: grid; gap: 2px; justify-items: center; align-content: start; min-width: 0; width: 100%; }
.fl-cs .cs-face-stage { width: 100%; padding: 19px 34px; }
.fl-cs .cs-face-plot { position: relative; width: 100%; aspect-ratio: 1; }
.fl-cs .cs-face-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-cs .cs-face-plot .ax-sel { stroke: var(--cs-gold-hi); stroke-width: 1.6; }
.fl-cs .cs-face-lbl { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .05em; color: var(--cs-text2); white-space: nowrap; }
.fl-cs .cs-face-lbl.a-t { transform: translate(-50%, calc(-100% - 5px)); }
.fl-cs .cs-face-lbl.a-b { transform: translate(-50%, 5px); }
.fl-cs .cs-face-lbl.a-r { transform: translate(5px, -50%); }
.fl-cs .cs-face-lbl.a-l { transform: translate(calc(-100% - 5px), -50%); }
.fl-cs .cs-face-lbl.is-hot { color: var(--cs-gold-hi); }
.fl-cs .cs-face-lbl.is-sel { padding: 2px 4px; border-radius: 2px; background: var(--cs-gold-hi); color: #1c1309; }
.fl-cs .cs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 400 12px/1.4 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fl-cs .cs-legend i { display: inline-block; width: 16px; height: 9px; border-radius: 2px; }
.fl-cs .cs-legend .l-tr { background: rgba(169, 126, 52, .55); border: 1px solid #b08a3c; }
.fl-cs .cs-legend .l-gear { height: 0; border-top: 2px solid var(--cs-gold-hi); border-radius: 0; }
.fl-cs .cs-legend .l-plan { height: 0; border-top: 2px dashed #fff3d0; border-radius: 0; }
.fl-cs .cs-legend .l-cap { border: 1.5px solid rgba(238, 226, 202, .45); }

/* Confirm bar: the one primary action of the board. It sticks to the bottom of
   the visible part of the card, above the phone's bottom navigation. */
.fl-cs .cs-confirm { position: sticky; bottom: var(--cs-bottom, 0px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid rgba(229, 194, 120, .5); border-radius: 0 0 4px 4px; background: #1a130b; box-shadow: 0 -10px 24px rgba(0, 0, 0, .45); }
.fl-cs .cs-confirm > .cs-alert { flex: 1 1 100%; }
.fl-cs .cs-confirm-txt { flex: 1 1 300px; min-width: 0; display: grid; gap: 2px; }
.fl-cs .cs-confirm-txt b { font: 700 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-confirm-txt span, .fl-cs .cs-plan-sum p { font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-confirm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Phone: the stuck bar keeps only the count, the price and the two buttons, so
   it never covers more than a quarter of a 320 by 568 screen. The list of
   changes and the full message sit in the plan summary just above the bar's
   resting place; the bar carries the message's first line. */
.fl-cs .cs-plan-sum, .fl-cs .cs-alert-short { display: none; }
@container cs (width < 560px) {
  .fl-cs .cs-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "alert alert" "txt clear" "go go"; gap: 8px 10px; padding: 10px 14px; }
  .fl-cs .cs-confirm > .cs-alert, .fl-cs .cs-confirm-txt > span { display: none; }
  .fl-cs .cs-alert-short { display: block; grid-area: alert; margin: 0; padding: 6px 10px; border-left: 3px solid var(--cs-crimson); background: rgba(120, 40, 30, .3); font: 600 14px/1.3 'Inter RoE', sans-serif; color: #f2b2a6; }
  .fl-cs .cs-alert-short.is-stale { border-left-color: var(--cs-gold-hi); background: rgba(120, 90, 30, .3); color: var(--cs-gold-hi); }
  .fl-cs .cs-confirm-txt { grid-area: txt; align-self: center; }
  .fl-cs .cs-head-sum { display: block; color: var(--cs-gold-hi); }
  .fl-cs .cs-dot { display: none; }
  .fl-cs .cs-confirm-acts { display: contents; }
  .fl-cs .cs-confirm [data-clear] { grid-area: clear; padding: 0 12px; }
  .fl-cs .cs-confirm [data-primary-action] { grid-area: go; width: 100%; }
  .fl-cs .cs-plan-sum { display: grid; gap: 8px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); }
  .fl-cs .cs-plan-sum .cs-sub { margin-bottom: -4px; }
}

/* ── Training grounds (decision 9) ─────────────────────────────────────── */
.fl-cs .cs-route { position: relative; display: grid; align-content: end; gap: 6px; min-height: 150px; padding: 18px 20px; border: 1px solid var(--cs-line); border-radius: 4px; overflow: hidden; background: #1a130b; }
.fl-cs .cs-route > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.fl-cs .cs-route::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 7, 5, .92) 0%, rgba(10, 7, 5, .72) 55%, rgba(10, 7, 5, .35) 100%); }
.fl-cs .cs-route > * { position: relative; z-index: 1; }
.fl-cs .cs-route h1 { margin: 0; font: 700 28px/1.1 'Cinzel RoE', Georgia, serif; letter-spacing: .05em; color: var(--cs-gold-hi); }
.fl-cs .cs-route p { margin: 0; max-width: 60ch; color: var(--cs-ivory); }
.fl-cs .cs-wallet { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; padding: 6px 12px; border: 1px solid var(--cs-line); border-radius: 999px; background: rgba(6, 5, 4, .7); font: 600 15px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-wallet img { width: 20px; height: 20px; }
.fl-cs .cs-wallet b { font-weight: 700; color: var(--cs-gold-hi); }
@container cs (width < 560px) { .fl-cs .cs-route { min-height: 120px; padding: 14px; } .fl-cs .cs-route h1 { font-size: 23px; } .fl-cs .cs-route::after { background: rgba(10, 7, 5, .78); } }
.fl-cs .cs-tg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container cs (width >= 900px) { .fl-cs .cs-tg { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); } }
.fl-cs .cs-tg > .cs-board { order: 1; }
.fl-cs .cs-receipt { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(168, 199, 124, .5); border-left: 3px solid var(--cs-laurel); border-radius: 3px; background: rgba(120, 150, 80, .1); }
.fl-cs .cs-receipt h3 { font: 700 17px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .04em; color: var(--cs-laurel); }
.fl-cs .cs-receipt-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* ═══ Layers above the page: respec review (Brand 6.5 to 6.7) ═════════════ */
.fl-cs.cs-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 3, .72); overflow: auto; }
.fl-cs .cs-dialog { width: 100%; max-width: 520px; display: grid; gap: 14px; padding: 20px 20px 18px; background: #16100a; border: 1px solid rgba(229, 194, 120, .55); border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
.fl-cs .cs-dialog h2 { font: 700 22px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .03em; color: var(--cs-gold-hi); }
.fl-cs .cs-dialog p { color: var(--cs-ivory); }
.fl-cs .cs-dl { display: grid; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); }
.fl-cs .cs-dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 9px 12px; }
.fl-cs .cs-dl > div + div { border-top: 1px solid var(--cs-line-soft); }
.fl-cs .cs-dl dt { font: 500 15px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-dl dd { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cs .cs-dl dd img { width: 20px; height: 20px; }
.fl-cs .cs-dl dd.cs-dl-note { flex: 1 1 100%; display: block; font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-muted); white-space: normal; }
.fl-cs .cs-dl dd.cs-dl-list { font-size: 15px; font-weight: 600; display: block; flex: 1 1 auto; min-width: 0; white-space: normal; text-align: right; }
.fl-cs .cs-dl dd .arr { color: var(--cs-muted); font-weight: 500; }
.fl-cs .cs-sub { font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-pay { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fl-cs .cs-pay legend { padding: 0; margin-bottom: 8px; }
.fl-cs .cs-pay label { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); cursor: pointer; }
.fl-cs .cs-pay label:has(input:checked) { border-color: var(--cs-gold-hi); background: rgba(201, 151, 68, .14); }
.fl-cs .cs-pay label.is-off { cursor: not-allowed; border-style: dashed; }
.fl-cs .cs-pay label.is-off .p-name, .fl-cs .cs-pay label.is-off .p-price { opacity: .6; }
.fl-cs .cs-pay input { width: 20px; height: 20px; margin: 0; accent-color: #e5c278; }
.fl-cs .cs-pay img { width: 22px; height: 22px; }
.fl-cs .cs-pay .p-name { font: 600 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-pay .p-have { display: block; font: 400 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.fl-cs .cs-pay .p-miss { display: block; font: 600 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-crimson); font-variant-numeric: tabular-nums; }
.fl-cs .cs-pay .p-price { font: 700 18px/1.2 'Inter RoE', sans-serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The two buttons stay in reach when the review is taller than a small phone.
   bottom = minus the layer's padding, so the stuck bar is flush with the screen
   edge and nothing of the scrolling body shows underneath it. */
.fl-cs .cs-dialog-acts { position: sticky; bottom: -16px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 -20px -18px; padding: 10px 20px 18px; background: #16100a; border-top: 1px solid var(--cs-line-soft); border-radius: 0 0 4px 4px; }
.fl-cs .cs-dialog-acts .cs-why { flex: 1 1 100%; font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); text-align: right; }
.fl-cs .cs-free { padding: 10px 12px; border: 1px solid rgba(168, 199, 124, .45); border-radius: 3px; background: rgba(120, 150, 80, .12); color: var(--cs-ivory); }
.fl-cs .cs-free b { color: var(--cs-laurel); }
@media (max-width: 480px) { .fl-cs .cs-dialog { padding: 16px 14px 14px; } .fl-cs .cs-dialog-acts { margin: 0 -14px -14px; padding: 10px 14px 14px; } .fl-cs .cs-dialog-acts .cs-btn { flex: 1 1 0; } .fl-cs .cs-dialog-acts .cs-btn-primary { flex: 1 1 100%; } .fl-cs .cs-dialog-acts .cs-why { text-align: left; } .fl-cs .cs-pay label { grid-template-columns: 22px 22px minmax(0, 1fr); } .fl-cs .cs-pay .p-price { grid-column: 3; } }

@media (prefers-reduced-motion: no-preference) {
  .fl-cs .cs-stepbtn, .fl-cs .cs-btn { transition: border-color .12s ease, background-color .12s ease; }
}
@media (prefers-reduced-motion: reduce) { .fl-cs .cs-tile { transition: none; } }

/* Cursus Honorum -palsta pysyy nykyisellään (sopimus 3.11): paikka referenssin
   .cs-cursus-sarakkeessa, sisältö pelin omat .cursus-säännöt. */
.fl-cs .cs-tg > .cs-cursus-slot { order: 2; min-width: 0; display: grid; gap: 8px; background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 4px; padding: 8px; }
@container cs (width < 900px) { .fl-cs .cs-tg > .cs-cursus-slot { order: 0; } }

/* ═══ Hahmolakana v3.0 (Castra + Tabula) ═════════════════════════════════════
   Lukittu referenssi Facelift/Character/REFERENCE.html v3.0 (SHA-256
   85613d84…a67edc, omistaja 6.11.2026) ja sopimus v3.0. Referenssin .cx on
   tässä .fl-cs.cs-root (säiliö cs) ja sen luokat cs-*-nimillä (sopimus 7).
   Asettelu tulee säiliökyselyistä, ei ikkunan leveydestä (sopimus 3.2):
   - cs ≥ 1300: kolme korttia rivissä (attribuutit | hahmo | reppu tai
     paneeli), ja oikean sarakkeen koko lasketaan tyhjänä (contain: size), joten
     reppu ja paneeli vierivät sarakkeen sisällä eivätkä kasvata riviä (3.12);
   - cs 700–1300: attribuutit ja hahmo rinnakkain, reppu alla koko leveydellä,
     ja paneeli valitun rivin alla;
   - alle 700: yksi sarake, hahmo ensin.
   Valitun attribuutin paneeli on piirretty kahteen paikkaan (rivin alle ja
   oikeaan sarakkeeseen); nämä säännöt näyttävät niistä yhden. */
.fl-cs { --cs-porphyry: #8a4f78; --cs-porphyry-hi: #c280ad; }
.fl-cs .cs-sheet { display: grid; gap: 16px; align-items: start; }
@container cs (width < 560px) { .fl-cs .cs-sheet { gap: 12px; } }
.fl-cs .cs-sheet .cs-card { padding: 0; background: linear-gradient(180deg, rgba(31, 23, 14, .96), rgba(15, 11, 8, .97)); box-shadow: inset 0 1px 0 rgba(229, 194, 120, .06); }
.fl-cs .cs-side { display: flex; flex-direction: column; min-width: 0; }
.fl-cs .cs-side > .cs-card { flex: 1 1 auto; min-height: 0; }
.fl-cs .cs-panelcard { display: none; flex-direction: column; }
@container cs (width >= 1300px) {
  .fl-cs .cs-sheet { grid-template-columns: minmax(0, 1.25fr) clamp(420px, 33%, 500px) minmax(0, 1fr); align-items: stretch; }
  .fl-cs .cs-left { grid-column: 1; grid-row: 1; }
  .fl-cs .cs-hero { grid-column: 2; grid-row: 1; }
  .fl-cs .cs-side { grid-column: 3; grid-row: 1; contain: size; overflow: hidden; }
  .fl-cs .cs-battles { grid-column: 1 / -1; }
  .fl-cs .cs-sheet.has-sel .cs-side > .cs-bag { display: none; }
  .fl-cs .cs-sheet.has-sel .cs-side > .cs-panelcard { display: flex; }
  .fl-cs .cs-inline { display: none; }
  .fl-cs .cs-side .cs-grid { --cell: 52px; flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5d4a2c transparent; }
  .fl-cs .cs-panelcard { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5d4a2c transparent; }
  /* Ryhmät kaksi kertaa kaksi ja All detailsin sarakkeet kahtena vain kolmen
     kortin asettelussa ja kun vasen kortti on vähintään 440 px (3.2, 3.6). */
  @container csleft (width >= 440px) {
    .fl-cs .cs-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fl-cs .cs-det-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
/* Ei sticky: hahmokortti jäisi vieritettäessä repun päälle (sama ruudukko). */
@container cs (700px <= width < 1300px) {
  .fl-cs .cs-sheet { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); }
  .fl-cs .cs-left { grid-column: 1; grid-row: 1; }
  .fl-cs .cs-hero { grid-column: 2; grid-row: 1; }
  .fl-cs .cs-side, .fl-cs .cs-battles { grid-column: 1 / -1; }
}

/* ── Hahmokortti: pelin oma Aedicula isommalla muotokuvalla (3.9) ────────── */
.fl-cs .cs-hero { container: cshero / inline-size; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cs-line); border-radius: 4px; background: linear-gradient(180deg, #2b2114, #100c09 46%); }
.fl-cs .cs-hero .aed-figure { flex: 1 1 auto; background: none; }
.fl-cs .cs-hero .aed-ped { padding: 16px 16px 0; }
/* Arvonimi ja Patron-merkki kuten referenssissä: porfyyrinen pilleri, 12 px. */
.fl-cs .cs-hero .aed-patron-badge { padding: 3px 8px; border: 1px solid var(--cs-porphyry); border-radius: 999px; background: rgba(138, 79, 120, .22); font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .06em; color: var(--cs-porphyry-hi); }
.fl-cs .cs-hero .aed-frieze { gap: 16px; margin-top: 10px; padding-top: 0; align-items: center; }
.fl-cs .cs-hero .aed-ach { position: relative; width: 44px; min-height: 44px; gap: 0; }
.fl-cs .cs-hero .aed-clipeus { width: 44px; height: 44px; }
.fl-cs .cs-hero .aed-ach-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Muotokuva keskellä, varusteet viitenä kumpaankin reunaan; muotokuva kiinni
   kortin yläosassa, joten rivin korkeus ei siirrä sitä (3.9, 3.12). Aediculan
   omat ikkunaporrastukset (styles.css: alle 640 ja 1200–1519 px) kumotaan. */
.fl-cs .cs-hero .aed-body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; gap: 12px; padding: 14px 16px 4px; align-items: start; }
.fl-cs .cs-hero .aed-body > * { grid-area: auto; justify-self: center; }
.fl-cs .cs-hero .aed-pillar { display: none; }
.fl-cs .cs-hero .aed-col { display: grid; gap: 8px; }
.fl-cs .cs-hero .aed-center { width: 100%; }
.fl-cs .cs-hero .aed-niche { width: 100%; }
/* Varusteruudut: vanhan nuken nimetyt grid-alueet (doll-slot-*) eivät koske tätä saraketta. */
.fl-cs .cs-hero .doll-socket { --s: 58px; grid-area: auto; width: var(--s); height: var(--s); padding: 0; justify-content: center; gap: 0; border-radius: 4px; }
@container cshero (width >= 440px) { .fl-cs .cs-hero .doll-socket { --s: 64px; } }
.fl-cs .cs-hero .doll-socket-art { width: 80%; height: 80%; border-radius: 3px; background: none; }
.fl-cs .cs-hero .doll-socket.filled .doll-socket-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fl-cs .cs-hero .doll-socket.empty .doll-socket-art { display: none; }
.fl-cs .cs-hero .doll-socket.empty .doll-socket-lbl { padding: 0 2px; font: 600 12px/1.15 'Inter RoE', sans-serif; letter-spacing: 0; text-transform: none; text-align: center; color: var(--cs-muted); }
.fl-cs .cs-hero .doll-socket-qty { right: 3px; bottom: 2px; font: 700 12px/1 'Inter RoE', sans-serif; }
.fl-cs .cs-hero .doll-socket-ench { top: 3px; right: 4px; }
/* Kapea hahmokortti (1280 ja 1366 px:n ikkunat, puhelin): muotokuva koko
   leveydelle ja varusteet kahdeksi viiden ruudun riviksi sen alle. */
@container cshero (width < 420px) {
  .fl-cs .cs-hero .aed-body { grid-template-columns: minmax(0, 1fr); }
  .fl-cs .cs-hero .aed-center { order: -1; }
  .fl-cs .cs-hero .aed-niche { width: min(100%, 300px); margin-inline: auto; }
  .fl-cs .cs-hero .aed-col { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .fl-cs .cs-hero .doll-socket { --s: 100%; height: auto; aspect-ratio: 1; min-width: 44px; }
}
/* Jalusta: kuusi lukua, suunnitelma nuolen jälkeen; tyhjä rivi varattuna kun pisteitä on. */
.fl-cs .cs-hero .aed-plinth { margin: 12px 16px 0; }
.fl-cs .cs-hero .aed-plinth.is-six .aed-plinth-cell:nth-child(3n + 1) { border-left: 0; box-shadow: none; }
.fl-cs .cs-hero .aed-plinth.is-six .aed-plinth-cell:nth-child(n + 4) { border-top: 1px solid rgba(0, 0, 0, .45); }
.fl-cs .cs-hero .aed-plinth-to { display: block; font: 700 14px/1.2 'Inter RoE', sans-serif; color: var(--cs-gold-hi); white-space: nowrap; }
.fl-cs .cs-hero .aed-plinth-to.is-ghost { visibility: hidden; }

/* ── Vasen kortti: Attributes | All details (3.3–3.6) ───────────────────── */
.fl-cs .cs-left { container: csleft / inline-size; display: flex; flex-direction: column; }
.fl-cs .cs-ltabs { display: flex; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-ltabs button { flex: 1 1 0; display: grid; place-items: center; min-height: 50px; padding: 0 8px; border: 0; background: none; font: 700 14px/1 'Cinzel RoE', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-text2); }
.fl-cs .cs-ltabs button + button { border-left: 1px solid var(--cs-line-soft); }
.fl-cs .cs-ltabs button[aria-selected="true"] { color: var(--cs-gold-hi); background: rgba(201, 151, 68, .1); box-shadow: inset 0 -2px 0 var(--cs-gold); }
/* Molemmat paneelit samassa ruudussa: piilotettu varaa tilansa, joten kortti ei muuta kokoaan. */
.fl-cs .cs-panes { display: grid; flex: 1 0 auto; }
.fl-cs .cs-pane { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
.fl-cs .cs-pane[data-off] { visibility: hidden; }
.fl-cs .cs-left-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; min-height: 48px; padding: 2px 16px; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-left-h .cs-sum { font: 400 13px/1.3 'Inter RoE', sans-serif; }
.fl-cs .cs-left-respec { display: inline-flex; align-items: center; gap: 8px; }
.fl-cs .cs-left-free { font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--cs-gold-hi); font: 600 14px/1 'Inter RoE', sans-serif; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.fl-cs .cs-pane > .cs-reset-line, .fl-cs .cs-pane > .cs-nothing { margin: 10px 16px 0; }
.fl-cs .cs-top { display: grid; gap: 10px; padding: 12px 16px 14px; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-pts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; border: 1px solid var(--cs-gold-dim); border-radius: 4px; background: rgba(201, 151, 68, .08); }
.fl-cs .cs-pts-n { font: 700 30px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; }
.fl-cs .cs-pts-l { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; font: 600 15px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-pts-l > span:not(.sr) { font: 400 13px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-pts-l > .cs-status { color: var(--cs-laurel); }
.fl-cs .cs-pts.is-none { border-color: var(--cs-line-soft); background: rgba(255, 255, 255, .02); }
.fl-cs .cs-pts.is-none .cs-pts-l { font-weight: 500; color: var(--cs-text2); }
.fl-cs .cs-left .cs-legend { justify-content: flex-start; gap: 4px 16px; }
.fl-cs .cs-left .cs-legend i { width: 16px; height: 8px; border: 0; border-radius: 2px; }
.fl-cs .cs-left .cs-legend .l-t { background: #c0913f; }
.fl-cs .cs-left .cs-legend .l-p { background: repeating-linear-gradient(135deg, #f0d08a 0 3px, #b58a40 3px 6px); }
.fl-cs .cs-left .cs-legend .l-mk { width: 2px; height: 14px; background: var(--cs-ivory); }
.fl-cs .cs-left .cs-legend .l-lk { background: repeating-linear-gradient(135deg, rgba(238, 226, 202, .3) 0 2px, rgba(255, 255, 255, .06) 2px 6px); }
.fl-cs .cs-groups { flex: 1 0 auto; display: grid; gap: 4px 12px; align-content: start; padding: 8px 10px 10px; }
.fl-cs .cs-grp { display: grid; gap: 2px; align-content: start; min-width: 0; padding-top: 6px; }
.fl-cs .cs-grp-h { display: grid; gap: 2px; padding: 2px 8px 4px; }
.fl-cs .cs-grp-h h3 { font: 700 13px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-grp-h span { font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-rows { display: grid; gap: 2px; }
.fl-cs .cs-plan-alert { margin: 0 16px 12px; }

/* Rivi (3.5): nimi, arvo / katto, vaikutus ja rajapalkki; + tai › oikealla. */
.fl-cs .cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 4px 10px; width: 100%; min-height: 56px; padding: 8px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--cs-ivory); text-align: left; }
.fl-cs .cs-row:hover { background: rgba(201, 151, 68, .06); }
.fl-cs .cs-row[aria-pressed="true"] { border-color: var(--cs-gold); background: rgba(201, 151, 68, .12); }
.fl-cs .cs-row-main { display: grid; gap: 5px; min-width: 0; }
.fl-cs .cs-row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.fl-cs .cs-row-nm { font: 600 15px/1.2 'Inter RoE', sans-serif; }
.fl-cs .cs-row-vv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.fl-cs .cs-row-val { font: 700 19px/1 'Cinzel RoE', Georgia, serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cs .cs-row-val small { margin-left: 2px; font: 500 13px/1 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-to { color: var(--cs-gold-hi); font-style: normal; }
.fl-cs .cs-row-gear { font: 600 13px/1 'Inter RoE', sans-serif; color: var(--cs-laurel); white-space: nowrap; }
.fl-cs .cs-row-tag { display: inline-block; padding: 3px 7px; border: 1px solid var(--cs-gold-dim); border-radius: 999px; font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .04em; color: var(--cs-gold-hi); white-space: nowrap; }
.fl-cs .cs-row-tag.is-max { border-color: var(--cs-gold); background: rgba(201, 151, 68, .16); }
.fl-cs .cs-fx { display: block; font: 400 13px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-fx b { color: var(--cs-ivory); font-weight: 600; }
.fl-cs .cs-fx .cs-to { font-weight: 700; }
.fl-cs .cs-fx.is-off { color: var(--cs-muted); font-style: italic; }
.fl-cs .cs-row-go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 17px/1 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-row-go.is-add { border: 1px solid var(--cs-gold-dim); color: var(--cs-gold-hi); background: rgba(201, 151, 68, .1); }
.fl-cs .cs-row[aria-pressed="true"] .cs-row-go { border: 1px solid var(--cs-gold); background: var(--cs-gold); color: #1a1209; }
/* Rajapalkki: sama asteikko jokaisella, 0 → Max Stats. */
.fl-cs .cs-cap { position: relative; display: block; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.fl-cs .cs-cap i { position: absolute; top: 0; bottom: 0; }
.fl-cs .cs-cap i.cs-cap-lk { right: 0; background: repeating-linear-gradient(135deg, rgba(238, 226, 202, .13) 0 2px, transparent 2px 6px); }
.fl-cs .cs-cap i.cs-cap-t { left: 0; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #8c6a32, #d2a24f); }
.fl-cs .cs-cap i.cs-cap-p { background: repeating-linear-gradient(135deg, #f0d08a 0 3px, #b58a40 3px 6px); }
.fl-cs .cs-cap i.cs-cap-mk { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--cs-ivory); }

/* ── Attribuutin paneeli (3.7): rivin alla tai oikeassa sarakkeessa ─────── */
.fl-cs .cs-inline { margin: 4px 0 8px; border: 1px solid var(--cs-gold-dim); border-radius: 4px; background: rgba(15, 11, 8, .98); }
.fl-cs .cs-panel-sec { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-top: 1px solid var(--cs-line-soft); }
.fl-cs .cs-panel-sec:first-child { border-top: 0; }
.fl-cs .cs-panelcard > .cs-panel-sec:last-child { flex: 1 0 auto; }
.fl-cs .cs-panel-head { display: flex; align-items: center; gap: 12px; }
.fl-cs .cs-panel-code { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--cs-gold-dim); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #33261a, #160f0a); font: 700 14px/1 'Inter RoE', sans-serif; letter-spacing: .04em; color: var(--cs-gold-hi); }
.fl-cs .cs-panel-name { font: 700 21px/1.15 'Cinzel RoE', Georgia, serif; color: var(--cs-gold-hi); }
.fl-cs .cs-panel-grp { display: block; font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-panel-x { margin-left: auto; padding: 0 14px; }
.fl-cs .cs-panel-desc { font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-panel-lab { font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-panel-kv { display: grid; gap: 4px; }
.fl-cs .cs-panel-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font: 400 14px/1.4 'Inter RoE', sans-serif; }
.fl-cs .cs-panel-kv dt { color: var(--cs-text2); }
.fl-cs .cs-panel-kv dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fl-cs .cs-panel-add { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-cs .cs-panel-add button { display: grid; align-content: start; justify-items: center; gap: 5px; min-height: 104px; padding: 10px 6px; border: 1px solid var(--cs-gold-dim); border-radius: 4px; background: linear-gradient(180deg, #31251a, #1b140d); color: var(--cs-ivory); text-align: center; }
.fl-cs .cs-panel-add button:hover:not([disabled]) { border-color: var(--cs-gold-hi); }
.fl-cs .cs-panel-add button[disabled] { opacity: .5; border-style: dashed; cursor: not-allowed; }
.fl-cs .cs-add-amt { font: 700 24px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-gold-hi); }
.fl-cs .cs-add-res { font: 700 15px/1.2 'Inter RoE', sans-serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-add-eff { font: 500 12px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-add-eff b { display: block; font-size: 13px; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-add-why { font: 500 12px/1.3 'Inter RoE', sans-serif; color: var(--cs-crimson); }
.fl-cs .cs-panel-back { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-panel-back b { color: var(--cs-gold-hi); }
.fl-cs .cs-sp { flex: 1; }
.fl-cs .cs-panel-capline { font: 400 13px/1.45 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-panel-capline b { color: var(--cs-ivory); }

/* ── All details (3.6): Combat-välilehden luvut kerralla ────────────────── */
.fl-cs .cs-det { display: grid; gap: 14px; align-content: start; padding: 14px 16px; color: var(--cs-ivory); }
.fl-cs .cs-det-sub { font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-cs .cs-plaques > div { display: grid; gap: 3px; min-width: 0; padding: 8px 4px; border: 1px solid var(--cs-line); border-radius: 3px; background: rgba(0, 0, 0, .2); text-align: center; }
.fl-cs .cs-plaques dt { font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-plaques dd { font: 700 16px/1.2 'Cinzel RoE', Georgia, serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-cs .cs-plaques .is-dps dd { color: var(--cs-gold-hi); }
.fl-cs .cs-plaques .cs-to { display: block; font: 700 13px/1.2 'Inter RoE', sans-serif; }
.fl-cs .cs-det-cols { display: grid; gap: 16px 22px; }
.fl-cs .cs-det-sec { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fl-cs .cs-det-sec h3 { font: 700 13px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-det-list { display: grid; gap: 4px; }
.fl-cs .cs-det-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); gap: 2px 12px; font: 400 14px/1.4 'Inter RoE', sans-serif; }
.fl-cs .cs-det-row dt { min-width: 0; color: var(--cs-text2); }
.fl-cs .cs-det-row[data-hint] dt { text-decoration: underline dotted rgba(203, 189, 159, .45); text-underline-offset: 3px; cursor: help; }
.fl-cs .cs-det-row dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fl-cs .cs-det .at-cap, .fl-cs .cs-det .at-floor { display: inline-block; padding: 2px 6px; border: 1px solid var(--cs-gold-dim); border-radius: 999px; font: 700 12px/1 'Inter RoE', sans-serif; color: var(--cs-gold-hi); white-space: nowrap; }
.fl-cs .cs-det .cb-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }

/* ── Reppu (3.10): ruudukko, kuluvat esineet ovat nukessa ───────────────── */
.fl-cs .cs-bag { container: csbag / inline-size; display: flex; flex-direction: column; min-width: 0; }
.fl-cs .cs-bag-h, .fl-cs .cs-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-bag-h .cs-h, .fl-cs .cs-card-h .cs-h { font: 700 16px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-gold-hi); }
.fl-cs .cs-bag-tabs { display: inline-flex; border: 1px solid var(--cs-line); border-radius: 3px; overflow: hidden; }
.fl-cs .cs-bag-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; font: 600 12px/1 'Cinzel RoE', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-text2); text-decoration: none; white-space: nowrap; }
.fl-cs .cs-bag-tab + .cs-bag-tab { border-left: 1px solid var(--cs-line); }
.fl-cs .cs-bag-tab[aria-current="page"] { color: var(--cs-gold-hi); background: rgba(201, 151, 68, .14); box-shadow: inset 0 -2px 0 var(--cs-gold); }
.fl-cs .cs-bag-tab b { margin-left: 6px; font: 600 12px/1 'Inter RoE', sans-serif; letter-spacing: 0; color: var(--cs-muted); }
@container csbag (width < 380px) {
  .fl-cs .cs-bag-tabs { display: flex; width: 100%; }
  .fl-cs .cs-bag-tab { flex: 1 1 auto; padding: 0 6px; letter-spacing: .06em; }
  .fl-cs .cs-bag-tab b { display: none; }
}
.fl-cs .cs-bag-cap { display: grid; gap: 4px; font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-bag-cap > i { display: flex; width: 160px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fl-cs .cs-bag-cap > i > i { height: 100%; }
.fl-cs .cs-bag .is-sealed { background-color: #a83a2c; }
.fl-cs .cs-bag .is-car { background-color: var(--cs-gold); }
.fl-cs .cs-bag .is-worn { background-color: #7a5a2c; }
.fl-cs .cs-bag .is-listed { background-color: #5d5444; }
.fl-cs .cs-bag .is-free { background-color: rgba(255, 255, 255, .12); }
.fl-cs .cs-bag-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px 0; font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-bag-sw { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fl-cs .cs-bag-sw i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.fl-cs .cs-bag-acts .cs-btn { padding: 0 12px; }
.fl-cs .cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell, 58px), 1fr)); gap: 6px; align-content: start; padding: 14px 16px; }
.fl-cs .cs-gh { grid-column: 1 / -1; padding-top: 8px; font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-gh:first-child { padding-top: 0; }
.fl-cs .cs-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 44px; padding: 0; border: 1px solid #3c2f1f; border-radius: 4px; background: radial-gradient(circle at 50% 35%, #2d2117, #130e09); color: var(--cs-ivory); }
.fl-cs button.cs-cell:hover { filter: brightness(1.15); }
.fl-cs .cs-cell > img, .fl-cs .cs-cell > .bag-art { width: 78%; height: 78%; object-fit: contain; }
.fl-cs .cs-cell > .cs-cell-glyph, .fl-cs .cs-cell > .bag-glyph { display: grid; place-items: center; width: 66%; height: 66%; }
.fl-cs .cs-cell > .cs-cell-glyph img, .fl-cs .cs-cell > .bag-glyph svg { width: 100%; height: 100%; }
.fl-cs .cs-cell.rarity-common { border-color: #5d5444; }
.fl-cs .cs-cell.rarity-uncommon { border-color: var(--rarity-uncommon, #4a9a52); }
.fl-cs .cs-cell.rarity-rare { border-color: var(--rarity-rare, #6f93d8); }
.fl-cs .cs-cell.rarity-epic { border-color: var(--rarity-epic, #a678d6); }
.fl-cs .cs-cell.rarity-legendary { border-color: var(--rarity-legendary, #e39a45); }
.fl-cs .cs-cell.rarity-mythic { border-color: var(--rarity-mythic, #d64b57); }
.fl-cs .cs-cell.rarity-unique { border-color: var(--rarity-unique, #3ec9a7); }
.fl-cs .cs-cell.is-empty { border-style: dashed; border-color: #2c2318; background: rgba(0, 0, 0, .22); }
.fl-cs .cs-cell.is-listed > img, .fl-cs .cs-cell.is-none > img, .fl-cs .cs-cell.is-none > .bag-glyph { opacity: .45; }
.fl-cs .cs-cell.is-armed { box-shadow: 0 0 0 1px var(--cs-gold-hi), 0 0 10px rgba(229, 194, 120, .35); }
.fl-cs .cs-cell.is-focus { outline: 2px solid var(--cs-gold-hi); outline-offset: 2px; }
.fl-cs .cs-cell-q, .fl-cs .cs-cell-en, .fl-cs .cs-cell-ls { position: absolute; font: 700 12px/1 'Inter RoE', sans-serif; color: var(--cs-ivory); text-shadow: 0 1px 2px #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
.fl-cs .cs-cell-q { right: 4px; bottom: 3px; }
.fl-cs .cs-cell-en { left: 4px; top: 3px; color: var(--cs-gold-hi); }
.fl-cs .cs-cell-ls { left: 0; right: 0; bottom: 3px; text-align: center; }
.fl-cs .cs-cell-seal { position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8584a, #7a1d14); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fl-cs .cs-bag-empty { padding: 0 16px 14px; font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }

/* ── Recent battles (3.11) ──────────────────────────────────────────────── */
.fl-cs .cs-rb { display: grid; padding: 4px 16px 10px; }
@container cs (width >= 900px) { .fl-cs .cs-rb { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; } }
.fl-cs .cs-rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 52px; padding: 8px 0; border-top: 1px solid rgba(201, 151, 68, .1); color: inherit; text-decoration: none; }
.fl-cs .cs-rb-row:hover .cs-rb-foe { text-decoration: underline; text-underline-offset: 3px; }
.fl-cs .cs-rb-glyph { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--cs-text2); }
.fl-cs .cs-rb-glyph svg { width: 18px; height: 18px; }
.fl-cs .cs-rb-pill { padding: 3px 8px; border: 1px solid; border-radius: 999px; font: 700 12px/1 'Inter RoE', sans-serif; }
.fl-cs .cs-rb-pill.is-win { color: var(--cs-laurel); }
.fl-cs .cs-rb-pill.is-loss { color: var(--cs-crimson); }
.fl-cs .cs-rb-foe { font: 600 14px/1.3 'Inter RoE', sans-serif; }
.fl-cs .cs-rb-gain, .fl-cs .cs-rb-ago { font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-rb-ago { margin-left: auto; }
.fl-cs .cs-rb-empty { padding: 12px 16px 16px; font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }