/* The Clip Game on the homepage (clip-game-v1.js): the "Fly a blimp" modal over the sky.
   v2: the sponsor mark under "Fly a blimp" at full strength, and a lighter mist over the hero/board join (the
   mirrored clouds meet on their own now; the old mist washed the mark out).
   Frosted glass like the rest of the site: a white veil over the sky, light inset on the top edge,
   navy type. One action per step; steps dissolve into each other. */
.fly-pill{
  display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 32px);
  margin:22px auto 0; padding:7px 7px 7px 18px; border-radius:999px;
  background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px rgba(var(--lo-rgb,14,8,32),.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  color:#1b1f4a; font:600 14px/1.2 Inter, system-ui, sans-serif; position:relative; z-index:2;
}
.fly-pill button{
  border:0; border-radius:999px; padding:10px 18px; background:#1b1f4a; color:#fff;
  font:800 14px Inter, system-ui, sans-serif; cursor:pointer; white-space:nowrap;
}
.fly-pill button:hover{ background:#2a3070; }
@media (max-width:520px){ .fly-pill span{ font-size:12.5px; } }

.fly{
  border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%;
  color:#1b1f4a; font-family:Inter, system-ui, -apple-system, sans-serif;
}
.fly::backdrop{ background:rgba(120,170,230,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.fly[open]{ display:grid; place-items:center; }
.fly__panel{
  position:relative; width:min(560px, calc(100vw - 24px)); max-height:min(860px, calc(100dvh - 24px)); overflow:auto;
  padding:28px 26px 22px; border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(27,31,74,.06), 0 30px 80px rgba(20,40,90,.25);
  -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3);
  animation:fly-in .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes fly-in{ from{ opacity:0; transform:translateY(10px) scale(.98); filter:blur(4px); } }
.fly__close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(27,31,74,.12); background:rgba(255,255,255,.6); color:#1b1f4a; font:500 22px/1 Inter, sans-serif; cursor:pointer;
}
.fly__step{ transition:opacity .2s ease, transform .2s ease, filter .2s ease; }
.fly__step.is-leaving, .fly__step.is-entering{ opacity:0; transform:scale(.985); filter:blur(6px); }
.fly__title{
  margin:2px 0 14px; text-align:center; font:italic 900 clamp(34px, 7vw, 48px)/.95 Inter, system-ui, sans-serif;
  letter-spacing:-.035em; color:#1b1f4a;
}
.fly__lede{ margin:0 auto 18px; max-width:420px; text-align:center; font-size:15px; line-height:1.45; color:#3b3f6b; }
.fly__back{ border:0; background:none; color:#3b3f6b; font:600 14px Inter, sans-serif; cursor:pointer; padding:0; margin-bottom:4px; }
.fly__toggle{ display:flex; margin:0 auto 12px; width:max-content; padding:4px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); }
.fly__toggle button{ border:0; border-radius:999px; padding:10px 26px; background:transparent; color:#1b1f4a; font:700 15px Inter, sans-serif; cursor:pointer; transition:background .2s, color .2s; }
.fly__toggle button.is-on{ background:#1b1f4a; color:#fff; }
.fly__rule{ text-align:center; margin:0 0 10px; font-size:14px; color:#3b3f6b; }
.fly__list{ list-style:none; margin:0; padding:0; }
.fly__list li{
  display:grid; grid-template-columns:34px 1.2fr minmax(0,1fr) auto; align-items:center; gap:10px;
  min-height:46px; padding:2px 6px; border-bottom:1px solid rgba(27,31,74,.07);
}
.fly__list li:last-child{ border-bottom:0; }
.fly__rank{ font:800 17px Inter, sans-serif; text-align:center; }
.fly__rank i{ font-style:normal; font-size:13px; }
.fly__ship{ display:flex; justify-content:center; }
.fly__ship .fly-blimp{ width:calc(176px * var(--s)); min-width:62px; height:auto; transition:transform .3s; }
.fly__list li:hover .fly-blimp{ transform:translateY(-2px); }
.fly__who{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fly__who a{ color:inherit; text-decoration:none; }
.fly__who a:hover{ text-decoration:underline; }
.fly__val{ font-weight:800; text-align:right; white-space:nowrap; }
.fly__list li.is-open{ color:rgba(27,31,74,.45); }
.fly__list li.is-open .fly__val{ font-weight:600; font-size:13px; }
.fly__foot{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 10px 10px 16px; border-radius:18px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
}
.fly__you{ flex:1; margin:0; font-size:14px; line-height:1.35; }
.fly__mine{ margin-top:10px; font-size:13.5px; }
.fly__mine summary{ cursor:pointer; font-weight:700; color:#3b3f6b; }
.fly__mine ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.fly__mine li{ display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.55); }
.fly__mine a{ color:#1b1f4a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fly__mine span{ flex:none; font-weight:700; } .fly__mine .is-approved{ color:#16825d; } .fly__mine .is-pending{ color:#b26b00; } .fly__mine .is-rejected{ color:#b3302a; }
.fly__primary, .fly__secondary, .fly__google{
  border:0; border-radius:14px; padding:13px 20px; cursor:pointer; font:800 15px Inter, sans-serif; white-space:nowrap;
}
.fly__primary{ background:#1b1f4a; color:#fff; }
.fly__primary:hover{ background:#2a3070; }
.fly__primary:disabled{ opacity:.45; cursor:default; }
.fly__secondary, .fly__google{ background:rgba(255,255,255,.7); color:#1b1f4a; border:1px solid rgba(27,31,74,.14); }
.fly__google{ display:block; width:100%; margin-bottom:10px; }
.fly__link{ display:block; margin:14px auto 0; border:0; background:none; color:#2457c5; font:700 14px Inter, sans-serif; cursor:pointer; }
.fly__row{ display:flex; gap:10px; justify-content:center; }
.fly__msg{ min-height:18px; margin:10px 0 0; font-size:13.5px; color:#3b3f6b; text-align:center; }

.fly__games{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:0 0 16px; padding:0; }
.fly__games a{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#1b1f4a; text-decoration:none; font:700 13px Inter, sans-serif; }
.fly__games img{ width:100%; max-width:88px; height:auto; border-radius:22px; box-shadow:0 8px 22px rgba(20,40,90,.22); transition:transform .2s; }
.fly__games a:hover img{ transform:translateY(-3px) scale(1.03); }
.fly__tags{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; }
.fly__tags li a, .fly__tags li.is-off{ display:inline-block; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); color:#1b1f4a; text-decoration:none; font-size:13.5px; }
.fly__tags li.is-off{ opacity:.55; }

.fly__amount{ display:flex; justify-content:center; align-items:center; gap:12px; margin:6px 0 12px; }
.fly__amount button{ width:52px; height:52px; border-radius:16px; border:1px solid rgba(27,31,74,.14); background:rgba(255,255,255,.7); font:500 26px Inter, sans-serif; color:#1b1f4a; cursor:pointer; }
.fly__amount label{ display:flex; align-items:center; padding:6px 18px; border-radius:18px; background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.95); font:900 44px Inter, sans-serif; }
.fly__amount input{ width:4.2ch; border:0; background:transparent; font:inherit; color:inherit; outline:none; text-align:left; }
.fly__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:10px; }
.fly__chips button{ border:1px solid rgba(27,31,74,.12); background:rgba(255,255,255,.6); border-radius:999px; padding:8px 14px; font:700 13.5px Inter, sans-serif; color:#1b1f4a; cursor:pointer; }
.fly__chips button.is-on{ background:#2f6df0; color:#fff; border-color:transparent; }
.fly__where{ text-align:center; margin:0 0 16px; font-size:15px; }
[data-step="amount"] .fly__primary, .fly__form .fly__primary{ display:block; width:100%; }

.fly__email, .fly__code{ display:flex; gap:8px; }
.fly__email input, .fly__code input, .fly__form input:not([type=radio]):not([type=checkbox]){
  flex:1; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid rgba(27,31,74,.16); background:rgba(255,255,255,.75);
  font:500 15px Inter, sans-serif; color:#1b1f4a;
}
.fly__code{ margin-top:8px; }

/* Claim your spot: three short steps, the game, the link */
.fly__how{ margin:0 auto 16px; padding:0; max-width:420px; list-style:none; counter-reset:how; display:grid; gap:8px; }
.fly__how li{ counter-increment:how; position:relative; padding-left:34px; font-size:14.5px; line-height:1.4; color:#3b3f6b; }
.fly__how li::before{
  content:counter(how); position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font:800 12.5px Inter, sans-serif; color:#1b1f4a; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(214,232,255,.6)); border:1px solid rgba(255,255,255,.95);
  box-shadow:0 2px 6px rgba(30,60,120,.14);
}
.fly__how b{ color:#1b1f4a; }
.fly__claim{ display:grid; gap:12px; }
.fly__claim label{ display:block; font:700 13.5px Inter, sans-serif; }
.fly__claim label > input:not([type=checkbox]){
  display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:12px 14px; border-radius:12px; border:1px solid rgba(27,31,74,.16);
  background:rgba(255,255,255,.75); font:500 15px Inter, sans-serif; color:#1b1f4a;
}
.fly__claim .fly__primary{ display:block; width:100%; }
.fly__newname{ display:grid; gap:10px; }
.fly__newname[hidden]{ display:none; }
.fly__pick{ border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.fly__pick legend{ font:700 13.5px Inter, sans-serif; margin-bottom:8px; padding:0; }
.fly__pick label{ display:flex !important; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:14px; cursor:pointer;
  font:600 11px/1.2 Inter, sans-serif !important; text-align:center; color:#3b3f6b; transition:background-color .15s ease-out, transform .12s ease-out; }
.fly__pick label:hover{ background:rgba(255,255,255,.5); }
.fly__pick label:active{ transform:scale(.96); }
.fly__pick label:has(input:checked){ background:rgba(255,255,255,.85); color:#1b1f4a; box-shadow:inset 0 0 0 2px #2457c5; }
.fly__pick input{ position:absolute; opacity:0; pointer-events:none; }
.fly__pick img{ width:44px; height:44px; border-radius:12px; box-shadow:0 4px 10px rgba(20,40,90,.18); }
@media (max-width:520px){ .fly__pick{ grid-template-columns:repeat(3, 1fr); } }

/* Your blimp: the blimp you fly, or an empty spot waiting for one */
.fly__myblimp{ text-align:center; }
.fly__myblimp .fly__preview img{ width:min(260px, 75%); height:auto; filter:drop-shadow(0 10px 18px rgba(20,40,90,.2)); animation:fly-bob 3.2s ease-in-out infinite; }
.fly__ghost{ display:flex; justify-content:center; margin:0 0 6px; }
.fly__ghost .fly-blimp{ width:min(240px, 70%); height:auto; opacity:.55; filter:grayscale(.3); }
.fly__myblimp .fly__row{ margin-bottom:6px; }
.fly__sub{ margin:18px 0 8px; font:800 15px Inter, sans-serif; color:#1b1f4a; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.fly__sub small{ font:600 12.5px Inter, sans-serif; color:#6b6f96; }
.fly__cliplist{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fly__cliplist li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.55); font-size:13.5px; }
.fly__cliplist a{ color:#1b1f4a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fly__cliplist span{ flex:none; padding:3px 9px; border-radius:999px; font:700 12px Inter, sans-serif; }
.fly__cliplist .is-pending{ color:#8a5600; background:rgba(255,196,77,.25); }
.fly__cliplist .is-approved{ color:#11704f; background:rgba(34,196,138,.18); }
.fly__cliplist .is-rejected{ color:#a42a24; background:rgba(240,80,63,.14); }
.fly__none{ margin:0; padding:14px; border-radius:12px; border:1px dashed rgba(27,31,74,.18); text-align:center; font-size:13.5px; color:#6b6f96; }
.fly__account--page{ margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .fly__myblimp .fly__preview img{ animation:none; } }
.fly__preview{ display:flex; flex-direction:column; align-items:center; margin:0 0 10px; }
.fly__preview .fly-blimp{ width:min(300px, 80%); height:auto; filter:drop-shadow(0 10px 18px rgba(20,40,90,.2)); animation:fly-bob 3.2s ease-in-out infinite; }
.fly__preview p{ margin:4px 0 0; font-size:13.5px; color:#3b3f6b; }
.fly__preview--big .fly-blimp{ width:min(380px, 90%); animation:fly-arrive .9s cubic-bezier(.2,.8,.2,1), fly-bob 3.2s ease-in-out .9s infinite; }
@keyframes fly-bob{ 50%{ transform:translateY(-5px) rotate(-.6deg); } }
@keyframes fly-arrive{ from{ opacity:0; transform:translateX(-40%) scale(.6); filter:blur(6px); } }
.fly__form{ display:grid; gap:12px; }
.fly__form > label{ display:block; font:700 13.5px Inter, sans-serif; }
.fly__form > label > input{ display:block; width:100%; box-sizing:border-box; margin-top:6px; }
.fly__form > label small{ margin-left:6px; }
.fly__form small{ font-weight:500; color:#6b6f96; }
.fly__colors{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.fly__colors legend{ font:700 13.5px Inter, sans-serif; margin-bottom:6px; }
.fly__colors label{ width:30px; height:30px; border-radius:50%; background:var(--c); cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.fly__colors label:has(input:checked){ outline:3px solid #1b1f4a; outline-offset:2px; }
.fly__colors input{ position:absolute; opacity:0; pointer-events:none; }
.fly__terms{ display:flex !important; grid-template-columns:none; gap:8px !important; align-items:flex-start; font-weight:500 !important; font-size:13px !important; color:#3b3f6b; }
.fly__terms a{ color:#2457c5; }
/* Guest bids: the email field and the "sign in instead" line, shown only while signed out */
.fly__guest[hidden]{ display:none !important; }
.fly__have{ margin:10px 0 0; text-align:center; font-size:13px; color:#3b3f6b; }
.fly__have .fly__link{ display:inline; margin:0; font-size:13px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:520px){
  .fly__panel{ padding:22px 14px 16px; border-radius:24px; }
  .fly__list li{ grid-template-columns:26px 1fr minmax(0,1fr) auto; gap:6px; }
  .fly__ship .fly-blimp{ width:calc(110px * var(--s)); min-width:46px; }
  .fly__foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .fly__games{ grid-template-columns:repeat(2, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  .fly__panel, .fly__preview .fly-blimp, .fly__step{ animation:none !important; transition:none !important; }
}

.fly__agree{ margin:0 0 12px; }
.fly__account{ margin:12px 0 0; text-align:center; font-size:12.5px; color:#6b6f96; }
.fly__account button{ border:0; background:none; padding:0; font:inherit; color:#3b3f6b; text-decoration:underline; cursor:pointer; }
.fly__danger{ background:#b3302a; } .fly__danger:hover{ background:#c93a33; }
.fly__terms b{ color:#1b1f4a; }

.fly__rule a{ color:#2457c5; }

/* ---- The Sky Board: the Clips and Bids leaderboards under the hero, split down the middle ---- */
/* One sky from the hero down through the footer: the body carries the hero's sky colour, the board's top
   clouds are the hero's clouds mirrored, and the footer sits on the hero's clouds the right way up. Every
   layer fades out at its edges, so no join reads as a line. */
html.has-skyboard, html.has-skyboard body{ height:auto !important; overflow:visible !important; overflow-x:hidden !important; }
html.has-skyboard body{ background:#7fbffa; }
html.has-skyboard #hero{ height:auto; min-height:calc(100dvh - 104px); } /* the board's title peeks over the fold, so people scroll */
/* main's landing layout drops the hero copy lower to give Sensei's blimp the band above it; trim the space under
   the copy instead, so the board's title still peeks over the fold */
html.has-skyboard #hero .rw-main{ padding-bottom:clamp(24px, 3vh, 40px); }
html.has-skyboard .foot{ position:relative !important; z-index:1; pointer-events:auto; padding:150px 20px 30px; margin-top:-120px; background:none; }
html.has-skyboard .foot::before{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1; height:max(min(52vw, 760px), 380px); pointer-events:none;
  background:url("motions-hero-sky-soft-clouds.webp") center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%); mask-image:linear-gradient(180deg, transparent 0%, #000 45%);
}
html.has-skyboard .foot .legal__links{ color:#2b3166; opacity:.8; }
.skyboard{
  position:relative; scroll-margin-top:64px; z-index:2; padding:30px 24px 150px; color:#1b1f4a; font-family:Inter, system-ui, sans-serif;
}
.skyboard::before{ /* the hero's clouds mirrored, fading out into open sky */
  /* as tall as the hero (--hero-h, measured in clip-game-v1.js), so "cover" draws these clouds at the same scale as
     the hero's and they meet edge to edge */
  content:""; position:absolute; left:0; right:0; top:0; height:var(--hero-h, max(calc(100dvh - 104px), 420px)); pointer-events:none; transform:scaleY(-1);
  background:url("motions-hero-sky-soft-clouds.webp") center bottom / cover no-repeat;
  /* mirrored, so the row at the join is the hero's own bottom row; the mask flips with it, so "to top" here fades the bottom on screen */
  -webkit-mask-image:linear-gradient(0deg, #000 50%, transparent 100%); mask-image:linear-gradient(0deg, #000 50%, transparent 100%);
}
.skyboard::after{ /* a faint bell of mist across the join, kept below the hero's last line (the sponsor mark) */
  content:""; position:absolute; left:0; right:0; top:-60px; height:260px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 23%, rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.12) 55%, rgba(255,255,255,.04) 78%, rgba(255,255,255,0) 100%);
}
.skyboard > *{ position:relative; z-index:1; }
.skyboard > .sb-fleet{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sb-craft{ position:absolute; left:0; top:var(--top); width:var(--w); animation:sb-drift var(--t) linear var(--at) infinite; will-change:transform; }
.sb-craft > span{ display:block; animation:sb-bob 7s ease-in-out infinite alternate; }
.sb-craft .fly-blimp{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(30,60,120,.18)); }
.sb-craft.is-far{ opacity:.6; }
.sb-craft.is-far .fly-blimp{ filter:blur(.6px) saturate(.85); }
@keyframes sb-drift{ from{ transform:translateX(-200px); } to{ transform:translateX(calc(100vw + 40px)); } }
@keyframes sb-bob{ from{ transform:translateY(-5px) rotate(-1deg); } to{ transform:translateY(5px) rotate(1deg); } }
@media (max-width:760px){ .sb-craft{ width:calc(var(--w) * .62); } }
@media (prefers-reduced-motion: reduce){
  .sb-craft, .sb-craft > span{ animation:none; }
  .sb-craft{ transform:translateX(calc((100vw - var(--w)) * var(--top))); }
}
.skyboard__intro{
  box-sizing:border-box; width:min(700px, calc(100% - 24px)); margin:0 auto 24px; padding:20px; border-radius:42px;
  background:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.88), rgba(255,255,255,.64) 62%, rgba(255,255,255,.4));
  box-shadow:0 14px 44px rgba(34,73,132,.08); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.skyboard__title{ position:relative; margin:0; text-align:center; color:#111638; font:italic 900 clamp(38px, 6vw, 64px)/.95 Inter, system-ui, sans-serif; letter-spacing:-.035em; }
.skyboard__lede{ margin:12px auto 0; max-width:560px; text-align:center; font-size:16px; font-weight:600; line-height:1.45; color:#171d49; }
.skyboard__deadline{
  width:fit-content; max-width:min(680px, calc(100% - 24px)); margin:0 auto 46px; padding:10px 18px; border-radius:999px;
  text-align:center; color:#202653; font-size:15px; line-height:1.35; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(226,239,255,.58)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 8px 24px rgba(30,60,120,.12); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.skyboard__deadline strong{ color:#b53442; font-weight:900; }
.skyboard__deadline b{ color:#1b1f4a; font-weight:900; }
.skyboard__cols{ display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:22px; max-width:1100px; margin:0 auto; }
.skyboard__col{
  display:flex; flex-direction:column; padding:22px; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.5)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 20px 50px rgba(30,60,120,.12); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.skyboard__col header{ text-align:center; margin-bottom:10px; }
.skyboard__col h3{ margin:0; font:italic 900 28px Inter, sans-serif; letter-spacing:-.02em; }
.skyboard__col header p{ margin:6px 0 0; font-size:13.5px; color:#3b3f6b; }
.skyboard__col ol{ list-style:none; margin:0; padding:0; }
.skyboard__col li{ display:grid; grid-template-columns:40px 150px minmax(0,1fr) minmax(84px, auto); align-items:center; gap:10px; min-height:38px; padding:2px 8px; border-bottom:1px solid rgba(27,31,74,.07); }
.skyboard__col li.is-top{ min-height:50px; }
.skyboard__col li.is-me{ background:rgba(255,224,130,.35); border-radius:12px; }
.skyboard__col > ol li:last-child{ border-bottom:1px solid rgba(27,31,74,.07); }
.sb-fold ol li:last-child{ border-bottom:0; }
.sb-rank{ font-weight:800; font-size:16px; text-align:center; }
.sb-ship{ display:flex; justify-content:center; }
.sb-ship > span{ display:block; width:calc(150px * var(--s)); min-width:56px; }
.sb-ship .fly-blimp, .sb-3d{ width:100%; height:auto; display:block; }
.sb-flat{ display:block; }
.sb-3d.is-new{ animation:sb-3d-in .35s cubic-bezier(.22,1,.36,1); } /* the rendered blimp replaces the flat one */
@keyframes sb-3d-in{ from{ opacity:0; transform:scale(.94); } }
.sb-craft .sb-3d{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(30,60,120,.18)); }
.sb-craft.is-far .sb-3d{ filter:blur(.6px) saturate(.85); }
.sb-who{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-who a{ color:inherit; text-decoration:none; } .sb-who a:hover{ text-decoration:underline; }
.sb-val{ font-weight:800; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }

.sb-empty{ display:block !important; text-align:center; padding:28px 8px !important; color:#6b6f96; border:0 !important; }
/* A place nobody holds yet: the blimp it flies, faded, and a Claim button where the number would be */
.skyboard__col li.is-open .sb-ship{ opacity:.68; filter:saturate(.8); }
/* Open places give the label and claim action separate lines, including long clip targets. */
.skyboard__col li.is-open{ grid-template-columns:40px minmax(64px,120px) minmax(0,1fr); row-gap:4px; padding-block:10px; }
.skyboard__col li.is-open .sb-rank{ grid-column:1; grid-row:1 / 3; }
.skyboard__col li.is-open .sb-ship{ grid-column:2; grid-row:1 / 3; }
.skyboard__col li.is-open .sb-ship > span{ max-width:100%; }
.skyboard__col li.is-open .sb-who{ grid-column:3; grid-row:1; display:block; overflow:visible; white-space:normal; font-weight:600; color:#7a7fa6; }
.skyboard__col li.is-open .sb-claim{ grid-column:3; grid-row:2; justify-self:start; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
/* Under the board's explainer: you, and the way to your blimp and clips (or to sign in) */
/* Your account, top right of the nav: a glass circle with a profile icon, or your initial */
.nav-account{
  position:absolute; right:clamp(18px, 3vw, 40px); top:calc(var(--nav-y, 22px) - 4px); width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; cursor:pointer; color:#1b1f4a; background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(30,60,120,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .15s ease-out, transform .12s ease-out;
}
.nav-account:hover{ background:rgba(255,255,255,.65); }
.nav-account:active{ transform:scale(.94); }
.nav-account svg{ width:20px; height:20px; }
.nav-account span{ font:800 15px Inter, system-ui, sans-serif; }
@media (max-width:760px){ .nav-account{ right:64px; top:12px; } } /* beside the menu button */
.sb-claim{ /* the same glass as "Fly a blimp" and the board's buttons, on both boards */
  justify-self:end; padding:7px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; color:#1b1f4a; font:800 13px Inter, system-ui, sans-serif; letter-spacing:.01em;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(214,232,255,.45)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(30,60,120,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .12s ease-out, background-color .15s ease-out;
}
.sb-claim:hover{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,239,255,.65)); } .sb-claim:active{ transform:scale(.96); }
.sb-claim:focus-visible{ outline:2px solid #1b1f4a; outline-offset:2px; }
.skyboard__lede b{ display:block; font-size:18px; color:#101538; margin-bottom:4px; }
/* See more: an accordion (grid rows 0fr -> 1fr) whose rows fade and settle in one after another */
.sb-fold{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.sb-fold > ol{ min-height:0; overflow:hidden; }
.sb-fold li{ opacity:0; transform:translateY(-6px); transition:opacity .16s ease-out, transform .16s ease-out; }
.is-all > .sb-fold{ grid-template-rows:1fr; transition-duration:.46s; transition-timing-function:cubic-bezier(.22,1,.36,1); }
.is-all > .sb-fold li{ opacity:1; transform:none; transition-duration:.3s; transition-delay:calc(60ms + min(var(--i), 14) * 28ms); transition-timing-function:cubic-bezier(.22,1,.36,1); }
.skyboard__more{ /* just the chevron */
  align-self:center; display:inline-flex; align-items:center; justify-content:center; width:44px; height:32px; margin:10px auto 0; padding:0; border:0; border-radius:999px;
  background:rgba(36,87,197,.08); color:#2457c5; font:700 14px Inter, sans-serif; cursor:pointer;
  transition:background-color .15s ease-out, transform .12s ease-out;
}
.skyboard__more:hover{ background:rgba(36,87,197,.14); }
.skyboard__more:active{ transform:scale(.96); }
.skyboard__more svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.skyboard__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.skyboard__more[hidden]{ display:none; }
/* Rows settle in as they scroll into view, while their numbers count up */
.skyboard__col > ol li:not(.is-in){ opacity:0; transform:translateY(8px); }
.skyboard__col > ol li{ transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); transition-delay:var(--d, 0ms); }
.sb-val.is-landed{ animation:sb-land .32s cubic-bezier(.22,1,.36,1); }
@keyframes sb-land{ 40%{ transform:scale(1.08); } }
.sb-val{ display:inline-block; transform-origin:right center; justify-self:end; }
@media (prefers-reduced-motion: reduce){
  .sb-fold, .sb-fold li, .skyboard__col > ol li, .skyboard__more svg{ transition:none !important; }
  .skyboard__col > ol li:not(.is-in){ opacity:1; transform:none; }
  .sb-val.is-landed, .sb-3d.is-new{ animation:none; }
}
.skyboard__cta{ margin-top:14px; display:grid; gap:8px; }
/* The board's actions: the hero pill with its line of text, and the button inside it in the same glass as
   the hero's "Fly a blimp" rather than navy */
.skyboard__cta .sb-pill{ margin:0 auto; }
.fly-pill .sb-action{
  padding:11px 20px; color:#1b1f4a; font:800 14px Inter, system-ui, sans-serif;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(214,232,255,.45)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(30,60,120,.16);
}
.fly-pill .sb-action:hover{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,239,255,.65)); }
.fly-pill--glass{ padding:0; }
/* The sky's sponsor under "Fly a blimp": a watermark, not a button */
.sky-sponsor-mark{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; margin:12px auto 0;
  padding:5px 12px; border-radius:999px; color:#1b1f4a; text-decoration:none; transition:background-color .15s ease-out;
  font:500 12px Inter, system-ui, sans-serif;
}
.sky-sponsor-mark span{ letter-spacing:.02em; color:#3b3f6b; }
.sky-sponsor-mark img{ width:auto; height:26px; } /* the mascot is portrait; at its own shape it stays sharp */
.sky-sponsor-mark b{ font:700 15px Inter, system-ui, sans-serif; letter-spacing:-.01em; }
/* v3: blimps now fly the band under the icons, so the mark sits on a little glass to stay legible as they pass */
.sky-sponsor-mark{ background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sky-sponsor-mark:hover{ background:rgba(255,255,255,.72); }
.fly-pill--glass button{ padding:13px 28px; background:transparent; color:#1b1f4a; font-size:15px; }
.fly-pill--glass button:hover{ background:rgba(255,255,255,.28); }
.fly-pill button{ transition:background-color .15s ease-out, transform .12s ease-out; }
.fly-pill button:active{ transform:scale(.96); }
.sb-you{ margin:0; text-align:center; font-weight:700; font-size:14px; }
/* Phones: one board at a time, picked with a glass switch, so the page isn't the same list twice */
.sb-switch{ display:none; }
@media (max-width:760px){
  .sb-switch{
    position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(320px, 100%); margin:0 auto 16px; padding:5px; border-radius:999px;
    background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px rgba(14,8,32,.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  }
  .sb-switch button{
    position:relative; z-index:1; border:0; background:none; padding:10px 0; border-radius:999px; cursor:pointer;
    color:#3b3f6b; font:800 italic 16px Inter, system-ui, sans-serif; letter-spacing:-.01em; transition:color .2s ease-out, transform .12s ease-out;
  }
  .sb-switch button[aria-selected="true"]{ color:#1b1f4a; }
  .sb-switch button:active{ transform:scale(.96); }
  .sb-switch__thumb{
    position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(226,239,255,.6)); border:1px solid rgba(255,255,255,.95);
    box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(30,60,120,.16);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
  }
  .skyboard[data-show="clips"] .sb-switch__thumb{ transform:translateX(100%); } /* Bids is the left tab */
  .skyboard[data-show="clips"] [data-board="bids"], .skyboard[data-show="bids"] [data-board="clips"]{ display:none; }
  .skyboard__col h3{ display:none; } /* the switch names the board */
  .skyboard__col.is-from-right{ animation:sb-in-right .32s cubic-bezier(.22,1,.36,1); }
  .skyboard__col.is-from-left{ animation:sb-in-left .32s cubic-bezier(.22,1,.36,1); }
}
@keyframes sb-in-right{ from{ opacity:0; transform:translateX(18px); } }
@keyframes sb-in-left{ from{ opacity:0; transform:translateX(-18px); } }
@media (prefers-reduced-motion: reduce){
  .sb-switch__thumb{ transition:none; }
  .skyboard__col.is-from-right, .skyboard__col.is-from-left{ animation:none; }
}
@media (max-width:760px){
  .skyboard{ padding:56px 12px 40px; }
  .skyboard__intro{ width:100%; padding:16px; border-radius:30px; }
  .skyboard__deadline{ border-radius:20px; padding:10px 14px; }
  .skyboard__col li{ grid-template-columns:30px 96px minmax(0,1fr) minmax(64px, auto); gap:6px; padding:2px 4px; }
  .skyboard__col li.is-open{ grid-template-columns:30px 80px minmax(0,1fr); }
  .sb-ship > span{ width:calc(96px * var(--s)); min-width:44px; }
  .skyboard__col li.is-open .sb-who{ font-size:14px; }
  .sb-claim{ padding:7px 12px; }
  .skyboard__cols{ grid-template-columns:1fr; gap:16px; }
}

/* ---- v3: Share, Claim #1, find your blimp, the 3D blimps while buying (clip-game-v2.js) ---- */
.sb-tools{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sb-tool{ /* the board's glass, a size down */
  padding:6px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; color:#1b1f4a; font:800 12.5px Inter, system-ui, sans-serif;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(214,232,255,.45)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(30,60,120,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .12s ease-out, background-color .15s ease-out;
}
.sb-tool:hover{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,239,255,.65)); }
.sb-tool:active{ transform:scale(.96); }
.sb-tool:focus-visible{ outline:2px solid #1b1f4a; outline-offset:2px; }
.sb-top{ /* first place: the glass with a gold edge */
  border:1.5px solid #D9A93A; box-shadow:inset 0 1px 0 #fff, 0 0 0 3px rgba(233,181,58,.18), 0 4px 12px rgba(30,60,120,.12);
  font-variant-numeric:tabular-nums;
}
.sb-top[hidden]{ display:none; }
.sb-find{ border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.sb-find:hover{ text-decoration:underline; text-underline-offset:3px; }
.sb-find:focus-visible{ outline:2px solid #1b1f4a; outline-offset:2px; border-radius:4px; }
.sb-who{ display:flex; align-items:center; gap:4px; min-width:0; }
.sb-link{ flex:none; color:#6b6f96; text-decoration:none; font-size:12px; padding:2px 4px; border-radius:6px; }
.sb-link:hover{ color:#1b1f4a; background:rgba(255,255,255,.5); }

/* The sky pins a found blimp's name over it (sky-ads-3d-v15.js) */
.sky3d-find{
  position:absolute; left:0; top:0; z-index:9; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:7px 13px; border-radius:12px; white-space:nowrap;
  background:rgba(255,255,255,.9); border:1.5px solid #6E58D6; box-shadow:0 10px 24px rgba(36,26,77,.22);
  font:800 14px/1.2 Inter, system-ui, sans-serif; color:#1b1f4a;
  opacity:0; transition:opacity .25s ease-out;
}
.sky3d-find span{ font-weight:600; font-size:11.5px; color:#6E58D6; }
.sky3d-find::after{ content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; margin-left:-6px; transform:rotate(45deg);
  background:inherit; border-right:1.5px solid #6E58D6; border-bottom:1.5px solid #6E58D6; }
.sky3d-find.is-below::after{ bottom:auto; top:-7px; transform:rotate(225deg); }
.sky3d-find.is-on{ opacity:1; animation:sky-find-pop .5s cubic-bezier(.2,.8,.2,1.2); }
@keyframes sky-find-pop{ from{ opacity:0; scale:.85; } to{ opacity:1; scale:1; } }

/* Share the board */
.fly__highlight{ display:flex; gap:8px; margin:4px 0 6px; }
.fly__highlight input{ flex:1; min-width:0; padding:12px 16px; border-radius:999px; border:1px solid rgba(27,31,74,.14); background:rgba(255,255,255,.8); font:500 15px Inter, sans-serif; color:#1b1f4a; }
.fly__highlight .fly__secondary{ border-radius:999px; padding:12px 18px; }
.fly__hint{ margin:0 0 12px; font-size:13px; color:#3b3f6b; text-align:center; }
.fly__card{ display:flex; justify-content:center; margin:0 0 14px; aspect-ratio:4/5; max-height:min(56vh, 520px); }
.fly__card img{ height:100%; width:auto; max-width:100%; object-fit:contain; border-radius:18px; box-shadow:0 16px 36px rgba(30,50,110,.22); transition:opacity .2s ease-out; }
.fly__card img:not([src]){ visibility:hidden; }
.fly__card[aria-busy="true"] img{ opacity:.55; }

/* The 3D blimps while buying: the one you're making, the one you got */
.fly__ship3d{ display:flex; justify-content:center; width:100%; }
.fly__preview .sb-3d, .fly__ship3d .fly-blimp{ width:min(300px, 80%); height:auto; filter:drop-shadow(0 10px 18px rgba(20,40,90,.2)); animation:fly-bob 3.2s ease-in-out infinite; }
.fly__preview--big .sb-3d{ width:min(360px, 88%); animation:fly-arrive .9s cubic-bezier(.2,.8,.2,1), fly-bob 3.2s ease-in-out .9s infinite; }
.fly__ghost .sb-3d{ width:min(240px, 70%); height:auto; opacity:.55; filter:grayscale(.3); }
.fly__ship .sb-3d{ width:calc(176px * var(--s)); min-width:62px; height:auto; }
.fly__myblimp > .fly__secondary{ display:block; margin:0 auto 6px; }
@media (max-width:520px){ .fly__ship .sb-3d{ width:calc(110px * var(--s)); min-width:46px; } }
@media (prefers-reduced-motion: reduce){ .fly__preview .sb-3d, .sky3d-find.is-below::after{ bottom:auto; top:-7px; transform:rotate(225deg); }
.sky3d-find.is-on{ animation:none; } }
/* The terms line flows as one paragraph with the box beside it (as flex, every link and text run became its own
   column and pushed the form wider than a phone). */
.fly__terms{ display:block !important; position:relative; padding-left:26px; line-height:1.45; text-align:left; }
.fly__terms input, .fly__form > label.fly__terms > input{ position:absolute; left:0; top:1px; width:auto; margin:0; }

/* v5: a picture on your blimp (clip-game-v5.js) */
.fly__pic label{ display:block; font:700 13.5px Inter, sans-serif; }
.fly__pic small{ margin-left:6px; font-weight:500; color:#6b6f96; }
.fly__pic input[type=file]{ display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:10px 12px; border-radius:14px;
  border:1px dashed rgba(27,31,74,.25); background:rgba(255,255,255,.6); font:500 13.5px Inter, sans-serif; color:#3b3f6b; cursor:pointer; }
.fly__pic input[type=file]::file-selector-button{ margin-right:10px; padding:7px 12px; border-radius:999px; border:1px solid rgba(27,31,74,.14);
  background:#fff; font:700 13px Inter, sans-serif; color:#1b1f4a; cursor:pointer; }
.fly__pic .fly__link{ margin:6px 0 0; }
.fly__picstyle{ display:flex; gap:8px; border:0; padding:0; margin:8px 0 0; }
.fly__picstyle[hidden]{ display:none; }
.fly__picstyle label{ flex:1; position:relative; cursor:pointer; }
.fly__picstyle input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.fly__picstyle span{ display:block; text-align:center; padding:9px 12px; border-radius:999px; border:1px solid rgba(27,31,74,.14); background:rgba(255,255,255,.6); font:700 13px Inter, sans-serif; color:#1b1f4a; transition:background-color .15s ease-out, color .15s ease-out; }
.fly__picstyle input:checked + span{ background:#1b1f4a; color:#fff; border-color:#1b1f4a; }
.fly__picstyle input:focus-visible + span{ outline:2px solid #1b1f4a; outline-offset:2px; }
.fly__mypic [hidden]{ display:none !important; }
.fly__mypic .fly__ship3d{ margin:4px 0 10px; }
.fly__mypic .fly__primary{ display:block; width:100%; margin-top:10px; }

/* ---- v6 (clip-game-v6.js) ---- */
/* The board's own blimps drift behind its words, never over them, and a soft white halo keeps the navy words
   readable when a navy blimp passes behind. */
.skyboard__title, .skyboard__lede{ position:relative; z-index:1; }
.skyboard__lede{ text-shadow:0 0 14px rgba(255,255,255,.98), 0 2px 10px rgba(22,38,88,.2); }
.skyboard__title{
  text-shadow:0 0 16px #fff, 0 0 30px rgba(255,255,255,.98), 0 5px 16px rgba(20,34,82,.3);
}

/* ---- v8 (clip-game-v8.js) ---- */
/* Make your blimp: your handle as the board will show it, and your row on the board. */
.fly__handlehint{ margin:-4px 0 0; font-size:12.5px; color:#3b3f6b; }
.fly__handlehint b{ color:#1b1f4a; }
.fly__rowpreview{ margin:-2px 0 14px; padding:8px 12px 10px; border-radius:16px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); }
.fly__rowlabel{ margin:0 0 4px; font:700 11.5px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#6b6f96; }
.fly__row1{ display:grid; grid-template-columns:28px 92px minmax(0,1fr) auto; align-items:center; gap:10px; color:#1b1f4a; }
.fly__row1 .sb-rank{ font:800 16px Inter, sans-serif; text-align:center; }
.fly__row1 .sb-who{ display:block; font:700 16px Inter, sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fly__row1 .sb-val{ font:800 16px Inter, sans-serif; font-variant-numeric:tabular-nums; }
.fly__rowship{ display:flex; justify-content:center; }
.fly__rowship .sb-3d, .fly__rowship .fly-blimp{ width:92px; height:auto; display:block; animation:none; filter:none; }

/* Phones: no place numbers (the order and the blimps' size say it), so every name shows in full; a long one wraps
   rather than being cut. */
@media (max-width:760px){
  .skyboard__col .sb-rank{ display:none; }
  .skyboard__col li{ grid-template-columns:82px minmax(0,1fr) minmax(52px, auto); gap:6px; }
  .skyboard__col .sb-who, .skyboard__col .sb-val{ font-size:15px; }
  .skyboard__col li.is-open{ grid-template-columns:82px minmax(0,1fr); }
  .skyboard__col li.is-open .sb-ship{ grid-column:1; grid-row:1 / 3; }
  .skyboard__col li.is-open .sb-who, .skyboard__col li.is-open .sb-claim{ grid-column:2; }
  .skyboard__col .sb-who{ overflow:visible; white-space:normal; }
  .skyboard__col .sb-name, .skyboard__col .sb-text{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.2; }
  .skyboard__col .sb-ship > .sb-spot{ width:calc(96px * var(--s)); min-width:44px; }
}
@media (max-width:380px){ .skyboard__col .sb-who, .skyboard__col .sb-val{ font-size:14px; } .skyboard__col li{ grid-template-columns:76px minmax(0,1fr) minmax(48px, auto); } }

/* A row's blimp is a button: it takes you up to that blimp in the sky and spotlights it (sky-ads-3d-v17.js). */
.sb-ship > .sb-spot{ display:block; width:calc(150px * var(--s)); min-width:56px; padding:0; border:0; background:none; cursor:pointer;
  border-radius:14px; transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.sb-spot:hover{ transform:translateY(-3px) scale(1.04); }
.sb-spot:active{ transform:scale(.97); }
.sb-spot:focus-visible{ outline:2px solid #1b1f4a; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .sb-spot, .sb-spot:hover{ transition:none; transform:none; } }
/* Names without the @; a name with a link carries the little arrow, and the name and arrow together are the link. */
.skyboard__col .sb-who{ overflow:visible; }
.sb-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; }
a.sb-name{ display:inline-flex; align-items:center; gap:5px; max-width:100%; text-decoration:none; }
a.sb-name .sb-arrow{ flex:none; font-size:12px; color:#6b6f96; transition:transform .15s ease-out, color .15s ease-out; }
a.sb-name:hover .sb-arrow{ color:#1b1f4a; transform:translate(1px,-1px); }
a.sb-name:hover{ text-decoration:none; }
.sb-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.sb-name:focus-visible{ outline:2px solid #1b1f4a; outline-offset:2px; border-radius:4px; }
/* Side by side, the two boards are one height, and each one's button sits on the same line at the bottom. */
@media (min-width:761px){
  .skyboard__cols{ align-items:stretch; }
  .skyboard__col{ display:flex; flex-direction:column; }
  .skyboard__col > .skyboard__cta{ margin-top:auto; padding-top:14px; }
}
.fly__picnote{ margin:6px 0 0; font-size:12.5px; color:#6b6f96; }

/* Spotlight: one lead blimp, two featured sponsors, then the compact leaderboard. */
.skyboard__cols{ grid-template-columns:minmax(0,1fr); max-width:1000px; }
.skyboard__col[data-board="clips"][hidden]{ display:none; }
.skyboard__col[data-board="bids"]{ padding:24px; }
.skyboard__col[data-board="bids"] h3{ display:block; }
.skyboard__col[data-board="bids"] > ol{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.skyboard__col[data-board="bids"] li{ min-width:0; grid-template-columns:28px 110px minmax(0,1fr) auto; gap:12px; padding:8px 12px; }
.skyboard__col[data-board="bids"] .sb-rank{ display:block; font-size:13px; color:#4c6082; }
.skyboard__col[data-board="bids"] .sb-who{ min-width:0; }
.skyboard__col[data-board="bids"] .sb-name,
.skyboard__col[data-board="bids"] .sb-text{ white-space:normal; overflow-wrap:anywhere; }
.skyboard__col[data-board="bids"] .sb-ship > .sb-spot{ width:calc(110px * var(--s)); min-width:52px; max-width:100%; min-height:44px; }
.skyboard__col[data-board="bids"] li.is-featured{
  padding:18px 16px; background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px rgba(27,55,104,.07);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.skyboard__col[data-board="bids"] li[data-rank="2"]{ border-radius:20px 20px 0 0; margin-top:12px; }
.skyboard__col[data-board="bids"] li[data-rank="3"]{ border-radius:0 0 20px 20px; margin-bottom:24px; border-top:0; }
.skyboard__col[data-board="bids"] li.is-featured .sb-who{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:20px; font-weight:800; }
.sb-sponsor-label{ font:500 12px/1.3 Inter,system-ui,sans-serif; color:#4c6082; }
.skyboard__col[data-board="bids"] li.is-featured .sb-val{ font-size:21px; }
.skyboard__col[data-board="bids"] li.is-featured .sb-ship > .sb-spot{ width:110px; }
.skyboard__col[data-board="bids"] li[data-rank="1"]{
  grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:20px; border-radius:24px;
  background:linear-gradient(140deg,rgba(255,255,255,.58),rgba(255,255,255,.28));
}
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-rank{ grid-column:1 / -1; justify-self:start; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.46); font-size:12px; font-weight:800; letter-spacing:.08em; }
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-rank::before{ content:'TOP SPONSOR · #'; }
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-ship{ grid-column:1 / -1; padding:6px 0; }
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-ship > .sb-spot{ width:min(100%,320px); }
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-who{ font-size:28px; }
.skyboard__col[data-board="bids"] li[data-rank="1"] .sb-val{ font-size:26px; background:rgba(255,255,255,.55); border-radius:999px; padding:6px 14px; }
.skyboard__col[data-board="bids"] li.is-me{ outline:2px solid rgba(221,173,65,.7); outline-offset:-2px; }
.skyboard__col[data-board="bids"] li.is-open{ grid-template-columns:28px 110px minmax(0,1fr); }
@media(min-width:761px){
  .skyboard__col[data-board="bids"] > ol{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:20px; }
  .skyboard__col[data-board="bids"] > ol > li{ grid-column:1 / -1; }
  .skyboard__col[data-board="bids"] > ol > li[data-rank="1"]{ grid-column:1; grid-row:1 / 3; margin-bottom:24px; }
  .skyboard__col[data-board="bids"] > ol > li[data-rank="2"]{ grid-column:2; grid-row:1; margin-top:0; }
  .skyboard__col[data-board="bids"] > ol > li[data-rank="3"]{ grid-column:2; grid-row:2; }
  .skyboard__col[data-board="bids"] li.is-featured:not([data-rank="1"]){ grid-template-columns:22px 84px minmax(0,1fr); gap:8px; }
  .skyboard__col[data-board="bids"] li.is-featured:not([data-rank="1"]) .sb-val{ grid-column:3; justify-self:start; }
}
@media(max-width:520px){
  .skyboard__col[data-board="bids"]{ padding:14px 10px; }
  .skyboard__col[data-board="bids"] li{ grid-template-columns:18px 64px minmax(0,1fr) auto; gap:7px; padding:10px 4px; }
  .skyboard__col[data-board="bids"] li.is-featured{ padding:16px 10px; }
  .skyboard__col[data-board="bids"] li.is-featured .sb-who{ font-size:16px; }
  .skyboard__col[data-board="bids"] li.is-featured .sb-val{ font-size:17px; }
  .skyboard__col[data-board="bids"] .sb-ship > .sb-spot{ width:64px; min-width:0; }
  .skyboard__col[data-board="bids"] .sb-who,.skyboard__col[data-board="bids"] .sb-val{ font-size:13px; }
  .skyboard__col[data-board="bids"] li[data-rank="1"]{ grid-template-columns:minmax(0,1fr) auto; padding:18px 14px; }
  .skyboard__col[data-board="bids"] li[data-rank="1"] .sb-who{ font-size:25px; }
  .skyboard__col[data-board="bids"] li[data-rank="1"] .sb-val{ font-size:23px; padding:6px 10px; }
  .skyboard__col[data-board="bids"] li.is-open{ grid-template-columns:18px 64px minmax(0,1fr); }
  .skyboard__col[data-board="bids"] li.is-open .sb-rank{ grid-column:1;grid-row:1 / 3; }
  .skyboard__col[data-board="bids"] li.is-open .sb-ship{ grid-column:2;grid-row:1 / 3; }
  .skyboard__col[data-board="bids"] li.is-open .sb-who,.skyboard__col[data-board="bids"] li.is-open .sb-claim{ grid-column:3; }
  .sb-sponsor-label{ font-size:11px; }
}