/* ==========================================================================
   Homepage — the orbit
   Mobile stacks everything. From 860px up the title, sign and section buttons
   are placed by percentage inside .stage: each button sits at its own --x / --y,
   with an optional --dx / --dy px nudge on top, set inline in the markup.
   ========================================================================== */

.page {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin: 0 auto;
  /* Stacked rhythm, top to bottom: ticker -> title, then title -> icons
     (.orbit's margin), icons -> standings (this gap), standings -> footer
     (this padding plus the footer's own 8px). */
  padding: 70px clamp(14px, 3vw, 34px) 40px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ------------------------------------------------------------------- core */
.stage { position: relative; }

.core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The sun sits behind everything in .core and hangs out below the sign. */
.core__sun {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -30%;
  width: min(54%, 300px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 34px rgba(255, 168, 32, .35));
  pointer-events: none;
}

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 0;
}
.wordmark img {
  width: min(94%, 520px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8));
}

/* The old seal, now a gold oval sign. */
.seal {
  position: relative;
  z-index: 2;
  margin: 4px 0 0;
  padding: 10px clamp(22px, 6vw, 42px);
  border: 3px outset var(--gold-lo);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 46%, #d99806);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), 0 6px 18px rgba(0, 0, 0, .75);
  font: 400 clamp(15px, 4.4vw, 24px)/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0a1b52;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .55);
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* ------------------------------------------------------- section buttons */
.orbit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: 20px 10px;
  margin-top: 50px;
}

.orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  text-decoration: none;
}
.orb:last-child:nth-child(odd) { grid-column: 1 / -1; }

.orb__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 112px;
}
.orb__art > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(53, 232, 206, .45));
}
/* Each icon carries its own --icon-w inline, so resizing one is a one-number
   edit and the art box no longer decides how big a gif gets to be. */
.orb__art > .orb__icon {
  width: var(--icon-w);
  height: auto;
  max-width: none;
  max-height: none;
}
.orb__art > .orb__badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 86px;
  max-width: none;
  transform: translateX(-50%) rotate(-11deg);
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, .9));
}

/* The "new!" burst, tucked into the lower-left corner of the megaphone. It
   ships hidden and js/newbadge.js unhides it for announcements this browser
   hasn't seen; the rule below is specific enough to need this one beside it. */
.orb__art > .orb__new[hidden] { display: none; }

.orb__art > .orb__new {
  position: absolute;
  z-index: 2;
  left: -10px;
  bottom: 8px;
  width: 48px;
  height: auto;
  max-width: none;
  max-height: none;
  transform: rotate(-8deg);
  filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, .9));
}

.orb__label {
  padding: 3px 9px;
  border: 2px outset var(--gold-lo);
  background: linear-gradient(180deg, #241370, #0b0733);
  font: 400 clamp(13px, 4vw, 18px)/1.15 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.orb:hover .orb__label,
.orb:focus-visible .orb__label {
  border-color: var(--magenta);
  background: linear-gradient(180deg, #6a0f52, #2b0524);
  color: var(--gold-hi);
}
.orb:hover .orb__art > img { filter: drop-shadow(0 0 16px var(--magenta)); }

/* --------------------------------------------------------- footer mascot */
.mascot {
  position: relative;
  z-index: 2;
  margin: -12px 0 0;
  padding-bottom: 26px;
  text-align: center;
  line-height: 0;
}
.mascot img { width: auto; height: 40px; }

@media (prefers-reduced-motion: no-preference) {
  .mascot img { animation: bob 3.4s ease-in-out infinite alternate; }
}

/* ============================ orbit layout ============================== */
@media (min-width: 700px) {
  /* the stacked rhythm above is a mobile thing; the orbit sets its own */
  .page { padding-top: 22px; padding-bottom: 40px; }

  .stage {
    --stage-h: clamp(600px, 54vw, 840px);
    min-height: var(--stage-h);
    /* The bottom row sits at --y:86%, so ~14% of the stage height (less half a
       button) is empty underneath it. Claw that back, and the gap below the
       buttons is the 40px the padding says at every width. */
    margin-bottom: calc(89px - .14 * var(--stage-h));
    display: block;
  }

  .core {
    position: absolute;
    z-index: 3;
    left: 45%;
    top: 38%;
    width: min(56%, 600px);
    transform: translate(-50%, -50%) translate(25px, 40px);
  }
  .wordmark img { width: 100%; }
  .core__sun { width: min(56%, 330px); top: -32%; }

  .orbit {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    margin: 0;
  }
  /* width:max-content lets the label box hug its text, so every pill is exactly
     as long as its words — a fixed width left short labels padded and long ones
     spilling out the right. Centring is done with translate, not a margin. */
  .orb {
    position: absolute;
    width: max-content;
    max-width: 230px;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg));
  }
  .orb__art { height: 124px; }
  .orb__art > .orb__badge { width: 96px; }
  .orb__label {
    font-size: 20px;
    white-space: nowrap;
    max-width: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .orb__art { animation: bob var(--bob, 7s) ease-in-out infinite alternate; }
  }
}

@keyframes bob { to { transform: translateY(-9px); } }

/* ======================= orbit beside the standings ===================== */
@media (min-width: 1080px) {
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 30px;
  }
  .standings { position: sticky; top: 22px; }
}