:root{--ui-padding: 20px;--button-size-lg: 80px;--button-size-sm: 60px;--button-size-xs: 40px;--gap-md: 24px;--lumina-main: #007bff;--lumina-highlight: #00c6ff;--lumina-border: #00bfff;--lumina-active-border: #00eaff;--spectral-main: #8a2be2;--spectral-highlight: #ff69b4;--spectral-border: #ff69b4;--spectral-active-border: #ffb6c1;--dark-background: rgba(0, 0, 0, .6);--semi-dark-background: rgba(0, 0, 0, .5);--light-text-color: #E0FFFF;--transition-speed: .4s;--cubic-bezier-ease: cubic-bezier(.25, .8, .25, 1);--ui-glass-bg: rgba(255, 255, 255, .08);--ui-border-color: rgba(255, 255, 255, .15);--ui-shadow-color: rgba(0, 0, 0, .3);--ui-primary-glow: rgba(0, 255, 255, .7);--ui-secondary-glow: rgba(0, 255, 255, 1);--ui-accent-glow: rgba(0, 255, 255, .8);--font-family-display: "Orbitron", sans-serif;--font-family-body: "Orbitron", sans-serif}.ui-overlay-container{font-family:var(--font-family-body);position:fixed;inset:0;z-index:1000;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:var(--ui-padding);box-sizing:border-box;color:var(--light-text-color);opacity:0;animation:fadeInUI 1s ease-out forwards}.ui-overlay-container.fade-out-ui{animation:fadeOutUI .5s ease-in forwards}@keyframes fadeInUI{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutUI{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.app-logo{position:absolute;top:var(--ui-padding);left:var(--ui-padding);width:200px;height:200px;background:transparent;border:none;z-index:10;pointer-events:auto;filter:drop-shadow(0 0 8px var(--lumina-highlight));transition:transform .3s ease-in-out}.app-logo:hover{transform:scale(1.05)}.scene-button,.sound-toggle-button,.go-to-center-button{position:relative;border-radius:50%;cursor:pointer;transition:all var(--transition-speed) var(--cubic-bezier-ease);box-shadow:0 5px 15px #00000080;overflow:hidden;display:flex;align-items:center;justify-content:center;border:none;background-size:200% auto;pointer-events:auto;background-color:#0006;color:var(--light-text-color);background:var(--ui-glass-bg);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid var(--ui-border-color);box-shadow:0 4px 10px var(--ui-shadow-color)}.scene-button:hover,.sound-toggle-button:hover,.go-to-center-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #000000b3,0 0 15px var(--ui-primary-glow);background-position:right center}.scene-button:active,.sound-toggle-button:active,.go-to-center-button:active{transform:scale(.95);box-shadow:0 2px 10px #0006}.scene-button svg,.sound-toggle-button svg,.go-to-center-button svg{width:60%;height:60%;stroke:currentColor;transition:stroke .3s ease,transform .2s ease}.scene-button:before,.sound-toggle-button:before,.go-to-center-button:before{content:"";position:absolute;top:0;left:-100%;width:30%;height:100%;background:#fff6;transform:skew(-25deg);transition:all .7s ease;pointer-events:none}.scene-button:hover:before,.sound-toggle-button:hover:before,.go-to-center-button:hover:before{left:100%}.scene-button{width:var(--button-size-lg);height:var(--button-size-lg)}.lumina-button{background-image:linear-gradient(to right,var(--lumina-main) 0%,var(--lumina-highlight) 50%,var(--lumina-main) 100%);border:3px solid var(--lumina-border);box-shadow:inset 0 0 15px #00bfff80}.lumina-button.active{background-image:linear-gradient(to right,#0056b3,#09c,#0056b3);border-color:var(--lumina-active-border);box-shadow:0 0 35px var(--lumina-border),0 0 60px var(--ui-secondary-glow),inset 0 0 25px var(--ui-primary-glow);animation:pulse-glow 2s infinite alternate,border-pulse 1.5s infinite ease-in-out;transform:scale(1.1)}.spectral-button{background-image:linear-gradient(to right,var(--spectral-main) 0%,var(--spectral-highlight) 50%,var(--spectral-main) 100%);border:3px solid var(--spectral-border);box-shadow:inset 0 0 15px #ff69b480}.spectral-button.active{background-image:linear-gradient(to right,#6a1aab,#c48,#6a1aab);border-color:var(--spectral-active-border);box-shadow:0 0 35px var(--spectral-main),0 0 60px var(--spectral-main),inset 0 0 25px #ff69b4b3;animation:spectral-flicker 1.5s infinite alternate,border-pulse-spectral 1.5s infinite ease-in-out;transform:scale(1.1)}.scene-selection-buttons-container{position:absolute;top:var(--ui-padding);left:50%;transform:translate(-50%);z-index:20;display:flex;gap:var(--gap-md);pointer-events:auto;background:#0003;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:15px 25px;box-shadow:0 6px 20px #0006}.utility-buttons-right{position:absolute;top:var(--ui-padding);right:var(--ui-padding);z-index:10;display:flex;flex-direction:column;gap:10px;pointer-events:auto;background:#0003;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:15px;box-shadow:0 6px 20px #0006}.sound-toggle-button{width:var(--button-size-sm);height:var(--button-size-sm);background:var(--semi-dark-background);border:1px solid var(--ui-primary-glow);box-shadow:0 0 10px #00ffff80}.sound-toggle-button svg{width:70%;height:70%}.sound-toggle-button.active{animation:sound-pulse 1.5s infinite alternate}.go-to-center-button{width:var(--button-size-sm);height:var(--button-size-sm);background:var(--dark-background);border:2px solid var(--ui-primary-glow);box-shadow:0 0 15px var(--ui-primary-glow);animation:float-wobble 3s ease-in-out infinite alternate}.go-to-center-button svg{width:70%;height:70%}.go-to-center-button.wobble-animation{animation:wobble .8s infinite}.go-to-center-button.pop-animation,.sound-toggle-button.pop-animation{animation:pop .2s ease-out}.info-text{position:absolute;bottom:var(--ui-padding);left:50%;transform:translate(-50%);color:var(--light-text-color);font-size:1.1em;font-family:var(--font-family-display);text-align:center;text-shadow:0 0 8px var(--ui-accent-glow);z-index:10;padding:8px 15px;background-color:var(--ui-glass-bg);border-radius:10px;border:1px solid var(--ui-border-color);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 10px var(--ui-shadow-color);pointer-events:auto;max-width:80%;box-sizing:border-box}.info-text .text-fade-in{opacity:0;animation:fadeInText 1s ease-out forwards;animation-delay:.7s;display:inline-block}@keyframes fadeInText{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.custom-tooltip{position:fixed;padding:8px 12px;background-color:var(--lumina-highlight);color:#1a1a2e;border-radius:5px;font-size:.9em;white-space:nowrap;opacity:0;transform:translate(-50%) translateY(10px);animation:tooltipFadeIn .2s ease-out forwards;pointer-events:none;z-index:1001;box-shadow:0 2px 8px #0006;font-family:var(--font-family-body)}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulse-glow{0%{transform:scale(1.1);box-shadow:0 0 35px var(--lumina-border),0 0 60px var(--ui-secondary-glow),inset 0 0 25px var(--ui-primary-glow)}50%{transform:scale(1.12);box-shadow:0 0 45px var(--lumina-active-border),0 0 70px var(--ui-secondary-glow),inset 0 0 30px var(--ui-primary-glow)}to{transform:scale(1.1);box-shadow:0 0 35px var(--lumina-border),0 0 60px var(--ui-secondary-glow),inset 0 0 25px var(--ui-primary-glow)}}@keyframes spectral-flicker{0%{background-color:var(--spectral-main);box-shadow:0 0 35px var(--spectral-main),0 0 60px var(--spectral-main),inset 0 0 25px #ff69b4b3}50%{background-color:var(--spectral-highlight);box-shadow:0 0 45px var(--spectral-highlight),0 0 70px var(--spectral-highlight),inset 0 0 30px #ff69b4e6}to{background-color:var(--spectral-main);box-shadow:0 0 35px var(--spectral-main),0 0 60px var(--spectral-main),inset 0 0 25px #ff69b4b3}}@keyframes border-pulse{0%{border-color:var(--lumina-border)}50%{border-color:var(--lumina-active-border)}to{border-color:var(--lumina-border)}}@keyframes border-pulse-spectral{0%{border-color:var(--spectral-border)}50%{border-color:var(--spectral-active-border)}to{border-color:var(--spectral-border)}}@keyframes float-wobble{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(1deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(3px) rotate(-1deg)}to{transform:translateY(0) rotate(0)}}@keyframes wobble{0%,to{transform:translate(0) translateY(0) scale(1.1)}15%{transform:translate(-5px) translateY(-5px) scale(1.1)}30%{transform:translate(5px) translateY(5px) scale(1.1)}45%{transform:translate(-5px) translateY(5px) scale(1.1)}60%{transform:translate(5px) translateY(-5px) scale(1.1)}75%{transform:translate(-2px) translateY(-2px) scale(1.1)}90%{transform:translate(2px) translateY(2px) scale(1.1)}}@keyframes pop{0%{transform:scale(.95)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes sound-pulse{0%{transform:scale(1);box-shadow:0 0 10px #00ffff80}50%{transform:scale(1.05);box-shadow:0 0 20px #0ffc,0 0 30px #0ff9}to{transform:scale(1);box-shadow:0 0 10px #00ffff80}}@media (max-width: 768px){:root{--ui-padding: 15px;--button-size-lg: 65px;--button-size-sm: 50px;--button-size-xs: 35px;--gap-md: 15px}.app-logo{width:120px;height:120px;top:var(--ui-padding);left:var(--ui-padding)}.scene-selection-buttons-container{flex-direction:column;gap:var(--gap-md);top:calc(var(--ui-padding) + 120px);left:var(--ui-padding);transform:translate(0);align-items:flex-start;padding:10px 15px}.scene-button svg{width:60%;height:60%}.utility-buttons-right{top:var(--ui-padding);right:var(--ui-padding);gap:8px;padding:10px}.info-text{font-size:.9em;padding:6px 12px;bottom:var(--ui-padding);max-width:90%}}@media (max-width: 480px){:root{--ui-padding: 10px;--button-size-lg: 55px;--button-size-sm: 45px;--button-size-xs: 30px}.app-logo{width:90px;height:90px}}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden}body{background-color:#000}
