/* =====================================================================
   GAME ZONE · shared look + animations
   Theme: paint. The Grey King stole the colour, the Game Zone throws it back.
   ===================================================================== */
:root{
  --bg:#070b18; --bg2:#0e1630; --card:#0f1830e6; --card2:#16224a; --line:#26365f;
  --ink:#eef4ff; --dim:#97a9cf; --mute:#6b7da6;
  --pink:#ff3ba7; --yellow:#ffd23b; --cyan:#22e0ff; --green:#4dffa1; --violet:#a45bff; --orange:#ff8a1f;
  --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Rubik,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
::selection{background:var(--pink);color:#fff}

/* ---------- Living background ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(28px) saturate(1.25);opacity:.42;transform:scale(1.08)}
.grid-floor{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(34,224,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,224,255,.06) 1px,transparent 1px);
  background-size:36px 36px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);
  animation:gridDrift 30s linear infinite}
@keyframes gridDrift{to{background-position:0 360px,360px 0}}
.grain{position:fixed;inset:-50%;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* ---------- Scroll progress (a paint stroke) ---------- */
#progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan),var(--green),var(--violet));box-shadow:0 0 12px var(--pink)}

/* ---------- Cursor ring (desktop) ---------- */
#ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--cyan);z-index:80;pointer-events:none;
  transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),border-color .3s,background .3s;mix-blend-mode:screen;opacity:0}
#ring.on{opacity:1}
#ring.hot{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(255,59,167,.12);border-color:var(--pink)}
#ring.down{width:22px;height:22px;margin:-11px 0 0 -11px}

/* ---------- Paint curtain: loader + page transitions ---------- */
#curtain{position:fixed;inset:0;z-index:100;display:flex;pointer-events:none}
#curtain i{flex:1;height:100%;position:relative;transform:translateY(calc(-100% - 90px));background:var(--c)}
#curtain i::after{content:"";position:absolute;left:0;right:0;top:100%;height:70px;
  background:radial-gradient(circle at 18% 0,var(--c) 15px,transparent 16px),radial-gradient(circle at 52% 0,var(--c) 26px,transparent 27px),radial-gradient(circle at 84% 0,var(--c) 12px,transparent 13px),
             linear-gradient(var(--c),var(--c)) 50% 0/18% 55% no-repeat, linear-gradient(var(--c),var(--c)) 17% 0/9% 28% no-repeat;}
#curtain i:nth-child(1){--c:var(--pink)} #curtain i:nth-child(2){--c:var(--yellow)} #curtain i:nth-child(3){--c:var(--cyan)} #curtain i:nth-child(4){--c:var(--green)} #curtain i:nth-child(5){--c:var(--violet)}
html.cover #curtain{pointer-events:auto}
html.cover #curtain i{transform:translateY(0)}
#curtain.fall i{transition:transform .62s cubic-bezier(.7,0,.3,1);transition-delay:calc(var(--n) * 55ms)}
#curtain.out i{transform:translateY(118%)!important}
#curtain.in i{transform:translateY(0)!important}

