/* ============================================================
   COMP DETAIL — concept-faithful (Lord of Mysteries arcane direction)
   - Sigil watermark VISIBLE behind content (atmospheric, not foreground)
   - Celestial scatter ambient
   - Sigil dividers between major sections (arcane geometry)
   - Cost-color glow rings on champion hexes
   - Augments: horizontal row, hex above, name below
   - Item Priority: clustered tight grid per carry
   - NO SaaS card chrome on inner sections
   ============================================================ */

.comp-detail-panel {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-8);
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.1) 0%,
      transparent 65%
    ),
    radial-gradient(ellipse 80% 50% at 0% 100%,
      oklch(50% 0.18 30 / 0.08) 0%,
      transparent 55%
    ),
    var(--color-bg);
  margin-left: 3px;
  isolation: isolate;
  overflow: hidden;
}

/* Tier-color hairline at top — chapter mark */
.comp-detail-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7) 20%,
    oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7) 80%,
    transparent
  );
  box-shadow: 0 0 10px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5);
  z-index: 3;
}

/* ============================================================
   ATMOSPHERE LAYER — sigil watermark + celestial scatter
   Sits behind content but is VISIBLE (z-index 0, content z-index 1+)
   ============================================================ */
.comp-detail-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.comp-detail-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comp-detail-stars svg {
  position: absolute;
  animation: detail-star-twinkle var(--star-dur, 4s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
  opacity: var(--star-opacity, 0.5);
}

@keyframes detail-star-twinkle {
  0%, 100% { opacity: var(--star-opacity, 0.5); transform: scale(1); }
  50%      { opacity: calc(var(--star-opacity, 0.5) * 0.3); transform: scale(0.8); }
}

/* Direct children sit above atmosphere — but DO NOT override absolutely
   positioned children (close button) */
.comp-detail-panel > *:not(.comp-detail-atmosphere):not(.comp-detail-close) {
  position: relative;
  z-index: 1;
}

/* ---- Close ---- */
.comp-detail-close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid oklch(40% 0.06 60 / 0.5);
  background: oklch(12% 0.02 295 / 0.6);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: all var(--dur-fast) var(--ease-out-quart);
  z-index: 5;
}

.comp-detail-close:hover {
  border-color: var(--color-amber);
  color: var(--color-text);
  box-shadow: 0 0 14px oklch(75% 0.18 75 / 0.4);
}

.comp-detail-close:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

/* ============================================================
   SIGIL DIVIDERS — arcane separator between major sections
   (inside main column now, not the panel root)
   ============================================================ */
.comp-detail-main > .sigil-divider {
  margin: var(--space-4) 0 var(--space-3);
  opacity: 0.85;
  filter: drop-shadow(0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.3));
}

.comp-detail-main > .sigil-divider svg {
  height: 18px;
  max-width: 460px;
}

/* ============================================================
   GRID
   ============================================================ */
.comp-detail-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-8);
  align-items: stretch;
  margin-bottom: var(--space-2);
}

@media (max-width: 900px) {
  .comp-detail-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   SIDEBAR — arcane character page, CENTERED layout
   ============================================================ */
.comp-detail-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-8);
  position: relative;
  /* Bold gradient frame + dark backdrop — makes the sidebar a distinct,
     luminous panel that pops against the surrounding atmosphere. */
  background:
    radial-gradient(ellipse 80% 45% at center 12%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.22) 0%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.08) 30%,
      transparent 60%
    ),
    linear-gradient(180deg,
      oklch(13% 0.03 295 / 0.85) 0%,
      oklch(10% 0.025 295 / 0.55) 100%
    );
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.22);
  box-shadow:
    inset 0 1px 0 oklch(from var(--tier-color, var(--color-amber)) l c h / 0.4),
    0 0 32px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.18);
}

.comp-detail-sidebar > * {
  position: relative;
  z-index: 1;
}

/* Centered showcase: sigil halo + carry hex perfectly overlapping */
.sidebar-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 0 auto var(--space-2);
}

/* Sigil halo — centered behind carry */
.sidebar-carry-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--tier-color, var(--color-amber));
  opacity: 0.7;
  filter: drop-shadow(0 0 22px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6));
}

.sidebar-carry-halo .tier-sigil-svg {
  width: 100%;
  height: 100%;
  animation: sidebar-halo-rotate 80s linear infinite;
}

