:root{--ink:#111;--paper:#fffdf7;--accent:#ffd400;--r:255px 15px 225px 15px/15px 225px 15px 255px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Patrick Hand',cursive;font-size:1.25rem;line-height:1.45;
background-image:radial-gradient(#0001 1px,transparent 1px);background-size:22px 22px}
h1,h2,h3,.btn,.brand,.big-num,summary,.counter{font-family:'Permanent Marker',cursive}
h2{font-size:2.6rem;text-align:center;margin:0 0 1rem;transform:rotate(-1.5deg)}
h2::after{content:"";display:block;width:140px;height:8px;margin:.2rem auto 0;background:var(--accent);border-radius:var(--r)}
section{max-width:1080px;margin:3.5rem auto;padding:0 1rem}
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:1.2rem 1.5rem;box-shadow:5px 6px 0 var(--ink)}
section.card{padding:2rem}
.btn{display:inline-block;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:var(--r);
padding:.5rem 1.1rem;box-shadow:3px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;cursor:pointer;font-size:1.1rem}
.btn:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:6px 7px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.sm{padding:.25rem .7rem;font-size:.95rem;box-shadow:2px 3px 0 var(--ink)}.btn.big{font-size:1.5rem;padding:.8rem 1.6rem}.btn.accent{background:var(--accent)}
.topbar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
padding:.5rem 1rem;background:var(--paper);border-bottom:3px solid var(--ink)}
.brand{display:flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;font-size:1.5rem}.brand img{width:40px}
.ca{display:flex;align-items:center;gap:.4rem;border:2px dashed var(--ink);border-radius:var(--r);padding:.15rem .6rem;max-width:100%}
.ca code{font-family:monospace;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
nav{display:flex;gap:.4rem}
.hero{text-align:center;margin-top:1.5rem}
.hero h1{font-size:clamp(4rem,14vw,9rem);margin:0;line-height:1;text-shadow:6px 6px 0 var(--accent)}
.tag{font-size:1.6rem;margin:.3rem 0 1rem}
.hero-img{width:100%;max-width:820px;border:4px solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:8px 9px 0 var(--ink)}
.ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.wobble{animation:wob 2.4s ease-in-out infinite}@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.checks{list-style:none;padding:0}.checks li{margin:.6rem 0}.ph{background:var(--accent);padding:0 .3rem;color:var(--ink)}
.small{font-size:1rem;opacity:.75}.center{text-align:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.stat{text-align:center}.big-num{font-size:3.5rem}
.grid3 .card:nth-child(2),.steps .card:nth-child(even),.gallery .card:nth-child(even),.road .card:nth-child(even){transform:rotate(1.5deg)}
.grid3 .card:nth-child(odd),.steps .card:nth-child(odd),.gallery .card:nth-child(odd),.road .card:nth-child(odd){transform:rotate(-1deg)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.steps h3{margin:.3rem 0}
.n{display:inline-grid;place-items:center;width:46px;height:46px;border:3px solid var(--ink);border-radius:50%;background:var(--accent);font-family:'Permanent Marker'}
.chart-box{min-height:320px;display:grid;place-content:center;text-align:center;font-size:2rem;border-style:dashed}
.chart-box iframe{width:100%;height:500px;border:0}
.listings{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.2rem}
.sword-btn{background:none;border:0;cursor:pointer;width:260px;max-width:80%}.sword-btn img{width:100%;transition:transform .1s}
.sword-btn.swing img{animation:swing .25s}@keyframes swing{0%{transform:rotate(0)}40%{transform:rotate(-14deg) scale(1.06)}100%{transform:rotate(0)}}
.counter{font-size:2.4rem;margin:.2rem}
.slash{position:fixed;pointer-events:none;font-family:'Permanent Marker';font-size:1.8rem;animation:up .8s forwards;z-index:99}
@keyframes up{to{transform:translateY(-70px) rotate(-10deg);opacity:0}}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:1.5rem}
.gallery figure{margin:0;padding:.6rem}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--ink);border-radius:6px}
figcaption{text-align:center;font-size:1.05rem;margin-top:.4rem}
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.road h3{margin-top:0}
details{margin:.9rem 0}summary{cursor:pointer;font-size:1.3rem}
footer{border-top:3px solid var(--ink);padding:2rem 1rem;text-align:center;max-width:900px;margin:0 auto;font-size:1rem}.foot-logo{width:80px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) scale(0);background:var(--accent);border:3px solid var(--ink);
border-radius:var(--r);padding:.4rem 1rem;font-family:'Permanent Marker';transition:transform .2s;z-index:100}#toast.on{transform:translateX(-50%) scale(1)}
.reveal{opacity:0;transform:translateY(30px);transition:.6s}.reveal.in{opacity:1;transform:none}
@media(max-width:820px){.grid3,.steps,.road{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}nav{width:100%;justify-content:center}.ca{order:3;width:100%;justify-content:center}}
@media(max-width:480px){.grid3,.steps,.road{grid-template-columns:1fr}h2{font-size:2rem}.btn.big{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.intro-wrap{margin-top:1.2rem}.intro-frame{position:relative;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:8px 9px 0 var(--ink);background:#fffdf7}
#intro{display:block;width:100%;aspect-ratio:16/9}
#intro-cta{position:absolute;left:0;right:0;bottom:6%;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:.4s;pointer-events:none}
#intro-cta.on{opacity:1;transform:none;pointer-events:auto}.intro-ctrl{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.8rem}
@media(max-width:600px){#intro-cta .btn.big{font-size:.9rem;padding:.4rem .8rem}#intro-cta{bottom:3%}}

.game-frame{position:relative;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:8px 9px 0 var(--ink);background:#2b2d5c;user-select:none}
#game{display:block;width:100%;aspect-ratio:16/9;cursor:crosshair}
.g-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;padding:1rem}.g-over[hidden],#g-hud[hidden]{display:none}
.g-card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:1rem 1.4rem;max-width:520px;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.g-tag{font-family:'Permanent Marker';color:#e63946;margin:0}.g-row{display:flex;gap:1rem;align-items:center;text-align:left;margin:.6rem 0}
.g-row img{width:84px;height:84px;border-radius:50%;border:3px solid var(--ink)}#g-title{font-size:2rem;margin:.2rem 0}#g-title.win{color:#2bb673}#g-title.fail{color:#e63946}
.g-stars{font-size:2.2rem;color:#ffb400;margin:0;letter-spacing:.2em}
#g-hud{position:absolute;right:10px;bottom:10px;display:flex;gap:.5rem;align-items:center}#g-ammo{color:#ffd400;font-size:1.1rem;letter-spacing:.2em;margin-right:.4rem}
#g-hud .btn{display:none}@media(pointer:coarse){#g-hud .btn{display:inline-block;font-size:.8rem;padding:.25rem .6rem;touch-action:none}}#g-hud .btn[hidden]{display:none!important}
#g-reload{display:inline-block!important}#g-reload[hidden]{display:none!important}
.g-missions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.6rem 0 1rem}.g-missions .btn{font-size:.9rem}.g-missions .btn.on{background:var(--ink);color:#ffd400}.g-missions .btn:disabled{opacity:.5;cursor:not-allowed}.g-badges{margin:.2rem 0;font-weight:700}
.g-ctrl{display:flex;justify-content:flex-end;margin-top:.8rem}.locked{margin-top:1rem;opacity:.75}
@media(max-width:600px){.g-card{padding:.6rem .8rem;font-size:.95rem}.g-row img{width:56px;height:56px}#g-title{font-size:1.4rem}.g-card .btn.big{font-size:1rem}}

.tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.tabs .btn.on{background:var(--ink);color:#ffd400}#tab-sniper[hidden],#tab-arcade[hidden]{display:none}
#arcade{display:block;width:100%;aspect-ratio:16/9;cursor:crosshair;touch-action:none}
.a-touch{position:absolute;right:8px;top:12%;display:none;flex-direction:column;gap:.35rem}@media(pointer:coarse){.a-touch{display:flex}.a-touch .btn{font-size:.85rem;padding:.1rem .4rem;box-shadow:2px 2px 0 var(--ink)}}
.picker{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;width:min(560px,94vw);animation:pickup .45s ease-out}.picker[hidden]{display:none}
.picker .g-card{position:relative;max-width:none}.pick-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem}.pick-x{position:absolute;right:.6rem;top:.4rem;border:0;background:none;font-size:1.2rem;cursor:pointer}
@keyframes pickup{from{transform:translate(-50%,120%)}to{transform:translate(-50%,0)}}
@media(max-width:600px){.pick-row .btn.big{font-size:1rem;padding:.45rem .8rem}}