:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif;
  background: #10141c;
  color: #f7fbff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-shell { width: 100%; display: grid; place-items: center; }

.game-shell {
  position: relative;
  width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: 100dvh;
  overflow: hidden;
  background: #192535;
}

canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.game-hud, .controls, .resource-error {
  position: absolute;
  left: 1rem;
  right: 1rem;
  z-index: 1;
}

.game-hud { top: 0.75rem; text-align: center; pointer-events: none; }
.game-hud h1, .game-hud p { margin: 0; text-shadow: 0 1px 3px #000; }
.game-hud h1 { font-size: 1.3rem; }
.game-hud p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.controls { bottom: 0.85rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
button { min-height: 2.5rem; border: 0; border-radius: 0.5rem; background: #e9eef8; color: #172033; font: inherit; font-weight: 700; }
button:disabled { cursor: progress; opacity: 0.65; }
button:focus-visible { outline: 3px solid #78c4ff; outline-offset: 2px; }

.resource-error { bottom: 4.2rem; margin: 0; text-align: center; color: #ffd4d4; }