:root {
  --bg-1: #08131d;
  --bg-2: #14293a;
  --panel: #102132cc;
  --panel-border: #6ec5ff66;
  --text: #ecf6ff;
  --accent: #ffd166;
  --danger: #ff6b6b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
  position: relative;
  overflow: hidden;
}

.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, #3f95d433 0%, transparent 30%),
    radial-gradient(circle at 84% 80%, #ffd1662c 0%, transparent 28%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 36px,
      #ffffff08 36px,
      #ffffff08 37px
    );
}

.layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-shell {
  margin: 0;
  position: relative;
  background: #0f1c2a;
  border: 2px solid var(--panel-border);
  border-radius: 0;
  box-shadow: 0 10px 24px #00000055;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  display: block;
  width: min(100vw, calc(100dvh * 15 / 13));
  height: min(100dvh, calc(100vw * 13 / 15));
  aspect-ratio: 15 / 13;
}