/* In the game's own style: a starfield, the logo's lavender, the
   scoreboard's bevelled grey metal around black panels, values in the
   blue of the score digits and accents in the red of "BALL". */
:root {
  --metal: #9c9c9c;
  --metal-light: #dcdcdc;
  --metal-dark: #4c4c4c;
  --panel: #000;
  --white: #f2f2f2;
  --grey: #8a8a9a;
  --blue: #4e6cff;
  --red: #d42a2a;
  --lavender: #b8a4f0;
  --violet: #7a5cd6;
  --outline: #2a1b5c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #000; color: var(--white); }
body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { color: var(--lavender); }

#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }

.hero {
  text-align: center;
  padding: 56px 16px 32px;
}
.icon { image-rendering: pixelated; border-radius: 22%; box-shadow: 0 0 40px #7a5cd655; }
.logo { margin: 18px 0 10px; font-style: italic; font-weight: 900; line-height: 1; }
.logo span {
  display: block;
  background: linear-gradient(#e6dcff, var(--lavender), var(--violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--outline);
}
.logo .small { font-size: clamp(22px, 5vw, 34px); letter-spacing: 1px; margin-bottom: 6px; }
.logo .big { font-size: clamp(48px, 12vw, 92px); }
.tagline { max-width: 560px; margin: 14px auto 28px; color: #c9c4e6; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.button {
  display: inline-block;
  padding: 12px 20px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  background: var(--panel);
  border: 3px solid;
  border-color: var(--metal-dark) var(--metal-light) var(--metal-light) var(--metal-dark);
  outline: 3px solid var(--metal);
  outline-offset: 0;
  transition: background .15s, transform .1s;
}
.button:hover { background: #10142e; }
.button:active { transform: translateY(1px); }
.button small { color: var(--grey); font-weight: 400; }
.button.primary { color: #fff; background: linear-gradient(#2b3fb0, #1a2570); }
.button.primary:hover { background: linear-gradient(#3550d0, #1f2d86); }
.button.support { color: #ffd3d3; }

main { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }

.panel {
  margin: 28px 0;
  padding: 22px;
  background: rgba(0, 0, 0, .78);
  border: 3px solid;
  border-color: var(--metal-light) var(--metal-dark) var(--metal-dark) var(--metal-light);
  outline: 4px solid var(--metal);
}
.panel h2 { margin: 0 0 14px; color: var(--red); text-transform: uppercase; letter-spacing: 2px; font-size: 18px; }
.panel.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .panel.two { grid-template-columns: 1fr; } }

/* The original window is 600 × 416. */
.screen {
  position: relative;
  aspect-ratio: 600 / 416;
  background: #000;
  border: 3px solid;
  border-color: var(--metal-dark) var(--metal-light) var(--metal-light) var(--metal-dark);
}
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.start {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(#2a1b5c66, #000 70%);
  color: var(--white); border: 0; cursor: pointer; font: inherit;
}
.start span {
  font-size: clamp(20px, 4vw, 30px); font-weight: 800; font-style: italic;
  padding: 12px 26px; background: linear-gradient(#2b3fb0, #1a2570);
  border: 3px solid; border-color: var(--metal-dark) var(--metal-light) var(--metal-light) var(--metal-dark);
  outline: 3px solid var(--metal);
}
.start small { color: var(--grey); padding: 0 16px; text-align: center; }
.hint { margin: 12px 0 0; color: var(--grey); font-size: 14px; }

.ticks, .steps { margin: 0; padding-left: 20px; color: #d8d4ee; }
.ticks li, .steps li { margin: 6px 0; }
.ticks li::marker { content: "✦  "; color: var(--blue); }

footer {
  max-width: 980px; margin: 0 auto; padding: 24px 16px 48px;
  color: var(--grey); font-size: 13px; text-align: center;
}
footer p { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}