/* ============ Winner screen ============ */
/* Auto margins center it but keep the top reachable when the screen is short. */
.winner-content { margin-block: auto; }

.celebration {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.winner-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  width: min(680px, 100%);
}

.winner-title {
  font-size: clamp(1.7rem, 6.5vw, 3rem);
  max-width: 100%;
  animation: title-in .9s var(--ease-bounce) both;
}

.winner-sub {
  margin: 0;
  padding: .3em .9em;
  border: 3px solid var(--wood-edge);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  text-align: center;
  box-shadow: 0 4px 0 #3a1e0a;
  animation: fade-up .5s ease 1.6s both;
}

/* Podium: 2nd – 1st – 3rd, glossy blocks in each player's color */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.4rem, 2vw, 1rem);
  width: 100%;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 190px;
}

.podium-pawn {
  width: clamp(46px, 11vw, 74px);
  margin-bottom: .25rem;
  animation: fade-up .5s ease both;
}

.podium-pawn .pawn-svg { display: block; width: 100%; }

.place-1 .podium-pawn {
  width: clamp(66px, 16vw, 108px);
  filter: drop-shadow(0 0 16px #fff);
  animation: fade-up .5s ease 1.2s both, dance .5s ease-in-out 1.7s infinite alternate;
}

.place-2 .podium-pawn { animation-delay: .8s; }
.place-3 .podium-pawn { animation-delay: .5s; }

@keyframes dance {
  from { transform: rotate(-10deg) translateY(0); }
  to { transform: rotate(10deg) translateY(-16px); }
}

.podium-name {
  max-width: 100%;
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: .1em var(--wood-edge);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--wood-edge);
}

.podium-stats {
  font-size: clamp(.85rem, 3vw, 1.05rem);
  white-space: nowrap;
  -webkit-text-stroke: .1em var(--wood-edge);
  paint-order: stroke fill;
}

.podium-block {
  --c1: #ff8a7a;
  --c2: #e8382d;
  --c3: #a3150f;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  width: 100%;
  margin-top: .35rem;
  padding-top: .5rem;
  border: 4px solid var(--c3);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, var(--c1), var(--c2) 45%, var(--c3) 130%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -10px 20px rgba(0, 0, 0, .18), 0 10px 24px rgba(0, 0, 0, .3);
  transform-origin: bottom center;
  animation: rise .7s var(--ease-bounce) both;
}

.podium-block::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 6px;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
}

.pc-red .podium-block { --c1: #ff8a7a; --c2: #e8382d; --c3: #a3150f; }
.pc-green .podium-block { --c1: #7be36a; --c2: #2fbf2f; --c3: #13801b; }
.pc-yellow .podium-block { --c1: #ffe98a; --c2: #f7c21b; --c3: #a87600; }
.pc-blue .podium-block { --c1: #6cc3ff; --c2: #1f86ea; --c3: #0c4fa8; }

.place-1 .podium-block { height: clamp(110px, 22vh, 160px); animation-delay: .9s; }
.place-2 .podium-block { height: clamp(80px, 16vh, 115px); animation-delay: .6s; }
.place-3 .podium-block { height: clamp(60px, 12vh, 85px); animation-delay: .3s; }

@keyframes rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.podium-medal { position: relative; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1; }

.podium-num {
  position: relative;
  font-size: clamp(1.5rem, 5vw, 2.3rem);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: .1em rgba(0, 0, 0, .35);
  paint-order: stroke fill;
}

.badge-fire { white-space: nowrap; }

/* 4th place and beyond */
.ranking {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(420px, 100%);
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem .9rem;
  border-left: 8px solid var(--pc, var(--wood-edge));
  border-radius: var(--radius);
  text-shadow: 0 2px 0 rgba(60, 30, 10, .6);
  animation: fade-up .4s ease 1.4s both;
}

.rank-medal { font-size: 1.6rem; text-shadow: none; }

.rank-avatar {
  flex: none;
  display: grid;
  place-items: end center;
  width: 36px;
  height: 44px;
}

.rank-avatar .pawn-svg { width: 30px; }

.rank-name {
  flex: 1;
  min-width: 0;
  font-size: 1.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: .8rem;
  animation: fade-up .5s ease 1.8s both;
}

.winner-buttons .pill { min-height: 54px; font-size: clamp(1.05rem, 3.6vw, 1.3rem); }

/* Short landscape screens: tighter podium so the buttons stay visible */
@media (max-height: 560px) and (orientation: landscape) {
  .winner-content { gap: .35rem; }
  .winner-title { font-size: 1.6rem; }
  .winner-sub { display: none; }
  .podium-pawn { width: 36px; }
  .place-1 .podium-pawn { width: 52px; }
  .place-1 .podium-block { height: 62px; }
  .place-2 .podium-block { height: 46px; }
  .place-3 .podium-block { height: 34px; padding-top: .2rem; }
  .podium-medal { font-size: 1.3rem; }
  .podium-num { display: none; }
  .podium-stats { font-size: .8rem; }
  .rank-row { padding: .15rem .7rem; }
  .winner-buttons { margin-top: .3rem; }
  .winner-buttons .pill { min-height: 44px; font-size: 1rem; }
}

@keyframes title-in {
  0% { opacity: 0; transform: translateY(-120%) scale(.8); }
  55% { opacity: 1; transform: translateY(8%) scale(1.04); }
  75% { transform: translateY(-3%) scale(.99); }
  100% { transform: none; }
}