:root{--neon:#ccff00;--neon2:#b4f000;--ink:#0f200e;--ink2:#1a3217;--cream:#fff8e7;--cream2:#ffefc7;--pink:#ffa3c4;--orange:#ff9a3a;--lilac:#c3a6ff;--sky:#9fd8ff;--red:#ff5d6c;--white:#fff;
 --px:'Press Start 2P',ui-monospace,Menlo,Consolas,monospace;--body:'Fredoka','Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--sh:6px 6px 0 var(--ink);--sh2:4px 4px 0 var(--ink);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.55;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}.px{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{font-family:var(--px);line-height:1.35;letter-spacing:.5px;font-weight:400}
h1{font-size:clamp(26px,5.2vw,58px)}h2{font-size:clamp(18px,3.2vw,32px)}h3{font-size:clamp(12px,1.6vw,16px)}
p{max-width:68ch}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.sec{padding:84px 0;position:relative}
.dark{background:var(--ink);color:var(--cream)}.dark h2,.dark h3{color:var(--neon)}
.neon{background:var(--neon)}.cream2{background:var(--cream2)}
.tag{display:inline-block;font-family:var(--px);font-size:10px;padding:8px 12px;background:var(--ink);color:var(--neon);border-radius:8px;margin-bottom:16px;letter-spacing:1px}
.dark .tag{background:var(--neon);color:var(--ink)}
.center{text-align:center}.center p{margin-inline:auto}
.lead{font-size:clamp(18px,2vw,22px);margin-top:16px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--px);font-size:12px;line-height:1.2;padding:16px 22px;background:var(--neon);color:var(--ink);border:4px solid var(--ink);border-radius:14px;box-shadow:var(--sh2);text-decoration:none;transition:transform .08s,box-shadow .08s;user-select:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.pink{background:var(--pink)}.btn.ink{background:var(--ink);color:var(--neon);border-color:var(--neon);box-shadow:4px 4px 0 var(--neon)}.btn.white{background:#fff}
.btn.big{font-size:14px;padding:20px 28px}.btn[disabled]{opacity:.5;pointer-events:none}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* nav */
.nav{position:sticky;top:0;z-index:60;background:var(--neon);border-bottom:5px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--px);font-size:14px}
.brand img{width:42px;height:42px;border:3px solid var(--ink);border-radius:10px}
.links{display:flex;gap:4px;align-items:center}
.links a{font-family:var(--px);font-size:10px;text-decoration:none;padding:12px 10px;border-radius:10px;border:3px solid transparent}
.links a:hover{background:var(--ink);color:var(--neon)}.links a.on{border-color:var(--ink);background:#fff}
.links .cta{background:var(--ink);color:var(--neon)}
.sfx,.burger{background:#fff;border:3px solid var(--ink);border-radius:10px;width:42px;height:42px;display:grid;place-items:center;font-size:18px;box-shadow:3px 3px 0 var(--ink)}
.burger{display:none}
@media(max-width:1020px){.burger{display:grid}.links{position:fixed;inset:75px 0 auto 0;background:var(--neon);flex-direction:column;padding:16px 20px 24px;border-bottom:5px solid var(--ink);transform:translateY(-130%);transition:.25s;align-items:stretch;z-index:55}.links.open{transform:none}.links a{font-size:12px;padding:16px;border-color:var(--ink);background:#fff;text-align:center}.links .cta{background:var(--ink)}}
/* ticker */
.ticker{background:var(--ink);color:var(--neon);font-family:var(--px);font-size:11px;overflow:hidden;white-space:nowrap;border-bottom:5px solid var(--neon)}
.ticker div{display:inline-block;padding:12px 0;animation:tick 40s linear infinite}.ticker span{margin:0 26px}
@keyframes tick{to{transform:translateX(-50%)}}
/* hero */
.hero{background:linear-gradient(#f3ffc4 0%,#e4ff86 28%,#d6ff40 55%,var(--neon) 80%);padding:50px 0 0;overflow:hidden;position:relative;border-bottom:6px solid var(--ink)}
.hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:20px;align-items:center}
.hero h1{text-shadow:4px 4px 0 #fff;margin:12px 0 20px}.hero h1 em{font-style:normal;background:var(--ink);color:var(--neon);padding:0 12px;display:inline-block;transform:rotate(-2deg)}
.hero .sub{font-size:clamp(18px,2vw,23px);font-weight:500;max-width:30ch;margin-bottom:26px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;padding-bottom:6px}
.stat{background:#fff;border:4px solid var(--ink);border-radius:14px;padding:12px 16px;box-shadow:var(--sh2);text-align:center}
.stat b{display:block;font-family:var(--px);font-size:20px}.stat span{font-size:14px;font-weight:600}
.scene{position:relative;min-height:560px}
.house{width:100%;max-width:640px;margin:0 auto;display:block;filter:drop-shadow(0 8px 0 rgba(15,32,14,.18))}
.house .peek{animation:bob 3s ease-in-out infinite;cursor:pointer}
.house .peek:nth-of-type(2){animation-delay:-1s}.house .peek:nth-of-type(3){animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-6px)}}
.cloud{position:absolute;width:120px;height:34px;background:#fff;border-radius:40px;opacity:.9;animation:drift 38s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud:before{width:50px;height:50px;left:16px;top:-24px}.cloud:after{width:64px;height:64px;left:50px;top:-34px}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(120vw)}}
.bubble{position:absolute;background:#fff;border:4px solid var(--ink);border-radius:16px;padding:8px 12px;font-family:var(--px);font-size:10px;box-shadow:var(--sh2);opacity:0;transform:scale(.6);transition:.2s;pointer-events:none;z-index:5}
.bubble.show{opacity:1;transform:none}
.grass{height:34px;background:var(--ink2);border-top:6px solid var(--ink);position:relative}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}.scene{min-height:0}}
/* paw deco */
.paw{position:absolute;width:56px;opacity:.12;pointer-events:none}
.pawtrail{position:fixed;width:20px;height:20px;pointer-events:none;z-index:90;animation:pawfade .9s forwards}
@keyframes pawfade{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.2) translateY(-10px)}}
/* marquee */
.marq{overflow:hidden;padding:10px 0}.marq .track{display:flex;gap:16px;width:max-content;animation:mq 60s linear infinite}.marq.rev .track{animation-direction:reverse;animation-duration:75s}
.marq img{width:132px;height:132px;border:4px solid var(--ink);border-radius:16px;box-shadow:var(--sh2);background:#fff}
@keyframes mq{to{transform:translateX(-50%)}}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:40px}
.card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:24px;position:relative}
.card h3{margin:10px 0 10px}.card .ic{font-size:34px}.dark .card{background:var(--ink2);border-color:var(--neon);box-shadow:6px 6px 0 var(--neon);color:var(--cream)}
.card.hoverable{transition:.12s}.card.hoverable:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}@media(max-width:860px){.split{grid-template-columns:1fr}}
.frame{border:5px solid var(--ink);border-radius:22px;box-shadow:var(--sh);background:#fff;overflow:hidden}
.frame img{width:100%}
.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{font-family:var(--px);font-size:9px;padding:7px 9px;border-radius:8px;border:3px solid var(--ink);background:#fff}
.t-Common{background:#e8e8e8}.t-Uncommon{background:#b9f7c9}.t-Rare{background:#9fd8ff}.t-Epic{background:#d6b8ff}.t-Legendary{background:#ffd24a}
/* tier cards */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:34px}
.tier{border:4px solid var(--ink);border-radius:16px;padding:18px;box-shadow:var(--sh2);background:#fff}.tier b{font-family:var(--px);font-size:12px;display:block;margin-bottom:8px}.tier small{display:block;font-size:14px;margin-top:6px}
/* cat of the day */
.cotd{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:center}@media(max-width:760px){.cotd{grid-template-columns:1fr}}
.cotd .frame{max-width:360px;margin-inline:auto}
/* footer */
footer{background:var(--ink);color:var(--cream);padding:56px 0 30px;border-top:6px solid var(--neon)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}footer h4{color:var(--neon);font-size:12px;margin-bottom:14px}footer a{display:block;text-decoration:none;padding:4px 0;opacity:.85}footer a:hover{opacity:1;color:var(--neon)}
footer .fine{margin-top:34px;font-size:14px;opacity:.6;border-top:2px dashed #2f4d2b;padding-top:18px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
/* page hero */
.phero{background:var(--neon);border-bottom:6px solid var(--ink);padding:56px 0 46px;position:relative;overflow:hidden}.phero h1{font-size:clamp(24px,4.4vw,46px)}.phero p{margin-top:14px;font-size:20px}
.phero .pc{position:absolute;right:4%;bottom:-6px;width:min(220px,30vw);filter:drop-shadow(5px 5px 0 rgba(15,32,14,.25))}@media(max-width:700px){.phero .pc{display:none}}
/* gallery */
.gal{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}@media(max-width:900px){.gal{grid-template-columns:1fr}}
.filters{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh2);padding:18px;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}
@media(max-width:900px){.filters{position:static;max-height:none}.filters .fold{display:none}.filters.show .fold{display:block}}
.filters h3{margin-bottom:12px}.filters label{display:block;font-family:var(--px);font-size:9px;margin:14px 0 6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--neon),0 0 0 7px var(--ink)}
textarea{min-height:120px;resize:vertical}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.gc{background:#fff;border:4px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--sh2);cursor:pointer;transition:.1s;text-align:left;padding:0;display:block;width:100%}
.gc:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.gc img{width:100%;aspect-ratio:1;background:#ddd}
.gc div{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-family:var(--px);font-size:9px;border-top:4px solid var(--ink);gap:6px}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
.count{font-family:var(--px);font-size:11px;margin-bottom:14px}
.modal{position:fixed;inset:0;background:rgba(15,32,14,.82);z-index:100;display:none;align-items:center;justify-content:center;padding:18px;overflow:auto}.modal.open{display:flex}
.mbox{background:var(--cream);border:5px solid var(--ink);border-radius:22px;box-shadow:0 0 0 5px var(--neon);max-width:980px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative}
@media(max-width:800px){.mbox{grid-template-columns:1fr}}
.mbox .mi{background:#fff;border-right:5px solid var(--ink)}.mbox .mi img{width:100%}
.mbox .md{padding:24px}.mbox h2{font-size:18px;margin-bottom:8px}.mx{position:absolute;right:12px;top:12px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:10px;width:42px;height:42px;font-size:20px;z-index:3}
.trow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:2px dashed rgba(15,32,14,.25);font-size:16px;align-items:center}.trow small{font-family:var(--px);font-size:8px;opacity:.7;display:block}
.nav2{display:flex;gap:10px;margin-top:18px}
/* rarity */
.bar{height:12px;background:#e6e6e6;border:2px solid var(--ink);border-radius:8px;overflow:hidden;min-width:70px}.bar i{display:block;height:100%;background:var(--ink)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:4px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--sh2)}
th,td{padding:10px 14px;text-align:left;border-bottom:2px solid #e3e3e3;font-size:16px}th{font-family:var(--px);font-size:9px;background:var(--ink);color:var(--neon)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 20px}.tabs button{font-family:var(--px);font-size:10px;padding:12px 14px;border:3px solid var(--ink);border-radius:10px;background:#fff;box-shadow:3px 3px 0 var(--ink)}.tabs button.on{background:var(--neon)}
/* legends */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin-top:36px}
.lc{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;cursor:pointer;position:relative}.lc img{width:100%}.lc .rk{position:absolute;left:10px;top:10px;background:var(--ink);color:var(--neon);font-family:var(--px);font-size:10px;padding:8px 10px;border-radius:8px}
.lc div.i{padding:14px;border-top:4px solid var(--ink)}.lc b{font-family:var(--px);font-size:11px;display:block;margin-bottom:6px}.lc span{font-size:15px}
/* faq */
.faq{max-width:860px;margin:36px auto 0;display:grid;gap:14px}
details{background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:var(--sh2);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-family:var(--px);font-size:12px;line-height:1.5;position:relative}summary::-webkit-details-marker{display:none}
summary:after{content:"🐾";position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(0);transition:.2s;font-size:20px}details[open] summary{background:var(--neon);border-bottom:4px solid var(--ink)}details[open] summary:after{transform:translateY(-50%) rotate(25deg)}
details .a{padding:18px 20px}details .a p+p{margin-top:10px}
/* forms */
.form{max-width:860px;margin:0 auto;display:grid;gap:22px}
.fcard{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.fcard h3{display:flex;gap:10px;align-items:center;margin-bottom:6px}.fcard h3 b{background:var(--neon);border:3px solid var(--ink);border-radius:8px;padding:6px 8px;font-size:11px}
.fcard .hint{font-size:15px;opacity:.75;margin-bottom:14px}.f{margin-top:16px}.f label{display:block;font-weight:600;margin-bottom:6px}.f small{display:block;opacity:.7;margin-top:4px;font-size:14px}
.f.err input,.f.err select,.f.err textarea{border-color:var(--red);background:#fff1f1}.f .em{color:#c0283a;font-size:14px;font-weight:600;margin-top:4px;display:none}.f.err .em{display:block}
.chk{display:flex;gap:12px;align-items:flex-start;padding:14px;border:3px dashed var(--ink);border-radius:12px;margin-top:14px;cursor:pointer;background:#fbffe8}.chk input{width:24px;height:24px;margin-top:2px;accent-color:var(--ink);flex:none}
.prog{height:22px;border:4px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--sh2)}.prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--neon) 0 10px,var(--neon2) 10px 20px);transition:width .3s}
.lock{text-align:center;max-width:680px;margin:0 auto}.lock .door{width:200px;margin:0 auto 24px}
.notice{background:#fff7c2;border:4px solid var(--ink);border-radius:14px;padding:14px 18px;box-shadow:var(--sh2);margin-bottom:20px;font-weight:500}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);background:var(--ink);color:var(--neon);font-family:var(--px);font-size:11px;padding:16px 20px;border-radius:12px;border:3px solid var(--neon);z-index:200;transition:.3s;max-width:90vw;text-align:center}.toast.show{transform:translate(-50%,0)}
/* game */
.gwrap{max-width:900px;margin:0 auto}
.hud{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.hud div{background:#fff;border:4px solid var(--ink);border-radius:12px;padding:10px 14px;font-family:var(--px);font-size:12px;box-shadow:var(--sh2)}.hud b{color:#2a8a00}
.gbar{height:16px;border:3px solid var(--ink);background:#fff;border-radius:10px;overflow:hidden;margin-bottom:18px}.gbar i{display:block;height:100%;width:100%;background:var(--red);transition:width .2s linear}
.ghouse{background:#ffd98a;border:6px solid var(--ink);border-radius:20px 20px 12px 12px;box-shadow:var(--sh);padding:0 18px 26px;position:relative;margin-top:60px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ghouse:before{content:"";position:absolute;left:-26px;right:-26px;top:-70px;height:70px;background:var(--orange);border:6px solid var(--ink);clip-path:polygon(0 100%,10% 38%,50% 0,90% 38%,100% 100%);filter:drop-shadow(0 0 0 var(--ink))}
.ghouse .sign{position:absolute;left:50%;top:-34px;transform:translateX(-50%);background:var(--neon);border:4px solid var(--ink);border-radius:10px;padding:8px 14px;font-family:var(--px);font-size:11px;z-index:2;white-space:nowrap}
.windows{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:44px}
.win{position:relative;aspect-ratio:1;background:linear-gradient(#bfeaff,#e8f8ff);border:6px solid var(--ink);border-radius:14px 14px 4px 4px;overflow:hidden;padding:0;box-shadow:inset 0 -14px 0 #6b4a2a}
.win:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;background:var(--ink);opacity:.25;z-index:3;pointer-events:none}
.win .sill{position:absolute;left:0;right:0;bottom:0;height:18%;background:#8a5a2a;border-top:5px solid var(--ink);z-index:4}
.win .pop{position:absolute;left:8%;width:84%;bottom:-100%;transition:bottom .16s cubic-bezier(.3,1.6,.5,1);z-index:2;pointer-events:none}
.win.up .pop{bottom:12%}.win .pop img{width:100%}
.win.hit{animation:shake .25s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.win .fx{position:absolute;left:50%;top:30%;transform:translate(-50%,0);font-family:var(--px);font-size:16px;z-index:6;pointer-events:none;animation:fx .7s forwards}
@keyframes fx{to{opacity:0;transform:translate(-50%,-50px)}}
.overlay{position:absolute;inset:0;background:rgba(15,32,14,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;color:var(--cream);z-index:10;border-radius:14px}.overlay h2{color:var(--neon)}.overlay p{max-width:40ch}
.overlay.hide{display:none}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:30px}
/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:.6s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
/* extras */
.mt{margin-top:24px}.sm{font-size:15px;opacity:.8}.ftog{display:none;width:100%;justify-content:center;margin-bottom:10px}
@media(max-width:900px){.ftog{display:flex}}
.steps{counter-reset:s}.steps .card:before{counter-increment:s;content:counter(s);position:absolute;right:16px;top:12px;font-family:var(--px);font-size:26px;opacity:.15}
.tower{display:flex;flex-direction:column;gap:0}
code{background:#eef;padding:2px 6px;border-radius:6px;font-size:.9em}
.phero .pc{image-rendering:pixelated}
.unl{display:none;margin-bottom:18px}
.done{display:none;text-align:center;max-width:640px;margin:0 auto}
.house .peek{transform-box:fill-box}
.tier{color:var(--ink)}.sec{overflow-x:clip}
@media(max-width:600px){.ghouse:before{left:-10px;right:-10px}.ghouse{padding:0 10px 18px}.windows{gap:10px}}
.ghouse{margin-top:90px}.gbar{margin-bottom:10px}