:root{--bg:#0b0618;--bg2:#1a0b33;--ink:#f3eaff;--dim:#a99bc9;--pink:#ff4fd8;--cyan:#38e8ff;--green:#39ff88;--yellow:#ffe14f;
--pixel:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% -10%,#3a1470 0%,var(--bg2) 35%,var(--bg) 75%) fixed;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body.home::before{content:"";position:fixed;left:-50%;right:-50%;bottom:0;height:45vh;pointer-events:none;z-index:0;
background-image:linear-gradient(rgba(255,79,216,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,216,.35) 1px,transparent 1px);
background-size:48px 48px;transform:perspective(320px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
a{color:var(--cyan)}
.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:28px 18px 60px}
.center{text-align:center;padding-top:18vh}
header.hero{text-align:center;margin:10px 0 34px}
.logo{font-family:var(--pixel);font-weight:900;letter-spacing:.12em;font-size:clamp(2.1rem,7vw,4rem);margin:0;color:#fff;
text-shadow:0 0 6px var(--pink),0 0 18px var(--pink),0 0 42px #b02bff;animation:flicker 6s infinite}
.logo .joy{display:inline-block;animation:bob 2.4s ease-in-out infinite;text-shadow:none}
.tag{font-family:var(--pixel);color:var(--cyan);letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;margin:.8em 0 0;text-shadow:0 0 8px rgba(56,232,255,.6)}
.insert{display:inline-block;margin-top:14px;font-family:var(--pixel);color:var(--yellow);font-size:.8rem;letter-spacing:.25em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.75}95%{opacity:1}96%{opacity:.6}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{--accent:var(--pink);position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#1d1036,#120a24);border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 0 0 1px #000,0 10px 30px rgba(0,0,0,.45);transition:transform .15s ease,box-shadow .15s ease}
.card:hover,.card:focus-visible{transform:translateY(-4px) scale(1.015);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent),0 14px 34px rgba(0,0,0,.5);outline:none}
.card .art{aspect-ratio:16/10;background:#000;border-bottom:2px solid color-mix(in srgb,var(--accent) 40%,transparent);display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.card .art img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h2{font-family:var(--pixel);margin:0;font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.card p{margin:0;color:var(--ink);line-height:1.35}
.card .controls{font-family:var(--pixel);font-size:.75rem;color:var(--dim)}
.card .play{margin-top:auto;padding-top:10px}
.btn{display:inline-block;font-family:var(--pixel);font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#12051f;background:var(--accent,var(--pink));
border:0;border-radius:10px;padding:10px 18px;box-shadow:0 4px 0 rgba(0,0,0,.45);cursor:pointer;font-size:.95rem}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.soon{opacity:.55;border-style:dashed;pointer-events:none}
footer{text-align:center;color:var(--dim);font-size:.8rem;margin-top:40px;font-family:var(--pixel)}
/* ---------- game pages ---------- */
body.game{overscroll-behavior:none}
.gbar{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:820px;margin:0 auto;padding:12px 14px}
.back{font-family:var(--pixel);color:var(--cyan);text-decoration:none;font-weight:700;letter-spacing:.06em}
.back:hover{text-shadow:0 0 8px var(--cyan)}
.gtitle{font-family:var(--pixel);font-weight:900;letter-spacing:.14em;margin:0;font-size:1.3rem;text-transform:uppercase}
.stats{display:flex;gap:14px;font-family:var(--pixel);font-size:.95rem}
.stats b{color:var(--yellow)}
.stage{position:relative;max-width:820px;margin:0 auto;padding:0 12px}
canvas{display:block;width:100%;height:auto;margin:0 auto;border-radius:10px;touch-action:none;background:#000;box-shadow:0 0 0 3px #2a1850,0 0 26px rgba(176,43,255,.35)}
.overlay{position:absolute;inset:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
font-family:var(--pixel);background:rgba(5,2,12,.62);border-radius:10px;pointer-events:none;padding:16px}
.overlay[hidden]{display:none}
.overlay h2{margin:0;font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:.12em}
.overlay p{margin:0;color:var(--dim)}
.overlay .btn{pointer-events:auto}
.help{max-width:820px;margin:10px auto 0;padding:0 14px;text-align:center;color:var(--dim);font-size:.85rem;font-family:var(--pixel)}
.pad{display:none;max-width:820px;margin:14px auto 24px;padding:0 14px;user-select:none;-webkit-user-select:none}
.pad button{font-size:1.6rem;width:64px;height:64px;border-radius:14px;border:2px solid #3b2470;background:#1c1036;color:var(--ink);touch-action:manipulation;box-shadow:0 4px 0 #000}
.pad button:active,.pad button.on{background:#3b2470;transform:translateY(2px);box-shadow:0 2px 0 #000}
.pad .row{display:flex;justify-content:center;gap:10px;margin:6px 0}
.pad .small{width:auto;height:46px;padding:0 16px;font-size:.9rem;font-family:var(--pixel)}
@media (pointer:coarse),(max-width:700px){.pad{display:block}.help .kbd{display:none}}
canvas.square{max-width:min(100%,68vh);aspect-ratio:1/1}
canvas.wide{max-width:min(100%,calc(64vh * 1.6));aspect-ratio:8/5}
.overlay.sq{left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 24px),68vh);aspect-ratio:1/1;inset-block:0 auto}
.overlay.wd{left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 24px),calc(64vh * 1.6));aspect-ratio:8/5;inset-block:0 auto}
.pad button.thrust{width:110px}
.overlay .btn[hidden]{display:none}
@media (max-width:480px){.gbar{padding:10px}.gtitle{font-size:1rem;letter-spacing:.08em}.stats{font-size:.8rem;gap:8px}.back{font-size:.85rem}}