*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#0d0b1f radial-gradient(ellipse at top,#2a1a5e 0%,#0d0b1f 60%) fixed;color:#e9e6ff;font-family:Rubik,system-ui,sans-serif;padding:0 16px 40px}
body:before{content:"";position:fixed;inset:auto 0 0 0;height:40vh;background:linear-gradient(transparent,#ff2bd633),repeating-linear-gradient(90deg,#ff2bd655 0 2px,transparent 2px 60px);transform:perspective(300px) rotateX(60deg);transform-origin:bottom;pointer-events:none;z-index:-1}
.scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,#0003 2px 4px);z-index:10}
header{text-align:center;padding:48px 0 28px}
.logo{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:clamp(44px,11vw,96px);line-height:1;letter-spacing:4px}
.logo .sky{color:#33e1ff;text-shadow:0 0 18px #33e1ff,4px 4px 0 #1a3a8f}
.logo .pro{color:#ff2bd6;text-shadow:0 0 18px #ff2bd6,4px 4px 0 #6a0f5c}
.logo small{display:block;font-size:.3em;letter-spacing:.6em;color:#ffd84a;text-shadow:0 0 10px #ffb800;margin-top:10px}
.tag{max-width:560px;margin:18px auto;color:#bdb6f0}
.insert{font-family:'Pixelify Sans',monospace;color:#ffd84a;animation:blink 1.1s steps(2) infinite;font-size:18px}
@keyframes blink{50%{opacity:0}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:1100px;margin:0 auto}
.card{background:#17143a;border:3px solid var(--c);border-radius:6px;overflow:hidden;box-shadow:0 0 0 3px #0d0b1f,0 0 24px color-mix(in srgb,var(--c) 45%,transparent),8px 8px 0 #000;display:flex;flex-direction:column;animation:pop .5s var(--d) both;transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
@keyframes pop{from{opacity:0;transform:translateY(20px)}}
.art{height:150px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 30%,#17143a) 0 12px,#17143a 12px 24px);font-size:72px;image-rendering:pixelated}
.art span{filter:drop-shadow(4px 4px 0 #000)}
.body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
h3{font-family:'Pixelify Sans',monospace;margin:0;font-size:28px;color:var(--c);text-shadow:2px 2px 0 #000}
.tags span{display:inline-block;font-size:12px;border:1px solid #fff4;border-radius:3px;padding:2px 7px;margin-right:6px;color:#cfc9ff}
.body p{margin:0;color:#cfc9ff;line-height:1.45;flex:1}
.play{align-self:flex-start;font-family:'Pixelify Sans',monospace;font-size:20px;font-weight:700;text-decoration:none;color:#0d0b1f;background:var(--c);padding:10px 22px;border-radius:3px;box-shadow:4px 4px 0 #000;transition:transform .1s}
.play:hover,.play:focus{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;outline:none}
.play:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.soon{max-width:1100px;margin:36px auto 0;text-align:center;border:2px dashed #ffffff33;border-radius:6px;padding:18px;color:#bdb6f0}
.soon h2{font-family:'Pixelify Sans',monospace;color:#ffd84a;margin:0 0 6px}
footer{text-align:center;color:#7a74b0;margin-top:32px;font-size:14px}