@keyframes sidebar-halo-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sidebar-showcase > .detail-unit {
  position: relative;
  z-index: 1;
}

/* Sidebar carry — HEX with tier-color gradient + tier glow */
.sidebar-showcase .champ-hex {
  background: linear-gradient(
    155deg,
    var(--tier-color, var(--color-amber)),
    oklch(from var(--tier-color, var(--color-amber)) calc(l - 0.18) c h)
  );
  filter:
    drop-shadow(0 2px 6px oklch(0% 0 0 / 0.55))
    drop-shadow(0 0 22px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.85));
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.04em;
  color: var(--tier-color, var(--color-amber));
  text-shadow:
    0 0 16px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6),
    0 0 36px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.25);
  line-height: 1.05;
  margin-top: var(--space-1);
}

.sidebar-carry-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-condition {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.95);
  border: 1px dashed oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5);
  padding: 4px 8px;
  margin-top: 2px;
  align-self: flex-start;
}

.sidebar-augments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  width: 100%;
}

.sidebar-augments .augment-list {
  justify-content: center;
}

/* Augment Priority — peer section to .sidebar-augments, identical layout */
.sidebar-augment-priority {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  width: 100%;
}

/* ============================================================
   MAIN AREA
   ============================================================ */
.comp-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

/* Active comp tab pill */
.comp-detail-tab-row {
  display: flex;
}

.comp-detail-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 18px;
  background: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.1);
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.65);
  position: relative;
  box-shadow:
    0 0 16px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.35),
    inset 0 1px 0 oklch(from var(--tier-color, var(--color-amber)) l c h / 0.25);
}

.comp-detail-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tier-color, var(--color-amber));
  box-shadow: 0 0 8px var(--tier-color, var(--color-amber));
}

.comp-detail-tab-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(from var(--tier-color, var(--color-amber)) calc(l + 0.08) c h);
  text-shadow: 0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5);
}

/* ---- 3 strips row: Early (1fr) | Item Priority (1fr) | Flex (smaller) ---- */
.comp-detail-strips-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .comp-detail-strips-row { grid-template-columns: 1fr 1fr; }
  .comp-detail-strips-row > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .comp-detail-strips-row { grid-template-columns: 1fr; }
}

.detail-strip-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.04);
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.15);
  border-radius: 4px;
}

/* Hex strips inside Early Units / Flex Spots — center the hex row */
.detail-strip-section .detail-hex-strip {
  justify-content: center;
}

/* ---- Section ribbon — banner-style header (NEW shared component) ----
   - Default celestial styling: thin tier-color rule + label inline
   - Themes (e.g. grimoire) override to render proper banner with folded tails
*/
.section-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.section-ribbon-tail {
  display: none; /* celestial: hidden; grimoire: shown as folded tails */
}

.section-ribbon-body {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: oklch(from var(--tier-color, var(--color-amber)) calc(l + 0.04) c h);
  text-transform: uppercase;
  position: relative;
  padding-left: 16px;
  text-shadow: 0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.35);
  white-space: nowrap;
}

.section-ribbon-body::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.85);
  font-size: 0.95em;
  text-shadow: 0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6);
}

.section-ribbon.prominent .section-ribbon-body {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  color: oklch(from var(--tier-color, var(--color-amber)) calc(l + 0.1) c h);
}

/* ============================================================
   CHAMPION HEX (shared shape)
   With cost-color outer glow ring (gives weight, matches reference)
   ============================================================ */
.detail-hex-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.detail-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.detail-unit-sm { width: 44px; }
.detail-unit-md { width: 52px; }
.detail-unit-lg { width: 64px; }
.detail-unit-xl { width: 100px; }

.detail-unit-name {
  font-size: 9px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Carry hex — tier-color glow */
.detail-unit-carry .champ-hex {
  filter:
    drop-shadow(0 1px 3px oklch(0% 0 0 / 0.5))
    drop-shadow(0 0 18px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7));
}

.champ-hex {
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(
    155deg,
    var(--cost-color, var(--cost-1-color)),
    oklch(from var(--cost-color, var(--cost-1-color)) calc(l - 0.15) c h)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Cost-color outer glow ring for ALL hexes — weight + arcane feel */
  filter:
    drop-shadow(0 1px 3px oklch(0% 0 0 / 0.5))
    drop-shadow(0 0 6px oklch(from var(--cost-color, var(--cost-1-color)) calc(l + 0.05) c h / 0.5));
}

.detail-unit-sm .champ-hex { width: 36px; height: 42px; }
.detail-unit-md .champ-hex { width: 46px; height: 52px; }
.detail-unit-lg .champ-hex { width: 58px; height: 66px; }
.detail-unit-xl .champ-hex { width: 100px; height: 114px; }

.champ-hex img {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--color-surface);
}

