#firefly-screen{max-width:1300px;margin:auto;padding:12px}.fw-heading{display:flex;justify-content:space-between;align-items:center;color:#5d467a}.fw-heading h1{margin:5px 0 12px;font-size:clamp(28px,4vw,44px)}#fw-progress{border:3px solid white;border-radius:30px;padding:12px 22px;background:#fff2bb;font-weight:900;font-size:24px}.fw-world{position:relative;isolation:isolate;overflow:hidden;min-height:590px;border:5px solid #fff5e4;border-radius:34px;background:linear-gradient(#191644bb,#28576844),var(--fw-bg) center/cover;box-shadow:0 9px #779ba4,0 16px 32px #384e5833;color:white}.fw-world:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 65%,#82e5b500,transparent);pointer-events:none;transition:background 1.5s}.fw-world.lit:before{background:radial-gradient(ellipse at 50% 65%,#ffe79c77,transparent 80%)}#fw-place{position:absolute;left:24px;top:22px;font-weight:800;letter-spacing:2px;color:#fff1bf}#fw-hint{position:relative;text-align:center;margin:62px auto 0;width:max-content;max-width:85%;padding:12px 22px;border:1px solid #ffffff77;border-radius:30px;background:#172646b3;font-weight:800;font-size:clamp(16px,2vw,22px)}.fw-moon{position:absolute;right:5%;top:4%;width:65px;height:65px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffce2,#e2cfa0);box-shadow:0 0 45px #fff5b855}#fw-helper{position:absolute;width:19%;height:40%;left:-1%;bottom:8%;pointer-events:none;filter:drop-shadow(0 12px 8px #071a2655)}#fw-helper>*{width:100%;height:100%}#fw-lanterns{position:relative;display:flex;justify-content:center;gap:clamp(20px,5vw,75px);padding:24px 14% 10px}.fw-lantern{position:relative;width:clamp(86px,15vw,170px);height:220px;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 14px 7px #07101c77);transition:filter .2s,transform .2s}.fw-handle{display:block;width:48%;height:40px;margin:auto;border:7px solid #c6a366;border-bottom:0;border-radius:45px 45px 0 0;box-shadow:inset 2px 2px #fff2ca}.fw-roof,.fw-base{display:block;height:25px;border-radius:50% 50% 8px 8px;background:linear-gradient(100deg,#826248,#e9ce8e 40%,#a57746);border:2px solid #f5dc9a;box-shadow:0 5px 8px #0004}.fw-base{border-radius:5px 5px 35% 35%;height:20px}.fw-glass{display:flex;height:130px;margin:0 8%;border:5px solid #b69768;border-top:0;border-bottom:0;border-radius:8px;background:radial-gradient(ellipse,var(--glow),#fff1 85%),linear-gradient(100deg,#fff5,transparent 35%,#fff1 75%,#fff7);align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 6px 0 10px #fff3,inset -8px 0 15px #0003}.fw-glass strong{font-size:45px;color:#fff9dc;text-shadow:0 3px 3px #574a74}.fw-count{font-size:24px;color:#fff}.fw-lantern.ready{filter:drop-shadow(0 0 18px var(--glow));transform:translateY(-5px)}#fw-bugs{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin:28px 6% 25px 20%;min-height:100px}.fw-firefly,.fw-drag{position:relative;width:70px;height:90px;border:0;background:none;padding:0;touch-action:none;cursor:grab;filter:drop-shadow(0 0 13px var(--glow))}.fw-firefly{width:100%;animation:fw-hover 3s ease-in-out infinite;animation-delay:var(--delay)}.fw-bug-body{position:absolute;width:36px;height:58px;left:50%;top:20px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 35% 40%,#fffbd9,var(--glow) 60%,#668a5d);box-shadow:inset -4px -4px 7px #26334466,0 0 15px var(--glow)}.fw-bug-body b{display:block;color:#23354b;letter-spacing:5px;padding-left:5px;font-size:20px}.fw-bug-body em{font-style:normal;color:#47556c;font-size:22px}.fw-wing{position:absolute;top:15px;width:35px;height:24px;border-radius:70% 70% 30% 70%;background:linear-gradient(#fff,#aef2e7aa);box-shadow:inset 0 0 0 2px #fff8;left:calc(50% - 35px);transform-origin:right bottom;animation:fw-wing .22s alternate infinite}.fw-wing.right{left:50%;transform-origin:left bottom;animation-direction:alternate-reverse}.fw-drag{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%)}.fw-firefly.selected{outline:3px dashed #fff5c1;border-radius:45%}.fw-pop{animation:fw-pop .55s ease}.fw-world:after{content:'✦      ·      ✧              ·          ✦';position:absolute;top:32%;left:4%;right:4%;color:#ffffbf;letter-spacing:20px;pointer-events:none;animation:fw-hover 6s infinite}.fw-cover{background:linear-gradient(#25235777,#12374777),url('birdhouse-art/lake.webp') center/cover!important;display:grid!important;place-items:center}.fw-cover img{width:65%;height:90%;object-fit:contain;filter:drop-shadow(0 0 15px #fff98b)}.fw-paused *{animation-play-state:paused!important}@keyframes fw-hover{50%{transform:translateY(-10px) rotate(3deg)}}@keyframes fw-wing{to{transform:rotate(-25deg) scaleY(.7)}}@keyframes fw-pop{50%{transform:scale(1.08);filter:drop-shadow(0 0 28px var(--glow))}}@media(max-width:700px){.fw-world{min-height:630px}#fw-lanterns{padding:25px 6% 0;gap:15px}.fw-lantern{height:200px}.fw-glass{height:110px}#fw-bugs{grid-template-columns:repeat(5,1fr);margin:12px 6% 20px 15%}#fw-helper{bottom:0;width:24%;height:27%}.fw-moon{width:40px;height:40px}.fw-world:after{letter-spacing:5px}}@media(prefers-reduced-motion:reduce){#firefly-screen *{animation:none!important;transition:none!important}}
.fw-flight{position:fixed;z-index:9999;width:28px;height:28px;border-radius:50%;background:var(--glow);box-shadow:0 0 25px 8px var(--glow);pointer-events:none}.fw-lantern{filter:drop-shadow(0 12px 7px #07101c77) drop-shadow(0 0 calc(var(--filled,0)*6px) var(--glow))}
/* Lively little lanterns: glass glints, embossed symbols and visible firefly guests. */
.fw-world .fw-moon{left:43%;right:auto;top:3%;width:52px;height:52px;box-shadow:inset -8px -5px 12px #b7a57a55,0 0 35px #fff5bc66,0 0 70px #fff2a52b}
.fw-world[data-garden="1"] .fw-moon{left:48%;top:3%}.fw-world[data-garden="2"] .fw-moon{left:39%;top:3%}
.fw-moon:after{content:'';position:absolute;inset:12px 19px 26px 10px;border-radius:50%;background:#c6ba9c55;box-shadow:15px 15px 0 3px #c6ba9c30}
.fw-lantern{transform-origin:50% 12%;animation:fw-lantern-sway 6.5s ease-in-out infinite;animation-delay:var(--sway-delay)}
.fw-glass{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 68%,var(--glow),#fff1 83%),linear-gradient(105deg,#fff7,transparent 28%,#fff1 68%,#fff6);box-shadow:inset 6px 0 10px #fff3,inset -8px 0 15px #0004,0 0 calc(6px + var(--filled)*4px) var(--glow)}
.fw-glass:after{content:'';position:absolute;inset:-50% -80%;background:linear-gradient(110deg,transparent 43%,#ffffff45 49%,transparent 55%);transform:translateX(-45%);animation:fw-glass-shine 9s ease-in-out infinite;animation-delay:var(--sway-delay);pointer-events:none}
.fw-glass>strong{z-index:1;display:block;margin-top:-22px;animation:fw-shape-float 3.8s ease-in-out infinite;animation-delay:var(--sway-delay);text-shadow:0 1px white,0 3px #b89768,0 5px 7px #53456a66,0 0 12px var(--glow)}
.fw-count{position:absolute;inset:58% 4% 0;pointer-events:none}.fw-captured{position:absolute;left:calc(7% + var(--orbit)*30%);top:5%;width:30px;height:45px;animation:fw-guest-bob 2.4s ease-in-out infinite;animation-delay:var(--delay)}
.fw-captured .fw-bug-body{width:13px;height:22px;top:10px;box-shadow:0 0 10px var(--glow)}.fw-captured .fw-bug-body b,.fw-captured .fw-bug-body em,.fw-captured .fw-antennae{display:none}.fw-captured .fw-wing{top:8px;width:13px;height:9px;left:calc(50% - 13px)}.fw-captured .fw-wing.right{left:50%}
.fw-lantern.full .fw-roof,.fw-lantern.full .fw-base{box-shadow:0 0 15px var(--glow),inset 0 2px #fff8}.fw-lantern.fw-pop{animation:fw-pop .55s ease,fw-lantern-sway 6.5s .55s ease-in-out infinite}
.fw-lantern.fw-hover-target .fw-glass{outline:3px solid #fff8b7;outline-offset:4px}.fw-lantern.ready .fw-glass>strong{animation:fw-shape-invite 1.2s ease-in-out infinite}
.fw-firefly{animation-duration:var(--hover-time);transition:filter .2s}.fw-firefly.selected{filter:drop-shadow(0 0 20px var(--glow));outline:2px dashed #fff7c4}
.fw-bug-body{border:1px solid #fff6;animation:fw-bug-wiggle 3.7s ease-in-out infinite;animation-delay:var(--delay)}
.fw-bug-body b{display:flex;justify-content:center;gap:8px;padding:10px 0 4px;letter-spacing:0}.fw-bug-body b i{width:5px;height:7px;border-radius:50%;background:#23354b;box-shadow:inset 1px 1px #fff8;animation:fw-eye-blink 4.2s infinite;animation-delay:var(--delay)}.fw-bug-body em{display:block;font-size:19px;text-align:center;line-height:1.1;animation:fw-belly-glow 2.5s ease-in-out infinite;animation-delay:var(--delay)}
.fw-antennae{position:absolute;left:calc(50% - 9px);top:14px;width:16px;height:12px;border-left:2px solid #e0edc8;border-right:2px solid #e0edc8;border-radius:50% 50% 0 0;transform:perspective(40px) rotateX(-20deg)}
@keyframes fw-lantern-sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
@keyframes fw-shape-float{50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes fw-shape-invite{50%{transform:translateY(-4px) scale(1.12)}}
@keyframes fw-glass-shine{0%,65%{transform:translateX(-45%)}90%,100%{transform:translateX(45%)}}
@keyframes fw-guest-bob{50%{transform:translate(2px,-9px) rotate(10deg)}}
@keyframes fw-bug-wiggle{50%{transform:translateX(-50%) rotate(-7deg)}}
@keyframes fw-eye-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes fw-belly-glow{50%{text-shadow:0 0 8px white;color:#fff7d1}}
@media(max-width:700px){.fw-world .fw-moon{width:38px;height:38px;top:3%}.fw-moon:after{inset:8px 13px 18px 7px}.fw-count{inset:60% 2% 0}.fw-captured{left:calc(var(--orbit)*30%);width:25px}}
@media(prefers-reduced-motion:reduce){#firefly-screen *{animation:none!important;transition:none!important}}
#fw-hint{margin-top:82px}
.fw-world .fw-moon,.fw-world[data-garden="1"] .fw-moon,.fw-world[data-garden="2"] .fw-moon{left:26%;top:4%}
@media(max-width:700px){.fw-world .fw-moon,.fw-world[data-garden="1"] .fw-moon,.fw-world[data-garden="2"] .fw-moon{left:7%;top:23%}}