/* Overlays: everything that sits above the page. One family, three tiers.
   Toast: a quiet raised note that asks for nothing. Sheet: a bottom sheet on a phone and a centred card from 600px, native <dialog> or popover.
   Reveal: a lit stage for the moments worth stopping for (an achievement, a Duel or Challenge result).
   Tokens only: no raw colour, size, radius or shadow. Motion is declared in motion.css and every duration collapses under reduced motion. */

/* ---------- Scrim: night, blurred. Fades with the dialog that owns it. ---------- */
dialog.sheet::backdrop, dialog.reveal-dialog::backdrop, .sheet[popover]::backdrop {
  background: var(--surface-scrim); -webkit-backdrop-filter: blur(var(--blur-scrim)); backdrop-filter: blur(var(--blur-scrim));
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
}
dialog.sheet[open]::backdrop, dialog.reveal-dialog[open]:not(.is-closing)::backdrop, .sheet[popover]:popover-open::backdrop { opacity: 1; }
@starting-style {
  dialog.sheet[open]::backdrop, dialog.reveal-dialog[open]::backdrop, .sheet[popover]:popover-open::backdrop { opacity: 0; }
}
dialog.reveal-dialog::backdrop { background: color-mix(in srgb, var(--surface-canvas) 88%, transparent); }

/* ---------- Sheet ---------- */
.sheet {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface-raised); color: var(--text-strong); box-shadow: var(--shadow-sheet);
}
/* The grabber says "this slides away"; a centred card has no use for it. */
.sheet::before { content: ""; display: block; width: var(--space-7); height: var(--space-1); margin: calc(-1 * var(--space-2)) auto var(--space-4); border-radius: var(--radius-pill); background: var(--border-strong); }
dialog.sheet, .sheet[popover] {
  position: fixed; inset: auto 0 0; margin: 0 auto; opacity: 0; transform: translateY(var(--space-5));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
}
dialog.sheet[open], .sheet[popover]:popover-open { opacity: 1; transform: none; }
@starting-style {
  dialog.sheet[open], .sheet[popover]:popover-open { opacity: 0; transform: translateY(var(--space-5)); }
}
@media (min-width: 601px) {
  dialog.sheet, .sheet[popover] { inset: 0; height: fit-content; margin: auto; padding: var(--space-5); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); transform: scale(.96); }
  dialog.sheet[open], .sheet[popover]:popover-open { transform: none; }
  .sheet::before { display: none; }
  @starting-style {
    dialog.sheet[open], .sheet[popover]:popover-open { opacity: 0; transform: scale(.96); }
  }
}

