/* ============================================================================
   MIXXI RISING — fullscreen reveal layer (TOP 10 / TOP 25 / WINNER)
   Glossy chevron-X + champagne numerals over a repeating word-wall.
   ========================================================================== */

.mx-reveal {
  position: absolute; inset: 0; z-index: var(--z-reveal);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(20,10,20,.72), rgba(0,0,0,.94));
  overflow: hidden;
}
.mx-reveal.is-on { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-quint); }

/* glossy chevrons sweeping in from both sides */
.mx-reveal__chev {
  position: absolute; top: -6%; bottom: -6%; width: 62%;
  background:
    linear-gradient(100deg, rgba(255,255,255,.30), rgba(255,255,255,0) 30%),
    var(--motion-grad);
  box-shadow: inset 0 0 120px rgba(0,0,0,.6), 0 0 160px rgba(249,25,121,.4);
}
.mx-reveal__chev.l { left: -34%;  clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%, 38% 50%); transform: translateX(-120%); }
.mx-reveal__chev.r { right: -34%; clip-path: polygon(38% 0, 100% 0, 100% 100%, 38% 100%, 0 50%);        transform: translateX(120%); }
.mx-reveal.is-on .mx-reveal__chev.l { transform: translateX(0); transition: transform .9s var(--ease-expo); }
.mx-reveal.is-on .mx-reveal__chev.r { transform: translateX(0); transition: transform .9s var(--ease-expo); }

.mx-reveal__wall {
  position: absolute; inset: -10%; z-index: 1; opacity: .07; pointer-events: none;
  display: flex; flex-direction: column; gap: 0; transform: rotate(-5deg) scale(1.1);
}
.mx-reveal__wall span {
  font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 200px; line-height: .92; white-space: nowrap; color: #fff; letter-spacing: .02em;
}

.mx-reveal__card {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translateY(24px); opacity: 0;
}
.mx-reveal.is-on .mx-reveal__card { transform: translateY(0); opacity: 1; transition: all .7s var(--ease-expo) .25s; }

.mx-reveal__eyebrow {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .4em; font-size: 34px;
  text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: 8px;
}
.mx-reveal__big {
  font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 320px; line-height: .8; letter-spacing: -.02em;
}
.mx-reveal__big .mx-gold { }
.mx-reveal__name {
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 120px; line-height: .9; margin-top: 10px;
}
.mx-reveal__meta { font-family: var(--font-ui); font-weight: 500; letter-spacing: .28em; font-size: 30px; color: var(--ink-2); text-transform: uppercase; }

