/* BattleCharts — landing section.
   ===========================================================================

   The section's own layer: the intro, the dome of battle tiles, the focus
   tile and its beam, the deck and the ticket. The chart inside the ticket,
   its model chips and the avatars are the product's, styled by
   assets/css/bc-scoped.css; this file only places and skins them.

   Two namespaces, and the split is deliberate:

     .tzbc        the section root, and the scope every selector in
                  bc-scoped.css hangs off.
     .tzbc-*      this file.

   Every rule here is written `.tzbc-battles .tzbc-x`, not `.tzbc-x`. The
   scoped product sheet styles bare elements under `.tzbc` — `.tzbc button`
   strips background, border and padding at (0,1,1) — so a lone class at
   (0,1,0) LOSES to it, silently, and a tile renders as bare text. The
   prefix is what puts these rules above the reset.

   Load order: bc-scoped.css first, this second.
*/

/* ===========================================================================
   0 · FONTS
   ===========================================================================
   Display copy is Unbounded and running text is Inter — tradezee.ai's own
   pairing. Inside `.tzbc` the product sheet points `--font-sans` at
   Unbounded for the arena's look, which is right for the chart and wrong for
   a paragraph: Unbounded at 12px is the single quickest way to make a page
   read as a dashboard.

   These are declared on BODY, outside the section, on purpose. A custom
   property resolves where it is declared, so these pick up the APP's
   `--font-sans` / `--font-display` (its next/font faces) before `.tzbc`
   overrides `--font-sans` for its own descendants. Declared on the section
   they would see the override instead. Namespaced, so they cannot collide
   with anything the host page owns. */
