/* Component-level styles: cards, joga marks grid, grid visual, etc. */

/* ---------- logo (vertical R10) ---------- */
.r10-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--paper);
  font-family: 'Racing Sans One', sans-serif;
  font-style: italic;
  line-height: 0.85;
}
.r10-logo .ring {
  width: 9cqi;
  height: 9cqi;
  border-radius: 50%;
  border: 0.4cqi solid currentColor;
  display: grid;
  place-items: center;
  font-size: 5cqi;
  position: relative;
}
.r10-logo .ring::after {
  content: '';
  position: absolute;
  inset: -1.5cqi;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.18;
}
.r10-logo .ring span { transform: translateX(-2%); }
.r10-logo .wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-style: normal;
  letter-spacing: 0.32em;
  font-size: 1.6cqi;
  margin-top: 0.6cqi;
  color: inherit;
}
.r10-logo.small .ring { width: 5cqi; height: 5cqi; font-size: 2.8cqi; }
.r10-logo.small .wordmark { font-size: 0.95cqi; }

/* ---------- hero card (CARD FRONT mockup) ----------
   Identifiable as the FRONT of a trading card:
   tier header → photo → name → footer (Joga / R10). */
.card-hero {
  position: relative;
  container-type: inline-size;
  width: 32cqi;
  aspect-ratio: 5 / 7;
  margin: auto;
  transform: rotate(-6deg);
  background: linear-gradient(160deg, #1e1f24 0%, #0e0f12 100%);
  border: 1.5px solid rgba(252, 123, 38, 0.55);
  border-radius: 2.8cqi;
  box-shadow:
    -10px 14px 22px rgba(0,0,0,0.65),
    0 0 0 1px rgba(252,123,38,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-hero:hover {
  transform: rotate(-3deg) translateY(-6px) scale(1.02);
  box-shadow:
    -8px 18px 28px rgba(0,0,0,0.75),
    0 0 0 2px rgba(252,123,38,0.18);
}

/* top header strip */
.card-hero .card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5cqi 6cqi 2.5cqi;
}
.card-hero .card-tier {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.32em;
  font-size: 3.6cqi;
  color: var(--orange);
}
.card-hero .card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.8cqi;
  letter-spacing: 0.18em;
  color: var(--paper);
  opacity: 0.5;
}

/* photo middle — clearly identifiable as "the front face" */
.card-hero .card-photo {
  position: relative;
  flex: 1;
  margin: 0 6cqi;
  overflow: hidden;
  background: #1a1b1f;
  border: 0.5px solid rgba(252,123,38,0.3);
}
.card-hero .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-hero .card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,168,92,0.05) 0%, transparent 30%, rgba(22,23,27,0.4) 100%),
    radial-gradient(circle at 50% 100%, rgba(252,123,38,0.25) 0%, transparent 55%);
  pointer-events: none;
}
.card-hero .card-photo .corner {
  position: absolute;
  width: 2.4cqi; height: 2.4cqi;
  z-index: 2;
}
.card-hero .card-photo .corner.tl { top: 1cqi; left: 1cqi; border-top: 0.5px solid var(--orange); border-left: 0.5px solid var(--orange); }
.card-hero .card-photo .corner.br { bottom: 1cqi; right: 1cqi; border-bottom: 0.5px solid var(--orange); border-right: 0.5px solid var(--orange); }

/* name section directly under photo */
.card-hero .card-name {
  padding: 3cqi 6cqi 1.5cqi;
}
.card-hero .card-sub {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.28em;
  font-size: 2.6cqi;
  color: var(--orange);
  opacity: 0.85;
}
.card-hero .card-title {
  font-family: 'Racing Sans One', sans-serif;
  font-style: italic;
  font-size: 11cqi;
  line-height: 0.95;
  color: var(--paper);
  margin: 0.3cqi 0 1.2cqi;
}
.card-hero .card-strip {
  width: 22%;
  height: 0.5cqi;
  background: var(--orange);
}

/* footer Joga badge */
.card-hero .card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2cqi 6cqi 4cqi;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2cqi;
  letter-spacing: 0.28em;
  color: rgba(245,245,240,0.55);
  border-top: 0.5px solid rgba(252,123,38,0.18);
  margin-top: 1cqi;
}
.card-hero .card-foot .joga {
  color: var(--orange);
}
.card-hero .card-foot .joga-badge {
  /* override default font sizes inside the card's container */
  font-size: 2.4cqi;
  padding: 0.7cqi 1.4cqi;
  gap: 0.6cqi;
}
.card-hero .card-foot .joga-badge img.jb-icon { width: 3cqi; height: 3cqi; }
.card-hero .card-foot .joga-badge .jb-num     { font-size: 2.8cqi; }
.card-hero .card-foot .joga-badge .jb-x       { font-size: 1.8cqi; }
.card-hero .card-foot .joga-badge .jb-label   { font-size: 2cqi; }

