/* ==========================================================================
   The new-fighter card, organised like WoW character creation      owner: the UI pass; redesign part B
   docs/redesign-ia.md §3 and docs/character-select.md (the spotlight the owner likes). Three areas:
     .cs-rail    left: Menu, then the fighter types as big portraits with their names (locked: shown in full, with
                 a price; they open the Armory)
     .rb-stage   centre: where camera.js stands the fighter ([data-cam-frame]), the name big under their feet
     .cs-panel   right: titled sections (Fighter, Weapon, Gods this life, Omen), each a compact summary with the
                 details in tooltips, then Fight!, which never scrolls away (only .cs-scroll scrolls)
   Desktop and landscape: one centred column (the panel and the fighter stay together on ultrawide screens; the 1.3
   scale on tall wide screens, nav.css --big, zooms the column). Phones and portrait screens: the fighter on top, the
   fighters as a strip, the sections in a bottom sheet with Fight! pinned. Loads after nav.css and gods.css: the
   markup's own classes (cs-*), so the older card rules (lives.css .reveal, nav.css .ft, gods.css .god-dot) never
   reach it; the weapon tiles keep progression.css's .wt and are reshaped here.
   ========================================================================== */
#scr-rebirth{
  --rail:200px;--panel:424px;--gapx:26px;
  background:linear-gradient(90deg,rgba(42,26,46,.16) 0%,rgba(42,26,46,0) 22%,rgba(42,26,46,0) 70%,rgba(42,26,46,.16) 100%);
  display:block;overflow:hidden;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));
}
#scr-rebirth>.screen-inner.cs{
  margin:0 auto;width:100%;max-width:1500px;box-sizing:border-box;
  height:calc((100dvh - 32px) / var(--big,1));
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--panel);column-gap:var(--gapx);align-items:center;
}

/* ---------- the left rail: Menu, then the fighters ---------- */
.cs-rail{align-self:stretch;display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}
#scr-rebirth .cs-rail .nav-top{position:relative;inset:auto;align-self:flex-start;flex:none;margin:0}
.cs-rail-card{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:grid;align-content:start;gap:10px;
  padding:14px 12px 12px;border:var(--line) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:var(--lip),var(--drop);
}
.cs-rail-card::-webkit-scrollbar{display:none}
/* two a row on a four-column grid: with five fighters (the roster cut, 2026-10-21; three before the first death) the odd
   last one sits centred under the pair above it */
.cs-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.cs-types>.cs-ft{grid-column:span 2}
.cs-types>.cs-ft:last-child:nth-child(odd){grid-column:2 / span 2}
.cs-ft{
  all:unset;box-sizing:border-box;position:relative;display:grid;justify-items:center;align-content:start;gap:5px;min-width:0;cursor:pointer;
  /* one column as wide as the tile: the portrait is the tile's width whatever the name (owner, 2026-10-25: "why are the
     avatars different sizes ... heavy swordsman shoiuldnt have a bigger avatar"; the name's longest word set the column) */
  grid-template-columns:minmax(0,1fr);
  -webkit-tap-highlight-color:transparent;
}
.cs-pic{
  position:relative;display:block;width:100%;aspect-ratio:1;box-sizing:border-box;overflow:hidden;border-radius:13px;
  border:var(--line-s) solid var(--ink);background:#e9cf9f;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--ink);
  transition:transform .14s var(--out),box-shadow .14s var(--out);
}
/* zoomed in on the helmet and crest: that is what tells the types apart at a glance */
.cs-pic img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.4);transform-origin:50% 24%;pointer-events:none}
.cs-fname{
  max-width:100%;font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink);text-align:center;text-wrap:balance;
  padding:2px 5px 3px;border-radius:999px;
}
@media (hover:hover) and (pointer:fine){ .cs-ft:hover .cs-pic{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 6px 0 var(--ink)} }
.cs-ft:active .cs-pic{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
/* the pick: the same paper gap and gold ring as the weapon tiles; the name on an ink pill */
.cs-ft.on .cs-pic{transform:translateY(-2px);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--gold-lo),0 7px 0 var(--ink)}
.cs-ft.on .cs-fname{background:var(--ink);color:#fff}
.cs-ft:focus-visible .cs-pic,html.kbd-nav .cs-ft:focus .cs-pic{outline:var(--focus-ring);outline-offset:var(--focus-off)}
/* locked: the fighter in full with its price (or a lock: a milestone first); owner, "why are characters still hidden" */
.cs-ft.locked .cs-pic{background:#d9c39a}
.cs-ft.locked .cs-fname{color:var(--ink-3)}
.cs-pic .wt-price{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:2px;padding:1px 6px 2px 2px;
  border:2px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 2px 0 var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);white-space:nowrap;
}
.cs-pic .wt-price .ic{width:15px;height:15px}
.cs-pic .wt-price.gate{padding:2px 4px}
/* mastery: the level and a bar along the bottom of the portrait; talent points: a gold dot */
/* mastery: a slim gold bar along the portrait's bottom edge, the level in a small disc at its left end */
.cs-m{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(42,26,46,.55)}
.cs-m i{display:block;height:100%;width:calc(100% * var(--m));background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.cs-m.max i{width:100%}
.cs-m b{position:absolute;left:3px;bottom:3px;min-width:19px;height:19px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:var(--g-gold);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink)}
/* talent points waiting: a gold dot in the corner, no number (one number per tile: the level) */
.cs-pts{position:absolute;top:5px;left:5px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;border:2px solid var(--ink);background:var(--g-gold);box-shadow:0 0 0 2px var(--paper)}
/* the rail's foot: a locked fighter's Unlock, centred (owner, 2026-10-25: "these footers should prob be centrered");
   empty and hidden otherwise (fate's line was here until fate's pick was removed) */
.cs-foot{margin:0;display:flex;justify-content:center;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3)}
.cs-foot[hidden]{display:none}
.cs-foot .rbw-unlock{justify-content:center}

