:root{--ink:#24304a;--paper:#fffdf5;--line:#cfe0f5;--red:#ff5a5f;--yel:#ffd23f;--grn:#3ecf8e;--blu:#4d9de0;--pur:#9b5de5;--sh:4px 4px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.55 "Comic Sans MS","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper) repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px)}
a{color:var(--blu)}.wrap{max-width:1140px;margin:auto;padding:0 20px}
section{padding:70px 0}.paper{background:#fff6dc;border-block:3px dashed #e8c96a}
h1,h2,h3{font-family:"Arial Black",Impact,system-ui,sans-serif;line-height:1.1}
h2{font-size:clamp(28px,4vw,44px);margin:0 0 28px;display:inline-block;background:var(--yel);padding:4px 14px;transform:rotate(-1.5deg);box-shadow:var(--sh);border:3px solid var(--ink)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 20px;background:#fffdf5ee;backdrop-filter:blur(6px);border-bottom:3px solid var(--ink)}
.brand{font:900 22px "Arial Black",sans-serif;color:var(--red);text-decoration:none}.links{display:flex;gap:14px;flex:1;overflow-x:auto}.links a{color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
#lang{border:3px solid var(--ink);background:var(--grn);font-weight:900;border-radius:10px;padding:4px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.hero{text-align:center;padding:50px 0 60px;position:relative}
.logo{font-size:clamp(56px,12vw,130px);margin:10px 0;color:var(--red);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}.logo span{color:var(--yel)}
.tag{font-size:clamp(18px,2.4vw,24px);max-width:720px;margin:10px auto 24px}
.tape{width:140px;height:28px;margin:auto;background:#ff9fb2aa;transform:rotate(3deg)}
.btn{display:inline-block;border:3px solid var(--ink);border-radius:14px;padding:12px 22px;font-weight:900;text-decoration:none;color:var(--ink);background:#fff;box-shadow:var(--sh);transition:.15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.btn.big{background:var(--grn);font-size:24px;padding:16px 34px}
.cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}.small{font-size:14px;opacity:.75}
.heroimg{width:100%;height:auto;margin-top:34px;border:4px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);transform:rotate(.6deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.f{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:18px;box-shadow:var(--sh);transition:.15s}.f:nth-child(odd){transform:rotate(-.6deg)}.f:hover{transform:rotate(0) scale(1.03)}
.f .e{font-size:38px}.f h3{margin:6px 0;font-size:19px}.f p{margin:0;font-size:15px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.gal button{padding:0;border:3px solid var(--ink);border-radius:12px;overflow:hidden;cursor:zoom-in;box-shadow:var(--sh);background:#fff}
.gal img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:.3s}.gal button:hover img{transform:scale(1.06)}
#lb{position:fixed;inset:0;z-index:50;background:#141a2bee;display:flex;align-items:center;justify-content:center;flex-direction:column}
#lb[hidden]{display:none}#lb img{max-width:92vw;max-height:82vh;border:4px solid #fff;border-radius:10px}#lb p{color:#fff}
#lb button{position:absolute;background:var(--yel);border:3px solid var(--ink);border-radius:50%;width:48px;height:48px;font-size:24px;cursor:pointer}
#lb .x{top:16px;right:16px}#lb .pv{left:12px}#lb .nx{right:12px}
.cmds{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cmd{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:8px 12px}.cmd code{background:var(--pur);color:#fff;padding:2px 8px;border-radius:6px;font-weight:700}
.log{columns:2 320px;gap:30px;padding-left:20px}.log li{margin-bottom:10px;break-inside:avoid}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:20px;box-shadow:var(--sh)}
details{background:#fff;border:3px solid var(--ink);border-radius:12px;margin-bottom:12px;padding:12px 16px}summary{font-weight:900;cursor:pointer}
footer{background:var(--ink);color:#fff;padding:30px 0;text-align:center}footer a{color:var(--yel)}
@media(max-width:700px){.two{grid-template-columns:1fr}.links{display:none}section{padding:46px 0}body{font-size:16px}.top{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
/* ---- v3 animations ---- */
.hero{overflow:hidden}.hero .wrap{position:relative;z-index:2}
.scene{position:absolute;inset:0 0 auto 0;height:620px;z-index:0;pointer-events:none;background:linear-gradient(#bfe3ff,#fff3d6 80%,transparent)}
.layer{position:absolute;left:-5%;width:110%;bottom:120px;will-change:transform}.far{height:200px;bottom:160px;opacity:.7}.mid{height:220px;bottom:130px}.near{height:160px;bottom:110px}
.sun{position:absolute;right:12%;top:60px;width:90px;height:90px;border-radius:50%;background:var(--yel);border:4px solid var(--ink);box-shadow:0 0 60px #ffd23f}
.cloud{position:absolute;width:140px;height:44px;background:#fff;border:3px solid var(--ink);border-radius:40px;animation:drift linear infinite}
.cloud::before{content:"";position:absolute;width:60px;height:56px;left:26px;top:-30px;background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0}
.c1{top:70px;animation-duration:60s}.c2{top:150px;animation-duration:85s;animation-delay:-40s;transform:scale(.7)}.c3{top:30px;animation-duration:100s;animation-delay:-70s}
@keyframes drift{from{left:-200px}to{left:110%}}
.plane{position:absolute;top:110px;display:flex;align-items:center;animation:fly 22s linear infinite}
.ban{background:#fff;border:3px solid var(--ink);padding:3px 12px;font-weight:900;font-size:14px;white-space:nowrap;transform-origin:right;animation:wave 1.2s ease-in-out infinite alternate;margin-right:8px;position:relative}
.ban::after{content:"";position:absolute;right:-10px;top:50%;width:10px;border-top:2px solid var(--ink)}
@keyframes fly{from{transform:translateX(-420px)}to{transform:translateX(calc(100vw + 50px))}}
@keyframes wave{from{transform:skewY(-3deg) scaleY(.92)}to{transform:skewY(3deg) scaleY(1.04)}}
.jib{transform-origin:340px 42px;animation:swing 6s ease-in-out infinite alternate}@keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.road{position:absolute;left:0;right:0;bottom:70px;height:42px;background:#3b4256;border-block:3px solid var(--ink);background-image:linear-gradient(90deg,#fff 50%,transparent 0);background-size:50px 3px;background-repeat:repeat-x;background-position:0 50%;background-color:#3b4256}
.car{position:absolute;top:3px;width:44px;height:16px;background:var(--c);border:3px solid var(--ink);border-radius:8px 14px 4px 4px;animation:drive var(--d) linear infinite}
.car.rev{top:22px;animation-name:driveL;border-radius:14px 8px 4px 4px}
@keyframes drive{from{left:-60px}to{left:100%}}@keyframes driveL{from{left:100%}to{left:-60px}}
.hero .logo,.hero .tag{position:relative}.hero .heroimg{position:relative}
.hero .wrap{padding-top:10px}.tag{background:#fffdf5d9;border-radius:12px;padding:4px 10px}
.btn.play{background:var(--yel);font-size:20px;padding:14px 26px}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}.stats{padding:30px 0}
.counters div{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:14px}
.counters b{display:block;font:900 clamp(30px,5vw,52px) "Arial Black",sans-serif;color:var(--red);-webkit-text-stroke:1.5px var(--ink)}
.rv{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
.f,.card,.cmd{transition:transform .2s,box-shadow .2s}.f:hover,.card:hover{box-shadow:6px 6px 0 var(--ink),0 0 26px #ffd23faa}
.f{transform-style:preserve-3d;will-change:transform}
#lb{transition:opacity .25s}#lb.show{opacity:1}#lb:not(.show){opacity:0}#lb img{transition:transform .3s,opacity .3s}#lb.show img{transform:scale(1)}#lb:not(.show) img{transform:scale(.92)}
.playbox{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}.playbox img{width:100%;height:auto;border:4px solid var(--ink);border-radius:14px;box-shadow:var(--sh)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;width:100%;height:100%}
@media(max-width:700px){.counters{grid-template-columns:repeat(2,1fr)}.playbox{grid-template-columns:1fr}.scene{height:520px}.plane{top:80px}.ban{font-size:11px}}
@media(prefers-reduced-motion:reduce){.cloud,.plane,.jib,.car,.ban{animation:none!important}.plane{display:none}.rv{opacity:1;transform:none}}
/* ---- versions ---- */
.timeline{position:relative;padding-left:70px}.timeline::before{content:"";position:absolute;left:28px;top:0;bottom:0;border-left:5px dashed var(--ink)}
.ver{position:relative;margin-bottom:40px}.dot{position:absolute;left:-70px;top:6px;width:60px;height:60px;border-radius:50%;background:var(--yel);border:4px solid var(--ink);display:grid;place-items:center;font:900 20px "Arial Black",sans-serif;box-shadow:var(--sh)}
#v3 .dot{background:var(--grn)}#v4-6 .dot,#v4-5 .dot,#v4-4 .dot,#v4-3 .dot,#v4-2 .dot,#v4-1 .dot{font-size:16px}#v1 .dot{background:#ff9fb2}
.vcard{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:20px 22px;box-shadow:var(--sh)}.vcard h2{font-size:clamp(22px,3vw,32px)}.vcard h2 small{font-size:14px;opacity:.7}
.vshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}.vshots button{padding:0;border:2px solid var(--ink);border-radius:10px;overflow:hidden;cursor:zoom-in;background:#fff}.vshots img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dl{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.dl .btn.big{font-size:20px;padding:12px 24px}
.cmps{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:22px}.cmp{margin:0}.cmp figcaption{font-weight:900;margin-top:8px}
.cmpbox{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--sh);user-select:none}
.cmpbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cmpbox img.b{clip-path:inset(0 0 0 var(--p))}
.knob{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.knob::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--yel);border:3px solid var(--ink);display:grid;place-items:center;font-weight:900}
.cmpbox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.lbl{position:absolute;top:10px;background:var(--ink);color:#fff;font-weight:900;font-size:12px;padding:2px 8px;border-radius:6px}.lbl.l{left:10px}.lbl.r{right:10px}
.vstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}.vstrip a{text-decoration:none;color:var(--ink)}.vstrip .card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
@media(max-width:700px){.cmps{grid-template-columns:1fr}.timeline{padding-left:52px}.timeline::before{left:18px}.dot{left:-54px;width:44px;height:44px;font-size:15px}.vstrip{grid-template-columns:1fr}}
/* ---- download dropdown ---- */
.dlwrap{position:relative;display:inline-block}button.btn{font:inherit;font-weight:900;cursor:pointer}button.btn.big{font-size:24px}
.dlpop{position:absolute;left:50%;top:calc(100% + 12px);z-index:40;width:min(380px,92vw);background:#fffdf5;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);padding:8px;text-align:left;
 opacity:0;visibility:hidden;transform:translate(-50%,-10px) scale(.96);transform-origin:top center;transition:opacity .18s,transform .22s cubic-bezier(.2,1.4,.4,1),visibility 0s .22s}
.dlpop::before{content:"";position:absolute;top:-10px;left:50%;width:16px;height:16px;background:#fffdf5;border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.dlwrap.open .dlpop{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.dli{display:grid;gap:2px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;border:2px solid transparent;opacity:0;transform:translateY(-6px);transition:background .15s,border-color .15s}
.dlwrap.open .dli{animation:dlin .3s forwards}.dlwrap.open .dli:nth-child(2){animation-delay:.04s}.dlwrap.open .dli:nth-child(3){animation-delay:.08s}.dlwrap.open .dli:nth-child(4){animation-delay:.12s}.dlwrap.open .dli:nth-child(5){animation-delay:.16s}
@keyframes dlin{to{opacity:1;transform:none}}
.dli:hover,.dli:focus-visible{background:#fff3c4;border-color:var(--ink);outline:none}
.dli.rec{background:#e3fbef;border-color:var(--grn);margin-bottom:4px}.dli.web{border-top:2px dashed #d8c890;border-radius:0 0 10px 10px;margin-top:4px}
.dlh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px}.badge{background:var(--yel);border:2px solid var(--ink);border-radius:20px;font-size:12px;font-weight:900;padding:1px 8px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}.dlm{font-size:13px;opacity:.7}.dln{font-size:14px}
@media(max-width:700px){.dlpop{position:fixed;left:50%;top:auto;bottom:12px;width:94vw}.dlpop::before{display:none}.dlwrap.open .dlpop{transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.dlpop,.dli{transition:none}.dlwrap.open .dli{animation:none;opacity:1;transform:none}.badge{animation:none}}
/* ---- ads: one card on the main page ---- */
.adsec{padding:30px 0}
.adcard{background:linear-gradient(135deg,#fffdf5,#f3e9ff);border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:14px 18px 18px;min-height:300px}
.adhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.adlbl{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.6}.adhow{font-size:13px;color:var(--pur);font-weight:700}
.adbody{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;transition:opacity .45s}.adbody.fade{opacity:0}
.adimg img{display:block;width:300px;height:auto;border-radius:12px;border:3px solid var(--ink)}
.adtext h3{font-size:clamp(22px,3vw,30px);margin:0 0 8px}.adtext p{margin:0 0 16px;font-size:17px}
.adcard:not(.on) .adbody{visibility:hidden}
@media(max-width:700px){.adbody{grid-template-columns:1fr;justify-items:center;text-align:center}.adimg img{width:min(300px,100%)}}
.adform{display:grid;gap:12px;max-width:640px}.adform label{display:grid;gap:4px;font-weight:700}.adform .chk{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.adform input:not([type=checkbox]),.adform select,.adform textarea{font:inherit;padding:10px 12px;border:3px solid var(--ink);border-radius:10px;background:#fff}
.adform input:focus,.adform select:focus,.adform textarea:focus{outline:3px solid var(--yel)}
/* ================= DECOR v4 (palette from the Discord banner) ================= */
:root{--pur:#6b3fa0;--pur2:#2a1a4a;--org:#ff8c2a;--sky:#7ec8f0;--pine:#f7b733}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout .25s ease both}::view-transition-new(root){animation:vtin .35s ease both}
@keyframes vtout{to{opacity:0;transform:translateY(-8px)}}@keyframes vtin{from{opacity:0;transform:translateY(8px)}}
html{scrollbar-color:var(--pur) #f3e9ff}
::-webkit-scrollbar{width:14px}::-webkit-scrollbar-track{background:#f3e9ff}::-webkit-scrollbar-thumb{background:linear-gradient(var(--org),var(--pur));border-radius:10px;border:3px solid #f3e9ff}
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M3 3l8 20 3-8 8-3z' fill='%23ff8c2a' stroke='%232a1a4a' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3,auto}
a,button,summary,.gal button,input[type=range]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M4 26l4-10 12-12 6 6-12 12z' fill='%23f7b733' stroke='%232a1a4a' stroke-width='2.5'/%3E%3Cpath d='M4 26l4-10 6 6z' fill='%23ffe0b0' stroke='%232a1a4a' stroke-width='2'/%3E%3C/svg%3E") 4 26,pointer}
.top{background:rgba(255,253,245,.55);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border-bottom:2px solid rgba(42,26,74,.35);box-shadow:0 6px 24px rgba(107,63,160,.15)}
.brand{background:linear-gradient(90deg,var(--org),var(--pur));-webkit-background-clip:text;background-clip:text;color:transparent}
#music{border:3px solid var(--ink);background:var(--sky);font-weight:900;border-radius:10px;padding:4px 10px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;margin-left:6px}
#music.on{background:var(--org)}
/* doodles background */
.doodles{position:fixed;inset:-10% 0;z-index:-1;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' fill='none' stroke='%236b3fa0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M30 70l20-20 20 20v30H30z M45 100V82h10v18'/%3E%3Cpath d='M250 40q10-20 20 0t20 0'/%3E%3Ccircle cx='300' cy='120' r='14'/%3E%3Cpath d='M300 98v-8M300 150v-8M278 120h-8M330 120h-8'/%3E%3Cpath d='M60 250h70M70 250l6-14h38l8 14M80 262a6 6 0 1 0 0.1 0M120 262a6 6 0 1 0 0.1 0'/%3E%3Cpath d='M220 260l10-30 10 30-26-18h32z'/%3E%3Cpath d='M160 160c10-10 30-10 40 0'/%3E%3Cpath d='M300 300l20-40 20 40M310 285h20'/%3E%3C/svg%3E");will-change:transform}
/* glowing dividers */
section+section::before,section+.wrap::before{content:"";display:block;height:4px;max-width:900px;margin:-72px auto 68px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--org),var(--pur),var(--sky),transparent);background-size:200% 100%;box-shadow:0 0 18px rgba(255,140,42,.6);animation:glow 6s linear infinite}
@keyframes glow{to{background-position:200% 0}}
/* sky cycle */
.scene{background:linear-gradient(#7ec8f0,#ffe8c4 80%,transparent);animation:skycol 60s linear infinite}
@keyframes skycol{0%,30%{background-color:transparent;filter:none}}
.scene::before{content:"";position:absolute;inset:0;background:linear-gradient(#2a1a4a,#6b3fa0 55%,#ff8c2a 85%,transparent);opacity:0;animation:night 60s ease-in-out infinite}
@keyframes night{0%,35%{opacity:0}50%,80%{opacity:.92}95%,100%{opacity:0}}
.stars{position:absolute;inset:0 0 40% 0;opacity:0;animation:night 60s ease-in-out infinite;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(2px 2px at 85% 50%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 15%,#fff,transparent),radial-gradient(2px 2px at 92% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 30% 10%,#fff,transparent)}
.sun{animation:sunarc 60s ease-in-out infinite;background:var(--pine);box-shadow:0 0 70px var(--org);z-index:1}
.moon{position:absolute;left:14%;top:70px;width:70px;height:70px;border-radius:50%;background:#fff6dc;border:4px solid var(--ink);box-shadow:inset -14px -6px 0 #e3d6b5,0 0 40px #fff6dc;opacity:0;animation:moon 60s ease-in-out infinite}
@keyframes sunarc{0%,30%{transform:translate(0,0)}45%{transform:translate(-60px,260px);opacity:1}50%,85%{transform:translate(-60px,400px);opacity:0}95%,100%{transform:translate(0,0);opacity:1}}
@keyframes moon{0%,42%{opacity:0;transform:translateY(80px)}55%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(80px)}}
.win{fill:#2a1a4a;stroke:none;animation:winlit 60s steps(1) infinite}
@keyframes winlit{0%,44%{fill:#3d4a6b}46%,88%{fill:#ffd23f}90%,100%{fill:#3d4a6b}}
.bird{position:absolute;top:90px;width:22px;height:10px;animation:birds 28s linear infinite}
.bird::before,.bird::after{content:"";position:absolute;top:0;width:11px;height:8px;border-top:3px solid var(--ink);border-radius:50% 50% 0 0;animation:flap .5s ease-in-out infinite alternate}
.bird::before{left:0;transform-origin:right}.bird::after{right:0;transform-origin:left}
@keyframes flap{to{transform:rotate(25deg)}}.bird::after{animation-direction:alternate-reverse}
@keyframes birds{from{left:-40px;transform:translateY(0)}50%{transform:translateY(-30px)}to{left:105%;transform:translateY(10px)}}
/* mascot pineapple house */
.mascot{position:absolute;right:4%;bottom:118px;width:110px;z-index:2;transform-origin:bottom;animation:bob 3s ease-in-out infinite}
.mascot .arm{transform-origin:78px 78px;animation:wave 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-35deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-30deg)}}
.mascot .bubble{position:absolute;right:90px;top:-10px;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:3px 8px;font-weight:900;font-size:13px;white-space:nowrap;animation:pop 6s ease-in-out infinite}
@keyframes pop{0%,10%{opacity:0;transform:scale(.6)}15%,60%{opacity:1;transform:none}70%,100%{opacity:0}}
/* typewriter */
.tw::after{content:"▌";color:var(--org);animation:blink .8s steps(1) infinite;margin-left:2px}@keyframes blink{50%{opacity:0}}
/* stats ticker */
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--pur2),var(--pur));color:#fff;border-block:3px solid var(--ink);white-space:nowrap;font-weight:900;padding:8px 0;margin-top:20px}
.ticker div{display:inline-block;animation:tick 40s linear infinite;padding-left:100%}.ticker span{margin:0 26px}.ticker b{color:var(--pine)}
@keyframes tick{to{transform:translateX(-100%)}}
/* live city strip */
.livecity{position:relative;height:200px;background:linear-gradient(#cfe8ff,#fff3e0 40%);border-top:3px solid var(--ink);overflow:hidden}
.livecity canvas{position:absolute;inset:0;width:100%;height:100%}
/* footer builders */
footer{position:relative;overflow:hidden;padding-top:60px;background:linear-gradient(var(--pur2),#1a1030)}
.builder{position:absolute;top:4px;width:30px;height:46px;transform:scale(1.4);transform-origin:top;animation:walk 26s linear infinite}
.builder svg{animation:step .4s steps(2) infinite}
@keyframes walk{from{left:-40px}to{left:102%}}@keyframes step{50%{transform:translateY(-3px) rotate(3deg)}}
/* sparkles */
.spark{position:fixed;pointer-events:none;z-index:70;width:10px;height:10px;background:radial-gradient(circle,#fff 0 30%,var(--pine) 31% 60%,transparent 61%);animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.btn{position:relative}.btn:hover{box-shadow:6px 6px 0 var(--ink),0 0 22px rgba(255,140,42,.55)}
/* banana cars easter egg */
.banana{position:fixed;top:-80px;font-size:48px;z-index:80;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}
.konami-toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:81;background:var(--pine);border:3px solid var(--ink);border-radius:14px;padding:10px 18px;font-weight:900;box-shadow:var(--sh)}
h2{background:linear-gradient(90deg,var(--pine),#ffd23f)}
@media(max-width:700px){.mascot{width:70px;bottom:118px}.mascot .bubble{display:none}.livecity{height:100px}}
@media(prefers-reduced-motion:reduce){.scene,.scene::before,.stars,.sun,.moon,.win,.bird,.mascot,.mascot .arm,.ticker div,.builder,.builder svg,section+section::before,.mascot .bubble{animation:none!important}.bird,.builder{display:none}.ticker div{padding-left:0}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* banana easter egg */
.bananote{display:inline-flex;align-items:center;gap:10px;margin:18px auto 0;background:#fff6c2;border:3px dashed var(--ink);border-radius:14px;padding:6px 8px 6px 6px;font-weight:700;font-size:15px;transform:rotate(-1.2deg);box-shadow:3px 3px 0 var(--ink);position:relative;z-index:3;transition:opacity .3s,transform .3s;animation:noteIn .5s .8s both}
.bananote.bye{opacity:0;transform:rotate(-1.2deg) scale(.9)}@keyframes noteIn{from{opacity:0;transform:translateY(10px) rotate(-4deg)}}
.bananote button{border:0;background:none;cursor:pointer;font-size:18px;line-height:1}.bnt{font-size:26px!important;animation:wig 2.4s ease-in-out infinite}.bnx{opacity:.55;padding:4px 6px}.bnx:hover{opacity:1}
@keyframes wig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-20deg)}90%{transform:rotate(18deg)}95%{transform:rotate(-10deg)}}
.banbtn{background:var(--pine);border:3px solid #fff;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;margin:0 auto 10px;display:block;transition:transform .2s}.banbtn:hover{transform:rotate(-20deg) scale(1.1)}
@media(max-width:700px){.bananote{font-size:13px}}
@media(prefers-reduced-motion:reduce){.bnt,.bananote{animation:none}}
/* where to play */
.platgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.plat{display:flex;gap:12px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.plat:hover,.plat:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink),0 0 18px rgba(255,140,42,.45)}
.pi{font-size:28px;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--pine),var(--org));border:2px solid var(--ink);flex:none}
.plat b{display:block}.plat small{opacity:.7}
.footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-bottom:12px;font-size:14px}

.dlpair{cursor:default}.dlbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.dlb{padding:4px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9em}.dlb:hover,.dlb:focus-visible{background:#fff3c4;outline:none}.dlb.and{background:#e3fbef}
/* header widget: views / likes / reviews */
.cbbar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 8px;font-weight:800;font-size:14px}
.cbbar>span{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:2px 8px}
.cbbar button{border:2px solid var(--ink);background:#fff;border-radius:10px;padding:2px 8px;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--ink);font:inherit}
.cbbar button.on{background:var(--grn)}.cbbar button:disabled{cursor:default}
.cbf{background:var(--grn)!important}
#cbM{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
#cbM[hidden]{display:none}
.cbbox{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:18px;max-width:720px;width:100%;max-height:85vh;overflow:auto;position:relative}
.cbx{position:absolute;top:8px;right:10px;border:none;background:none;font-size:20px;cursor:pointer}
@media(max-width:700px){.cbbar{order:5;width:100%;justify-content:center;margin:6px 0}}
/* desktop header fit: wrap nav links, compact widget */
@media(min-width:701px){.top{flex-wrap:wrap;row-gap:6px}.links{flex-wrap:wrap;overflow:visible;gap:4px 12px;min-width:0}
.cbbar{gap:4px;margin:0 4px;font-size:13px;flex-shrink:0}.cbbar>span,.cbbar button{padding:1px 6px}}
@media(min-width:701px) and (max-width:1500px){.cbf{font-size:0!important}.cbf::first-letter{font-size:13px}}
/* scrollable version picker */
.dlpop{max-height:min(460px,70vh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--ink) #f3ecd6;scrollbar-gutter:stable}
.dlpop::-webkit-scrollbar{width:10px}.dlpop::-webkit-scrollbar-track{background:#f3ecd6;border-radius:10px;margin:10px 0}.dlpop::-webkit-scrollbar-thumb{background:var(--ink);border-radius:10px;border:2px solid #f3ecd6}.dlpop::-webkit-scrollbar-thumb:hover{background:#444}
.dlpop::before{display:none}
.dlwrap.open::after{content:"";position:absolute;top:calc(100% + 4px);left:50%;z-index:41;width:16px;height:16px;background:#fffdf5;border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
@media(max-width:700px){.dlpop{max-height:70vh;max-height:70dvh}.dlwrap.open::after{display:none}}
select{max-height:60vh;overflow-y:auto}
/* history page */
.hjump{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.hjump .btn{padding:6px 12px;font-size:15px}
.roadgrid,.platgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.timeline .ver .small{opacity:.6;margin:6px 0 0}
@media(max-width:700px){.timeline{padding-left:54px}.dot{left:-56px;width:46px;height:46px;font-size:14px}.timeline::before{left:20px}}
.vstrip .card img{display:block;height:auto!important;max-height:none}.vstrip .card h3{font-size:18px;margin:10px 0 2px}.vstrip .card p.small{margin:0 0 6px;opacity:.65}
/* v5.6 section */
#v56 .v56grid{display:grid;grid-template-columns:1fr 2fr;gap:16px}
#v56 .card{color:inherit}#v56 ul{margin:8px 0 0;padding-left:4px;list-style:none;line-height:1.7}
#v56 .v56next{border:2px dashed #f5a623}#v56 .v56gag{opacity:.8;font-style:italic}
#v56 .v56lbl{margin:22px 0 10px}#v56 .v56gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#v56 figure{margin:0}#v56 img{width:100%;border-radius:10px;display:block}#v56 figcaption{font-size:.9em;opacity:.85;margin-top:4px}
@media(max-width:760px){#v56 .v56grid,#v56 .v56gal{grid-template-columns:1fr}}