* { box-sizing: border-box; }
body { margin:0; background:#051025; color:#fff; font-family:Inter,Arial,Helvetica,sans-serif; }
.game-shell { position:relative; height:100vh; width:100vw; overflow:hidden; }
#canvas-holder { width:100%; height:100%; }
.hud { position:absolute; left:12px; top:12px; z-index:50; background:rgba(0,0,0,0.45); padding:8px 12px; border-radius:8px; backdrop-filter:blur(4px); }
.hud div { font-size:14px; margin:4px 0; }
.msg { margin-top:8px; font-weight:700; color:#ffd54f }
.controls { position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,0.35); padding:8px 10px; border-radius:8px; font-size:13px }

/* End-of-game overlay */
.overlay { position:fixed; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; overflow-y:auto; z-index:120; background:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)); }
.overlay-card { background:rgba(10,10,20,0.95); color:#fff; padding:20px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.6); min-width:260px; max-height:90vh; overflow-y:auto; text-align:center; }
.overlay-msg { font-size:18px; margin-bottom:12px; }
.overlay-actions { display:flex; gap:10px; justify-content:center; }
.overlay-actions button { margin:6px; padding:8px 12px; border-radius:6px; border:0; background:#2b6cff; color:#fff; cursor:pointer; }
.overlay-actions button:hover{ background:#1d55e6 }

/* Unified button styles */
.btn-primary { background: #2b6cff; color: #fff; border: 0; padding: 8px 12px; border-radius:6px; cursor: pointer; }
.btn-primary:hover { background: #1d55e6; }
.btn-secondary { background: #444854; color: #fff; border: 0; padding: 8px 12px; border-radius:6px; cursor: pointer; }
.btn-secondary:hover { background: #3a3d45; }

/* responsive */
@media (max-width:720px){ .hud { font-size:13px; left:8px; top:8px } .controls{ right:8px; bottom:8px } }