/* Contourly — reveal, "the big moment" (2g). Owned by Wave-2 agent A.
   The reveal DOM + phase machine live in js/reveal.js (createReveal) — it mounts
   its OWN inner `.ct-screen` inside the match stage. This file only frames that
   inner screen: full-bleed on mobile, a comfortable centred card on desktop, on
   the app paper dot-grid. All phase motion/reduced-motion behaviour is unchanged. */

.ct-match--reveal { --ct-stage-max: 480px; }
.ct-match--reveal > .ct-screen { margin: 0; }

/* reveal.js shows/hides its (class-less) player-panel wrapper via inline
   `style.display = '' | 'none'`. Setting it back to '' reverts the element to its
   default `block`, which drops the flex column and collapses the panel (canvas)
   to zero height. Re-assert the flex column here so the panel fills — the inline
   `display:none` still wins to hide the wrapper at the intro/verdict phases. */
.ct-match--reveal div:has(> .ct-reveal__panel) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 768px) {
  .ct-match--reveal { --ct-stage-max: 560px; }
}

/* Desktop ≥1024 — a larger, framed centred stage (not a 430px phone column). */
@media (min-width: 1024px) {
  .ct-match--reveal { --ct-stage-max: 660px; padding: 22px 0; }
  .ct-match--reveal > .ct-screen {
    max-width: 660px;
    min-height: min(84dvh, 860px);
    border: var(--ct-bw) solid var(--ct-ink);
    border-radius: var(--ct-r-screen);
    box-shadow: var(--ct-sh-9);
    overflow: hidden;
  }

  /* a touch more presence for the headline moments on the bigger stage */
  .ct-match--reveal .ct-reveal__top { padding: 14px 22px; }
  .ct-match--reveal .ct-reveal__intro-title { font-size: 32px; }
  .ct-match--reveal .ct-reveal__panel { margin: 0 18px; }
  .ct-match--reveal .ct-reveal__player { padding: 6px 22px 8px; }
  .ct-match--reveal .ct-reveal__foot { padding: 16px 24px 30px; }
  .ct-match--reveal .ct-reveal__duo .ct-draw-card { width: 168px; }
}

/* ============================================================================
   Owner polish (2026-07-19) — verdict lockup + winner/loser separation (2g).
   The yellow burst behind the verdict headline used to render short + low (the
   SVG had no intrinsic size, so `inset:-52px` stretched it to the text box and
   the "<name> takes it" line rode into the top spikes). Pin the star to a big
   SQUARE sitting a little HIGHER than the text, and cap the headline width so a
   long rival name wraps to a tidy block that stays inside the star's body.
   ========================================================================== */
.ct-match--reveal .ct-reveal__verdict-burst {
  display: flex; align-items: center; justify-content: center;
}
.ct-match--reveal .ct-reveal__verdict-burst .ct-verdict {
  position: relative; z-index: 1;
  max-width: 230px;
  text-align: center;
  line-height: 1.04;
}
.ct-match--reveal .ct-reveal__verdict-halo {
  inset: auto;
  left: 50%; top: 50%;
  width: 328px; height: 328px;
  margin-left: -164px;
  margin-top: -180px;   /* star centre a little above the text → words rest in the body */
}

/* Separate the winner from the loser in the mini-card duo: winner emphasised
   (fuller shadow), loser de-emphasised (dimmer + a touch smaller). A draw leaves
   both untouched (neither score carries the --loser class). */
.ct-match--reveal .ct-reveal__duo .ct-draw-card:not(:has(.ct-draw-card__score--loser)) {
  box-shadow: var(--ct-sh-7);
  z-index: 1;
}
.ct-match--reveal .ct-reveal__duo .ct-draw-card:has(.ct-draw-card__score--loser) {
  opacity: .58;
  box-shadow: var(--ct-sh-2);
  width: 126px;
}