* {
  box-sizing: border-box;
  }

html,
body {
margin: 0;
min-height: 100%;
}

body {
background:
radial-gradient(circle at 50% 20%, #4a0808 0%, #210707 45%, #080303 100%);
color: #fff;
font-family: "Press Start 2P", monospace;
overflow-x: hidden;
}

.game-shell {
width: min(1100px, 100%);
margin: 0 auto;
padding: 18px;
}

header {
text-align: center;
margin-bottom: 14px;
}

h1 {
margin: 0 0 10px;
font-size: clamp(18px, 3vw, 32px);
line-height: 1.4;
color: #ffffff;
text-shadow:
4px 4px #000,
0 0 18px rgba(201, 6, 6, 0.7);
}

header p {
margin: 0;
color: #c90606;
font-size: clamp(9px, 1.4vw, 13px);
line-height: 1.6;
text-shadow: 2px 2px #000;
}

.game-wrapper {
width: 100%;
overflow: hidden;
border: 5px solid #000;
box-shadow:
0 0 0 3px #c90606,
0 0 25px rgba(201, 6, 6, 0.35),
0 14px 40px rgba(0, 0, 0, 0.6);
background: #090303;
}

canvas {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
image-rendering: pixelated;
image-rendering: crisp-edges;
background: #100303;
}

.controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px 24px;
margin-top: 14px;
color: #d9b8b8;
font-size: 9px;
line-height: 1.8;
text-align: center;
}

@media (max-width: 700px) {
.game-shell {
padding: 8px;
}

header {
margin-bottom: 8px;
}

.controls {
gap: 5px 12px;
font-size: 7px;
}
}

@media (max-width: 420px) {
h1 {
font-size: 14px;
}

header p {
font-size: 8px;
}

.controls {
font-size: 6px;
}
}