/* showdown-standings.css */
/* ============================================================
   CLASSROOM SHOWDOWN — FINAL STANDINGS (v2.74.0, showdown-standings.js).
   A 1447 × 1087 stage — the reference canvas — zoomed to the window. The
   scenery is the screen's background (showdown-host.css), so there is one
   picture behind everything. Each podium, trophy, ring, banner and plate is
   placed by the script at its design coordinate; the rings of team-member
   monsters circle each trophy on a slow orbit and counter-turn so the
   faces stay upright.

   z-order, back to front: confetti 1 → burst 2 → podium 3 → orbit 4 →
   trophy 5 → banner/plate 6 → logo, title, ribbon 7 → mascots, signs,
   word-art 8 → the button 9.
   ============================================================ */

.fs-deco{pointer-events:none;user-select:none}
.fs-confetti{z-index:1;opacity:.9}
.fs-burst{z-index:2;opacity:.95}
.fs-logo{z-index:7;filter:drop-shadow(0 6px 10px rgba(20,27,45,.3))}
.fs-tray{z-index:7}
.fs-title{z-index:7;margin:0;line-height:0}
.fs-title img{width:100%;filter:drop-shadow(0 10px 16px rgba(20,25,90,.3))}
.fs-ribbon{z-index:7;filter:drop-shadow(0 8px 14px rgba(20,25,90,.25))}
.fs-art-tr{z-index:8;opacity:.95}
.fs-art-bottom{z-index:8;opacity:.95}
.fs-sign{z-index:8}
.fs-mascot-l,.fs-mascot-r{z-index:8}
.fs-none{
  z-index:6;padding:24px;border-radius:26px;background:rgba(255,255,255,.9);text-align:center;
  font-family:var(--display);font-size:30px;font-weight:700;
}

/* A placement group: podium, orbit, trophy, banner, plate. */
.fs-place{left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.fs-place > *{position:absolute}
.fs-pod{z-index:3;filter:drop-shadow(0 12px 18px rgba(20,25,90,.35))}
.fs-trophy{z-index:5;transform:translateX(-50%);filter:drop-shadow(0 14px 18px rgba(20,25,90,.38))}
.fs-place-1 .fs-trophy{animation:fs-shine 3s ease-in-out infinite}
@keyframes fs-shine{0%,100%{filter:drop-shadow(0 14px 18px rgba(20,25,90,.38))}50%{filter:drop-shadow(0 14px 18px rgba(20,25,90,.38)) brightness(1.08)}}

/* The orbit: a zero-size point that turns once every 36 seconds; each arm
   is rotated to its slot and pushed out by the radius, and its ring turns
   the other way at the same rate. */
.fs-orbit{width:0;height:0;z-index:4;animation:fs-orbit 36s linear infinite}
.fs-place-2 .fs-orbit,.fs-place-3 .fs-orbit{animation-duration:30s;animation-direction:reverse}
@keyframes fs-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.fs-arm{position:absolute;left:0;top:0;width:0;height:0}
.fs-ring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);animation:fs-orbit 36s linear infinite reverse}
.fs-place-2 .fs-ring,.fs-place-3 .fs-ring{animation-duration:30s;animation-direction:normal}
/* The monster first, clipped to the circle; the glowing frame over it. */
.fs-face{
  position:absolute;inset:6%;width:auto;height:auto;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#ffffff,#dff2ff 70%,#bfe7ff);
  display:flex;align-items:center;justify-content:center;
}
.fs-face img{width:90%;height:90%;object-fit:contain}
.fs-face .sh-av-dot{width:46%;height:46%;border:3px solid #fff}
.fs-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* The name on the ribbon, the points on the plate — centred on the artwork. */
.fs-banner,.fs-plate{z-index:6}
.fs-banner img,.fs-plate img{width:100%;height:auto;display:block}
/* Centred on the artwork's writing band: the script sets `top` to where
   that band is in each image, and the text hangs from its own middle. */
.fs-tname,.fs-pts{
  position:absolute;left:14%;right:14%;top:50%;transform:translateY(-50%);
  text-align:center;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--display);font-weight:700;color:var(--ink);
}
.fs-pts{left:8%;right:8%;font-variant-numeric:tabular-nums}

/* Awesome Job! */
.fs-btnwrap{z-index:9;display:flex;justify-content:center;pointer-events:auto}
.fs-go{width:420px;height:127px;font-size:42px;pointer-events:auto}
.fs-go img{height:36px}

@media (prefers-reduced-motion:reduce){
  .fs-orbit,.fs-ring,.fs-place-1 .fs-trophy{animation:none}
}