:root { --pn-vh: 1vh; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #050810; color: #e6edf3; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 12px; }
h1 { margin: 0 0 4px; font-size: 22px; }
.sub { margin: 0 0 10px; opacity: 0.75; font-size: 13px; text-align: center; }
.hud { display: flex; gap: 10px; margin-bottom: 10px; }
.pill { background: #1e293b; padding: 6px 12px; border-radius: 8px; font-size: 14px; }
.pill span { opacity: 0.7; margin-right: 6px; }
.pill b { font-weight: 700; }
#stage { position: relative; width: 320px; max-width: 100%; }
canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: #87ceeb; touch-action: none; }
.status { margin-top: 8px; font-size: 13px; opacity: 0.8; }
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; z-index: 1000; }
.modal.show { display: flex; }
.modal-card { background: #1e293b; padding: 20px; border-radius: 12px; max-width: 320px; text-align: center; }
.modal-card h2 { margin-top: 0; }
.btn { background: #334155; color: #e6edf3; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn.primary { background: #2563eb; }
@media (max-width: 360px) { h1 { font-size: 18px; } }

#game-container { position: relative; display: inline-block; }
#left-controls, #right-controls { display: none; position: absolute; bottom: 8px; z-index: 5; }
#left-controls { left: 8px; }
#right-controls { right: 8px; }
.button {
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #e6edf3;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#up { width: 90px; height: 44px; }
#left, #right { width: 70px; height: 44px; display: inline-block; }
#space { width: 90px; height: 44px; }
