[data-theme=dark]{--bg-page: #1a1a2e;--bg-glass: rgba(10, 14, 26, .6);--bg-glass-hover: rgba(10, 14, 26, .8);--bg-glass-active: rgba(10, 14, 26, .9);--bg-modal: rgba(10, 14, 26, .95);--bg-backdrop: rgba(0, 0, 0, .7);--bg-card: rgba(255, 255, 255, .08);--bg-close-btn: rgba(255, 255, 255, .1);--bg-close-btn-hover: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .8);--text-heading: rgba(255, 255, 255, .9);--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--text-desc: rgba(255, 255, 255, .6);--text-input: #fff;--border-subtle: rgba(255, 255, 255, .1);--border-input: rgba(255, 255, 255, .15);--border-input-field: rgba(255, 255, 255, .2);--canvas-bg: #141425}[data-theme=light]{--bg-page: #e8edf5;--bg-glass: rgba(255, 255, 255, .75);--bg-glass-hover: rgba(0, 0, 0, .08);--bg-glass-active: rgba(0, 0, 0, .12);--bg-modal: rgba(255, 255, 255, .95);--bg-backdrop: rgba(0, 0, 0, .4);--bg-card: rgba(0, 0, 0, .05);--bg-close-btn: rgba(0, 0, 0, .08);--bg-close-btn-hover: rgba(0, 0, 0, .15);--text-primary: rgba(20, 30, 50, .85);--text-heading: rgba(20, 30, 50, .9);--text-secondary: rgba(20, 30, 50, .65);--text-muted: rgba(20, 30, 50, .5);--text-desc: rgba(20, 30, 50, .55);--text-input: #1a1a2e;--border-subtle: rgba(0, 0, 0, .1);--border-input: rgba(0, 0, 0, .12);--border-input-field: rgba(0, 0, 0, .15);--canvas-bg: #fafafa}.game-wrapper{max-width:450px;width:100%;display:flex;flex-direction:column}.hud-overlay{display:contents}.hud-top{order:-1}#canvas{order:0;background:var(--canvas-bg)}.hud-bottom{order:1}.hud-top{display:flex;align-items:center;gap:16px;padding:8px 12px;background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}.hud-label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.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,.hud-theme-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-primary);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,.hud-theme-toggle:hover{background:var(--bg-glass-hover)}.hud-sound-toggle:active,.hud-pause-toggle:active,.hud-help-toggle:active,.hud-ff-toggle:active,.hud-skip-toggle:active,.hud-badge-toggle:active,.hud-theme-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}.hud-theme-toggle .theme-icon-wrap{display:flex;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.hud-theme-toggle.show-light-icon .theme-icon-wrap{transform:rotate(180deg)}.hud-theme-toggle .icon-off,.hud-theme-toggle.show-light-icon .icon-on{display:none}.hud-theme-toggle.show-light-icon .icon-off{display:block}@keyframes theme-punch{0%{transform:scale(1)}25%{transform:scale(.75)}60%{transform:scale(1.15)}to{transform:scale(1)}}.theme-punching{animation:theme-punch .36s cubic-bezier(.34,1.56,.64,1)}.theme-transition-overlay{position:fixed;inset:0;z-index:0;pointer-events:none}@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:var(--bg-backdrop);align-items:center;justify-content:center;z-index:100}.hud-guide-modal{max-width:400px;width:90%;max-height:80vh;background:var(--bg-modal);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;color:var(--text-heading)}.hud-guide-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}.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:var(--bg-close-btn);color:var(--text-secondary);font-size:16px;cursor:pointer;transition:background .15s}.hud-guide-close:hover{background:var(--bg-close-btn-hover)}.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:var(--text-secondary)}.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:var(--text-primary)}.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:var(--bg-backdrop);z-index:200}.hud-nickname-box{width:280px;padding:20px;background:var(--bg-modal);border:1px solid var(--border-input);border-radius:12px;display:flex;flex-direction:column;gap:12px}.hud-nickname-label{font-size:14px;font-weight:600;color:var(--text-heading);text-align:center}.hud-nickname-input{padding:10px 12px;border:1px solid var(--border-input-field);border-radius:8px;background:var(--bg-card);color:var(--text-input);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:var(--bg-close-btn);color:var(--text-secondary)}.hud-nickname-submit{background:#00d9ff;color:#000}.hud-badge-backdrop{display:none;position:fixed;inset:0;background:var(--bg-backdrop);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:var(--bg-card);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:var(--text-muted)}.hud-badge-desc{font-size:11px;color:var(--text-desc);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:var(--bg-glass);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:var(--bg-glass-active)}@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,.theme-punching{animation:none}.hud-sound-toggle,.hud-pause-toggle,.hud-help-toggle,.hud-ff-toggle,.hud-skip-toggle,.hud-badge-toggle,.hud-theme-toggle,.hud-guide-close,.hud-theme-toggle .theme-icon-wrap{transition:none}.theme-transition-overlay{display:none!important}}.hud-toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%) translateY(10px);background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-primary);padding:10px 20px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:9999}.hud-toast.visible{opacity:1;transform:translate(-50%) translateY(0)}