body {
  --tzbc-display: var(--font-display, "Unbounded"), ui-sans-serif, system-ui, sans-serif;
  --tzbc-body: var(--font-sans, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===========================================================================
   1 · SECTION ROOT
   =========================================================================== */

.tzbc-battles {
  /* ── Palette ─────────────────────────────────────────────────────────────
     NEUTRAL greys — tradezee.ai's measured surface ramp (#060606 canvas),
     not the arena's blue-tinted card colours. The reference reads expensive
     largely because nothing in it is tinted: grey, white, and one gradient.
     Every step is a lightness step, so nothing competes with the gradient
     card, the AIs' brand colours or the battle cards for the eye. */
  --tzbc-canvas: #060606;
  --tzbc-ink: rgb(255 255 255 / 0.96);
  --tzbc-ink-2: rgb(255 255 255 / 0.64);
  --tzbc-ink-3: rgb(255 255 255 / 0.46);
  --tzbc-ink-4: rgb(255 255 255 / 0.28);
  --tzbc-hair: rgb(255 255 255 / 0.06);
  --tzbc-hair-2: rgb(255 255 255 / 0.12);

  /* The slabs the ticket stands on, front to back. Named because the
     ticket's TOP notches are painted in --tzbc-deck-1 — that slab is what
     shows through a cut in the frame's top edge. See § 6. */
  --tzbc-deck-1: #171717;
  --tzbc-deck-2: #131313;

  --tzbc-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── Undo the parts of the arena's `body` rule that describe a page ──
     bc-scoped.css collapses `body { min-height: 100vh; overflow-x: hidden;
     background; font }` onto `.tzbc`. A section is as tall as its content,
     clips only what the dome pushes sideways, and sets its own type. */
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow-x: clip;
  padding: clamp(72px, 9vw, 132px) 0 clamp(80px, 10vw, 144px);
  background: var(--tzbc-canvas);
  color: var(--tzbc-ink-2);
  font: 400 15px/1.55 var(--tzbc-body);
  container-type: inline-size;
}

.tzbc-battles[data-theme="light"] {
  --tzbc-canvas: #faf8f5;
  --tzbc-ink: rgb(15 15 15 / 0.94);
  --tzbc-ink-2: rgb(15 15 15 / 0.62);
  --tzbc-ink-3: rgb(15 15 15 / 0.5);
  --tzbc-ink-4: rgb(15 15 15 / 0.3);
  --tzbc-hair: rgb(0 0 0 / 0.07);
  --tzbc-hair-2: rgb(0 0 0 / 0.14);
  /* A shallower ramp than dark's: on cream the same steps read as a heavy
     tan bar across the top of the ticket rather than as layers. */
  --tzbc-deck-1: #efebe5;
  --tzbc-deck-2: #e9e4dd;
}

.tzbc-battles .tzbc-body {
  position: relative;
  z-index: 1;
}

/* ===========================================================================
   2 · INTRO
   =========================================================================== */

.tzbc-battles .tzbc-intro {
  position: relative;
  z-index: 5;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
  text-align: center;
}

.tzbc-battles .tzbc-intro__title {
  margin: 0;
  font: 500 clamp(32px, 4.2vw, 58px) / 1.06 var(--tzbc-display);
  letter-spacing: -0.045em;
  color: var(--tzbc-ink);
  text-wrap: balance;
}

.tzbc-battles .tzbc-intro__lede {
  margin: 22px auto 0;
  max-width: 50ch;
  font: 400 clamp(14.5px, 1.1vw, 16.5px) / 1.62 var(--tzbc-body);
  color: var(--tzbc-ink-2);
  text-wrap: pretty;
}

/* ===========================================================================
   3 · THE DOME
   ===========================================================================
   The arena's battle cards, small, on a true circle — and turning. The
   versus line sits beneath them, with a beam of light under that.

   ── GEOMETRY IS CSS, NOT SCRIPT ─────────────────────────────────────────
   The orbit (bc-section.js, makeOrbit) writes ONE number per tile per frame:
   `--tzbc-d`, its signed place on the ring (−5…5, fractional while it
   moves). Here that becomes an angle, and the angle a point on a circle of
   radius --R hanging below the crown:

       x = R · sin θ        y = R · (1 − cos θ)        rotate θ

   so every card sits tangent to the arc, as the reference's tiles do, and
   the arc re-lays itself out at any width with no resize handler. R and the
   step are in container units, so it keeps its proportions from a phone to
   a wide monitor.

   Measured off the reference: a circle about 0.78 of the frame wide, a tile
   every ~7.5°, and the outermost pair running off the sides. */

/* ── WHY THIS PROPERTY IS REGISTERED ─────────────────────────────────────
   A custom property inherits by default, and a tile CONTAINS a battle card:
   a few hundred elements. Writing an inheriting property on the tile sixty
   times a second would restyle every one of them, ten tiles over, each
   frame. Registered as non-inheriting, a write restyles the tile and stops.

   Namespaced, because registration is GLOBAL: an `@property --d` here would
   change how every `--d` on the host page behaves. */
@property --tzbc-d {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.tzbc-battles .tzbc-hero {
  /* A battle card is 400 × 540 on the arena; in the dome it is drawn at
     --k of that. Stepped by width in § 10 rather than fluid: the scale has
     to be a plain NUMBER (it goes into `scale()`), and CSS cannot yet
     divide a container length down to one. */
  --k: 0.28;
  --card-w: 400px;
  --card-h: 540px;
  --tile-w: calc(var(--card-w) * var(--k));
  --tile-h: calc(var(--card-h) * var(--k));

  /* THE CARD'S CORNER, AT FULL SIZE.
     The card is drawn large and scaled by --k, so the corner that reaches
     the screen is this times --k. Anything drawn AROUND the card — the
     tile's selected ring, its focus outline — has to use that same
     product, or the two curves part company at the corners and the ring
     cuts across them.
     This exists because they used to be two unrelated numbers: 44 on the
     card and a hardcoded 12 on the tile, which agree only while --k is
     0.28. They are stepped by width in § 10 and have been retuned more
     than once, and every value but 0.28 silently broke the selected
     card's corners. Tied together here, no --k can. */
  --card-r: 44px;

  --R: clamp(500px, 78cqi, 1280px);
  --step: 7.6deg;
  /* The versus line: avatar size, the swords between them, the gap. --focus
     is the height of whatever sits at the focal point; the hero is sized by
     it. */
  --av: clamp(30px, 3.5cqi, 54px);
  --x: clamp(12px, 1.15cqi, 18px);
  --vs-gap: clamp(5px, 0.75cqi, 12px);
  --focus: var(--av);
  --focus-top: calc(var(--tile-h) + clamp(30px, 3.4cqi, 56px));
  --beam-h: clamp(46px, 5.6cqi, 92px);

  position: relative;
  height: calc(var(--focus-top) + var(--focus) + var(--beam-h));
  margin-top: clamp(44px, 5.2cqi, 80px);
  /* Sideways only: the arc is meant to run off both edges, and the bloom
     under the beam is meant to fall behind the deck below. */
  overflow-x: clip;
  overflow-y: visible;
}

/* The dome's box reaches 20px past the hero on every side a card can grow
   into — a hovered card scales up, and a mask (below) clips to its
   element's box. Cards are placed 20px down to match. */
.tzbc-battles .tzbc-dome {
  position: absolute;
  inset: -20px 0 -20px;

  /* The shoulders DISSOLVE into the canvas rather than being cut by the
     window's edge, which reads as a cropped screenshot. The orbit fades
     each card out before it wraps as well (makeOrbit, `fade`); this covers
     the edge of the window, that covers the wrap. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* The tile is the CONTROL: a positioned box the size of the scaled card,
   which takes the clicks, the focus ring and the hover. The card inside is
   drawn full size and scaled down, so it is the arena's card, pixel for
   pixel, rather than a re-flow of it into a smaller box. */
.tzbc-battles .tzbc-tile {
  position: absolute;
  left: 50%;
  top: 20px;
  width: var(--tile-w);
  height: var(--tile-h);
  margin-left: calc(var(--tile-w) / -2);
  translate:
    calc(sin(var(--tzbc-d) * var(--step)) * var(--R))
    calc((1 - cos(var(--tzbc-d) * var(--step))) * var(--R));
  rotate: calc(var(--tzbc-d) * var(--step));

  display: block;
  padding: 0;
  border: 0;
  /* Exactly the card's own corner once scaled — see --card-r. */
  border-radius: calc(var(--card-r) * var(--k));
  background: none;
  cursor: pointer;
  will-change: translate, rotate, opacity;
  transition: scale 0.45s var(--tzbc-ease);
}

.tzbc-battles .tzbc-tile__card {
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  transform: scale(var(--k));
  transform-origin: 0 0;
  /* The tile takes the pointer; nothing inside the card is interactive. */
  pointer-events: none;
  /* Every card but the selected one sits back, the way the reference's
     tiles do. The selected one is the only card at full strength. */
  opacity: 0.6;
  transition: opacity 0.45s var(--tzbc-ease);
}

/* ── THE CARD AT TILE SIZE ──
   Two adjustments to the arena's card and no more. Its 16px radius would
   shrink to 4.5px and read as square — the one thing that stops a tile
   reading as a card — so it is drawn at 44px to land near 12. And its hover
   lift, 3px at full size, is under a pixel here: a jitter, not a response. */
.tzbc-battles .tzbc-tile .bcard {
  height: 100%;
  border-radius: var(--card-r);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.05);
}

.tzbc-battles .tzbc-tile .bcard:hover {
  transform: none;
}

.tzbc-battles .tzbc-tile:hover {
  scale: 1.07;
}

.tzbc-battles .tzbc-tile:hover .tzbc-tile__card {
  opacity: 0.95;
}

/* The selected battle: at full strength, ringed in white. Both of its
   cards — there are two on a five-battle board — so it can be found
   wherever the ring has carried it. */
.tzbc-battles .tzbc-tile.is-active .tzbc-tile__card {
  opacity: 1;
}

.tzbc-battles .tzbc-tile.is-active {
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / 0.7),
    0 18px 40px -16px rgb(0 0 0 / 0.9);
}

.tzbc-battles .tzbc-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ── THE VERSUS LINE ─────────────────────────────────────────────────────
   Where the reference keeps its one bright logo: the six AIs on the board in
   a row, with the arena's own crossed swords between every pair — small and
   quiet, but clashing (ui.swords(true): the Live badge's icon and motion,
   one strike every 2.6s). bc-section.js, buildVersus.

   The swords strike in a ripple from the centre outward rather than all at
   once: each pair's animation is delayed by --clash-at, set per icon. */
.tzbc-battles .tzbc-vs {
  /* The avatar draws a 2px ring in --surface-1 to stand clear of what is
     behind it. Behind it here is the canvas, not a card. */
  --surface-1: var(--tzbc-canvas);

  position: absolute;
  left: 50%;
  top: var(--focus-top);
  z-index: 3;
  height: var(--av);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--vs-gap);
}

/* The outer AIs a step back from the inner ones (`--from`: places from the
   centre), so the line has a middle rather than reading as a row of
   equals. */
.tzbc-battles .tzbc-vs__ai {
  display: block;
  flex: none;
  scale: calc(1 - var(--from) * 0.08);
  opacity: calc(1 - var(--from) * 0.12);
  transition:
    opacity 0.45s var(--tzbc-ease),
    filter 0.45s var(--tzbc-ease);
}

.tzbc-battles .tzbc-vs__ai .avatar {
  --size: var(--av);
}

/* Not fighting in the battle on screen (Cable Clash runs four of the six). */
.tzbc-battles .tzbc-vs__ai.is-out {
  opacity: 0.16;
  filter: grayscale(1);
}

/* The swords: small, and in the canvas's quietest ink, so the AIs stay the
   subject. The motion is what draws the eye to them, and only briefly —
   the strike and its spark are a fraction of each 2.6s loop. */
.tzbc-battles .tzbc-vs__x {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--x);
  height: var(--x);
  color: rgb(255 255 255 / 0.4);
  transition: opacity 0.45s var(--tzbc-ease);
}