/* old abstract elements — hide if still present in markup */
.card-hero .card-orb,
.card-hero .card-grid,
.card-hero .card-emblem,
.card-hero .card-content,
.card-hero .card-tier-sub {
  display: none;
}

/* ---------- collage caption ---------- */
.collage-tag {
  position: absolute;
  left: 1cqi;
  right: 1cqi;
  bottom: 0.8cqi;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.2cqi;
}
.collage-tag .ph-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-size: 1.2cqi;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.collage-tag .collage-cap {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.18em;
  color: var(--paper);
  font-size: 1.5cqi;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ---------- joga badge (Joga Mark · logo · x N) ---------- */
.joga-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqi;
  padding: 0.55cqi 1.1cqi 0.55cqi 1.1cqi;
  background: linear-gradient(180deg, #1a1b20 0%, #0c0d10 100%);
  border: 1px solid rgba(252,123,38,0.5);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.5cqi;
  color: #ffe2b0;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,168,92,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.45);
  line-height: 1;
}
.joga-badge .jb-label {
  color: #ffe2b0;
  font-style: italic;
  font-weight: 700;
}
.joga-badge img.jb-icon {
  width: 1.9cqi;
  height: 1.9cqi;
  display: block;
  filter: drop-shadow(0 0 4px rgba(252,123,38,0.55));
}
.joga-badge .jb-x {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  color: #ffe2b0;
  font-size: 1.3cqi;
  opacity: 0.95;
}
.joga-badge .jb-num {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  color: #ffd28a;
  font-size: 1.85cqi;
  font-weight: 400;
}

/* size variants */
.joga-badge.sm  { font-size: 1.2cqi; padding: 0.4cqi 0.9cqi; gap: 0.4cqi; }
.joga-badge.sm img.jb-icon { width: 1.5cqi; height: 1.5cqi; }
.joga-badge.sm .jb-num { font-size: 1.4cqi; }
.joga-badge.sm .jb-x   { font-size: 1cqi; }

.joga-badge.lg  { font-size: 2cqi; padding: 0.7cqi 1.4cqi; gap: 0.7cqi; }
.joga-badge.lg img.jb-icon { width: 2.6cqi; height: 2.6cqi; }
.joga-badge.lg .jb-num { font-size: 2.6cqi; }
.joga-badge.lg .jb-x   { font-size: 1.6cqi; }

/* tier-tinted badges for the ladder */
.joga-badge.t-street    { border-color: rgba(220,210,200,0.4); }
.joga-badge.t-skilled   { border-color: rgba(226,194,144,0.5); }
.joga-badge.t-elite     { border-color: rgba(255,168,92,0.55); }
.joga-badge.t-champion  { border-color: rgba(252,123,38,0.7); }
.joga-badge.t-legend {
  border-color: rgba(252,123,38,0.9);
  background: linear-gradient(180deg, #2a1a10 0%, #16171B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,168,92,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 0 12px rgba(252,123,38,0.45),
    0 2px 6px rgba(0,0,0,0.45);
}
.joga-badge.t-legend .jb-num { color: #ffe2b0; }

/* ---------- joga marks rarity ladder (page 17 right column) ---------- */
.rarity-row {
  display: grid;
  grid-template-columns: 8.5cqi 1fr auto;
  gap: 1.2cqi;
  align-items: center;
  padding: 0.6cqi 0;
  border-bottom: 1px solid rgba(252,123,38,0.10);
}
.rarity-row:last-child { border-bottom: none; }
.rarity-bar {
  display: flex;
  align-items: center;
}
.rarity-name {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.22em;
  font-size: 1.6cqi;
  color: var(--paper);
}
.rarity-row.tier-street    .rarity-name { color: #d8d8d2; }
.rarity-row.tier-skilled   .rarity-name { color: #e2c290; }
.rarity-row.tier-elite     .rarity-name { color: #FFA85C; }
.rarity-row.tier-champion  .rarity-name { color: var(--orange); }
.rarity-row.tier-legend    .rarity-name { color: var(--orange-light); text-shadow: 0 0 8px rgba(252,123,38,0.5); }

.rarity-marks {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.32cqi;
  align-items: center;
}
.rarity-marks img {
  width: 1.55cqi;
  height: 1.55cqi;
  display: block;
}
.rarity-marks .dim {
  opacity: 0.13;
  filter: grayscale(0.6);
}
.rarity-count {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.18em;
  font-size: 1.5cqi;
  color: var(--orange);
  text-align: right;
}

/* ---------- joga galaxy grid (page 18) ---------- */
.joga-galaxy {
  display: flex;
  flex-direction: column;
  gap: 1.6cqi;
}
.jg-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1fr;
  gap: 1.4cqi;
  align-items: stretch;
  padding: 1.4cqi 0;
  border-bottom: 1px solid rgba(252,123,38,0.10);
}
.jg-row:last-child { border-bottom: none; }

.jg-tier {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4cqi;
  padding-right: 1.2cqi;
  border-right: 1px solid rgba(252,123,38,0.15);
}
.jg-tier-name {
  font-family: 'Racing Sans One', sans-serif;
  font-style: italic;
  font-size: 3.4cqi;
  line-height: 0.95;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.jg-tier-range {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.32em;
  font-size: 1.4cqi;
  color: var(--orange);
}

.jg-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8cqi;
  padding: 1.2cqi 0.4cqi;
  background: rgba(34,35,40,0.55);
  border: 1px solid rgba(252,123,38,0.20);
  transition: transform .2s, border-color .2s, background .2s;
}
.jg-mark:hover {
  transform: translateY(-3px);
  border-color: rgba(252,123,38,0.6);
  background: rgba(34,35,40,0.9);
}
.jg-mark .jg-name {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.14em;
  font-size: 1.5cqi;
  color: var(--paper);
  text-align: center;
}
.jg-mark.crown {
  border-color: rgba(252,123,38,0.7);
  background: linear-gradient(160deg, rgba(252,123,38,0.18) 0%, rgba(34,35,40,0.85) 70%);
}
.jg-mark.crown .jg-name {
  color: var(--orange-light);
}

/* tier accent on row */
.jg-row.tier-street    { background: linear-gradient(90deg, rgba(160,140,110,0.04), transparent 30%); }
.jg-row.tier-skilled   { background: linear-gradient(90deg, rgba(200,160,110,0.05), transparent 30%); }
.jg-row.tier-elite     { background: linear-gradient(90deg, rgba(252,123,38,0.05), transparent 30%); }
.jg-row.tier-champion  { background: linear-gradient(90deg, rgba(252,123,38,0.08), transparent 30%); }
.jg-row.tier-legend    { background: linear-gradient(90deg, rgba(252,123,38,0.14) 0%, rgba(252,123,38,0.04) 50%, transparent 80%); }

/* ---------- elite mini photo card (2x2 grid) ---------- */
.elite-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(252,123,38,0.22);
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.elite-card:hover {
  border-color: rgba(252,123,38,0.7);
  transform: translateY(-2px);
}
.elite-card .elite-card-text {
  position: absolute;
  left: 1.2cqi;
  right: 1.2cqi;
  bottom: 1.2cqi;
  z-index: 4;
}
.elite-card .elite-card-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-size: 1.4cqi;
  margin-bottom: 0.4cqi;
}
.elite-card h4 {
  margin: 0 0 0.3cqi;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.16em;
  font-size: 1.9cqi;
  color: var(--paper);
  line-height: 1.05;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.elite-card p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15cqi;
  line-height: 1.4;
  color: #e6e5dd;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

/* ---------- micro story (vertical: thumb top, text below) ---------- */
.micro {
  display: flex;
  flex-direction: column;
  gap: 0.8cqi;
}
.micro .thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.micro h4 {
  margin: 0.6cqi 0 0.2cqi;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.18em;
  color: var(--orange);
  font-size: 1.8cqi;
}
.micro p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25cqi;
  line-height: 1.5;
  color: #d8d8d2;
  text-wrap: pretty;
}

/* ---------- joga marks grid ---------- */
.marks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3.2cqi;
  width: 100%;
}
.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9cqi;
  padding: 1.4cqi 0.4cqi;
  border: 1px solid rgba(252,123,38,0.20);
  background: rgba(34,35,40,0.55);
  position: relative;
  transition: transform .25s, border-color .25s, background .25s;
}
.mark:hover {
  transform: translateY(-3px);
  border-color: rgba(252,123,38,0.55);
  background: rgba(34,35,40,0.85);
}
.mark .ico {
  width: 5cqi;
  height: 5cqi;
  color: var(--orange);
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2cqi;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.mark .name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.9cqi;
  letter-spacing: 0.18em;
  color: var(--paper);
}
.mark .desc {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15cqi;
  line-height: 1.4;
  color: #aaaaa3;
  padding: 0 0.4cqi;
}

/* ---------- photo treatments (R10 warm palette) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* warm enhance — for shots already warm-toned (street, skilled1, sunset) */
.photo.warm > img {
  filter: saturate(1.05) contrast(1.08) brightness(0.96);
}
.photo.warm::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, transparent 35%, rgba(22,23,27,0.55) 100%),
    linear-gradient(180deg, rgba(252,123,38,0.06), rgba(22,23,27,0.18));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* heavy — pulls green/blue stadium toward amber-orange */
.photo.heavy > img {
  filter: sepia(0.55) saturate(1.25) hue-rotate(-12deg) contrast(1.18) brightness(0.92);
}
.photo.heavy::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(252,123,38,0.18), rgba(22,23,27,0.55) 70%),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(22,23,27,0.65) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo.heavy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,168,92,0.08), transparent 40%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* extra-heavy — for cosmic blue legend shots, brings to warm sepia */
.photo.legend > img {
  filter: sepia(0.85) saturate(1.4) hue-rotate(-15deg) contrast(1.15) brightness(0.95);
}
.photo.legend::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(252,123,38,0.15), transparent 60%),
    linear-gradient(180deg, rgba(22,23,27,0.35), rgba(22,23,27,0.7));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* grain on every photo */