#loader{position:fixed;inset:0;z-index:99;background:var(--bg);display:none;place-items:center;text-align:center}
html.boot #loader{display:grid}
#loader .lw{width:min(440px,86vw)}
#loader .lt{white-space:nowrap;font-family:Bungee,Impact,sans-serif;font-size:clamp(28px,8vw,50px);line-height:1;letter-spacing:.02em}
#loader .lt span{display:inline-block;animation:lBounce .9s var(--ease-pop) infinite;animation-delay:calc(var(--i)*70ms)}
@keyframes lBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}}
#loader .lb{height:16px;border-radius:99px;background:var(--bg2);border:2px solid var(--line);margin:22px 0 10px;overflow:hidden}
#loader .lb b{display:block;height:100%;width:0;border-radius:99px;background:repeating-linear-gradient(-45deg,var(--pink) 0 14px,var(--yellow) 14px 28px,var(--cyan) 28px 42px);background-size:200% 100%;animation:stripes .6s linear infinite}
@keyframes stripes{to{background-position:-59px 0}}
#loader .lp{font-weight:700;color:var(--dim);font-size:14px}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;transition:padding .3s}
.top::before{content:"";position:absolute;inset:0 -100vmax;background:rgba(7,11,24,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;opacity:0;transition:opacity .3s,border-color .3s;z-index:-1}
.top.stuck::before{opacity:1;border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.brand .blob{width:38px;height:38px;flex:none;animation:blobMorph 6s ease-in-out infinite;background:conic-gradient(from 0deg,var(--pink),var(--yellow),var(--cyan),var(--green),var(--violet),var(--pink));border-radius:52% 48% 60% 40%/50% 60% 40% 50%;box-shadow:0 0 18px rgba(255,59,167,.5)}
@keyframes blobMorph{0%,100%{border-radius:52% 48% 60% 40%/50% 60% 40% 50%;transform:rotate(0)}50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%;transform:rotate(180deg)}}
.brand span{font-family:Bungee,Impact,sans-serif;font-size:19px;line-height:1;color:var(--ink)}
.brand small{display:block;font-family:Rubik,sans-serif;font-size:12px;font-weight:600;color:var(--dim);margin-top:3px}
.pill{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.pill .lvl{font-family:Bungee,Impact,sans-serif;font-size:12px;background:var(--cyan);color:#050a18;border-radius:8px;padding:1px 6px}
.pill.bump{animation:bump .5s var(--ease-pop)}
@keyframes bump{40%{transform:scale(1.22);border-color:var(--yellow);box-shadow:0 0 22px rgba(255,210,59,.6)}}
.langs{display:flex;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:3px;position:relative}
.langs button{position:relative;z-index:1;border:0;background:none;color:var(--dim);font-weight:700;font-size:13px;padding:5px 10px;border-radius:999px;transition:color .25s}
.langs button[aria-pressed="true"]{color:var(--bg)}
.langs .knob{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--ink);transition:transform .35s var(--ease-pop),width .35s var(--ease-pop)}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;font-family:Bungee,Impact,sans-serif;font-size:16px;border:0;border-radius:var(--r-sm);padding:11px 18px;
  background:var(--yellow);color:#14102a;box-shadow:0 5px 0 #b38a00,0 10px 24px -8px rgba(255,210,59,.6);transition:transform .12s,box-shadow .12s,filter .2s;isolation:isolate}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b38a00}
.btn:disabled{background:var(--line);color:var(--dim);box-shadow:none;cursor:default;transform:none;filter:none}
.btn.pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 #a8146a,0 10px 24px -8px rgba(255,59,167,.6)}
.btn.pink:active{box-shadow:0 1px 0 #a8146a}
.btn.cyan{background:var(--cyan);color:#05121f;box-shadow:0 5px 0 #0b8aa3,0 10px 24px -8px rgba(34,224,255,.6)}
.btn.cyan:active{box-shadow:0 1px 0 #0b8aa3}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .6s var(--ease-out) forwards;pointer-events:none;z-index:-1}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- Cards / panels ---------- */
.panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.panel.glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a,0deg),transparent 0 60%,var(--pink),var(--yellow),var(--cyan),transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}

/* tilt + shine */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .5s var(--ease-out);transform-style:preserve-3d;will-change:transform}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt] .shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);z-index:3}
[data-tilt].tilting .shine{opacity:1}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
[data-reveal="left"]{transform:translateX(-50px) rotate(-2deg)}
[data-reveal="right"]{transform:translateX(50px) rotate(2deg)}
[data-reveal="pop"]{transform:scale(.6) rotate(-6deg)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Section headings with a paint swipe behind ---------- */
.h2{font-family:Bungee,Impact,sans-serif;font-size:clamp(28px,4.4vw,44px);line-height:1.05;margin:0 0 8px;position:relative;display:inline-block;z-index:0}
.h2::before{content:"";position:absolute;left:-10px;right:-14px;bottom:2px;height:.5em;z-index:-1;border-radius:4px 30px 8px 22px;background:var(--sw,var(--pink));opacity:.85;transform:scaleX(0) skewX(-12deg);transform-origin:0 50%;transition:transform .7s var(--ease-out) .25s}
.in .h2::before,.h2.in::before{transform:scaleX(1) skewX(-12deg)}
.sub{color:var(--dim);margin:0 0 22px;line-height:1.55;max-width:44em}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:inline-flex;gap:14px;animation:marq var(--spd,40s) linear infinite;padding:6px 0}
.marquee.rev .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%) translateY(30px) scale(.8);background:var(--yellow);color:#14102a;font-weight:700;border-radius:16px;padding:11px 20px;opacity:0;transition:opacity .25s,transform .45s var(--ease-pop);z-index:90;pointer-events:none;box-shadow:0 10px 30px -6px rgba(255,210,59,.6)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* flying coins */
.flycoin{position:fixed;left:0;top:0;z-index:95;font-size:22px;pointer-events:none;will-change:transform}

/* ---------- Footer with paint drips ---------- */
.foot{position:relative;margin-top:80px;padding:40px 0 30px;color:var(--dim);font-size:14px;line-height:1.6}
.foot::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:0;height:14px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan),var(--green),var(--violet),var(--pink));background-size:200% 100%;animation:slide 8s linear infinite}
.foot .drips{position:absolute;left:0;right:0;top:12px;height:60px;pointer-events:none}
.foot .drips i{position:absolute;top:0;width:12px;border-radius:0 0 8px 8px;background:var(--c);height:0;animation:drip 4.5s ease-in-out infinite;animation-delay:var(--dl)}
.foot .drips i::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--c)}
@keyframes drip{0%{height:0;opacity:1}55%{height:var(--h);opacity:1}85%{height:var(--h);opacity:1}100%{height:var(--h);opacity:0}}
@keyframes slide{to{background-position:-200% 0}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  #ring,.grain{display:none}
}
@media (pointer:coarse){ #ring{display:none} }
@media (max-width:430px){ .brand > div{display:none} .top{gap:8px} .pill{padding:6px 10px;font-size:14px} }