.tzbc-battles .tzbc-vs__x .bsw {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The ripple. The product's rule sets these four running with no delay
   (components.css, .bsw--live); this only moves where in the loop each
   pair starts. */
.tzbc-battles .tzbc-vs__x .bsw__a,
.tzbc-battles .tzbc-vs__x .bsw__b,
.tzbc-battles .tzbc-vs__x .bsw__spark,
.tzbc-battles .tzbc-vs__x .bsw__jolt {
  animation-delay: var(--clash-at, 0s);
}

/* Beside an AI that is not in this battle: still, and faded. A clash with an
   empty corner reads as a glitch. */
.tzbc-battles .tzbc-vs__x.is-out {
  opacity: 0.3;
}

.tzbc-battles .tzbc-vs__x.is-out .bsw__a,
.tzbc-battles .tzbc-vs__x.is-out .bsw__b,
.tzbc-battles .tzbc-vs__x.is-out .bsw__spark,
.tzbc-battles .tzbc-vs__x.is-out .bsw__jolt {
  animation: none;
}

.tzbc-battles[data-theme="light"] .tzbc-vs__x {
  color: rgb(0 0 0 / 0.4);
}

/* ── THE BEAM ────────────────────────────────────────────────────────────
   Light rising off the deck under the versus line — the reference's most
   distinctive detail, and the one a soft blurred blob does not reproduce.
   It is a field of fine VERTICAL streaks: a colour ramp (cyan, ember,
   lavender) seen through a mask that is the product of two layers —

     · 1px lines on a 3px pitch, with the gaps left at 18% so the field
       has body rather than looking like a barcode, and
     · an ellipse anchored to the bottom edge, so the streaks are tallest
       in the middle and fade upward and outward.

   Masking is safe HERE in a way it is not on the ticket: this element has
   no children to be rasterised with it. */
.tzbc-battles .tzbc-beam {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: clamp(220px, 38cqi, 620px);
  height: calc(var(--beam-h) + var(--focus) * 0.3);
  translate: -50% 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(18 150 232 / 0) 0%,
    rgb(18 150 232 / 0.95) 22%,
    rgb(40 128 222 / 0.9) 35%,
    rgb(255 104 38 / 1) 50%,
    rgb(255 142 92 / 0.9) 59%,
    rgb(214 217 238 / 0.85) 75%,
    rgb(214 217 238 / 0) 100%
  );
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0 1px, rgb(0 0 0 / 0.18) 1px 3px),
    radial-gradient(54% 100% at 50% 100%, #000 0%, rgb(0 0 0 / 0.5) 46%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    repeating-linear-gradient(90deg, #000 0 1px, rgb(0 0 0 / 0.18) 1px 3px),
    radial-gradient(54% 100% at 50% 100%, #000 0%, rgb(0 0 0 / 0.5) 46%, transparent 100%);
  mask-composite: intersect;
}

/* The bloom the beam sits in — a hot ember core with its two cooler
   flanks. Falls partly behind the deck on purpose: the light is meant to
   come from BEHIND the slabs. */
.tzbc-battles .tzbc-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  z-index: 1;
  width: clamp(200px, 32cqi, 520px);
  height: 160px;
  translate: -50% 0;
  pointer-events: none;
  background:
    radial-gradient(38% 48% at 30% 64%, rgb(18 150 232 / 0.5), transparent 72%),
    radial-gradient(34% 54% at 50% 68%, rgb(255 100 36 / 0.78), transparent 72%),
    radial-gradient(38% 48% at 70% 64%, rgb(214 217 238 / 0.32), transparent 72%);
  filter: blur(30px);
}

