:root { font-family: system-ui, sans-serif; color: white; background: #0b3d66; }
body { margin: 0 auto; padding: 12px; max-width: 820px; text-align: center; }
h1 { margin: .3em; }
#howto { margin: .3em; }
#hud { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
canvas { display: block; width: 100%; height: auto; background: #1177aa; border-radius: 16px; touch-action: none; }
button { font: inherit; padding: 12px 20px; border: 0; border-radius: 14px; cursor: pointer; min-height: 48px; }
#restart { background: #ffd54d; }
#touch { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 12px 0; }
#stick { position: relative; width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.5); touch-action: none; flex: none; }
#nub { position: absolute; left: 40px; top: 40px; width: 48px; height: 48px; border-radius: 50%; background: #ff9a3c; }
#squirt { flex: 1; font-size: 1.4rem; font-weight: 700; background: #4dd2ff; color: #063; min-height: 72px; }
#tip { opacity: .9; }
@media (max-width: 480px) { body { padding: 8px; } h1 { font-size: 1.5rem; } #squirt { font-size: 1.2rem; } }