:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #080c12;
  color: #ecf4ff;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 0%, #14263a, #080c12 62%);
}

.game-shell { width: min(92vw, 560px); padding: 2rem 0; text-align: center; }
.eyebrow { color: #55e6a5; font: 700 .75rem/1 monospace; letter-spacing: .16em; }
h1 { margin: .4rem 0; font-size: clamp(2.6rem, 10vw, 4.5rem); letter-spacing: -.06em; }
.intro { color: #a9bbcf; margin: 0 auto 1.5rem; max-width: 38rem; }
.game-card { padding: clamp(1rem, 4vw, 1.6rem); border: 1px solid #263c54; border-radius: 1.2rem; background: #0c1520e8; box-shadow: 0 1rem 3rem #0008; }
.score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
h2 { margin: 0; font-size: 1.1rem; text-align: left; }
.score-row p { margin: 0; color: #55e6a5; font: 700 1rem monospace; }
.status { min-height: 2.8rem; display: grid; place-items: center; margin: 1rem 0; color: #d9e5f2; }
.board-wrap { width: min(80vw, 400px); margin: 0 auto; padding: .45rem; border-radius: .75rem; background: #0a1018; }
canvas { display: block; width: 100%; height: auto; border-radius: .45rem; background: #101d2b; image-rendering: pixelated; }
.controls { display: grid; gap: .45rem; margin: 1rem 0; color: #8fa4ba; font-size: .8rem; }
kbd { display: inline-block; min-width: 1.4rem; margin: 0 .12rem; padding: .15rem .3rem; border: 1px solid #45617b; border-bottom-width: 2px; border-radius: .3rem; color: #eaf4ff; font: 700 .75rem monospace; }
.primary { border: 0; border-radius: .55rem; padding: .7rem 1rem; background: #55e6a5; color: #062014; font-weight: 800; cursor: pointer; }
.primary:hover { background: #8cf3c1; }
.note { color: #71869a; font-size: .78rem; }