:root {
  --bg: #080a0e; --card: #11161d; --card-border: #1e2630;
  --accent: #38bdf8; --accent2: #f97316;
  --text: #e2e8f0; --muted: #94a3b8;
  --radius: 16px; --shadow: 0 12px 40px rgba(0,0,0,0.7);
}
[data-theme="light"] {
  --bg: #f1f5f9; --card: #ffffff; --card-border: #cbd5e1;
  --text: #1e293b; --muted: #64748b;
  --shadow: 0 12px 40px rgba(0,0,0,0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; justify-content: center; align-items: center;
  padding: 1rem; color-scheme: dark; transition: background 0.3s, color 0.3s;
}
[data-theme="light"] { color-scheme: light; }
#app {
  width: 100%; max-width: 860px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
}
header { text-align: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--card-border); }
h1 { font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
h1+p { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; font-weight: 600; }
#hud { color: var(--accent) !important; font-size: 0.95rem !important; margin-top: 0.4rem !important; font-weight: 700; letter-spacing: 0.03em; }

.stage {
  position: relative; width: 100%; aspect-ratio: 8/5; max-height: 480px;
  border-radius: 12px; border: 1px solid var(--card-border); overflow: hidden;
  touch-action: none; outline: none;
}
.stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
canvas { width: 100%; height: 100%; display: block; }

.overlay-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(8,10,14,0.85); backdrop-filter: blur(4px);
  z-index: 10; transition: opacity 0.3s; pointer-events: auto;
}
.overlay-screen.hidden { opacity: 0; pointer-events: none; }
.overlay-screen .badge {
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem;
  border-radius: 20px; margin-bottom: 0.75rem; font-weight: 600;
}
.overlay-screen h2 { font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; }
.overlay-screen p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1rem; text-align: center; max-width: 280px; }
.overlay-screen button {
  background: var(--accent); color: #080a0e; border: none; padding: 0.7rem 1.8rem;
  border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.overlay-screen button:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(56,189,248,0.3); }

#controls { display: flex; justify-content: center; }
#btn-start {
  background: var(--accent); color: #080a0e; border: none;
  padding: 0.75rem 2rem; border-radius: 10px; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
#btn-start:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(56,189,248,0.3); }
#btn-start:active { transform: translateY(0); }

@media (max-width: 480px) {
  h1 { font-size: 1.2rem; }
  #app { padding: 0.85rem; gap: 0.75rem; }
  .overlay-screen h2 { font-size: 1.5rem; }
}