@font-face{font-family:"Baloo Paaji 2";src:url(/fonts/baloo-gurmukhi.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C;font-weight:400 800;font-display:swap}
@font-face{font-family:"Baloo Paaji 2";src:url(/fonts/baloo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400 800;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:300 700;font-display:swap}
:root{--bg1:#140a3a;--bg2:#2b0f6e;--ink:#fff;--soft:#d9ccff;--pink:#ff3d9a;--yellow:#ffd23f;--cyan:#2ee6ff;--lime:#7dff6b;--orange:#ff8a1f;--violet:#8b5cff;--card:#ffffff14;--line:#ffffff2e;--shadow:#0b0524;
--head:"Baloo Paaji 2","Fredoka",ui-rounded,system-ui,sans-serif;--body:"Fredoka","Baloo Paaji 2",ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:500 18px/1.55 var(--body);background:radial-gradient(900px 600px at 15% -5%,#5a2bd6 0,transparent 60%),radial-gradient(800px 600px at 100% 10%,#ff3d9a55 0,transparent 55%),linear-gradient(180deg,var(--bg2),var(--bg1) 60%);background-attachment:fixed;overflow-x:hidden;min-height:100vh}
a{color:var(--cyan)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.05;margin:0}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:10px}
.pa{font-family:var(--head)}
.sr{position:absolute;left:-9999px}

/* nav */
.nav{position:sticky;top:10px;z-index:50;margin:10px auto 0;max-width:1120px;padding:0 10px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#ffffff1c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:2px solid var(--line);border-radius:999px;padding:8px 10px 8px 18px;flex-wrap:wrap}
.logo{font-family:var(--head);font-weight:800;font-size:1.5rem;text-decoration:none;color:#fff;letter-spacing:.5px}
.logo b{color:var(--yellow)}
.links{display:flex;gap:4px;flex-wrap:wrap}
.links a{color:#fff;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;font-family:var(--head)}
.links a:hover,.links a[aria-current]{background:var(--yellow);color:#2b1a00}

/* buttons */
.btn{display:inline-block;font-family:var(--head);font-weight:800;font-size:1.15rem;text-decoration:none;color:#2b1a00;background:var(--yellow);padding:12px 26px;border-radius:18px;border:3px solid #000;box-shadow:0 6px 0 #000;transition:transform .12s,box-shadow .12s;cursor:pointer;margin:6px 10px 10px 0}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #000}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #000}
.btn.pink{background:var(--pink);color:#fff}.btn.cyan{background:var(--cyan)}.btn.lime{background:var(--lime)}.btn.violet{background:var(--violet);color:#fff}

/* hero */
.hero{position:relative;padding:36px 0 10px;text-align:center}
.eyebrow{display:inline-block;background:var(--lime);color:#06320a;font-family:var(--head);font-weight:800;padding:4px 16px;border-radius:999px;border:2px solid #000;transform:rotate(-2deg);box-shadow:0 4px 0 #000}
.title{font-size:clamp(3.6rem,15vw,9rem);line-height:.9;margin:14px 0 4px;background:linear-gradient(90deg,var(--yellow),var(--pink) 45%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #000);letter-spacing:-1px}
.title-pa{font-family:var(--head);font-size:clamp(1.6rem,5vw,2.8rem);font-weight:800;color:#fff;text-shadow:0 4px 0 #000}
.sub{font-size:clamp(1.1rem,2.6vw,1.45rem);color:var(--soft);max-width:640px;margin:14px auto}
.squad{display:flex;justify-content:center;align-items:flex-end;margin:10px auto 0;max-width:760px}
.squad img{width:clamp(90px,20vw,190px);filter:drop-shadow(0 10px 0 #0006);animation:bob 3.2s ease-in-out infinite}
.squad img:nth-child(2){animation-delay:-.8s;margin:0 -16px;transform:scale(1.14);position:relative;z-index:2}
.squad img:nth-child(3){animation-delay:-1.6s}.squad img:nth-child(4){animation-delay:-2.2s;margin-left:-16px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.float{position:absolute;pointer-events:none;font-size:2.2rem;animation:drift 7s ease-in-out infinite;opacity:.95;filter:drop-shadow(0 4px 0 #0005)}
@keyframes drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:12px -22px;rotate:18deg}}

/* marquee */
.marquee{margin:34px -20px 10px;background:var(--pink);border-block:4px solid #000;transform:rotate(-1.4deg);overflow:hidden;box-shadow:0 8px 0 #000}
.marquee-in{display:flex;gap:34px;white-space:nowrap;padding:12px 0;font-family:var(--head);font-weight:800;font-size:1.5rem;color:#fff;animation:slide 26s linear infinite;width:max-content}
@keyframes slide{to{transform:translateX(-50%)}}

section{padding:46px 0 10px}
.lead{color:var(--soft);font-size:1.2rem;max-width:640px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:22px}
.card{background:var(--card);border:3px solid #000;border-radius:26px;padding:16px;box-shadow:0 8px 0 #000;position:relative}
.char{text-decoration:none;color:#fff;text-align:center;transition:transform .2s;display:block}
.char:hover{transform:translateY(-8px) rotate(-1.5deg)}
.char .pic{border-radius:20px;padding:10px 10px 0;margin-bottom:10px;border:3px solid #000}
.char img{width:100%;display:block}
.char h3{font-size:1.7rem}.char p{margin:2px 0 0;color:var(--soft);font-size:1rem}
.c1 .pic{background:#8ed1ff}.c2 .pic{background:#ffe066}.c3 .pic{background:#d6b8ff}.c4 .pic{background:#9dffcc}.c5 .pic{background:#ffb3a0}.c6 .pic{background:#ffa8d2}
.topic{background:var(--tc);color:#1a0b00}.topic h3{font-size:1.5rem;margin-bottom:6px}.topic p{margin:0;font-weight:600}
.topic .em{font-size:2.4rem;display:block;margin-bottom:6px}

/* play teaser */
.arcade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:22px}
.game-card{text-decoration:none;color:#fff;text-align:center;padding:26px 18px;border-radius:28px;border:3px solid #000;box-shadow:0 9px 0 #000;transition:transform .15s}
.game-card:hover{transform:translateY(-6px) rotate(1deg)}
.game-card .big{font-size:4rem;display:block;font-family:var(--head);font-weight:800;line-height:1}
.game-card h3{font-size:1.7rem;margin-top:8px}
.g1{background:linear-gradient(135deg,#ff3d9a,#ff8a1f)}.g2{background:linear-gradient(135deg,#2ee6ff,#8b5cff)}.g3{background:linear-gradient(135deg,#7dff6b,#16a34a);color:#04260c}

/* videos */
.vid{padding:12px;transform:rotate(var(--r,0deg));transition:transform .2s}
.vid:hover{transform:rotate(0) translateY(-6px)}
.vid a.th{display:block;position:relative;border-radius:18px;overflow:hidden;border:3px solid #000;aspect-ratio:16/9;background:#000}
.vid img.t{width:100%;height:100%;object-fit:cover;display:block}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:68px;height:68px;border-radius:50%;background:var(--pink);border:4px solid #000;display:grid;place-items:center;font-size:1.7rem;color:#fff;box-shadow:0 5px 0 #000;padding-left:5px}
.vid h3{font-size:1.35rem;margin:12px 4px 2px}.vid .pa{color:var(--soft);margin:0 4px}
.tag{display:inline-block;background:var(--cyan);color:#06303a;font-family:var(--head);font-weight:800;font-size:.85rem;padding:1px 12px;border-radius:999px;border:2px solid #000;margin:6px 4px 0}

/* panels */
.panel{background:#ffffff12;border:3px solid #000;border-radius:28px;padding:22px;box-shadow:0 8px 0 #000;margin-top:20px}
details{background:#ffffff14;border:3px solid #000;border-radius:20px;padding:12px 18px;margin:12px 0;box-shadow:0 5px 0 #000}
summary{cursor:pointer;font-family:var(--head);font-weight:800;font-size:1.25rem}
details p{margin:8px 0 2px;color:var(--soft)}
ul.fun{padding-left:0;list-style:none}ul.fun li{padding:8px 0 8px 40px;position:relative}ul.fun li:before{content:"⭐";position:absolute;left:4px}
.crumb{display:inline-block;margin-top:22px;font-family:var(--head);font-weight:800;text-decoration:none}
.hero-sm{padding:30px 0 4px}
.hero-sm h1{font-size:clamp(2.6rem,9vw,5.2rem);text-shadow:0 5px 0 #000}
.profile{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:26px;align-items:center;margin-top:22px}
.profile .pic{border:3px solid #000;border-radius:30px;padding:16px 16px 0;box-shadow:0 9px 0 #000}
@media(max-width:720px){.profile{grid-template-columns:1fr}}

/* games */
.gamebox{background:#ffffff14;border:3px solid #000;border-radius:32px;box-shadow:0 10px 0 #000;padding:22px;margin-top:20px;text-align:center}
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:1.3rem;flex-wrap:wrap}
.chip{background:#000;border-radius:999px;padding:2px 16px}
.prompt{font-family:var(--head);font-weight:800;font-size:1.3rem;margin:12px 0 4px;color:var(--soft)}
.stage{font-size:clamp(4.5rem,18vw,8rem);line-height:1.1;min-height:1.3em;margin:6px 0;filter:drop-shadow(0 6px 0 #0007);word-break:break-all}
.stage.small{font-size:clamp(2.2rem,8vw,3.6rem);letter-spacing:4px}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:560px;margin:14px auto 4px}
.choice{font-family:var(--head);font-weight:800;font-size:clamp(1.8rem,7vw,2.8rem);padding:14px 8px;border-radius:22px;border:3px solid #000;box-shadow:0 6px 0 #000;background:var(--c,#fff);color:#1b1030;cursor:pointer;transition:transform .1s,box-shadow .1s}
.choice:nth-child(1){--c:#ffd23f}.choice:nth-child(2){--c:#2ee6ff}.choice:nth-child(3){--c:#ff9ccf}.choice:nth-child(4){--c:#9dff8f}
.choice:hover{transform:translateY(-3px)}.choice:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.choice:disabled{opacity:.55;cursor:default}
.choice.ok{background:#16c75a!important;color:#fff}.choice.no{animation:shake .4s;background:#ff5a5a!important;color:#fff}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.feedback{min-height:2em;font-family:var(--head);font-weight:800;font-size:1.4rem}
.stars{font-size:3rem}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:16px auto 0}
.mcard{aspect-ratio:1;perspective:700px;background:none;border:0;padding:0;cursor:pointer}
.mcard .in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d;display:block}
.mcard.flip .in,.mcard.done .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;border-radius:18px;border:3px solid #000;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.mcard .b{background:linear-gradient(135deg,var(--pink),var(--violet));font-size:2rem;color:#fff;font-family:var(--head);font-weight:800}
.mcard .f{background:#fff7d6;transform:rotateY(180deg)}.mcard .f img{width:92%}
.mcard.done .f{background:#b9ffcf}
.confetti{position:fixed;pointer-events:none;z-index:99;font-size:1.8rem;animation:pop .95s ease-out forwards}
@keyframes pop{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2);opacity:0}}

footer{margin-top:64px;background:#0b0524;border-top:4px solid #000;padding:36px 0 46px;color:var(--soft);font-size:1rem;position:relative}
footer:before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;background:radial-gradient(circle at 12px 24px,#0b0524 12px,transparent 13px) 0 0/24px 24px repeat-x}
footer a{color:var(--yellow);font-weight:700}
:focus-visible{outline:4px solid var(--cyan);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.nav-in{border-radius:28px;justify-content:center}.links a{padding:6px 10px;font-size:.95rem}.float{display:none}}

/* real art */
img{height:auto}
.hero-art{margin:18px auto 0;width:min(340px,78vw);transform:rotate(-2.5deg);animation:bob 3.6s ease-in-out infinite}
.hero-art img{display:block;width:100%;border:5px solid #000;border-radius:30px;box-shadow:0 12px 0 #000;background:#fff}
.char .pic{padding:0;overflow:hidden}
.char .pic img{aspect-ratio:4/5;object-fit:cover;object-position:top;display:block}
.profile .pic{padding:0;overflow:hidden}
.profile .pic img{display:block;width:100%}
.mcard .f{padding:0}.mcard .f img{width:100%;height:100%;object-fit:cover;display:block}
.vid img.t{height:100%}
.family img,.scenes img{display:block;width:100%;border:4px solid #000;border-radius:28px;box-shadow:0 9px 0 #000;background:#fff}
.family{margin-top:20px}.scenes{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.scenes img:nth-child(odd){transform:rotate(-1deg)}.scenes img:nth-child(even){transform:rotate(1deg)}