/* The weekly champions board and the hall of fame. */

.board-clock {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s3) var(--s5);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 198, 61, .16), rgba(12, 20, 45, .8));
  border: 1px solid rgba(255, 198, 61, .35);
  margin-bottom: var(--s5);
}
.board-week { font-size: 12px; font-weight: 800; opacity: .72; font-family: var(--fd); }
.board-clock b { font-size: clamp(18px, 3.6vmin, 26px); font-weight: 900; color: var(--gold); }
.board-clock small { font-size: 12px; opacity: .68; font-weight: 700; }

/* ------------------------------------------------------------- podium */
.board-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: var(--s2); margin-bottom: var(--s5); }
.bp-step { display: flex; flex-direction: column; align-items: center; gap: var(--s1); position: relative; }
.bp-medal { font-size: 24px; line-height: 1; }
.bp-step b { font-size: 13px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.bp-step small { font-size: 12px; opacity: .78; font-family: var(--fd); }
.bp-step.me b { color: var(--neon); }

/* The crown drops onto first place. transform + opacity only — never a layout property. */
.bp-crown {
  position: absolute;
  top: -26px;
  font-size: 26px;
  animation: crownDrop .9s cubic-bezier(.2, 1.5, .4, 1) both;
  filter: drop-shadow(0 4px 10px rgba(255, 198, 61, .7));
  pointer-events: none;
}
@keyframes crownDrop {
  0% { opacity: 0; transform: translateY(-60px) rotate(-25deg) scale(.6); }
  60% { opacity: 1; transform: translateY(4px) rotate(6deg) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.bp-block {
  width: 100%; margin-top: var(--s1);
  border-radius: 12px 12px 0 0;
  display: grid; place-items: center;
  font-family: var(--fd); font-weight: 900; font-size: 22px;
  animation: blockRise .5s ease-out both;
  transform-origin: bottom center;
}
@keyframes blockRise { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1); } }
.bp1 .bp-block { height: 104px; background: linear-gradient(180deg, #ffe08a, #ffc63d); color: #3a2a00; animation-delay: .1s; }
.bp2 .bp-block { height: 76px; background: linear-gradient(180deg, #e8eefc, #b9c6de); color: #1d2536; }
.bp3 .bp-block { height: 58px; background: linear-gradient(180deg, #ffbe8f, #d98246); color: #2f1602; animation-delay: .2s; }

/* --------------------------------------------------------- your row */
.board-me {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: 16px;
  background: rgba(0, 229, 255, .12);
  border: 1px solid rgba(0, 229, 255, .5);
  margin-bottom: var(--s4);
}
.board-me-place { font-family: var(--fd); font-weight: 900; font-size: 18px; color: var(--neon); }
.board-me-txt { flex: 1; min-width: 0; text-align: start; }
.board-me-txt b { display: block; font-size: 14px; font-weight: 900; }
.board-me-txt small { font-size: 12px; opacity: .8; font-weight: 700; line-height: 1.5; }
.board-me-score { font-family: var(--fd); font-weight: 900; color: #8ef7ff; }

/* ------------------------------------------------------------ crowns */
.crowns { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 620px) { .crowns { grid-template-columns: repeat(2, 1fr); } }
.crown-card {
  padding: var(--s3);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s2);
  text-align: start;
}
.crown-card.mine { border-color: rgba(255, 198, 61, .6); background: rgba(255, 198, 61, .12); }
.crown-head { display: flex; gap: var(--s3); align-items: flex-start; }
.crown-icon { font-size: 24px; line-height: 1; }
.crown-head b { display: block; font-size: 14px; font-weight: 900; }
.crown-head small { font-size: 12px; opacity: .7; font-weight: 600; line-height: 1.5; }
.crown-winner { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.crown-winner b { display: block; font-size: 13px; font-weight: 900; }
.crown-winner small { font-size: 12px; opacity: .75; font-family: var(--fd); }
.crown-open {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: var(--s2); border-top: 1px dashed var(--line);
  font-size: 13px; font-weight: 800; color: #d8ffb0;
}
.crown-open small { font-size: 12px; opacity: .65; font-weight: 600; color: #eaf2ff; }

/* ------------------------------------------------------ hall of fame */
.hall-week { margin-bottom: var(--s5); }
.hall-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.hall-head b { font-size: 15px; font-weight: 900; }
.hall-head small { font-size: 12px; opacity: .62; font-family: var(--fd); }
.hall-winners { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
@media (min-width: 560px) { .hall-winners { grid-template-columns: repeat(3, 1fr); } }
.hall-winner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s3) var(--s2);
  border-radius: 14px;
  background: rgba(255, 198, 61, .1);
  border: 1px solid rgba(255, 198, 61, .3);
  text-align: center;
}
.hall-icon { font-size: 20px; line-height: 1; }
.hall-winner b { font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.hall-winner small { font-size: 12px; opacity: .75; font-weight: 700; }
.hall-detail { font-family: var(--fd); opacity: .6 !important; }