/* ============================================================================
   Pre-battle briefing
   ----------------------------------------------------------------------------
   A look at the fight you are about to watch. Both lines stand facing each
   other at full height, the odds are two numbers and one word, and the only
   action is pinned where a thumb already is.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.pb { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }

/* --- the stage -------------------------------------------------------------- */

.pb-stage {
  position: relative;
  height: 254px;
  background-size: cover;
  background-position: center 42%;
  box-shadow: inset 0 -70px 60px -20px rgba(4, 6, 12, 0.9);
}

.pb-stage-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: max(var(--s2), env(safe-area-inset-top)) var(--s3) var(--s4);
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.9), transparent);
}
.pb-stage-top .kit-btn.icon.sm { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
.pb-stage-top .kit-btn.icon.sm::before { content: ''; position: absolute; inset: -5px; }

.pb-stage-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fz-body);
  color: var(--text-cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-lv {
  padding: 2px 9px;
  border-radius: var(--rad-pill);
  background: rgba(6, 8, 14, 0.75);
  font-size: var(--fz-small);
  color: var(--text-muted);
}

/* Two lines meeting in the middle. Each figure is nudged up the plane and
   dimmed slightly as it goes back, which is the same depth cue the
   battlefield uses. */
.pb-lines {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  gap: var(--s2);
  padding: 0 var(--s2) var(--s3);
}

.pb-line { display: flex; align-items: flex-end; min-width: 0; overflow: hidden; }
.pb-line.ours { justify-content: flex-end; }
.pb-line.theirs { justify-content: flex-start; }

.pb-fig {
  height: calc(116px - var(--i) * 6px);
  width: auto;
  /* Overlapped on purpose: five figures per side on a phone is a battle
     line, not a row of portraits. */
  margin: 0 -15px;
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 5px 6px rgba(0, 0, 0, 0.7))
    brightness(calc(1 - var(--i) * 0.07));
  animation-delay: calc(var(--i) * 420ms);
}
.pb-fig.is-boss { height: 142px; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.75)); }

.pb-versus {
  align-self: center;
  padding-bottom: var(--s6);
  font-family: var(--font-display);
  font-size: var(--fz-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-200);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85);
}

/* --- the odds --------------------------------------------------------------- */

/* `align-content: start` because a grid's rows stretch to fill a container
   taller than their content, and this one is as tall as the screen. Every
   panel on the prep screen was being inflated to soak up the leftover space —
   the odds panel held three short lines inside 180px of nothing. Panels
   should be the size of what is in them and the slack belongs at the bottom. */
.pb-body {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s4);
}

.pb-odds {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--rad-lg);
  background: var(--panel-face);
  box-shadow: var(--bevel), var(--shelf-md) var(--ink-800), var(--cast-md);
}

.pb-odds-side { display: grid; gap: 1px; }
.pb-odds-side.right { text-align: right; }
.pb-odds-label {
  font-size: var(--fz-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* The two numbers are what this panel is for — the label above each is a
   caption, not the content. They were set a shade larger than body text
   inside a panel six times their height. */
.pb-odds-num { font-size: 2.1rem; line-height: 1.05; color: var(--text-cream); }
.pb-odds-side:first-child .pb-odds-num { color: var(--gold-200); }

/* The grade is its own badge, not text laid over a bar where the fill runs
   straight through it. */
.pb-odds-grade {
  display: block;
  padding: 4px 12px;
  border-radius: var(--rad-pill);
  font-family: var(--font-display);
  font-size: var(--fz-small);
  white-space: nowrap;
  color: var(--ink-900);
  box-shadow: var(--bevel), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.pb-odds.is-easy .pb-odds-grade { background: linear-gradient(180deg, #86f0a6, var(--success-deep)); }
.pb-odds.is-even .pb-odds-grade { background: linear-gradient(180deg, var(--gold-200), var(--gold-400)); }
.pb-odds.is-risky .pb-odds-grade { background: linear-gradient(180deg, #ffce7a, var(--warn-deep)); color: #2a1a02; }
.pb-odds.is-deadly .pb-odds-grade { background: linear-gradient(180deg, #ff8e86, var(--alert-deep)); color: #fff; }

/* --- boss dossier ------------------------------------------------------------- */

.pb-boss { display: flex; gap: var(--s3); align-items: flex-start; }
.pb-boss-art {
  width: 92px;
  flex: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}
.pb-boss-text { display: grid; gap: 4px; min-width: 0; }
.pb-boss-title { font-size: var(--fz-tiny); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-300); }
.pb-note { margin: 0; font-size: var(--fz-small); line-height: 1.45; color: var(--text-muted); }

.pb-counter {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: var(--s2);
  border-radius: var(--rad-sm);
  background: rgba(94, 169, 255, 0.1);
  font-size: var(--fz-small);
  color: var(--text-muted);
}
.pb-counter .gi { flex: none; margin-top: 1px; }

/* --- your line ----------------------------------------------------------------- */

.pb-team { display: flex; gap: 6px; margin-bottom: var(--s3); }
.pb-team-slot { flex: 1; display: grid; justify-items: center; gap: 2px; }
.pb-team-slot .portrait { width: 100%; }
.pb-team-slot.empty {
  min-height: 56px;
  border-radius: var(--rad-sm);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
  place-content: center;
}
.pb-team-plus { font-size: 1.1rem; color: var(--text-dim); }
.pb-team-rank { font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }

/* --- the action ------------------------------------------------------------------ */

.pb-go {
  position: sticky;
  bottom: 0;
  /* Above the body it pins over. A sticky CTA that anything in the scroll
     can paint on top of is worse than no CTA — the player sees half a
     button and cannot tell which half is live. */
  z-index: 2;
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8, 11, 18, 0.97) 60%, transparent);
}
.pb-speed { flex: none; min-width: 62px; }