/* ===========================================================================
   4 · THE STAGE AND ITS DECK
   ===========================================================================
   THREE LAYERS: two slabs behind the ticket, and the ticket. Each slab is a
   step narrower, higher and darker than the one in front of it. Only their
   top edges show — the ticket covers the rest — so the radius is on the top
   corners and the hairline along the top is what actually draws each one.
   Darker going back, not more transparent: on a near-black canvas a fading
   slab vanishes instead of receding. */

.tzbc-battles .tzbc-stage {
  --deck-step: 20px;
  position: relative;
  z-index: 4;
  padding: calc(var(--deck-step) * 2) var(--gutter, 24px) 0;
}

/* `z-index: 0` makes the deck its own stacking context, so the slabs'
   z-indexes below order them against EACH OTHER and nothing else — the
   ticket, later in the markup and at z-index 1, stays in front of both
   without having to out-number them. */
.tzbc-battles .tzbc-deck {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(1180px, calc(100% - 2 * var(--gutter, 24px)));
  height: calc(var(--deck-step) * 2 + 40px);
  translate: -50% 0;
  pointer-events: none;
}

/* ── FRONT TO BACK, EXPLICITLY ───────────────────────────────────────────
   The slabs are positioned siblings, and positioned siblings without a
   z-index paint in SOURCE order — so the back slab, last in the markup,
   painted over the one in front. Its body covered the front slab's top
   edge, and the deck read as one dark block with corners poking out at the
   sides instead of layers stepping back. The z-indexes put the front slab
   on top, as it is in the picture.

   The last shadow is the layering itself: the front slab casts a short,
   soft shadow UP onto the one behind it, so the step reads as an edge with
   depth behind it rather than as a change of grey. The back slab has
   nothing behind it to cast onto. */
.tzbc-battles .tzbc-deck i {
  position: absolute;
  left: 50%;
  display: block;
  height: 80px;
  translate: -50% 0;
  border-radius: 24px 24px 0 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 0 1px rgb(255 255 255 / 0.03),
    0 -10px 22px -12px rgb(0 0 0 / 0.95);
}

.tzbc-battles .tzbc-deck i:nth-child(1) { z-index: 2; top: var(--deck-step); width: 93%; background: var(--tzbc-deck-1); }
.tzbc-battles .tzbc-deck i:nth-child(2) {
  z-index: 1;
  top: 0;
  width: 86%;
  background: var(--tzbc-deck-2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 0 1px rgb(255 255 255 / 0.03);
}

.tzbc-battles[data-theme="light"] .tzbc-deck i {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 0 0 1px rgb(0 0 0 / 0.04),
    0 -10px 22px -14px rgb(60 45 20 / 0.28);
}

.tzbc-battles[data-theme="light"] .tzbc-deck i:nth-child(2) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 0 0 1px rgb(0 0 0 / 0.04);
}

/* ===========================================================================
   5 · THE TICKET
   ===========================================================================
   A frame holding three inset cards. The chart takes the middle and more
   than half the width; it is the thing the section exists to show. */

.tzbc-battles .tzbc-ticket {
  --notch: 13px;
  --seam: 26px;

  position: relative;
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--seam)
    minmax(0, 2.3fr)
    var(--seam)
    minmax(0, 1fr);
  padding: 12px;
  border-radius: 26px;
  /* Never darker than --tzbc-deck-1: the frame stands IN FRONT of that
     slab, and a frame darker than the slab behind it reads as a hole. */
  background: linear-gradient(180deg, #181818 0%, #141414 100%);
  /* In front of the deck's whole stacking context (§ 4). The third shadow
     is the same short upward cast each slab throws onto the one behind,
     so the frame is the fourth step of the stack, not a lid on it. */
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px var(--tzbc-hair),
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 -10px 22px -12px rgb(0 0 0 / 0.95),
    0 60px 120px -60px #000;
}

.tzbc-battles[data-theme="light"] .tzbc-ticket {
  background: linear-gradient(180deg, #f4f1ec 0%, #efebe4 100%);
  box-shadow:
    inset 0 0 0 1px var(--tzbc-hair),
    inset 0 1px 0 #fff,
    0 60px 120px -70px rgb(60 45 20 / 0.45);
}

/* ===========================================================================
   6 · SEAMS AND NOTCHES
   ===========================================================================
   A dashed rule between two cards, ending in a half-circle bitten out of the
   frame's top and bottom edges — a perforation, the way a ticket tears.

   ── THE NOTCHES ARE PAINTED, NOT CUT ────────────────────────────────────
   A mask would be the honest way to cut them, and it is what the reference
   implies. But a mask on the frame masks its children, the chart among
   them, and Chrome rasterises a masked subtree: the plot's 1px gridlines
   went soft. So each notch is a half-disc in the colour of what is BEHIND
   that edge, plus a 1px arc continuing the frame's own hairline round it.

   What is behind differs top and bottom, so the colours do too:

     top     the front deck slab (--tzbc-deck-1). The slabs are 93% of the
             frame's width, so they reach well past both seams.
     bottom  the canvas.

   Move the deck, the seams or the bloom and this needs checking again. */

.tzbc-battles .tzbc-seam {
  position: relative;
  /* Through the frame's padding, so the notches sit ON its edges. */
  margin-block: -12px;
  background: repeating-linear-gradient(180deg, var(--tzbc-hair-2) 0 5px, transparent 5px 11px)
    center / 1px calc(100% - 2 * (var(--notch) + 12px)) no-repeat;
}

.tzbc-battles .tzbc-seam::before,
.tzbc-battles .tzbc-seam::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--notch) * 2);
  height: calc(var(--notch) * 2);
  translate: -50% 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--tzbc-hair);
}

