/* Contourly — match result (2h). Owned by Wave-2 agent A.
   ONE responsive DOM (js/screens/match.js showResult) laid out as a CSS grid of
   tagged areas. Mobile stacks (verdict → the two drawing cards side by side →
   actions → foot); desktop ≥1024 reflows to the reference 3-column layout
   (your card | verdict + meta + actions + foot | rival card). Every optional
   piece (guest banner, rematch-pending, rival-left panel, Countly promo) is its
   own area so present/absent states never break the grid. */

/* ============================================================================
   Layout grid — mobile (base)
   ========================================================================== */
.ct-result__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  align-content: start;
  padding: 16px 18px calc(30px + env(safe-area-inset-bottom, 0px));
  grid-template-areas:
    "head    head"
    "me      opp"
    "actions actions"
    "pending pending"
    "rival   rival"
    "banner  banner"
    "foot    foot"
    "promo   promo";
}

/* area assignments */
.ct-result__area--head    { grid-area: head; }
.ct-result__card--me      { grid-area: me; }
.ct-result__card--opp     { grid-area: opp; }
.ct-result__area--actions { grid-area: actions; }
.ct-result__area--pending { grid-area: pending; }
.ct-result__area--rival   { grid-area: rival; }
.ct-result__area--banner  { grid-area: banner; }
.ct-result__area--foot    { grid-area: foot; }
.ct-result__area--promo   { grid-area: promo; }

