/* Pip's Sky v0.1 early access demo. Own file; does not touch the rest of the site. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07070e;color:#f4f4f6;
  font-family:"Nunito","Quicksand",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
.hidden{display:none!important}

.sky{position:fixed;inset:0;overflow:hidden;touch-action:manipulation;cursor:pointer;user-select:none;-webkit-user-select:none}
.sky-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 45%,rgba(40,30,90,.35),rgba(7,7,14,.85) 70%),
  url("/orion-1080.webp?v=outer2") center/cover no-repeat;opacity:.9;transition:filter 1.2s}
@media (min-width:1100px){.sky-bg{background-image:radial-gradient(ellipse at 50% 45%,rgba(40,30,90,.35),rgba(7,7,14,.85) 70%),url("/orion-2400.webp?v=outer2")}}
.sky-stars i{position:absolute;width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:#fff;opacity:.7;animation:tw 3.5s ease-in-out infinite}
@keyframes tw{50%{opacity:.15}}

.scene{position:absolute;inset:0;transition:opacity .5s,transform .7s}
.scene.leave{opacity:0;transform:scale(1.4)}

/* galaxies on the map */
.gx{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;min-height:64px}
.gx svg{width:var(--z,58px);height:var(--z,58px);filter:drop-shadow(0 0 10px var(--c));animation:spin 60s linear infinite}
.gx span{font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 4px #000,0 0 8px #000;max-width:88px;text-align:center;line-height:1.05}
.gx:not(.main) svg{--z:46px}
.gx.main svg{--z:104px;animation-duration:40s}
.gx.main span{max-width:none;white-space:nowrap;font-size:18px;background:rgba(10,10,30,.6);padding:2px 10px;border-radius:99px;border:2px solid var(--c)}
.gx.main::before{content:"";position:absolute;top:calc(var(--z,104px)/2);left:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  border:3px dashed rgba(255,244,200,.55);animation:spin 18s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

.lens{position:absolute;transform:translate(-50%,-50%);width:124px;height:124px;pointer-events:none}
@media (min-width:700px){.lens{width:170px;height:170px}.gx:not(.main) svg{--z:60px}}
.lens svg{width:100%;height:100%;animation:breathe 5s ease-in-out infinite}
.lens b{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:22px;font-weight:900;letter-spacing:.06em;
  text-shadow:0 0 12px #ffe9a8,0 1px 3px #000}
@keyframes breathe{50%{transform:scale(1.06);filter:brightness(1.2)}}

.neb{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;filter:blur(14px);opacity:.55;
  animation:nebp 9s ease-in-out infinite}
@keyframes nebp{50%{opacity:.8;transform:translate(-50%,-50%) scale(1.08)}}
.neb.swish{animation:swish .9s ease-out}
@keyframes swish{40%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(6deg)}}

/* Stardust Drifts */
.drift{position:absolute;transform:translate(-50%,-50%);width:66px;height:66px;border:0;padding:0;background:none;cursor:pointer;
  animation:grow 1.2s ease-out both}
.drift::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,var(--c) 0,var(--c) 18%,transparent 70%);
  animation:glow 2.4s ease-in-out infinite;opacity:.9}
