/* Approved grid-takeover celebration (Slice 5). Shared by production and the Slice 4 lab. */

.celeb-host {
  --celeb-dim: 280ms;
  --celeb-enter: 500ms;
  --celeb-exit: 420ms;
  --celeb-ease: linear;
  --celeb-ease-out: linear;
  --celeb-veil-mix: 32%;
  --celeb-veil-color: #ffffff;
  --celeb-backdrop: 2px;
  --celeb-title-size: 4.47cqmin;
  --celeb-sub-size: 3.65cqmin;
  --celeb-track: 0.1em;
  --celeb-title-w: 800;
  --celeb-type: var(--navy);
  --celeb-card-inset: 3px;
  --celeb-border-ratio: 0.07;
  --celeb-radius-ratio: 0.12;
  --celeb-swirl-ms: 3s;
  --celeb-stretch: 0px;
  --celeb-stretch-ms: 300ms;
  --celeb-gear-spin: 19.5s;
  --celeb-gear-outset: 8%;
  --celeb-gear-grow: 0.71cqmin;
  --celeb-logo-size: 26%;
  --celeb-logo-fill: var(--accent-gradient);
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.celeb-host:not([data-phase="idle"]) {
  pointer-events: auto;
}

.celeb-host[data-phase="enter"],
.celeb-host[data-phase="hold"] {
  cursor: pointer;
}

.celeb-host[data-endgame="on"][data-phase="enter"],
.celeb-host[data-endgame="on"][data-phase="stretch"],
.celeb-host[data-endgame="on"][data-phase="hold"] {
  cursor: default;
}

.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"])) {
  position: relative;
  overflow: hidden;
}

.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"])) .playfield-inner {
  overflow: visible;
}

.board-column:has(.celeb-host[data-endgame="on"][data-stack="front"]),
.board-stack:has(.celeb-host[data-endgame="on"][data-stack="front"]),
.board-column:has(.celeb-host[data-endgame="on"][data-phase="hold"]),
.board-column:has(.celeb-host[data-endgame="on"][data-phase="stretch"]),
.board-column:has(.celeb-host[data-endgame="on"][data-phase="exit"]),
.board-stack:has(.celeb-host[data-endgame="on"][data-phase="hold"]),
.board-stack:has(.celeb-host[data-endgame="on"][data-phase="stretch"]),
.board-stack:has(.celeb-host[data-endgame="on"][data-phase="exit"]) {
  z-index: 80;
}

.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"])) .rail-block,
.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"])) .rail-actions,
body:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"])) .rail-msg {
  transition: opacity 280ms ease;
}

.playfield:has(.celeb-host[data-endgame="on"][data-veil="on"]) .rail-block,
.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"]):not([data-phase="enter"])) .rail-block,
.playfield:has(.celeb-host[data-endgame="on"][data-veil="on"]) .rail-actions,
.playfield:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"]):not([data-phase="enter"])) .rail-actions,
body:has(.celeb-host[data-endgame="on"][data-veil="on"]) .rail-msg,
body:has(.celeb-host[data-endgame="on"]:not([data-phase="idle"]):not([data-phase="enter"])) .rail-msg {
  opacity: 0;
  pointer-events: none;
}

.celeb-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.celeb-host:not([data-phase="idle"]) .celeb-layer {
  visibility: visible;
}

.celeb-veil {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  background: color-mix(in srgb, var(--celeb-veil-color) var(--celeb-veil-mix), transparent);
  backdrop-filter: blur(var(--celeb-backdrop, 0px));
  -webkit-backdrop-filter: blur(var(--celeb-backdrop, 0px));
}

.celeb-host[data-endgame="on"] .celeb-veil {
  top: calc(-1 * var(--celeb-veil-out-top, 0px));
  left: calc(-1 * var(--celeb-veil-out-left, 0px));
  right: calc(-1 * var(--celeb-veil-out-right, 0px));
  bottom: calc(-1 * var(--celeb-veil-out-bottom, 0px));
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.celeb-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: celeb-confetti-in 420ms ease-out both;
}

.celeb-confetti-burst {
  position: fixed;
  z-index: 55;
  pointer-events: none;
}

@keyframes celeb-confetti-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.celeb-host[data-phase="dim"] .celeb-veil {
  animation: celeb-veil-in var(--celeb-dim) var(--celeb-ease) both;
}

