/* Classroom › Hero Flight (js/hero.js). Our own sky drawn with CSS gradients (no pictures). The sky is its own scene,
   so it looks the same in the light and the dark theme; names sit on dark pills. */
.hf{--lanes:10;--orb:80px;--font:18px;--travel:400px;--foot:calc(var(--font) * 2.6 + 52px);position:relative;display:flex;flex-direction:column;
  height:clamp(380px,calc(100vh - 250px),1100px);border-radius:22px;overflow:hidden;margin:0 0 18px;isolation:isolate;
  background:linear-gradient(180deg,#1e3a8a 0%,#2563eb 38%,#60a5fa 72%,#bfdbfe 100%);box-shadow:0 10px 30px rgba(0,0,0,.18);
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hf.tight{--foot:calc(var(--font) * 2.4 + 96px)}

/* Sky Finish banner at the top */
.hf-banner{position:relative;z-index:3;flex:none;text-align:center;font-weight:900;letter-spacing:.04em;color:#3b2a00;
  font-size:clamp(14px,calc(var(--font) * 1.1),26px);padding:8px 10px;background:linear-gradient(90deg,#fde68a,#facc15 50%,#fde68a);
  box-shadow:0 3px 0 rgba(120,80,0,.35),0 0 24px rgba(253,224,71,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.cheer .hf-banner{animation:hfShine .5s ease-in-out 5 alternate}
@keyframes hfShine{to{filter:brightness(1.3);box-shadow:0 3px 0 rgba(120,80,0,.35),0 0 50px rgba(253,224,71,.95)}}

.hf-air{position:relative;flex:1;min-height:0}
.hf-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--lanes),minmax(0,1fr));z-index:2}
.hf-lane{position:relative;min-width:0}
.hf-lane+.hf-lane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0))}

