/* Fun lane styles: quiz, tent pass, wish wall, parade, countdown moods, easter eggs, Lights Out.
 * Every animation's resting (non-animated) state is the finished look, so the global
 * prefers-reduced-motion rule in styles.css leaves a calm, complete static page. */

/* `hidden` must win over the display rules on .btn, form, label.f etc. */
[hidden]{display:none!important}
.fun-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- sound toggle ---------- */
.fun-mute{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:44px;padding:6px 14px 6px 12px;border-radius:999px;border:1px solid var(--pillow-edge);background:#ffffff14;color:var(--muted);font-weight:800;font-size:13px;cursor:pointer}
.fun-mute svg{width:18px;height:18px}
.fun-mute[aria-pressed="true"]{color:var(--faint)}

/* ---------- easter eggs ---------- */
.moon.fun-tappable{cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;transition:translate .8s cubic-bezier(.3,1.4,.5,1),scale .8s cubic-bezier(.3,1.4,.5,1)}
.moon.fun-wobble{animation:fun-wobble .5s cubic-bezier(.3,1.7,.5,1),glow 5s ease-in-out infinite}
@keyframes fun-wobble{30%{rotate:-12deg;scale:1.15}60%{rotate:8deg;scale:.95}}
.ten.fun-squish span{animation:squish .5s cubic-bezier(.3,1.7,.5,1)}
#funSky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}
#squad.fun-dance .sq{animation:fun-dance .7s ease-in-out 4;animation-delay:calc(var(--delay,0s) * .2)}
@keyframes fun-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-22px) rotate(-12deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-22px) rotate(12deg)}}
.fun-secret{text-align:center;color:var(--faint);font-size:13px;margin-top:8px}