.celeb-host[data-endgame="on"][data-phase="enter"]:not([data-veil="on"]) .celeb-veil {
  opacity: 0;
  animation: none;
}

.celeb-host[data-endgame="on"][data-phase="enter"][data-veil="on"] .celeb-veil {
  animation: celeb-veil-in var(--celeb-dim) var(--celeb-ease) both;
}

.celeb-host[data-phase="enter"] .celeb-veil,
.celeb-host[data-phase="stretch"] .celeb-veil,
.celeb-host[data-phase="hold"] .celeb-veil,
.celeb-host[data-phase="exit"] .celeb-veil {
  opacity: 1;
}

.celeb-host[data-phase="veil-out"] .celeb-veil {
  animation: celeb-veil-out var(--celeb-dim) cubic-bezier(0.22, 0, 0.18, 1) both;
}

.celeb-card-slot {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.celeb-host[data-endgame="on"][data-phase="enter"]:not([data-stack="front"]) .celeb-card-slot {
  clip-path: polygon(
    var(--celeb-aperture-left, 0px) 0,
    calc(100% - var(--celeb-aperture-right, 0px)) 0,
    calc(100% - var(--celeb-aperture-right, 0px)) var(--celeb-aperture-bottom, 100%),
    var(--celeb-aperture-left, 0px) var(--celeb-aperture-bottom, 100%)
  );
}

.celeb-host:not([data-phase="idle"]) .celeb-card {
  pointer-events: auto;
}

.celeb-card {
  position: absolute;
  inset: var(--celeb-card-inset);
  z-index: 2;
  container-type: size;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
}

.celeb-host[data-phase="enter"] .celeb-card,
.celeb-host[data-phase="stretch"] .celeb-card,
.celeb-host[data-phase="hold"] .celeb-card,
.celeb-host[data-phase="exit"] .celeb-card {
  visibility: visible;
}

.celeb-host[data-phase="enter"] .celeb-card {
  animation-duration: var(--celeb-enter);
  animation-timing-function: var(--celeb-ease);
  animation-fill-mode: both;
}

.celeb-host[data-phase="enter"][data-enter="slit-v"] .celeb-card {
  animation-name: celeb-slit-in-vertical;
}

.celeb-host[data-phase="enter"][data-enter="slit-h"] .celeb-card {
  animation-name: celeb-slit-in-horizontal;
}

.celeb-host[data-phase="enter"][data-enter="scale-center"] .celeb-card {
  animation-name: celeb-scale-in-center;
}

.celeb-host[data-phase="enter"][data-enter="scale-v-center"] .celeb-card {
  animation-name: celeb-scale-in-ver-center;
}

.celeb-host[data-phase="enter"][data-enter="scale-v-bottom"] .celeb-card {
  animation-name: celeb-scale-in-ver-bottom;
  transform-origin: 50% 100%;
}

.celeb-host[data-phase="enter"][data-enter="slide-top"] .celeb-card {
  animation-name: celeb-slide-in-top;
}

.celeb-host[data-phase="enter"][data-enter="slide-bottom"] .celeb-card {
  animation-name: celeb-slide-in-bottom;
}

.celeb-host[data-phase="enter"][data-enter="bck-top"] .celeb-card {
  animation-name: celeb-slide-in-bck-top;
}

.celeb-host[data-phase="enter"][data-enter="bck-center"] .celeb-card {
  animation-name: celeb-slide-in-bck-center;
}

.celeb-host[data-phase="enter"][data-enter="bck-bottom"] .celeb-card {
  animation-name: celeb-slide-in-bck-bottom;
}

.celeb-host[data-phase="enter"][data-enter="elliptic-bottom-fwd"] .celeb-card {
  animation-name: celeb-slide-in-elliptic-bottom-fwd;
}

.celeb-host[data-endgame="on"] .celeb-card-slot {
  perspective: var(--celeb-perspective, 800px);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.celeb-host[data-endgame="on"] {
  --celeb-rise-start: 22%;
  --celeb-arc-peak: -18%;
  --celeb-far-scale: 0.48;
  --celeb-approach-z: -180px;
  --celeb-apex-z: -140px;
  --celeb-perspective: 800px;
}

.celeb-host[data-endgame="on"][data-phase="enter"] .celeb-card {
  animation-name: celeb-endgame-rise, celeb-endgame-approach;
  animation-duration: var(--celeb-enter), var(--celeb-enter);
  animation-delay: 0ms, 0ms;
  animation-timing-function: linear, linear;
  animation-fill-mode: both, both;
  transform-origin: 50% 100%;
  opacity: 1;
}

.celeb-host[data-phase="stretch"] .celeb-card,
.celeb-host[data-phase="hold"] .celeb-card {
  opacity: 1;
  transform: none;
  translate: none;
  scale: none;
}

.celeb-host[data-phase="exit"] .celeb-card {
  animation: celeb-card-leave var(--celeb-exit) var(--celeb-ease-out) both;
}

.celeb-card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: none;
  --celeb-card-size: 100cqmin;
  --celeb-card-border: calc(var(--celeb-card-size) * var(--celeb-border-ratio));
  --celeb-card-radius: calc(var(--celeb-card-size) * var(--celeb-radius-ratio));
  --celeb-card-inner-radius: max(0px, calc(var(--celeb-card-radius) - var(--celeb-card-border)));
  border-radius: var(--celeb-card-radius);
}

.celeb-card-swirl {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.celeb-card-swirl-spin {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    var(--accent-0),
    var(--accent-25),
    var(--accent-50),
    var(--accent-75),
    var(--accent-100),
    var(--accent-75),
    var(--accent-50),
    var(--accent-25),
    var(--accent-0)
  );
  animation: celeb-swirl-spin var(--celeb-swirl-ms) linear infinite;
}

.celeb-host[data-swirl="pan"] .celeb-card-swirl-spin,
.celeb-host[data-swirl="pan-x"] .celeb-card-swirl-spin,
.celeb-host[data-swirl="pan-y"] .celeb-card-swirl-spin {
  inset: 0;
}

.celeb-host[data-swirl="pan"] .celeb-card-swirl-spin {
  background-size: 400% 400%;
  animation-name: celeb-bg-pan;
}

.celeb-host[data-swirl="pan-x"] .celeb-card-swirl-spin {
  background-size: 400% 100%;
  animation-name: celeb-bg-pan-x;
}

.celeb-host[data-swirl="pan-y"] .celeb-card-swirl-spin {
  background-size: 100% 400%;
  animation-name: celeb-bg-pan-y;
}

.celeb-host[data-swirl="flow"] .celeb-card-swirl-spin {
  animation-name: celeb-swirl-spin;
}

.celeb-card-inner {
  position: absolute;
  z-index: 1;
  inset: var(--celeb-card-border);
  border-radius: var(--celeb-card-inner-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8cqmin;
  background: var(--card);
  box-shadow: none;
}

.celeb-copy {
  position: relative;
  z-index: 2;
  width: min(88%, 100%);
  margin: 0;
  text-align: center;
  color: var(--celeb-type);
}

.celeb-host:not([data-endgame="on"]) .celeb-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: black;
}

.celeb-cheer {
  margin: 0 0 2.6cqmin;
  font-family: var(--font-card-number);
  font-weight: 600;
  font-size: 12.6cqmin;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-0);
  transform-origin: 50% 50%;
}