.drift i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px var(--c);animation:twk 1.8s ease-in-out infinite}
@keyframes grow{from{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes glow{50%{transform:scale(1.15);opacity:1}}
@keyframes twk{50%{transform:translateY(-5px);opacity:.4}}
.pop{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:26px;color:#ffe58a;text-shadow:0 0 10px #ff9,0 2px 3px #000;
  pointer-events:none;animation:rise 1.1s ease-out forwards;white-space:nowrap}
@keyframes rise{to{transform:translate(-50%,-160%);opacity:0}}
.spark{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--c,#fff6c8);box-shadow:0 0 10px var(--c,#fff6c8);
  pointer-events:none;animation:burst .8s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* actors */
.actor{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.pip{width:78px;height:78px;margin:-39px 0 0 -39px;z-index:5}
.pip .bod{width:100%;height:100%;filter:drop-shadow(0 0 14px #ffe58a);transition:transform .3s}
.pip.happy .bod{animation:hop .6s ease-out}
@keyframes hop{40%{transform:translateY(-14px) rotate(-12deg) scale(1.1)}}
.pip .bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.owl{width:110px;height:110px;margin:-55px 0 0 -55px;z-index:4;pointer-events:auto;cursor:pointer}
.owl .bod{width:100%;height:100%;filter:drop-shadow(0 0 10px #8fb4ff);transition:transform .25s}
.owl .wing{transform-origin:50% 55%;animation:flap .7s ease-in-out infinite}
.owl.rest .wing{animation-duration:2.4s}
@keyframes flap{50%{transform:scaleY(.75) rotate(-4deg)}}
.owl.dip .bod{animation:dip 1s ease-in-out}
@keyframes dip{30%{transform:translateY(18px) rotate(-14deg)}65%{transform:translateY(10px) rotate(12deg)}}
.owl .trait{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:13px;font-weight:900;background:rgba(20,30,80,.85);
  border:2px solid #8fb4ff;border-radius:99px;padding:1px 9px;white-space:nowrap;opacity:0;transition:opacity .4s}
.owl.dip .trait,.owl.show .trait{opacity:1}

/* stop: the pull star */
.galbig{position:absolute;left:50%;top:44%;width:min(92vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.85}
.galbig svg{width:100%;height:100%;animation:spin 120s linear infinite;filter:drop-shadow(0 0 30px #8fb4ff)}
.pull{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;cursor:pointer;width:120px;height:160px;background:none}
.pull .back{position:absolute;inset:0;border-radius:14px;background:linear-gradient(150deg,#3b56b8,#1a1f55 60%,#8fb4ff);border:4px solid #fff4c8;
  box-shadow:0 0 26px #ffe58a,inset 0 0 20px rgba(255,255,255,.3);display:grid;place-items:center;animation:float 3s ease-in-out infinite}
.pull .back svg{width:62%}
.pull b{position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);white-space:nowrap;font-size:19px;font-weight:900;text-shadow:0 1px 4px #000}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}

/* HUD */
.hud{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;z-index:20;pointer-events:none}
.tag{font-size:12px;font-weight:800;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:3px 9px;white-space:nowrap}
.where{flex:1;text-align:center;font-size:20px;font-weight:900;text-shadow:0 1px 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dust{font-size:24px;font-weight:900;background:rgba(20,16,50,.8);border:2px solid #ffe58a;border-radius:99px;padding:4px 14px;color:#ffe58a;white-space:nowrap}
.dust.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.18)}}
.bubble{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%);z-index:20;margin:0;max-width:min(92vw,560px);
  font-size:22px;font-weight:800;text-align:center;background:#fff8e0;color:#2a1f55;border-radius:22px;padding:10px 18px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);transition:opacity .4s;pointer-events:none}
.bubble:empty{opacity:0}

.panel{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px 10px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(to top,rgba(7,7,14,.95) 65%,rgba(7,7,14,0))}
.acts{display:flex;gap:10px;margin-bottom:8px}
.big{flex:1;min-height:64px;border:0;border-radius:20px;font-size:21px;font-weight:900;cursor:pointer;
  background:#2c2f6e;border:3px solid #8fb4ff;color:#fff;padding:6px 10px;line-height:1.1}
.big.go{background:linear-gradient(#ffe58a,#ffc94a);color:#2a1f55;border-color:#fff4c8}
.big:active{transform:scale(.97)}
.big:focus-visible,.gx:focus-visible,.drift:focus-visible,.pull:focus-visible{outline:4px solid #fff;outline-offset:3px}
.strip-t{margin:0 0 4px;font-size:16px;font-weight:800;color:#bdbdc6}
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-height:84px;scrollbar-width:thin}
.strip .empty{font-size:17px;color:#bdbdc6;align-self:center}
.tile{flex:0 0 auto;width:78px;border:0;padding:0;background:#151530;border:2px solid #3b56b8;border-radius:12px;overflow:hidden;cursor:pointer;position:relative}
.tile img{display:block;width:100%;height:58px;object-fit:cover}
.tile span{display:block;font-size:12px;font-weight:800;padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile em{position:absolute;top:2px;right:3px;font-style:normal;font-size:12px;font-weight:900;background:#ffe58a;color:#2a1f55;border-radius:99px;padding:0 6px}
.tile.new{border-color:#ffe58a;box-shadow:0 0 12px #ffe58a}

/* reveal + peek */
.reveal{position:fixed;inset:0;z-index:40;background:rgba(5,5,15,.82);display:grid;place-items:center;padding:12px;overflow:auto}
.reveal-in{width:min(94vw,440px);display:flex;flex-direction:column;align-items:center;gap:12px}
.reveal-t{margin:0;font-size:30px;font-weight:900;text-align:center;text-shadow:0 0 14px #ffe58a}
.reveal-card{width:min(72vw,300px,calc((100dvh - 250px) * .716));animation:pullin .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pullin{from{transform:translateY(40px) rotateY(180deg) scale(.6);opacity:0}}
.reveal-btns{display:flex;gap:10px;width:100%}
.peek-note{margin:0;font-size:18px;text-align:center;color:#e6e6f0}
.peek-cards{display:flex;gap:12px;justify-content:center}
.peek-cards button{border:3px solid var(--c,#8fb4ff);border-radius:16px;padding:0;background:#151530;width:min(40vw,170px);overflow:hidden;cursor:pointer}
.peek-cards img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.peek-cards span{display:block;font-size:18px;font-weight:900;padding:4px}
.peek-soon{margin:0;font-size:22px;font-weight:900;color:#ffe58a}

/* Night Mode: same world, softer and slower */
body.night .sky-bg{filter:brightness(.55) saturate(.8)}
body.night .drift::before{animation-duration:4s}
body.night .pip .bod{filter:drop-shadow(0 0 22px #ffe58a)}

@media (min-width:900px){.big{font-size:24px;min-height:70px}.where{font-size:24px}.tile{width:96px}.tile img{height:72px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pop{opacity:1}
}
/* QA 1029: big Home button + Pip's seasonal hat */
.home-btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:56px;min-width:56px;padding:0 16px;border-radius:99px;background:#fff4c8;color:#1c1430;border:3px solid #ffe58a;font:900 20px/1 Nunito,system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.45);white-space:nowrap;flex:none}
.home-btn span{font-size:24px}
.home-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:420px){.tag{display:none}.home-btn{padding:0 14px}}
.pip .bob{position:relative}
.pip .pip-hat{position:absolute;left:50%;top:0;width:58%;aspect-ratio:24/22;transform:translate(-46%,-50%) rotate(-12deg);pointer-events:none}
.pip .pip-hat svg{display:block;width:100%;height:100%;overflow:visible}