/* ---------- the stage: where the fighter stands, and their name under their feet ---------- */
#scr-rebirth .rb-stage{
  position:relative;inset:auto;align-self:stretch;min-width:0;display:flex;flex-direction:column;align-items:center;
  padding:2vh 0 3vh;pointer-events:none;
}
.rb-frame{flex:1;align-self:stretch;min-height:0}
.rb-hero{display:grid;justify-items:center;gap:10px;max-width:100%;text-align:center}
#scr-rebirth .rb-name{
  margin:0;max-width:100%;font:400 clamp(52px,5vw,86px)/.9 var(--f-display);letter-spacing:.01em;text-wrap:balance;overflow-wrap:anywhere;
  color:#fff;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);
  animation:rb-name-in .5s var(--pop) .12s backwards;
}
/* the name lands like a stamp each time the card comes up */
@keyframes rb-name-in{from{transform:translateY(-14px) scale(1.25) rotate(-3deg);opacity:0}45%{opacity:1}}
.rb-sub{
  margin:0;display:inline-flex;align-items:baseline;gap:8px;max-width:100%;padding:6px 16px 8px;
  border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--g-paper);box-shadow:var(--lip),var(--drop-s);
  font:var(--w-strong) var(--t-lead)/1.2 var(--f-ui);color:var(--ink-2);white-space:nowrap;
}
.rb-type{font:400 var(--t-btn)/1 var(--f-display);color:var(--ink)}
.rb-type.preview,#scr-rebirth .cs-v.preview{color:var(--player)}

/* ---------- the right panel: titled sections, then Fight! ---------- */
.cs-panel{
  position:relative;align-self:center;max-height:100%;min-height:0;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;
  padding:26px 14px 14px;border:var(--line) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:var(--lip),var(--drop);
}
#scr-rebirth .cs-panel>.ribbon{position:absolute;top:-19px;left:50%;transform:translateX(-50%);margin:0;z-index:2}
.cs-scroll{
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;
  margin:-10px -8px -10px 0;padding:10px 8px 12px 0;   /* the scrollbar's room on the right, the fade's above and below (kit.css) */
}
/* a section: a sunken paper tablet with its title on top */
.cs-sec{
  display:grid;gap:8px;padding:10px 12px 12px;border-radius:14px;min-width:0;
  background:rgba(255,253,246,.72);border:2.5px solid rgba(42,26,46,.16);box-shadow:inset 0 2px 0 rgba(255,255,255,.8);
}
.cs-sec[hidden]{display:none}
.cs-h{display:flex;align-items:center;gap:9px;min-width:0;min-height:22px}
/* the title: white Lilita with an ink stroke, like the ribbons */
.cs-k{
  flex:none;font:400 var(--t-name-s)/1 var(--f-display);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;
}
.cs-v{display:inline-flex;align-items:center;gap:5px;min-width:0;font:400 var(--t-name)/1.05 var(--f-display);color:var(--ink);white-space:nowrap}
.cs-v .ic{width:18px;height:18px;flex:none}
.cs-note{margin-left:auto;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3);text-align:right}