.celeb-host[data-kind="bonus"] .celeb-cheer {
  font-size: 8.35cqmin;
  letter-spacing: -0.045em;
}

.celeb-cheer:empty,
.celeb-host[data-endgame="on"] .celeb-cheer {
  display: none;
}

.celeb-logo {
  display: none;
  position: relative;
  width: var(--celeb-logo-size);
  aspect-ratio: 1;
  margin: 0 auto 4cqmin;
  border: 0;
  transform-origin: 50% 50%;
  overflow: visible;
}

.celeb-host[data-logo="on"] .celeb-logo {
  display: block;
}

.celeb-logo-gear {
  position: absolute;
  inset: calc(-1 * var(--celeb-gear-outset) - var(--celeb-gear-grow));
  background: var(--celeb-logo-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='10 24 51 51' preserveAspectRatio='xMidYMid meet' shape-rendering='geometricPrecision'%3E%3Cpath fill='%23FFFFFF' stroke='none' fill-rule='nonzero' d='M35.5 29.5 A20 20 0 1 1 35.5 69.5 A20 20 0 1 1 35.5 29.5 Z M32.55 24 L38.45 24 Q39.6 24 39.6 25.15 L39.6 30.25 Q39.6 31.4 38.45 31.4 L32.55 31.4 Q31.4 31.4 31.4 30.25 L31.4 25.15 Q31.4 24 32.55 24 Z M51.445 29.383 L55.617 33.555 Q56.43 34.368 55.617 35.181 L52.011 38.787 Q51.198 39.601 50.385 38.787 L46.213 34.615 Q45.399 33.802 46.213 32.989 L49.819 29.383 Q50.632 28.57 51.445 29.383 Z M61 46.55 L61 52.45 Q61 53.6 59.85 53.6 L54.75 53.6 Q53.6 53.6 53.6 52.45 L53.6 46.55 Q53.6 45.4 54.75 45.4 L59.85 45.4 Q61 45.4 61 46.55 Z M55.617 65.445 L51.445 69.617 Q50.632 70.43 49.819 69.617 L46.213 66.011 Q45.399 65.198 46.213 64.385 L50.385 60.213 Q51.198 59.399 52.011 60.213 L55.617 63.819 Q56.43 64.632 55.617 65.445 Z M38.45 75 L32.55 75 Q31.4 75 31.4 73.85 L31.4 68.75 Q31.4 67.6 32.55 67.6 L38.45 67.6 Q39.6 67.6 39.6 68.75 L39.6 73.85 Q39.6 75 38.45 75 Z M19.555 69.617 L15.383 65.445 Q14.57 64.632 15.383 63.819 L18.989 60.213 Q19.802 59.399 20.615 60.213 L24.787 64.385 Q25.601 65.198 24.787 66.011 L21.181 69.617 Q20.368 70.43 19.555 69.617 Z M10 52.45 L10 46.55 Q10 45.4 11.15 45.4 L16.25 45.4 Q17.4 45.4 17.4 46.55 L17.4 52.45 Q17.4 53.6 16.25 53.6 L11.15 53.6 Q10 53.6 10 52.45 Z M15.383 33.555 L19.555 29.383 Q20.368 28.57 21.181 29.383 L24.787 32.989 Q25.601 33.802 24.787 34.615 L20.615 38.787 Q19.802 39.601 18.989 38.787 L15.383 35.181 Q14.57 34.368 15.383 33.555 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='10 24 51 51' preserveAspectRatio='xMidYMid meet' shape-rendering='geometricPrecision'%3E%3Cpath fill='%23FFFFFF' stroke='none' fill-rule='nonzero' d='M35.5 29.5 A20 20 0 1 1 35.5 69.5 A20 20 0 1 1 35.5 29.5 Z M32.55 24 L38.45 24 Q39.6 24 39.6 25.15 L39.6 30.25 Q39.6 31.4 38.45 31.4 L32.55 31.4 Q31.4 31.4 31.4 30.25 L31.4 25.15 Q31.4 24 32.55 24 Z M51.445 29.383 L55.617 33.555 Q56.43 34.368 55.617 35.181 L52.011 38.787 Q51.198 39.601 50.385 38.787 L46.213 34.615 Q45.399 33.802 46.213 32.989 L49.819 29.383 Q50.632 28.57 51.445 29.383 Z M61 46.55 L61 52.45 Q61 53.6 59.85 53.6 L54.75 53.6 Q53.6 53.6 53.6 52.45 L53.6 46.55 Q53.6 45.4 54.75 45.4 L59.85 45.4 Q61 45.4 61 46.55 Z M55.617 65.445 L51.445 69.617 Q50.632 70.43 49.819 69.617 L46.213 66.011 Q45.399 65.198 46.213 64.385 L50.385 60.213 Q51.198 59.399 52.011 60.213 L55.617 63.819 Q56.43 64.632 55.617 65.445 Z M38.45 75 L32.55 75 Q31.4 75 31.4 73.85 L31.4 68.75 Q31.4 67.6 32.55 67.6 L38.45 67.6 Q39.6 67.6 39.6 68.75 L39.6 73.85 Q39.6 75 38.45 75 Z M19.555 69.617 L15.383 65.445 Q14.57 64.632 15.383 63.819 L18.989 60.213 Q19.802 59.399 20.615 60.213 L24.787 64.385 Q25.601 65.198 24.787 66.011 L21.181 69.617 Q20.368 70.43 19.555 69.617 Z M10 52.45 L10 46.55 Q10 45.4 11.15 45.4 L16.25 45.4 Q17.4 45.4 17.4 46.55 L17.4 52.45 Q17.4 53.6 16.25 53.6 L11.15 53.6 Q10 53.6 10 52.45 Z M15.383 33.555 L19.555 29.383 Q20.368 28.57 21.181 29.383 L24.787 32.989 Q25.601 33.802 24.787 34.615 L20.615 38.787 Q19.802 39.601 18.989 38.787 L15.383 35.181 Q14.57 34.368 15.383 33.555 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask-mode: alpha;
  transform-origin: 50% 50%;
  animation: celeb-swirl-spin var(--celeb-gear-spin) linear infinite;
}

.celeb-logo-overlay {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  /* Badges are 40×40 with a 38-unit circle. Hub is 40 of the 51-unit gear.
     Overlay stays on the pre-grow hub, then inset a fraction of the logo. */
  width: calc((100% + 2 * var(--celeb-gear-outset)) * 40 / 51 - 7.1%);
  height: calc((100% + 2 * var(--celeb-gear-outset)) * 40 / 51 - 7.1%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.celeb-logo-overlay[data-badge="complete"] {
  width: calc((100% + 2 * var(--celeb-gear-outset)) * 40 / 51);
  height: calc((100% + 2 * var(--celeb-gear-outset)) * 40 / 51);
}

.celeb-logo-overlay img,
.celeb-logo-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.celeb-host:not([data-endgame="on"])[data-phase="hold"] .celeb-cheer {
  animation: celeb-badge-pop 600ms ease-in-out 80ms both;
}

.celeb-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--celeb-title-size);
  font-weight: var(--celeb-title-w);
  letter-spacing: var(--celeb-track);
  line-height: 1.2;
  text-wrap: balance;
  color: inherit;
}

.celeb-host[data-case="upper"] .celeb-title {
  text-transform: uppercase;
}

.celeb-host:not([data-endgame="on"]) .celeb-title {
  font-size: 4.55cqmin;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: black;
}

.celeb-host[data-kind="bonus"]:not([data-endgame="on"]) .celeb-title,
.celeb-host[data-kind="count"]:not([data-endgame="on"]) .celeb-title {
  white-space: pre-line;
  text-wrap: unset;
  line-height: 1.3;
}

.celeb-host[data-kind="bonus"]:not([data-endgame="on"]) .celeb-title::first-line,
.celeb-host[data-kind="count"]:not([data-endgame="on"]) .celeb-title::first-line {
  font-family: var(--font-math);
  font-size: 5.6cqmin;
  font-weight: 700;
  letter-spacing: 0;
}

.celeb-equation {
  margin: 2.5cqmin 0 0;
  font-family: var(--font-math);
  font-weight: 700;
  font-size: 5.3cqmin;
  line-height: 1.2;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.celeb-host:not([data-endgame="on"]) .celeb-equation {
  margin-top: 2.2cqmin;
  font-size: 5.6cqmin;
  color: black;
}

.celeb-equation:empty {
  display: none;
}

.celeb-sub {
  margin: 2.28cqmin 0 0;
  font-family: var(--font-ui);
  font-size: var(--celeb-sub-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-wrap: balance;
  color: color-mix(in srgb, var(--celeb-type) 72%, var(--muted));
}

.celeb-sub:empty {
  display: none;
}

.celeb-host:not([data-endgame="on"]) .celeb-sub {
  margin-top: 3.1cqmin;
  font-size: 3.35cqmin;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  opacity: 0;
}

.celeb-host:not([data-endgame="on"])[data-phase="hold"] .celeb-sub {
  animation: celeb-sub-fade 850ms ease-out 2s both;
}

.celeb-endgame,
.celeb-end-footer {
  display: none;
}

.celeb-stage {
  display: contents;
}

.celeb-host[data-endgame="on"] .celeb-title,
.celeb-host[data-endgame="on"] .celeb-sub,
.celeb-host[data-endgame="on"] .celeb-equation {
  display: none;
}

.celeb-host[data-endgame="on"] .celeb-card {
  inset: auto;
  top: var(--celeb-card-inset);
  right: var(--celeb-card-inset);
  left: var(--celeb-card-inset);
  height: calc(100% - (2 * var(--celeb-card-inset)) + var(--celeb-stretch, 0px));
}

.celeb-host[data-endgame="on"][data-phase="enter"] .celeb-card,
.celeb-host[data-endgame="on"][data-phase="stretch"] .celeb-card,
.celeb-host[data-endgame="on"][data-phase="hold"] .celeb-card {
  transition: height var(--celeb-stretch-ms, 300ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.celeb-host[data-endgame="on"][data-restore="on"] .celeb-card,
.celeb-host[data-motion="reduced"][data-endgame="on"] .celeb-card {
  transition: none;
}

.celeb-host[data-endgame="on"]:not([data-content="on"]) .celeb-copy {
  visibility: hidden;
  opacity: 0;
}

.celeb-host[data-endgame="on"] .celeb-card-inner {
  padding: 0 4.6cqmin 3.6cqmin;
  align-items: stretch;
}

.celeb-hero {
  display: contents;
}

.celeb-brand {
  display: none;
}

.celeb-host[data-endgame="on"] .celeb-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.celeb-host[data-endgame="on"] .celeb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  gap: 4.6cqmin;
  padding: 3.2cqmin 0;
}

.celeb-host[data-endgame="on"] .celeb-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 100%;
}

.celeb-host[data-endgame="on"] .celeb-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.celeb-host[data-endgame="on"] .celeb-logo {
  width: 13.5%;
  margin-bottom: 2.2cqmin;
}

.celeb-host[data-endgame="on"] .celeb-endgame {
  display: contents;
}

.celeb-host[data-endgame="on"] .celeb-end-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.celeb-kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 3.35cqmin;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  color: var(--accent-25);
}

.celeb-identity {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.35cqmin auto 0;
  font-family: var(--font-card-number);
  font-weight: 600;
  font-size: 6.55cqmin;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  color: var(--accent-0);
  transform-origin: 50% 50%;
}

.celeb-host[data-identity-pop="on"] .celeb-identity {
  animation: celeb-identity-pop 600ms ease-in-out both;
}

.celeb-body {
  margin: 0;
  width: 100%;
  max-width: none;
  font-family: var(--font-ui);
  font-size: 2.7cqmin;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: pretty;
  color: var(--navy);
}

.celeb-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2.2cqmin;
  width: 100%;
  margin: 0;
  min-height: 0;
  flex: none;
}

.celeb-mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--mini-size, 3), minmax(0, 1fr));
  gap: 4.5%;
  aspect-ratio: 1;
  width: 36cqmin;
  flex: none;
  container-type: size;
}

