/* Cat Jigsaw site. Own design: a dive from sunlit shallows to the deep, bubble-glass panels (the game's UI language).
   Palette lives in the variables below; every section reuses them. */
@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne-Regular.ttf) format("truetype");font-display:swap}
:root{
  --abyss:#031a33;--deep:#06335a;--mid:#0a4f7e;--shallow:#0f7fa8;
  --cyan:#3fe3f2;--aqua:#8ff6e8;--foam:#eafffd;--ink:#d6efff;--muted:#9cc7e0;
  --pink:#ff5f93;--pink-d:#d93a72;--teal:#14c4b0;--teal-d:#0b8f84;--gold:#ffc94a;--cat:#ff9f3a;
  --glass:rgba(10,52,92,.62);--glass-b:rgba(120,235,255,.45);
  --display:"Lilita One","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav-h:68px;--r:26px;
}
*{box-sizing:border-box}
/* Fix round 2: no global smooth scroll (scripted scrollTo lagged, so screenshots/tools never reached later sections); in-page links smooth-scroll from site.js */
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.6 var(--body);color:var(--ink);background:linear-gradient(180deg,#0a5a86 0,#06335a 360px,#031a33 100%);background-color:var(--abyss);min-height:100vh;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--aqua)}
a:hover{color:#fff}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#321;padding:8px 14px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.08;margin:0;color:#fff}
h2{font-size:clamp(2rem,4.2vw,3.1rem);text-shadow:0 3px 0 rgba(2,26,51,.55)}
h3{font-size:1.45rem}

/* ---------- nav (also used by privacy/support) ---------- */
body>.wrap:first-of-type{position:sticky;top:0;z-index:50;width:100%;background:linear-gradient(180deg,rgba(3,26,51,.88),rgba(3,26,51,.55));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(120,235,255,.18)}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h);width:min(1180px,100% - 40px);margin-inline:auto}
nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
nav ul a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.98rem}
nav ul a:hover{background:rgba(120,235,255,.16);color:#fff}
nav ul a.cta{background:linear-gradient(180deg,var(--pink),var(--pink-d));color:#fff;box-shadow:0 3px 0 #8f2150,0 8px 18px rgba(255,95,147,.35);font-family:var(--display);letter-spacing:.02em}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.5rem;color:#fff;text-decoration:none}
.brand img{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 4px 12px rgba(0,0,0,.35)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;border-radius:20px;text-decoration:none;color:#fff;border:2px solid rgba(255,255,255,.55);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.btn img{width:34px;height:34px;flex:none}
.btn small{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.9;line-height:1.1}
.btn b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.1}
.btn-play{background:linear-gradient(180deg,#ff7aa6,var(--pink) 55%,var(--pink-d));box-shadow:0 5px 0 #8f2150,0 14px 28px rgba(255,95,147,.35)}
.btn-app{background:linear-gradient(180deg,#3de3d0,var(--teal) 55%,var(--teal-d));box-shadow:0 5px 0 #05605a,0 14px 28px rgba(20,196,176,.32)}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shimmer 4.5s ease-in-out infinite}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(3px)}
.btn-play:active{box-shadow:0 1px 0 #8f2150}
.btn-app:active{box-shadow:0 1px 0 #05605a}
.stores{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 130px;min-height:calc(100vh - var(--nav-h));display:flex;align-items:center}
.hero-bg{position:absolute;inset:-6% 0 -6% 0;z-index:-3;background:url(img/bg-deep.jpg) center 26%/cover no-repeat;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,22,44,.72) 0,rgba(3,22,44,.34) 46%,rgba(3,22,44,0) 100%),linear-gradient(180deg,rgba(3,26,51,.1),#06335a 99%)}
.rays{position:absolute;inset:0 0 25% 0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.8}
.ray{position:absolute;top:-10%;height:120%;width:16%;background:linear-gradient(180deg,rgba(190,255,255,.5),rgba(190,255,255,0) 75%);transform-origin:50% 0;filter:blur(6px);animation:sway 9s ease-in-out infinite alternate}
.ray:nth-child(1){left:8%;transform:rotate(14deg)}
.ray:nth-child(2){left:30%;width:10%;animation-delay:-3s;animation-duration:12s}
.ray:nth-child(3){left:52%;animation-delay:-5s}
.ray:nth-child(4){left:74%;width:12%;animation-delay:-1.5s;animation-duration:11s}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
.hero-logo{width:min(480px,100%);height:auto;filter:drop-shadow(0 10px 24px rgba(0,30,70,.55));animation:bob 5s ease-in-out infinite}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-top:6px;text-shadow:0 3px 0 rgba(2,26,51,.6)}
.hero h1 em{font-style:normal;color:var(--gold)}
.lead{font-size:1.18rem;max-width:34em;color:var(--foam);margin:14px 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.chips li{padding:7px 16px;border-radius:999px;background:rgba(6,40,74,.62);border:1.5px solid var(--glass-b);color:#fff;font-weight:600;font-size:.95rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.chips li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--aqua);margin-right:9px;box-shadow:0 0 8px var(--aqua)}
.hero-art{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(300px,64vw);aspect-ratio:585/1170;border-radius:40px;padding:9px;background:linear-gradient(145deg,#1b4f86,#0a2447);box-shadow:0 0 0 3px rgba(143,246,232,.7),0 30px 60px rgba(0,10,30,.6),0 0 60px rgba(63,227,242,.3);animation:bob 6s ease-in-out infinite}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:32px}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:70px;height:16px;border-radius:99px;background:rgba(3,26,51,.85);transform:translateX(-50%)}
.crt{position:absolute;pointer-events:none;user-select:none;filter:drop-shadow(0 8px 14px rgba(0,20,50,.45))}
.j1{left:-18%;top:6%;width:96px;animation:drift 11s ease-in-out infinite}
.j2{right:-14%;top:40%;width:84px;animation:drift 13s ease-in-out -4s infinite reverse}
.j3{left:-10%;bottom:4%;width:70px;animation:bob 7s ease-in-out -2s infinite}
.fish{right:-8%;top:-2%;width:90px;animation:swim 16s linear infinite}
.spark{position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 12px 4px var(--aqua);animation:twinkle 3s ease-in-out infinite}
.floor{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,12vw,150px);background:url(img/bg-bottom.png) center bottom/cover no-repeat;pointer-events:none;opacity:.95;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bub{position:absolute;bottom:-40px;border-radius:50%;border:1.5px solid rgba(220,255,255,.7);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(120,235,255,.22) 55%,rgba(120,235,255,.1));animation:rise linear infinite}

/* ---------- section scaffolding ---------- */
section{position:relative;padding:96px 0}
.head{text-align:center;max-width:44em;margin:0 auto 52px}
.head p{color:var(--muted);font-size:1.12rem;margin:14px 0 0}
.eyebrow{display:inline-block;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:var(--cyan);margin-bottom:10px}
.glass{background:var(--glass);border:2px solid var(--glass-b);border-radius:var(--r);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -14px 28px rgba(3,26,51,.4),0 18px 40px rgba(0,10,30,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.s-how{background:linear-gradient(180deg,#06335a,#06355d)}
.s-try{background:linear-gradient(180deg,#06355d,#052a4b)}
.s-twist{background:linear-gradient(180deg,#052a4b,#04223f)}
.s-pics{background:linear-gradient(180deg,#04223f,#031c36)}
.s-shots{background:linear-gradient(180deg,#031c36,#031a33)}
.s-final{background:linear-gradient(180deg,#031a33,#05345c 55%,#0a6a92);overflow:hidden;text-align:center;padding-bottom:190px}

/* how it plays */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.step{padding:22px 22px 28px;text-align:center}
.step .snap{margin:0 auto 20px}
.snap{display:block;width:fit-content;max-width:100%;margin-inline:auto;border-radius:24px;border:4px solid rgba(143,246,232,.75);box-shadow:0 14px 30px rgba(0,10,30,.5),0 0 40px rgba(63,227,242,.18);background:#042;overflow:hidden}
.snap img{display:block;height:min(440px,60vh);width:auto;max-width:100%}
.num{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;font-family:var(--display);font-size:1.5rem;color:#fff;background:radial-gradient(circle at 32% 28%,#9ff,var(--cyan) 40%,#1a7fb0);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.35);margin-bottom:12px}
.step p{margin:10px 0 0;color:var(--muted)}

/* toy */
.toy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.toy-copy p{color:var(--muted);font-size:1.1rem}
.toy-copy ul{padding-left:1.1em;color:var(--ink)}
.toy-copy li{margin:6px 0}
.board-wrap{padding:16px;max-width:520px;margin-inline:auto;width:100%}
.board{position:relative;width:100%;aspect-ratio:1;border-radius:18px;background:linear-gradient(rgba(2,16,34,.8),rgba(2,16,34,.8)),url(img/toy-picture.jpg) center/100% 100%;box-shadow:inset 0 4px 18px rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.t{position:absolute;left:0;top:0;width:calc(100%/var(--n));height:calc(100%/var(--n));background-image:url(img/toy-picture.jpg);background-size:calc(var(--n)*100%) calc(var(--n)*100%);cursor:grab;transform:translate(calc(var(--c)*100% + var(--dx,0px)),calc(var(--r)*100% + var(--dy,0px)));transition:transform .26s cubic-bezier(.3,1.4,.5,1),clip-path .3s,filter .2s;clip-path:inset(3px round 10px);will-change:transform}
.t.drag{transition:clip-path .3s,filter .2s;z-index:5;cursor:grabbing;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)) brightness(1.08)}
.t:focus-visible{outline:none;filter:brightness(1.25) drop-shadow(0 0 6px var(--gold))}
.t.pop{animation:pop .5s ease-out}
.t.nope{animation:nope .35s}
.board.solved .t{cursor:default;filter:none}
.whole{position:absolute;inset:0;background:url(img/toy-picture.jpg) center/100% 100%;pointer-events:none;z-index:4;animation:fadein .6s ease-out}
.board.solved{box-shadow:inset 0 4px 18px rgba(0,0,0,.6),0 0 0 4px var(--gold),0 0 50px 10px rgba(255,201,74,.55)}
.toy-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--ink);font-weight:600;flex-wrap:wrap}
.toy-bar output{background:rgba(2,16,34,.5);padding:6px 14px;border-radius:99px}
.btn-sm{font-family:var(--display);font-size:1.1rem;letter-spacing:.02em;color:#fff;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:8px 20px;background:linear-gradient(180deg,#3de3d0,var(--teal) 55%,var(--teal-d));box-shadow:0 3px 0 #05605a;cursor:pointer}
.btn-sm:active{transform:translateY(2px);box-shadow:0 1px 0 #05605a}
.toy-msg{min-height:1.7em;margin:10px 0 0;text-align:center;font-family:var(--display);font-size:1.35rem;color:var(--gold)}
.peek{display:flex;align-items:center;gap:14px;margin-top:20px}
.peek img{width:76px;border-radius:12px;border:3px solid rgba(143,246,232,.75)}
.fx{position:absolute;pointer-events:none;width:10px;height:10px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--cyan);animation:burst .8s ease-out forwards;z-index:9}

/* twists */
.twists{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.twist{padding:26px 20px 24px;text-align:center}
.art{display:block;position:relative;width:104px;height:104px;margin:0 auto 14px;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.twist:nth-child(2) .art{animation-delay:-1.2s}
.twist:nth-child(3) .art{animation-delay:-2.4s}
.twist:nth-child(4) .art{animation-delay:-3.6s}
.art i{position:absolute;inset:0;border-radius:14px;border:3px solid #fff;background:url(img/toy-picture.jpg) var(--bp)/300% 300%}
.art.rot i{transform:rotate(90deg)}
.art img{position:absolute;display:block}
.art .badge{right:-14px;top:-14px;width:50px;height:50px}
.art .over{inset:0;width:100%;height:100%;object-fit:cover}
.twist p{margin:8px 0 0;color:var(--muted);font-size:.98rem}
.tag{display:inline-block;margin-top:12px;padding:3px 12px;border-radius:99px;background:rgba(255,201,74,.18);border:1px solid var(--gold);color:var(--gold);font-size:.85rem;font-weight:700}
.hint-row{display:flex;gap:20px;align-items:center;justify-content:center;margin:34px auto 0;padding:20px 26px;max-width:760px}
.hint-row img{width:54px;height:54px;flex:none}
.hint-row p{margin:0;color:var(--ink)}

/* pictures */
.pics-top{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;margin-bottom:34px}
.pics-top .head{text-align:left;margin:0}
.keep{padding:22px 24px}
.keep ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.keep li{display:flex;gap:14px;align-items:center}
.keep img{width:44px;height:44px;flex:none}
.wall{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:0;padding:12px;list-style:none}
.wall li{aspect-ratio:1}
.wall img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 8px rgba(0,0,0,.35);transition:transform .2s}
.wall li:hover{z-index:2}
.wall li:hover img{transform:scale(1.7) rotate(-3deg);box-shadow:0 14px 28px rgba(0,0,0,.6)}

/* screens carousel */
.car{position:relative}
.track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 26px;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.track figure{margin:0;flex:0 0 auto;scroll-snap-align:center;text-align:center}
.track img{display:block;height:min(520px,62vh);width:auto;border-radius:26px;border:4px solid rgba(143,246,232,.8);box-shadow:0 18px 36px rgba(0,10,30,.55)}
.track figcaption{margin-top:12px;font-family:var(--display);font-size:1.2rem;color:#fff}
.nav-btn{position:absolute;top:42%;width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:linear-gradient(180deg,#3de3d0,var(--teal-d));color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 4px 0 #05605a,0 10px 20px rgba(0,0,0,.4);z-index:3}
.nav-btn.prev{left:-18px}
.nav-btn.next{right:-18px}
.dots{display:flex;justify-content:center;gap:10px;margin-top:4px}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--aqua);background:transparent;padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:var(--aqua);box-shadow:0 0 10px var(--aqua)}

/* final */
.s-final .inner{position:relative;z-index:2}
.s-final .logo{width:min(340px,70%);animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(0,30,70,.55))}
.s-final p{max-width:32em;margin:12px auto 28px;color:var(--foam);font-size:1.15rem}
.s-final .stores{justify-content:center}
.s-final .floor{height:clamp(110px,17vw,230px)}
.turtle{position:absolute;bottom:3%;left:0;width:150px;animation:swim 26s linear infinite;z-index:1;opacity:.95}
.crt.f1{left:6%;top:12%;width:70px;animation:drift 9s ease-in-out infinite}
.crt.f2{right:8%;top:18%;width:96px;animation:drift 12s ease-in-out -3s infinite reverse}

/* footer + doc pages */
footer{background:#02111f;border-top:1px solid rgba(120,235,255,.18);padding:34px 0;text-align:center;color:var(--muted);font-size:.95rem}
footer a{margin:0 4px}
footer p{margin:10px 0 0}
main>.wrap>.doc{margin:48px auto 64px;max-width:820px;padding:36px clamp(20px,4vw,44px);background:var(--glass);border:2px solid var(--glass-b);border-radius:var(--r);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 18px 40px rgba(0,10,30,.35)}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem)}
.doc h2{font-size:1.6rem;margin:30px 0 8px;color:var(--aqua);text-shadow:none}
.doc .meta{color:var(--muted);margin:4px 0 18px}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
.doc details{background:rgba(2,16,34,.45);border:1.5px solid rgba(120,235,255,.3);border-radius:16px;padding:12px 18px;margin:10px 0}
.doc summary{cursor:pointer;font-weight:700;color:#fff}
.doc details p{margin:8px 0 2px}

/* reveal: only hidden when JS is on, so no-JS and screenshots always see content */
.js .rv{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1.2)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}
.js .rv.d2{transition-delay:.24s}
.js .rv.d3{transition-delay:.36s}


/* ---------- underwater atmosphere for the middle sections (Fix round 1) ----------
   Light touch: soft depth glow, a few light rays, rising bubbles (JS fills .bubbles), kelp on both edges from the
   game's BG_Front art, and a coral floor under the twists. All decoration is aria-hidden and pointer-events:none. */
.s-try,.s-twist,.s-pics{isolation:isolate}
.s-try .wrap,.s-twist .wrap,.s-pics .wrap{position:relative;z-index:1}
.s-try{background:radial-gradient(70% 55% at 12% 0,rgba(63,227,242,.16),transparent 70%),linear-gradient(180deg,#06355d,#052a4b)}
.s-twist{background:radial-gradient(60% 50% at 88% 0,rgba(143,246,232,.13),transparent 70%),linear-gradient(180deg,#052a4b,#04223f);padding-bottom:150px}
.s-pics{background:radial-gradient(70% 45% at 50% 0,rgba(63,227,242,.10),transparent 70%),linear-gradient(180deg,#04223f,#031c36)}
.atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.atmos .rays{inset:0 0 35% 0;opacity:.4;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 60%,transparent)}
.atmos .ray{width:12%;filter:blur(10px)}
.atmos .ray:nth-child(1){left:4%}
.atmos .ray:nth-child(2){left:44%;width:9%}
.atmos .ray:nth-child(3){left:80%}
.atmos .bub{opacity:.55}
.atmos::before,.atmos::after{content:"";position:absolute;bottom:0;width:clamp(56px,9vw,150px);aspect-ratio:209/720;background-size:100% 100%;opacity:.5;transform-origin:50% 100%;animation:kelp 7s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.atmos::before{left:0;background-image:url(img/kelp-l.png)}
.atmos::after{right:0;background-image:url(img/kelp-r.png);animation-delay:-3s}
.s-twist::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(70px,11vw,150px);background:url(img/bg-bottom.png) center bottom/cover no-repeat;opacity:.55;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
@keyframes kelp{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@media (max-width:560px){.atmos::before,.atmos::after{opacity:.32;width:44px}.s-twist{padding-bottom:110px}}

/* ---------- keyframes ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(14px,-26px) rotate(4deg)}}
@keyframes swim{0%{transform:translateX(-30vw)}100%{transform:translateX(110vw)}}
@keyframes sway{0%{rotate:-5deg;opacity:.45}100%{rotate:6deg;opacity:.9}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-110vh) translateX(26px);opacity:0}}
@keyframes shimmer{0%,55%{left:-60%}100%{left:130%}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{filter:brightness(1)}40%{filter:brightness(1.7) saturate(1.3)}100%{filter:brightness(1)}}
@keyframes nope{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0}}
@keyframes ringpulse{0%,100%{box-shadow:inset 0 4px 18px rgba(0,0,0,.6),0 0 0 4px var(--gold),0 0 30px 4px rgba(255,201,74,.4)}50%{box-shadow:inset 0 4px 18px rgba(0,0,0,.6),0 0 0 4px var(--gold),0 0 60px 14px rgba(255,201,74,.75)}}
.board.solved{animation:ringpulse 1.8s ease-in-out infinite}

/* ---------- responsive ---------- */
@media (min-width:1500px){.wrap,nav{width:min(1320px,100% - 80px)}.hero-logo{width:560px}}
@media (max-width:1100px){
  .twists{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(8,1fr)}
  .toy{gap:30px}
}
@media (max-width:820px){
  :root{--nav-h:60px}
  nav ul li:not(:last-child){display:none}
  .hero{padding:30px 0 110px;min-height:0;display:block}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:28px}
  .hero-logo{margin-inline:auto}
  .lead{margin-inline:auto}
  .stores,.chips{justify-content:center}
  .hero::before{background:linear-gradient(180deg,rgba(3,22,44,.55),#06335a 99%)}
  .steps{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .toy{grid-template-columns:1fr}
  .pics-top{grid-template-columns:1fr}
  .pics-top .head{text-align:center}
  .wall{grid-template-columns:repeat(6,1fr)}
  section{padding:70px 0}
  .j1{left:-4%}.j2{right:-2%}
  .nav-btn{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,nav{width:calc(100% - 28px)}
  .btn{padding:10px 18px 10px 12px}
  .btn b{font-size:1.3rem}
  .stores{gap:12px}
  .stores .btn{flex:1 1 220px;justify-content:center}
  .twists{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(5,1fr);gap:6px;padding:8px}
  .wall li:hover img{transform:scale(1.5)}
  .board-wrap{padding:10px}
  .hint-row{flex-direction:column;text-align:center}
  .track img{height:min(430px,56vh)}
  .brand{font-size:1.3rem}
  nav ul a.cta{padding:7px 14px;font-size:.95rem}
  .crt.f1{left:2%;width:52px}.crt.f2{right:2%;width:66px}
  .turtle{width:100px}
}
@media (max-width:380px){
  .chips li{font-size:.85rem;padding:6px 12px}
  .wall{grid-template-columns:repeat(4,1fr)}
}
@media (hover:none){.wall li:hover img{transform:none;box-shadow:0 4px 8px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .bubbles,.rays,.spark{display:none}
  .atmos::before,.atmos::after{animation:none}
  .js .rv{opacity:1;transform:none}
}
@media print{.hero-bg,.rays,.bubbles,.floor{display:none}body{background:#fff;color:#000}}