/* new-#1 sting (centred) */
.mx-flash {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: var(--z-burst); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 50px; border-radius: 24px; max-width: 620px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(30,18,26,.94), rgba(6,9,16,.94));
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(250,249,9,.55), 0 0 90px rgba(250,249,9,.2);
  text-align: center;
}
.mx-flash__k {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  font-size: 30px; color: var(--yellow);
}
.mx-flash__n {
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 62px; line-height: .92; color: var(--yellow); text-shadow: 0 3px 18px rgba(0,0,0,.5);
}
.mx-flash__c { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.mx-flash__c svg { width: 46px; height: auto; fill: var(--yellow); filter: drop-shadow(0 0 12px rgba(250,249,9,.7)); }

/* winners scene — full-frame podium; cards land #4 → #1, gold is earned at the top */
.mx-reveal:has(.mx-win) .mx-reveal__wall { opacity: .04; }
.mx-win {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 34px;
  padding: 100px 84px 64px;
  opacity: 0;
}
.mx-reveal.is-on .mx-win { opacity: 1; transition: opacity .5s var(--ease-quint); }
.mx-win::before {
  /* crimson floor bloom — the show's energy rising under the podium */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 58% at 50% 114%, rgba(254,9,39,.32), rgba(249,25,121,.10) 46%, transparent 66%);
}
.mx-win__head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.mx-win__week {
  padding: 10px 28px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(249,25,121,.7);
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 31px; line-height: 1; letter-spacing: .06em; color: #ff5c9d; white-space: nowrap;
}
.mx-win__title {
  margin: 0; font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 188px; line-height: .78; letter-spacing: -.015em; color: #eef2f8;
  text-shadow: 0 3px 0 rgba(255,255,255,.15), 0 18px 60px rgba(0,0,0,.6);
}
.mx-win__strap {
  width: 100%; margin-top: 8px; padding-top: 24px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .3em; font-size: 25px;
  text-transform: uppercase; color: var(--ink-2);
}
.mx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.mx-win__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 26px; }
.mx-win__card {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 28px;
  min-height: 148px; padding: 22px 38px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(9,14,24,.62));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px var(--panel-line),
    0 22px 44px -20px rgba(0,0,0,.65);
  opacity: 0;
}
.mx-reveal.is-on .mx-win__card { animation: mx-win-in .68s var(--ease-expo) var(--d, 0s) forwards; }
@keyframes mx-win-in {
  from { opacity: 0; transform: translateY(34px) scale(.965); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-reveal.is-on .mx-win__card { animation: none; opacity: 1; }
}
.mx-win__rank {
  width: 88px; flex: none;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 66px; line-height: 1; color: var(--ink-3);
}
.mx-win__card.is-r2 .mx-win__rank { color: var(--silver); }
.mx-win__card.is-r3 .mx-win__rank { color: var(--bronze); }
.mx-win__ava {
  width: 104px; height: 104px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #0c1424; box-shadow: 0 0 0 3px var(--c, var(--pink));
}
.mx-win__ava span { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: #fff; }
.mx-win__who { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 auto; }
.mx-win__name {
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 50px; line-height: .95; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mx-win__handle { font-family: var(--font-ui); font-size: 24px; color: var(--ink-2); }
.mx-win__prize {
  margin-left: auto; flex: none; text-align: right;
  display: flex; flex-direction: column; gap: 7px;
}
.mx-win__prize span {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .2em;
  font-size: 16px; text-transform: uppercase; color: var(--ink-3);
}
.mx-win__prize b {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 54px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
/* #1 — the hero card; the only gold on the frame */
.mx-win__card.is-r1 {
  flex-grow: 1.6;
  min-height: 224px; padding: 30px 44px; gap: 34px;
  background:
    radial-gradient(90% 130% at 14% -20%, rgba(250,249,9,.20), transparent 58%),
    linear-gradient(180deg, rgba(250,249,9,.13), rgba(26,20,2,.66));
  box-shadow:
    inset 0 2px 0 rgba(255,247,150,.6),
    inset 0 0 0 1.5px rgba(250,249,9,.4),
    0 26px 54px -20px rgba(0,0,0,.7);
}
.mx-win__card.is-r1 .mx-win__rank { width: 108px; font-size: 92px; color: var(--yellow); }
.mx-win__card.is-r1 .mx-win__ava { width: 136px; height: 136px; box-shadow: 0 0 0 4px var(--yellow); }
.mx-win__card.is-r1 .mx-win__ava span { font-size: 52px; }
.mx-win__card.is-r1 .mx-win__name { font-size: 58px; color: var(--gold-hi); white-space: normal; text-wrap: balance; }
.mx-win__card.is-r1 .mx-win__handle { font-size: 23px; }
.mx-win__card.is-r1 .mx-win__prize b { font-size: 62px; color: var(--yellow); }
.mx-win__card.is-r1 .mx-win__prize span { color: rgba(250,249,9,.62); letter-spacing: .15em; }
.mx-win__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mx-win__foot img { height: 42px; opacity: .78; }
.mx-win__foot span { font-family: var(--font-ui); font-size: 19px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.mx-win__foot b { color: var(--ink-2); font-weight: 600; }

/* winner medallion avatar */
.mx-reveal__ava {
  width: 300px; height: 300px; border-radius: 50%; display: grid; place-items: center;
  background: #0c1424; position: relative; margin-bottom: 18px;
}
.mx-reveal__ava::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; z-index: -1; background: conic-gradient(from 210deg, var(--yellow), var(--yellow-soft), var(--yellow)); }
.mx-reveal__ava span { font-family: var(--font-display); font-weight: 700; font-size: 128px; color: #fff; }