/* decorative confetti sits BEHIND the content, scattered in the negative space */
.ct-result__confetti {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ct-result__head,
.ct-result__card--me,
.ct-result__card--opp,
.ct-result__area--actions,
.ct-result__area--pending,
.ct-result__area--foot { position: relative; z-index: 1; }

/* head (verdict burst + meta), snug in the grid */
.ct-result__area--head { padding: 6px 0 2px; margin: 0; }

/* the big yellow winner starburst is a WIN-only flourish — a loss/draw verdict
   stands on its own (per the reference), so drop the halo behind those. */
.ct-result__area--head .ct-reveal__verdict-burst:has(.ct-verdict--loss) .ct-reveal__verdict-halo,
.ct-result__area--head .ct-reveal__verdict-burst:has(.ct-verdict--draw) .ct-reveal__verdict-halo { display: none; }

/* the two drawing cards, side by side on mobile */
.ct-result__layout .ct-draw-card {
  width: 100%;
  max-width: 176px;
  justify-self: center;
  margin: 0;
}
.ct-result__card--me  { transform: rotate(-2deg); }
.ct-result__card--opp { transform: rotate(2deg); }
/* the mobile self-win card drops its corner "win" burst — the big "You win!"
   already carries it. It stays on the rival's card and everywhere on desktop. */
.ct-result__card--me .ct-draw-card--winner-badge { display: none; }

/* actions / foot / banner / promo — reset the app.css single-column offsets so
   they behave as flow grid areas */
.ct-result__area--actions { padding: 6px 0 0; margin: 0; }
.ct-result__area--foot { margin: 0; padding: 10px 4px 0; }
.ct-result__area--banner { margin: 0; }
.ct-result__area--pending { margin: 0; }
.ct-result__area--pending .ct-result__pending { margin: 0; }
.ct-result__area--rival { margin: 0; }
/* promo: app.css floats it absolutely; in the grid it is an in-flow row */
.ct-result__area--promo {
  position: static;
  left: auto; right: auto; bottom: auto;
  margin: 4px 0 0;
  transform: rotate(-.6deg);
}

/* ============================================================================
   Owner polish (2026-07-19) — prominent country name, roomier actions,
   winner-card shine, standalone white guest banner. Mobile-base; desktop
   refinements live in the ≥1024 block below.
   ========================================================================== */

/* Country name: bigger + lifted, and always above the win starburst. Give the
   WIN head extra top room so the yellow star's top spikes never clip off-screen
   (loss/draw drop the halo, so they keep the tight top). */
.ct-result__area--head .ct-result__meta {
  position: relative; z-index: 2;
  margin-top: 12px;
  font-size: 16px;
}
.ct-result__area--head .ct-result__meta-flag { font-size: 21px; }
.ct-result__area--head:has(.ct-verdict:not(.ct-verdict--loss):not(.ct-verdict--draw)) {
  padding-top: 40px;
}

/* More vertical breathing room between the stacked action buttons
   (Rematch / New rival · Share). */
.ct-result__actions { gap: 16px; }

/* Bigger, more noticeable corner "win" burst. */
.ct-draw-card--winner-badge { top: -18px; right: -14px; }
.ct-draw-card--winner-badge .ct-burst { width: 62px; height: 62px; }
.ct-draw-card--winner-badge .ct-burst__num { font-size: 15px; }

/* Winner drawing card SHINE — a stronger sticker shadow plus a few ink-outlined
   sparkle stars that twinkle around the frame. Motion is disabled globally under
   prefers-reduced-motion (app.css §25); the stars then render static. */
.ct-result__layout .ct-draw-card--winner { box-shadow: var(--ct-sh-7); }
.ct-draw-card__sparkle {
  position: absolute; width: 22px; height: 22px; z-index: 3;
  pointer-events: none; overflow: visible;
  animation: ctr-twinkle 1.9s ease-in-out infinite;
}
.ct-draw-card__sparkle--a { top: -11px; left: -9px; }
.ct-draw-card__sparkle--b { bottom: 34px; right: -12px; width: 16px; height: 16px; animation-delay: .6s; }
.ct-draw-card__sparkle--c { top: 47%; left: -13px; width: 13px; height: 13px; animation-delay: 1.1s; }
@keyframes ctr-twinkle {
  0%, 100% { transform: scale(.72) rotate(-8deg); opacity: .5; }
  50%      { transform: scale(1.06) rotate(8deg);  opacity: 1; }
}

/* Guest banner — its own WHITE sticker card sitting apart from the score cards.
   app.css already gives it white bg + radius + rotation; add the ink frame, hard
   shadow and row layout so the old yellow nested banner is gone entirely. */
.ct-result__guest-banner {
  display: flex; align-items: center; gap: 12px;
  border: var(--ct-bw) solid var(--ct-ink);
  box-shadow: var(--ct-sh-5);
}
.ct-result__guest-text { flex: 1; font: 600 12.5px/1.4 var(--ct-font); }
.ct-result__guest-banner .ct-chip--blue { white-space: nowrap; box-shadow: var(--ct-sh-3); }

/* ============================================================================
   Tablet — roomier, cards a little larger
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ct-result__layout { padding-left: 26px; padding-right: 26px; gap: 16px; }
  .ct-result__layout .ct-draw-card { max-width: 210px; }
}

/* ============================================================================
   Desktop ≥1024 — reference 3-column layout
   ========================================================================== */
@media (min-width: 1024px) {
  /* out-specify app.css's .ct-screen--stage.ct-screen--stage-wide (720px) cap */
  .ct-screen--stage.ct-screen--stage-wide.ct-match--result { --ct-stage-max: 1080px; }

  /* fr tracks (not fixed px) so the columns actually grow to fill the stage —
     minmax(0,Npx) would size to content and squeeze the centre buttons. */
  .ct-result__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr);
    align-content: center;
    gap: 22px 40px;
    padding: 40px 32px;
    grid-template-areas:
      "me head    opp"
      "me actions opp"
      "me pending opp"
      "me foot    opp"
      "rival  rival  rival"
      "banner banner banner"
      "promo  promo  promo";
  }

  /* big flanking cards, vertically centred against the middle column */
  .ct-result__layout .ct-draw-card {
    max-width: 300px;
    align-self: center;
    border-radius: var(--ct-r-card-lg);
    box-shadow: var(--ct-sh-7);
    padding: 18px;
  }
  .ct-result__layout .ct-draw-card__name { font-size: 15px; }
  .ct-result__layout .ct-draw-card__score { font-size: 44px; }

  /* centre column stacks the verdict, meta, actions and foot note */
  .ct-result__area--head { padding: 0 0 4px; }
  /* the desktop star is centred in its own column, so drop the mobile win-head
     top padding that keeps the phone layout's spikes on-screen */
  .ct-result__area--head:has(.ct-verdict:not(.ct-verdict--loss):not(.ct-verdict--draw)) { padding-top: 0; }
  /* push the buttons clear of the verdict star's lower spikes */
  .ct-result__area--actions { padding: 2px 0 0; margin-top: 22px; }
  .ct-result__area--foot { padding: 6px 0 0; }
  .ct-result__area--pending { display: flex; justify-content: center; }

  .ct-match--result .ct-verdict { font-size: 56px; text-shadow: 4px 4px 0 var(--ct-white); }
  .ct-match--result .ct-reveal__verdict-halo { inset: -48px; }
  /* keep the meta line clear of (and above) the big verdict star, a touch bigger */
  .ct-result__area--head .ct-result__meta { position: relative; z-index: 2; margin-top: 40px; font-size: 17px; }
  .ct-result__area--head .ct-result__meta-flag { font-size: 22px; }

  /* desktop shows the winner "win!" burst on whichever card won — including
     your own card (mobile hides it on the self-win card) */
  .ct-result__card--me .ct-draw-card--winner-badge { display: block; }

  /* full-width rows below the trio, centred + capped so they don't sprawl */
  .ct-result__area--rival,
  .ct-result__area--banner,
  .ct-result__area--promo {
    justify-self: center;
    width: 100%;
    max-width: 520px;
  }
  .ct-result__area--promo { margin-top: 10px; }
}