/* drifting clouds (6, slow, CSS only; paused when the tab is hidden or with reduced motion) */
.hf-clouds{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hf-clouds i{position:absolute;width:calc(140px * var(--k));height:calc(44px * var(--k));border-radius:999px;background:rgba(255,255,255,.55);filter:blur(1px);
  animation:hfDrift var(--t) linear infinite alternate}
.hf-clouds i::before,.hf-clouds i::after{content:"";position:absolute;border-radius:50%;background:inherit}
.hf-clouds i::before{width:46%;height:120%;left:16%;top:-55%}.hf-clouds i::after{width:34%;height:95%;left:52%;top:-38%}
.hf.paused .hf-clouds i,.hf.paused .hf-cape i,.hf.paused .hf-legend .hf-orb{animation-play-state:paused}
@keyframes hfDrift{from{transform:translate3d(-12vw,0,0)}to{transform:translate3d(12vw,0,0)}}

/* Sky Boost Zone: a dashed gold line halfway up */
.hf-boost{position:absolute;left:0;right:0;bottom:calc(var(--orb) * 1.3 + 8px + var(--travel) * .5);height:0;border-top:3px dashed #facc15;z-index:1;
  filter:drop-shadow(0 0 6px rgba(250,204,21,.8))}
/* the label sits on the middle of the line, above the flyers, on a solid pill */
.hf-boost-l{position:absolute;left:50%;bottom:calc(var(--orb) * 1.3 + 8px + var(--travel) * .5);transform:translate(-50%,50%);z-index:4;pointer-events:none;
  font-weight:800;font-size:max(12px,calc(var(--font) * .8));color:#3b2a00;background:#facc15;border-radius:999px;padding:2px 12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* the ground: a soft cloud bank where heroes start (and rest below 0) */
.hf-ground{position:absolute;left:0;right:0;bottom:0;height:calc(var(--orb) * .55);z-index:1;
  background:radial-gradient(ellipse 60px 26px at 10% 100%,#fff 60%,transparent 62%) 0 100%/120px 100% repeat-x,linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85))}

/* ---- the heroes ---- */
.hf-fly{--st:0;--s:calc(.82 + var(--st) * .04);position:absolute;left:50%;bottom:8px;width:var(--orb);height:calc(var(--orb) * 1.8);
  transform:translate3d(-50%,calc(var(--p) * var(--travel) * -1),0);transition:transform .7s cubic-bezier(.34,1.45,.55,1);will-change:transform;z-index:1}
.hf-fly.hf-down{transition:transform .8s cubic-bezier(.45,.05,.55,.95)}
.hf-hero{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:scale(var(--s));transform-origin:50% 40%;transition:transform .4s ease}
.hf-hero:focus-visible{outline:3px solid #fde047;outline-offset:2px;border-radius:999px}
.hf-orb{position:absolute;left:0;top:0;width:var(--orb);height:var(--orb);border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 3px var(--lc),0 0 calc(8px + var(--st) * 2.4px) calc(2px + var(--st) * .6px) rgba(255,255,255,calc(.35 + var(--st) * .05)),0 0 calc(10px + var(--st) * 3px) var(--lc)}
.hf-orb .av,.hf-orb .av svg,.hf-orb img{width:100%!important;height:100%!important;display:block;border-radius:50%;margin:0}
.hf-orb .av{font-size:calc(var(--orb) * .5)}
.hf-hero:active .hf-orb{transform:scale(.95)}
/* the cape-like flame trail below the hero, in the lane colour */
.hf-cape{position:absolute;left:50%;top:calc(var(--orb) * .7);width:calc(var(--orb) * .7);height:calc(var(--orb) * 1.05);transform:translateX(-50%);z-index:1;pointer-events:none}
.hf-cape i{position:absolute;inset:0;border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;transform-origin:50% 0;
  background:radial-gradient(ellipse at 50% 15%,#fff 0 12%,#fde047 22%,var(--lc) 55%,transparent 72%);opacity:.9;animation:hfFlame .5s ease-in-out infinite alternate}
.hf-cape i+i{inset:12% 18% 0;background:radial-gradient(ellipse at 50% 10%,#fff 0 15%,#fb923c 40%,transparent 70%);animation-duration:.37s}
@keyframes hfFlame{from{transform:scale(1,.9) skewX(-4deg)}to{transform:scale(.92,1.1) skewX(4deg)}}
.hf-squad .hf-cape i{border-radius:20% 20% 50% 50% / 10% 10% 80% 80%}
.hf-legend .hf-orb{animation:hfHover 1.8s ease-in-out infinite;box-shadow:0 0 0 3px #fde047,0 0 30px 10px rgba(253,224,71,.85),0 0 60px rgba(244,114,182,.6)}
@keyframes hfHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* +1: a sparkle trail under the hero as it floats up */
.hf-trail{position:absolute;left:50%;top:calc(var(--orb) * .9);width:0;height:0;z-index:0;pointer-events:none}
.hf-trail i{position:absolute;left:-5px;width:10px;height:10px;opacity:0;background:#fef08a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.hf-up .hf-trail i{animation:hfSpark .9s ease-out forwards}
.hf-up .hf-trail i:nth-child(2){animation-delay:.08s;left:-18px}.hf-up .hf-trail i:nth-child(3){animation-delay:.16s;left:8px}.hf-up .hf-trail i:nth-child(4){animation-delay:.24s;left:-6px}
@keyframes hfSpark{0%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(calc(var(--orb) * 1.4)) scale(.3) rotate(90deg)}}
.hf-down .hf-orb{animation:hfWobble .8s ease-in-out}
@keyframes hfWobble{0%,100%{transform:none}30%{transform:rotate(-6deg)}65%{transform:rotate(4deg)}}

/* resting: points below 0, on the ground (never under it), dimmed, with a small cloud */
.hf-rest{display:none}
.hf-resting .hf-orb{filter:saturate(.4) brightness(.75)}
.hf-resting .hf-cape{display:none}
.hf-resting .hf-rest{display:flex;flex-direction:column;align-items:center;position:absolute;right:-12%;top:-8%;z-index:3;font-size:calc(var(--orb) * .32);line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.hf-rest small{font-size:max(10px,calc(var(--font) * .55));font-weight:800;color:#1e3a8a;background:#fff;border-radius:999px;padding:0 5px;margin-top:-3px}
.hf.tight .hf-rest small{display:none}

/* ---- lane footers: name, points and big + / − in the lane colour ---- */
.hf-feet{position:relative;z-index:3;flex:none;display:grid;grid-template-columns:repeat(var(--lanes),minmax(0,1fr));gap:3px;padding:4px 3px 5px;background:rgba(10,14,40,.88)}
.hf-foot{display:flex;flex-direction:column;align-items:center;min-width:0;color:#fff;border-top:4px solid var(--lc);border-radius:8px;padding:2px 2px 0;line-height:1.1}
.hf-name{font-size:var(--font);font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-pts{font-size:calc(var(--font) * 1.1);font-weight:800;color:#fde047;font-variant-numeric:tabular-nums}
.hf-foot.neg .hf-pts{color:#fca5a5}
.hf-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;margin-top:3px}
.hf-b{min-height:44px;min-width:0;border:0;border-radius:10px;background:var(--lc);color:#fff;font-size:calc(var(--font) * 1.4);font-weight:900;line-height:1;padding:0;
  text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);cursor:pointer;touch-action:manipulation}
.hf-b.hf-minus{background:#f43f5e;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 0 0 2px rgba(255,255,255,.55) inset}
.hf-b:active{transform:translateY(2px);box-shadow:none}
.hf-b:focus-visible{outline:3px solid #fde047;outline-offset:1px}
.hf.tight .hf-btns{grid-template-columns:1fr}
.hf.tight .hf-foot{border-radius:6px}

@media (max-width:760px){.hf{height:clamp(340px,64vh,660px)}}
@media (prefers-reduced-motion:reduce){
  .hf-fly,.hf-fly.hf-down,.hf-hero{transition:none}
  .hf-clouds i,.hf-cape i,.hf-up .hf-trail i,.hf-down .hf-orb,.hf-legend .hf-orb,.hf.cheer .hf-banner{animation:none}
}