/* ---------- Toast: a coin for the tone, one line, a lime rail counting down ---------- */
.toast-zone { position: fixed; z-index: var(--z-toast); right: max(var(--space-5), env(safe-area-inset-right)); bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 2 * var(--space-5))); display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; }
.toast {
  --toast-signal: var(--accent); --toast-x: 0px;
  position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; overflow: hidden; pointer-events: auto; touch-action: pan-y;
  padding: var(--space-3) var(--space-1) var(--space-3) var(--space-3); border: 0; border-radius: var(--radius-xl);
  background: var(--surface-raised); color: var(--text-strong); box-shadow: var(--shadow-pop);
  transform: translateX(var(--toast-x)); opacity: var(--toast-opacity, 1);
  animation: toast-in var(--dur-slow) var(--ease-pop) both;
}
.toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-1); background: var(--toast-signal); }
.toast--warning { --toast-signal: var(--text-warning); }
.toast__icon { display: grid; place-items: center; flex: none; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-pill); background: var(--toast-signal); color: var(--text-on-accent); box-shadow: var(--shadow-disc); }
.toast__message { flex: 1; min-width: 0; margin: 0; padding-block: var(--space-2); font: var(--type-label); font-weight: var(--weight-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.toast__close { flex: none; align-self: center; background: none; box-shadow: none; color: var(--text-muted); }
.toast__close:hover { color: var(--text-strong); background: var(--surface-card); filter: none; }
.toast__close:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.toast__timer { position: absolute; inset: auto var(--space-3) var(--space-1) var(--space-7); height: var(--border-width-strong); border-radius: var(--radius-pill); background: var(--toast-signal); opacity: .85; transform-origin: left; animation: toast-countdown var(--toast-duration) linear both; }
.toast.is-paused .toast__timer { animation-play-state: paused; }
.toast.is-dragging { transition: none; }
.toast:not(.is-dragging) { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-out) both; }
@media (max-width: 959px) {
  .toast-zone { left: max(var(--space-4), env(safe-area-inset-left)); right: max(var(--space-4), env(safe-area-inset-right)); width: auto; max-width: 420px; margin-inline: auto; bottom: calc(var(--bar-h) + var(--space-4) + env(safe-area-inset-bottom)); }
  .is-public .toast-zone { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .toast { animation-name: toast-in-up; }
  .toast.is-leaving { animation-name: toast-out-down; }
}
@media (prefers-reduced-motion: reduce) {
  .toast__timer { display: none; }
}

/* The host wraps a reveal's trigger and its dialog without adding a box. */
.reveal-host { display: contents; }

/* ---------- Reveal: a lit stage ----------
   Phones get the whole screen; from 760px a tall card floats on the scrim. Two beams switch on, the object lands, the words follow. */
dialog.reveal-dialog {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--text-strong);
}
dialog.reveal-dialog[open] { display: grid; place-items: center; }
.reveal-stage {
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--gutter) max(var(--space-5), env(safe-area-inset-bottom));
  background: var(--hero-light), url("/assets/pitch/pitch-full-dfae15b1.svg") 50% 0 / auto var(--reveal-pitch, 62%) no-repeat, var(--surface-brand);
  animation: reveal-stage-in var(--dur-slow) var(--ease-out) both;
}
dialog.reveal-dialog.is-closing .reveal-stage { animation: reveal-stage-out var(--dur-base) var(--ease-out) both; }
/* The pitch stays visible at the top and settles into night where the words sit. */
.reveal-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-page) 14%, transparent) 0%, color-mix(in srgb, var(--surface-page) 60%, transparent) 42%, color-mix(in srgb, var(--surface-page) 92%, transparent) 70%, var(--surface-page) 88%); }
.reveal-beams { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.reveal-beams::before, .reveal-beams::after {
  content: ""; position: absolute; top: -12%; width: 78%; height: 86%; background: var(--beam); transform-origin: 50% 0; opacity: 0;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: beam-on 900ms var(--ease-out) 120ms both;
}
.reveal-beams::before { left: -22%; transform: rotate(24deg); }
.reveal-beams::after { right: -22%; transform: rotate(-24deg); animation-delay: 260ms; }
@media (min-width: 760px) {
  .reveal-stage { --reveal-pitch: 66%; width: min(100%, 640px); height: auto; min-height: min(100%, 600px); max-height: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
}

.reveal-stage__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h); flex: none; }
.reveal-kicker { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-accent); }
.reveal-kicker svg { flex: none; }
.reveal-dots { display: flex; gap: var(--space-2); }
.reveal-dots i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--border-strong); transition: background var(--dur-base), transform var(--dur-base) var(--ease-pop); }
.reveal-dots i.is-on { background: var(--accent); transform: scale(1.4); }
.reveal-stage__top > :last-child { margin-right: calc(-1 * var(--space-2)); }

.reveal-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-5); width: 100%; max-width: var(--layout-compact); margin-inline: auto; padding-block: var(--space-5); text-align: center; }
.reveal-slide[hidden] { display: none; }
/* The object and its words sit in the middle of what the action row leaves; the action stays under the thumb. */
.reveal-slide > :first-child { margin-top: auto; }
.reveal-copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.reveal-title { font: var(--type-h1); letter-spacing: var(--tracking-display); color: var(--text-strong); text-wrap: balance; overflow-wrap: anywhere; }
.reveal-lead { font: var(--type-body); color: var(--text-body); text-wrap: pretty; max-width: 36ch; }
.reveal-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.reveal-actions { display: flex; flex: none; flex-direction: column; gap: var(--space-2); width: 100%; max-width: var(--layout-aside); margin-top: auto; padding-top: var(--space-3); }

