:root {
  --bg: #f5f7fb;
  --panel: #e9eef7;
  --ink: #0b1220;
  --muted: #5b6b7f;
  --left: #00b3a0;
  --right: #ff7a26;
  --ball-left: #0b1220;
  --ball-right: #fff2e6;
  --accent: #2aa6ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(42,166,255,.15), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--bg) 65%, #eef3fb);
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  display: grid;
  grid-template-rows: 1fr auto;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  min-height: 0;
}

#game {
  width: 100%;
  max-width: min(92vmin, 900px);
  background: var(--panel);
  border-radius: .5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15) inset,
              0 0 0 1px rgba(0,0,0,.05) inset;
  image-rendering: auto;
}
.footer {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  padding: .4rem 1rem 1rem;
}
.footer p { margin: 0; }
.footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.footer a:hover { color: var(--ink); border-bottom-style: solid; }
.muted { color: var(--muted); }