/*
 * Range Twin competition page styling (Slice 4). Started with the play page (T4d.2); the lobby +
 * leaderboard + strict-CSP polish land in 4e (T4e.1/T4e.2/T4e.5). Linked (not inline) so it needs no
 * style-src hash under the eventual strict CSP (style-src 'self'). The play HUD chrome is built by
 * play-controller.js via CSSOM (element.style.*) so it too needs no hash; these rules own only the
 * page shell + the canvas, and can restyle the controller's classNames (.rt-*) later.
 */
html,
body {
  margin: 0;
  height: 100%;
  background: #0b0e13;
  color: #cfe;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#stage {
  display: block;
  width: 100vw;
  height: 100vh;
  /* The aim layer captures pointer drag; suppress the browser's touch panning/zoom on the canvas. */
  touch-action: none;
  outline: none;
}

/* The lobby/leaderboard pages are scrollable content, not a full-viewport canvas: opt them out of the
 * play page's `overflow: hidden` (higher specificity wins over the html,body rule above). */
body.rt-page-scroll {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

/* practice.html shell (T4e.3). Class-based (NOT inline style= attributes) so it needs no CSP
 * 'unsafe-inline' under the strict style-src 'self'. */
.rt-practice {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #e6e8eb;
  font: 16px/1.6 system-ui, sans-serif;
}
.rt-practice h1 {
  margin: 0;
  font: 700 28px/1.2 system-ui, sans-serif;
}
.rt-practice p {
  margin: 0;
  opacity: 0.85;
}
.rt-practice .rt-practice-note {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: rgba(20, 24, 31, 0.7);
  opacity: 0.9;
  font-size: 14px;
}
.rt-practice .rt-practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.rt-practice a.rt-practice-cta {
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #2a2f3a;
  background: #3b82f6;
  color: #fff;
  font: 600 15px/1 system-ui, sans-serif;
}
.rt-practice a.rt-practice-back {
  align-self: flex-start;
  color: #93c5fd;
  text-decoration: none;
  font-size: 14px;
}