/* Only the half that lies over the frame is drawn. The other half would be
   painting the deck or the canvas onto themselves — harmless, except for
   the hairline, which would draw a ring floating outside the ticket. */
.tzbc-battles .tzbc-seam::before {
  top: calc(var(--notch) * -1);
  background: var(--tzbc-deck-1);
  clip-path: inset(50% 0 0 0);
}

.tzbc-battles .tzbc-seam::after {
  bottom: calc(var(--notch) * -1);
  background: var(--tzbc-canvas);
  clip-path: inset(0 0 50% 0);
}

/* ===========================================================================
   7 · THE CARDS
   =========================================================================== */

.tzbc-battles .tzbc-card {
  position: relative;
  /* So the watermarks can sit at z-index −1: above the card's own fill,
     below everything else in it. */
  isolation: isolate;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
}

.tzbc-battles .tzbc-card--id,
.tzbc-battles .tzbc-card--clock {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.6cqi, 22px);
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.055),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.tzbc-battles[data-theme="light"] .tzbc-card--id,
.tzbc-battles[data-theme="light"] .tzbc-card--clock {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  box-shadow:
    inset 0 0 0 1px var(--tzbc-hair),
    0 1px 2px rgb(0 0 0 / 0.04);
}

/* The oversized, nearly invisible mark the reference keeps in each side
   card. Without it the cards are a lot of air with a block of type at the
   bottom; with it the air has a shape. */
.tzbc-battles .tzbc-ghost {
  position: absolute;
  z-index: -1;
  right: -24%;
  top: 20%;
  rotate: -16deg;
  color: rgb(255 255 255 / 0.04);
  pointer-events: none;
  line-height: 1;
}

.tzbc-battles[data-theme="light"] .tzbc-ghost {
  color: rgb(0 0 0 / 0.045);
}

.tzbc-battles .tzbc-ghost .tzbc-mark {
  font: 700 168px/1 var(--tzbc-display);
  letter-spacing: -0.06em;
}

.tzbc-battles .tzbc-ghost svg {
  display: block;
  width: 176px;
  height: 176px;
}

/* ── left: who is fighting ── */

/* The battle's market, on a white tile: the one bright mark in the card. */
.tzbc-battles .tzbc-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #efefef 100%);
  color: #0b0b0b;
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 0.08),
    0 10px 24px -10px rgb(0 0 0 / 0.7);
}

.tzbc-battles .tzbc-logo .tzbc-mark {
  font: 700 15px/1 var(--tzbc-display);
  letter-spacing: -0.05em;
}

.tzbc-battles .tzbc-logo svg {
  display: block;
  width: 21px;
  height: 21px;
}

.tzbc-battles[data-theme="light"] .tzbc-logo {
  background: linear-gradient(180deg, #1c1c1c 0%, #0b0b0b 100%);
  color: #fff;
}

.tzbc-battles .tzbc-id__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tzbc-battles .tzbc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: 500 12px/1 var(--tzbc-body);
  color: var(--tzbc-ink-3);
}

.tzbc-battles .tzbc-eyebrow__sep {
  opacity: 0.45;
}

/* The arena's swords, leading the eyebrow: in the Live badge's red and
   clashing while the battle runs, in ink and still once it is over. */
.tzbc-battles .tzbc-eyebrow .bsw {
  flex: none;
  width: 15px;
  height: 15px;
  margin-inline-end: 1px;
  overflow: visible;
  color: var(--tzbc-ink-3);
}

.tzbc-battles .tzbc-eyebrow--live .bsw,
.tzbc-battles .tzbc-eyebrow--live .tzbc-eyebrow__phase {
  color: #ff5a5a;
}

.tzbc-battles .tzbc-eyebrow__phase {
  font-weight: 600;
}

.tzbc-battles .tzbc-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tzbc-ink-4);
}

.tzbc-battles .tzbc-dot--live {
  background: #ff3b3b;
  animation: tzbc-pulse 2.4s var(--tzbc-ease) infinite;
}

.tzbc-battles .tzbc-id__title {
  margin: 2px 0 0;
  font: 600 clamp(15px, 1.3cqi, 19px) / 1.22 var(--tzbc-display);
  letter-spacing: -0.035em;
  color: var(--tzbc-ink);
  text-wrap: balance;
}

/* ── THE PODIUM ──
   The top three of the battle on screen, on the arena's medal coins: who is
   winning, which is the question a battle is for. First place sits on a
   faint gold wash so the leader reads before the list does. */
.tzbc-battles .tzbc-podium {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 8px 0 2px;
  padding: 0;
  list-style: none;
}

.tzbc-battles .tzbc-podium__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 6px;
  border-radius: 10px;
}

.tzbc-battles .tzbc-podium__row.is-lead {
  background: linear-gradient(90deg, rgb(245 197 66 / 0.13), rgb(245 197 66 / 0.02) 75%);
  box-shadow: inset 0 0 0 1px rgb(245 197 66 / 0.14);
}

/* The coin: the product's medal ramp, lit from the top left. */
.tzbc-battles .tzbc-podium__rank {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--m-light), var(--m-mid) 55%, var(--m-dark));
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
  color: #1a1206;
  font: 700 10px/1 var(--tzbc-body);
}

.tzbc-battles .tzbc-podium__row .avatar {
  --surface-1: #1c1c1c;
}

