/* Contourly — VS intro (2e). Owned by Wave-2 agent A.
   Dark full-bleed colour moment. Base layout lives in app.css §2e; this file
   removes the legacy 430px phone clamp so the dark screen fills the viewport,
   centres the stack as a comfortable stage, scales it up on desktop, and lays
   out the friendly (unrated) variant as the reference side-by-side pairing. */

/* Full-bleed dark stage — undo the .ct-screen 430px max-width clamp. Content is
   already centred by .ct-vs__stack (flex, centred). */
.ct-match--vs { max-width: none; }

/* ---- Friendly (6th+ match today) — coins sit side by side, smaller ---------- */
.ct-vs__stack--friendly {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
}
.ct-vs__stack--friendly .ct-vs__friendly-chip {
  grid-column: 1 / -1;
  justify-self: center;
  margin-bottom: 6px;
}
.ct-vs__stack--friendly .ct-vs__side { grid-row: 2; transform: none; }
.ct-vs__stack--friendly .ct-vs__side--you   { justify-self: end; }
.ct-vs__stack--friendly .ct-vs__side--rival { justify-self: start; }
.ct-vs__stack--friendly .ct-vs__burst {
  grid-row: 2;
  width: 68px; height: 68px; margin: 0;
  animation: none;                       /* friendly "vs" is calm, not pulsing */
}
.ct-vs__stack--friendly .ct-vs__burst .ct-burst__star { display: none; }
.ct-vs__stack--friendly .ct-vs__burst .ct-burst__num { font-size: 26px; color: var(--ct-yellow); }
.ct-vs__stack--friendly .ct-coin--vs { width: 112px; height: 112px; font-size: 44px; }

/* ---- Tablet — a touch more air ---------------------------------------------- */
@media (min-width: 768px) {
  .ct-match--vs .ct-vs__stack { gap: 16px; }
}

/* ---- Desktop ≥1024 — a larger, comfortable centred stage (not a phone column) */
@media (min-width: 1024px) {
  .ct-match--vs .ct-vs__stack { gap: 20px; padding-top: 12px; }
  .ct-match--vs .ct-coin--vs {
    width: 168px; height: 168px; font-size: 66px;
    box-shadow: 0 8px 0 var(--ct-cream-shadow);
  }
  .ct-match--vs .ct-vs__side--you   { transform: rotate(-2deg) translateX(-80px); }
  .ct-match--vs .ct-vs__side--rival { transform: rotate(2deg) translateX(80px); }
  .ct-match--vs .ct-vs__burst { width: 158px; height: 158px; margin: -36px 0; }
  .ct-match--vs .ct-vs__burst .ct-burst__num { font-size: 46px; }
  .ct-match--vs .ct-vs__nametag { font-size: 16px; padding: 6px 18px; }
  .ct-match--vs .ct-vs__rule { font-size: 16px; }
  .ct-match--vs .ct-vs__foot { padding-bottom: 56px; gap: 16px; }
  .ct-match--vs .ct-vs__digit { font-size: 24px; }
  .ct-match--vs .ct-vs__digit.is-active { font-size: 72px; }

  /* friendly desktop — keep it compact and centred */
  .ct-match--vs .ct-vs__stack--friendly { gap: 12px 26px; }
  .ct-match--vs .ct-vs__stack--friendly .ct-coin--vs { width: 132px; height: 132px; font-size: 52px; }
  .ct-match--vs .ct-vs__stack--friendly .ct-vs__side { transform: none; }
  .ct-match--vs .ct-vs__stack--friendly .ct-vs__burst { width: 78px; height: 78px; }
  .ct-match--vs .ct-vs__stack--friendly .ct-vs__burst .ct-burst__num { font-size: 30px; }
}