.podium-finale {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(16px, 2.6vw, 34px);
  max-width: 1440px;
  margin-inline: auto;
}

@media (min-width: 980px) {
  .podium-finale:has(.podium-join) {
    grid-template-columns: minmax(0, 1fr) clamp(160px, 16vw, 220px);
  }
}

.podium-scene {
  --track-height: clamp(122px, 15vw, 190px);
  --grass-height: clamp(24px, 4vw, 54px);
  --pixel: clamp(4px, .55vw, 8px);
  --outline: #202948;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: end;
  min-width: 0;
  min-height: clamp(445px, 51vw, 665px);
  overflow: hidden;
  padding: clamp(18px, 3.5vw, 48px) 0 clamp(20px, 4.8vw, 66px);
  border: 3px solid #7e87b3;
  box-shadow: 0 7px 0 #11132b;
  text-align: center;
}

.podium-landscape {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#85d9fe 0 51%, #a5e8fc 51% 72%, #bbf0fb 72%);
}

.podium-clouds i {
  position: absolute;
  inset-block-start: var(--cloud-top);
  inset-inline-start: var(--cloud-left);
  width: var(--cloud-width);
  height: calc(var(--cloud-width) * .35);
  background: linear-gradient(#fff8e7 0 74%, #dbf5f8 74%);
  clip-path: polygon(0 54%, 9% 54%, 9% 32%, 25% 32%, 25% 13%, 43% 13%, 43% 0, 63% 0,
    63% 17%, 78% 17%, 78% 39%, 91% 39%, 91% 52%, 100% 52%, 100% 85%, 92% 85%, 92% 100%,
    8% 100%, 8% 85%, 0 85%);
}

.podium-clouds i:nth-child(1) { --cloud-left: 7%; --cloud-top: 20%; --cloud-width: clamp(45px, 10vw, 150px); }
.podium-clouds i:nth-child(2) { --cloud-left: 31%; --cloud-top: 36%; --cloud-width: clamp(38px, 7vw, 90px); }
.podium-clouds i:nth-child(3) { --cloud-left: 75%; --cloud-top: 23%; --cloud-width: clamp(54px, 12vw, 175px); }

.podium-hills i {
  position: absolute;
  bottom: calc(var(--track-height) + var(--grass-height) - 1px);
  left: var(--hill-left);
  width: var(--hill-width);
  height: var(--hill-height);
  background: linear-gradient(90deg, var(--hill-light) 0 45%, var(--hill-color) 45% 75%, var(--hill-shadow) 75%);
  clip-path: polygon(0 100%, 0 86%, 8% 86%, 8% 72%, 14% 72%, 14% 58%, 21% 58%, 21% 41%, 27% 41%,
    27% 26%, 34% 26%, 34% 12%, 42% 12%, 42% 0, 58% 0, 58% 12%, 66% 12%, 66% 26%, 73% 26%,
    73% 41%, 79% 41%, 79% 58%, 86% 58%, 86% 72%, 92% 72%, 92% 86%, 100% 86%, 100% 100%);
}

.podium-hills i:nth-child(1) {
  --hill-left: 28%; --hill-width: 57%; --hill-height: clamp(70px, 12vw, 166px);
  --hill-light: #91d678; --hill-color: #76c761; --hill-shadow: #62b75d;
}

.podium-hills i:nth-child(2) {
  --hill-left: 68%; --hill-width: 42%; --hill-height: clamp(58px, 10vw, 130px);
  --hill-light: #70cf65; --hill-color: #4cad59; --hill-shadow: #379653;
}

.podium-hills i:nth-child(3) {
  --hill-left: -10%; --hill-width: 52%; --hill-height: clamp(55px, 10vw, 133px);
  --hill-light: #61c96a; --hill-color: #4eb85a; --hill-shadow: #35a35b;
}

.podium-grass {
  position: absolute;
  inset: auto 0 var(--track-height);
  height: var(--grass-height);
  border-top: var(--pixel) solid #7aca48;
  background:
    repeating-linear-gradient(90deg, #68bc49 0 8px, transparent 8px 28px) 2px 25% / 100% 4px repeat-x,
    repeating-linear-gradient(90deg, #398a43 0 8px, transparent 8px 34px) 12px 68% / 100% 4px repeat-x,
    linear-gradient(#5bb445 0 55%, #4ca244 55%);
}

.podium-track {
  --tile: calc(var(--pixel) * 2);
  --curb-colors: repeating-linear-gradient(90deg, #e6645c 0 var(--tile), #f6cf70 var(--tile) calc(var(--tile) * 2),
    #69bd8b calc(var(--tile) * 2) calc(var(--tile) * 3), #67a0e0 calc(var(--tile) * 3) calc(var(--tile) * 4));
  position: absolute;
  inset: auto 0 0;
  height: var(--track-height);
  border-top: 2px solid #253a43;
  background:
    var(--curb-colors) 0 0 / 100% var(--tile) repeat-x,
    repeating-conic-gradient(#fcf2d8 0 25%, #22334a 0 50%) calc(var(--pixel) * .5) var(--tile) / var(--tile) var(--tile) repeat-x,
    repeating-linear-gradient(90deg, #b2becd 0 9%, transparent 9% 18%) 5% 87% / 100% var(--pixel) repeat-x,
    repeating-conic-gradient(#ffffff06 0 25%, transparent 0 50%) 0 0 / var(--tile) var(--tile),
    linear-gradient(#3e465f 0 55%, #323a50 55%);
}

.podium-heading {
  position: relative;
  justify-self: center;
  min-width: 0;
  margin-inline: 8px;
  padding: .56em 1.35em .62em;
  border: 3px solid var(--outline);
  background: #25345e;
  box-shadow: inset 0 0 0 2px #788bd5, 0 5px 0 #387b9c66;
  color: #fff7e4;
  font-size: clamp(.94rem, 1.8vw, 1.5rem);
}

.podium-heading p {
  margin: 0 0 .16em;
  color: #ffdc77;
  font-size: clamp(1.75rem, 5vw, 4.35rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow: 0 .07em #a25243;
}

.podium-heading h1 {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: .025em;
}

.podium-scene .podium {
  --cup-height: clamp(40px, 8vw, 110px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-self: center;
  column-gap: clamp(4px, .8vw, 12px);
  row-gap: 0;
  width: min(74%, 820px);
  margin: calc(var(--cup-height) + 17px) 0 0;
  padding: 0;
  list-style: none;
}

.podium-scene .podium-place {
  --step-offset: 0px;
  --cup-delay: 420ms;
  --step-color: #ffd066;
  --step-light: #fff0ad;
  --step-shade: #c08334;
  --step-ink: #452a12;
  --cup-light: #fffbb5;
  --cup-color: #ffd33f;
  --cup-shade: #b17626;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: 1;
  grid-column: 2;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  min-width: 0;
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--step-ink);
}

.podium-scene .podium-place[data-rank="2"] {
  --step-offset: clamp(14px, 2.5vw, 35px);
  --cup-delay: 210ms;
  --step-color: #bfcfe2;
  --step-light: #edf6ff;
  --step-shade: #6f85a5;
  --step-ink: #21344d;
  --cup-light: #effbff;
  --cup-color: #b7d3df;
  --cup-shade: #6386a0;
  grid-column: 1;
}

.podium-scene .podium-place[data-rank="3"] {
  --step-offset: clamp(24px, 4.2vw, 61px);
  --cup-delay: 0ms;
  --step-color: #eaa67f;
  --step-light: #ffdbc0;
  --step-shade: #aa5b43;
  --step-ink: #462419;
  --cup-light: #ffe0ae;
  --cup-color: #ea9d66;
  --cup-shade: #a3533b;
  grid-column: 3;
}

.podium-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 clamp(6px, 1.4vw, 20px) clamp(13px, 2.5vw, 34px);
}

.podium-step::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: var(--step-offset) 0 0;
  border: 3px solid var(--outline);
  box-shadow: 0 var(--pixel) #202638;
  background:
    linear-gradient(135deg, transparent 0 65%, #ffffff3d 65% 80%, transparent 80%) 0 0 / 100% var(--pixel) no-repeat,
    linear-gradient(to right, var(--step-light) 0 var(--pixel), transparent var(--pixel) calc(100% - var(--pixel)), var(--step-shade) 0),
    linear-gradient(var(--step-light) 0 var(--pixel), var(--step-color) var(--pixel) calc(100% - var(--pixel)), var(--step-shade) 0);
}

.podium-scene .podium-rank {
  padding-block-start: calc(var(--step-offset) + clamp(9px, 1.55vw, 22px));
  font-size: clamp(1.65rem, 5.5vw, 5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 .06em var(--step-light);
}

.podium-scene .podium-rank sup { font-size: .39em; }

.podium-name {
  margin-block: auto .3em;
  padding-block-start: .48em;
  overflow-wrap: anywhere;
  font-size: clamp(.82rem, 1.95vw, 1.78rem);
  font-weight: 850;
  line-height: 1.12;
}

.podium-scene .podium-score {
  font-size: clamp(.76rem, 1.4vw, 1.18rem);
  font-weight: 750;
  line-height: 1.2;
}

.podium-cup {
  --cup-shape: polygon(24% 0, 76% 0, 76% 12%, 100% 12%, 100% 38%, 91% 38%, 91% 47%,
    78% 47%, 78% 56%, 68% 56%, 68% 65%, 57% 65%, 57% 79%, 72% 79%, 72% 87%, 84% 87%, 84% 100%,
    16% 100%, 16% 87%, 28% 87%, 28% 79%, 43% 79%, 43% 65%, 32% 65%, 32% 56%, 22% 56%,
    22% 47%, 9% 47%, 9% 38%, 0 38%, 0 12%, 24% 12%);
  position: absolute;
  z-index: 1;
  top: var(--step-offset);
  left: 50%;
  width: min(88%, var(--cup-height));
  height: var(--cup-height);
  translate: -50% -96%;
  filter: drop-shadow(0 2px #261d2d34);
}

.podium-cup::before, .podium-cup::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--cup-shape);
}

.podium-cup::before { background: var(--outline); }

.podium-cup::after {
  inset: 4%;
  background:
    linear-gradient(var(--cup-light) 0 74%, transparent 74%) 28% 6% / 13% 37% no-repeat,
    linear-gradient(var(--outline) 0 100%) 4% 22% / 16% 15% no-repeat,
    linear-gradient(var(--outline) 0 100%) 96% 22% / 16% 15% no-repeat,
    linear-gradient(var(--cup-shade) 0 100%) 0 94% / 100% 7% no-repeat,
    linear-gradient(90deg, var(--cup-shade) 0 8%, var(--cup-color) 8% 57%, var(--cup-shade) 57% 74%, var(--cup-color) 74%);
}

.podium-pipin {
  position: absolute;
  bottom: clamp(18px, 4.8vw, 64px);
  left: 1%;
  width: min(13.5%, 169px);
  filter: drop-shadow(0 5px #242a3d74);
}

.podium-pipin .pipin-moment { margin: 0; }
.podium-pipin .pipin-moment img { width: 100%; }
body[data-role=projection] .podium-pipin picture[data-pipin-motion] img { animation: none; }

.podium-empty {
  justify-self: center;
  max-width: calc(100% - 22px);
  margin: 0;
  padding: .75rem 1rem;
  border: 2px solid #8492af;
  background: #26334d;
  color: #fff7e4;
  font-weight: 750;
}

.podium-join {
  justify-self: center;
  display: grid;
  gap: 12px;
  width: min(100%, 275px);
  min-width: 0;
  padding-bottom: 5px;
  color: #fff7e4;
  text-align: center;
}

.podium-join > p { margin: 0; font-size: .95rem; font-weight: 750; }
.podium-join .join-qr { padding: clamp(9px, 1.4vw, 16px); }
.podium-join .join-qr img { max-width: 172px; }
.podium-join .join-qr figcaption { font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .podium-finale[data-enter] .podium-cup {
    animation: podium-cup-arrival 380ms var(--cup-delay) cubic-bezier(.2, .78, .22, 1) both;
  }
}

@keyframes podium-cup-arrival {
  from { opacity: 0; transform: translateY(-25%) scale(.75); }
  76% { opacity: 1; transform: translateY(2%) scale(1.05); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .podium-scene { min-height: 370px; }
  .podium-scene .podium { width: calc(100% - 12px); }
  .podium-pipin { inset: 30px 1% auto auto; width: min(17%, 76px); }
}