.tzbc-battles .tzbc-podium__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12.5px/1.2 var(--tzbc-body);
  color: var(--tzbc-ink);
}

.tzbc-battles .tzbc-podium__ret {
  font: 600 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tzbc-ink-2);
}

.tzbc-battles .tzbc-podium__ret.is-pos { color: var(--pos); }
.tzbc-battles .tzbc-podium__ret.is-neg { color: var(--neg); }

.tzbc-battles[data-theme="light"] .tzbc-podium__row .avatar {
  --surface-1: #ffffff;
}

/* The reference's white pill. Specificity matters here twice over: the
   product sheet's `.tzbc a` resets colour and decoration. */
.tzbc-battles .tzbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-top: 10px;
  padding: 0 14px 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #0b0b0b;
  font: 600 13px/1 var(--tzbc-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 0.1),
    0 12px 28px -14px rgb(255 255 255 / 0.4);
  transition:
    translate 0.3s var(--tzbc-ease),
    box-shadow 0.3s var(--tzbc-ease);
}

.tzbc-battles .tzbc-btn svg {
  width: 15px;
  height: 15px;
  transition: translate 0.3s var(--tzbc-ease);
}

.tzbc-battles .tzbc-btn:hover {
  translate: 0 -1px;
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 0.1),
    0 16px 34px -14px rgb(255 255 255 / 0.5);
}

.tzbc-battles .tzbc-btn:hover svg {
  translate: 3px 0;
}

.tzbc-battles .tzbc-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.tzbc-battles[data-theme="light"] .tzbc-btn {
  background: #0b0b0b;
  color: #fff;
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.45);
}

.tzbc-battles[data-theme="light"] .tzbc-btn:focus-visible {
  outline-color: #0b0b0b;
}

/* ── middle: the chart ──
   The reference's centre card is a gradient, and this one is too. The plot
   cannot sit ON it — six series colours over cyan, ember and coral would
   each vanish into the band that matches them — so it sits on a dark glass
   panel inside it, and the gradient shows as the card's rim and as the strip
   the model tabs sit on, which is where the reference has its tabs. */
.tzbc-battles .tzbc-card--chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 9px 9px 11px;
  border-radius: 20px;
  container-type: inline-size;
  background:
    radial-gradient(70% 90% at 0% 100%, rgb(14 165 240 / 0.95), transparent 62%),
    radial-gradient(58% 80% at 38% 0%, rgb(255 122 58 / 0.95), transparent 64%),
    radial-gradient(58% 90% at 66% 100%, rgb(240 68 88 / 0.9), transparent 62%),
    radial-gradient(60% 90% at 100% 18%, rgb(198 204 228 / 0.95), transparent 64%),
    linear-gradient(90deg, #16a6ef 0%, #ff6f3c 46%, #ee4a5c 68%, #bfc4dc 100%);
  /* No coloured drop shadow. It is the obvious way to make a gradient card
     glow, and it leaked out under the ticket's bottom edge as an orange
     smear on the canvas — the card sits only 12px inside the frame. */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.3);
}

/* The glass. Opaque enough to be the plot's background — the chart was
   designed on near-black — and just translucent enough that the gradient
   warms it from behind.

   `--surface-1` is set to match it, and that is not cosmetic: the chart
   paints its logo rings, its hollow sell markers and the gap round each
   line-end badge in `--surface-1`, meaning "the panel showing through"
   (battle.css, the note on .chartpanel). Left at the arena's value they
   would draw as dark rings on a lighter panel.

   No backdrop-filter, though it is the obvious tool: what is behind is
   already smooth gradient, a blur of it looks the same, and it would be
   re-composited on every frame of the chart's intro. */
.tzbc-battles .tzbc-glass {
  --surface-1: #0e0d10;
  --surface-2: #141316;
  --surface-3: #1a191c;

  flex: 1 1 auto;
  margin: 0;
  padding: 16px 14px 6px;
  border: 0;
  border-radius: 13px;
  background: rgb(11 10 13 / 0.9);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.09),
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 20px 40px -24px rgb(0 0 0 / 0.75);
}

.tzbc-battles .tzbc-glass .chartbox {
  min-height: 300px;
}

.tzbc-battles[data-theme="light"] .tzbc-glass {
  --surface-1: #ffffff;
  --surface-2: #fbf9f5;
  --surface-3: #f3f0e9;
  background: rgb(255 255 255 / 0.92);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.6),
    0 20px 40px -24px rgb(80 30 10 / 0.35);
}

/* The model tabs — the battle page's own legend chips (`.chip.bp-chip`),
   reskinned as the reference's frosted pills.

   `--surface-1: transparent` because the avatar draws a 2px ring in it to
   separate itself from the surface behind. Here the surface behind is the
   gradient, and a ring in any one colour would be a dark halo on it. */
.tzbc-battles .tzbc-tabs {
  --surface-1: transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  border: 0;
}

.tzbc-battles .tzbc-tab {
  height: 32px;
  gap: 7px;
  padding: 0 12px 0 5px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  color: #fff;
  font: 500 12px/1 var(--tzbc-body);
  letter-spacing: 0;
  transition:
    background 0.25s var(--tzbc-ease),
    color 0.25s var(--tzbc-ease);
}

/* ── `aria-pressed` MEANS SOMETHING ELSE TO THE PRODUCT ──────────────────
   On the battle page a chip is a series toggle, and `aria-pressed="false"`
   means "this series is switched off": battle.css greys its avatar to 40%,
   dims its text and dashes its border. Here the same attribute means "not
   the focused model", which is the resting state of every tab — so without
   this every avatar in the row drew greyed out, as if the whole field had
   been hidden. The ARIA is right for a toggle; it is the styling that has
   to stand down. */
