/* ═══════════════════════════════════════════════════════════════════
   BATTLE OF THE BEATS · the only things Knox Vision V7 does not carry

   Everything V7 has uses V7's name: .btn-accent .btn-ghost .btn-danger
   .b-sm .b-lg · .field .f-label .f-help .f-err · .well .well-input .pw
   .peek · .card .tile · .kpi .klabel .kval .kdelta · .t6 .t6-wrap
   .scrollx · .status .live .done .wait .attn · .tgl · .seg .seg-b
   .seg-pill · .chip .tag · .empty · .banner · .toast · .spin · .gate
   .gate-lede · .mark .wordmark .sub · .rows .stack .row .grid2 .grid3
   · .note · .eyebrow · .modal .scrim.

   Below: the score selector, the confirmed figure, and the stage wall.
   Nothing here redefines a seed or a system token.
   ═══════════════════════════════════════════════════════════════════ */

/* ── page shells ─────────────────────────────────────────────────── */
.botb-wrap{
  width:100%; max-width:520px; margin:0 auto;
  padding:var(--sp-5) var(--sp-4) var(--sp-7);
  padding-bottom:calc(var(--sp-7) + env(safe-area-inset-bottom));
}
.botb-wrap.is-wide{ max-width:1120px; }
.botb-mid{
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-4) 0;
}

/* ── the 1 to 10 selector. V7 has no rating control. ─────────────── */
.botb-scores{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:var(--sp-2); margin:var(--sp-4) 0 var(--sp-2);
}
.botb-score{
  position:relative; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-num); font-size:var(--fs-xl); font-weight:400;
  font-variant-numeric:tabular-nums; line-height:1;
  color:var(--text); background:var(--ctrl);
  border:1px solid transparent; border-radius:var(--r-xs);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .16s cubic-bezier(.33,1,.68,1),
             color .16s cubic-bezier(.33,1,.68,1),
             transform .16s cubic-bezier(.33,1,.68,1);
}
.botb-score::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; background:var(--edge-ring);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
/* Hover only where a real pointer exists. On a phone the tap leaves a sticky
   hover, and hover out-specifies the pressed state, so the score the guest
   just chose renders unselected. Caught in the render pass 31-08-2026. */
@media (hover:hover){
  .botb-score:hover:not([disabled]):not([aria-pressed="true"]){ background:var(--ctrl-hi); }
}
.botb-score:active:not([disabled]){ transform:translateY(1px); }
.botb-score[aria-pressed="true"],
.botb-score[aria-pressed="true"]:hover{
  background:var(--accent-lit); color:var(--on-accent); font-weight:600;
}
.botb-score[disabled]{ opacity:.45; cursor:not-allowed; }
.botb-score:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:2px; }

.botb-ends{
  display:flex; justify-content:space-between;
  font-family:var(--f-ctrl); font-size:var(--fs-caps); font-weight:600;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted);
}

/* ── the confirmed score ─────────────────────────────────────────── */
.botb-figure{
  font-family:var(--f-num); font-size:clamp(72px,22vw,120px);
  line-height:.9; color:var(--accent-text); font-variant-numeric:tabular-nums;
}

/* ── running order row. Denser than .tile, carries a live state. ─── */
.botb-act{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-3);
  align-items:center; padding:var(--sp-3) var(--sp-4);
  background:var(--surface-raise); border:1px solid var(--line);
  border-radius:var(--r-xs); margin-bottom:9px;
}
.botb-act.is-open{ border-color:var(--accent-lit); background:var(--accent-tint); }
.botb-act .o{ font-family:var(--f-num); font-size:var(--fs-lg); color:var(--muted);
  font-variant-numeric:tabular-nums; min-width:26px; }
.botb-act.is-open .o{ color:var(--accent-text); }
.botb-act .t{ font-family:var(--f-body); font-size:var(--fs-md); font-weight:600; }
.botb-act .m{ font-family:var(--f-ctrl); font-size:var(--fs-caps); color:var(--muted);
  margin-top:3px; letter-spacing:.04em; }

/* ── standings, guest side ───────────────────────────────────────── */
.botb-res{ display:grid; grid-template-columns:26px 1fr auto;
  gap:var(--sp-3); align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line); }
.botb-res:last-child{ border-bottom:none; }
.botb-res .r{ font-family:var(--f-num); font-size:var(--fs-md); color:var(--muted); }
.botb-res:first-child .r,.botb-res:first-child .a{ color:var(--accent-text); }
.botb-res .n{ font-family:var(--f-body); font-size:var(--fs-md); font-weight:600; }
.botb-res .s{ font-family:var(--f-ctrl); font-size:var(--fs-caps); color:var(--muted);
  letter-spacing:var(--ls-caps); text-transform:uppercase; }
.botb-res .a{ font-family:var(--f-num); font-size:var(--fs-xl);
  font-variant-numeric:tabular-nums; }

/* ── stage wall ──────────────────────────────────────────────────── */
.botb-stage{ min-height:100svh; min-height:100dvh; display:flex;
  flex-direction:column; justify-content:center; padding:clamp(30px,5vw,80px); }
.botb-stage-mark{ position:fixed; top:clamp(24px,3vw,48px); left:clamp(30px,5vw,80px);
  font-family:var(--f-brand); font-size:clamp(14px,1.6vw,24px);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); }
.botb-stage-mark span{ color:var(--accent-text); }
.botb-big{ font-family:var(--f-hero); text-transform:uppercase; line-height:.92;
  font-size:clamp(50px,10vw,168px); text-wrap:balance; letter-spacing:var(--ls-display); }
.botb-big span{ color:var(--accent-text); display:block; }
.botb-lead{ font-family:var(--f-body); color:var(--muted);
  font-size:clamp(15px,1.8vw,26px); margin-top:clamp(18px,2vw,34px); }
.botb-board{ display:flex; flex-direction:column; margin-top:clamp(24px,3vw,48px); }
.botb-brow{ display:grid; grid-template-columns:clamp(46px,5vw,90px) 1fr auto;
  gap:clamp(16px,2.5vw,40px); align-items:baseline;
  padding:clamp(12px,1.4vw,22px) 0; border-bottom:1px solid var(--line); }
.botb-brow:last-child{ border-bottom:none; }
.botb-brow .r{ font-family:var(--f-num); font-size:clamp(28px,4vw,64px);
  color:var(--muted); font-variant-numeric:tabular-nums; line-height:1; }
.botb-brow.is-top .r,.botb-brow.is-top .a{ color:var(--accent-text); }
.botb-brow .n{ font-family:var(--f-hero); text-transform:uppercase;
  font-size:clamp(24px,3.6vw,58px); line-height:1; }
.botb-brow .v{ font-family:var(--f-ctrl); font-size:clamp(10px,1vw,14px);
  color:var(--muted); letter-spacing:var(--ls-caps); text-transform:uppercase;
  margin-top:clamp(6px,.7vw,12px); }
.botb-brow .a{ font-family:var(--f-num); font-size:clamp(32px,4.8vw,76px);
  line-height:1; font-variant-numeric:tabular-nums; }

.botb-hide{ display:none !important; }

@media (max-width:600px){
  .botb-figure{ font-size:clamp(64px,26vw,110px); }
}