/* 1. Fighter: the signature move and the origin trait as two summary rows (their tooltips hold the rest) */
.cs-row{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;column-gap:9px;min-width:0;cursor:default;
  padding:2px 4px 2px 0;border-radius:10px;
}
.cs-row[hidden]{display:none}
.cs-ic{
  width:30px;height:30px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2.5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--sc,#e9c88c) 40%,#fff) 0 30%,var(--sc,#e9c88c) 80%);box-shadow:0 2px 0 var(--ink);
}
.cs-ic .ic{width:19px;height:19px}
.cs-tx{font:var(--w-body) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.cs-tx b{font-weight:var(--w-strong);color:var(--ink)}
.cs-tag{align-self:start;margin-top:3px;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media (hover:hover) and (pointer:fine){ .cs-row:hover{background:rgba(234,194,84,.18)} }
.cs-row:focus-visible,html.kbd-nav .cs-row:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
/* the stats: four lines of five pips against the roster (health, armor, speed) or every weapon (damage) */
.cs-stats{margin:0;display:grid;gap:4px;padding:6px 8px;border-radius:10px;background:rgba(243,221,180,.38)}
.cs-stats div{display:grid;grid-template-columns:18px 62px minmax(0,1fr) 38px;align-items:center;column-gap:7px;cursor:default;border-radius:6px;transition:background-color .14s var(--out)}
.cs-stats .ic{width:18px;height:18px}
.cs-stats dt{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.cs-stats dd{margin:0;justify-self:end;font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.cs-stats .pips{display:flex;gap:4px;max-width:150px}
.cs-stats .pips i{flex:1;height:11px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);box-sizing:border-box}
.cs-stats .hp .pips i.on{background:var(--g-red)}
.cs-stats .ar .pips i.on{background:linear-gradient(180deg,#c9d2f4,#7b8cde)}
.cs-stats .sp .pips i.on{background:var(--g-laurel)}
.cs-stats .dm .pips i.on{background:var(--g-gold)}
.cs-stats .pips i.gain{background:var(--g-laurel);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--laurel-lo)}
.cs-stats .pips i.loss{background:#ffd8d2;border-color:var(--enemy);border-style:dashed}
/* a hovered tile would change a number: green up, red down */
.cs-stats div.up{background:#dcf1c2}
.cs-stats div.up dd{color:#2f6a1c}
.cs-stats div.down{background:#ffd8d2}
.cs-stats div.down dd{color:#a3182a}
.cs-stats.fill .pips i.on{animation:pip-in .22s var(--pop) backwards;animation-delay:calc(var(--i) * 30ms + 80ms)}
@keyframes pip-in{from{transform:scale(.3);opacity:0}}
/* mastery: a label, the level in a gold disc and a bar to the next one; the Talents link beside it */
.cs-mrow{display:flex;align-items:center;gap:10px;min-width:0}
.cs-mast{display:flex;align-items:center;gap:6px;min-width:0;flex:1;cursor:default;border-radius:8px}
.cs-mast[hidden]{display:none}
.cs-mast:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.cs-mk{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.cs-ml{flex:none;min-width:20px;height:20px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:var(--g-gold);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink)}
.cs-bar{flex:1;min-width:40px;max-width:180px;height:10px;box-sizing:border-box;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden}
.cs-bar i{display:block;height:100%;width:calc(100% * var(--m));background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
.cs-max{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-ink)}
.cs-link{
  all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px 0 11px;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:10px;background:var(--g-gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--ink);
  font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);letter-spacing:.01em;
}
.cs-link[hidden]{display:none}
.cs-link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.cs-link:focus-visible,html.kbd-nav .cs-link:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.cs-pt{min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;background:var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
/* the weight pass: points to spend read as an ink tag with a gold number (red belongs to foes and danger) */
.cs-pt[hidden]{display:none}
/* the chip-away (2026-10-22): the fighter's level and the weapon's mastery follow their name on its line (the level's bar
   is on the tile; one number per fighter) */
.cs-vrow{grid-column:1;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0}
.cs-h .cs-mast{flex:none;gap:0}
.cs-h .cs-ml{min-width:24px;height:24px;font-size:var(--t-label)}
/* a weapon's mastery: five pips; the top level all gold */
.cs-wpips{display:flex;gap:4px}
.cs-wpips i{width:12px;height:12px;box-sizing:border-box;border:2px solid var(--ink-3);border-radius:50%;background:var(--paper)}
.cs-wpips i.on{border-color:var(--ink);background:var(--g-gold)}

/* 2. Weapon: the mastery in the title row, the tiles, one line, the favourite note */
.cs-weapon .cs-mrow .cs-bar{max-width:120px}
#scr-rebirth .cs-wrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:10px 6px;padding:2px 0 6px;margin:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
#scr-rebirth .wt{width:auto;height:auto;aspect-ratio:1;border-radius:11px}
#scr-rebirth .wt .wt-ic{width:72%;height:auto;aspect-ratio:1}
#scr-rebirth .wt-price{bottom:-8px;padding:0 4px 0 1px;font-size:var(--t-label)}
#scr-rebirth .wt-price .ic{width:12px;height:12px}
/* a locked fighter's price sits inside its portrait (the weapon tiles' badge hangs below theirs; .cs-pic clips) */
#scr-rebirth .cs-pic .wt-price{bottom:4px}
#scr-rebirth .wt-star{top:-8px;right:-8px;width:18px;height:18px}
/* mastery past five: the "+N" on the tile's corner, out of the pip bar (rebirth.js renderWeapons) */
#scr-rebirth .wt>.wt-hi{position:absolute;top:-8px;right:-8px;z-index:2;margin:0}
#scr-rebirth .wt.locked .wt-ic{opacity:.8}
#scr-rebirth .wt.more{display:grid;place-items:center;align-content:center;gap:1px;background:var(--g-paper);cursor:pointer}
#scr-rebirth .wt.more b{font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
#scr-rebirth .wt.more small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.cs-line{margin:0;display:flex;align-items:flex-start;gap:6px;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.cs-line .ic{width:18px;height:18px;flex:none}
.cs-line b{font-weight:var(--w-strong);color:var(--ink)}
.rbw-lock{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;color:var(--ink)}
.rbw-lock .ic{width:15px;height:15px}
/* a locked weapon pinned on the card (rebirth.js wPin): a dashed ring (the solid one is your pick) and, under its line,
   its unlock: the button and your coins beside it */
#scr-rebirth .wt.locked.pinned{outline:3px dashed var(--gold-lo);outline-offset:3px}
/* a locked fighter clicked: the same dashed ring on its silhouette; its unlock sits under the rail (rebirth.js tPin) */
#scr-rebirth .cs-ft.locked.pinned .cs-pic{outline:3px dashed var(--gold-lo);outline-offset:3px}
#rbw-desc{flex-wrap:wrap}
.rbw-unlock{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-obtn.rbw-buy{background:var(--g-gold)}
.cs-obtn.rbw-buy.short{background:var(--g-paper);color:var(--ink-3)}
.rbw-buy.nope{animation:rbw-nope .32s var(--out)}
@keyframes rbw-nope{25%{translate:-4px 0}50%{translate:3px 0}75%{translate:-2px 0}}
.rbw-have{display:inline-flex;align-items:center;gap:2px;font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);white-space:nowrap}
.rbw-have.short{color:#b23a2a}
.rbw-have .ic{width:14px;height:14px}
.rbw-gate{white-space:normal}
@media (prefers-reduced-motion:reduce){ .rbw-buy.nope{animation:none} }
.cs-fav{margin:0 0 0 auto;flex:none;display:flex;align-items:center;gap:4px;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3);white-space:nowrap}
.cs-fav .ic{width:16px;height:16px;flex:none;filter:grayscale(1);opacity:.6}
.cs-fav b{font-weight:var(--w-strong);color:var(--ink-2)}
.cs-fav.on{color:var(--ink-2)}
.cs-fav.on .ic{filter:none;opacity:1}
#scr-rebirth .rb-forms{margin-top:2px}

/* 3. Gods this life: three tiles (one plain line each), the patron crowned; what a patron does; the gift cards */
.cs-godlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:5px}
.cs-god{
  all:unset;box-sizing:border-box;position:relative;display:grid;justify-items:center;align-content:start;gap:1px;min-width:0;padding:6px 4px 5px;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:12px;background:#fffaf0;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 var(--ink);text-align:center;
  transition:transform .14s var(--out),box-shadow .14s var(--out),background-color .14s var(--out);
}
.cs-gdisc{
  position:relative;width:36px;height:36px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2.5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 45%,#fff) 0 30%,var(--gc) 75%);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 var(--ink);
}
.cs-gdisc>.ic{width:23px;height:23px}
.cs-god b{font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink)}
.cs-god small{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){ .cs-god:not(.patron):hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 5px 0 var(--ink)} }
.cs-god:not(.patron):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.cs-god:focus-visible,html.kbd-nav .cs-god:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.cs-god.patron{background:color-mix(in srgb,var(--gc) 20%,#fffaf0);box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
.cs-god.patron small{color:var(--ink-2)}
.cs-crown{position:absolute;top:-15px;left:50%;width:24px;height:20px;margin-left:-12px;display:grid;place-items:center}
.cs-crown .ic{width:24px;height:20px;filter:drop-shadow(0 2px 0 var(--ink))}
.cs-god.just{animation:cs-crowned .34s var(--pop)}
@keyframes cs-crowned{from{transform:scale(.9)}}
.cs-gift{display:grid;gap:7px}
.cs-gift[hidden]{display:none}
.cs-pline{margin:0;display:flex;align-items:flex-start;gap:6px;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.cs-pline .ic{width:17px;height:17px;flex:none;margin-top:-1px}
.cs-pline b{font-weight:var(--w-strong);color:var(--ink)}
.cs-gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cs-gcard{
  all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:8px;min-width:0;cursor:pointer;
  padding:6px 8px 7px 6px;border:2.5px solid var(--ink);border-radius:11px;background:#fffaf0;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 var(--ink);
}
.cs-gico{
  width:34px;height:34px;box-sizing:border-box;display:grid;place-items:center;border-radius:9px;border:2px solid var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 30%,#fff),color-mix(in srgb,var(--gc) 70%,#fff));
}
.cs-gico .ic{width:24px;height:24px}
.cs-gtx{display:grid;gap:1px;min-width:0}
.cs-gtx b{font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink)}
.cs-gtx small{font:var(--w-body) var(--t-label)/1.3 var(--f-ui);color:var(--ink-2)}
.cs-gtx small .n{font-weight:var(--w-strong);color:var(--ink)}
.cs-gcard.on{background:color-mix(in srgb,var(--gc) 16%,#fffaf0);box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
.cs-gcard:not(.on){opacity:.86}
.cs-gcard:focus-visible,html.kbd-nav .cs-gcard:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.cs-tick{
  position:absolute;top:-9px;right:-8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-style:normal;
  border:2px solid var(--ink);background:var(--g-laurel);font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:#fff;
}

/* 4. Omen: the name and Reroll / Skip on the title row; one line, the upside green and the downside red */
.cs-omen{background:color-mix(in srgb,var(--gc,#e9c88c) 8%,rgba(255,253,246,.8))}
.cs-omen .cs-v{font-size:var(--t-name);cursor:default;white-space:normal;flex:1 1 auto;line-height:1.05}
.cs-oseal{
  flex:none;width:22px;height:22px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 45%,#fff) 0 30%,var(--gc) 75%);
}
.cs-oseal .ic{width:15px;height:15px}
.cs-acts{margin-left:auto;display:flex;gap:6px;flex:none}
.cs-obtn{
  all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 4px 0 8px;cursor:pointer;white-space:nowrap;
  border:2.5px solid var(--ink);border-radius:9px;background:var(--g-paper);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--ink);
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink);
}
.cs-obtn>.ic{width:15px;height:15px}
.cs-obtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.cs-obtn:disabled{cursor:not-allowed;background:var(--paper-2);color:var(--ink-3);box-shadow:none}
.cs-obtn:disabled .ic{filter:grayscale(1);opacity:.55}
.cs-obtn:focus-visible,html.kbd-nav .cs-obtn:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.cs-cost{display:inline-flex;align-items:center;gap:1px;padding:2px 6px 2px 2px;border-radius:999px;background:rgba(42,26,46,.08);font:400 var(--t-tag)/1 var(--f-display)}
.cs-cost .ic{width:14px;height:14px}
.cs-omline{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;cursor:default}
.cs-omline span{padding:5px 8px 6px;border-radius:9px;font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui)}
.cs-omline .up{background:#dcf1c2;color:#2b5e19}
.cs-omline .down{background:#ffe0da;color:#a3182a}
.cs-omline .cs-plain{grid-column:1/-1;background:none;padding:0;color:var(--ink-3);font-weight:var(--w-body)}

/* Fight! is the one big thing on the card (UI audit R3): the panel's full width, never scrolled away */
.cs-go{display:flex;flex:none;margin:2px 0 0}
#scr-rebirth .cs-go .btn.big{flex:1;min-height:62px;font-size:var(--t-display);-webkit-text-stroke:6px var(--ink)}

/* ---------- a pick pops (UI audit delight 8); keyboard and arrow picks stay still ---------- */
#scr-rebirth :is(.wt,.cs-ft).just{animation:rb-pick .26s var(--pop)}
@keyframes rb-pick{from{transform:scale(.9)}}
html.kbd-nav #scr-rebirth :is(.wt,.cs-ft).just{animation:none}

/* ---------- short desktop screens (1600x900, 1366x768): the same card, a little tighter ---------- */
@media (max-height:940px) and (min-width:721px) and (min-aspect-ratio:8001/10000){
  #scr-rebirth{--rail:184px;--panel:410px;padding-block:12px}
  #scr-rebirth>.screen-inner.cs{height:calc((100dvh - 24px) / var(--big,1))}
  .cs-rail{gap:10px}
  #scr-rebirth .cs-rail .nav-top{min-height:44px;font-size:var(--t-name)}
  .cs-rail-card{padding:12px 10px 10px;gap:8px}
  .cs-types{gap:10px 8px}
  .cs-fname{font-size:var(--t-tag)}
  .cs-panel{gap:10px;padding:24px 12px 12px}
  .cs-scroll{gap:8px}
  .cs-sec{gap:7px;padding:8px 10px 10px}
  .cs-stats{gap:3px;padding:5px 8px}
  .cs-stats .pips i{height:10px}
  .cs-gdisc{width:32px;height:32px}
  .cs-gdisc>.ic{width:20px;height:20px}
  #scr-rebirth .cs-go .btn.big{min-height:56px;font-size:var(--t-btn-l);-webkit-text-stroke:5px var(--ink)}
  #scr-rebirth .rb-name{font-size:clamp(46px,4.6vw,72px)}
}
@media (max-height:800px) and (min-width:721px) and (min-aspect-ratio:8001/10000){
  .cs-types{gap:8px 6px}
  .cs-pline{font-size:var(--t-caption)}
}
/* the rail and the panel must not squeeze the stage: narrower screens narrow them first */
@media (max-width:1180px) and (min-width:721px) and (min-aspect-ratio:8001/10000){
  #scr-rebirth{--rail:150px;--panel:380px;--gapx:16px}
  .cs-fname{font-size:var(--t-tag)}
  .cs-tag{display:none}
}

/* ---------- phones and portrait screens: the fighter on top, the fighters as a strip, a bottom sheet ---------- */
@media (max-width:720px),(max-aspect-ratio:4/5){
  #scr-rebirth{padding:0;background:none}
  #scr-rebirth>.screen-inner.cs{height:100dvh;max-width:620px;display:flex;flex-direction:column;align-items:stretch}
  /* the fighter keeps a space of its own above the name (owner, 2026-10-25: "on mobile i dont like how in character
     select the name covers the character"): the frame never shrinks below a fifth of the screen, the sheet below gives
     way first (it scrolls), and the frame starts at the top, the head between the Menu and sound buttons */
  #scr-rebirth .rb-stage{order:0;flex:1 0 auto;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 0 12px}
  #scr-rebirth .rb-frame{flex:1 0 clamp(100px,18dvh,240px)}
  #scr-rebirth .rb-name{font-size:clamp(34px,10vw,50px);-webkit-text-stroke:9px var(--ink);text-shadow:0 5px 0 var(--ink)}
  .rb-hero{gap:6px}
  .rb-sub{padding:4px 12px 6px;font-size:var(--t-caption)}
  .rb-type{font-size:var(--t-name)}
  .cs-rail{order:1;flex:none;display:block}
  /* Menu floats over the sand in the top-left corner (nav.css .nav-top) */
  #scr-rebirth .cs-rail .nav-top{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:max(12px,env(safe-area-inset-left,0px));z-index:3}
  .cs-rail-card{overflow:visible;padding:10px 0 6px;gap:4px;border-radius:18px 18px 0 0;border-bottom:none;box-shadow:var(--lip)}
  .cs-types{
    /* the five fighters fit across the strip (the roster cut, 2026-10-21): no sideways scroll, no fade at the edge */
    display:flex;justify-content:center;gap:8px;overflow:visible;padding:6px 12px 6px;
  }
  .cs-types>.cs-ft,.cs-types>.cs-ft:last-child:nth-child(odd){grid-column:auto}
  .cs-types::-webkit-scrollbar{display:none}
  .cs-ft{flex:0 1 56px;gap:4px;min-width:0}
  .cs-fname{font-size:var(--t-tag);padding:1px 5px 2px}
  .cs-pic{border-radius:11px}
  .cs-m{left:3px;right:3px;bottom:3px}
  .cs-foot{padding:0 14px}
  /* the fighter info gets the room (owner, 2026-10-25: "mobile character seletion screen it supperrrr constrained on
     fighter info below character avatars"): the sheet takes all the height the stage and the strip leave; the steering
     switch waits for the blessing step; and a bigger text size grows the sections, not the portraits or Choose blessing */
  .cs-panel .st-pick{display:none}
  #scr-rebirth .cs-fname{display:none}
  html:is([data-ts="115"],[data-ts="130"]) #scr-rebirth :is(.cs-rail,.cs-panel){zoom:1}
  html:is([data-ts="115"],[data-ts="130"]) #scr-rebirth .cs-scroll{zoom:var(--tz)}
  .cs-panel{
    order:2;flex:1 1 auto;min-height:0;align-self:stretch;gap:8px;
    padding:4px 12px calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:0;border-top:none;border-bottom:none;box-shadow:none;
  }
  #scr-rebirth .cs-panel>.ribbon{display:none}
  /* the sections sit on the sheet's paper, no box of their own, and fade in and out where they scroll instead of meeting a
     hard edge (owner, 2026-10-25: "i dont like the bounding container either, can prob leverage blur fades") */
  .cs-scroll{gap:16px;margin-block:0;margin-left:-6px;padding-top:0;padding-left:6px;padding-bottom:26px;-webkit-mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 30px),transparent)}
  .cs-sec{gap:6px;padding:8px 2px 0;border:none;border-radius:0;background:none;box-shadow:none}
  .cs-tx{font-size:var(--t-caption)}
  .cs-tag{display:none}
  .cs-stats div{grid-template-columns:16px 56px minmax(0,1fr) 34px}
  .cs-god small{font-size:var(--t-label)}
  .cs-gtx small{font-size:var(--t-label)}
  #scr-rebirth .cs-wrow{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  #scr-rebirth .cs-go .btn.big{min-height:54px;font-size:var(--t-h);-webkit-text-stroke:5px var(--ink)}
  .cs-obtn{min-height:34px}
}
/* ---------- landscape phones: the desktop card, narrower around a wider stage ----------
   At 844x390 the corner sound button's reserve (nav.css) and the full-size rail and panel left the stage 130 px wide,
   and the name ran under the panel. Here the column leaves the sound button's corner on the right only, and the panel
   narrows, so the fighter and the name get almost twice the room. */
@media (max-height:500px) and (min-width:721px) and (min-aspect-ratio:8001/10000){
  #scr-rebirth{--rail:150px;--panel:330px;--gapx:12px}
  body:has(.sound-top) #scr-rebirth>.screen-inner.cs{max-width:calc(100vw - 32px - 70px);margin-left:0}
  #scr-rebirth .rb-stage{padding:0 0 4px}
  #scr-rebirth .rb-name{font-size:clamp(30px,9dvh,40px);-webkit-text-stroke:8px var(--ink);text-shadow:0 4px 0 var(--ink)}
  .rb-hero{gap:5px}
  .rb-sub{flex-wrap:wrap;justify-content:center;white-space:normal;padding:3px 10px 5px;font-size:var(--t-caption)}
  .rb-type{font-size:var(--t-name)}
  .cs-fname{font-size:var(--t-label);padding:1px 4px 2px}
  .cs-tag{display:none}
}
@media (max-width:380px){
  .cs-omen .cs-h{flex-wrap:wrap}
  .cs-acts{margin-left:0}
}

/* ---------- reduced motion, photo mode ---------- */
@media (prefers-reduced-motion:reduce){
  #scr-rebirth .rb-name,#scr-rebirth :is(.wt,.cs-ft).just,.cs-god.just,.cs-stats.fill .pips i.on{animation:none}
  .cs-pic,.cs-god{transition:none}
  .cs-ft:hover .cs-pic,.cs-god:hover{transform:none}
}
.shot #scr-rebirth .rb-name,.shot #scr-rebirth :is(.wt,.cs-ft).just,.shot .cs-stats.fill .pips i.on{animation:none}
/* Fight! with reduced motion: no swoop, the camera cuts under a short fade (ui/rebirth.js) */
body.rb-cut #scene{animation:rb-cut .42s var(--out)}
@keyframes rb-cut{from{opacity:0}}

/* the weapon form row (the long-term layer, meta.css draws its chips): meta.css lays the old card's weapon block out as
   a two-column grid when forms show; in the Weapon section it is one more line under the tiles */
#scr-rebirth #rb-weapons#rb-weapons:has(#rb-forms){grid-template-columns:minmax(0,1fr);align-items:stretch}
#scr-rebirth #rb-weapons#rb-weapons > :is(#rbw-row,#rbw-desc){grid-column:auto;grid-row:auto}
#scr-rebirth #rb-weapons#rb-weapons > #rbw-desc{display:flex}
#scr-rebirth #rb-forms.rb-forms{display:grid;gap:5px}
#scr-rebirth #rb-forms.rb-forms[hidden]{display:none}
#scr-rebirth #rb-forms .fc-row{grid-column:auto;grid-row:auto;justify-self:start}
#scr-rebirth #rb-forms .fc-line{grid-column:auto;grid-row:auto;font-size:var(--t-caption)}

/* ---------- the clean-up pass (owner, 2026-10-21: "smooth out the transitions", "\"fighter\" is a label so perhaps should
   sit above Spearman", "a small description for the class", "states need to be optically clean") ---------- */
/* a section's label is a quiet eyebrow above its name; the note or the buttons sit on the eyebrow's line */
.cs-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:9px;row-gap:3px;min-height:0}
.cs-k{grid-column:1;grid-row:1;font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);color:var(--ink-3);-webkit-text-stroke:0;paint-order:normal}
.cs-v{grid-column:1;grid-row:2;font-size:var(--t-btn);line-height:1}
.cs-h>.cs-note{grid-column:2;grid-row:1;margin-left:0}
.cs-h>.cs-acts{grid-column:2;grid-row:1 / span 2;align-self:center}
/* the class in one line, under its name */
.cs-role{margin:-2px 0 2px;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
/* the section that changed settles in place (ui/rebirth.js settle) */
.cs-sec.settle{animation:cs-settle .24s var(--out)}
@keyframes cs-settle{from{opacity:.35;transform:translateY(4px)}}
/* a pick never moves what it holds: the ring says it, the icon stays where it was */
#scr-rebirth .wt.on,#scr-rebirth .wt.on:is(:hover,:active){transform:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 0 0 3px var(--paper),0 0 0 6px var(--gold-lo),0 3px 0 var(--ink)}
.cs-ft.on .cs-pic,.cs-ft.on:is(:hover,:active) .cs-pic{transform:none;box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
/* a switch recolours the pips instead of refilling them */
.cs-stats .pips i{transition:background-color .2s var(--out),border-color .2s var(--out),box-shadow .2s var(--out)}
@media (prefers-reduced-motion:reduce){ .cs-sec.settle{animation:none} .cs-stats .pips i{transition:none} }

/* the chip-away (2026-10-22): a god card is one row, its seal beside its name and line (three tall stacks pushed the omen
   under the fold) */
.cs-god{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;column-gap:7px;row-gap:0;padding:6px 8px 6px 6px;text-align:left}
.cs-god .cs-gdisc{grid-row:1 / span 2;width:32px;height:32px}
.cs-god .cs-gdisc>.ic{width:20px;height:20px}
.cs-god b{align-self:end}
.cs-god small{align-self:start;line-height:1.15}

/* ---------- the blessing, the card's second step (2026-10-24) ----------
   The owner: "starting a match should have a separate screen where you choose your blessing ... rather than it be
   wedged at the bottom of characters seelction". The rail and the fighter panel step aside; the stage takes the left
   (camera.js frames the fighter in it, so the fighter glides over) and the blessing the right: the title, the three gods
   watching as big seals (the patron crowned and ringed), the patron's blessing spelled out, the omen, and Fight!. One
   decision (owner, 2026-10-24: "There's just way too much going on in the choose your blessing"): the god. */
#scr-rebirth{--bless:600px}
#scr-rebirth[data-step="fighter"] :is(.bl,#btn-bless-back),#scr-rebirth[data-step="bless"] :is(.cs-rail,.cs-panel){display:none}
#scr-rebirth[data-step="bless"]>.screen-inner.cs{grid-template-columns:minmax(0,1fr) var(--bless)}
.bl{
  position:relative;align-self:center;max-height:100%;min-height:0;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;
  padding:22px 20px 16px;border:var(--line) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:var(--lip),var(--drop);
  animation:bl-in .24s var(--out);
}
@keyframes bl-in{from{opacity:0;transform:translateX(18px)}}
@keyframes bl-up{from{opacity:0;transform:translateY(18px)}}
.bl-scroll{
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:16px;
  /* 8 px inside on both sides, given back by the margin: the patron's ring (6 px outside its tile) shows in full instead of
     being cut by the scroller (owner, 2026-10-25: "i dont like how the select satate gets cliopped on the left") */
  /* and room at the top and bottom for the fade (kit.css): the title's ink stroke sits below it at rest */
  margin:-12px -8px -10px;padding:12px 8px 12px;
}
.bl-head{display:grid;gap:6px;justify-items:center;text-align:center;padding-top:2px}
.bl-title{margin:0;font:400 clamp(32px,2.8vw,44px)/1 var(--f-display);color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);text-wrap:balance}
.bl-gods{display:grid;gap:16px}
/* the gods: three big seals; the patron wears the crown and the pick ring */
.bl .bl-godlist{gap:12px;padding-top:16px}
.bl .cs-god{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;text-align:center;row-gap:3px;padding:16px 8px 12px;border-radius:16px}
.bl .cs-god .cs-gdisc{grid-row:auto;width:72px;height:72px;margin-bottom:6px;border-width:3px;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 3px 0 var(--ink)}
.bl .cs-god .cs-gdisc>.ic{width:44px;height:44px}
.bl .cs-god b{align-self:auto;font-size:var(--t-name)}
.bl .cs-god small{align-self:auto;font-size:var(--t-caption)}
.bl .cs-crown{top:-24px;width:36px;height:30px;margin-left:-18px}
.bl .cs-crown .ic{width:36px;height:30px}
/* the patron's blessing, spelled out (owner, 2026-10-24: "particularly blessing buffs explained"): a quiet panel in the
   patron's colour under the gods: what it is called, then three rows (the starting gift, more of their cards with their
   icons, their divine moment sooner), each an icon tile, a name and one line */
.bl-gift{display:grid;gap:9px;padding:12px 14px 13px;border-radius:16px;background:color-mix(in srgb,var(--gc,#e9c88c) 9%,rgba(255,253,246,.85));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gc,#e9c88c) 22%,rgba(42,26,46,.08))}
.bl-gift[hidden]{display:none}
.bl-k{margin:0;font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.bl-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;column-gap:11px;cursor:default;border-radius:10px}
.bl-ri{width:38px;height:38px;box-sizing:border-box;display:grid;place-items:center;border-radius:11px;border:2px solid var(--ink);font-style:normal;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 28%,#fff),color-mix(in srgb,var(--gc) 64%,#fff));box-shadow:0 2px 0 var(--ink)}
.bl-ri .ic{width:24px;height:24px}
.bl-row>span>b{display:block;font:400 var(--t-name-s)/1.15 var(--f-display);color:var(--ink)}
.bl-row small{display:block;margin-top:2px;font:var(--w-body) var(--t-caption)/1.35 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.bl-row small b{font-weight:var(--w-strong);color:var(--ink);white-space:nowrap}
.bl-pows{display:flex;gap:4px}
.bl-pows i{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(42,26,46,.07);font-style:normal;cursor:default}
.bl-pows .ic{width:19px;height:19px}
:is(.bl-row,.bl-pows i):focus-visible,html.kbd-nav :is(.bl-row,.bl-pows i):focus{outline:var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .bl{animation:none} }
/* short desktop screens: the same panel, tighter */
@media (max-height:800px) and (min-width:721px) and (min-aspect-ratio:8001/10000){
  .bl{gap:10px;padding:16px 16px 12px}
  .bl-scroll{gap:12px}
  .bl .bl-godlist{padding-top:14px}
  .bl .cs-god{padding:12px 6px 10px}
  .bl .cs-god .cs-gdisc{width:56px;height:56px;margin-bottom:4px}
  .bl .cs-god .cs-gdisc>.ic{width:34px;height:34px}
}
@media (max-width:1180px) and (min-width:721px) and (min-aspect-ratio:8001/10000){ #scr-rebirth{--bless:520px} }
@media (max-height:500px) and (min-width:721px) and (min-aspect-ratio:8001/10000){ #scr-rebirth{--bless:420px} }
/* phones and portrait screens: the fighter on top, the blessing as the bottom sheet with Fight! pinned */
@media (max-width:720px),(max-aspect-ratio:4/5){
  .bl{
    order:2;flex:0 1 auto;max-height:66dvh;align-self:stretch;gap:10px;animation-name:bl-up;
    padding:14px 12px calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:22px 22px 0 0;border-bottom:none;box-shadow:var(--lip);
  }
  .bl-scroll{gap:12px}
  .bl-title{font-size:clamp(26px,8vw,34px);-webkit-text-stroke:7px var(--ink)}
  .bl-gift{padding:10px 11px 11px;gap:8px}
  .bl-row{grid-template-columns:34px minmax(0,1fr);row-gap:5px}
  .bl-ri{width:34px;height:34px}
  .bl-pows{grid-column:2}
  .bl .bl-godlist{gap:8px;padding-top:12px}
  .bl .cs-god{padding:10px 4px 8px}
  .bl .cs-god .cs-gdisc{width:52px;height:52px;margin-bottom:3px}
  .bl .cs-god .cs-gdisc>.ic{width:32px;height:32px}
  .bl .cs-god b{font-size:var(--t-name-s)}
  .bl .cs-god small{font-size:var(--t-label)}
  .bl .cs-crown{top:-18px;width:28px;height:24px;margin-left:-14px}
  .bl .cs-crown .ic{width:28px;height:24px}
}

/* ---------- the weapon's forms as cards (2026-10-24) ----------
   The owner: "it's not clear that I can select forms ... And upgrade them", then "Forms change play style wasnt clear".
   The row says a form changes how you fight; each card: the playstyle's icon, the name, the playstyle in a word or two,
   the level as pips (a locked one: the mastery it opens at); the one worn is gold. */
#scr-rebirth #rb-forms.rb-forms{gap:7px}
#scr-rebirth #rb-forms .fc-head{display:flex;align-items:baseline;gap:8px}
#scr-rebirth #rb-forms .fc-head .rbw-label{display:inline!important}
#scr-rebirth #rb-forms .fc-head small{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}
#scr-rebirth #rb-forms .fc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#scr-rebirth #rb-forms .fc{display:grid;justify-items:center;align-content:start;gap:3px;width:auto;height:auto;min-width:0;min-height:0;padding:8px 4px 7px;border-radius:12px;text-align:center}
#scr-rebirth #rb-forms .fc>.ic{width:26px;height:26px}
#scr-rebirth #rb-forms .fc b{font:400 var(--t-tag)/1.05 var(--f-display);color:var(--ink);-webkit-text-stroke:0;overflow-wrap:anywhere}
#scr-rebirth #rb-forms .fc small{font:var(--w-strong) var(--t-label)/1.15 var(--f-ui);color:var(--ink-3)}
#scr-rebirth #rb-forms .fc.on small{color:var(--ink-2)}
#scr-rebirth #rb-forms .fc.locked>.ic{width:18px;height:18px;opacity:.7}
@media (max-width:720px),(max-aspect-ratio:4/5){ #scr-rebirth #rb-forms .fc{padding:7px 3px 6px} #scr-rebirth #rb-forms .fc>.ic{width:22px;height:22px} }
/* the worn form's line, and beside it its next level for Medals (the Armory's .wd-up button) */
#scr-rebirth #rb-forms .fc-foot{display:flex;align-items:center;gap:10px}
#scr-rebirth #rb-forms .fc-foot .fc-line{flex:1 1 auto;min-width:0}
#scr-rebirth #rb-forms .fc-up{flex:none;white-space:nowrap;transition:translate .12s var(--out),scale .12s var(--out)}
#scr-rebirth #rb-forms .fc-up.short{cursor:default;opacity:.55;box-shadow:none}
#scr-rebirth #rb-forms .fc-up.nope{animation:rbw-nope .32s var(--out)}
@media (hover:hover) and (pointer:fine){ #scr-rebirth #rb-forms .fc-up:not(.short):hover{translate:0 -1px} }
#scr-rebirth #rb-forms .fc-up:not(.short):active{scale:.97}
#scr-rebirth #rb-forms .fc-up:focus-visible,html.kbd-nav #scr-rebirth #rb-forms .fc-up:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
@media (prefers-reduced-motion:reduce){ #scr-rebirth #rb-forms .fc-up{transition:none} #scr-rebirth #rb-forms .fc-up.nope{animation:none} }