/* ============================================================
   WAVE
   ============================================================ */
.wave-wrap{
  position:fixed;left:0;right:0;bottom:0;height:26vh;z-index:0;
  overflow:hidden;pointer-events:none;
}
.wave{
  position:absolute;left:0;bottom:0;width:200%;height:100%;
  animation:waveSlide 24s linear infinite;
}
.wave-front{fill:url(#wave-grad)}
.wave-back{fill:var(--wave-back);opacity:.5;animation:waveSlide 31s linear infinite reverse}
.wave-stop-1{stop-color:var(--wave-1)}
.wave-stop-2{stop-color:var(--wave-2)}


/* ============================================================
   TOP LEFT SWITCHES
   ============================================================ */
.corner{position:fixed;top:20px;left:20px;display:flex;z-index:60}
.corner-btn{
  width:56px;height:58px;padding:0;border:0;background:none;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .18s ease,color .2s ease;
}
.corner-btn:hover{transform:scale(1.1)}
.corner-btn:active{transform:scale(.9)}
.corner-btn svg{width:40px;height:40px}
.corner-btn .moon{display:none}
html.dark .corner-btn .sun{display:none}
html.dark .corner-btn .moon{display:block}
.corner-btn .sound-off{display:none}
#sfx-toggle[aria-pressed="false"] .sound-on{display:none}
#sfx-toggle[aria-pressed="false"] .sound-off{display:block}
.corner-btn:focus-visible,.star-btn:focus-visible,.desk-icon:focus-visible,
.mobile-card:focus-visible,.close:focus-visible,.frog:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}


/* ============================================================
   STAR / downloads
   ============================================================ */
.star-btn{
  position:absolute;left:0;top:max(-102px,calc(80px - var(--home-top)));width:68px;height:71px;padding:0;border:0;
  background:none;cursor:pointer;z-index:2;
}
.star-svg{
  width:68px;height:71px;overflow:visible;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.16));
  animation:bob 4.2s ease-in-out infinite;
  transition:transform .2s ease;
}
.star-btn:hover .star-svg,.star-btn:focus-visible .star-svg{transform:scale(1.08) rotate(-2deg)}
.star-shape{fill:var(--star);stroke:var(--star-line);stroke-width:3;stroke-linejoin:round}
.star-face{fill:none;stroke:var(--star-face);stroke-width:2.6;stroke-linecap:round}
.star-blush{fill:var(--blush);opacity:.85}
.star-tip{
  position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);
  font:700 16px/1.2 var(--mono);color:var(--accent);white-space:nowrap;
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.star-btn:hover .star-tip,.star-btn:focus-visible .star-tip{opacity:1}


/* ============================================================
   HOME STAGE
   ============================================================ */
.home-stage{
  position:fixed;left:50%;top:var(--home-top);transform:translateX(-50%);
  width:min(800px,86vw);height:min(582px,calc(100dvh - 270px));
  z-index:10;
}
.home-window{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;z-index:1;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:fixed;inset:0;pointer-events:none;z-index:5}
.socials{
  position:absolute;left:50%;bottom:57px;transform:translateX(-50%);
  display:flex;pointer-events:auto;
}
.social{
  width:50px;height:52px;display:grid;place-items:center;
  text-decoration:none;transition:transform .18s ease;
}
.social:hover{transform:translateY(-2px)}
.social svg{
  width:42px;height:42px;padding:7px;border-radius:50%;
  background:var(--social-bg);color:var(--social-ink);
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.copyright{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  margin:0;font-size:14px;line-height:1.5;color:var(--muted);white-space:nowrap;
}
html.dark .copyright{color:var(--muted)}


/* ============================================================
   FROG
   ============================================================ */
.frog{
  position:fixed;right:1.2%;bottom:2.6%;width:120px;height:125px;
  padding:0;border:0;background:none;cursor:pointer;z-index:50;
}
.frog-svg{
  width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.14));
  animation:bob 3.8s ease-in-out infinite;
  transition:transform .2s ease;
}
.frog:hover .frog-svg{transform:scale(1.04)}
.frog .pad{fill:#7C9472;stroke:#46503D;stroke-width:2.6}
.frog .pad-line{fill:none;stroke:#A3B59A;stroke-width:2;opacity:.7}
.frog .frog-body,.frog .frog-bump{fill:#9DB58E;stroke:#46503D;stroke-width:2.6}
.frog .frog-eye{fill:#FBF8F2;stroke:#46503D;stroke-width:2}
.frog .frog-pupil{fill:#3B3A34}
.frog .frog-mouth,.frog .frog-arm,.frog .frog-foot{fill:none;stroke:#46503D;stroke-width:2.6;stroke-linecap:round}
.frog .frog-cheek{fill:var(--blush);opacity:.85}
.frog .frog-leaf{fill:#B2B98E;stroke:#46503D;stroke-width:2.2}
.frog .frog-leaf-line{fill:none;stroke:#46503D;stroke-width:1.6;opacity:.6}
.frog .notes{
  position:absolute;right:8px;top:-8px;font:700 17px/1 var(--mono);
  color:var(--ink);opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.frog .notes i{font-style:normal;font-size:21px;position:relative;top:-10px;left:-2px}
.frog.is-playing .notes{opacity:1;animation:notesFloat 2.2s ease-in-out infinite}
.frog.is-playing .frog-svg{animation-duration:1.4s}