*{margin:0;padding:0;box-sizing:border-box}body{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden;height:100vh;background:#000}#container{width:100vw;height:100vh;position:relative;background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce)}#canvas{width:100%;height:100%;display:block;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364)}.bg-pattern{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.1;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px);pointer-events:none}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.top-bar{pointer-events:auto;background:#000000e6;backdrop-filter:blur(20px);border-bottom:3px solid #007bff;padding:15px 30px;box-shadow:0 4px 30px #007bff4d}.navbar-custom{display:flex;justify-content:space-between;align-items:center}.brand-link-custom{display:flex;align-items:center;gap:15px;text-decoration:none}.brand-image-custom{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#007bff,#0056b3);display:flex;align-items:center;justify-content:center;box-shadow:0 0 25px #007bff99;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 25px #007bff99}50%{box-shadow:0 0 40px #007bffe6}}.brand-image-custom i{font-size:1.8rem;color:#fff}.brand-text-custom h1{font-size:1.8rem;font-weight:600;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,123,255,.5)}.brand-text-custom p{font-size:.85rem;color:#17a2b8;margin:0;opacity:.9}.info-badges{display:flex;gap:10px}#welcome-screen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:auto;z-index:100;max-width:600px;width:90%}.card-welcome{background:#000000e6;backdrop-filter:blur(20px);border-radius:15px;border:1px solid rgba(0,123,255,.3);box-shadow:0 20px 60px #00000080}.card-header-welcome{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border-radius:15px 15px 0 0;padding:20px;border-bottom:none}.card-header-welcome h2{font-size:2rem;margin:0;font-weight:600}.card-body-welcome{padding:40px 30px}.card-body-welcome p{font-size:1.1rem;color:#aaa;margin-bottom:30px}#options-panel{position:absolute;left:50%;bottom:80px;transform:translate(-50%);width:90%;max-width:1200px;pointer-events:auto;display:none;opacity:0;transition:opacity .5s}#options-panel.active{display:block;opacity:1}.options-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;margin-bottom:20px}.circle-option{position:relative;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;flex-direction:column;align-items:center;gap:12px;width:140px}.circle-btn{width:110px;height:110px;border-radius:50%;background:#000000e6;backdrop-filter:blur(20px);border:3px solid rgba(0,123,255,.4);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all .4s ease;box-shadow:0 8px 30px #0009}.circle-btn:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(0,123,255,.2),transparent);opacity:0;transition:opacity .4s ease}.circle-btn:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);background-size:200% 200%;animation:shimmer 3s infinite;opacity:.3}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.circle-option:hover .circle-btn{transform:scale(1.15) translateY(-5px);border-color:#007bff;box-shadow:0 15px 50px #007bff99}.circle-option:hover .circle-btn:before{opacity:1}.circle-option:active .circle-btn{transform:scale(1.05) translateY(-2px)}.circle-icon{font-size:2.5rem;position:relative;z-index:2;transition:all .3s ease}.circle-option:hover .circle-icon{transform:scale(1.1);filter:drop-shadow(0 0 10px currentColor)}.circle-label{text-align:center;color:#fff;font-size:.85rem;font-weight:600;line-height:1.3;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:100%;word-wrap:break-word;transition:all .3s ease}.circle-option:hover .circle-label{color:#17a2b8;transform:translateY(-2px)}.circle-btn.btn-primary{border-color:#007bff80}.circle-btn.btn-primary .circle-icon{color:#007bff}.circle-option:hover .circle-btn.btn-primary{border-color:#007bff;box-shadow:0 15px 50px #007bff99}.circle-btn.btn-danger{border-color:#dc354580}.circle-btn.btn-danger .circle-icon{color:#dc3545}.circle-option:hover .circle-btn.btn-danger{border-color:#dc3545;box-shadow:0 15px 50px #dc354599}.circle-btn.btn-info{border-color:#17a2b880}.circle-btn.btn-info .circle-icon{color:#17a2b8}.circle-option:hover .circle-btn.btn-info{border-color:#17a2b8;box-shadow:0 15px 50px #17a2b899}.circle-btn.btn-success{border-color:#28a74580}.circle-btn.btn-success .circle-icon{color:#28a745}.circle-option:hover .circle-btn.btn-success{border-color:#28a745;box-shadow:0 15px 50px #28a74599}.circle-btn.btn-warning{border-color:#ffc10780}.circle-btn.btn-warning .circle-icon{color:#ffc107}.circle-option:hover .circle-btn.btn-warning{border-color:#ffc107;box-shadow:0 15px 50px #ffc10799}.circle-btn.btn-secondary{border-color:#6c757d80}.circle-btn.btn-secondary .circle-icon{color:#6c757d}.circle-option:hover .circle-btn.btn-secondary{border-color:#6c757d;box-shadow:0 15px 50px #6c757d99}#subtitles-container{position:absolute;bottom:30px;left:50%;transform:translate(-50%);width:90%;max-width:1200px;pointer-events:none;z-index:50}.alert-custom{background:#000000f2;backdrop-filter:blur(30px);color:#fff;padding:20px 30px;border-radius:10px;border-left:4px solid #17a2b8;box-shadow:0 10px 50px #000c;display:flex;align-items:center;justify-content:center;text-align:center;min-height:60px;opacity:0;transition:opacity .5s}.alert-custom.active{opacity:1}.alert-custom i{font-size:1.5rem;margin-right:15px;color:#17a2b8;flex-shrink:0}#subtitles-text{flex:1;font-size:1.3rem;line-height:1.6;font-weight:500}.overlay-custom{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000}.overlay-content{text-align:center;color:#fff}.overlay-content h4{font-size:1.5rem;margin-bottom:20px;font-weight:600}.particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.particle{position:absolute;width:4px;height:4px;background:#007bff99;border-radius:50%;animation:float-particle 15s infinite}@keyframes float-particle{0%{transform:translateY(100vh) translate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100px) translate(100px);opacity:0}}@media (max-width: 768px){.card-body-welcome{padding:30px 20px}.info-badges{display:none}}#rotate-overlay{position:fixed;inset:0;background:radial-gradient(circle at center,#020617,#000);display:none;align-items:center;justify-content:center;z-index:5000}.rotate-box{background:#000000d9;backdrop-filter:blur(20px);border-radius:20px;padding:50px 40px;text-align:center;border:2px solid #007bff;box-shadow:0 0 50px #007bff99;animation:pulseGlow 2s infinite;max-width:90%}.rotate-box i{font-size:4rem;color:#0dcaf0;margin-bottom:20px}.rotate-box h2{color:#fff;font-size:2rem;margin-bottom:10px}.rotate-box p{color:#aaa;font-size:1.1rem}.rotate-icon{margin-top:20px;font-size:2.5rem;color:#0dcaf0;animation:rotateAnim 2s linear infinite}@keyframes rotateAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 40px #007bff80}50%{box-shadow:0 0 70px #007bffe6}}@media (max-width: 1024px) and (orientation: landscape){.card-welcome{transform:scale(.9)}.top-bar{padding:10px 20px}.brand-text-custom h1{font-size:1.4rem}}@media (max-width: 1024px) and (orientation: landscape){.top-bar{padding:8px 15px}.brand-text-custom h1{font-size:1.2rem}.brand-text-custom p{font-size:.7rem}.brand-image-custom{width:35px;height:35px}.brand-image-custom i{font-size:1.3rem}.card-welcome{transform:scale(.85);max-width:500px}#options-panel{bottom:40px;max-width:95%}.circle-option{width:80px;gap:6px}.circle-btn{width:60px;height:60px;border-width:2px}.circle-icon{font-size:1.5rem}.circle-label{font-size:.65rem;line-height:1.2}.options-grid{gap:12px;padding:0 10px}.alert-custom{padding:12px 16px;min-height:45px}#subtitles-text{font-size:.9rem;line-height:1.4}.alert-custom i{font-size:1.2rem;margin-right:10px}#subtitles-container{bottom:20px;max-width:95%}}@media (max-width: 768px) and (orientation: landscape){.top-bar{padding:6px 12px}.brand-text-custom h1{font-size:1rem}.brand-text-custom p{font-size:.6rem}.brand-image-custom{width:30px;height:30px}.brand-image-custom i{font-size:1.1rem}.card-welcome{transform:scale(.75);max-width:450px}#options-panel{bottom:25px}.circle-option{width:65px;gap:5px}.circle-btn{width:50px;height:50px;border-width:2px}.circle-icon{font-size:1.2rem}.circle-label{font-size:.6rem;line-height:1.1}.options-grid{gap:10px;padding:0 5px}.alert-custom{padding:10px 12px;min-height:40px}#subtitles-text{font-size:.8rem;line-height:1.3}.alert-custom i{font-size:1rem;margin-right:8px}#subtitles-container{bottom:15px}.info-badges{display:none}}@media (max-width: 640px) and (orientation: landscape){.top-bar{padding:5px 10px}.brand-text-custom h1{font-size:.9rem}.brand-text-custom p{display:none}.card-welcome{transform:scale(.7);max-width:400px}#options-panel{bottom:20px}.circle-option{width:55px;gap:4px}.circle-btn{width:45px;height:45px;border-width:2px}.circle-icon{font-size:1.1rem}.circle-label{font-size:.55rem;line-height:1}.options-grid{gap:8px;padding:0}.alert-custom{padding:8px 10px;min-height:35px}#subtitles-text{font-size:.75rem;line-height:1.2}.alert-custom i{font-size:.9rem;margin-right:6px}}@media (max-width: 768px) and (orientation: portrait){body,#container{overflow-y:auto}#options-panel{bottom:30px;padding-bottom:30px}.circle-option{width:90px;gap:8px}.circle-btn{width:70px;height:70px;border-width:2px}.circle-icon{font-size:1.6rem}.circle-label{font-size:.7rem}.options-grid{gap:15px}#subtitles-text{font-size:.85rem}.alert-custom{padding:10px 14px;min-height:40px}.top-bar{padding:6px 10px}.brand-text-custom h1{font-size:1rem}.brand-text-custom p{font-size:.65rem}.brand-image-custom{width:32px;height:32px}.brand-image-custom i{font-size:1.1rem}.info-badges{display:none}}@media (max-width: 480px) and (orientation: portrait){.circle-option{width:75px}.circle-btn{width:60px;height:60px}.circle-icon{font-size:1.4rem}.circle-label{font-size:.65rem}.options-grid{gap:12px}}