:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#07111f;color:#f8fafc}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#173154,#07111f 58%)}
.game-shell{width:min(100%,520px);padding:28px;border:1px solid #334155;border-radius:22px;background:rgba(15,23,42,.94);box-shadow:0 24px 70px rgba(0,0,0,.42);text-align:center}
.eyebrow{margin:0 0 8px;color:#67e8f9;font-size:.76rem;font-weight:700;letter-spacing:.18em}
h1{margin:0;font-size:clamp(1.55rem,5vw,2.25rem)}
.status{min-height:28px;margin:14px 0 18px;color:#cbd5e1;font-weight:700}
.board{display:grid;grid-template-columns:repeat(2,minmax(90px,150px));justify-content:center;gap:12px}
.color{aspect-ratio:1;border:4px solid rgba(255,255,255,.24);border-radius:22px;cursor:pointer;box-shadow:inset 0 -10px 20px rgba(0,0,0,.24);transition:transform .12s,filter .12s,box-shadow .12s}
.color:active,.color.active{transform:scale(.94);filter:brightness(1.55);box-shadow:0 0 30px currentColor}
.green{background:#22c55e;color:#22c55e}.red{background:#ef4444;color:#ef4444}.yellow{background:#eab308;color:#eab308}.blue{background:#3b82f6;color:#3b82f6}
.start{margin-top:20px;padding:12px 24px;border:0;border-radius:999px;background:#06b6d4;color:#06202a;font-size:1rem;font-weight:800;cursor:pointer}
.start:disabled{opacity:.55;cursor:wait}
.help{margin:16px 0 0;color:#94a3b8;font-size:.9rem}
.game-over{animation:flash .3s ease}
@keyframes flash{50%{background:#7f1d1d}}
@media(max-width:420px){body{padding:10px}.game-shell{padding:20px 14px}.board{gap:8px}.color{border-radius:16px}}