.champ-hex.fallback {
  font-family: var(--font-display);
  font-size: 11px;
  color: oklch(95% 0.02 75);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.7);
}

.detail-unit-xl .champ-hex.fallback { font-size: 22px; }

.champ-hex[data-cost="1"] { --cost-color: var(--cost-1-color); }
.champ-hex[data-cost="2"] { --cost-color: var(--cost-2-color); }
.champ-hex[data-cost="3"] { --cost-color: var(--cost-3-color); }
.champ-hex[data-cost="4"] { --cost-color: var(--cost-4-color); }
.champ-hex[data-cost="5"] {
  --cost-color: var(--cost-5-color);
  filter:
    drop-shadow(0 1px 3px oklch(0% 0 0 / 0.5))
    drop-shadow(0 0 10px oklch(85% 0.14 85 / 0.7));
}

/* ============================================================
   ITEM HEX — used in Item Priority clusters
   ============================================================ */
/* Blocks side-by-side (one row), one block per carry */
.item-priority-blocks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.item-priority-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Items strip — total width fits within holder width */
.item-priority-items {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: -16px;
  position: relative;
  z-index: 2;
}

/* Items sized so 3 of them fit within holder hex width (~46px md → ~15px each) */
.item-priority-items .item-hex {
  width: 18px;
  height: 18px;
}

.item-hex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-hex {
  position: relative;
  width: 26px;
  height: 26px;
  background: oklch(20% 0.03 60);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 1px 2px oklch(0% 0 0 / 0.5))
    drop-shadow(0 0 3px oklch(75% 0.18 75 / 0.2));
}

.item-hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.item-hex.fallback {
  font-size: 8px;
  font-weight: 700;
  color: oklch(85% 0.05 80);
  text-shadow: 0 1px 1px oklch(0% 0 0 / 0.6);
  background: linear-gradient(155deg, oklch(35% 0.06 60), oklch(22% 0.04 60));
}

/* ============================================================
   AUGMENT THUMB GRID — natural-shape, image-only (no hex clip)
   Compact 4-per-row grid, used in sidebar "Augments" section.
   ============================================================ */
.augment-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.augment-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: oklch(20% 0.04 270);
  border: 1px solid oklch(from var(--color-amber) l c h / 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: help;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}

.augment-thumb:hover {
  border-color: var(--color-amber);
  transform: translateY(-1px);
}

.augment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.augment-thumb.fallback {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-champagne);
  text-shadow: 0 1px 1px oklch(0% 0 0 / 0.6);
  background: linear-gradient(155deg, oklch(50% 0.14 75), oklch(30% 0.08 60));
}

/* ============================================================
   AUGMENT PRIORITY — categorical pill row with chevrons
   Categories: emblem / econ / items / combat / utility / tempo / portal.
   Pills are colored by category for fast scan.
   ============================================================ */
.augment-priority-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.augment-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: oklch(18% 0.03 270);
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--color-champagne);
  white-space: nowrap;
  text-transform: uppercase;
}

.augment-priority-icon {
  display: inline-flex;
  width: 16px; height: 16px;
  align-items: center;
  justify-content: center;
}

.augment-priority-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.augment-priority-arrow {
  font-size: 0.6rem;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7);
  user-select: none;
}

/* Per-category accent — soft tinted pill bg */
.augment-priority-pill.cat-emblem  { background: oklch(28% 0.08 280); border-color: oklch(60% 0.16 280); }
.augment-priority-pill.cat-econ    { background: oklch(28% 0.08 90);  border-color: oklch(70% 0.18 90); }
.augment-priority-pill.cat-items   { background: oklch(28% 0.08 220); border-color: oklch(60% 0.14 220); }
.augment-priority-pill.cat-combat  { background: oklch(28% 0.1 25);   border-color: oklch(60% 0.2 25); }
.augment-priority-pill.cat-utility { background: oklch(28% 0.06 160); border-color: oklch(60% 0.12 160); }
.augment-priority-pill.cat-tempo   { background: oklch(28% 0.08 180); border-color: oklch(60% 0.14 180); }
.augment-priority-pill.cat-portal  { background: oklch(28% 0.1 320);  border-color: oklch(60% 0.16 320); }