/* Keep native button sizing stable inside the nested column flex layout. */
.reveal-actions > .button { flex: none; min-height: var(--control-h); max-height: var(--control-h); }
.reveal-actions > .button--large { min-height: var(--control-h-lg); max-height: var(--control-h-lg); }

/* The words and chips rise one after another. */
.reveal-in { animation: reveal-rise var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 360ms); }

/* A medallion: the sunburst turns behind it, the medal drops in and one sheen crosses it. */
.reveal-medal { position: relative; display: grid; place-items: center; width: min(56vw, 232px); aspect-ratio: 1; flex: none; }
.reveal-medal::before { content: ""; position: absolute; inset: -46%; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 15%, transparent) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(closest-side, black 28%, transparent 100%); mask-image: radial-gradient(closest-side, black 28%, transparent 100%); animation: spin 90s linear infinite, fade-in var(--dur-reveal) var(--ease-out) 300ms both; }
.reveal-medal::after { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%; background: var(--halo); animation: halo-breathe 3.2s ease-in-out 1.2s infinite, fade-in var(--dur-reveal) var(--ease-out) 200ms both; }
.reveal-medal__face { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; animation: medal-drop 880ms var(--ease-pop) 220ms both; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.reveal-medal__face img { display: block; width: 100%; height: 100%; }
.reveal-medal__face::after { content: ""; position: absolute; inset: 0; width: 46%; background: linear-gradient(90deg, transparent, var(--sheen), transparent); transform: translateX(-160%) skewX(-18deg); animation: sweep 1100ms var(--ease-out) 1000ms both; pointer-events: none; }

/* Contest result: the two portraits (or the place plate) and the numbers that settle on them. */
.reveal-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-3); width: 100%; }
.reveal-side { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.reveal-side__portrait { position: relative; display: inline-flex; border-radius: var(--radius-avatar); animation: medal-drop 760ms var(--ease-pop) 220ms both; }
.reveal-side.is-winner .reveal-side__portrait { box-shadow: 0 0 0 3px var(--accent), var(--glow-accent); }
.reveal-side.is-winner .reveal-side__portrait::after { content: ""; position: absolute; inset: -40%; z-index: -1; background: var(--halo); animation: halo-breathe 3.2s ease-in-out 1.2s infinite; pointer-events: none; }
.reveal-side:not(.is-winner).is-beaten .reveal-side__portrait { filter: saturate(.6); opacity: .85; }
.reveal-side__name { max-width: 100%; font: var(--type-h3); color: var(--text-strong); overflow-wrap: anywhere; }
.reveal-vs { padding-top: calc((var(--space-8) + var(--space-4) - var(--lh-label)) / 2); font: var(--type-label); font-family: var(--font-display); color: var(--text-muted); }
.reveal-points { display: inline-flex; align-items: baseline; justify-content: center; gap: var(--space-1); min-width: var(--space-9); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-num-l); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.reveal-side.is-winner .reveal-points { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-key); }
.reveal-points small { font: var(--type-caption); font-family: var(--font-body); color: inherit; opacity: .75; }

.reveal-place { position: relative; display: grid; place-items: center; width: min(52vw, 208px); aspect-ratio: 1; flex: none; }
.reveal-place::before { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: var(--halo); animation: halo-breathe 3.2s ease-in-out 1.2s infinite, fade-in var(--dur-reveal) var(--ease-out) 200ms both; }
.reveal-place .plate { --plate-radius: var(--radius-xl); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; font-size: var(--fs-num-2xl); line-height: var(--lh-tight); animation: medal-drop 880ms var(--ease-pop) 220ms both; }
.reveal-place .plate b { font-weight: inherit; }
.reveal-place.is-champion .plate { background: var(--plate-you-face); box-shadow: var(--shadow-plate-you); }
.reveal-tally { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.reveal-tally b { font-size: var(--fs-num-xl); line-height: var(--lh-tight); font-weight: inherit; }
.reveal-tally span { font: var(--type-label); font-family: var(--font-body); color: var(--text-muted); }