:root { --bg:#14102a; --panel:#221c44; --ink:#f4f1ff; --muted:#a49fc8; --gold:#ffd23f; --pink:#ff5aaa; --mint:#6ff5a8; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 Nunito, system-ui, sans-serif; }
a { color: var(--gold); }
.top { display:flex; justify-content:space-between; align-items:center; padding:16px clamp(16px,5vw,64px); flex-wrap:wrap; gap:8px; }
.logo { font-family:"Press Start 2P", monospace; font-size:20px; color:var(--gold); text-decoration:none; letter-spacing:2px; }
nav a { margin-left:18px; color:var(--ink); text-decoration:none; font-weight:700; }
section { padding:32px clamp(16px,5vw,64px); max-width:1100px; margin:0 auto; }
h1 { font-size:clamp(28px,4.5vw,48px); line-height:1.15; margin:0 0 16px; font-weight:900; }
h2 { font-family:"Press Start 2P", monospace; font-size:18px; color:var(--pink); margin:0 0 12px; }
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; min-height:60vh; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } }
.btn { display:inline-block; background:var(--gold); color:#1b1440; border:0; border-radius:12px; padding:12px 22px; font:900 16px Nunito, sans-serif; cursor:pointer; text-decoration:none; box-shadow:0 4px 0 #b8901d; }
.btn.small { padding:8px 14px; font-size:14px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.device { width:min(320px,80vw); aspect-ratio:1/1.55; margin:auto; background:linear-gradient(160deg,#ff7ab8,#7a5cff); border-radius:28px; padding:22px; box-shadow:0 20px 60px #0008; display:flex; flex-direction:column; gap:22px; }
.screen { flex:0 0 auto; aspect-ratio:240/135; background:linear-gradient(#5aaaff,#ffd6aa); border-radius:8px; border:6px solid #1b1440; position:relative; overflow:hidden; }
.screen .dino { position:absolute; left:14%; bottom:8%; font-size:40px; animation:hop 1.2s infinite; }
.screen .score { position:absolute; right:8px; top:6px; font:10px "Press Start 2P"; color:#3c2850; }
@keyframes hop { 0%,60%,100% { transform:translateY(0) } 30% { transform:translateY(-40%) } }
.buttons { display:flex; justify-content:space-between; padding:0 18px; }
.buttons i { width:56px; height:56px; border-radius:50%; background:var(--gold); box-shadow:0 5px 0 #b8901d; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.card { background:var(--panel); border-radius:16px; overflow:hidden; }
.cover { height:110px; display:flex; align-items:flex-end; padding:12px 16px; }
.cover .title { font:14px "Press Start 2P"; color:#fff; text-shadow:2px 2px 0 #0006; }
.card .body { padding:14px 16px 18px; }
.card h3 { margin:0; font-size:20px; } .tagline { margin:4px 0; font-weight:700; color:var(--gold); }
ol li { margin:6px 0; }
footer { text-align:center; padding:40px 16px; color:var(--muted); }