@font-face{font-family:"Poxast";src:url("./Poxast-subset.woff2") format("woff2");font-display:swap}
:root {
--bg:#1a1e16;
--panel:#b8c78d;
--panel2:#9cab72;
--ink:#182015;
--ink2:#344226;
--hi:#d8e8a8;
--mid:#718153;
--shadow:#0b0f09;
--logo-size: clamp(50px, 11vw, 90px);
--slot-w: clamp(40px, 9.2vw, 70px);
--slot-h: clamp(58px, 15vw, 96px);
--slot-gap: clamp(3px, 1.4vw, 10px);
}
* { box-sizing: border-box; }
html,body {
margin:0;
background:
linear-gradient(rgba(255,255,255,.015) 50%,transparent 50%) 0 0/100% 4px,
radial-gradient(circle at 50% 0%,#2a3221 0,#1a1e16 55%,#11140f 100%);
color:var(--panel);
font-family:"Courier New",monospace;
min-height:100%;
overflow-x:hidden;
}
body { min-height:100vh; }
.shell { width:min(100%,980px); margin:0 auto; padding:18px 14px 40px; }
.topbar { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:1.5px; opacity:.8; margin-bottom:10px; }
.led { display:inline-block; width:7px; height:7px; background:#d6e49e; box-shadow:0 0 0 2px #3c482e,0 0 12px #cfdf96; margin-right:6px; }
.screen {
position:relative;
background:var(--panel);
border:8px solid #39452d;
box-shadow:0 0 0 4px #0d110b,0 12px 0 #0a0d08,inset 0 0 0 5px rgba(24,32,21,.18);
padding:18px 12px 22px;
overflow:hidden;
min-height:460px;
}
.screen:before {
content:"";
position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(rgba(24,32,21,.08) 1px,transparent 1px) 0 0/100% 4px,
linear-gradient(90deg,rgba(24,32,21,.025) 1px,transparent 1px) 0 0/4px 100%;
mix-blend-mode:multiply;
}
.screen:after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 60px rgba(24,32,21,.18); }
.hero { position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.statusline { font-size:11px; color:var(--ink2); letter-spacing:1.5px; margin-bottom:6px; text-transform:uppercase; }
.brand-stage {
position:relative;
width:min(94vw, 700px);
height:290px;
margin-top:6px;
overflow:visible;
}
.brand-row {
position:absolute;
left:50%;
transform:translateX(-50%);
display:grid;
grid-template-columns:repeat(6, var(--slot-w));
gap:var(--slot-gap);
width:max-content;
}
.brand-row.top { top:28px; }
.brand-row.bottom { top:138px; }
.slot {
position:relative;
width:var(--slot-w);
height:var(--slot-h);
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
}
.logo-letter, .c-piece, .p-assembly {
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:var(--ink);
font-family:"Poxast","Courier New",monospace;
font-size:var(--logo-size);
line-height:1;
letter-spacing:0;
text-transform:uppercase;
image-rendering: pixelated;
filter: drop-shadow(4px 4px 0 rgba(24,32,21,.18));
text-shadow:
3px 3px 0 rgba(113,129,83,.68),
6px 6px 0 rgba(52,66,38,.46);
user-select:none;
transform-style:preserve-3d;
will-change: transform;
}
.logo-letter.tap, .c-piece.tap { animation:tapJolt .36s steps(6,end); }
@keyframes tapJolt {
0%{transform:translateY(0) rotate(0deg)}
35%{transform:translateY(-10px) rotate(-4deg)}
70%{transform:translateY(2px) rotate(2deg)}
100%{transform:translateY(0) rotate(0deg)}
}
.c-slot::after {
content:"";
position:absolute;
inset:10% 20%;
border:2px dashed rgba(24,32,21,.08);
pointer-events:none;
opacity:.5;
}
.c-piece {
position:absolute;
left:0; top:0;
margin:0;
width:var(--slot-w);
height:var(--slot-h);
backface-visibility:hidden;
z-index:8;
}
.c-reel-window {
position:absolute;
overflow:hidden;
z-index:15;
pointer-events:none;
perspective:520px;
display:none;
}
.c-reel-window.active { display:block; }
.c-reel-copy {
position:absolute;
left:0;
width:100%;
height:var(--slot-h);
display:flex;
align-items:center;
justify-content:center;
color:var(--ink);
font-family:"Poxast","Courier New",monospace;
font-size:var(--logo-size);
line-height:1;
text-transform:uppercase;
filter:drop-shadow(4px 4px 0 rgba(24,32,21,.18));
text-shadow:3px 3px 0 rgba(113,129,83,.68),6px 6px 0 rgba(52,66,38,.46);
transform-style:preserve-3d;
backface-visibility:hidden;
will-change:transform,top;
}

.c-drum {
position:absolute;
inset:0;
z-index:18;
pointer-events:none;
display:none;
perspective:520px;
overflow:visible;
}
.c-drum.active { display:block; }
.c-drum-piece {
position:absolute;
width:var(--slot-w);
height:var(--slot-h);
display:flex;
align-items:center;
justify-content:center;
color:var(--ink);
font-family:"Poxast","Courier New",monospace;
font-size:var(--logo-size);
line-height:1;
text-transform:uppercase;
filter:drop-shadow(4px 4px 0 rgba(24,32,21,.18));
text-shadow:3px 3px 0 rgba(113,129,83,.68),6px 6px 0 rgba(52,66,38,.46);
transform-style:preserve-3d;
backface-visibility:hidden;
will-change:left,top,transform;
}

.p-slot { overflow:visible; }
.p-assembly { position:relative; display:block; }
.p-final { position:absolute; inset:0; opacity:1; transition:opacity .12s linear; }
.p-final { position:absolute; inset:0; opacity:1; transition:opacity .12s linear; }
.p-assembly::before {
content:"";
position:absolute;
inset:-6% -4% -6% -4%;
border:2px dashed rgba(24,32,21,.08);
opacity:.35;
pointer-events:none;
}
.p-pixel {
position:absolute;
width:10px;
height:10px;
background:var(--ink);
box-shadow:2px 2px 0 rgba(113,129,83,.8),4px 4px 0 rgba(52,66,38,.5);
will-change:transform;
transform:translate(0,0) scale(1);
opacity:0;
}
.p-pixel.scatter, .p-pixel.reform { opacity:1; }
.p-pixel.scatter { animation:pScatter 1s cubic-bezier(.2,.7,.2,1) forwards; }
.p-pixel.reform { animation:pReform 1.1s cubic-bezier(.2,.9,.25,1) forwards; }
@keyframes pScatter {
0%{ transform:translate(0,0) rotate(0deg) scale(1); }
65%{ transform:translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.92); }
82%{ transform:translate(calc(var(--dx) * .92), calc(var(--dy) * .92)) rotate(calc(var(--dr) * .82)) scale(.98); }
100%{ transform:translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.92); }
}
@keyframes pReform {
0%{ transform:translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.92); opacity:1; }
55%{ transform:translate(calc(var(--dx) * -.08), calc(var(--dy) * -.08)) rotate(-8deg) scale(1.05); opacity:1; }
82%{ transform:translate(6px, -4px) rotate(4deg) scale(.98); opacity:1; }
100%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:0; }
}
.rocket-slot::after {
content:"";
position:absolute;
left:50%; bottom:-10px;
width:42px; height:16px;
transform:translateX(-50%);
background:repeating-linear-gradient(90deg, rgba(24,32,21,.16) 0 5px, rgba(24,32,21,.04) 5px 10px);
opacity:.22;
pointer-events:none;
}
.rocket {
position:absolute;
width:54px;
height:88px;
left:0; top:0;
transform-origin:50% 76%;
z-index:12;
pointer-events:none;
filter: drop-shadow(4px 4px 0 rgba(24,32,21,.22));
}
.rocket-body {
position:absolute;
left:50%; top:14px;
width:24px; height:42px;
transform:translateX(-50%);
background:var(--ink);
box-shadow:4px 4px 0 rgba(113,129,83,.95),8px 8px 0 rgba(52,66,38,.55);
}
.rocket-nose {
position:absolute;
left:50%; top:0;
transform:translateX(-50%);
width:0; height:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom:18px solid var(--ink);
filter: drop-shadow(4px 4px 0 rgba(113,129,83,.95));
}
.rocket-fin { position:absolute; bottom:24px; width:14px; height:22px; background:var(--ink); }
.rocket-fin.left { left:6px; clip-path:polygon(100% 0,100% 100%,0 100%); box-shadow:3px 3px 0 rgba(113,129,83,.95); }
.rocket-fin.right { right:6px; clip-path:polygon(0 0,100% 100%,0 100%); box-shadow:3px 3px 0 rgba(113,129,83,.95); }
.rocket-window {
position:absolute;
left:50%; top:28px;
transform:translateX(-50%);
width:10px; height:10px;
border:2px solid var(--panel);
background:transparent;
}
.rocket-flame {
position:absolute;
left:50%; bottom:4px;
transform:translateX(-50%);
width:12px; height:18px;
opacity:0;
}
.rocket-flame::before, .rocket-flame::after { content:""; position:absolute; left:0; background:var(--hi); box-shadow:2px 2px 0 rgba(113,129,83,.7); }
.rocket-flame::before { width:12px; height:8px; top:0; }
.rocket-flame::after { width:8px; height:8px; left:2px; top:8px; }
.rocket.launching .rocket-flame { opacity:1; animation:flamePulse .12s steps(2,end) infinite; }
@keyframes flamePulse { 50%{ transform:translateX(-50%) scaleY(.58); } }
.blast-pixel {
position:absolute;
width:7px; height:7px;
background:var(--hi);
box-shadow:2px 2px 0 rgba(113,129,83,.6);
opacity:0;
transform:translate(-50%, -50%);
pointer-events:none;
}
.rocket.launching .blast-pixel.active { animation:blastTrail .55s linear forwards; }
@keyframes blastTrail {
0%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
100%{ opacity:0; transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.65); }
}
.tagline { margin-top:8px; font-weight:bold; color:var(--ink); font-size:clamp(12px,3vw,16px); letter-spacing:2px; text-transform:uppercase; }
.subtag { margin:7px 0 0; color:var(--ink2); font-size:11px; letter-spacing:1px; }
.press { margin-top:14px; display:inline-block; color:var(--ink); background:var(--hi); padding:8px 12px; border:4px solid var(--ink2); box-shadow:4px 4px 0 var(--ink); font-weight:900; font-size:12px; animation:blink 1.25s steps(2,end) infinite; }
@keyframes blink { 50%{ opacity:.45; } }
.section-title{font-size:14px;letter-spacing:2px;color:var(--panel);margin:30px 0 12px;text-transform:uppercase}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cart{position:relative;background:#3b442f;border:4px solid #11160e;box-shadow:6px 6px 0 #090c07;padding:8px 8px 10px;min-height:190px;transition:transform .12s steps(2,end)}
.cart:active,.cart:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #090c07}
.label{background:var(--panel);border:4px solid #20291a;padding:9px;color:var(--ink);min-height:148px;display:flex;flex-direction:column;justify-content:space-between}
.thumb{height:82px;border:3px solid var(--ink);background:
linear-gradient(90deg,transparent 47%,var(--ink) 47% 53%,transparent 53%),
linear-gradient(transparent 47%,var(--ink) 47% 53%,transparent 53%),var(--panel2);position:relative;overflow:hidden}
.thumb.pipe:before,.thumb.pipe:after{content:"";position:absolute;background:var(--ink)}
.thumb.pipe:before{width:62%;height:10px;left:0;top:34px;box-shadow:34px -22px 0 var(--ink)}
.thumb.pipe:after{width:10px;height:58%;left:58%;top:34px;box-shadow:-34px -22px 0 var(--ink)}
.cart h3{font-size:13px;letter-spacing:1px;margin:9px 0 4px}.meta{font-size:9px;color:var(--ink2)}
.play{margin-top:7px;border-top:2px dashed var(--ink2);padding-top:6px;font-size:10px;font-weight:bold}
.locked{opacity:.6}.locked .thumb{display:grid;place-items:center;font-size:32px}.locked .thumb:before{content:"?"}
.footer{margin-top:24px;text-align:center;font-size:10px;line-height:1.7;opacity:.8;letter-spacing:1px}
.controls{display:flex;justify-content:center;gap:22px;margin-top:18px;align-items:center}.pill{width:48px;height:16px;background:#0e120c;border-radius:0;transform:rotate(-14deg);box-shadow:3px 3px 0 #000}.ctrl{font-size:9px;letter-spacing:1px;color:#76835a}
@media (max-width:520px) {
.screen{min-height:420px;padding-inline:8px}
.brand-stage{height:260px}
.brand-row.top{top:28px}
.brand-row.bottom{top:132px}
.rocket{width:50px;height:82px}
.games{grid-template-columns:1fr}
.cart{min-height:auto}
.label{min-height:142px}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
.press{animation:none}
}

.cart-link{display:block;color:inherit;text-decoration:none}
.cart-link .label{position:relative}
.cart-link:focus-visible{outline:3px solid var(--hi);outline-offset:4px}
.cart.live::before{content:"LIVE";position:absolute;right:10px;top:8px;background:var(--hi);color:var(--ink);padding:2px 6px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:9px;font-weight:900;letter-spacing:1px;z-index:2}
.thumb.scooter{background:linear-gradient(to bottom,#bfcf8f 0 34%,#94a86b 34% 58%,#a89f69 58% 100%);overflow:hidden}
.thumb.scooter .sun{position:absolute;right:14px;top:10px;width:18px;height:18px;background:var(--hi);box-shadow:2px 2px 0 rgba(52,66,38,.35)}
.thumb.scooter .cloud{position:absolute;height:8px;background:rgba(216,232,168,.92);box-shadow:2px 2px 0 rgba(52,66,38,.2)}
.thumb.scooter .cloud:before,.thumb.scooter .cloud:after{content:"";position:absolute;background:inherit;height:8px}
.thumb.scooter .cloud-a{left:18px;top:14px;width:20px}.thumb.scooter .cloud-a:before{width:8px;left:-6px;top:2px}.thumb.scooter .cloud-a:after{width:10px;right:-6px;top:-2px}
.thumb.scooter .cloud-b{left:48px;top:20px;width:14px}.thumb.scooter .cloud-b:before{width:6px;left:-4px;top:2px}.thumb.scooter .cloud-b:after{width:8px;right:-5px;top:-2px}
.thumb.scooter .ocean{position:absolute;left:0;right:0;top:30px;height:18px;background:#7f9060}
.thumb.scooter .wave{position:absolute;top:34px;width:28px;height:4px;background:rgba(216,232,168,.55);box-shadow:0 8px 0 rgba(216,232,168,.45)}
.thumb.scooter .wave-a{left:14px}.thumb.scooter .wave-b{left:58px;width:22px}
.thumb.scooter .beach{position:absolute;left:0;right:0;bottom:0;height:28px;background:#9d9462;border-top:3px solid var(--ink2)}
.thumb.scooter .scooter-mark{position:absolute;left:38px;bottom:14px;width:24px;height:8px;border-top:3px solid var(--ink);border-right:3px solid var(--ink)}
.thumb.scooter .scooter-mark:before,.thumb.scooter .scooter-mark:after{content:"";position:absolute;bottom:-7px;width:8px;height:8px;border:3px solid var(--ink);background:#a89f69}
.thumb.scooter .scooter-mark:before{left:-6px}.thumb.scooter .scooter-mark:after{right:-10px}