/* .detail-strip-section: layout only at the shared level — themes can
   add recessed-card chrome (grimoire). Celestial keeps it clean. */

/* ============================================================
   TIER ROW DIVIDER — explicit seam element between badge and comps
   Default celestial: tier-color glow rule, vertical
   ============================================================ */
.tier-row-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6) 25%,
    oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.4),
    -1px 0 0 oklch(from var(--tier-color, var(--color-amber)) l c h / 0.2),
    1px 0 0 oklch(from var(--tier-color, var(--color-amber)) l c h / 0.2);
}

/* ============================================================
   POSITIONING — DOMINANT centerpiece, arcane backdrop
   ============================================================ */
.comp-detail-positioning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.positioning-board {
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  /* No solid card fill — let the panel atmosphere show through.
     Only a faint radial wash for focus + corner glow. */
  background: radial-gradient(ellipse 70% 55% at 50% 50%,
    oklch(from var(--tier-color, var(--color-amber)) l c h / 0.05) 0%,
    transparent 75%
  );
  position: relative;
  overflow: hidden;
}

.positioning-board svg {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* ============================================================
   TIPS — gold ✦ markers, no card chrome
   ============================================================ */
.tips-block {
  margin: var(--space-3) auto var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 920px;
  width: 100%;
}

.tips-block .tips-list {
  align-items: flex-start;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
}

.tips-list li::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.9);
  font-size: 0.95em;
  text-shadow: 0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.6);
}

/* ============================================================
   STAGES RAIL
   ============================================================ */
.stages-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  width: 100%;
}

.stages-rail > .stages-scroll {
  width: 100%;
  text-align: left;
}

.stages-scroll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .stages-scroll {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }
  .stage-card { min-width: 240px; scroll-snap-align: start; }
}

.stage-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.4);
  position: relative;
}

/* Tier-color glow tick at top-left of each stage card */
.stage-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 24px; height: 1px;
  background: oklch(from var(--tier-color, var(--color-amber)) l c h / 1);
  box-shadow: 0 0 6px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7);
}

.stage-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stage-card-num {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.9);
  font-variant-numeric: tabular-nums;
}

.stage-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.stage-card-board {
  display: flex;
  justify-content: flex-start;
  padding: var(--space-1) 0;
}

.stage-card-board svg { max-width: 100%; height: auto; }

.stage-card-notes {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   FULL ROSTER ROW — champions with items clustered underneath
   Same layout pattern as old item-priority-block
   ============================================================ */
.full-roster-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.04);
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.15);
  border-radius: 4px;
}

.roster-unit-block {
  position: relative;
  display: inline-block;
}

.roster-unit-carry .champ-hex {
  filter:
    drop-shadow(0 1px 3px oklch(0% 0 0 / 0.5))
    drop-shadow(0 0 14px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.8));
}

/* Items clustered at bottom, following hex curve */
.roster-unit-items {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 1px;
  z-index: 2;
}

/* Left and right items sit higher than middle */
.roster-unit-items .item-hex-wrap:nth-child(1),
.roster-unit-items .item-hex-wrap:nth-child(3) {
  margin-bottom: 6px;
}

.roster-unit-items .item-hex {
  width: 22px;
  height: 22px;
}

/* ============================================================
   ITEM PRIORITY ROW — items only with arrows (square, NOT hex)
   ============================================================ */
.item-priority-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.item-priority-arrow {
  font-size: 0.75rem;
  color: oklch(from var(--tier-color, var(--color-amber)) l c h / 0.7);
  user-select: none;
}

/* ============================================================
   ITEM SQUARE — rounded corners, NOT hex-clipped (for standalone)
   ============================================================ */
.item-square-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-square {
  position: relative;
  width: 36px;
  height: 36px;
  background: oklch(20% 0.03 60);
  border-radius: 6px;
  border: 1px solid oklch(50% 0.08 60 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.5));
}

.item-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-square.fallback {
  font-size: 10px;
  font-weight: 700;
  color: oklch(85% 0.05 80);
  text-shadow: 0 1px 1px oklch(0% 0 0 / 0.6);
  background: linear-gradient(155deg, oklch(35% 0.06 60), oklch(22% 0.04 60));
}