.celeb-mini-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: calc(100cqmin / var(--mini-size, 3) * 0.07) solid var(--accent-75);
  border-radius: calc(100cqmin / var(--mini-size, 3) * 0.14);
  background: var(--card);
  color: var(--navy);
  font-family: var(--font-card-number);
  font-weight: 600;
  font-size: calc(100cqmin / var(--mini-size, 3) * 0.42);
  line-height: 1;
}

.celeb-mini-cell.digits-3 {
  font-size: calc(100cqmin / var(--mini-size, 3) * 0.30);
}

.celeb-mini-cell.is-var {
  font-family: var(--font-math);
  font-weight: 700;
  letter-spacing: 0;
}

.celeb-summary {
  flex: none;
  width: 76%;
  max-width: 22em;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 2.85cqmin;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.celeb-summary strong {
  font-weight: 800;
}

.celeb-date {
  margin: 0;
  width: 100%;
  flex: none;
  font-family: var(--font-ui);
  font-size: 2.25cqmin;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--muted);
}

.celeb-end-footer {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.celeb-end-rule {
  width: 100%;
  margin: 0 0 1.6cqmin;
  border: 0;
  border-top: 1px solid var(--line);
}

.celeb-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.6cqmin;
  width: 100%;
  margin: 1.6cqmin 0 0;
}

