/* The three front panels share a plinth. Each panel has a tread and a right return. */
.award-arena {
  --podium-ink: #374a3c;
  --depth: 12px;
  --rise: 9px;
  padding: 24px var(--depth) 10px 0;
}
.award-podium {
  position: relative;
  isolation: isolate;
  gap: 0;
  margin: 0;
}
.award-podium::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -3px;
  right: calc(-1 * var(--depth) - 3px);
  bottom: -8px;
  height: 8px;
  border: 2px solid var(--podium-ink);
  border-radius: 2px 2px 5px 5px;
  background: repeating-linear-gradient(115deg, #335c4e 0 22px, #4b7660 22px 27px);
  box-shadow: 1px 3px 0 #65745435;
}
.award-group {
  --cup-width: 57px;
  --step-height: 92px;
  --step-offset: 0px;
  --step-light: #ffe697;
  --step-face: #f3c66b;
  --step-side: #c99c50;
  --step-top: #fff0b5;
  --cup-metal: url(#cup-gold);
  --cup-ink: #765026;
  --cup-shine: #fff3b4;
  color: var(--podium-ink);
}
.award-group.place-1 {
  z-index: 2;
  --cup-width: 67px;
  --step-height: 112px;
}
.award-group.place-2 {
  z-index: 1;
  --step-offset: 20px;
  --step-light: #deebea;
  --step-face: #b4d0d0;
  --step-side: #84a7a7;
  --step-top: #eff7f1;
  --cup-metal: url(#cup-silver);
  --cup-ink: #415564;
  --cup-shine: #f5ffff;
}
.award-group.place-3 {
  --step-height: 73px;
  --step-offset: 39px;
  --step-light: #f5d0a9;
  --step-face: #dfa77a;
  --step-side: #b37d58;
  --step-top: #ffe2bf;
  --cup-width: 49px;
  --cup-metal: url(#cup-bronze);
  --cup-ink: #784629;
  --cup-shine: #ffe4bf;
}
.award-podium .award-actors {
  padding-bottom: 3px;
  overflow: visible;
}
.award-podium .award-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--step-height);
  height: auto;
  padding: 5px 4px 8px;
  text-align: center;
  border: 2px solid var(--podium-ink);
  border-radius: 1px;
  background:
    linear-gradient(118deg, transparent 65%, #fff7dc40 65% 69%, transparent 69% 72%, #fff7dc28 72% 76%, transparent 76%),
    linear-gradient(170deg, var(--step-light), var(--step-face) 73%);
  box-shadow: inset 0 3px #fffbea70, inset 0 -5px #6a5a3e24;
}
.award-podium .award-step::before,
.award-podium .award-step::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--podium-ink);
  pointer-events: none;
}
.award-podium .award-step::before {
  left: -2px;
  right: -2px;
  top: auto;
  bottom: 100%;
  height: var(--rise);
  transform: skewX(-53.13deg);
  transform-origin: left bottom;
  background: repeating-linear-gradient(90deg, var(--step-top) 0 16px, var(--step-light) 16px 21px);
}
.award-podium .award-step::after {
  left: 100%;
  top: -2px;
  bottom: -2px;
  width: var(--depth);
  transform: skewY(-36.87deg);
  transform-origin: left bottom;
  background: var(--step-side);
}

/* The stamped number sits on the bowl above the name and score. */
.award-trophy {
  position: relative;
  display: block;
  flex: none;
  width: min(100%, var(--cup-width));
  aspect-ratio: 80 / 72;
}
.award-trophy svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px #493a252c);
}
.award-trophy .award-place-number {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  color: #302d25;
  font: 900 calc(var(--cup-width) * .32)/1 Georgia, serif;
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px var(--cup-shine);
  opacity: 1;
}
.award-step .award-captions {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  gap: 3px 6px;
}
.award-step .award-name {
  color: #243e31;
  font-size: 13px;
  line-height: 1.28;
}
.award-step .award-energy {
  color: #243e31;
  margin: 3px 0 0;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.award-tie-label {
  grid-column: 1 / -1;
  font: 700 10px/1.3 sans-serif;
  color: #3e513f;
}
.award-group.is-empty .award-step {
  opacity: 1;
  background: linear-gradient(160deg, var(--step-top), var(--step-light));
}
.award-group.is-empty .award-trophy { opacity: .55; }
.award-group.is-empty .award-place-label {
  display: block;
  color: #475944;
  font-size: 11px;
}

/* Shared row sizing keeps 1st above 2nd and 3rd even when a tied group wraps. */
@supports (grid-template-rows: subgrid) {
  .award-podium { grid-template-rows: auto auto; }
  .award-podium .award-group {
    display: grid;
    grid-row: 1 / 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
  }
  .award-podium .award-actors {
    align-self: end;
    transform: translateY(var(--step-offset));
  }
  .award-podium .award-step { margin-top: var(--step-offset); }
}

@media (max-width: 700px) {
  .award-arena { --depth: 8px; --rise: 6px; padding-top: 22px; }
  .award-group.place-1 { --cup-width: 51px; --step-height: 107px; }
  .award-group.place-2 { --cup-width: 44px; --step-height: 88px; --step-offset: 19px; }
  .award-group.place-3 { --cup-width: 40px; --step-height: 72px; --step-offset: 35px; }
  .award-podium .award-step {
    padding: 5px 3px 7px;
    gap: 2px;
    border-width: 1.5px;
  }
  .award-podium .award-step::before,
  .award-podium .award-step::after { border-width: 1px; }
  .award-podium .award-step::before { left: -1px; right: -1px; }
  .award-podium .award-step::after { top: -1px; bottom: -1px; }
  .award-step .award-name { font-size: 11px; }
  .award-step .award-energy { font-size: 12px; margin-top: 1px; }
  .award-step .award-captions { width: 100%; gap: 2px; }
  .award-group.is-empty .award-trophy { --cup-width: 30px; }
  .award-group.is-empty .award-place-label { font-size: 9px; }
  .award-podium .many-winners .award-actors,
  .award-podium .many-winners .award-captions {
    grid-template-columns: repeat(auto-fit, minmax(min(64px, 100%), 1fr));
  }
  .award-podium .has-tie .award-caption { container-type: inline-size; }
  .award-podium .has-tie .award-energy { font-size: clamp(9px, 18cqi, 12px); }
  .award-podium .many-winners .award-name { font-size: 10px; }
  .award-podium .many-winners .award-energy { font-size: 11px; }
  .award-podium .award-character {
    width: min(100%, calc(var(--award-figure-height) * var(--award-sprite-ratio, 1)));
    height: auto;
  }
  .award-stage .award-photographer.crowd-bottom { bottom: 5px; }
}