/* ---------- countdown moods ---------- */
.fun-ribbon{display:inline-block;margin-top:12px;padding:7px 16px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--lav));color:#241a4d;font-family:var(--display);font-weight:600;font-size:16px;box-shadow:0 8px 20px #ff9cc633;animation:pop .6s cubic-bezier(.3,1.7,.5,1) both .4s}
body[data-phase="tomorrow"] .moon,body[data-phase="tonight"] .moon,body[data-phase="party"] .moon{translate:0 -22px;scale:1.2}
@media (max-width:520px){body[data-phase="tomorrow"] .moon,body[data-phase="tonight"] .moon,body[data-phase="party"] .moon{translate:0 -26px;scale:1.05}}
body[data-phase="tonight"] .moon,body[data-phase="party"] .moon{box-shadow:0 0 70px 24px #ffe39477}
.fun-camp{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin-top:26px}
.fun-mini{position:relative;width:46px;height:38px;animation:pop .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(.6s + var(--i) * .15s)}
.fun-mini::before{content:"";position:absolute;inset:auto -6px -6px;height:22px;border-radius:50%;background:var(--t1);filter:blur(10px);opacity:.55}
.fun-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--t1) 0 50%,var(--t2) 50%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fun-mini i{position:absolute;z-index:1;left:50%;bottom:0;width:16px;height:20px;transform:translateX(-50%);background:#17122f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.fun-camp + .squad{margin-top:14px}
.fun-flies{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fun-flies span{position:absolute;width:6px;height:6px;border-radius:50%;background:#fffbb0;box-shadow:0 0 10px 4px #fff59a88;opacity:.8;animation:fun-fly var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes fun-fly{0%{transform:translate(0,0);opacity:.2}40%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:.35}}
.fun-thanks{text-align:center;display:grid;gap:12px;justify-items:center}
.fun-thanks p{color:var(--muted);max-width:40ch}
.fun-thanks-sq{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:flex-end}

/* ---------- squish quiz ---------- */
.fun-quiz{display:grid}
.fun-quiz-start{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:12px 16px;border-radius:18px;border:2px dashed var(--butter);background:#ffe39414;color:var(--ink);font-weight:700;font-size:15px}
.fun-quiz-start b{color:var(--butter);font-family:var(--display);font-weight:600;font-size:16px;white-space:nowrap}
.fun-quiz-ic{font-size:22px}
.fun-quiz-box{display:grid;gap:12px;padding:16px;border-radius:22px;background:#00000033;border:1px solid var(--pillow-edge);animation:pop .4s cubic-bezier(.3,1.7,.5,1) both}
.fun-quiz-top{display:flex;align-items:center;gap:10px}
.fun-dots{display:flex;gap:6px}
.fun-dots i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.fun-dots i.done{background:var(--mint)} .fun-dots i.on{background:var(--butter);box-shadow:0 0 8px var(--butter)}
.fun-x{margin-left:auto;border:0;background:#ffffff14;color:var(--muted);width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.fun-quiz-q{font-family:var(--display);font-weight:700;font-size:22px;outline:none}
.fun-quiz-a{display:grid;gap:8px}
.fun-ans{text-align:left;cursor:pointer;padding:12px 16px;border-radius:16px;background:var(--field);border:2px solid var(--field-edge);font-weight:800;font-size:16px;color:var(--ink);transition:transform .15s,background .15s;animation:fun-slide .35s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .05s)}
.fun-ans:hover{border-color:var(--lav)}
.fun-ans:active{transform:scale(.97);background:var(--lav);color:#241a4d}
@keyframes fun-slide{from{transform:translateX(18px);opacity:0}}
.fun-reveal{display:grid;gap:8px;justify-items:center;text-align:center}
.fun-reveal-stage{position:relative;height:130px;width:180px;display:flex;align-items:flex-end;justify-content:center}
.fun-reveal-stage .sq{animation:fun-bounce-in .9s cubic-bezier(.3,1.7,.5,1) both,float 3.4s ease-in-out infinite 1s}
@keyframes fun-bounce-in{0%{transform:translateY(-120px) scale(.3);opacity:0}55%{transform:translateY(8px) scale(1.2,.8);opacity:1}75%{transform:translateY(-6px) scale(.95,1.05)}}
.fun-sparkles i{position:absolute;left:50%;top:45%;font-style:normal;color:var(--butter);font-size:20px;opacity:0;animation:fun-spark 1.4s ease-out both;animation-delay:calc(.5s + var(--i) * .06s);--a:calc(var(--i) * 60deg)}
.fun-sparkles i:nth-child(even){color:var(--pink)}
@keyframes fun-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-80px) scale(1.2)}}
.fun-reveal-h{font-family:var(--display);font-weight:700;font-size:26px;color:var(--butter);outline:none}
.fun-reveal p{color:var(--muted);max-width:34ch}

/* ---------- animated tent pass ---------- */
.fun-pass .fun-tent{position:relative;display:block;width:200px;height:160px;margin:18px auto 4px;border:0;padding:0;background:none;cursor:pointer;border-radius:16px}
.fun-tent-glow{position:absolute;left:-10px;right:-10px;bottom:-20px;height:110px;border-radius:50%;background:var(--glow);filter:blur(22px);opacity:.55}
.fun-tent-body{position:absolute;inset:0;background:linear-gradient(90deg,#c8b4ff 0 50%,#d9cbff 50%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fun-tent-door{position:absolute;left:50%;bottom:0;width:74px;height:98px;transform:translateX(-50%);background:#17122f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.fun-tent-sq{position:absolute;left:50%;bottom:0;transform:translateX(-50%);line-height:0}
.fun-bulb{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--lc);box-shadow:0 0 12px 3px var(--lc)}
.fun-tent.play .fun-tent-glow{animation:fun-fade 1.8s ease-out both .3s}
.fun-tent.play .fun-bulb{animation:fun-bulb-on .35s cubic-bezier(.3,1.7,.5,1) both,fun-twinkle 2.4s ease-in-out infinite;animation-delay:calc(.4s + var(--i) * .13s),calc(2.2s + var(--i) * .21s)}
.fun-tent.play .fun-tent-sq{animation:fun-pop-out .8s cubic-bezier(.3,1.7,.5,1) both 1.75s}
@keyframes fun-fade{from{opacity:0}}
@keyframes fun-bulb-on{from{background:#4a3f70;box-shadow:none;transform:scale(.6)}}
@keyframes fun-twinkle{50%{opacity:.55}}
@keyframes fun-pop-out{0%{transform:translate(-50%,30px) scale(.2);opacity:0}60%{transform:translate(-50%,-14px) scale(1.15,.9);opacity:1}100%{transform:translateX(-50%)}}
.fun-pass-sub{color:var(--mint);font-size:14px;font-weight:800}

/* picture fallback when the share sheet isn't available */
.fun-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:#0b081ce6}
.fun-modal-card{width:min(100%,420px);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:12px;justify-items:center;text-align:center;padding:18px;border-radius:26px;background:#241a4d;border:1px solid var(--pillow-edge);box-shadow:0 20px 60px #000a}
.fun-modal-card img{width:100%;max-height:60vh;object-fit:contain;border-radius:16px;-webkit-touch-callout:default}

/* ---------- who's coming parade ---------- */
.fun-parade{margin-top:20px}
.fun-parade-h{font-family:var(--display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--butter);margin-bottom:6px}
.fun-track-wrap{overflow:hidden;padding:26px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fun-track{display:flex;justify-content:center;flex-wrap:wrap;row-gap:22px}
.fun-parade.moving .fun-track{width:max-content;flex-wrap:nowrap;justify-content:flex-start;animation:fun-march var(--dur) linear infinite}
@keyframes fun-march{to{transform:translateX(-50%)}}
.fun-marcher{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 8px;flex:none}
.fun-parade.moving .fun-marcher{margin:0 16px 0 0}
.fun-marcher .sq.still{animation:fun-waddle .9s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.15s)}
@keyframes fun-waddle{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-6px) rotate(6deg)}}
.fun-marcher em{font-style:normal;font-family:var(--display);font-weight:600;font-size:13px;color:#241a4d;background:var(--tag);padding:1px 9px;border-radius:999px;white-space:nowrap}
.fun-paused .fun-track,.fun-paused .sq,.fun-paused .fun-lantern,.fun-paused .fun-lantern-in{animation-play-state:paused!important}

/* ---------- wish wall ---------- */
.fun-sky{position:relative;height:250px;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 120%,#ffe3942e,transparent 60%),#0000002e;box-shadow:inset 0 -10px 30px #0003}
.fun-sky-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:700;padding:16px;text-align:center}
.fun-lantern{position:absolute;top:var(--top);transform:translateX(-50%);border:0;padding:0;background:none;cursor:pointer;color:inherit;animation:fun-drift var(--d,18s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes fun-drift{from{transform:translate(-50%,270px)}to{transform:translate(-50%,-330px)}}
.fun-lantern-in{display:flex;flex-direction:column;align-items:center;gap:4px;transform-origin:50% 0;animation:fun-sway var(--sw,4s) ease-in-out infinite alternate}
@keyframes fun-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.fun-lantern-body{position:relative;width:54px;height:64px;display:grid;place-items:center;font-size:26px;border-radius:42% 42% 46% 46%;background:radial-gradient(circle at 50% 45%,#fffbe8 0 18%,var(--tint) 75%);box-shadow:0 0 26px 4px color-mix(in srgb,var(--tint) 60%,transparent),inset 0 -6px 0 #0000001f}
.fun-lantern-body::before{content:"";position:absolute;top:-5px;left:30%;right:30%;height:6px;border-radius:3px;background:#6c5aa8}
.fun-lantern-name{font-family:var(--display);font-weight:600;font-size:12px;color:#241a4d;background:#ffffffd9;border-radius:999px;padding:0 8px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fun-lantern.on .fun-lantern-body{outline:3px solid var(--butter);outline-offset:3px}
.fun-lantern:focus-visible{outline:none}
.fun-lantern:focus-visible .fun-lantern-body{outline:3px solid var(--butter);outline-offset:3px}
.fun-lantern.mine{animation:fun-launch 7s ease-in both;pointer-events:none}
.fun-lantern.mine .fun-lantern-name::after{content:" · waiting for OK"}
.fun-lantern.mine .fun-lantern-name{max-width:none}
@keyframes fun-launch{0%{transform:translate(-50%,200px) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-320px) scale(1)}}
.fun-reader{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;border-radius:20px;background:#00000026;min-height:68px}
.fun-reader-emo{font-size:34px;line-height:1}
.fun-reader-txt{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.fun-reader-txt q{font-family:var(--display);font-weight:600;font-size:18px;quotes:"“" "”"}
.fun-reader-txt small{color:var(--muted);font-weight:700}
.fun-reader-nav{margin-top:10px}
.fun-wish-cta{display:flex;justify-content:center;margin-top:16px}
.fun-wish-form{margin-top:14px;padding:16px;border-radius:22px;background:#00000024}
.fun-stickers .choice > span{font-size:22px;padding:8px 12px}
.fun-wish-done{text-align:center;margin-top:12px;color:var(--mint);font-weight:800}

/* ---------- Party HQ: Fun tab ---------- */
.fun-hq-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--pink);color:#3a1430;font-size:12px;font-weight:800;vertical-align:1px}
.fun-hq-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fun-hq-row .t{flex:1 1 220px}
.fun-hq-row .t b{display:block;font-size:17px}
.fun-hq-row .t small{display:block;color:var(--muted);font-weight:600}
.fun-switch{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:8px 14px 8px 8px;border-radius:999px;background:#ffffff14;color:var(--muted);font-weight:800;font-size:15px}
.fun-switch i{position:relative;width:46px;height:28px;border-radius:999px;background:#ffffff26;transition:background .2s}
.fun-switch i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.fun-switch[aria-checked="true"]{color:var(--ink)}
.fun-switch[aria-checked="true"] i{background:var(--mint)}
.fun-switch[aria-checked="true"] i::after{transform:translateX(18px)}
.fun-wish-row{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;padding:12px 14px;border-radius:18px;background:#00000026;border:1px solid var(--pillow-edge)}
.fun-wish-row.pending{border-color:var(--butter);background:#ffe39414}
.fun-wish-row .emo{font-size:28px;line-height:1.2}
.fun-wish-row .m{font-weight:800;overflow-wrap:anywhere}
.fun-wish-row .m small{display:block;font-weight:600;color:var(--muted)}
.fun-wish-row .acts{grid-column:1/-1}
.fun-hq-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:17px}
.fun-hq-h:first-child{margin-top:0}

/* ---------- Party HQ: Lights Out screen ---------- */
.lo{position:fixed;inset:0;z-index:90;background:#05030f;color:#fff6fb;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px))}
.lo-dim{position:absolute;inset:0;background:#000;pointer-events:none;opacity:var(--dim,0);z-index:5}
.lo-top{display:flex;align-items:center;gap:10px;position:relative;z-index:6}
.lo-clock{font-family:var(--display);font-weight:600;font-size:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.lo-top .lo-exit{margin-left:auto}
.lo-main{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-content:center;align-items:center;justify-items:center;min-height:0;overflow:auto}
.lo-light{position:relative;width:min(70vw,300px);aspect-ratio:1;display:grid;place-items:center}
.lo-orb{position:absolute;inset:12%;border-radius:50%;opacity:0;animation:lo-breathe 18s ease-in-out infinite}
.lo-orb:nth-child(1){background:radial-gradient(circle,#ffaecf 0,#ffaecf55 45%,transparent 70%);animation-delay:0s}
.lo-orb:nth-child(2){background:radial-gradient(circle,#c8b4ff 0,#c8b4ff55 45%,transparent 70%);animation-delay:-6s}
.lo-orb:nth-child(3){background:radial-gradient(circle,#a9d8ff 0,#a9d8ff55 45%,transparent 70%);animation-delay:-12s}
.lo-orb:first-child{opacity:.8}
@keyframes lo-breathe{0%,100%{opacity:0;transform:scale(.85)}33%{opacity:.9;transform:scale(1.08)}50%{opacity:.5}}
.lo-light .sq{position:relative;z-index:1}
.lo-light .sq .zz{opacity:1;color:#fff6fb}
.lo-panel{display:grid;gap:10px;justify-items:center;text-align:center;width:min(100%,380px)}
.lo-panel h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.lo-count{font-family:var(--display);font-weight:700;font-size:clamp(56px,16vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.lo-count.done{color:var(--butter);font-size:clamp(36px,10vw,64px)}
.lo-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lo-meter{width:100%;height:26px;border-radius:999px;background:#ffffff14;overflow:hidden;box-shadow:inset 0 2px 6px #0008}
.lo-meter i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--butter),var(--pink));transition:width .25s ease-out}
.lo-giggle{font-size:22px;padding:18px 34px}
.lo-level{font-family:var(--display);font-weight:600;font-size:20px;min-height:1.4em}
.lo-bottom{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:6;color:var(--muted);font-weight:700;font-size:14px}
.lo-bottom input[type=range]{width:160px;accent-color:var(--lav)}

.fun-marcher em.dot{display:block;width:14px;height:14px;padding:0;margin:4px auto 0;border-radius:50%;background:var(--tag)}