.celeb-new-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqmin;
  margin: 0;
  padding: 0 3.4cqmin;
  min-height: 7.4cqmin;
  border: 0;
  border-radius: 2.4cqmin;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-ui);
  font-size: 3.05cqmin;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.celeb-new-grid svg {
  width: 3.8cqmin;
  height: 3.8cqmin;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .celeb-new-grid:hover {
    background: var(--accent-tint);
    color: var(--accent-deep);
  }
}

.celeb-host[data-motion="reduced"][data-phase="enter"] .celeb-card,
.celeb-host[data-endgame="on"][data-motion="reduced"][data-phase="enter"] .celeb-card {
  animation-name: celeb-enter-fade;
}

.celeb-host[data-motion="reduced"] .celeb-card-swirl-spin,
.celeb-host[data-motion="reduced"] .celeb-logo-gear,
.celeb-host[data-motion="reduced"][data-phase="hold"] .celeb-cheer,
.celeb-host[data-motion="reduced"] .celeb-identity {
  animation: none;
}

.celeb-host[data-motion="reduced"]:not([data-endgame="on"])[data-phase="hold"] .celeb-sub {
  animation: celeb-sub-fade 1ms linear 2s both;
}

@keyframes celeb-badge-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes celeb-identity-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes celeb-sub-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celeb-swirl-spin {
  to { transform: rotate(360deg); }
}