.photo::before,
.photo .grain-in {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.6 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  z-index: 2;
}

/* micro-thumb variant: place tag label on top of treated photo */
.micro .photo {
  display: block;
}
.micro .photo .ph-tag-on {
  position: absolute;
  bottom: 6px;
  left: 8px;
  z-index: 3;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-size: clamp(10px, 1.1cqi, 14px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.micro .photo .ph-corner {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--orange);
  border-left: 1px solid var(--orange);
  z-index: 3;
}
.micro .photo .ph-corner.br {
  top: auto; left: auto;
  bottom: 6px; right: 8px;
  border: none;
  border-bottom: 1px solid var(--orange);
  border-right: 1px solid var(--orange);
}

/* ---------- THE GRID — heavier, more oppressive visual ---------- */
.grid-cage {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, #1a1b22 0%, #08090c 80%);
  overflow: hidden;
}
/* tactical-board grid lines, harsher */
.grid-cage .lines {
  position: absolute;
  inset: -12% -12%;
  background-image:
    linear-gradient(rgba(220,220,220,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,220,220,0.35) 1px, transparent 1px);
  background-size: 7% 7%;
  transform: perspective(700px) rotateX(62deg) scale(1.2);
  transform-origin: 50% 30%;
}
.grid-cage .lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(220,220,220,0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(220,220,220,0.6) 2px, transparent 2px);
  background-size: 28% 28%;
}
/* chain-link fence on left + right side */
.grid-cage .fence-l, .grid-cage .fence-r {
  position: absolute;
  top: 0; bottom: 0;
  width: 22%;
  background-image:
    linear-gradient(135deg, transparent 45%, rgba(220,220,220,0.22) 45% 55%, transparent 55%),
    linear-gradient(45deg, transparent 45%, rgba(220,220,220,0.22) 45% 55%, transparent 55%);
  background-size: 22px 22px;
  opacity: 0.55;
}
.grid-cage .fence-l { left: 0; mask-image: linear-gradient(90deg, black, transparent); }
.grid-cage .fence-r { right: 0; mask-image: linear-gradient(270deg, black, transparent); }

