/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION · winners.css
   Front page: last month's top three on Pawdle, Connect Paws and Paw Paths,
   set between the hero and the daily trio. Data and markup: shared/js/winners.js.
   The podium cards are printed dark in both themes, like the puzzle boards.
   ========================================================================== */

.winners{
  --gold-hi:#FFF1C4;   --gold:#E6B34C;   --gold-deep:#8F5F16;
  --silver-hi:#FFFFFF; --silver:#C9C4BB; --silver-deep:#6B665E;
  --bronze-hi:#F8CFAA; --bronze:#C9854F; --bronze-deep:#6A3918;
  --card-ink:#1B130A;
  padding-bottom:0;
}
/* No script, no scores: the trio simply follows the hero as it used to. */
.no-js .winners{ display:none }

/* The winners take over the tightened top padding home.css gives the first
   section after the hero. If the section hides itself (nothing to show),
   the trio gets that padding back. */
.dp-home .winners[hidden] + .dp-section{ padding-top:clamp(40px,5vw,72px) }
@media (min-width:900px){
  .dp-home .winners[hidden] + .dp-section{ padding-top:clamp(16px,1.5vw,24px) }
}

/* ── The three podiums ───────────────────────────────────────────────────
   One per game. Below 1000px they sit in a snapping row the reader swipes
   through, so the section never grows three cards tall on a phone. */
.podiums{
  margin-top:clamp(30px,4.4vw,52px);
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,84%);
  gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 40px;
  margin-bottom:-36px;
  scrollbar-width:none;
}
.podiums::-webkit-scrollbar{ display:none }
@media (min-width:640px){ .podiums{ grid-auto-columns:minmax(300px,56%) } }
@media (min-width:1000px){
  .podiums{
    grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible; margin-inline:0; padding:0; margin-bottom:0;
    gap:clamp(14px,1.6vw,24px);
  }
}

.podium{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  scroll-snap-align:start;
  border-radius:var(--r-lg);
  background:radial-gradient(120% 80% at 50% -6%,#34250F 0%,#1D140A 58%,#150E07 100%);
  border:1px solid rgba(244,234,214,.11);
  box-shadow:0 40px 72px -44px rgba(31,21,12,.85), inset 0 1px 0 rgba(244,234,214,.08);
  color:var(--cream);
}
/* A hairline in the game's own colour, drawn across the top edge */
.podium::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 24%,var(--accent) 76%,transparent 100%);
}
.podium-head{
  display:flex; align-items:center; gap:10px;
  padding:18px 22px 0;
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,234,214,.46);
}
.podium-head b{ font-weight:500; color:var(--accent) }
.podium-head strong{ font-weight:500; color:rgba(244,234,214,.86) }
.podium-head [data-winners-count]{ margin-left:auto }

.podium-body{ flex:1 1 auto; min-height:356px }

/* ── Champion ──────────────────────────────────────────────────────────── */
.podium-list{ list-style:none; margin:0; padding:0 }
.podium-champ{
  position:relative; z-index:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:26px 22px 22px;
}
/* The light the champion stands in */
.podium-champ::before{
  content:""; position:absolute; inset:-30% -10% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(44% 48% at 50% 44%,rgba(230,179,76,.22) 0%,rgba(230,179,76,.07) 52%,transparent 76%);
}

.podium-av{
  position:relative; flex:none; display:block;
  border-radius:50%; padding:2px;
  background:rgba(244,234,214,.16);
}
.podium-av img,
.podium-av i{
  display:block; width:100%; height:100%;
  border-radius:50%; object-fit:cover;
  background:#2A1E12; border:2px solid var(--card-ink);
}
.podium-champ .podium-av{
  width:80px; height:80px; padding:3px;
  background:conic-gradient(from 210deg,var(--gold-hi),var(--gold) 20%,var(--gold-deep) 42%,var(--gold) 62%,var(--gold-hi) 80%,var(--gold) 100%);
  /* A dark gap, then a fine gold hairline: set like a medal, not a halo */
  box-shadow:0 0 0 5px #1E150B, 0 0 0 6px rgba(230,179,76,.30), 0 20px 42px -14px rgba(230,179,76,.42);
}

.podium-label{
  margin-top:16px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.625rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.podium-label::before,
.podium-label::after{ content:""; width:18px; height:1px; background:currentColor; opacity:.5 }

/* The right padding matches the trophy and its gap, so the name itself sits
   on the card's centre line rather than the name-plus-trophy pair. */
.podium-champ-name{
  margin-top:8px; max-width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding-right:40px;
}
/* The champion's name is the loudest thing in the section: set large in the
   display face and cast in gold, with a highlight that sweeps across once
   when the card arrives and again on hover. */
.podium-champ-text{
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  padding-block:.08em .12em;
  font-family:var(--f-display); font-weight:560; font-optical-sizing:auto;
  font-size:clamp(1.8rem,2.4vw,2.3rem); line-height:1.08; letter-spacing:-.018em;
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,250,236,.95) 50%,transparent 60%) 120% 0 / 300% 100% no-repeat,
    linear-gradient(180deg,#FFEDB8 0%,#F0C467 46%,#C98F2E 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 16px rgba(230,179,76,.26));
}
.podium-champ-text.is-long{ font-size:clamp(1.4rem,1.9vw,1.75rem) }
.podium-champ-pts{
  margin-top:4px;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,234,214,.56);
}
.podium-champ-pts b{ font-weight:500; font-size:.8125rem; letter-spacing:.06em; color:var(--cream) }

