:root{--music-font: "Bravura";--color-bach: #a6d2db;--color-beethoven: #c8dab2;--color-brahms: #813545;--color-chopin: #f4b692;--color-mozart: #eea43f;--color-rachmaninoff: #e8a0bf;--color-tchaikovsky: #73558f;--color-vivaldi: #e74e41;--color-grave: #8b4789;--color-lento: #5b7c99;--color-adagio: #459a77;--color-andante: #c4bf77;--color-allegro: #f4a261;--color-vivace: #e76f51;--color-presto: #d62828;--color-gold: hsl(50, 100%, 50%);--color-orange: #ffa500;--color-red: #d62828;--color-green: #10aa2e;--color-purple-light: #667eea;--color-purple-dark: #764ba2;--brand-dark: #003693;--brand-mid: #0055c4;--brand-bright: #0082F7;--brand-gradient: linear-gradient(135deg, #003693 0%, #0082F7 100%);--brand-gradient-hover: linear-gradient(135deg, #0044b8 0%, #1a9aff 100%);--landing-bg: linear-gradient(135deg, #003693 0%, #0055c4 55%, #0082F7 100%);--card-bg: #ffffff;--card-text: #0a1a3e;--card-text-muted: #4a6aaa;--card-text-placeholder: #7a90b8;--card-border: rgba(0, 54, 147, .18);--card-shadow: 0 28px 64px rgba(0, 36, 120, .22), 0 2px 8px rgba(0, 54, 147, .1);--input-border-card: rgba(0, 54, 147, .25);--input-bg-card: transparent;--input-focus-border: var(--brand-bright);--composer-selected-opacity: .5;--tempo-selected-opacity: .5;--color-quiz-correct: var(--color-stat-helped-text);--color-quiz-incorrect: var(--color-stat-harmed-text);--color-stat-normal-block: #4A90E2;--color-stat-helped-block: #10AA2E;--color-stat-harmed-block: #E21010;--color-stat-mixed-block: #9D4EDD;--color-stat-normal-text: #A8D0F5;--color-stat-helped-text: #A8F5BC;--color-stat-harmed-text: #F5A8A8;--color-stat-mixed-text: #D4A8F5;--color-stat-upgrades: #A8D0F5;--bg-black-50: rgba(0, 0, 0, .5);--bg-black-70: rgba(0, 0, 0, .7);--bg-black-80: rgba(0, 0, 0, .8);--bg-white-10: rgba(255, 255, 255, .1);--bg-white-20: rgba(255, 255, 255, .2);--bg-white-30: rgba(255, 255, 255, .3);--border-white-30: none;--border-white-50: 3px solid rgba(255, 255, 255, .5);--btn-primary-bg: var(--brand-gradient);--btn-primary-bg-hover: var(--brand-gradient-hover);--btn-primary-color: white;--btn-primary-padding: var(--spacing-md);--btn-primary-font-size: var(--font-size-xl);--btn-primary-border-radius: var(--radius-md);--btn-primary-shadow: 0 4px 20px rgba(0, 54, 147, .35);--btn-primary-shadow-hover: 0 8px 28px rgba(0, 54, 147, .45);--cooldown-ready: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);--cooldown-active: linear-gradient(90deg, #ff5722 0%, #ff9800 100%);--smiley-size: 50px;--smiley-img-size: 40px;--smiley-border-radius: 8px;--smiley-bg: rgba(0, 54, 147, .04);--smiley-border: rgba(0, 54, 147, .18);--smiley-bg-hover: rgba(0, 130, 247, .08);--smiley-border-hover: rgba(0, 130, 247, .5);--smiley-bg-selected: rgba(0, 130, 247, .28);--smiley-border-selected: var(--brand-bright);--spacing-xs: 5px;--spacing-sm: 10px;--spacing-md: 15px;--spacing-lg: 20px;--spacing-xl: 30px;--spacing-xxl: 40px;--radius-sm: 3px;--radius-md: 10px;--radius-lg: 15px;--radius-xl: 20px;--radius-circle: 50%;--transition-fast: all .2s ease;--transition-normal: all .3s ease;--z-canvas: 0;--z-ui: 10;--z-mobile: 15;--z-modal: 1000;--z-composer-hud: 1500;--z-entry-modal: 10000;--font-family: "Arial", sans-serif;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-xxl: 24px;--font-size-huge: 48px;--hud-width: 275px;--button-size-sm: 24px;--button-size-md: 60px;--button-size-composer: 140px;--button-height-composer: 180px}*{margin:0;padding:0;box-sizing:border-box}canvas,#composer-hud-stack,#composer-selection-hud,#tempo-selection-hud,#hud,#right-column,#upgrade-panel,#minimap{will-change:transform;transform:translateZ(0);backface-visibility:hidden}*{scroll-behavior:auto!important}body{font-family:var(--font-family);background:#fff;overflow:hidden;height:100vh;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.landing-container{user-select:text;-webkit-user-select:text;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--landing-bg);display:flex;align-items:center;justify-content:center;z-index:var(--z-entry-modal);pointer-events:auto}.landing-container .modal-content{background:var(--card-bg);border:1px solid var(--card-border);color:var(--card-text);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--card-shadow);width:min-content;max-width:95vw;text-align:center;max-height:95vh;overflow-y:auto;scrollbar-width:thin}.collapsible-toggle{display:block;padding:10px 16px;font-size:var(--font-size-base);font-weight:700;color:var(--brand-dark);cursor:pointer;text-align:center}label[for=toggle-controls]{margin-top:8px}.collapsible-toggle:before{content:"▶";display:inline-block;margin-right:6px;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}:checked+.collapsible-toggle:before{transform:rotate(90deg)}.collapsible-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94),opacity .5s cubic-bezier(.25,.46,.45,.94)}:checked+.collapsible-toggle+.collapsible-body{max-height:300px;opacity:1}.modal-details-text{text-align:center;margin:0 0 20px;font-size:var(--font-size-base);color:var(--card-text);line-height:1.35}.king-composer{display:flex;flex-direction:column;align-items:center;margin-top:10px}.king-crown{width:48px;height:auto;margin-bottom:-10px;z-index:1;position:relative}.king-circle{width:116px;height:116px;border-radius:50%;background:#c8dab2;display:flex;align-items:center;justify-content:center;border:3px solid #7A9A62;overflow:hidden}.king-portrait{width:90%;height:90%;object-fit:contain}.game-title{font-size:var(--font-size-huge);margin-bottom:20px;background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#debug-version{font-size:var(--font-size-sm);color:var(--card-text-muted);margin-top:-14px;margin-bottom:8px;letter-spacing:.05em}.game-subtitle{font-size:var(--font-size-lg);margin-top:0;margin-bottom:20px;color:var(--card-text-muted);font-weight:400}#join-form{margin-bottom:0}.floating-label-input{position:relative;width:100%;margin-bottom:20px}.name-input,.respawn-name-input{width:100%;padding:var(--btn-primary-padding);font-size:var(--btn-primary-font-size);border:1.5px solid var(--input-border-card);border-radius:var(--btn-primary-border-radius);background:var(--input-bg-card);color:var(--card-text);transition:var(--transition-fast);box-sizing:border-box;font-family:inherit;line-height:normal}.name-input::placeholder,.respawn-name-input::placeholder{color:transparent}.name-input:focus,.respawn-name-input:focus{outline:none;border-color:var(--input-focus-border);background:transparent}.floating-label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:var(--font-size-lg);color:var(--card-text-placeholder);pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);background:transparent;padding:0 4px;line-height:1;font-family:inherit;transform-origin:left center}.name-input:focus~.floating-label,.name-input:not(:placeholder-shown)~.floating-label,.respawn-name-input:focus~.floating-label,.respawn-name-input:not(:placeholder-shown)~.floating-label{top:0;transform:translateY(-50%) scale(.75);color:var(--input-focus-border);background:var(--card-bg)}.play-button,.respawn-button{width:100%;padding:var(--btn-primary-padding);font-size:var(--btn-primary-font-size);font-weight:800;letter-spacing:.4px;border:none;border-radius:var(--btn-primary-border-radius);background:var(--btn-primary-bg);color:var(--btn-primary-color);cursor:pointer;transition:var(--transition-normal);box-shadow:var(--btn-primary-shadow)}.play-button:hover,.respawn-button:hover{transform:translateY(-2px);background:var(--btn-primary-bg-hover);box-shadow:var(--btn-primary-shadow-hover)}.play-button:active,.respawn-button:active{transform:scale(.98)}.play-button:disabled,.respawn-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.smiley-grid{display:flex;justify-content:center;gap:10px;margin:20px 0}.smiley-option{width:var(--smiley-size);height:var(--smiley-size);border:2px solid var(--smiley-border);border-radius:var(--smiley-border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast);background:var(--smiley-bg)}.smiley-option:hover{border-color:var(--smiley-border-hover);background:var(--smiley-bg-hover);transform:scale(1.1)}.smiley-option.selected{border-color:var(--smiley-border-selected);background:var(--smiley-bg-selected);transform:scale(1.1)}.smiley-option img{width:var(--smiley-img-size);height:var(--smiley-img-size);object-fit:contain}.key-icon{display:inline-block;vertical-align:middle;height:1.2em;width:auto;position:relative;top:-1px}.controls-table{border-collapse:separate;border-spacing:0;margin:0 auto 20px;border:1.5px solid var(--input-border-card);border-radius:var(--btn-primary-border-radius);overflow:hidden}.controls-table td{padding:8px 12px;border-bottom:1.5px solid var(--input-border-card);text-align:left;white-space:nowrap}.controls-table tr:last-child td{border-bottom:none}.controls-table .controls-key{font-weight:700;white-space:nowrap;border-right:1.5px solid var(--input-border-card)}.game-info p{text-align:center;margin:0}#game-container{position:relative;width:100vw;height:100vh;min-width:1150px;min-height:800px}#game-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><line x1="16" y1="4" x2="16" y2="12" stroke="black" stroke-width="2"/><line x1="16" y1="20" x2="16" y2="28" stroke="black" stroke-width="2"/><line x1="4" y1="16" x2="12" y2="16" stroke="black" stroke-width="2"/><line x1="20" y1="16" x2="28" y2="16" stroke="black" stroke-width="2"/></svg>') 16 16,crosshair;transform:translateZ(0);will-change:contents;-webkit-transform:translateZ(0)}#blur-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#local-player-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6;transform:translateZ(0);will-change:contents;-webkit-transform:translateZ(0)}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-ui)}#hud,#leaderboard,#quiz-panel,#upgrade-panel,#map-panel{background:var(--bg-black-50);border:var(--border-white-30);border-radius:var(--radius-md);color:#fff;font-size:var(--font-size-base);z-index:var(--z-modal);pointer-events:none;overflow:hidden}#hud,#upgrade-panel,#map-panel{position:fixed}.panel-content{padding:20px}.panel-toggle{display:block;width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);color:#fff;font-size:var(--font-size-base);font-weight:700;padding:7px 0;cursor:pointer;pointer-events:auto;text-align:center;transition:background .15s,color .15s}.panel-toggle:hover{background:#ffffff14}.panel-toggle:focus,.panel-toggle:focus-visible{outline:none}#game-container *:focus,#game-container *:focus-visible{outline:none}.collapsed>:not(.panel-toggle){display:none}.collapsed>.panel-toggle{border:none}#hud,#leaderboard,#quiz-panel,#upgrade-panel,#map-panel{width:var(--hud-width)}#hud{top:var(--spacing-lg);left:var(--spacing-lg);height:auto}#hud .panel-content div{margin-bottom:var(--spacing-xs)}.hud-divider{border:none;border-top:1px solid rgba(255,255,255,.3);margin:20px 0}.display-none{display:none}#right-column{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);pointer-events:none;z-index:var(--z-modal)}#leaderboard-list{font-size:var(--font-size-base);line-height:1.4}#quiz-question{font-size:var(--font-size-md);line-height:1.5;margin-bottom:12px}.quiz-answers{display:flex;flex-direction:column;gap:6px}.quiz-answer-btn{width:100%;padding:8px 12px;background:var(--bg-white-10);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);color:#fff;font-size:var(--font-size-base);text-align:left;cursor:pointer;pointer-events:auto;transition:background .15s}.quiz-answer-btn:hover{background:#fff3}.quiz-answer-btn.correct{background:#a8f5bc26;border-color:var(--color-quiz-correct);color:var(--color-quiz-correct)}.quiz-answer-btn.incorrect{background:#f5a8a826;border-color:var(--color-quiz-incorrect);color:var(--color-quiz-incorrect)}.quiz-difficulty{font-size:var(--font-size-sm);font-weight:700;margin-bottom:8px;letter-spacing:.5px}.quiz-difficulty--easy{color:var(--color-quiz-correct)}.quiz-difficulty--medium{color:var(--color-gold)}.quiz-difficulty--hard{color:var(--color-quiz-incorrect)}.quiz-points-float{position:fixed;pointer-events:none;font-size:22px;font-weight:700;color:#000;white-space:nowrap;opacity:0;transform:translateY(0);z-index:calc(var(--z-modal) + 1)}@keyframes quiz-float-up{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-20px)}to{opacity:0;transform:translateY(-30px)}}.quiz-points-float.quiz-float--visible{animation:quiz-float-up 1s ease-out forwards}.settings-gear{position:fixed;top:calc(var(--spacing-lg) - 10px);right:calc(var(--spacing-lg) + var(--hud-width) + 15px);background:var(--bg-black-70);border:2px solid rgba(255,255,255,.4);border-radius:50%;width:45px;height:45px;font-size:24px;color:#fff;cursor:pointer;z-index:calc(var(--z-modal) + 1);pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.settings-gear:hover{background:var(--bg-black-80);border-color:#fff9;transform:scale(1.1) rotate(30deg)}.settings-gear:active{transform:scale(.95) rotate(30deg)}.settings-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;max-width:90vw;background:var(--bg-black-80);border:2px solid rgba(255,255,255,.5);border-radius:var(--radius-md);padding:30px;color:#fff;z-index:calc(var(--z-modal) + 2);pointer-events:auto;box-shadow:0 10px 40px #000c}.settings-panel.hidden{display:none}.settings-panel h3{margin-top:0;margin-bottom:25px;text-align:center;color:var(--color-gold);font-size:24px;border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:10px}.settings-content{margin-bottom:25px}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.setting-row label{font-size:16px;color:#ffffffe6}.setting-row select{padding:8px 12px;background:var(--bg-black-70);border:2px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:15px;cursor:pointer;min-width:150px}.setting-row select:hover{border-color:#ffffff80}.setting-row select:focus{outline:none;border-color:var(--color-gold)}.settings-close-btn{width:100%;padding:12px;background:var(--color-gold);color:#000;border:none;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease}.settings-close-btn:hover{background:var(--color-orange);transform:scale(1.02)}.settings-close-btn:active{transform:scale(.98)}#upgrade-panel{bottom:var(--spacing-lg);left:var(--spacing-lg)}[data-position=bottom]>.panel-toggle{border-bottom:none;border-top:1px solid rgba(255,255,255,.2)}#map-panel{right:var(--spacing-lg);bottom:var(--spacing-lg)}#map-panel:not(.collapsed){border-top-left-radius:0;border-top-right-radius:0}.panel-toggle:after{content:none}[data-position=top]>.panel-toggle:before{content:"▼ "}[data-position=top].collapsed>.panel-toggle:before{content:"▲ "}[data-position=bottom]>.panel-toggle:before{content:"▲ "}[data-position=bottom].collapsed>.panel-toggle:before{content:"▼ "}.upgrade-panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-weight:700}.upgrades-label{text-align:left;flex:1}.upgrade-count{color:#fff}.auto-upgrade-section{display:flex;align-items:center;gap:6px}.auto-key-indicator{min-width:24px;height:24px;background:#fff3;border:2px solid white;border-radius:4px;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none}.toggle-button{padding:4px 12px;background:var(--toggle-bg, rgba(255, 255, 255, .2));border:none;border-radius:4px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease;pointer-events:auto;outline:none}.toggle-button.active{background:#4caf50;color:#fff}.toggle-button:disabled{opacity:.4;cursor:not-allowed}.graphics-options{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;text-align:left}.graphics-options .toggle-button{--toggle-bg: rgba(0, 0, 0, .25)}.upgrade-panel-stats{display:flex;flex-direction:column;gap:6px}.upgrade-panel-instructions{text-align:center;margin-top:12px;color:#fff;font-size:var(--font-size-base);font-weight:400}.upgrade-row{display:flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition-fast);padding:2px;border-radius:4px}.upgrade-row:hover{background:#ffd7001a}.key-indicator{width:var(--button-size-sm);height:var(--button-size-sm);background:#fff;color:#000;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-md);font-weight:700;flex-shrink:0}.stat-bar{position:relative;display:flex;gap:1px;height:var(--button-size-sm);width:100%;padding:1px;align-items:center;justify-content:center;background:var(--bg-white-10);border-radius:4px;color:#fff;font-size:var(--font-size-base)}.stat-segment{width:calc(10% - .9px);height:calc(100% - 2px);background:var(--color-green);border-radius:2px;flex-shrink:0;margin:1px;position:absolute;top:1px}#upgrade-panel-instructions{text-align:center;margin-top:var(--spacing-sm);font-size:var(--font-size-sm);opacity:.8}.selection-title-bar{position:fixed;left:320px;right:320px;z-index:var(--z-composer-hud);text-align:center}.selection-title-bar>.panel-toggle{width:var(--hud-width);background:var(--bg-black-50);border:var(--border-white-30);border-radius:var(--radius-md);padding:7px 12px;margin:0 auto}.selection-title-bar>.panel-toggle:hover{background:#0000006b}#tempo-title-bar{bottom:var(--spacing-lg)}.composer-hud-stack{position:fixed;top:var(--spacing-lg);left:320px;right:320px;z-index:var(--z-composer-hud);display:flex;flex-direction:column;align-items:center;pointer-events:none}.composer-hud-stack .selection-title-bar{position:static;left:auto;right:auto;width:100%}.composer-hud-stack .selection-title-bar>.panel-toggle{pointer-events:auto}#composer-selection-hud{display:none;position:static;width:100%;z-index:var(--z-composer-hud);pointer-events:none}#composer-selection-hud .composer-btn-hud{pointer-events:auto}.weapon-indicator{position:fixed;display:flex;flex-direction:column;gap:4px;pointer-events:none;z-index:var(--z-hud)}.weapon-indicator-text{font-size:var(--font-size-base);font-weight:700;white-space:nowrap;color:#000}.label-short{display:none}@media(max-width:1400px){.label-full{display:none}.label-short{display:inline}}#defensive-ability-indicator{top:var(--spacing-lg);left:calc(var(--spacing-lg) + var(--hud-width) + 20px);right:calc(50% + var(--hud-width) / 2 + 20px);align-items:center}#offensive-ability-indicator{top:var(--spacing-lg);left:calc(50% + var(--hud-width) / 2 + 20px);right:calc(var(--spacing-lg) + var(--hud-width) + 20px);align-items:center}#primary-weapon-ui{bottom:var(--spacing-lg);left:calc(var(--spacing-lg) + var(--hud-width) + 20px);right:calc(50% + var(--hud-width) / 2 + 20px);align-items:center}#secondary-weapon-ui{bottom:var(--spacing-lg);left:calc(50% + var(--hud-width) / 2 + 20px);right:calc(var(--spacing-lg) + var(--hud-width) + 20px);align-items:center}.ability-cooldown-bar{width:100%;min-width:40px;max-width:180px;height:8px;background:#00000080;border-radius:4px;overflow:hidden;position:relative}.ability-cooldown-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--cooldown-progress, 0%);background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:0}.ability-cooldown-bar.on-cooldown:after{background:var(--cooldown-active)}.composer-grid-container{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:flex-start;justify-content:center;pointer-events:none;padding:20px}.composer-btn-hud{flex:0 1 var(--button-size-composer);min-width:80px;aspect-ratio:140 / 180;overflow:hidden;background:var(--bg-black-50);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;font-size:var(--font-size-md);transition:var(--transition-fast);pointer-events:auto}.composer-btn-hud:hover,.composer-btn-hud.selected,.tempo-btn-hud:hover,.tempo-btn-hud.selected{border:3px solid}.composer-btn-hud:hover{transform:scale(1.05)}.composer-btn-hud[data-composer=Bach]:hover{background:color-mix(in srgb,var(--color-bach) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-bach)!important;color:#000!important}.composer-btn-hud[data-composer=Beethoven]:hover{background:color-mix(in srgb,var(--color-beethoven) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-beethoven)!important;color:#000!important}.composer-btn-hud[data-composer=Brahms]:hover{background:color-mix(in srgb,var(--color-brahms) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-brahms)!important;color:#000!important}.composer-btn-hud[data-composer=Chopin]:hover{background:color-mix(in srgb,var(--color-chopin) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-chopin)!important;color:#000!important}.composer-btn-hud[data-composer=Mozart]:hover{background:color-mix(in srgb,var(--color-mozart) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-mozart)!important;color:#000!important}.composer-btn-hud[data-composer=Rachmaninoff]:hover{background:color-mix(in srgb,var(--color-rachmaninoff) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-rachmaninoff)!important;color:#000!important}.composer-btn-hud[data-composer=Tchaikovsky]:hover{background:color-mix(in srgb,var(--color-tchaikovsky) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-tchaikovsky)!important;color:#000!important}.composer-btn-hud[data-composer=Vivaldi]:hover{background:color-mix(in srgb,var(--color-vivaldi) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-vivaldi)!important;color:#000!important}.composer-name,.tempo-name{flex:2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(9px,1.2vw,var(--font-size-base));min-height:0}.composer-svg,.tempo-circle{flex:5;aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-height:0}.composer-svg img{width:100%;height:100%;object-fit:contain}.composer-desc,.tempo-desc{flex:2;display:flex;align-items:center;justify-content:center;font-size:clamp(8px,1vw,var(--font-size-md));opacity:.9;min-height:0}.composer-btn-hud.selected[data-composer=Bach]{background:color-mix(in srgb,var(--color-bach) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-bach)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Beethoven]{background:color-mix(in srgb,var(--color-beethoven) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-beethoven)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Brahms]{background:color-mix(in srgb,var(--color-brahms) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-brahms)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Chopin]{background:color-mix(in srgb,var(--color-chopin) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-chopin)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Mozart]{background:color-mix(in srgb,var(--color-mozart) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-mozart)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Rachmaninoff]{background:color-mix(in srgb,var(--color-rachmaninoff) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-rachmaninoff)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Tchaikovsky]{background:color-mix(in srgb,var(--color-tchaikovsky) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-tchaikovsky)!important;color:#000!important}.composer-btn-hud.selected[data-composer=Vivaldi]{background:color-mix(in srgb,var(--color-vivaldi) calc(var(--composer-selected-opacity) * 100%),transparent)!important;border-color:var(--color-vivaldi)!important;color:#000!important}#now-playing{position:static;width:100%;margin-top:0;text-align:center;color:#000;font-size:var(--font-size-base);font-weight:400;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:4px}#now-playing-warning{width:14px;height:14px;color:#e53e3e;flex-shrink:0}#now-playing.error{color:#e53e3e}.composer-hud-stack:has(#composer-title-bar.collapsed) #now-playing{margin-top:20px}#tempo-selection-hud{display:none;position:fixed;bottom:calc(32.5px + var(--spacing-sm));left:320px;right:320px;z-index:var(--z-composer-hud);pointer-events:none}#tempo-selection-hud .tempo-btn-hud{pointer-events:auto}.tempo-grid-container{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:flex-start;justify-content:center;pointer-events:none;padding:20px}.tempo-btn-hud{flex:0 1 var(--button-size-composer);min-width:80px;aspect-ratio:140 / 180;overflow:hidden;background:var(--bg-black-50);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;font-size:var(--font-size-md);transition:var(--transition-fast);pointer-events:auto}.tempo-btn-hud:hover{transform:scale(1.05)}.tempo-btn-hud[data-tempo=Grave]:hover{background:color-mix(in srgb,var(--color-grave) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-grave)!important;color:#000!important}.tempo-btn-hud[data-tempo=Lento]:hover{background:color-mix(in srgb,var(--color-lento) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-lento)!important;color:#000!important}.tempo-btn-hud[data-tempo=Adagio]:hover{background:color-mix(in srgb,var(--color-adagio) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-adagio)!important;color:#000!important}.tempo-btn-hud[data-tempo=Andante]:hover{background:color-mix(in srgb,var(--color-andante) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-andante)!important;color:#000!important}.tempo-btn-hud[data-tempo=Allegro]:hover{background:color-mix(in srgb,var(--color-allegro) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-allegro)!important;color:#000!important}.tempo-btn-hud[data-tempo=Vivace]:hover{background:color-mix(in srgb,var(--color-vivace) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-vivace)!important;color:#000!important}.tempo-btn-hud[data-tempo=Presto]:hover{background:color-mix(in srgb,var(--color-presto) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-presto)!important;color:#000!important}.tempo-circle{border-radius:50%}.tempo-circle img{width:60%;height:60%;object-fit:contain}.tempo-circle-grave img{width:45%;height:45%}.tempo-circle-grave{background:var(--color-grave)}.tempo-circle-lento{background:var(--color-lento)}.tempo-circle-adagio{background:var(--color-adagio)}.tempo-circle-andante{background:var(--color-andante)}.tempo-circle-allegro{background:var(--color-allegro)}.tempo-circle-vivace{background:var(--color-vivace)}.tempo-circle-presto{background:var(--color-presto)}.tempo-btn-hud.selected[data-tempo=Grave]{background:color-mix(in srgb,var(--color-grave) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-grave)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Lento]{background:color-mix(in srgb,var(--color-lento) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-lento)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Adagio]{background:color-mix(in srgb,var(--color-adagio) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-adagio)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Andante]{background:color-mix(in srgb,var(--color-andante) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-andante)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Allegro]{background:color-mix(in srgb,var(--color-allegro) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-allegro)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Vivace]{background:color-mix(in srgb,var(--color-vivace) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-vivace)!important;color:#000!important}.tempo-btn-hud.selected[data-tempo=Presto]{background:color-mix(in srgb,var(--color-presto) calc(var(--tempo-selected-opacity) * 100%),transparent)!important;border-color:var(--color-presto)!important;color:#000!important}.mouse-icon{display:inline-block;vertical-align:middle;width:18px;height:18px;margin:0 2px;position:relative;top:-1px}#secondary-weapon-cooldown-bar{width:100%;min-width:40px;max-width:180px;height:8px;background:#00000080;border-radius:4px;overflow:hidden;position:relative}#secondary-weapon-cooldown-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--cooldown-progress, 0%);background:var(--cooldown-ready);border-radius:0}#secondary-weapon-cooldown-bar.on-cooldown:after{background:var(--cooldown-active)}#death-modal,#reload-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:10000}.death-modal-content{background:#fff;border-radius:15px;padding:30px;text-align:center;color:#333;min-width:400px;max-width:500px}.death-modal-content h1{font-size:48px;color:var(--color-red);margin:0 0 20px;display:none}.death-killer{font-size:1.8rem;margin-bottom:24px;color:var(--color-red);font-weight:700}.death-stats{background:transparent;border:none;padding:0;margin:20px 0}.death-stats h3{margin:0 0 12px;font-size:18px;color:#333;font-weight:700}.death-stat-row{display:flex;justify-content:space-between;padding:8px 0;font-size:16px}.death-stat-row:last-child{border-bottom:none}.death-stat-row span:first-child{opacity:.8}.death-stat-row span:last-child{font-weight:700;color:#333}.death-music-row{align-items:center}.death-music-row .toggle-button{--toggle-bg: rgba(0, 0, 0, .25);min-width:56px}.respawn-name-section{margin:20px 0 16px;width:100%}.respawn-button{margin-top:20px}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-black-80);display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);pointer-events:auto}.modal-content{background:linear-gradient(135deg,var(--color-purple-light) 0%,var(--color-purple-dark) 100%);padding:var(--spacing-xl);border-radius:var(--radius-xl);text-align:center;color:#fff;max-width:80%;max-height:80%;overflow-y:auto}.modal-content h2{margin-bottom:var(--spacing-lg);font-size:var(--font-size-xxl)}.mobile-only{display:none}@media(max-width:768px),(hover:none){.mobile-only{display:block}#game-canvas{cursor:default}}#mobile-controls{position:absolute;bottom:var(--spacing-lg);left:var(--spacing-lg);right:var(--spacing-lg);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:var(--z-mobile)}#joystick{position:relative;width:100px;height:100px;background:var(--bg-white-30);border-radius:var(--radius-circle);border:var(--border-white-50)}#joystick-knob{position:absolute;top:50%;left:50%;width:40px;height:40px;background:#fffc;border-radius:var(--radius-circle);transform:translate(-50%,-50%);transition:all .1s ease}#mobile-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}#mobile-buttons button{width:var(--button-size-md);height:var(--button-size-md);border-radius:var(--radius-circle);border:none;background:#fffc;font-size:var(--font-size-xxl);cursor:pointer;transition:var(--transition-fast)}#mobile-buttons button:active{transform:scale(.9);background:#fff}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media(max-width:1200px){#composer-hud-stack,#tempo-selection-hud{left:220px!important;right:220px!important}.composer-btn-hud,.tempo-btn-hud{flex-basis:120px!important}}@media(max-width:1000px){.composer-btn-hud,.tempo-btn-hud{flex-basis:110px!important}}@media(max-width:800px){.composer-btn-hud,.tempo-btn-hud{flex-basis:100px!important}}@media(max-width:480px){#hud{font-size:var(--font-size-sm);padding:var(--spacing-sm)}#leaderboard{font-size:var(--font-size-xs);padding:var(--spacing-sm);min-width:150px}.modal-content{padding:var(--spacing-lg);max-width:95%}}.hidden{display:none!important}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.text-center{text-align:center}.text-gold{color:var(--color-gold)}.font-bold{font-weight:700}.composer-btn-hud,.tempo-btn-hud{outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}.composer-btn-hud:focus,.composer-btn-hud:focus-visible,.tempo-btn-hud:focus,.tempo-btn-hud:focus-visible{outline:none!important;box-shadow:none!important}.composer-btn-hud::-moz-focus-inner,.tempo-btn-hud::-moz-focus-inner{border:0}