/* arrows — multiple, conflicting */
.grid-cage .arrow {
  position: absolute;
  height: 2px;
  background: #cc1f1f;
  transform-origin: 0 50%;
}
.grid-cage .arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -7px;
  width: 0; height: 0;
  border-left: 12px solid #cc1f1f;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.grid-cage .arrow.a1 { top: 28%; left: 18%; width: 36%; transform: rotate(12deg); }
.grid-cage .arrow.a2 { top: 38%; left: 56%; width: 26%; transform: rotate(-18deg); opacity: 0.7; }
.grid-cage .arrow.a3 { top: 52%; left: 22%; width: 22%; transform: rotate(28deg); opacity: 0.55; }

/* whistle/coach shadows — looming silhouettes top edge */
.grid-cage .looming {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18%;
  background:
    radial-gradient(ellipse 60% 100% at 18% 0, rgba(0,0,0,0.85), transparent 70%),
    radial-gradient(ellipse 60% 100% at 50% 0, rgba(0,0,0,0.7), transparent 70%),
    radial-gradient(ellipse 60% 100% at 82% 0, rgba(0,0,0,0.85), transparent 70%);
}
/* caution stripes top-bottom */
.grid-cage .caution {
  position: absolute;
  height: 14px;
  left: -10%;
  right: -10%;
  background-image: repeating-linear-gradient(
    -45deg,
    #2a2a2a 0 16px,
    #cc1f1f 16px 32px
  );
  opacity: 0.65;
  transform: rotate(-1deg);
}
.grid-cage .caution.top { top: 6%; }
.grid-cage .caution.bot { bottom: 6%; }

