/* RIFTSTATS! - Circuit Pop design system. See ui/CIRCUIT-POP-STYLE.md.
   Dark theme only. Zero border-radius anywhere. Domain owns all entity color. */

:root {
  --bg:#0b0b10; --surface:#111117; --surface-2:#14141b; --surface-3:#1c1c26;
  --row:#0e0e14; --border:#26262e; --border-2:#33333e;
  --text:#f2f2f5; --text-dim:#c9c9d4; --text-muted:#8f8fa0;
  --text-faint:#5e5e6c; --text-ghost:#494954;
  --tile:linear-gradient(160deg,#15151d,#0e0e14);
  --fury:#e0443e; --calm:#2fb56b; --mind:#3a7fe8;
  --body:#e88a2d; --chaos:#8f56d9; --order:#d9a520;
  --pos:#3fd98a; --neg:#ff6b5e; --flat:#8f8fa0; --gold:#d9a520;
  --rainbow:linear-gradient(90deg,#e0443e,#e88a2d,#d9a520,#2fb56b,#3a7fe8,#8f56d9);

  /* ---- added for the six screen pass ---- */
  --field:#15151d;              /* every select and text input fill */
  --zebra:#121219;              /* alternating row shade */
  --row-hi:#1a1a24;             /* row hover fill, and the selected row inner plate */
  --seam-mid:#2a2a34;           /* grey midpoint of every gradient SEAM */
  --tab-mid:#3a3a44;            /* grey midpoint of the Legend Detail active TAB gradient */
  --tab-idle:#16161d;           /* inactive Legend Detail tab fill */
  --tile-void:#1b1b25;          /* inert placeholder tile fill */
  --chip:rgba(11,11,16,.82);    /* translucent plate behind every badge over art */

  /* Type accents duplicate four domain hexes by value but carry TYPE meaning,
     so they stay separate tokens and must not be collapsed. */
  --type-unit:#3a7fe8;
  --type-spell:#8f56d9;
  --type-gear:#d9a520;
  --type-rune:#2fb56b;
  --type-other:#8f8fa0;

  /* Page domain pair fallbacks. Real values are written inline on the page
     wrapper by the JS, never here, or they would leak into the next route. */
  --d1:var(--calm);
  --d2:var(--d1);
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:Archivo,system-ui,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
/* Legend Detail is the one page that themes itself from data. The wash is gated
   behind a class so the six domain fallbacks never tint any other route, and
   every var() ships a literal fallback because an unresolved one drops the whole
   declaration rather than falling back to the browser default. */
body.lgd-theme {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--d1,#e0443e) 7%, transparent),
      color-mix(in srgb, var(--d2,#3a7fe8) 7%, transparent)),
    var(--bg);
  background-attachment:fixed;
}
a { color:var(--mind); text-decoration:none; }
a:hover { color:#6ba3f5; }
::placeholder { color:var(--text-ghost); }
.mono { font-family:'Space Mono',monospace; }

@keyframes rbIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes rbFill { from{width:0} }
@keyframes rbGrow { from{height:0} }
@keyframes rbTick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* rbGrow animates height and is still bound to the legend briefing bars.
   The new bar charts scale instead, so they need their own keyframe. */
@keyframes rbGrowY { from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* ---- header ---- */
.header {
  padding:14px 28px; display:flex; align-items:center; gap:24px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.logo {
  font-weight:900; font-size:24px; letter-spacing:-.02em; color:#fff;
  transform:skewX(-6deg); cursor:pointer;
}
.logo .pop {
  background:var(--rainbow); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.hdiv { height:22px; width:2px; background:var(--border); transform:skewX(-6deg); }
.nav { display:flex; gap:22px; }
.nav a {
  font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--text-faint);
  cursor:pointer; padding-bottom:3px; transition:color .15s;
}
.nav a:hover { color:#fff; }
.nav a.on { color:#fff; box-shadow:0 3px 0 #fff; }
/* opacity, not its own colour, so it brightens with the link on hover */
.nav .ext { font-size:9px; opacity:.55; }
.hcount {
  margin-left:auto; font:700 10px 'Space Mono',monospace;
  color:var(--text-faint); letter-spacing:.14em;
}
.rainbow-rule { height:3px; background:var(--rainbow); }

.wrap { padding:18px 28px 60px; max-width:1440px; margin:0 auto; width:100%; }
.wrap.narrow { max-width:1200px; }
main { flex:1; }

/* ---- section titles ---- */
.sec { display:flex; gap:14px; align-items:baseline; margin:6px 0 16px; }
.sec h2 {
  font-weight:900; font-size:20px; letter-spacing:-.01em;
  transform:skewX(-6deg); margin:0;
}
.sec .cap { font:700 10px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.14em; }

/* ---- back button ---- */
.back {
  display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); padding:7px 16px; cursor:pointer;
  font-weight:800; font-size:12px; letter-spacing:.1em; color:var(--text-dim);
  transform:skewX(-6deg); margin-bottom:20px; transition:all .15s;
}
.back:hover { color:#fff; border-color:#fff; }

/* ---- flags / chips ---- */
.flag {
  font:700 9px 'Space Mono',monospace; color:#a06400; background:#fff5db;
  padding:1px 6px; letter-spacing:.06em; margin-left:6px; white-space:nowrap;
}
.dom-chip {
  font:700 11px 'Space Mono',monospace; padding:1px 7px; margin-left:5px;
  color:#4a2fa8; background:#efeaff;
}
.pos { color:var(--pos); } .neg { color:var(--neg); } .flat { color:var(--flat); }
.gold { color:var(--gold); }

/* ---- grids ---- */
.grid-legends { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }

/* ---- legend / deck tile ---- */
.dtile {
  background:var(--tile); border:1px solid var(--border); cursor:pointer;
  position:relative; transition:transform .2s,box-shadow .2s;
  animation:rbIn .45s both;
}
.dtile:hover { transform:translateY(-4px); }
.dtile .strip { height:4px; }
.dtile .body { padding:14px 16px; }
.dtile .row1 { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.dtile .thumb { width:44px; height:44px; flex:none; border:1px solid var(--border); background-size:cover; background-position:center top; }
.dtile .name { font-weight:900; font-size:16px; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtile .doms { font:700 8.5px 'Space Mono',monospace; letter-spacing:.12em; margin-top:2px; }
.labelbar { display:flex; justify-content:space-between; margin-bottom:3px; }
.labelbar .k { font:700 8px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.1em; }
.labelbar .v { font-weight:900; font-size:13px; color:#fff; }
.track { height:3px; background:var(--border); }
.track > div { height:3px; animation:rbFill .9s ease-out; }
.quad { display:flex; justify-content:space-between; }
.quad > div .k { font:700 7.5px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.1em; }
.quad > div .v { font-weight:800; font-size:13px; color:var(--text-dim); }

/* ---- card tile, shared by Cards and Legend Detail ---- */
.ctile {
  background:var(--tile); border:1px solid var(--border);
  border-left:3px solid var(--c,var(--flat)); border-radius:0;
  cursor:pointer; position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  animation:rbIn .45s both;
}
.ctile:hover { transform:translateY(-5px); border-color:var(--c,var(--flat));
  box-shadow:0 0 0 1px var(--c,var(--flat)),0 12px 32px -8px var(--c,var(--flat)); }
.ctile .art { height:118px; position:relative; background-color:var(--bg);
  background-size:cover; background-repeat:repeat; background-position:center top; }
.ctile .art .fade { position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 35%,var(--row)); }
/* Landscape variant. Source order decides against .ctile .art, same specificity,
   so this pair must stay below the two rules above. */
.ctile--land .art { height:92px; background-size:contain;
  background-repeat:no-repeat; background-position:center; }
.ctile--land .art .fade { background:linear-gradient(180deg,transparent 70%,var(--row)); }
.ctile .art .badge { position:absolute; top:6px; right:6px;
  font:700 8px 'Space Mono',monospace; letter-spacing:.14em;
  background:var(--chip); padding:2px 6px; color:var(--c,var(--flat)); }
.ctile .art .tbadge { position:absolute; bottom:6px; left:6px;
  font:700 8px 'Space Mono',monospace; letter-spacing:.12em;
  color:var(--text-muted); background:var(--chip); padding:2px 6px; }
.ctile .cbody { padding:8px 11px 12px; }
.ctile .cname { font-weight:900; font-size:14px; color:var(--text); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctile .pres { margin-bottom:8px; }
.trio { display:flex; justify-content:space-between; }
.trio > div .k { font:700 7.5px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.1em; }
.trio > div .v { font-weight:800; font-size:13px; }
.trio > div .v.dim { color:var(--text-dim); }

/* ---- filter rail ---- */
/* The old .domsel, .domchip, .searchwell, .drawer, .slidecell and .slidetrack
   blocks were removed here. The cpb- drawer and .rb-search replace them, and
   keeping both would ship two competing slider systems in one stylesheet. */
.rail { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-bottom:10px; }
.advcell { display:flex; flex-direction:column; justify-content:center; gap:2px; background:var(--surface); border:1px solid var(--border); padding:8px 14px; cursor:pointer; transition:border-color .15s; }
.advcell:hover { border-color:var(--border-2); }
.advcell .k { font:700 8px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.12em; }
.advcell .v { font-size:12px; font-weight:800; color:#fff; }
.reset { background:#fff; color:var(--bg); font-weight:900; letter-spacing:.1em; font-size:12px; padding:0 22px; display:flex; align-items:center; cursor:pointer; transform:skewX(-4deg); transition:box-shadow .15s; }
.reset:hover { box-shadow:0 0 18px rgba(255,255,255,.4); }

/* ---- detail pages ---- */
.statgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.statpanel { background:var(--surface); border:1px solid var(--border); padding:12px 14px; animation:rbIn .4s both; }
.statpanel .k { font:700 8.5px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.14em; margin-bottom:5px; }
.statpanel .v { font-weight:900; font-size:26px; letter-spacing:-.02em; }
.panel { background:var(--surface); border:1px solid var(--border); padding:16px 18px; margin-top:20px; animation:rbIn .45s both; }
.panel .h { font:700 9px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.14em; margin-bottom:14px; }
.panel.top3 { border-top:3px solid; }
.dual { display:flex; gap:20px; flex-wrap:wrap; }
.dual > .panel { flex:1; min-width:260px; }

/* bar charts */
.bars { display:flex; align-items:flex-end; gap:12px; height:120px; }
.bars .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bars .bar .top { font:700 10px 'Space Mono',monospace; color:var(--text-dim); }
.bars .bar .fill { width:100%; animation:rbGrow .7s both; }
.bars .bar .lab { font:700 9px 'Space Mono',monospace; color:var(--text-faint); }

/* tables */
table.data { border-collapse:collapse; width:100%; }
table.data th { text-align:left; font:700 8.5px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.12em; padding:6px 9px; border-bottom:1px solid var(--border); }
table.data td { padding:7px 9px; border-bottom:1px solid var(--surface-3); font-size:13px; }
table.data tr.click { cursor:pointer; }
table.data tr.click:hover td { background:var(--surface-2); }

/* matchup matrix */
.mx { border-collapse:collapse; }
.mx th { font:700 8px 'Space Mono',monospace; color:var(--text-faint); padding:5px 6px; letter-spacing:.06em; }
.mx td { text-align:center; font:700 12px Archivo; padding:7px 6px; min-width:34px; color:#fff; }
.mx td.leg { text-align:left; font-weight:800; color:var(--text); white-space:nowrap; padding-right:12px; }
.mx td.self { background:#1a1a22; color:var(--text-faint); }
.mx td.na { color:var(--text-faint); }

/* event rows */
.evhead { display:flex; font:700 8.5px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.14em; padding:0 16px 8px; border-bottom:1px solid var(--border); }
.evrow { display:flex; align-items:center; gap:10px; background:var(--row); border:1px solid var(--surface-3); padding:12px 16px; margin-top:6px; cursor:pointer; transition:transform .15s,border-color .15s; animation:rbIn .4s both; }
.evrow:hover { transform:translateX(4px); border-color:var(--border-2); }
.evrow:hover .rbd-go { color:var(--text); border-color:var(--border-2); }
.evrow .rbd-go { width:76px; flex:none; justify-content:center; }
.dots { display:flex; gap:3px; }
.dots span { width:9px; height:9px; transform:rotate(45deg); }

/* empty / loading */
.empty { padding:60px 0; text-align:center; }
.empty .big { font-weight:900; font-size:22px; color:var(--text-faint); transform:skewX(-6deg); }
.empty .sub { font:400 11px 'Space Mono',monospace; color:var(--text-ghost); margin-top:8px; letter-spacing:.1em; }
.loading { padding:40px 0; text-align:center; font:700 10px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.2em; }

/* ticker */
.ticker { overflow:hidden; border-top:1px solid var(--border); background:var(--row); position:sticky; bottom:0; }
.ticker .track { display:flex; gap:44px; white-space:nowrap; padding:7px 0; animation:rbTick 28s linear infinite; width:max-content; height:auto; background:none; }
.ticker .item { font:400 10px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.08em; }

/* ==========================================================================
   SHARED PRIMITIVES, rb- prefix
   Built once, used by Home, Cards, Card Detail, Decks, Deck Detail and the
   Legend Detail cards box. Never fork any of these per screen.
   ========================================================================== */

/* ---- page container ---- */
.wrap.rb-1180 { max-width:1180px; padding:22px 28px 70px; }
/* Legend Detail is the one page whose blocks declare their own 1180px floor, so
   its container has to hand back 1180px of CONTENT rather than 1180px including
   the gutters, or the hero panel scrubs sideways 56px at every viewport. */
.wrap.rb-legend { max-width:1236px; padding:22px 28px 70px; }

/* ---- the one bordered block per page ----
   overflow stays visible on purpose. Clipping it would cut all nine hanging
   tags on Deck Detail, four of which overhang the outer edge by 9px. */
.rb-block {
  position:relative;
  border:1px solid var(--border);
  background:var(--row);
  animation:rbIn .4s both;
}
.rb-block--lgc { margin-top:30px; min-width:1180px; }

/* 2px top rule. Rainbow on Cards, Card Detail, Decks and Home. The site header
   rule stays 3px, the two are not unified. */
.rb-rule { height:2px; background:var(--rainbow); }
/* Domain scoped variant, TWO stops, no grey midpoint. Deck Detail, Legend Detail. */
.rb-rule--dom { background:linear-gradient(90deg,var(--d1),var(--d2)); }

/* Single section inner shell. Zero horizontal padding so zebra bands run edge
   to edge, every row supplies its own 18px instead. */
.rb-block-in { position:relative; padding:26px 0 0; }

/* Any page level empty state that lands inside a block shrinks automatically. */
.rb-block .empty { padding:44px 0 50px; }
.rb-block .empty .big { font-size:19px; }

/* ---- gradient seams ----
   Never border-image, which falls back to a white line in export renderers.
   .rb-seam-v declares no width, it occupies a literal 1px grid track. */
.rb-seam-h { height:1px; background:linear-gradient(90deg,var(--d1),var(--seam-mid) 50%,var(--d2)); }
.rb-seam-v { background:linear-gradient(180deg,var(--d1),var(--seam-mid) 50%,var(--d2)); }

/* ---- hanging tags ----
   Height is pinned at 24px rather than derived from padding. A tag that wraps
   inflates past 24px and paints over the column header beneath it, so
   white-space is load bearing here and not decorative. */
.rb-tag { position:absolute; top:-11px; left:0; z-index:6; }
.rb-tag-label {
  display:flex; align-items:center; height:24px; flex:none;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-left:3px solid var(--d1);
  padding:0 11px;
  font:700 9.5px 'Space Mono',monospace;
  letter-spacing:.13em;
  color:var(--text-dim);
  white-space:nowrap;
}
.rb-tag-label--pos { border-left-color:var(--pos); }
.rb-tag-label--neg { border-left-color:var(--neg); }
.rb-tag-label--d2  { border-left-color:var(--d2); }

.rb-tag-group { position:absolute; top:-11px; left:0; z-index:6;
  display:flex; align-items:stretch; height:24px; }
.rb-tag-chip {
  display:flex; align-items:center; gap:7px; height:24px; flex:none;
  background:var(--surface); border:1px solid var(--border); border-left:none;
  padding:0 10px;
  font:700 8px 'Space Mono',monospace; color:var(--text-muted);
  letter-spacing:.12em; white-space:nowrap;
}
.rb-typekey-item { display:flex; align-items:center; gap:4px;
  font:700 8px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.11em; }

/* ---- breadcrumb row ----
   The 22px bottom margin is what keeps the four Deck Detail stat tags off the
   breadcrumb text. Do not shrink it. */
.rb-crumb { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.rb-crumb-t { font:700 10px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.14em; }
.rb-crumb-link { color:var(--text-muted); cursor:pointer; }
.rb-crumb-link:hover { color:#fff; }
.rb-crumb-now { color:var(--text); }
/* Event pages only. Date, field size and winner, beside the breadcrumb. */
.rb-crumb .rbd-cap { font:700 9px 'Space Mono',monospace; color:var(--text-faint);
  letter-spacing:.12em; }
.rb-controls { margin-left:auto; display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }

/* ---- select shell, caret, rainbow chip ---- */
.rb-selgroup { display:flex; align-items:stretch; }
.rb-chip-rainbow {
  display:flex; align-items:center; padding:0 13px;
  font-weight:900; font-size:11px; letter-spacing:.16em;
  color:var(--bg); background:var(--rainbow); white-space:nowrap;
}
.rb-chip-rainbow--sm { padding:0 12px; font-size:10px; }

.rb-field { position:relative; background:var(--field); border:1px solid var(--border); }
.rb-field.on { border-color:var(--sel-accent,var(--border-2)); }
.rb-field select {
  appearance:none; -webkit-appearance:none; border-radius:0;
  width:100%; background:transparent; border:none; outline:none;
  color:var(--text-muted); font:800 13px Archivo,sans-serif;
  padding:9px 32px 9px 12px; cursor:pointer;
}
.rb-field.on select { color:var(--text); }
.rb-field select option { background:var(--field); color:var(--text); }
.rb-caret {
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:6px; height:6px;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  pointer-events:none;
}
.rb-field--sm  { min-width:128px; }
.rb-field--sm  select { font:800 11.5px Archivo,sans-serif; padding:4px 24px 4px 9px; }
.rb-field--sm  .rb-caret { right:9px; width:5px; height:5px; }
.rb-field--md  select { font:800 12.5px Archivo,sans-serif; padding:9px 30px 9px 12px; }
.rb-field--md  .rb-caret { right:11px; }
.rb-field--lgc select { font:800 12px Archivo,sans-serif; letter-spacing:.04em; padding:8px 30px 8px 12px; }
.rb-field--lgc .rb-caret { right:11px; }
.rb-field--lens   { min-width:236px; }
.rb-field--legend { min-width:190px; }

/* ---- search well ---- */
.rb-search { display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--border); padding:0 14px; }
.rb-search-slash { color:var(--text-faint); font-family:'Space Mono',monospace; }
.rb-search-input { width:170px; background:transparent; border:none; border-radius:0;
  outline:none; color:var(--text); font-family:Archivo,sans-serif; font-size:13px; padding:9px 0; }
.rb-search--grow { flex:1; min-width:240px; gap:10px; padding:0 16px; }
.rb-search--grow .rb-search-input { flex:1; width:auto; min-width:0; padding:12px 0; }

/* ---- domain icons ----
   Urls resolve against static/style.css, so icons/Fury.png hits
   static/icons/Fury.png. There is deliberately no Colorless icon, a card with
   no non Colorless domain renders zero icons and never a placeholder. */
.rb-dicon { width:13px; height:13px; flex:none;
  background-size:contain; background-repeat:no-repeat; background-position:center; }
.rb-dicon--Fury  { background-image:url('icons/Fury.png'); }
.rb-dicon--Calm  { background-image:url('icons/Calm.png'); }
.rb-dicon--Mind  { background-image:url('icons/Mind.png'); }
.rb-dicon--Body  { background-image:url('icons/Body.png'); }
.rb-dicon--Order { background-image:url('icons/Order.png'); }
.rb-dicon--Chaos { background-image:url('icons/Chaos.png'); }
.rb-dicon--14 { width:14px; height:14px; }
.rb-dicon--20 { width:20px; height:20px; padding:2px; background-color:var(--chip); }
.rb-dicon--27 { width:27px; height:27px; }
.rb-dicons { display:flex; gap:2px; flex:none; }

/* ---- tables ----
   Each table supplies its own track list, gap and padding in its own class.
   Right alignment is the explicit .rb-r utility, never an automatic
   span + span rule, which would wrongly right align LEGEND on Decks. */
.rb-colhead { display:grid; font:700 8px 'Space Mono',monospace;
  color:var(--text-muted); letter-spacing:.14em; }
.rb-r { text-align:right; }
.rb-rows { display:flex; flex-direction:column; }
.rb-scroll { overflow-y:auto; scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb,var(--d1)) var(--field); }
.rb-scroll::-webkit-scrollbar { width:8px; }
.rb-scroll::-webkit-scrollbar-track { background:var(--field); }
.rb-scroll::-webkit-scrollbar-thumb { background:var(--scroll-thumb,var(--d1)); }
/* ONE zebra rule for every table in the app. Rows must be the only children of
   their wrapper, the tag and the column header are siblings of the wrapper. */
.rb-rows > :nth-child(even),
.rb-scroll > :nth-child(even) { background:var(--zebra); }

/* ---- legend name cluster ---- */
.rb-legcell { min-width:0; display:flex; align-items:center; gap:8px; }
.rb-legnames { min-width:0; display:flex; flex-direction:column; gap:1px; }
.rb-legchamp { font-weight:800; font-size:12.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The dotted rule is the resting advertisement that the name is its own target,
   separate from whatever the row around it does. It goes solid on hover. */
.rb-legchamp--link { cursor:pointer; text-decoration:underline dotted var(--text-faint);
  text-underline-offset:3px; text-decoration-thickness:1px; }
.rb-legchamp--link:hover { color:#fff;
  text-decoration:underline solid var(--c,var(--d1)); }
.rb-legepi { font:400 9px 'Space Mono',monospace; color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- stat cells ----
   The seam is the cell's own background layer, so cell one has no seam without
   needing an inline style. */
.rb-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.rb-stat { position:relative; min-width:0; padding:26px 15px 17px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--row); animation:rbIn .4s both; }
.rb-stat + .rb-stat {
  background:linear-gradient(180deg,var(--d1),var(--seam-mid) 50%,var(--d2)) left/1px 100% no-repeat,
             var(--row);
}
/* A full name at 26px does not fit a quarter width cell, Fitzgerald alone
   measures 135px, so text valued stats drop to 17px. */
.rb-stat-v { font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1.1;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-stat-v--name { font-size:17px; }
.rb-stat-sub { font:400 8.5px 'Space Mono',monospace; color:var(--text-ghost);
  margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-stat--link { cursor:pointer; }
.rb-stat--link:hover .rb-stat-v { color:#fff; }
.rb-stats--cdx .rb-stat-v { font-size:28px; line-height:1; }
.rb-stats--cdx .rb-stat-sub { font-size:9px; }

/* ---- art tiles ----
   aspect-ratio is safe here because the width is known from the grid track.
   Deck Detail's legend panel gets no aspect-ratio for exactly that reason. */
.rb-arttile {
  position:relative; aspect-ratio:744/1040;
  background-color:var(--bg); background-repeat:no-repeat;
  background-size:cover; background-position:center top;
  border:1px solid var(--border); border-left:3px solid var(--c,var(--type-other));
  overflow:hidden; cursor:pointer;
  transition:transform .15s,box-shadow .15s; animation:rbIn .4s both;
}
.rb-arttile:hover { transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--c,var(--type-other)),0 10px 24px -8px var(--c,var(--type-other)); }
.rb-arttile--mini { width:70px; flex:none; --scrim-start:55%; --scrim-a:.92; }
.rb-arttile--mini:hover { box-shadow:0 0 0 1px var(--c,var(--type-other)),0 8px 18px -6px var(--c,var(--type-other)); }
.rb-arttile--void {
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 6px; background:var(--tile-void); border-left-color:var(--border);
  cursor:default; font:700 7.5px 'Space Mono',monospace;
  color:var(--text-faint); letter-spacing:.1em;
}
.rb-arttile--void:hover { transform:none; box-shadow:none; }

.rb-scrim { position:absolute; inset:0;
  background:linear-gradient(180deg,transparent var(--scrim-start,55%),rgba(11,11,16,var(--scrim-a,.92))); }

.rb-cardname {
  position:absolute; left:0; right:0; bottom:var(--name-bottom,27px); z-index:2; padding:0 7px;
  font-weight:800; font-size:10px; line-height:1.2; color:var(--text);
  text-shadow:0 2px 8px #000;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rb-arttile--mini .rb-cardname { --name-bottom:26px; }
/* The one plate that keeps a literal alpha rather than --chip, because it sits
   over bright art at 10px and 11px and the extra 3 percent is cheap insurance. */
.rb-qty { position:absolute; right:5px; bottom:5px; z-index:2;
  font:700 11px 'Space Mono',monospace; color:#fff;
  background:rgba(11,11,16,.85); padding:2px 6px; }
.rb-arttile--mini .rb-qty { font-size:10px; }
.rb-typedot { position:absolute; left:5px; top:5px; z-index:2;
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--tc,var(--type-other)); box-shadow:0 0 7px var(--tc,var(--type-other)); }
.rb-typedot--key { position:static; width:7px; height:7px; box-shadow:none; flex:none; }

/* ---- bar charts ----
   Fill percentages resolve against the flex column's full height, so the
   tallest bars rise into the 26px top padding. Overflow stays visible. */
.rb-bars { display:flex; align-items:flex-end; }
.rb-bar { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; gap:5px; }
.rb-bar .fill { width:100%; height:var(--h); transform-origin:bottom; animation:rbGrowY .5s both; }
.rb-bar .top { font:700 9px 'Space Mono',monospace; color:var(--text-dim); }
.rb-bar .lab { font:700 8.5px 'Space Mono',monospace; color:var(--text-muted); }

/* ---- presence bar fill, green on every screen ---- */
.rb-pbar { background:var(--pos); box-shadow:0 0 6px var(--pos); }

/* ---- in panel not published notice, for source degraded panels ---- */
.rb-panel-empty { padding:26px 12px; text-align:center;
  font:700 9.5px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.14em; }
.rb-panel-empty-sub { display:block; margin-top:7px;
  font:400 9px 'Space Mono',monospace; color:var(--text-ghost); letter-spacing:.1em; }

/* ==========================================================================
   CARDS POOL BROWSER, cpb- prefix
   Filter rail, six domain PNG cells, advanced drawer, dual thumb range tracks.
   ========================================================================== */

/* Screen order is Fury, Calm, Mind, Body, Chaos, Order. That is neither the
   colour table order nor the rainbow order, and it is deliberate. */
.cpb-domsel { display:flex; gap:4px; align-items:center; background:var(--surface);
  border:1px solid var(--border); padding:5px 7px; }
/* Rendered as a native button, which rounds itself, so border-radius and
   appearance both have to be reset explicitly. */
.cpb-domcell {
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transform:skewX(-6deg);
  background:transparent; border:1px solid var(--border); border-radius:0;
  box-shadow:none; padding:0; appearance:none; -webkit-appearance:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.cpb-domcell:hover { border-color:var(--c); }
.cpb-domcell.on { background:var(--c-24); border-color:var(--c); box-shadow:0 0 12px var(--c-40); }
.cpb-domcell .rb-dicon { transform:skewX(6deg); filter:opacity(.7); transition:filter .15s; }
.cpb-domcell.on .rb-dicon { filter:none; }
.cpb-domcell--Fury  { --c:#e0443e; --c-24:#431D20; --c-40:rgba(224,68,62,.4); }
.cpb-domcell--Calm  { --c:#2fb56b; --c-24:#18382B; --c-40:rgba(47,181,107,.4); }
.cpb-domcell--Mind  { --c:#3a7fe8; --c-24:#1B2B49; --c-40:rgba(58,127,232,.4); }
.cpb-domcell--Body  { --c:#e88a2d; --c-24:#452E1C; --c-40:rgba(232,138,45,.4); }
.cpb-domcell--Chaos { --c:#8f56d9; --c-24:#2F2246; --c-40:rgba(143,86,217,.4); }
.cpb-domcell--Order { --c:#d9a520; --c-24:#413519; --c-40:rgba(217,165,32,.4); }

.cpb-drawer { border:1px solid var(--border); background:var(--row);
  margin-bottom:14px; animation:rbIn .3s both; }
.cpb-drawer-body { padding:18px 16px 6px; display:grid;
  grid-template-columns:minmax(170px,240px) minmax(0,1fr); gap:32px; }
.cpb-selcol { display:flex; flex-direction:column; gap:12px; }
.cpb-sel { display:flex; flex-direction:column; gap:5px; }
.cpb-sel-k { font:700 8px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.14em; }
.cpb-rangecol { display:flex; flex-direction:column; gap:18px; justify-content:center; }
.cpb-rangegroup { min-width:0; }
.cpb-rangehead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.cpb-range-label { font-weight:900; font-size:13px; letter-spacing:.03em;
  transform:skewX(-6deg); display:inline-block; }
.cpb-range-val { font:700 9px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.1em; }
.cpb-range-val.on { color:var(--gold); }
.cpb-bar { display:flex; align-items:center; gap:10px; cursor:pointer;
  user-select:none; -webkit-user-select:none; touch-action:none; margin-bottom:7px; }
.cpb-bar-tag { width:28px; flex:none; font:700 7.5px 'Space Mono',monospace;
  color:var(--text-faint); letter-spacing:.1em; }
/* This is the drag reference element. Measure this, never .cpb-bar, which
   includes the 28px tag and the 10px gap. */
.cpb-bar-track { flex:1; position:relative; height:12px; display:flex; align-items:center; }
.cpb-bar-base { width:100%; height:2px; background:var(--border); }
.cpb-bar-tick { position:absolute; top:50%; transform:translate(-50%,-50%);
  width:2px; height:11px; background:var(--text-faint); }
.cpb-bar-fill { position:absolute; height:2px; background:var(--rainbow); }
/* The transform order is load bearing. Rotating before translating centres
   along the rotated axis and pulls the diamond diagonally off the track. */
.cpb-bar-thumb { position:absolute; width:9px; height:9px; background:#fff;
  transform:translateX(-50%) rotate(45deg); box-shadow:0 0 8px rgba(255,255,255,.5); }
.cpb-drawer-foot { display:flex; justify-content:space-between; align-items:center; gap:16px;
  border-top:1px solid var(--border); margin-top:12px; padding:11px 16px; }
.cpb-active { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 9px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.12em; }
.cpb-active-v { color:var(--text); }
.cpb-foot-count { flex:none; font:700 9px 'Space Mono',monospace;
  color:var(--text-faint); letter-spacing:.12em; }
.cpb-foot-count .n { font-weight:900; font-size:13px; color:var(--gold); }

/* ==========================================================================
   CARD DETAIL, cdx- prefix
   Both --d1 and --d2 are set to the card's own hex on this screen, which is
   what makes every seam, bar fill and scrollbar thumb read as one colour.
   ========================================================================== */

.cdx-top { display:grid; grid-template-columns:400px 1px minmax(0,1fr); align-items:stretch; }
/* width plus aspect-ratio plus min-height, never height 100 percent, which
   would derive the width from the height and blow past the 400px track. */
.cdx-art {
  position:relative; width:100%; min-height:100%; aspect-ratio:744/1040;
  background-color:var(--bg); background-size:cover;
  background-position:center top; background-repeat:no-repeat;
  border-left:3px solid var(--d1);
  --scrim-start:58%; --scrim-a:.94;
}
.cdx-art--land { background-size:contain; background-position:center; --scrim-start:70%; }
.cdx-artbadge { position:absolute; top:10px; right:10px; display:flex; align-items:center;
  gap:6px; background:var(--chip); padding:4px 8px; }
.cdx-artbadge span { font:700 8px 'Space Mono',monospace; letter-spacing:.14em; color:var(--d1); }
.cdx-artcap { position:absolute; left:0; right:0; bottom:0; padding:0 15px 16px; }
.cdx-artname { font-weight:900; font-size:25px; letter-spacing:-.015em;
  margin-bottom:5px; text-shadow:0 2px 14px #000; }
.cdx-arttype { font:700 9.5px 'Space Mono',monospace; color:var(--text-dim);
  letter-spacing:.12em; text-shadow:0 2px 8px #000; }
.cdx-artcode { font:700 9px 'Space Mono',monospace; color:var(--text-muted);
  letter-spacing:.12em; margin-top:4px; white-space:nowrap; text-shadow:0 2px 8px #000; }
/* min-width 0 on the column itself, not only on its track. It is a flex
   container whose children hold long text, so the track alone is not enough. */
.cdx-right { display:flex; flex-direction:column; min-width:0; }
.cdx-mid { flex:1; display:flex; flex-direction:column; min-width:0; }

.cdx-legpanel { position:relative; background:var(--row); padding:26px 0 0; }
.cdx-legpanel .rb-colhead { grid-template-columns:26px minmax(90px,1fr) 44px 52px 56px;
  gap:6px; padding:0 13px 8px; }
.cdx-leghint { color:var(--text-faint); letter-spacing:.13em; }
.cdx-lenshead { color:var(--text-faint); }
/* The 18px gutter is what the COPIES PER DECK and PRESENCE tags below hang
   into. Without it they paint over the last scrolled row. */
.cdx-legscroll { max-height:250px; margin-bottom:18px; }
.cdx-legrow { display:grid; grid-template-columns:26px minmax(90px,1fr) 44px 52px 56px;
  align-items:center; gap:6px; padding:9px 13px; cursor:pointer;
  border:2px solid transparent; border-left:3px solid var(--c); background:transparent; }
/* Hover has to out-specify the shared zebra rule, which is also 0,2,0, so it
   sits after it in source order. The selected row is declared after this one
   for the same reason, its plate must survive being hovered. */
.cdx-legrow:hover { background:var(--row-hi);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), -6px 0 16px -10px var(--c); }
/* Hovering the name hands the row back its resting look, so the two targets
   never light up together and claim the same click. */
.cdx-legrow:not(.on):has(.rb-legchamp--link:hover) { background:transparent; box-shadow:none; }
.cdx-legrow:not(.on):has(.rb-legchamp--link:hover) .cdx-lens { color:var(--text-ghost); }
/* Declared after the shared zebra rule, both are specificity 0,2,0 and source
   order decides which one paints the selected row. */
.cdx-legrow.on { border-color:transparent; border-left-color:var(--c);
  background:linear-gradient(var(--row-hi),var(--row-hi)) padding-box, var(--rainbow) border-box; }
.cdx-legrow.on .rb-legchamp { font-weight:900; color:#fff; }
.cdx-legrow.on,
.cdx-legrow.on .cdx-lens { cursor:default; }

/* Lens reticle. Every mark reads currentColor, so the four states are one
   colour swap. The ::after ticks sit outside the 11px box on purpose, the
   26px track is sized for them. */
.cdx-lens { position:relative; width:11px; height:11px; margin-left:3px;
  color:var(--text-ghost); border:1.5px solid currentColor; }
.cdx-lens::before { content:''; position:absolute; inset:2px; background:currentColor; }
.cdx-lens::after { content:''; position:absolute; inset:-4px;
  background:
    linear-gradient(currentColor,currentColor) 50%   0    /1.5px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 50%   100% /1.5px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 0     50%  /3px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 100%  50%  /3px 1.5px no-repeat; }
.cdx-legrow:hover .cdx-lens { color:var(--c); }
.cdx-lens:hover { color:#fff; }
.cdx-legrow.on .cdx-lens { color:#fff; }
.cdx-legrow.on .cdx-lens::before { inset:1.5px; }
.cdx-legrow .n { text-align:right; font:700 11.5px 'Space Mono',monospace; color:var(--text); }
.cdx-legrow .w,
.cdx-legrow .d { text-align:right; font-weight:900; font-size:13.5px; }

.cdx-charts { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); }
.cdx-chart { position:relative; padding:26px 16px 14px; min-width:0; }
.cdx-chart--copies .rb-bars { gap:10px; height:96px; }
.cdx-chart--pres   .rb-bars { gap:9px;  height:108px; }
.cdx-chart--pres   .rb-bar .top { font-size:8.5px; }
.cdx-slope { text-align:right; font:700 8.5px 'Space Mono',monospace;
  letter-spacing:.11em; margin-bottom:4px; }

.cdx-vs { position:relative; padding:28px 18px 20px; }
.cdx-vsgrid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.cdx-vsgrid > .rb-panel-empty { grid-column:1 / -1; }
/* Composed on .rb-arttile, which already supplies the 744/1040 ratio, the art
   sizing, the --c left accent and the hover lift. This rule only guards the
   grid track, the tile itself needs no other override. */
.cdx-vscard { min-width:0; }
/* This scrim starts tinted rather than transparent, so it keeps its own rule
   instead of reading the parameterised .rb-scrim. */
.cdx-vscard-scrim { position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,16,.15) 30%,rgba(11,11,16,.92)); }
.cdx-vsdom { position:absolute; top:9px; right:9px; font:700 7.5px 'Space Mono',monospace;
  letter-spacing:.13em; background:var(--chip); padding:3px 7px; color:var(--c); }
.cdx-vscap { position:absolute; left:0; right:0; bottom:0; padding:11px 12px 12px; }
.cdx-vsname { font-weight:800; font-size:12.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 10px #000; margin-bottom:9px; }
.cdx-vsfoot { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.cdx-vsk { font:700 7.5px 'Space Mono',monospace; color:var(--text-muted); letter-spacing:.13em; }
.cdx-vswin { font-weight:900; font-size:24px; line-height:1;
  letter-spacing:-.02em; text-shadow:0 2px 10px #000; }
.cdx-vsgames { font:700 14px 'Space Mono',monospace; color:var(--text-dim);
  line-height:1.1; text-shadow:0 2px 10px #000; }

.cdx-bottom { display:grid; grid-template-columns:400px 1px minmax(0,1fr) 1px minmax(0,1fr); }
.cdx-cell { position:relative; padding:28px 0 6px; min-width:0; }
/* Default column header track list for any bottom cell, so a cell that carries
   only .cdx-cell (the Home movers panels) still lines up. .cdx-syn overrides
   it below at equal specificity, on source order. */
.cdx-cell > .rb-colhead { grid-template-columns:minmax(0,1fr) 46px 56px;
  gap:8px; letter-spacing:.13em; padding:0 18px 8px; }
.cdx-arch .rb-colhead { grid-template-columns:minmax(0,1fr) 46px 56px;
  gap:8px; letter-spacing:.13em; padding:0 18px 8px; }
.cdx-archrow { display:grid; grid-template-columns:minmax(0,1fr) 46px 56px; gap:8px;
  align-items:center; padding:8px 18px 9px; cursor:pointer; background:transparent; }
.cdx-archrow .a { font-weight:800; font-size:12.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdx-archrow .n { text-align:right; font:400 11px 'Space Mono',monospace; color:var(--text-muted); }
.cdx-archrow .w { text-align:right; font-weight:900; font-size:12.5px; }
/* Zero gap on the synergy tables is deliberate, the two numeric tracks are
   already wide enough to separate themselves. */
.cdx-syn .rb-colhead { grid-template-columns:minmax(0,1fr) 64px 68px;
  gap:0; letter-spacing:.13em; padding:0 18px 8px; }
.cdx-synrow { display:grid; grid-template-columns:minmax(0,1fr) 64px 68px;
  align-items:center; padding:9px 18px; cursor:pointer; background:transparent; }
.cdx-synrow .c { font-weight:800; font-size:12.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdx-synrow .n { text-align:right; font:400 11px 'Space Mono',monospace; color:var(--text-muted); }
.cdx-synrow .d { text-align:right; font-weight:900; font-size:12.5px; }

/* ==========================================================================
   DECKS LIST, rbd- prefix
   Also serves #/pilot/<name> and #/archetype/<name> verbatim.
   ========================================================================== */

/* One class on the header AND every row so the two can never drift apart. */
.rbd-grid { display:grid;
  grid-template-columns:minmax(150px,1.3fr) minmax(140px,1fr) 92px 104px minmax(150px,1.1fr) 76px;
  gap:10px; }
/* The header carries no left border while a row carries 3px, so row content
   sits 3px right of its column header. That is the design, do not pad it out. */
.rbd-head { padding:0 18px 9px; }
.rbd-row { align-items:center; padding:10px 18px; cursor:pointer;
  border-left:3px solid var(--c,var(--flat)); background:transparent; transition:background .12s; }
.rbd-row:hover { background:var(--row-hi); }
/* The tracks have hard 150px and 140px floors, so min-width 0 has to go on the
   grid items instead or the ellipsis never engages. */
.rbd-deck { min-width:0; display:flex; flex-direction:column; gap:2px; }
.rbd-deck-name { font-weight:800; font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbd-deck-pilot { font:400 9px 'Space Mono',monospace; color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbd-leg { min-width:0; display:flex; align-items:center; gap:7px; }
.rbd-leg-name { min-width:0; font-weight:700; font-size:12px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbd-place { text-align:right; font-weight:900; font-size:13.5px; }
.rbd-place--top3 { color:var(--gold); }
.rbd-place--cut  { color:var(--pos); }
.rbd-place--rest { color:var(--text-dim); }
.rbd-rec { text-align:right; font:700 12px 'Space Mono',monospace; color:var(--text-dim); }
/* Right aligned plus ellipsis truncates the tail, so a long event name loses
   its city. The JS puts the full string in a title attribute. */
.rbd-event { text-align:right; min-width:0; display:flex; justify-content:flex-end; }
.rbd-event-name { min-width:0; font-size:11.5px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Three nested links inside a row point somewhere OTHER than the deck, so the
   underline at rest is what tells them apart from the plain text beside them. */
/* Banned cards survive only inside a stored decklist. The tile is dimmed and
   carries no cursor, because there is nothing to click through to. */
.rb-arttile--banned { cursor:default; filter:grayscale(.65) brightness(.72); }
.rb-arttile--banned:hover { transform:none; box-shadow:none; }
.rb-banned {
  position:absolute; top:6px; left:6px; z-index:3;
  background:var(--neg); color:#12060a; padding:1px 5px;
  font:700 7.5px 'Space Mono',monospace; letter-spacing:.12em;
}

.rbd-more { display:flex; align-items:center; gap:14px; justify-content:flex-end;
  padding:12px 18px 2px; border-top:1px solid var(--surface-3); margin-top:8px; }
.rbd-more-n { font:700 8.5px 'Space Mono',monospace; color:var(--text-faint);
  letter-spacing:.14em; }

.rbd-link { cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--border-2); text-underline-offset:2px;
  text-decoration-thickness:1px; }
.rbd-link:hover { color:#fff; text-decoration-color:currentColor; }

/* The row as a whole also opens the deck, but with those three links competing
   for the click there was no obvious target for it. This is that target. */
.rbd-go {
  justify-self:end; display:flex; align-items:center; height:24px; padding:0 10px;
  border:1px solid var(--border); background:var(--surface);
  font:700 8.5px 'Space Mono',monospace; letter-spacing:.12em;
  color:var(--text-muted); cursor:pointer; white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.rbd-row:hover .rbd-go { color:var(--text); border-color:var(--border-2); }
.rbd-go:hover { color:var(--bg); background:#fff; border-color:#fff; }

/* ==========================================================================
   DECK DETAIL, dd- prefix
   Nine hanging tags on one page. The block must never clip its overflow and
   the four stat tags overhang the outer edge by 9px on purpose.
   ========================================================================== */

.dd-top { display:grid; grid-template-columns:300px 1px minmax(0,1fr); align-items:stretch; }
/* No aspect-ratio here. Combined with height 100 percent it derived the width
   from the height, made the art 340px wide inside the 300px track, and painted
   over the seam and the stat cells. The column drives the box, contain
   letterboxes the art. */
.dd-legend-art {
  position:relative; width:100%; height:100%; min-width:0; overflow:hidden; cursor:pointer;
  background-color:var(--bg); background-repeat:no-repeat;
  background-position:center top; background-size:contain;
  border-left:3px solid var(--d1);
  --scrim-start:56%; --scrim-a:.95;
}
.dd-legend-doms { position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:4px; }
.dd-legend-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 15px 16px; }
.dd-legend-kicker { font:700 9px 'Space Mono',monospace; color:var(--d1);
  letter-spacing:.14em; margin-bottom:6px; text-shadow:0 2px 8px #000; }
.dd-legend-champ { font-weight:900; font-size:22px; letter-spacing:-.015em;
  margin-bottom:4px; text-shadow:0 2px 14px #000; }
.dd-legend-epithet { font:700 9.5px 'Space Mono',monospace; color:var(--text-dim);
  letter-spacing:.12em; text-shadow:0 2px 8px #000; }
.dd-right { display:flex; flex-direction:column; min-width:0; }
.dd-mid { display:grid; grid-template-columns:274px 1px minmax(0,1fr); flex:1; }
/* Three 70px tiles plus two 12px gaps is 234px inside the 238px of content
   width here, so the row has 4px of slack. Max observed is 2 runes plus 1
   champion, which fits. */
.dd-runes { position:relative; padding:26px 18px 18px; }
.dd-runes-row { display:flex; gap:12px; flex-wrap:wrap; }
/* The 18px bottom padding is what the BATTLEFIELDS tag below hangs into. */
.dd-mu { position:relative; padding:28px 0 18px; min-width:0; }
.dd-mu-head { grid-template-columns:minmax(0,1fr) 46px 60px 50px; gap:7px; padding:0 12px 9px; }
.dd-mu-scroll { max-height:210px; --scroll-thumb:var(--d2); }
.dd-mu-row { display:grid; grid-template-columns:minmax(0,1fr) 46px 60px 50px; gap:7px;
  align-items:center; padding:9px 12px; border-left:3px solid var(--c,var(--type-other));
  cursor:pointer; }
.dd-mu-row:hover { background:var(--surface-2); }
.dd-mu-row .g   { text-align:right; font:400 11.5px 'Space Mono',monospace; color:var(--text-muted); }
.dd-mu-row .rec { text-align:right; font:700 12px 'Space Mono',monospace; color:var(--text-dim); }
.dd-mu-row .w   { text-align:right; font-weight:900; font-size:13px; }

.dd-bf { position:relative; padding:26px 18px 16px; }
.dd-bf-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dd-bf-grid > .rb-panel-empty { grid-column:1 / -1; }
/* Landscape strip. The left border reads --d1 and the kicker prints the set
   label, because every battlefield in the DB is Colorless and a domain kicker
   would print COLORLESS on all three tiles. */
.dd-bf-tile {
  position:relative; height:52px; overflow:hidden; cursor:pointer;
  background-color:var(--field); background-repeat:no-repeat;
  background-position:center; background-size:contain;
  border:1px solid var(--border); border-left:3px solid var(--d1);
  display:flex; flex-direction:column; justify-content:center; padding:7px 10px;
  transition:box-shadow .15s;
}
.dd-bf-tile:hover { box-shadow:0 0 0 1px var(--d1),0 8px 18px -6px var(--d1); }
/* 90deg rather than 180deg, so the text side darkens and the art stays legible
   on the right. This is why it is not the shared .rb-scrim. */
.dd-bf-tile::before { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,11,16,.94),rgba(11,11,16,.7) 58%,transparent); }
.dd-bf-kicker { position:relative; z-index:1; font:700 7px 'Space Mono',monospace;
  color:var(--d1); letter-spacing:.13em; margin-bottom:3px; }
.dd-bf-name { position:relative; z-index:1; font-weight:800; font-size:11px;
  color:var(--text); text-shadow:0 2px 8px #000; line-height:1.2; }

.dd-list { position:relative; padding:28px 18px 20px; }
.dd-list--side { padding-bottom:22px; }
.dd-grid7 { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
/* All three scrims on this screen differ and the difference is visible.
   Legend panel 56 and .95, mini tile 55 and .92, deck card 52 and .93. */
.dd-card { --scrim-start:52%; --scrim-a:.93; }

/* ==========================================================================
   LEGEND DETAIL HERO PANEL, lgh- prefix
   One container over a domain gradient. Both grids share the same five tracks,
   so the 215px column reads as one continuous strip down the left edge: empty
   in the stats row, the legend card in the panels row.
   1180px is a floor, not a target. This panel scrolls horizontally by design.
   ========================================================================== */
.lgh {
  position:relative; margin-top:14px; min-width:1180px;
  border-left:1px solid var(--d1,#e0443e);
  border-right:1px solid var(--d2,#3a7fe8);
  background:linear-gradient(90deg,var(--d1,#e0443e),var(--tab-mid) 50%,var(--d2,#3a7fe8));
  animation:rbIn .45s both;
}

/* the glyph watermark. pointer-events none or it swallows every panel click */
.lgh-back { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lgh-glyph {
  position:absolute; width:96px; height:96px; background:rgba(0,0,0,.3);
  -webkit-mask:var(--ic) center/contain no-repeat;
  mask:var(--ic) center/contain no-repeat;
}
.lgh-glyph--sm { width:40px; height:40px; background:rgba(0,0,0,.34); }

/* border-color is the fallback for renderers that drop border-image, which
   would otherwise paint these two rules white. */
.lgh-row {
  position:relative; display:grid; gap:1px;
  grid-template-columns:215px repeat(4,minmax(0,1fr));
  border-style:solid; border-color:var(--seam-mid);
  border-image:linear-gradient(90deg,var(--d1,#e0443e),var(--tab-mid) 50%,var(--d2,#3a7fe8)) 1;
}
.lgh-row--stats { border-width:2px 0; }
.lgh-row--panels {
  border-width:0 0 2px; grid-template-rows:150px 150px;
  grid-template-areas:
    'lg arch pilot up   bestmu'
    'lg most most  down worstmu';
}

/* ---- stats row ---- */
.lgh-stat { position:relative; min-width:0; background:rgba(10,10,16,.34); padding:24px 16px 14px; }
.lgh-stat-v { font-weight:900; font-size:23px; letter-spacing:-.02em; }
/* the trailing cell is deliberately blank, it only carries the row's fill */
.lgh-stat--void { padding:0; min-height:64px; }
.lgh-beta { position:absolute; top:14px; right:16px; z-index:4; }

/* ---- panels row ---- */
.lgh-lg {
  grid-area:lg; position:relative; min-height:0; aspect-ratio:744/1040;
  background-color:var(--row); background-size:cover;
  background-repeat:no-repeat; background-position:center top;
}
.lgh-lg-fade { position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 80%,rgba(14,14,20,.92)); }
.lgh-lg-cap { position:absolute; bottom:12px; left:14px; right:14px; }
.lgh-lg-chip { display:inline-block; font:700 9px 'Space Mono',monospace;
  letter-spacing:.14em; background:var(--chip); padding:2px 7px; margin-bottom:4px;
  color:var(--d1,#e0443e); }
.lgh-lg-nm { font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1; color:#fff; }

/* min-width 0 because 1fr is minmax(auto,1fr) and one long pilot name would
   otherwise set a min-content floor and blow the five tracks apart. */
/* overflow stays VISIBLE here. Every tag hangs 11px above its own top edge, so
   clipping the panel cuts the top half off all seven of them. Long content is
   clipped on the inner list instead, which has no overhang to lose. */
.lgh-panel { position:relative; min-width:0; background:rgba(8,8,12,.62);
  display:flex; flex-direction:column; }
.lgh-panel--rows  { padding:22px 12px 12px; }
.lgh-panel--strip { padding:15px 10px 8px; }
.lgh-arch{grid-area:arch} .lgh-pilot{grid-area:pilot} .lgh-up{grid-area:up}
.lgh-bestmu{grid-area:bestmu} .lgh-most{grid-area:most} .lgh-down{grid-area:down}
.lgh-worstmu{grid-area:worstmu}

/* alternating shading, never a divider line per row */
.lgh-rows { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.lgh-r { display:flex; align-items:center; gap:8px; padding:2px 4px; }
.lgh-r:nth-child(even) { background:rgba(255,255,255,.025); }
.lgh-r--link { cursor:pointer; }
.lgh-r--link:hover .lgh-r-n { color:#fff; }
.lgh-r-n { flex:1; min-width:0; font-weight:800; font-size:12.5px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lgh-r-g { font:700 9.5px 'Space Mono',monospace; color:var(--text-faint); flex:none; }
.lgh-r-w { font-weight:800; font-size:12px; width:46px; text-align:right; flex:none; }

/* the strips fill their 150px row rather than holding a card aspect ratio */
.lgh-strip { display:flex; gap:6px; align-items:stretch; flex:1; min-height:0; }
.lgh-tile { flex:1; min-width:0; height:100%; position:relative; overflow:hidden;
  cursor:pointer; border-left:2px solid var(--c,var(--flat));
  background-size:cover; background-position:center top;
  transition:box-shadow .15s; }
.lgh-tile:hover { box-shadow:inset 0 0 0 1px var(--c,var(--flat)); }
.lgh-cap { position:absolute; bottom:0; left:0; right:0; text-align:center;
  background:rgba(11,11,16,.85); padding:2px 0;
  font:700 9px 'Space Mono',monospace; color:var(--text-dim); }
.lgh-cap > span { display:block; }
.lgh-cap-n { font-size:7px; color:var(--text-dim); white-space:nowrap; overflow:hidden; }
.lgh-none { align-self:center; margin:auto 0; font:700 9px 'Space Mono',monospace;
  color:var(--text-ghost); letter-spacing:.1em; }

/* ==========================================================================
   LEGEND DETAIL CARDS BOX, lgc- prefix
   ========================================================================== */

/* The bar carries zero bottom padding, the tab carries border-bottom none and
   margin-bottom -1px. Break any one of the three and a 1px line reappears
   under the active tab. */
.lgc-bar { display:flex; align-items:stretch; gap:4px; flex-wrap:wrap;
  padding:12px 16px 0; border-bottom:1px solid var(--surface-3); }
/* Tab height is derived, not declared. align-items stretch sizes every bar item
   to the tallest, which is the sort group. Change the select padding and the
   tab height moves with it. */
.lgc-tab {
  transform:skewX(-12deg); min-width:110px; padding:11px 22px; margin-bottom:-1px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-bottom:none;
  background:var(--tab-idle); color:var(--text-muted);
  font-weight:900; font-size:13px; letter-spacing:.06em; cursor:pointer;
  transition:color .15s,border-color .15s;
}
.lgc-tab:not(.on):hover { color:var(--text); border-color:var(--border-2); }
/* The skew widens the footprint about 4.8px per side, more than the 4px gap, so
   the active tab has to be raised or its neighbours paint over its corners. */
.lgc-tab.on { position:relative; z-index:1; border-color:transparent; color:#fff;
  background:linear-gradient(90deg,var(--d1),var(--tab-mid) 50%,var(--d2)); }
.lgc-tab-in { transform:skewX(12deg); display:flex; align-items:center; gap:9px; }
.lgc-count { font:700 10px 'Space Mono',monospace; padding:1px 7px;
  background:var(--border); color:var(--text-dim); }
.lgc-tab.on .lgc-count { background:rgba(0,0,0,.4); color:#fff; }
.lgc-title { display:flex; align-items:center; margin-left:16px; padding-bottom:12px;
  font-weight:900; font-size:15px; letter-spacing:-.01em;
  transform:skewX(-6deg); white-space:nowrap; }
.lgc-sort { margin-left:auto; display:flex; align-items:center; gap:9px; padding-bottom:12px; }
.lgc-sort-k { font:700 9px 'Space Mono',monospace; color:var(--text-faint); letter-spacing:.14em; }
.lgc-grid { padding:16px; }

/* ==========================================================================
   HOME, #/
   Two new classes only. Everything else is a shared primitive or a reused
   Card Detail and Decks row shape. Declared after .cdx-bottom because both
   are specificity 0,1,0 and source order decides the track list.
   ========================================================================== */

.home-2col { grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); }
.home-3col { grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr); }

/* ==========================================================================
   RESPONSIVE
   The design is specified at 1180px. Below 900px every vertical seam has to be
   re-pointed to the horizontal gradient or it renders as a zero height box.
   ========================================================================== */

@media (max-width:900px) {
  .rb-seam-v { height:1px; background:linear-gradient(90deg,var(--d1),var(--seam-mid) 50%,var(--d2)); }
  .dd-top, .dd-mid, .cdx-top, .cdx-charts, .cdx-bottom,
  .home-2col, .home-3col { grid-template-columns:minmax(0,1fr); }
  .dd-legend-art { height:300px; }
  .rb-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Cell three starts a new row, so its inherited left seam would float at the
     row start with nothing to divide. */
  .rb-stats .rb-stat:nth-child(3) { background:var(--row); }
  .dd-grid7 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cdx-vsgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cpb-drawer-body { grid-template-columns:minmax(0,1fr); gap:20px; }
}