:root {
  --ink: #e9eff5;
  --muted: #7f8c9b;
  --cyan: #00e5ff;
  --focus-glow: rgba(0, 229, 255, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'Exo 2', system-ui, sans-serif;
  background: #000000; /*transparent on the additive lens*/
  color: var(--ink);
  width: 600px; height: 600px; overflow: hidden;
}

#app { width: 600px; height: 600px; position: relative; }
#pf { position: absolute; top: 0; left: 0; width: 600px; height: 600px; }

/* --- Overlay screens (start / pause / over) --- */
.screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 40px;
  background: radial-gradient(600px 400px at 50% 42%, rgba(0,20,32,0.55), rgba(0,0,0,0.82));
}
.screen.hidden { display: none; }
.panel {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: #0c0f18; border: 2.5px solid rgba(0,229,255,0.6);
  border-radius: 24px; padding: 36px 44px; max-width: 86%;
  box-shadow: 0 0 40px rgba(0,229,255,0.28), inset 0 0 40px rgba(0,229,255,0.05);
}
.title {
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 52px; letter-spacing: 0.16em;
  color: var(--cyan); text-shadow: 0 0 24px rgba(0,229,255,0.55); text-transform: uppercase;
}
.subtitle { font-weight: 500; font-size: 17px; color: var(--muted); line-height: 1.6; }
.cta {
  margin-top: 10px; min-height: 88px; padding: 0 44px;
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em;
  color: #04222b; background: var(--cyan);
  border: 3px solid transparent; border-radius: 16px; cursor: pointer;
  transition: transform 300ms cubic-bezier(0.6,0,0.4,1), box-shadow 300ms ease;
}
.cta:focus { outline: none; box-shadow: 0 0 30px var(--focus-glow); transform: scale(1.05); }

.hidden { display: none !important; }