/* X marks — forbidden areas */
.grid-cage .xmark {
  position: absolute;
  width: 4%;
  aspect-ratio: 1;
  color: #cc1f1f;
}
.grid-cage .xmark::before, .grid-cage .xmark::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 100%;
  background: currentColor;
  transform-origin: center;
}
.grid-cage .xmark::before { transform: translateX(-50%) rotate(45deg); }
.grid-cage .xmark::after  { transform: translateX(-50%) rotate(-45deg); }

.grid-cage .xmark.x1 { top: 30%; left: 42%; }
.grid-cage .xmark.x2 { top: 55%; left: 64%; opacity: 0.6; }
.grid-cage .xmark.x3 { top: 64%; left: 36%; opacity: 0.5; }

/* clipboard / play-board chip silhouette */
.grid-cage .playboard {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 22%;
  aspect-ratio: 4/3;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(220,220,220,0.25);
  padding: 6px;
  transform: rotate(4deg);
}
.grid-cage .playboard svg { width: 100%; height: 100%; }

/* R10 silhouette outside — small, isolated, warm-lit */
.grid-cage .silhouette {
  position: absolute;
  bottom: 12%;
  left: 9%;
  width: 4.2%;
  aspect-ratio: 1 / 2.4;
  background: #06070a;
  border-radius: 40% 40% 8% 8%;
  filter: drop-shadow(0 0 8px rgba(252,123,38,0.65));
  z-index: 4;
}
.grid-cage .silhouette::after {
  content: '';
  position: absolute;
  width: 55%;
  height: 16%;
  border-radius: 50%;
  background: #06070a;
  top: -10%;
  left: 22%;
}
.grid-cage .ball {
  position: absolute;
  bottom: 9%;
  left: 14%;
  width: 1.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f0d39a;
  box-shadow: 0 0 12px rgba(255,168,92,0.85);
  z-index: 4;
}
.grid-cage .vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 18%, rgba(6,7,10,0.92) 95%);
  z-index: 3;
}

/* ---------- collage 4-up ---------- */
.collage4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
}
.collage4 .ph {
  align-items: flex-end;
}

/* ---------- closing bleed visual ---------- */
.closing-bleed {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, #2a1a35 0%, #0b0c10 55%),
    var(--ink);
}
.closing-bleed .stars {
  position: absolute;
  inset: 0 0 50% 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,200,140,0.9), transparent 60%),
    radial-gradient(1px 1px at 75% 35%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 22% 8%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 60% 42%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 8%, rgba(255,255,255,0.9), transparent 60%);
}
.closing-bleed .dust-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(252,123,38,0.20) 35%, rgba(252,123,38,0.45) 100%),
    radial-gradient(ellipse at 50% 100%, #c66425 0%, #6e3110 50%, #1a0e08 100%);
}
.closing-bleed .horizon {
  position: absolute;
  top: 49%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,168,92,0.5), transparent);
  box-shadow: 0 0 8px rgba(255,168,92,0.6);
}
.closing-bleed .ball-center {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #2a2a30 0%, #0d0e12 70%);
  box-shadow:
    inset 0 0 4cqi rgba(0,0,0,0.7),
    0 0 8cqi rgba(252,123,38,0.55),
    0 0 16cqi rgba(252,123,38,0.25);
  display: grid;
  place-items: center;
}
.closing-bleed .ball-center .pentagon {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  background: #08090b;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.closing-bleed .ball-center .p1 { top: 18%; left: 38%; }
.closing-bleed .ball-center .p2 { top: 50%; left: 12%; transform: rotate(72deg); }
.closing-bleed .ball-center .p3 { top: 50%; right: 12%; transform: rotate(-72deg); }
.closing-bleed .ball-center .p4 { bottom: 8%; left: 24%; transform: rotate(144deg); }
.closing-bleed .ball-center .p5 { bottom: 8%; right: 24%; transform: rotate(-144deg); }

.closing-bleed .glow-mark {
  position: absolute;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,168,92,0.95), rgba(252,123,38,0.4) 50%, transparent 75%);
  filter: blur(1px);
  mix-blend-mode: screen;
}

