/* =====================================================================
   WIN WORLD v9 · cartoon globe cover. Loaded after arcade.css.
   The live 3D toon globe is the key art; Benny waves in front of it.
   --gcx/--gcy/--gr are written by the game from the globe's screen spot.
   ===================================================================== */
:root{--gcx:50vw;--gcy:38vh;--gr:170px}
/* sky decor behind the globe (cover only) */
.sky9{position:fixed;inset:0;pointer-events:none;overflow:hidden}
body:has(#intro.hidden) .sky9,body:has(#intro.out) .sky9{opacity:0;transition:opacity .6s}
body:has(#intro.hidden) .sky9{display:none}
body:not(.lobby-go) .sky9{visibility:hidden}
.s9-rays{position:absolute;left:var(--gcx);top:var(--gcy);width:calc(var(--gr)*6.4);height:calc(var(--gr)*6.4);translate:-50% -50%;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0deg 7deg,rgba(255,255,255,0) 7deg 20deg);
 -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 70%);mask-image:radial-gradient(closest-side,#000 18%,transparent 70%);
 animation:s9spin 50s linear infinite,s9in 1s .6s both}
@keyframes s9spin{to{rotate:360deg}}
@keyframes s9in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.s9-cl{position:absolute;display:block;width:120px;height:44px;background:#fff;border:3px solid var(--ink);border-radius:40px;box-shadow:0 4px 0 rgba(26,26,46,.18);animation:s9drift 14s ease-in-out infinite alternate}
.s9-cl::before,.s9-cl::after{content:"";position:absolute;background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0}
.s9-cl::before{width:56px;height:44px;left:16px;top:-26px;border-radius:50%;clip-path:inset(0 0 46% 0)}
.s9-cl::after{width:42px;height:34px;left:56px;top:-18px;border-radius:50%;clip-path:inset(0 0 44% 0)}
.s9-cl.c1{top:12%;left:-30px;scale:.9}
.s9-cl.c2{top:22%;right:-40px;scale:.75;animation-duration:17s;animation-delay:-4s}
.s9-cl.c3{top:47%;left:-46px;scale:.6;animation-duration:12s;animation-delay:-7s}
.s9-cl.c4{top:5%;right:22%;scale:.5;animation-duration:19s;animation-delay:-2s}
.s9-cl.c5{top:55%;right:-24px;scale:.7;animation-duration:15s;animation-delay:-9s}
@keyframes s9drift{from{translate:-14px 0}to{translate:22px 4px}}
.s9-sp{position:absolute;font-style:normal;font-size:24px;color:#fff;-webkit-text-stroke:1.5px var(--ink);animation:s9tw 2.4s ease-in-out infinite}
.s9-sp.p1{left:calc(var(--gcx) - var(--gr)*1.25);top:calc(var(--gcy) - var(--gr)*.9)}
.s9-sp.p2{left:calc(var(--gcx) + var(--gr)*1.1);top:calc(var(--gcy) - var(--gr)*.6);animation-delay:-.8s;font-size:18px}
.s9-sp.p3{left:calc(var(--gcx) + var(--gr)*1.25);top:calc(var(--gcy) + var(--gr)*.35);animation-delay:-1.5s;font-size:14px}
.s9-sp.p4{left:calc(var(--gcx) - var(--gr)*1.35);top:calc(var(--gcy) + var(--gr)*.15);animation-delay:-2s;font-size:16px}
@keyframes s9tw{50%{scale:.55;rotate:20deg;opacity:.6}}

/* the cover no longer paints a picture: the globe itself is the art */
.cover.cover9{background:none!important}
.cover9 .cv-badge{top:calc(env(safe-area-inset-top) + 8px)}
/* Benny waving, standing in front of the globe */
.cv-benny9{position:absolute;opacity:0;pointer-events:none;
 height:min(calc(var(--gr)*1.55),calc((100vw - var(--gcx) + var(--gr)*.02) * 1.42));aspect-ratio:579/840;right:max(-2vw,calc(100vw - var(--gcx) - var(--gr)*1.12));top:calc(var(--gcy) - var(--gr)*.16)}
body.lobby-go .cv-benny9{animation:b9in .75s 1.2s cubic-bezier(.2,1.5,.4,1) forwards}
.b9-wave{width:100%;height:100%;transform-origin:50% 100%;animation:b9bob 3s 2s ease-in-out infinite}
.b9-wave img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
 filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(5px 6px 0 rgba(26,26,46,.28))}
.b9-hi{position:absolute;top:-9%;right:66%;white-space:nowrap;background:#fff;border:var(--o);border-radius:18px 18px 4px 18px;box-shadow:var(--sh3);
 padding:3px 12px 4px;font:700 clamp(15px,4.2vw,20px)/1.3 Rubik,Fredoka,sans-serif;color:var(--ink);opacity:0;scale:.4;transform-origin:100% 100%}
body.lobby-go .b9-hi{animation:b9hi .5s 2.1s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes b9in{0%{opacity:0;translate:40% 40%;rotate:12deg}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes b9bob{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(2.5deg) translateY(-4px)}50%{transform:rotate(0) translateY(0)}75%{transform:rotate(-2deg) translateY(-3px)}}
@keyframes b9hi{to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.s9-rays,.s9-cl,.s9-sp,.b9-wave{animation:none!important}}
/* desktop: Benny stands to the left of the globe */
@media (min-aspect-ratio:1/1) and (min-width:821px){
 .cv-benny9{height:calc(var(--gr)*1.75);left:auto;right:calc(100vw - var(--gcx) + var(--gr)*.62);top:calc(var(--gcy) - var(--gr)*.35)}
 .b9-hi{right:auto;left:88%;border-radius:18px 18px 18px 4px;transform-origin:0 100%}
}

/* v9 win feel */
.fc9{z-index:81;width:22px;height:22px}
.bnc9{animation:bnc9 .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes bnc9{0%{transform:scale(1)}30%{transform:scale(1.07,.93)}55%{transform:scale(.96,1.05)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bnc9{animation:none}}