/* 1 Nov 2026: mission music button + red laser Stop effect. Does not touch the rain or its mouse-over effect. */
.spy{position:fixed;z-index:30;top:max(.75rem,env(safe-area-inset-top));right:max(.75rem,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s}
.spy.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease,visibility 0s}
.spy-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;font:600 .9rem/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.02em;color:#eafbe9;background:rgba(4,14,6,.72);border:1px solid rgba(120,255,140,.45);border-radius:999px;cursor:pointer;box-shadow:0 0 14px rgba(60,255,100,.18);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.spy-btn:hover{border-color:rgba(160,255,175,.8)}
.spy-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.spy-dot{width:0;height:0;border-left:.55em solid #7dff94;border-top:.34em solid transparent;border-bottom:.34em solid transparent}
.spy.is-on .spy-btn{color:#fff;border-color:rgba(255,70,70,.75);box-shadow:0 0 14px rgba(255,40,40,.3)}
.spy.is-on .spy-dot{width:.62em;height:.62em;border:0;background:#ff3b3b;border-radius:2px}
.spy-credit{margin:0;font-size:.66rem;line-height:1.2;color:rgba(220,240,220,.7);text-shadow:0 1px 2px #000;max-width:15rem;text-align:right}
.spy-laser{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;visibility:hidden;
 background:
  linear-gradient(90deg,transparent 0,transparent 46%,rgba(255,40,40,.0) 47%,rgba(255,60,60,.95) 50%,rgba(255,40,40,0) 53%,transparent 54%),
  repeating-linear-gradient(0deg,rgba(255,30,30,.55) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,rgba(255,30,30,.55) 0 1px,transparent 1px 34px);
 background-size:300% 100%,auto,auto;background-repeat:no-repeat,repeat,repeat;
 box-shadow:inset 0 0 80px rgba(255,0,0,.25)}
.spy-laser.go{visibility:visible;animation:spysweep 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes spysweep{
 0%{opacity:0;transform:translateX(0);background-position:100% 0,0 0,0 0}
 12%{opacity:1}
 30%{opacity:.55}
 42%{opacity:1}
 100%{opacity:0;transform:translateX(105%);background-position:0 0,0 0,0 0}
}
@media (prefers-reduced-motion:reduce){
 .spy,.spy.is-shown{transition:none;transform:none}
 .spy-laser.go{animation:spyfade .4s linear forwards}
 @keyframes spyfade{0%{opacity:.5}100%{opacity:0}}
}
@media (max-width:699px){
 .stage{padding-top:64px}
 .spy{left:max(.75rem,env(safe-area-inset-left));flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:.6rem}
 .spy-credit{max-width:11rem;text-align:left}
}