*{box-sizing:border-box}
:root{--bg:#07111f;--panel:#0d1b2e;--panel2:#12243d;--line:#263b59;--text:#edf5ff;--muted:#9db0ca;--accent:#60a5fa;--good:#34d399;--bad:#fb7185}
html,body{margin:0;background:radial-gradient(circle at 20% 0,#10284a 0,#07111f 42%);color:var(--text);font:16px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%}
a{color:inherit}.wrap{max-width:1120px;margin:auto;padding:28px 18px 60px}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:end;margin:8px 0 24px}.hero h1{font-size:clamp(34px,6vw,64px);margin:0;line-height:.95}.hero p{color:var(--muted);max-width:580px}
.badge{display:inline-block;padding:6px 10px;border:1px solid #315078;border-radius:999px;color:#b9d8ff;font-size:13px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{display:block;text-decoration:none;background:linear-gradient(180deg,#10223b,#0b1829);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.18s transform,.18s border-color}
.card:hover{transform:translateY(-4px);border-color:#4b77b1}.card img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;background:#0b1727}
.cardBody{padding:16px}.card h2{margin:0 0 6px;font-size:22px}.card p{margin:0;color:var(--muted);min-height:44px}.meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;color:#bfd6f5}
.gameTop{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}.gameTop h1{margin:0}.back{text-decoration:none;color:#b9d8ff}
.panel{background:rgba(13,27,46,.94);border:1px solid var(--line);border-radius:18px;padding:14px}
.hud{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.pill{background:#12243d;border:1px solid #2a4568;border-radius:12px;padding:8px 12px;font-weight:700}.pill span{color:#8fc2ff}
canvas{display:block;width:100%;height:auto;max-width:760px;margin:auto;background:#07101d;border:1px solid #315078;border-radius:14px;touch-action:none}
.controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
button{border:0;border-radius:11px;background:#2563eb;color:white;font:inherit;font-weight:800;padding:11px 15px;cursor:pointer;min-height:44px}button.secondary{background:#1c3150}button:active{transform:translateY(1px)}
.help{text-align:center;color:var(--muted);margin:10px 0 0}.source{font-size:13px;color:#7890af;text-align:center;margin-top:12px}.source a{color:#9bc9ff}
.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px;justify-content:center;margin-top:10px}.dpad button{padding:0}.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{align-items:start;flex-direction:column}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.wrap{padding:20px 12px 44px}.card p{min-height:0}}