:root {
  --bg: #0e1726;
  --panel: #16223a;
  --accent: #4dd0a8;
  --accent2: #ff7a6b;
  --text: #e8eefc;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-user-select: none; user-select: none; touch-action: none;
}
canvas#scene { display: block; width: 100vw; height: 100vh; }
[hidden] { display: none !important; }

.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 30%, #1b2c4a, #0a0f1c);
}
.overlay h1 { font-size: clamp(34px, 8vw, 72px); margin: 0; letter-spacing: 1px; }
.overlay h1 span { color: var(--accent2); }
.tag { opacity: .8; margin: 0 0 10px; }
.note { min-height: 1.2em; opacity: .75; font-size: 14px; }

button.big {
  appearance: none; border: none; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid #2c3e60; border-radius: 14px;
  padding: 18px 26px; font-size: 20px; min-width: 280px;
  transition: transform .08s ease, background .15s ease;
}
button.big small { display: block; opacity: .6; font-size: 13px; margin-top: 4px; }
button.big:hover { background: #1d2c4a; }
button.big:active { transform: scale(.97); }
#play-runner { border-color: var(--accent); }
#play-giant { border-color: var(--accent2); }

.how { max-width: 460px; margin-top: 8px; font-size: 14px; opacity: .9; }
.how summary { cursor: pointer; opacity: .8; }
.how p { text-align: left; line-height: 1.5; }
kbd {
  background: #0a0f1c; border: 1px solid #33415f; border-radius: 5px;
  padding: 1px 6px; font-size: 12px;
}

.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9;
  display: flex; gap: 18px; align-items: center; justify-content: center;
  padding: 10px; font-size: 15px;
  background: linear-gradient(#0e1726cc, #0e172600);
  pointer-events: none;
}
#hud-score { font-weight: 700; font-size: 18px; }
#hud-status { opacity: .85; }

/* Touch joystick for the runner on mobile */
.touch { position: fixed; inset: 0; z-index: 8; }
.stick {
  position: absolute; bottom: 40px; left: 40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: #ffffff14; border: 2px solid #ffffff33;
}
.knob {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px;
  margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--accent); opacity: .8;
}