* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0a0c12; color: #e6edf3; font-family: -apple-system, blinkmacsystemfont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; }
#game-container { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
#game { background: radial-gradient(ellipse at center, #0e1220 0%, #06070d 70%); box-shadow: 0 0 24px rgba(0,0,0,0.6) inset, 0 8px 40px rgba(0,0,0,0.6); border: 1px solid #1b2236; touch-action: none; cursor: crosshair; }
#hud { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; opacity: 0.9; pointer-events: none; }
#hud .left, #hud .right { display: flex; gap: 12px; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.overlay.show { opacity: 1; pointer-events: auto; }
.panel { background: #121827; border: 1px solid #2a3554; padding: 20px 24px; border-radius: 10px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.panel h1 { margin: 0 0 8px; font-size: 22px; }
.panel p { margin: 0 0 16px; color: #a6b0c4; }
.panel button { background: #1f6feb; color: white; border: none; border-radius: 8px; padding: 10px 16px; font-size: 15px; cursor: pointer; }
.panel button:hover { filter: brightness(1.1); }