.game-wrapper{max-width:450px;width:100%;display:flex;flex-direction:column}.hud-overlay{display:contents}.hud-top{order:-1}#canvas{order:0}.hud-bottom{order:1}.hud-top{display:flex;align-items:center;gap:16px;padding:8px 12px;background:#0a0e1a99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hud-label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffffff80}.hud-score-value{font-size:24px;font-weight:700;color:#00d9ff;text-shadow:0 0 8px rgba(0,217,255,.5);line-height:1.2}.hud-best{transition:color .3s}.hud-best-value{font-size:16px;font-weight:700;color:#ffb800;text-shadow:0 0 6px rgba(255,184,0,.4);line-height:1.2}.hud-turn-value{font-size:16px;font-weight:700;color:#a9e34b;text-shadow:0 0 6px rgba(169,227,75,.4);line-height:1.2}.hud-ball{display:flex;align-items:center;gap:4px;margin-left:auto}.hud-ball-icon{display:inline-block;width:12px;height:12px;border-radius:50%;background:#4bbcf4;box-shadow:0 0 4px #4bbcf499}.hud-ball-value{font-size:18px;font-weight:700;color:#4bbcf4;line-height:1.2}.hud-bottom{display:flex;gap:8px;padding:8px 12px}.hud-sound-toggle,.hud-pause-toggle,.hud-help-toggle,.hud-ff-toggle,.hud-skip-toggle,.hud-badge-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#0a0e1a99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fffc;cursor:pointer;transition:background .15s,transform .15s}.hud-sound-toggle:hover,.hud-pause-toggle:hover,.hud-help-toggle:hover,.hud-ff-toggle:hover,.hud-skip-toggle:hover,.hud-badge-toggle:hover{background:#0a0e1acc}.hud-sound-toggle:active,.hud-pause-toggle:active,.hud-help-toggle:active,.hud-ff-toggle:active,.hud-skip-toggle:active,.hud-badge-toggle:active{transform:scale(.9)}.hud-ff-toggle.active{background:#00d9ff4d;color:#00d9ff}.hud-sound-toggle .icon-off,.hud-sound-toggle.muted .icon-on{display:none}.hud-sound-toggle.muted .icon-off{display:block}@keyframes hud-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.hud-score-value.pulse{animation:hud-pulse .3s ease-out}@keyframes glow-gold{0%,to{text-shadow:0 0 6px rgba(255,184,0,.4)}50%{text-shadow:0 0 16px rgba(255,184,0,.9),0 0 30px rgba(255,184,0,.4)}}.hud-best.new-best .hud-best-value{animation:glow-gold 1s ease-in-out infinite}.hud-guide-backdrop{display:none;position:fixed;inset:0;background:#000000b3;align-items:center;justify-content:center;z-index:100}.hud-guide-modal{max-width:400px;width:90%;max-height:80vh;background:#0a0e1af2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;color:#ffffffe6}.hud-guide-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.hud-guide-header h2{margin:0;font-size:18px;font-weight:700;color:#00d9ff}.hud-guide-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#ffffff1a;color:#ffffffb3;font-size:16px;cursor:pointer;transition:background .15s}.hud-guide-close:hover{background:#fff3}.hud-guide-body{overflow-y:auto;padding:16px}.hud-guide-section{margin-bottom:16px}.hud-guide-section:last-child{margin-bottom:0}.hud-guide-section h3{margin:0 0 8px;font-size:14px;font-weight:600;color:#ffffffb3}.hud-guide-section ul{margin:0;padding:0;list-style:none}.hud-guide-section li{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:13px;line-height:1.5;color:#fffc}.hud-guide-dot{display:inline-block;width:10px;height:10px;min-width:10px;border-radius:3px;margin-top:3px}.hud-challenge-bar{order:-2;text-align:center;padding:6px 12px;font-size:13px;font-weight:600;color:gold;background:#ffd7001f;border-bottom:1px solid rgba(255,215,0,.2)}.hud-nickname-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:200}.hud-nickname-box{width:280px;padding:20px;background:#0a0e1af2;border:1px solid rgba(255,255,255,.15);border-radius:12px;display:flex;flex-direction:column;gap:12px}.hud-nickname-label{font-size:14px;font-weight:600;color:#ffffffe6;text-align:center}.hud-nickname-input{padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff14;color:#fff;font-size:16px;outline:none}.hud-nickname-input:focus{border-color:#00d9ff}.hud-nickname-btns{display:flex;gap:8px}.hud-nickname-cancel,.hud-nickname-submit{flex:1;padding:10px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.hud-nickname-cancel{background:#ffffff1a;color:#ffffffb3}.hud-nickname-submit{background:#00d9ff;color:#000}.hud-badge-backdrop{display:none;position:fixed;inset:0;background:#000000b3;align-items:center;justify-content:center;z-index:100}.hud-badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px;overflow-y:auto;max-height:60vh}.hud-badge-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:8px;background:#ffffff14;text-align:center}.hud-badge-card.locked{opacity:.4}.hud-badge-icon{font-size:28px;line-height:1}.hud-badge-label{font-size:12px;font-weight:600;color:gold}.hud-badge-card.locked .hud-badge-label{color:#ffffff80}.hud-badge-desc{font-size:11px;color:#fff9;line-height:1.3}.game-over-actions{display:none;margin-top:8px;gap:8px;justify-content:center}.game-over-btn{flex:1;max-width:180px;padding:12px 20px;border:none;border-radius:10px;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .15s,box-shadow .15s}.game-over-btn:active{transform:scale(.95)}.game-over-btn-primary{background:linear-gradient(135deg,#00d9ff,#0090cc);color:#000;box-shadow:0 0 12px #00d9ff66}.game-over-btn-primary:active{box-shadow:0 0 6px #00d9ff4d}.game-over-btn-secondary{background:#0a0e1abf;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,217,255,.3);color:#00d9ff}.game-over-btn-secondary:active{background:#0a0e1ae6}@keyframes tutorial-pulse{0%,to{box-shadow:0 0 0 3px #00d9ff4d}50%{box-shadow:0 0 0 6px #00d9ff99,0 0 20px #00d9ff4d}}.tutorial-highlight{animation:tutorial-pulse 1s ease-in-out infinite;position:relative;z-index:10}.hud-ball.tutorial-highlight{border-radius:8px}@media (prefers-reduced-motion: reduce){.hud-score-value.pulse,.hud-best.new-best .hud-best-value,.tutorial-highlight{animation:none}.hud-sound-toggle,.hud-pause-toggle,.hud-help-toggle,.hud-ff-toggle,.hud-skip-toggle,.hud-badge-toggle,.hud-guide-close{transition:none}}