.tzbc-battles .tzbc-tab[aria-pressed="false"] {
  color: #fff;
  border-style: solid;
}

.tzbc-battles .tzbc-tab[aria-pressed="false"] .avatar {
  filter: none;
  opacity: 1;
}

.tzbc-battles .tzbc-tab:hover,
.tzbc-battles .tzbc-tab.is-hover {
  background: rgb(255 255 255 / 0.28);
}

.tzbc-battles .tzbc-tab .avatar {
  --size: 22px;
}

/* Returns in white on the gradient, not the product's green and red: on
   cyan and coral those are illegible, and the sign is already carrying the
   meaning. */
.tzbc-battles .tzbc-tab b,
.tzbc-battles .tzbc-tab b.is-pos,
.tzbc-battles .tzbc-tab b.is-neg {
  font: 600 11.5px/1 var(--font-mono);
  color: rgb(255 255 255 / 0.92);
}

.tzbc-battles .tzbc-tab.is-focus {
  background: #fff;
  color: #0b0b0b;
}

.tzbc-battles .tzbc-tab.is-focus b {
  color: #0b0b0b;
}

.tzbc-battles .tzbc-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Names go when the card is too narrow to keep six tabs on one row. They
   stay in the accessibility tree — the name is the button's label — so
   this hides them visually, not with display: none. */
@container (max-width: 720px) {
  .tzbc-battles .tzbc-tab {
    padding: 0 11px 0 5px;
  }

  .tzbc-battles .tzbc-tab__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── right: the battle clock, and the fight in numbers ── */

.tzbc-battles .tzbc-clock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tzbc-battles .tzbc-clock__label {
  margin: 6px 0 0;
  font: 500 12.5px/1.4 var(--tzbc-body);
  color: var(--tzbc-ink-2);
}

.tzbc-battles .tzbc-clock__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
  font: 600 clamp(28px, 2.6cqi, 38px) / 1 var(--tzbc-display);
  letter-spacing: -0.045em;
  color: var(--tzbc-ink);
  font-variant-numeric: tabular-nums;
}

.tzbc-battles .tzbc-clock__value small {
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tzbc-ink-3);
}

/* ── THE FIGHT IN NUMBERS ──
   Two by two under the countdown: fighters, stake, trades fired, lead. The
   figures in the display face, the labels in the body face at a whisper —
   the same pairing as the countdown above them, one size down. */
.tzbc-battles .tzbc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--tzbc-hair);
}

.tzbc-battles .tzbc-stats div {
  min-width: 0;
}

.tzbc-battles .tzbc-stats dt {
  margin: 0 0 5px;
  font: 500 11px/1.2 var(--tzbc-body);
  color: var(--tzbc-ink-3);
}

.tzbc-battles .tzbc-stats dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 15px/1.2 var(--tzbc-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tzbc-ink);
}

.tzbc-battles .tzbc-clock__foot {
  margin-top: auto;
  padding-top: 24px;
  display: grid;
  gap: 11px;
}

/* The reference's bar: the elapsed part in cyan, then a gap, then what is
   left as a hatched white run. */
.tzbc-battles .tzbc-bar {
  display: flex;
  gap: 3px;
  height: 9px;
}

.tzbc-battles .tzbc-bar__fill {
  display: block;
  flex: none;
  min-width: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b8fdc, #2bb8f6);
  box-shadow: 0 0 14px -2px rgb(43 184 246 / 0.55);
  transition: width 0.7s var(--tzbc-ease);
}

.tzbc-battles .tzbc-bar__rest {
  display: block;
  flex: 1;
  border-radius: 999px;
  background: repeating-linear-gradient(-55deg, rgb(255 255 255 / 0.92) 0 2.5px, rgb(255 255 255 / 0.6) 2.5px 5px);
}

.tzbc-battles[data-theme="light"] .tzbc-bar__rest {
  background: repeating-linear-gradient(-55deg, rgb(0 0 0 / 0.14) 0 2.5px, rgb(0 0 0 / 0.06) 2.5px 5px);
}

/* Over: the bar is all one grey run. A full cyan bar reads "still going". */
.tzbc-battles .tzbc-bar.is-done .tzbc-bar__rest {
  display: none;
}

.tzbc-battles .tzbc-bar.is-done .tzbc-bar__fill {
  flex: 1;
  background: var(--tzbc-ink-4);
  box-shadow: none;
}

.tzbc-battles .tzbc-clock__note {
  margin: 0;
  font: 400 12px/1.5 var(--tzbc-body);
  color: var(--tzbc-ink-3);
}

/* The arena's swords, as this card's watermark. */
.tzbc-battles .tzbc-ghost--clock {
  top: auto;
  right: -30%;
  bottom: 10%;
  rotate: 0deg;
  color: rgb(255 255 255 / 0.032);
}

.tzbc-battles[data-theme="light"] .tzbc-ghost--clock {
  color: rgb(0 0 0 / 0.04);
}

.tzbc-battles .tzbc-ghost--clock svg {
  width: 210px;
  height: 210px;
}

/* ── the rules, behind an (i) ── */

.tzbc-battles .tzbc-info {
  position: relative;
  flex: none;
}

.tzbc-battles .tzbc-info__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--tzbc-ink-2);
  box-shadow: inset 0 0 0 1px var(--tzbc-hair-2);
  transition:
    color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.tzbc-battles .tzbc-info__btn svg {
  width: 16px;
  height: 16px;
}

.tzbc-battles .tzbc-info__btn:hover,
.tzbc-battles .tzbc-info__btn:focus-visible {
  color: var(--tzbc-ink);
  background: var(--tzbc-hair);
  box-shadow: inset 0 0 0 1px var(--tzbc-ink-4);
  outline: none;
}