/* ── Second and third ──────────────────────────────────────────────────── */
.podium-row{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:12px;
  margin-inline:16px; padding:12px 6px;
  border-top:1px solid rgba(244,234,214,.09);
}
.podium-row .podium-av{ width:40px; height:40px }
.podium-row--2 .podium-av{ background:linear-gradient(145deg,var(--silver-hi),var(--silver) 45%,var(--silver-deep)) }
.podium-row--3 .podium-av{ background:linear-gradient(145deg,var(--bronze-hi),var(--bronze) 45%,var(--bronze-deep)) }
.podium-who{ min-width:0; display:flex; flex-direction:column }
.podium-name{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-family:var(--f-display); font-weight:600; font-optical-sizing:auto;
  font-size:1.1rem; line-height:1.2; letter-spacing:-.012em;
  color:var(--cream);
}
.podium-place{
  margin-top:3px;
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
}
.podium-row--2 .podium-place{ color:var(--silver) }
.podium-row--3 .podium-place{ color:var(--bronze) }
.podium-pts{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; color:rgba(244,234,214,.5);
}
.podium-pts b{ font-weight:500; font-size:.8125rem; color:rgba(244,234,214,.9) }

/* Narrow cards (phones, and the three-up row just past 1000px): the points
   drop beneath the name so second and third keep their whole names. The
   trophy's metal still says the place; the label stays for screen readers. */
@container (max-width:340px){
  .podium-row{ grid-template-columns:auto auto minmax(0,1fr); column-gap:11px; row-gap:1px; padding-block:11px }
  .podium-row .podium-trophy{ grid-row:1 / span 2; width:28px; height:28px }
  .podium-row .podium-av{ grid-row:1 / span 2; width:38px; height:38px }
  .podium-row .podium-who{ grid-column:3; grid-row:1; align-self:end }
  .podium-row .podium-pts{ grid-column:3; grid-row:2; align-self:start; letter-spacing:.14em }
  .podium-row--2 .podium-pts b{ color:var(--silver-hi) }
  .podium-row--3 .podium-pts b{ color:var(--bronze-hi) }
  .podium-row .podium-place{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
}

/* ── Trophies ──────────────────────────────────────────────────────────── */
.podium-trophy{ display:block; flex:none; overflow:visible; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) }
.podium-champ .podium-trophy{
  width:30px; height:30px; margin-top:-2px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(230,179,76,.42));
}
.podium-row .podium-trophy{ width:30px; height:30px }

/* ── Foot ──────────────────────────────────────────────────────────────── */
.podium{ container-type:inline-size }
.podium-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 22px 17px;
  border-top:1px solid rgba(244,234,214,.10);
}
.podium-foot [data-winners-now]{
  display:inline-flex; align-items:center; gap:8px; min-width:0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,234,214,.5);
}
/* A small live dot in the game's colour: this month's board is running */
.podium-foot [data-winners-now]::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--accent-lit,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
/* The link keeps the site's own quiet-link voice: sentence case, no tracking */
.podium .dp-link{
  flex:none; color:var(--cream);
  font-size:.875rem; letter-spacing:0; text-transform:none; white-space:nowrap;
}
.podium .dp-link:hover{ color:var(--accent-lit,var(--accent)) }
@container (max-width:350px){
  .podium-foot [data-winners-now]{ display:none }
  .podium-foot{ justify-content:flex-end }
}

/* ── Loading, empty ────────────────────────────────────────────────────── */
.podium-skel{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 22px 22px }
.podium-skel i,
.podium-skel-row i{
  display:block; border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(244,234,214,.05) 20%,rgba(244,234,214,.12) 50%,rgba(244,234,214,.05) 80%);
  background-size:220% 100%;
}
.podium-skel .sk-av{ width:80px; height:80px; border-radius:50% }
.podium-skel .sk-sm{ width:34%; height:9px; margin-top:4px }
.podium-skel .sk-lg{ width:64%; height:30px }
.podium-skel .sk-xs{ width:26%; height:9px }
.podium-skel-row{
  display:grid; grid-template-columns:26px 40px minmax(0,1fr) 52px; align-items:center; gap:12px;
  margin-inline:16px; padding:12px 6px; border-top:1px solid rgba(244,234,214,.09);
}
.podium-skel-row i{ height:11px }
.podium-skel-row i:nth-child(1){ height:26px; border-radius:7px }
.podium-skel-row i:nth-child(2){ height:40px; border-radius:50% }
.podium-skel-row i:nth-child(3){ width:70% }

.podium-empty{
  display:grid; place-items:center; height:100%; min-height:inherit;
  padding:40px 28px; text-align:center;
  font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.12rem; line-height:1.4;
  color:rgba(244,234,214,.6);
}

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .podium-skel i,
  .podium-skel-row i{ animation:podSkel 1.5s linear infinite }

  .podium.is-in .podium-trophy{
    transform-origin:50% 92%;
    animation:podTrophy .85s var(--e-spring) both;
    animation-delay:calc(var(--i,0) * 120ms + 260ms);
  }
  .podium.is-in .podium-champ-text{ animation:podShine 2.4s var(--e-io) .55s both }
  .podium.is-in:hover .podium-champ-text{ animation:podShineAgain 1.5s var(--e-io) both }
}
@keyframes podSkel{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }
@keyframes podTrophy{
  from{ opacity:0; transform:translateY(8px) scale(.55) rotate(-14deg) }
  to{ opacity:1; transform:none }
}
@keyframes podShine{
  from{ background-position:120% 0, 0 0 }
  to{ background-position:-20% 0, 0 0 }
}
@keyframes podShineAgain{
  from{ background-position:120% 0, 0 0 }
  to{ background-position:-20% 0, 0 0 }
}