.safar-touch{background:none;padding:0;flex:0 0 100px;width:100px;cursor:pointer;border-radius:22px}
.safar-character{display:block;width:100%;height:auto;overflow:visible;contain:layout style}
.safar-character .safar-body{transform-origin:130px 228px;animation:safar-breathe 5.8s cubic-bezier(.45,0,.55,1) infinite}
.safar-character .safar-head{transform-origin:130px 181px;animation:safar-head-idle 5.8s cubic-bezier(.45,0,.55,1) infinite}
.safar-tail{transform-origin:165px 210px;animation:safar-tail 6.2s cubic-bezier(.45,0,.55,1) infinite}
.safar-ear-left{transform-origin:91px 99px;animation:safar-ear-listen 8.4s ease-in-out infinite}
.safar-ear-right{transform-origin:167px 99px;animation:safar-ear-listen 9.2s 1.2s ease-in-out infinite}
.safar-eyes{transform-origin:130px 130px;animation:safar-blink 7.8s linear infinite}
.safar-scarf-tail{transform-origin:152px 193px;animation:safar-scarf-drift 5.8s ease-in-out infinite}
.safar-lantern{transform-origin:185px 196px;animation:safar-lantern-sway 5.8s ease-in-out infinite}
.safar-lantern-halo{animation:safar-lamp-glow 5s ease-in-out infinite}
.safar-character.hello .safar-paw{transform-origin:91px 180px;animation:safar-wave 1.8s cubic-bezier(.35,0,.25,1) 2}
.safar-character.complete{animation:safar-celebrate 1.7s cubic-bezier(.35,0,.25,1) 1}
.safar-stars{animation:safar-glow 2.8s ease-in-out 2}
.safar-character.rest{filter:saturate(.85)}.safar-character.rest .safar-eyes{animation:none}
.safar-character.return .safar-head{animation:safar-curious 5s ease-in-out 1}
.safar-camp{position:relative;border:1px solid #d7ddbc35;border-radius:34px;padding:25px;overflow:hidden;background:linear-gradient(180deg,#355365,#3a5e58 55%,#9b865d);min-height:480px}.camp-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}.camp-sky:before,.camp-sky:after{content:'';position:absolute;border-radius:50%;width:500px;height:180px;background:#d4b98544;bottom:-95px;left:-190px;transform:rotate(-10deg)}.camp-sky:after{left:20px;bottom:-110px;background:#efcf8b42;transform:rotate(10deg)}.camp-sky i{position:absolute;top:40px;right:40px;width:50px;height:50px;border-radius:50%;box-shadow:11px 3px 0 0 #f5e4b199;transform:rotate(-20deg)}.camp-sky span{position:absolute;top:130px;left:30px;color:#f5e4b188;font-size:18px}.stage-1{background:linear-gradient(180deg,#234b56,#336558 70%,#8d9470)}.stage-1 .camp-sky b:before{content:'';position:absolute;width:100px;height:18px;border-radius:100%;bottom:40px;right:20px;background:#83c6be55}.stage-2{background:linear-gradient(180deg,#272c51,#404563 60%,#657062)}.stage-2 .camp-sky span{text-shadow:120px 30px #e8db9f66,180px -80px #e8db9f66,70px -70px #e8db9f44}.camp-heading{position:relative;text-align:center}.camp-heading h2{font-family:Georgia,serif;font-size:30px;margin:10px 0;color:#edf2d8}.camp-number{display:inline-block;padding:6px 12px;border:1px solid #fff2;border-radius:18px;font-size:11px;color:#d6e2d2;background:#182d332a}.safar-camp .companion-card{background:transparent;border:0;box-shadow:none;padding:0;position:relative}.safar-camp .companion-top{display:none}.safar-camp .companion-body{flex-direction:column;margin:5px 0 22px;gap:0;text-align:center}.safar-camp .safar-touch{flex:auto;width:210px;max-width:90%;margin:6px auto -5px}.safar-camp .companion-body h2{font-size:22px}.safar-camp .companion-body p{color:#e4e4cb;max-width:300px;margin:auto;min-height:40px}.safar-camp .companion-cta{max-width:300px;margin:auto}.camp-caption{position:relative;text-align:center;font-size:10px;color:#ede2b9bd;margin-top:14px}.safar-unlocks{margin:23px 0;padding:22px;background:#29403955;border:1px solid #c1d1bb20;border-radius:23px}.safar-unlocks h3{margin-bottom:15px}.safar-unlocks button{margin:5px 4px 5px 0}.safar-unlocks .selected{background:#d0e4b2;color:#233a2c}.safar-unlocks .fine{margin-top:14px}.name-description{font-size:13px!important;line-height:1.8!important;text-align:left;color:#d4d9d2!important;margin-top:15px!important}.e-name h3{font-size:17px;margin-bottom:7px}.e-name h2{margin-top:8px}.world-results{display:grid;gap:8px;max-height:270px;overflow:auto;margin:18px 0}.world-results button{background:#9ec4b40f;border:1px solid #b8d4bd1a;text-align:left;padding:15px;border-radius:14px}.world-results strong{display:block;font-size:16px}.world-results small{display:block;color:#a4bcb4;margin-top:4px}.world-manual{margin:20px 0;padding:16px;border:1px solid #a8c4b425;border-radius:16px}.world-manual summary{cursor:pointer;color:#d5e6c8}.world-picker{margin-top:18px}.world-compass .qibla-rose .north{font-size:9px;letter-spacing:1px;white-space:nowrap}.compass-status{font-size:13px;color:#cfe6ae;line-height:1.7;min-height:56px;margin:15px 0}.world-compass>.fine{margin:12px 0}.world-compass .qibla-needle{transition:none}.point-pill{white-space:nowrap}.companion-card.compact .companion-body{gap:14px}.companion-card.compact .safar-touch{width:100px;flex-basis:100px}
@keyframes safar-breathe{0%,100%{transform:none}48%{transform:translateY(-1px) scaleY(1.013)}}
@keyframes safar-head-idle{0%,100%{transform:none}48%{transform:translateY(-1.6px) rotate(.35deg)}}
@keyframes safar-tail{0%,50%,100%{transform:none}65%{transform:rotate(-4deg)}78%{transform:rotate(2deg)}90%{transform:rotate(-.8deg)}}
@keyframes safar-ear-listen{0%,66%,100%{transform:none}72%{transform:rotate(-4deg)}77%{transform:rotate(1.8deg)}83%{transform:rotate(-.5deg)}}
@keyframes safar-blink{0%,36%,39%,78%,81%,100%{transform:scaleY(1)}37.5%,79.5%{transform:scaleY(.06)}}
@keyframes safar-scarf-drift{0%,100%{transform:none}48%{transform:rotate(-2deg)}}
@keyframes safar-lantern-sway{0%,100%{transform:rotate(-1deg)}48%{transform:rotate(1.5deg)}}
@keyframes safar-lamp-glow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes safar-wave{0%,100%{transform:none}25%{transform:rotate(31deg)}40%{transform:rotate(17deg)}57%{transform:rotate(29deg)}75%{transform:rotate(12deg)}}
@keyframes safar-celebrate{0%,100%{transform:none}20%{transform:translateY(3px) scale(1.02,.98)}48%{transform:translateY(-9px) rotate(-1deg)}72%{transform:translateY(1px) scale(1.01,.99)}86%{transform:translateY(-1px)}}
@keyframes safar-glow{0%,100%{opacity:0;transform:translateY(2px)}40%,65%{opacity:1;transform:translateY(-1px)}}
@keyframes safar-curious{0%,100%{transform:none}30%,60%{transform:rotate(-3deg) translateY(-1px)}78%{transform:rotate(.8deg)}}
@media(max-width:600px){.point-pill{font-size:11px;padding:8px 10px}.companion-card.compact .safar-touch{width:84px;flex-basis:84px}.companion-card.compact .companion-body h2{font-size:18px}.safar-camp{padding:22px;min-height:490px}.e-names-grid{grid-template-columns:1fr}.e-name{padding:22px}.e-name h2{font-size:39px}.e-name .name-description{font-size:14px!important}.world-compass .qibla-rose{margin-top:25px}}
@media(prefers-reduced-motion:reduce){.safar-character,.safar-character *{animation:none!important}}

.stage-3{background:linear-gradient(175deg,#604b66,#ad836b 60%,#485b53)}.stage-3 .camp-sky i{box-shadow:none;background:#f4ce96aa}.stage-4{background:linear-gradient(165deg,#234b4a,#507a65 65%,#748b61)}.stage-4 .camp-sky span{color:#efdb9c;text-shadow:120px 20px #efdb9c99,150px 130px #efdb9c99}

/* Safar the hoopoe (motion version 4): layered rig, CSS-only. Feet stay planted; only parts move. */
.safar-character.hoopoe{position:relative;display:block;width:100%;aspect-ratio:377/487;contain:none;animation:none}
.hoopoe .hp-bob{position:relative;display:block;width:100%;height:100%;transform-origin:50% 100%}
.hoopoe .hp-bob.wow,.hoopoe .hp-bob.peek{animation:hp-float 6s ease-in-out infinite}
.hoopoe .hp-rig{position:absolute;inset:0;display:block;transform-origin:50% 96%;animation:hp-breath 4.8s cubic-bezier(.45,0,.55,1) infinite}
.hoopoe .hp-head{position:absolute;inset:0;display:block;transform-origin:66% 61%;animation:hp-look 11s cubic-bezier(.45,0,.2,1) infinite}
.hoopoe img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hoopoe .hp-rig>img,.hoopoe .hp-head>img{position:absolute;inset:0}
.hoopoe .hp-crest{transform-origin:45% 39%;animation:hp-crest 11s cubic-bezier(.45,0,.2,1) .16s infinite}
.hoopoe .hp-lids{opacity:0;animation:hp-blink 6.2s linear infinite}
.hoopoe .safar-shadow{position:absolute;left:22%;width:56%;bottom:-2.5%;height:5%;border-radius:50%;background:radial-gradient(closest-side,#0000005c,#0000);animation:hp-shadow 4.8s cubic-bezier(.45,0,.55,1) infinite}
.hoopoe.hello .hp-head{animation:hp-hello 1.9s cubic-bezier(.3,.6,.3,1) 1,hp-look 11s 2s cubic-bezier(.45,0,.2,1) infinite}
.hoopoe.hello .hp-crest{animation:hp-hello-crest 1.9s cubic-bezier(.3,.6,.3,1) .12s 1,hp-crest 11s 2s cubic-bezier(.45,0,.2,1) infinite}
.hoopoe.complete{animation:none}.hoopoe.complete .hp-bob{animation:hp-hop 1.2s cubic-bezier(.3,.7,.4,1) 2,hp-float 6s 2.4s ease-in-out infinite}
.hoopoe.growing .hp-bob{animation:hp-grow 2.4s ease-out 1}
.hoopoe.rest{filter:saturate(.8) brightness(.93)}.hoopoe.rest .hp-rig{animation-duration:7.5s}.hoopoe.rest .hp-head{animation:hp-doze 7.5s ease-in-out infinite}.hoopoe.rest .hp-crest{animation:hp-crest-rest 7.5s ease-in-out .2s infinite}.hoopoe.rest .hp-lids{animation:none;opacity:1}
.hoopoe.return .hp-bob{animation:hp-peek 1.1s cubic-bezier(.2,.9,.3,1.2) 1,hp-float 5s 1.2s ease-in-out infinite}
.hp-spark{position:absolute;width:12%;aspect-ratio:1;background:#ffe08a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:hp-spark 1.6s ease-out 2}
.hp-spark.a{left:6%;top:18%}.hp-spark.b{right:4%;top:10%;animation-delay:.15s}.hp-spark.c{left:-4%;top:48%;animation-delay:.3s;width:9%}.hp-spark.d{right:-2%;top:42%;animation-delay:.45s;width:9%}.hp-spark.e{left:44%;top:-8%;animation-delay:.2s}
.hp-zz{position:absolute;right:2%;top:6%;font:700 20px Georgia,serif;color:#cfe4d4;opacity:0;animation:hp-zz 3.6s ease-in infinite}.hp-zz.b{right:-6%;top:-6%;font-size:26px;animation-delay:1.7s}
@keyframes hp-breath{0%,100%{transform:none}50%{transform:scale(1.004,1.009)}}
@keyframes hp-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(1.03);opacity:.9}}
@keyframes hp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
/* head: two curious glances, then rest; crest trails with delay and a little more swing */
@keyframes hp-look{0%,24%,52%,100%{transform:none}30%{transform:translate(-.5%,.3%) rotate(-2.2deg)}36%{transform:translate(-.4%,.2%) rotate(-1.9deg)}44%{transform:rotate(.5deg)}66%{transform:translate(.4%,.2%) rotate(1.6deg)}74%{transform:translate(.3%,.1%) rotate(1.4deg)}84%{transform:rotate(-.3deg)}}
@keyframes hp-crest{0%,24%,52%,100%{transform:none}30%{transform:rotate(-4deg)}36%{transform:rotate(-3deg)}44%{transform:rotate(1.4deg)}48%{transform:rotate(-.4deg)}66%{transform:rotate(3deg)}74%{transform:rotate(2.2deg)}84%{transform:rotate(-1deg)}88%{transform:rotate(.3deg)}}
@keyframes hp-blink{0%,88%,92.2%,100%{opacity:0}89.2%,91%{opacity:1}}
@keyframes hp-hello{0%{transform:none}22%{transform:translateY(-1.6%) rotate(-3.2deg)}48%{transform:translateY(-.8%) rotate(2.4deg)}72%{transform:rotate(-1deg)}100%{transform:none}}
@keyframes hp-hello-crest{0%{transform:none}22%{transform:rotate(-6deg)}48%{transform:rotate(4deg)}72%{transform:rotate(-1.6deg)}88%{transform:rotate(.5deg)}100%{transform:none}}
@keyframes hp-doze{0%,100%{transform:rotate(1.2deg) translateY(.8%)}50%{transform:rotate(2.2deg) translateY(1.3%)}}
@keyframes hp-crest-rest{0%,100%{transform:rotate(2deg)}50%{transform:rotate(3.4deg)}}
@keyframes hp-hop{0%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.05,.93)}46%{transform:translateY(-14%) scale(.97,1.05)}76%{transform:translateY(0) scale(1.04,.95)}88%{transform:scale(.99,1.01)}100%{transform:none}}
@keyframes hp-grow{0%{filter:drop-shadow(0 0 0 #9fe3a000)}40%{filter:drop-shadow(0 0 14px #9fe3a0aa)}100%{filter:drop-shadow(0 0 0 #9fe3a000)}}
@keyframes hp-peek{0%{transform:translateX(-45%) rotate(-12deg);opacity:0}60%{transform:translateX(4%) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes hp-spark{0%{opacity:0;transform:scale(.2) translateY(0) rotate(0)}30%{opacity:1;transform:scale(1.1) translateY(-10%) rotate(40deg)}100%{opacity:0;transform:scale(.4) translateY(-60%) rotate(120deg)}}
@keyframes hp-zz{0%{opacity:0;transform:translate(0,0) scale(.7)}25%{opacity:.9}100%{opacity:0;transform:translate(14px,-34px) scale(1.2)}}

.safar-stage .hoopoe{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:auto;width:100%;height:100%}
.safar-stage .hoopoe .hp-bob{width:auto;height:100%;aspect-ratio:377/487}.safar-stage .hoopoe .hp-bob.wow{aspect-ratio:148/203}.safar-stage .hoopoe .hp-bob.peek{aspect-ratio:120/214}
.safar-stage .hoopoe .hp-bob>img.hp-body{width:100%;height:100%}
.safar-stage .hoopoe .hp-bob,.safar-stage .hoopoe .hp-rig,.safar-stage .hoopoe .hp-head,.safar-stage .hoopoe .hp-crest,.safar-stage .hoopoe .hp-lids{animation-iteration-count:infinite!important}
.safar-stage .hoopoe .hp-spark,.safar-stage .hoopoe .hp-zz{display:none}
.scene-still .hoopoe,.scene-still .hoopoe *{animation:none!important}
@media(prefers-reduced-motion:reduce){.hoopoe,.hoopoe *{animation:none!important}}

/* Corner companion: peeks in from the left edge above the bottom bar, looks around, hops, hides. */
.safar-buddy[hidden]{display:none}
.safar-buddy{position:fixed;left:0;bottom:calc(var(--by,74px) + env(safe-area-inset-bottom));z-index:30;width:0;height:0;pointer-events:none}
.safar-buddy .buddy-pop{pointer-events:auto;position:absolute;left:-18px;bottom:0;width:min(42vw,190px);aspect-ratio:377/487;padding:0;background:none;border:0;cursor:pointer;transform-origin:0 100%;animation:buddy-peek 17s cubic-bezier(.3,.7,.3,1) 1.2s infinite;-webkit-tap-highlight-color:transparent}
.safar-buddy .buddy-hop{display:block;width:100%;height:100%;transform-origin:50% 100%;animation:buddy-hop 17s cubic-bezier(.3,.7,.3,1) 1.2s infinite}
.safar-buddy .hoopoe .hp-head{animation:buddy-look 6.8s ease-in-out infinite}
.safar-buddy .hoopoe .hp-crest{animation:buddy-crest 6.8s ease-in-out .14s infinite}
.safar-buddy .hoopoe .hp-lids{animation:hp-blink 3.9s linear infinite}
.safar-buddy.is-open .buddy-pop{animation:none;transform:translateX(-4%) rotate(5deg)}.safar-buddy.is-open .buddy-hop{animation:none}
.buddy-bubble{pointer-events:auto;position:absolute;left:16px;bottom:calc(min(42vw,190px)*1.3);width:min(calc(100vw - 32px),330px);padding:14px 16px 12px;border-radius:20px 20px 20px 6px;background:#fbf7ea;color:#1a2b24;box-shadow:0 14px 34px #0007;font-size:14px;line-height:1.45;animation:buddy-bubble .35s cubic-bezier(.2,.9,.3,1.2) both}
.buddy-bubble strong{display:block;font-size:16px;margin-bottom:3px}.buddy-bubble p{margin:0 0 9px;color:#2f4439}.buddy-bubble .safar-gift{background:#1a2b2420}.buddy-bubble .safar-gift i{background:#2f6b4f}
.buddy-actions{display:flex;gap:8px;align-items:center;margin-top:10px}.buddy-actions button{padding:8px 12px;border-radius:12px;border:0;background:#2f6b4f;color:#fff;font-size:13px;font-weight:600}.buddy-actions button:last-child{margin-left:auto;background:none;color:#52665d;font-size:20px;padding:2px 8px}
/* slide in from the edge with overshoot, glance, lean out, wiggle, slide back */
@keyframes buddy-peek{0%,5%{transform:translateX(-80%) rotate(-8deg)}11%{transform:translateX(-22%) rotate(6deg)}14%{transform:translateX(-32%) rotate(-1.5deg)}17%,44%{transform:translateX(-30%) rotate(2deg)}50%{transform:translateX(-4%) rotate(9deg)}54%{transform:translateX(-9%) rotate(-4deg)}58%{transform:translateX(-4%) rotate(5deg)}62%,70%{transform:translateX(-16%) rotate(2deg)}78%,100%{transform:translateX(-80%) rotate(-8deg)}}
@keyframes buddy-hop{0%,26%,100%{transform:none}29%{transform:scale(1.05,.93)}33%{transform:translateY(-11%) scale(.97,1.05)}37%{transform:scale(1.04,.95)}39%{transform:none}41%{transform:scale(1.05,.93)}45%{transform:translateY(-8%) scale(.97,1.05)}48%{transform:scale(1.03,.96)}50%,100%{transform:none}}
@keyframes buddy-look{0%,100%{transform:none}14%{transform:rotate(-7deg) translate(-1%,.5%)}30%{transform:rotate(-6deg)}44%{transform:rotate(5deg) translate(1%,.3%)}60%{transform:rotate(7deg)}78%{transform:rotate(-2deg)}}
@keyframes buddy-crest{0%,100%{transform:none}14%{transform:rotate(-11deg)}22%{transform:rotate(-8deg)}30%{transform:rotate(-10deg)}44%{transform:rotate(10deg)}52%{transform:rotate(6deg)}60%{transform:rotate(11deg)}70%{transform:rotate(-3deg)}}
@keyframes buddy-bubble{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@media(min-width:1000px){.safar-buddy{bottom:28px;left:calc(var(--sidebar-w,230px))}}
@media(prefers-reduced-motion:reduce){.safar-buddy .buddy-pop,.safar-buddy .buddy-hop{animation:none!important;transform:none}}

.safar-buddy .buddy-side{position:absolute;left:0;bottom:0;width:0;height:0}
.safar-buddy .buddy-pop{touch-action:none;user-select:none;-webkit-user-select:none}
.safar-buddy.right{left:auto;right:0}.safar-buddy.right .buddy-side{transform:scaleX(-1)}
.safar-buddy.right .buddy-bubble{left:auto;right:16px;border-radius:20px 20px 6px 20px}
.safar-buddy.dragging{left:var(--dx);bottom:var(--dy);right:auto}.safar-buddy.dragging .buddy-side{transform:none}.safar-buddy.dragging .buddy-pop{animation:none!important;transform:scale(1.06) rotate(-4deg);cursor:grabbing;left:0;filter:drop-shadow(0 10px 14px #0006)}.safar-buddy.dragging .buddy-hop{animation:none!important}.safar-buddy.dragging .buddy-bubble{display:none}