.closing-bleed .walker {
  position: absolute;
  bottom: 12%;
  right: 22%;
  width: 2.5%;
  aspect-ratio: 1 / 2.6;
  background: #06070a;
  border-radius: 35% 35% 8% 8%;
  filter: drop-shadow(0 0 3px rgba(252,123,38,0.7));
}
.closing-bleed .walker::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 16%;
  border-radius: 50%;
  background: #06070a;
  top: -12%;
  left: 20%;
}
.closing-bleed .footprints {
  position: absolute;
  bottom: 10%;
  right: 28%;
  width: 40%;
  height: 6%;
  background:
    radial-gradient(2px 4px at 5% 50%, rgba(255,200,140,0.9), transparent 60%),
    radial-gradient(2px 4px at 18% 60%, rgba(255,200,140,0.7), transparent 60%),
    radial-gradient(2px 4px at 32% 50%, rgba(255,200,140,0.6), transparent 60%),
    radial-gradient(2px 4px at 48% 60%, rgba(255,200,140,0.5), transparent 60%),
    radial-gradient(2px 4px at 64% 50%, rgba(255,200,140,0.35), transparent 60%),
    radial-gradient(2px 4px at 80% 60%, rgba(255,200,140,0.2), transparent 60%);
}

/* ---------- chapter label strip on section openers ---------- */
.opener-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-divider);
  z-index: 0;
}
.opener-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 75%);
}
.opener-roman {
  position: absolute;
  right: 6%;
  top: 8%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4cqi;
  letter-spacing: 0.5em;
  color: rgba(245,245,240,0.30);
  z-index: 2;
}
.opener-marks {
  position: absolute;
  right: 6%;
  bottom: 8%;
  display: flex;
  gap: 0.8cqi;
  z-index: 2;
}
.opener-marks .pip {
  width: 1.2cqi;
  height: 1.2cqi;
  border: 1px solid rgba(245,245,240,0.5);
  border-radius: 50%;
}
.opener-marks .pip.on {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 12px rgba(252,123,38,0.6);
}

/* nav jumper */
.nav-jump {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-jump a {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2a2b30;
  border: 1px solid #3a3b41;
  transition: background .15s, transform .15s;
}
.nav-jump a:hover {
  background: var(--orange);
  transform: scale(1.25);
}

/* prologue field photo */
.dust-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 55% 60%, rgba(255,180,100,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #3a1f12 0%, #5a3320 25%, #8a5630 55%, #6b3a20 85%, #2a160c 100%);
  overflow: hidden;
}
.dust-field .sun {
  position: absolute;
  left: 55%;
  top: 32%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd28a 0%, #ffa85c 40%, transparent 75%);
  filter: blur(2px);
}
.dust-field .horizon {
  position: absolute;
  top: 48%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,140,0.7) 50%, transparent);
}
.dust-field .ball {
  position: absolute;
  bottom: 22%;
  left: 47%;
  width: 4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8b48a 0%, #6e4220 70%);
  box-shadow:
    0 0.6cqi 0.8cqi rgba(0,0,0,0.6),
    0 0 1.5cqi rgba(255,168,92,0.3);
}
.dust-field .ball::after {
  content: '';
  position: absolute;
  inset: 25% 25% 25% 25%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4) 80%);
}
.dust-field .haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 18% 50%, rgba(255,220,180,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 60%, rgba(255,220,180,0.4), transparent 60%),
    radial-gradient(2px 2px at 62% 55%, rgba(255,220,180,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 65%, rgba(255,220,180,0.35), transparent 60%),
    radial-gradient(1px 1px at 88% 50%, rgba(255,220,180,0.3), transparent 60%);
}
.dust-field .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, transparent 30%, rgba(10,8,5,0.65) 85%);
}