:root{--bg:#0f0f12;--fg:#e8e8f0;--muted:#9aa1a9;--card:#17171c;--accent:#7aa2f7;}
*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
background:linear-gradient(180deg,#0b0b0e, #13131a 60%, #0b0b0e);color:var(--fg)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:800}
h1{font-size:28px;margin:0} .muted{color:var(--muted)}
.search{margin:16px 0}
.search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a2a33;background:#101017;color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #222330;border-radius:16px;padding:16px;display:flex;gap:10px;flex-direction:column;min-height:180px}
.card h3{margin:0 0 8px 0;font-size:18px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:12px;color:#d7ddff;background:#1b1b25;border:1px solid #2a2a3a;padding:4px 8px;border-radius:999px}
.footer{opacity:.8;text-align:center;padding:24px}
.play-wrap{display:grid;grid-template-columns:1fr 320px;gap:20px}
.canvas-wrap{background:#0b0b12;border:1px solid #232333;border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:420px}
.sidebar{background:var(--card);border:1px solid #222330;border-radius:16px;padding:16px;height:100%}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #2a2a33;background:#151521;color:var(--fg)}
.btn:hover{filter:brightness(1.08)}
.kbd{padding:2px 6px;border:1px solid #2a2a33;border-bottom-width:3px;border-radius:6px;background:#11111a;font-size:12px}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.score{font-weight:700}
canvas{image-rendering: pixelated}
@media(max-width:960px){.play-wrap{grid-template-columns:1fr}}