*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
:root{--bg:#f7c151;--accent:#2b6ef6;--panel:#fff;--muted:#666}
body,html{height:100%;margin:0;background:linear-gradient(#fbe9d0,#f7c151);}
.game-shell{max-width:1100px;margin:12px auto;border:6px solid #111;background:linear-gradient(#fff,#f3f3f3);}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;padding-top:max(8px,var(--safe-area-inset-top));background:#1e90ff;color:white}
.game-header select{padding:6px;border-radius:4px;border:none}
.game-header button{margin-left:8px;padding:6px 10px;border-radius:6px;border:none;background:#ffde59;color:#111;font-weight:600}
.game-area{position:relative;padding:0;background:#000}
canvas{display:block;width:100%;height:auto;background:#c86b1b}
.ui-overlays{position:absolute;inset:0;pointer-events:none}
.hud{position:absolute;left:12px;top:12px;color:white;background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:6px;pointer-events:auto}
.hud #score{font-size:18px;font-weight:700}
.hud #best{font-size:12px;opacity:0.9}
.mobile-controls{position:absolute;right:12px;bottom:max(12px,calc(12px + var(--safe-area-inset-bottom)));display:none;gap:8px;pointer-events:auto}
.control{min-width:48px;min-height:48px;padding:8px 14px;border-radius:8px;border:none;background:rgba(255,255,255,0.9);font-weight:700;font-size:1.2rem;touch-action:manipulation}
.control.big{padding:14px 18px;border-radius:12px;background:#ff5c3c;color:white;min-width:64px;min-height:64px}
.game-footer{padding:8px 12px;background:#111;color:white}
#instructions{font-size:14px}
@media (hover:none) and (pointer:coarse){.mobile-controls{display:flex}}
@media (max-width:600px){.game-shell{margin:6px;border-width:4px}.game-header{padding:6px}.game-header .center{font-size:14px}.hud{font-size:14px}}