:root {
  --bg-top: #fff7d9;
  --bg-bottom: #c8eff7;
  --frame: #334e68;
  --hud-bg: rgba(24, 31, 38, 0.7);
  --hud-fg: #f5f7fb;
  --accent: #ffd166;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: "Trebuchet MS", "Avenir Next", sans-serif;
  background: radial-gradient(circle at 25% 20%, #fffef2 0%, var(--bg-top) 35%, var(--bg-bottom) 100%);
  overflow: hidden;
}

.app {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.game-shell {
  position: relative;
  width: min(96vw, calc(96vh * 16 / 9));
  height: min(96vh, calc(96vw * 9 / 16));
  border: 5px solid var(--frame);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(35, 44, 51, 0.25);
  overflow: hidden;
}

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

.hud {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 10px 12px;
  min-width: 290px;
  color: var(--hud-fg);
  background: var(--hud-bg);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
  background: rgba(7, 11, 16, 0.45);
  font-weight: 700;
  padding: 20px;
}

.overlay-card h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 58px);
}

.overlay-card p {
  margin: 10px 0 0;
  font-size: clamp(20px, 2.7vw, 31px);
}

.overlay-card .overlay-note {
  color: var(--accent);
  font-size: clamp(22px, 3vw, 35px);
}