.tzbc-battles .tzbc-info__tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  width: 230px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: #141414;
  font: 500 12px/1.5 var(--tzbc-body);
  text-align: start;
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.8);
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  pointer-events: none;
  transition:
    opacity 0.2s var(--tzbc-ease),
    translate 0.2s var(--tzbc-ease),
    visibility 0s linear 0.2s;
}

.tzbc-battles .tzbc-info__btn:hover + .tzbc-info__tip,
.tzbc-battles .tzbc-info__btn:focus-visible + .tzbc-info__tip {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.tzbc-battles[data-theme="light"] .tzbc-info__tip {
  background: #141414;
  color: #fff;
}

/* ===========================================================================
   8 · LIGHT THEME — THE DOME
   =========================================================================== */

/* The cards bring their own light look (arena.css: white card on the cream
   page); only the ring and the hairline round each tile need flipping. */
.tzbc-battles[data-theme="light"] .tzbc-tile .bcard {
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06);
}

.tzbc-battles[data-theme="light"] .tzbc-tile.is-active {
  box-shadow:
    0 0 0 1.5px rgb(0 0 0 / 0.75),
    0 18px 40px -18px rgb(60 45 20 / 0.45);
}

.tzbc-battles[data-theme="light"] .tzbc-tile:focus-visible {
  outline-color: #0b0b0b;
}

.tzbc-battles[data-theme="light"] .tzbc-hero::after {
  opacity: 0.7;
}

/* ===========================================================================
   9 · MOTION
   =========================================================================== */

@keyframes tzbc-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(255 59 59 / 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgb(255 59 59 / 0);
  }
}

/* (No per-tile entrance. The tiles used to come in from the crown
   outwards; with the ring turning, "outwards" no longer means anything, and
   an opacity animation would fight the orbit, which sets each tile's
   opacity every frame. The whole section fades in below instead.) */

/* The section stays hidden until the first battle's chart has drawn, then
   comes in as one piece. `.is-ready` is set in a `finally`, so this can
   never strand it invisible — not even when the data fails. */
.tzbc-battles:not(.is-ready) .tzbc-body {
  opacity: 0;
}

.tzbc-battles.is-ready .tzbc-body {
  opacity: 1;
  transition: opacity 0.6s var(--tzbc-ease);
}

/* The ring does not turn (makeOrbit never starts) and nothing animates
   between states. bc-section.js makes the same call for the chart
   (`animate: false`). The versus line's swords stop by the product's own
   rule (components.css). */
@media (prefers-reduced-motion: reduce) {
  .tzbc-battles .tzbc-tile,
  .tzbc-battles .tzbc-tile__card,
  .tzbc-battles .tzbc-btn,
  .tzbc-battles .tzbc-btn svg,
  .tzbc-battles .tzbc-bar__fill,
  .tzbc-battles .tzbc-info__tip,
  .tzbc-battles.is-ready .tzbc-body {
    transition: none;
  }

  .tzbc-battles .tzbc-dot--live {
    animation: none;
  }

  .tzbc-battles .tzbc-vs__ai {
    transition: none;
  }
}

/* ===========================================================================
   10 · WIDTHS
   ===========================================================================
   Container queries on the section, so it lays itself out by the width it
   is GIVEN, not the window's — it may well sit in a column on the host page. */

/* The dome's cards step down with the width. Stepped, not fluid: the scale
   is a plain number that goes into scale(), and a container length cannot be
   divided down to one in CSS yet (see --k in § 3). */
@container (max-width: 1280px) {
  .tzbc-battles .tzbc-hero { --k: 0.25; }
}

@container (max-width: 1040px) {
  .tzbc-battles .tzbc-hero { --k: 0.22; }
}

/* The ticket loses its side-by-side layout before it squeezes the chart:
   chart full width on top, the two side cards beneath it. Seams go — a
   perforation only reads as one where it runs to an edge it could tear
   along. */
@container (max-width: 1060px) {
  .tzbc-battles .tzbc-ticket {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "chart chart"
      "id    clock";
    gap: 10px;
  }

  .tzbc-battles .tzbc-seam {
    display: none;
  }

  .tzbc-battles .tzbc-card--chart { grid-area: chart; }
  .tzbc-battles .tzbc-card--id { grid-area: id; }
  .tzbc-battles .tzbc-card--clock { grid-area: clock; }

  .tzbc-battles .tzbc-card--id,
  .tzbc-battles .tzbc-card--clock {
    min-height: 236px;
  }

  .tzbc-battles .tzbc-glass .chartbox {
    min-height: 340px;
  }
}

@container (max-width: 640px) {
  .tzbc-battles .tzbc-hero {
    /* A narrow arc needs a wider step, or the cards overlap. */
    --k: 0.19;
    --step: 13deg;
    --R: 520px;
  }

  .tzbc-battles .tzbc-stage {
    --deck-step: 14px;
  }

  .tzbc-battles .tzbc-ticket {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "chart"
      "id"
      "clock";
    padding: 8px;
    border-radius: 22px;
  }

  .tzbc-battles .tzbc-card--id,
  .tzbc-battles .tzbc-card--clock {
    min-height: 0;
  }

  .tzbc-battles .tzbc-id__foot {
    padding-top: 22px;
  }

  /* A HEIGHT, not a floor. On a phone battle.css gives `.chartbox`
     `height: min(540px, 62vh)` — right for the battle page, where the chart
     IS the screen, and wrong for one section of a landing page, where it
     drew a 560px plot on a 430px-wide phone, mostly empty sky. A min-height
     cannot undo a height; this replaces it. */
  .tzbc-battles .tzbc-glass .chartbox {
    flex: none;
    min-height: 0;
    height: 300px;
  }
}