/* Podium and medals (see views/podium.js). */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 0 14px; padding-top: 24px; position: relative; }
.pod { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.pod > b { font: 700 15px var(--font-head); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-av { width: var(--s, 52px); height: var(--s, 52px); border-radius: 50%; background: var(--c); color: var(--chip-ink); display: grid; place-items: center; font: 700 calc(var(--s, 52px) * 0.42) var(--font-head); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); flex-shrink: 0; }
.pod .crown { font-size: 26px; color: var(--gold); line-height: 1; margin-bottom: -2px; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--gold) 55%, transparent)); }
.pil {
  width: 100%; margin-top: 8px; border-radius: 18px 18px 6px 6px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px 0; overflow: hidden;
  background: linear-gradient(180deg, var(--pm), color-mix(in srgb, var(--pm) 14%, transparent)); color: #14162B;
}
.pod.p1 { --pm: var(--gold); } .pod.p2 { --pm: var(--silver); } .pod.p3 { --pm: var(--bronze); }
.pod.p3 .pil { color: #fff; }
.pil > i { font: 800 34px/1 var(--font-head); font-style: normal; }
.pod.p3 .pil > i { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.pil strong { font-size: 17px; color: inherit; font-family: var(--font-mono); }
.pil small { font-size: 10.5px; opacity: 0.75; text-align: center; line-height: 1.2; }
.pil .trk { width: 100%; height: 8px; margin: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.pil .trk i { display: block; height: 100%; border-radius: 4px; background: currentColor; opacity: 0.75; }
.pil .medcols { margin-top: 4px; gap: 4px; }

/* Home screen: only name, place and the pillar. */
.podium.simple .pil { padding-top: 8px; }
.podium.simple .pil > i { font-size: 28px; }

/* Finished-game podium: solid medal pillars, a badge for the place, confetti and a glow behind the winner. */
.podium.big { margin-bottom: 18px; padding-top: 30px;
  background-image: radial-gradient(circle at 10% 18%, var(--gold) 0 2.5px, transparent 3.5px), radial-gradient(circle at 90% 10%, var(--accent2) 0 2.5px, transparent 3.5px), radial-gradient(circle at 20% 58%, var(--accent) 0 2px, transparent 3px), radial-gradient(circle at 82% 52%, var(--good) 0 2.5px, transparent 3.5px), radial-gradient(circle at 36% 8%, #5CC8FF 0 2px, transparent 3px), radial-gradient(circle at 66% 24%, var(--gold) 0 2px, transparent 3px); }
.podium.big::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; border-radius: 4px; background: var(--surface-alt); }
.podium.big .pod.p1::before { content: ''; position: absolute; top: 4px; left: 50%; width: 200px; height: 200px; transform: translateX(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--gold) 40%, transparent), transparent 65%); z-index: 0; pointer-events: none; }
.podium.big .pod > * { position: relative; z-index: 1; }
.podium.big .pil { background: linear-gradient(180deg, var(--pm), color-mix(in srgb, var(--pm) 52%, transparent)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.47), var(--shadow-card); padding-top: 14px; gap: 2px; }
.podium.big .pil > i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(255, 255, 255, 0.33); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.67); margin-bottom: 6px; color: #14162B; text-shadow: none; }
.podium.big .pod.p3 .pil > i { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.27); }
.podium.big .pil strong { font-size: 26px; letter-spacing: -0.02em; }
.podium.big .pil .pt { font: 600 10.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; margin-top: -2px; }
.podium.big .pil small { margin-top: 6px; font-size: 11px; }

/* Medal counters (gold / silver / bronze) */
.medcols { display: inline-flex; gap: 8px; }
.medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-mono); background: color-mix(in srgb, var(--m) 24%, transparent); color: var(--ink); box-shadow: inset 0 0 0 2px var(--m); }
.medal.sm { width: 24px; height: 24px; font-size: 11px; }
.medal.zero { opacity: 0.35; }
.pod.p3 .medal { color: #fff; }