/* Churroman winners' podium (see podium.js). Text color comes from the section it sits in. */
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.22fr 1fr; align-items: end; gap: 0; }
.pd { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; position: relative; }
.pd-award { position: relative; width: 100%; display: flex; justify-content: center; z-index: 1; }
.pd-art { display: block; height: auto; overflow: visible; }
.pd-tw { position: relative; display: block; width: min(118%, 11.5rem); margin: 0 -9% -.3rem; }
.pd-trophy { position: relative; width: 100%; filter: drop-shadow(0 .45rem .5rem rgba(0, 0, 0, .35)); }
.pd-medal { width: min(82%, 6rem); filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .3)); }

/* the initials, on a little name plate */
.pd-names { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: .35rem 0 .45rem; z-index: 1; }
.pd-plate { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; padding: .22rem .6rem .25rem; border-radius: .6rem;
  background: #FFF8E8; color: #3B1F14; box-shadow: 0 .15rem 0 rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(217, 154, 50, .55); }
.pd-plate b { font-family: "Courier New", monospace; font-weight: 700; font-size: 1.35rem; letter-spacing: .16em; margin-right: -.16em; line-height: 1.05; }
.pd-plate small { font-weight: 700; font-size: .85rem; line-height: 1.1; color: #8A5A3A; font-variant-numeric: tabular-nums; }
.pd-1 .pd-plate { background: linear-gradient(#FFF6CF, #FFE58F); box-shadow: 0 .15rem 0 rgba(0, 0, 0, .25), inset 0 0 0 2px #D99A32; }
.pd-1 .pd-plate b { font-size: 1.6rem; }
.pd-open { opacity: .6; box-shadow: inset 0 0 0 2px rgba(217, 154, 50, .5); background: rgba(255, 248, 232, .5); }

/* the steps: Churroman red, a cream top, gold trim, and the place number in a gold coin */
.pd-block {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .75rem .25rem .4rem; color: #FFF3DA;
  background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 18%, transparent 82%, rgba(0, 0, 0, .22)), linear-gradient(#B9352B, #8A2019);
  border-top: .5rem solid #F4E6C8; box-shadow: inset 0 2px 0 #E2B45A, inset 0 -.5rem .8rem rgba(0, 0, 0, .2);
}
.pd-block::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; background: linear-gradient(#FFF8E8, #E9D3A6); }
.pd-2 .pd-block { height: 5.2rem; border-radius: .5rem 0 0 0; }
.pd-1 .pd-block { height: 7rem; border-radius: .5rem .5rem 0 0; box-shadow: inset 0 2px 0 #E2B45A, inset 0 -.5rem .8rem rgba(0, 0, 0, .2), -.25rem 0 .4rem rgba(0, 0, 0, .2), .25rem 0 .4rem rgba(0, 0, 0, .2); z-index: 1; }
.pd-3 .pd-block { height: 4.1rem; border-radius: 0 .5rem 0 0; }
.pd-2 .pd-block::before { border-radius: .5rem 0 0 0; }
.pd-1 .pd-block::before { border-radius: .5rem .5rem 0 0; }
.pd-3 .pd-block::before { border-radius: 0 .5rem 0 0; }
.pd-num {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 1.45rem; line-height: 1; color: #5A3A04;
  background: radial-gradient(circle at 35% 30%, #FFF6CC, #F2C24A 55%, #B07E10); box-shadow: 0 .12rem 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.pd-2 .pd-num { color: #3D444D; background: radial-gradient(circle at 35% 30%, #FFFFFF, #CBD2DA 55%, #7D8692); }
.pd-3 .pd-num { color: #4A250B; background: radial-gradient(circle at 35% 30%, #FFE3C6, #D98E4C 55%, #8A4A1A); }
.pd-1 .pd-num { width: 2.8rem; height: 2.8rem; font-size: 1.8rem; }
.pd-prize { font-weight: 700; font-size: .92rem; line-height: 1.1; letter-spacing: .02em; text-shadow: 0 .08rem 0 rgba(0, 0, 0, .35); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sparkle and shine */
.pd-sparkle { animation: pd-twinkle 2.2s ease-in-out infinite; }
.pd-glint { animation-duration: 3.4s; }
@keyframes pd-twinkle { 0%, 100% { opacity: .1; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(25deg); } }
/* the rays turn on their own layer (an HTML box, not part of the trophy picture) so the GPU spins them smoothly */
.pd-rays { position: absolute; left: -6%; top: -8.772%; width: 112%; height: 98.246%; pointer-events: none;
  transform: rotate(0deg); will-change: transform; backface-visibility: hidden; animation: pd-spin 26s linear infinite; }
.pd-rays svg { display: block; width: 100%; height: 100%; }
@keyframes pd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-sparkle, .pd-rays { animation: none; } .pd-sparkle { opacity: .9; } }

@media (min-width: 46rem) {
  .pd-tw { width: min(118%, 13rem); }
  .pd-medal { width: min(80%, 6.6rem); }
}