/* Shared look for the games in /play/ (matches One More Orbit). */
* { box-sizing: border-box; }
body {
  margin: 0; background: #080d19; color: #eef5ff; font-family: system-ui, sans-serif;
  min-height: 100svh; display: grid; place-items: center; padding: 20px;
}
main { width: min(100%, 460px); }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-weight: 800; font-size: 14px; letter-spacing: 3px; color: #6debd5; }
button {
  font: inherit; cursor: pointer; min-height: 46px; border: 1px solid #34425c;
  border-radius: 14px; background: #182338; color: #eef5ff; padding: 10px 18px;
  touch-action: manipulation;
}
button:hover { background: #24334d; }
button:focus-visible { outline: 3px solid #6debd5; outline-offset: 4px; }
h1 { font-size: clamp(36px, 9vw, 54px); letter-spacing: -2px; line-height: 1.05; margin: 28px 0 12px; }
.subtitle { color: #a7b6cf; line-height: 1.6; margin: 0 0 18px; }
.stats { display: flex; justify-content: space-between; gap: 12px; color: #a7b6cf; font-size: 13px; margin: 22px 0 10px; }
.stats strong { color: #fff; }
.arena {
  position: relative; border: 1px solid #24334d; border-radius: 28px; overflow: hidden;
  background: radial-gradient(circle, #15213a, #0b1222 70%);
}
canvas { display: block; width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 26px; background: #080d19e8;
}
.overlay[hidden] { display: none; }
.eyebrow { color: #6debd5; letter-spacing: 3px; font-size: 12px; font-weight: 800; }
h2 { font-size: 34px; letter-spacing: -1px; margin: 10px 0; }
.overlay p { color: #b0bfd6; line-height: 1.6; max-width: 290px; margin: 0 0 20px; }
.primary { background: #6debd5; color: #081923; border: 0; font-weight: 800; }
.primary:hover { background: #95f5e3; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wide { width: 100%; margin-top: 14px; font-weight: 800; letter-spacing: 1px; }
.controls { display: flex; gap: 10px; margin-top: 14px; }
.controls button { flex: 1; font-weight: 800; letter-spacing: 1px; }
footer { text-align: center; font-size: 12px; color: #9aaecb; margin-top: 18px; line-height: 1.7; }
#notice { min-height: 24px; text-align: center; color: #6debd5; font-size: 13px; margin-top: 12px; }
#copy {
  width: 100%; background: #15213a; color: #fff; padding: 12px; border: 1px solid #34425c;
  border-radius: 10px; margin-top: 8px; font: inherit;
}

/* Inside the game page, the page already shows the title. */
.embedded body { min-height: 0; display: block; padding: 16px; }
.embedded main { margin: 0 auto; }
.embedded h1, .embedded .subtitle { display: none; }
.embedded .stats { margin-top: 14px; }

@media (max-width: 420px) {
  .overlay { padding: 18px; }
  .overlay p { margin-bottom: 14px; }
  h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}