*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#e8f0ff,#ffffff)}
.container{width:100%;max-width:820px;padding:20px;text-align:center}
h1{margin:0 0 12px;font-weight:600}
canvas{display:block;width:100%;height:480px;border-radius:8px;box-shadow:0 6px 20px rgba(35,47,63,0.12);background:#f7f7f7}
.hud{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.hud div{font-weight:600}
button{padding:8px 12px;border-radius:6px;border:0;background:#1976d2;color:#fff;cursor:pointer}
.overlay{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center}
.overlay.hidden{display:none}
.overlay .panel{background:#fff;padding:24px;border-radius:12px;box-shadow:0 10px 40px rgba(20,30,60,0.15);text-align:center}
.panel h2{margin:0 0 8px}
.panel p{margin:0 0 16px}

.stage{position:relative}
.start-overlay{background:linear-gradient(180deg, rgba(10,20,40,0.55), rgba(10,20,40,0.25));}
.start-overlay .panel{background:rgba(255,255,255,0.98);max-width:320px}
.controls{display:flex;gap:10px;justify-content:center;margin-top:10px}
button[disabled]{opacity:0.5;cursor:default}

/* When the stage is fullscreen, let the canvas fill the viewport */
.stage:fullscreen,
.stage:-webkit-full-screen {
	width:100vw;
	height:100vh;
}
.stage:fullscreen canvas,
.stage:-webkit-full-screen canvas,
canvas:fullscreen,
canvas:-webkit-full-screen {
	width:100vw !important;
	height:100vh !important;
	border-radius:0 !important;
	display:block;
}

/* remove page body scroll when fullscreen */
:fullscreen body { overflow: hidden; }