/* ======================================================================
   BATTLE SCREEN (2, 3 or 4 streamers). Loaded after app.css + launch.css, so it only needs .vs.bt to win.
   Everything that moves uses transform / opacity / flex-grow, so it stays smooth on a phone.
   Team colours come from the theme: a = primary, b = secondary, c = tertiary, d = gold.
   ====================================================================== */
.vs.bt { --ta: var(--primary-accent, #00f2fe); --tb: var(--secondary-accent, #ff0844); --tc: var(--tertiary-accent, #7828c8); --td: var(--gold-accent, #ffd700); }
.vs.bt .panel.a { --c: var(--ta); } .vs.bt .panel.b { --c: var(--tb); } .vs.bt .panel.c { --c: var(--tc); } .vs.bt .panel.d { --c: var(--td); }

/* ---- layout: 2 side by side; 3 = two on top and one below; 4 = a 2 x 2 grid ---- */
.vs.bt .panels { display:grid; gap:3px; height:auto; background:#050507; position:relative; grid-template-columns:1fr 1fr; }
.vs.bt .panels.n2 { height:66cqw; }
.vs.bt .panels.n3, .vs.bt .panels.n4 { grid-template-rows:44cqw 44cqw; }
.vs.bt .panels.n3 .panel.c { grid-column:1 / -1; }
.vs.bt .panel { flex:none; min-width:0; min-height:0; width:auto; max-width:none; display:block; }   /* (the generic .panel card rule would cap it at 340px) */
@media (min-width:820px) and (min-aspect-ratio:1/1) {
  .vs.bt .panels.n2 { height:28.125cqw; }
  .vs.bt .panels.n3, .vs.bt .panels.n4 { grid-template-rows:18.5cqw 18.5cqw; }
  .vs.bt .panels.n3 .panel.c { grid-column:1 / -1; width:50%; justify-self:center; }
}

/* ---- score bar: one piece per streamer, white line-work, glass ---- */
.vs.bt .vshud { position:relative; padding:0 0 2px; }
.vs.bt .scores { display:flex; position:relative; height:32px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.45); gap:2px; }
.vs.bt .scores .seg { position:relative; inset:auto; flex:1 1 0; min-width:0; clip-path:none; padding:0 10px; display:flex; align-items:center; transition:flex-grow .8s cubic-bezier(.2,.9,.3,1); overflow:hidden; }
.vs.bt .scores .seg.b { justify-content:flex-end; }
.vs.bt .scores .seg.c { background:linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 60%, #fff)); }
.vs.bt .scores .seg.d { background:linear-gradient(270deg, var(--td), color-mix(in srgb, var(--td) 60%, #fff)); justify-content:flex-end; }
.vs.bt .scores .seg span { font-weight:900; font-size:13px; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); white-space:nowrap; }
.vs.bt .scores .seg::after { content:''; position:absolute; inset:0 0 50% 0; background:linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events:none; }   /* glossy top half */
.vs.bt .scores .spark { z-index:3; }
.vs.bt .timer { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); z-index:6; margin:0; padding:3px 14px; font-weight:900; font-size:15px; letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; color:#fff; background:rgba(8,8,12,.78); border:1.5px solid rgba(255,255,255,.55); border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vs.bt .timer.hot { color:#ff6b81; border-color:#ff3b5c; animation:btHot .8s ease-in-out infinite; }
@keyframes btHot { 0%,100% { transform:translateX(-50%) scale(1); box-shadow:0 0 0 0 rgba(255,59,92,.65); } 50% { transform:translateX(-50%) scale(1.12); box-shadow:0 0 0 9px rgba(255,59,92,0); } }

/* ---- VS badge: a ring of fire at the point where the streams meet ---- */
.vs.bt .sw { position:absolute; left:50%; top:50%; width:clamp(46px, 14cqw, 74px); height:clamp(46px, 14cqw, 74px); margin:0; transform:translate(-50%,-50%); z-index:6; border-radius:50%; background:radial-gradient(circle at 50% 38%, #3a0f1c, #0b0508 70%); border:2px solid #fff; box-shadow:0 0 14px 3px rgba(255,120,40,.65), 0 0 30px 8px rgba(255,40,90,.35); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.vs.bt .sw b { position:relative; z-index:2; font-size:clamp(17px, 5.2cqw, 28px); font-weight:900; font-style:italic; letter-spacing:-.06em; color:#fff; text-shadow:0 0 8px #ff9d2e, 0 2px 0 #b3123a; }
.vs.bt .sw .ring { position:absolute; inset:-7px; border-radius:50%; background:conic-gradient(from 0deg, #ff3b5c, #ffb020, #fff3b0, #ffb020, #ff3b5c); -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%); mask:radial-gradient(circle, transparent 62%, #000 64%); animation:btSpin 2.4s linear infinite; opacity:.95; }
.vs.bt .sw .fl { position:absolute; left:50%; bottom:78%; width:34%; height:46%; margin-left:-17%; border-radius:50% 50% 50% 50% / 70% 70% 30% 30%; background:radial-gradient(ellipse at 50% 85%, #fff6b0 0, #ffb020 38%, rgba(255,59,92,0) 72%); filter:blur(1.5px); transform-origin:50% 100%; animation:btFlame 1s ease-in-out infinite; }
.vs.bt .sw .f1 { margin-left:-48%; animation-delay:-.3s; width:28%; } .vs.bt .sw .f3 { margin-left:20%; animation-delay:-.6s; width:28%; }
@keyframes btSpin { to { transform:rotate(360deg); } }
@keyframes btFlame { 0%,100% { transform:scale(.8,.75) translateY(2px); opacity:.75; } 50% { transform:scale(1.1,1.3) translateY(-3px); opacity:1; } }

/* ---- panels: team-coloured border, rank, streak, leader pulse ---- */
.vs.bt .panel::after { box-shadow:inset 0 0 0 2.5px var(--c); }
.vs.bt .panel .pulse { position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:2px; opacity:0; box-shadow:inset 0 0 0 4px var(--c), inset 0 0 26px 6px var(--c); }
.vs.bt .panel.lead1 .pulse { animation:btLead 1.4s ease-in-out infinite; }
@keyframes btLead { 0%,100% { opacity:.15; transform:scale(1); } 50% { opacity:1; transform:scale(1.012); } }
.vs.bt .panel.out { filter:grayscale(1) brightness(.5); }
.vs.bt .panel .rk { position:absolute; left:6px; bottom:6px; z-index:4; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; color:#fff; background:color-mix(in srgb, var(--c) 78%, #000); border:1px solid rgba(255,255,255,.55); }
.vs.bt .panel .rk[data-rank="1"] { background:linear-gradient(135deg, #ffd34d, #ff9d2e); color:#2a1500; }
.vs.bt .panel .nm { left:auto; right:6px; max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(8,8,12,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vs.bt .panel .streak { position:absolute; left:6px; top:6px; z-index:4; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(135deg, #ff7a18, #ff3b5c); box-shadow:0 0 12px rgba(255,90,40,.6); animation:btStreak 1.6s ease-in-out infinite alternate; }
.vs.bt .panel .streak[hidden] { display:none; }
@keyframes btStreak { to { transform:scale(1.07); box-shadow:0 0 18px rgba(255,90,40,.9); } }
.vs.bt .panel.win .pulse { opacity:1; animation:btWin 1.2s ease-in-out infinite alternate; box-shadow:inset 0 0 0 4px #ffd34d, inset 0 0 36px 10px #ffd34d; }
@keyframes btWin { to { opacity:.5; } }
.vs.bt .vschip { top:auto; bottom:40px; }

/* ---- support buttons + end button ---- */
.vs.bt .support { display:flex; flex-wrap:wrap; gap:6px; padding:8px 8px 0; }
.vs.bt .support button { flex:1 1 40%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs.bt .support .sc { background:color-mix(in srgb, var(--tc) 75%, #000); } .vs.bt .support .sd { background:color-mix(in srgb, var(--td) 70%, #000); }
.vs.bt .support[hidden] { display:none; }

@media (prefers-reduced-motion:reduce) {
  .vs.bt .sw .ring, .vs.bt .sw .fl, .vs.bt .timer.hot, .vs.bt .panel.lead1 .pulse, .vs.bt .panel .streak, .vs.bt .panel.win .pulse { animation:none; }
  .vs.bt .panel.lead1 .pulse { opacity:1; }
  .vs.bt .scores .seg { transition:none; }
}

/* challenge sheet: tap streamers to pick up to three */
.item.vsp { border:1.5px solid transparent; } .item.vsp.on { border-color:var(--primary-accent, #00f2fe); background:color-mix(in srgb, var(--primary-accent, #00f2fe) 14%, transparent); }
.vsmark { width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-weight:900; } .item.vsp.on .vsmark { background:var(--primary-accent, #00f2fe); color:#001; border-color:transparent; }

/* the header already has the sound button, so the "Tap for sound" pill must not sit on top of the score bar */
.invs .unmute { top:auto; bottom:112px; }
/* names and ranks stay on the OUTER edge of each square (left column left, right column right), so they never run into the VS badge */
.vs.bt .panel .nm { left:6px; right:auto; bottom:32px; max-width:calc(100% - 12px); }
.vs.bt .panel.b .nm, .vs.bt .panel.d .nm { left:auto; right:6px; }
.vs.bt .panel.b .rk, .vs.bt .panel.d .rk { left:auto; right:6px; }
.vs.bt .panels.n3 .panel.c .nm { left:6px; right:auto; }
.vs.bt .panels.n3 .panel.c .rk { left:6px; right:auto; }
.vs.bt .panel .streak { top:6px; }
.vs.bt .panel.b .streak, .vs.bt .panel.d .streak { left:auto; right:6px; }

@media (min-width:820px) and (min-aspect-ratio:1/1) { .vs.bt .support { margin-left:40%; } }   /* the chat lives on the left of a wide stage; keep the gift buttons clear of it */