@keyframes celeb-bg-pan {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes celeb-bg-pan-x {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes celeb-bg-pan-y {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

@keyframes celeb-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celeb-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celeb-veil-out {
  0% {
    opacity: 1;
    backdrop-filter: blur(var(--celeb-backdrop, 0px));
    -webkit-backdrop-filter: blur(var(--celeb-backdrop, 0px));
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

@keyframes celeb-card-leave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.97); }
}

@keyframes celeb-slit-in-vertical {
  0% {
    transform: translateZ(-420px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    transform: translateZ(-80px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
}

@keyframes celeb-slit-in-horizontal {
  0% {
    transform: translateZ(-420px) rotateX(90deg);
    opacity: 0;
  }
  54% {
    transform: translateZ(-80px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
}

@keyframes celeb-scale-in-center {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes celeb-scale-in-ver-center {
  0% { transform: scaleY(0); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes celeb-scale-in-ver-bottom {
  0% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
}

@keyframes celeb-slide-in-top {
  0% { transform: translateY(-110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes celeb-slide-in-bottom {
  0% { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes celeb-slide-in-bck-center {
  0% { transform: translateZ(-520px); opacity: 0; }
  100% { transform: translateZ(0); opacity: 1; }
}

@keyframes celeb-slide-in-bck-top {
  0% { transform: translateZ(-520px) translateY(-70%); opacity: 0; }
  100% { transform: translateZ(0) translateY(0); opacity: 1; }
}

@keyframes celeb-slide-in-bck-bottom {
  0% { transform: translateZ(-520px) translateY(70%); opacity: 0; }
  100% { transform: translateZ(0) translateY(0); opacity: 1; }
}

@keyframes celeb-slide-in-elliptic-bottom-fwd {
  0% {
    transform: translateY(70%) rotateX(30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% -40%;
    opacity: 1;
  }
}

@keyframes celeb-endgame-rise {
  0% {
    translate: 0 var(--celeb-rise-start);
    animation-timing-function: cubic-bezier(0.18, 0.78, 0.28, 1);
  }
  40% {
    translate: 0 var(--celeb-arc-peak);
    animation-timing-function: cubic-bezier(0.32, 0, 0.2, 1);
  }
  100% {
    translate: 0 0;
  }
}

@keyframes celeb-endgame-approach {
  0% {
    scale: var(--celeb-far-scale);
    transform: translateZ(var(--celeb-approach-z));
    animation-timing-function: ease-out;
  }
  40% {
    scale: var(--celeb-far-scale);
    transform: translateZ(var(--celeb-apex-z));
    animation-timing-function: cubic-bezier(0.28, 0.02, 0.18, 1);
  }
  100% {
    scale: 1;
    transform: translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .celeb-host[data-motion="system"][data-phase="enter"] .celeb-card,
  .celeb-host[data-endgame="on"][data-motion="system"][data-phase="enter"] .celeb-card {
    animation-name: celeb-enter-fade;
    animation-duration: var(--celeb-enter);
    animation-delay: 0ms;
    animation-timing-function: var(--celeb-ease);
  }

  .celeb-host[data-motion="system"] .celeb-card-swirl-spin,
  .celeb-host[data-motion="system"] .celeb-logo-gear,
  .celeb-host[data-motion="system"][data-phase="hold"] .celeb-cheer,
  .celeb-host[data-motion="system"] .celeb-identity {
    animation: none;
  }

  .celeb-host[data-motion="system"]:not([data-endgame="on"])[data-phase="hold"] .celeb-sub {
    animation: celeb-sub-fade 1ms linear 2s both;
  }
}