.sound-controls-compact{z-index:1000;gap:8px;display:flex;position:fixed;top:12px;left:100px}.sound-btn{-webkit-backdrop-filter:blur(12px);cursor:pointer;color:#fff;background:#ffffff26;border:1px solid #ffffff40;border-radius:12px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;transition:all .3s;display:flex;box-shadow:0 4px 16px #0000001a}.sound-btn:hover{background:#ffffff40;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.sound-btn.muted{opacity:.6;background:#ff646426}.sound-btn-init{animation:2s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%,to{box-shadow:0 4px 16px #0000001a}50%{box-shadow:0 4px 24px #64c8ff66}}.sound-icon{font-size:18px}.sound-label{font-weight:500}.sound-panel{-webkit-backdrop-filter:blur(20px);background:#1e283cd9;border:1px solid #ffffff26;border-radius:16px;width:280px;padding:16px;animation:.3s slideDown;position:absolute;top:50px;left:0;box-shadow:0 12px 40px #0000004d}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sound-panel-header{color:#fff;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:16px;font-weight:600;display:flex}.sound-panel-close{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;transition:all .2s;display:flex}.sound-panel-close:hover{background:#ff64644d}.sound-slider-group{margin-bottom:12px}.sound-slider-group label{color:#ffffffe6;align-items:center;gap:10px;font-size:13px;display:flex}.sound-slider-group label span:first-child{min-width:80px}.sound-slider-group input[type=range]{appearance:none;cursor:pointer;background:#fff3;border-radius:3px;flex:1;height:6px}.sound-slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:linear-gradient(135deg,#64b5f6,#42a5f5);border-radius:50%;width:16px;height:16px;transition:transform .2s;box-shadow:0 2px 8px #0000004d}.sound-slider-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-value{text-align:right;color:#fff9;min-width:35px;font-size:12px}.sound-test-buttons{color:#ffffffb3;border-top:1px solid #ffffff1a;align-items:center;gap:8px;margin-top:16px;padding-top:12px;font-size:12px;display:flex}.sound-test-buttons button{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;padding:4px 10px;font-size:11px;transition:all .2s}.sound-test-buttons button:hover{background:#64b5f64d}.sound-zone-info{color:#fffc;text-align:center;background:#4caf5033;border-radius:8px;margin-top:12px;padding:8px;font-size:12px}.sound-controls-full{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffff1a;border:1px solid #ffffff26;border-radius:20px;padding:24px}.sound-controls-full h3{color:#fff;margin:0 0 20px;font-size:18px}.sound-enable-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:12px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:all .3s}.sound-enable-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4caf5066}.sound-status{background:#0003;border-radius:10px;align-items:center;gap:10px;margin-bottom:20px;padding:12px;display:flex}.status-indicator{border-radius:50%;width:10px;height:10px}.status-indicator.active{background:#4caf50;box-shadow:0 0 10px #4caf50}.status-indicator.muted{background:#f44336}.sound-status button{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:8px;margin-left:auto;padding:6px 16px;transition:all .2s}.sound-status button:hover{background:#ffffff40}.sound-sliders{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.slider-row{align-items:center;gap:12px;display:flex}.slider-row label{color:#fffc;min-width:120px;font-size:14px}.slider-row input[type=range]{appearance:none;cursor:pointer;background:#fff3;border-radius:4px;flex:1;height:8px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:linear-gradient(135deg,#64b5f6,#2196f3);border-radius:50%;width:20px;height:20px;box-shadow:0 2px 10px #0000004d}.slider-row span{text-align:right;color:#fff9;min-width:40px;font-size:14px}.zone-selector{border-top:1px solid #ffffff1a;padding-top:20px}.zone-selector label{color:#fffc;margin-bottom:12px;font-size:14px;display:block}.zone-buttons{flex-wrap:wrap;gap:8px;display:flex}.zone-buttons button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff1a;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;font-size:12px;transition:all .2s;display:flex}.zone-buttons button:hover{background:#fff3;transform:translateY(-2px)}.zone-buttons button.active{background:#64b5f64d;border-color:#64b5f680;box-shadow:0 0 16px #64b5f64d}@media (max-width:768px){.sound-controls-compact{top:55px;left:12px}.sound-panel{width:260px}.zone-buttons button{padding:8px 10px;font-size:11px}}
.loading-screen-3d{z-index:9999;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.loading-gradient-bg{background:linear-gradient(135deg,#87ceeb 0%,#98d8c8 25%,#f7dc6f 50%,#f0b27a 75%,#e8daef 100%) 0 0/400% 400%;animation:8s infinite gradientShift;position:absolute;inset:0}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.loading-content{z-index:1;text-align:center;padding:2rem;position:relative}.loading-logo-container{margin-bottom:1.5rem;display:inline-block;position:relative}.loading-logo{filter:drop-shadow(0 10px 20px #0003);font-size:5rem;animation:2s ease-in-out infinite logoBounce;display:block}@keyframes logoBounce{0%,to{transform:translateY(0)rotate(-5deg)}50%{transform:translateY(-20px)rotate(5deg)}}.loading-glow{background:radial-gradient(#0003 0%,#0000 70%);width:80px;height:20px;animation:2s ease-in-out infinite glowPulse;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}@keyframes glowPulse{0%,to{opacity:.5;transform:translate(-50%)scale(1)}50%{opacity:.3;transform:translate(-50%)scale(.8)}}.loading-title{color:#5d4037;text-shadow:0 2px 10px #ffffff80;letter-spacing:2px;margin:0;font-size:3rem;font-weight:800}.loading-subtitle{color:#8d6e63;margin:.5rem 0 2rem;font-size:1.2rem;font-weight:600}.loading-progress-container{align-items:center;gap:1rem;max-width:300px;margin:0 auto 1.5rem;display:flex}.loading-progress-bar{background:#ffffff80;border-radius:10px;flex:1;height:12px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a,0 2px 8px #ffffff4d}.loading-progress-fill{background:linear-gradient(90deg,#4caf50,#81c784,#a5d6a7);border-radius:10px;height:100%;transition:width .3s;position:relative}.loading-progress-fill:after{content:"";background:linear-gradient(#fff6,#0000);border-radius:10px 10px 0 0;height:50%;position:absolute;top:0;left:0;right:0}.loading-progress-text{color:#5d4037;min-width:45px;font-size:1rem;font-weight:700}.loading-message{color:#795548;min-height:1.5em;margin:0;font-size:1rem}.loading-floating-elements{pointer-events:none;position:absolute;inset:0;overflow:hidden}.floating-element{opacity:.7;font-size:2rem;animation:6s ease-in-out infinite float;position:absolute}.floating-element:first-child{top:10%;left:15%}.floating-element:nth-child(2){top:20%;right:20%}.floating-element:nth-child(3){bottom:30%;left:10%}.floating-element:nth-child(4){bottom:20%;right:15%}.floating-element:nth-child(5){top:50%;left:5%}@keyframes float{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-20px)rotate(5deg)}50%{transform:translateY(-10px)rotate(-5deg)}75%{transform:translateY(-25px)rotate(3deg)}}.touch-joystick-container{z-index:500;pointer-events:auto;gap:20px;display:flex;position:fixed;bottom:100px;left:30px}.joystick-base{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:none;background:#fff3;border:3px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;display:flex;position:relative}.joystick-knob{z-index:2;background:linear-gradient(135deg,#fff 0%,#e0e0e0 100%);border-radius:50%;width:50px;height:50px;transition:transform 50ms ease-out;box-shadow:0 4px 15px #0003,inset 0 2px #fffc}.joystick-knob.active{background:linear-gradient(135deg,#4caf50 0%,#81c784 100%);box-shadow:0 4px 20px #4caf5066,inset 0 2px #ffffff4d}.joystick-directions{pointer-events:none;position:absolute;inset:0}.joystick-directions .direction{color:#ffffff80;font-size:.8rem;position:absolute}.joystick-directions .direction.up{top:8px;left:50%;transform:translate(-50%)}.joystick-directions .direction.down{bottom:8px;left:50%;transform:translate(-50%)}.joystick-directions .direction.left{top:50%;left:12px;transform:translateY(-50%)}.joystick-directions .direction.right{top:50%;right:12px;transform:translateY(-50%)}.touch-action-buttons{flex-direction:column;gap:15px;display:flex;position:fixed;bottom:120px;right:30px}.action-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;touch-action:manipulation;background:#ffffff40;border:3px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.5rem;transition:all .2s;display:flex}.action-btn:active{background:#4caf5066;transform:scale(.9)}.action-btn.interact{background:#4caf504d}.fps-counter{z-index:9999;background:#0009;border-radius:8px;padding:4px 10px;font-family:monospace;font-size:12px;position:fixed;top:10px;right:10px}.fps-counter span.high{color:#4caf50}.fps-counter span.medium{color:#ffc107}.fps-counter span.low{color:#f44336}.performance-indicator{color:#fff;z-index:100;background:#00000080;border-radius:10px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;display:flex;position:fixed;bottom:10px;left:10px}.performance-indicator .dot{border-radius:50%;width:8px;height:8px}.performance-indicator .dot.high{background:#4caf50}.performance-indicator .dot.medium{background:#ffc107}.performance-indicator .dot.low{background:#f44336}@media (hover:hover) and (pointer:fine){.touch-joystick-container,.touch-action-buttons{display:none!important}}@media (max-width:768px){.loading-title{font-size:2.5rem}.loading-logo{font-size:4rem}.joystick-base{width:100px;height:100px}.joystick-knob{width:40px;height:40px}.action-btn{width:50px;height:50px}}