*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:#10131a;color:#e8ecf4;text-align:center}
header{padding:18px 5vw;background:#171c27;border-bottom:1px solid #262d3d;text-align:left}header a{color:#e8ecf4;text-decoration:none;font-weight:700;font-size:20px}
main{padding:24px 5vw;max-width:720px;margin:0 auto}h1{font-size:24px;margin:8px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.card{display:block;padding:22px 10px;background:#1b2231;border:1px solid #2a3348;border-radius:12px;color:#e8ecf4;text-decoration:none}
.card b{display:block;font-size:18px;margin-bottom:6px}.card span{color:#8b96ad;font-size:13px}
.card:hover{border-color:#5b8cff}
button{background:#5b8cff;color:#fff;border:0;border-radius:8px;padding:9px 16px;font-size:15px;cursor:pointer;margin:8px 4px}
canvas{background:#0b0e14;border:1px solid #2a3348;border-radius:8px;max-width:100%;touch-action:none}
.score{margin:10px 0;color:#8b96ad}
footer{padding:20px;color:#6b768d;font-size:12px}