/* Template pixel. */
:root{--fb:'Rubik';--fh:'Handjet';--bg:#FFF3D6;--ink:#2D1B4E;--ink2:#5E4E7E;--line:#2D1B4E;--acc:#FF4D6D;--blue:#3A86FF;--yel:#FFBE0B;--grn:#06D6A0;--nav-bg:#FFF3D6;--nav-solid:#FFF3D6;--demo-bg:#2D1B4E;--r-in:0;--po-bg:#2D1B4E;--po-acc:#FFBE0B}
.nav{border-bottom:4px solid var(--ink)}
.brand>span{font-family:var(--fh);font-size:28px;font-weight:800;line-height:1}
.brand small{font-family:var(--fb);color:var(--acc);opacity:1;font-weight:700;margin-top:4px}
.brand img{border-radius:0;border:3px solid var(--ink)}
.pixel .btn{border-radius:0;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.pixel .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.pixel .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.pixel .cta,.pixel .b1,form .btn{background:var(--yel);color:var(--ink)}
.pixel .b2{background:#fff;color:var(--ink)}
h1,h2,h3{font-family:var(--fh),var(--fb);font-weight:800}
.kick{display:inline-block;background:var(--ink);color:var(--yel);font-family:var(--fh);font-size:20px;padding:0 12px;line-height:1.6}
.sec-h h2{font-size:54px;line-height:1.05}

/* hero */
.hero{padding:40px 0 70px;background:linear-gradient(var(--bg),#FFE7B0)}
.screen{border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:linear-gradient(#BDE7FF,#E6F6FF);position:relative;overflow:hidden}
.hud{display:flex;flex-wrap:wrap;background:var(--ink);color:#fff}
.hud div{flex:1;min-width:110px;display:flex;align-items:baseline;gap:10px;padding:10px 18px;border-inline-start:3px dashed rgba(255,255,255,.2)}.hud div:first-child{border:0}
.hud b{font-family:var(--fh);font-size:34px;color:var(--yel);line-height:1}.hud div:nth-child(2) b{color:var(--grn)}.hud div:nth-child(3) b{color:var(--acc)}
.hud span{font-size:14px;opacity:.85}
.stage{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:44px 40px 70px}
.pill{display:inline-block;background:#fff;border:3px solid var(--ink);font-weight:700;font-size:14px;padding:4px 12px;box-shadow:3px 3px 0 var(--ink)}
.hero h1{font-size:84px;line-height:.95;margin:20px 0 16px}
.hero h1 em{font-style:normal;color:var(--acc);text-shadow:4px 4px 0 var(--ink)}
.hero-t>p{font-size:18px;color:var(--ink2);max-width:520px;margin:0}
.hero-b{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.frame{position:relative}
.shot{aspect-ratio:4/3;background:center/cover;border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(45,27,78,.35);image-rendering:pixelated}
.item{position:absolute;width:110px;height:110px;bottom:-30px;inset-inline-start:-30px;background:center/cover;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);animation:bob 1.6s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.item{animation:none}}
.ground{position:absolute;inset:auto 0 0;height:34px;background:linear-gradient(var(--grn) 0 10px,var(--ink) 10px 14px,#8B5A2B 14px);background-size:100% 100%}
.ground::before{content:"";position:absolute;inset:14px 0 0;background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(0,0,0,.18) 24px 28px)}

/* cards */
.card{background:#fff;border:3px solid var(--ink);border-radius:0;padding:22px;box-shadow:6px 6px 0 var(--ink)}
.lvls{grid-template-columns:repeat(4,1fr);gap:24px}
.lvls .card{padding:0 0 22px;transition:transform .12s,box-shadow .12s}
.lvls .card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.lv-h{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:3px solid var(--ink);background:var(--acc)}
.k1 .lv-h{background:var(--blue)}.k2 .lv-h{background:var(--yel)}.k3 .lv-h{background:var(--grn)}
.lv-h .ag{font-family:var(--fh);font-size:24px;font-weight:800;color:#fff;text-shadow:2px 2px 0 var(--ink)}
.lives{display:flex;gap:4px}.lives i{width:12px;height:12px;background:#fff;border:2px solid var(--ink)}
.lvls h3{font-size:32px;margin:14px 16px 4px;line-height:1.1}.lvls p{margin:0 16px;color:var(--ink2)}
.slots{grid-template-columns:repeat(3,1fr);gap:24px}
.slots .card{display:flex;gap:14px;align-items:flex-start}
.slots .ic{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--yel);border:3px solid var(--ink)}
.slots h3{font-size:28px;line-height:1.1;margin-bottom:4px}.slots p{margin:0;color:var(--ink2)}
.awards span,.soc a{border:3px solid var(--ink);border-radius:0}

/* sections */
.achv{background:#E5DBFF;border-block:4px solid var(--ink)}
.stg{gap:24px}.pl{border:3px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--ink)}.pl .ph{height:220px;border-bottom:3px solid var(--ink);image-rendering:pixelated}
.pl b{font-family:var(--fh);font-size:28px;margin-top:4px}.pl span{color:var(--acc);font-weight:700}
.tl{align-items:end}
.tl>div{border:3px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink)}
.tl>div:nth-child(1){margin-top:96px}.tl>div:nth-child(2){margin-top:72px}.tl>div:nth-child(3){margin-top:48px}.tl>div:nth-child(4){margin-top:24px}
.tl small{font-family:var(--fh);font-size:26px;color:var(--blue);line-height:1}
.tl h3{font-size:28px}
.tl .now{background:var(--acc)}.tl .now small{color:var(--yel)}.tl .now p{color:#FFE4EA}
.why{background:#CFE3FF;border-block:4px solid var(--ink)}
.why-v{border:4px solid var(--ink);border-radius:0;box-shadow:8px 8px 0 var(--ink);image-rendering:pixelated}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}.ticks li{display:flex;gap:12px}
.ticks .i{width:28px;height:28px;padding:5px;background:var(--grn);border:2px solid var(--ink);color:var(--ink)}
.ticks b{display:block;font-family:var(--fh);font-size:24px;line-height:1.1}.ticks span{color:var(--ink2)}
.info{background:#fff;border-block:4px solid var(--ink)}
.gal{gap:16px}.gal div{border:3px solid var(--ink);border-radius:0;image-rendering:pixelated}
.faqs details{border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink)}.faqs summary::after{color:var(--acc);font-weight:800}
.pixel .portal{--po-bg:#2D1B4E;--po-acc:#FFBE0B}.po-card{border-radius:0;border:4px solid #fff}.po-row div{border-radius:0}.po-btn{border-radius:0;background:var(--acc)}
.bk{background:var(--ink);color:#fff;background-image:radial-gradient(#fff 1.5px,transparent 2px);background-size:46px 46px}
.bk .sec-h h2{color:#fff}.bk .sec-h p{color:#D8CFF0}.bk .kick{background:var(--yel);color:var(--ink)}
.bk form{color:var(--ink);box-shadow:8px 8px 0 var(--acc)}
input,select,textarea{border:3px solid var(--ink);border-radius:0}
footer{background:var(--ink);color:#D8CFF0;border-top:6px solid var(--grn)}

@media (max-width:1100px){.lvls{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
 .hero{padding:22px 0 50px}.screen{box-shadow:6px 6px 0 var(--ink)}
 .stage{grid-template-columns:1fr;padding:26px 18px 66px;gap:40px}.hero h1{font-size:56px}
 .hud div{padding:8px 12px;min-width:90px}.hud b{font-size:26px}.hud span{font-size:12px}
 .item{width:80px;height:80px;inset-inline-start:-8px;bottom:-24px}
 .sec-h h2{font-size:42px}.lvls,.slots{grid-template-columns:1fr}
 .tl>div:nth-child(n){margin-top:0}
}
