:root{--font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-color: #0b1017;--accent-amber: #f59e0b;--accent-cyan: #38bdf8;--glass-bg: rgba(15, 23, 42, .72);--glass-border: rgba(255, 255, 255, .12);--text-main: #f8fafc;--text-muted: #94a3b8}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-family);color:var(--text-main);-webkit-font-smoothing:antialiased}#app{position:relative;width:100%;height:100%}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#canvas-container canvas{width:100%!important;height:100%!important;display:block;outline:none}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:24px}.header-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);padding:10px 20px;border-radius:30px;box-shadow:0 8px 32px #00000059;pointer-events:auto}.pulse-dot{width:8px;height:8px;border-radius:50%;background-color:var(--accent-amber);box-shadow:0 0 10px var(--accent-amber);animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}.title-text{font-size:13px;font-weight:600;letter-spacing:1.5px;color:var(--text-main);text-transform:uppercase}.subtitles-overlay{position:absolute;bottom:90px;left:50%;transform:translate(-50%);z-index:20;width:90%;max-width:600px;pointer-events:auto}.subtitles-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;padding:20px 24px;box-shadow:0 12px 40px #00000073;display:flex;flex-direction:column;gap:14px;transition:opacity .4s ease,transform .4s ease}.subtitles-card.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.avatar-badge{display:flex;align-items:center;gap:8px}.avatar-dot{width:8px;height:8px;border-radius:50%;background-color:#38bdf8}.avatar-name{font-size:12px;font-weight:600;color:#94a3b8;letter-spacing:1px;text-transform:uppercase}.subtitles-text{font-size:16px;font-weight:400;line-height:1.5;color:#f8fafc;min-height:48px;transition:opacity .2s ease}.subtitles-actions{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.subtitles-step{font-size:12px;color:#64748b}.subtitles-next-btn,.subtitles-close-btn,.reopen-welcome-btn{background:#ffffff14;border:1px solid var(--glass-border);color:#f8fafc;font-family:var(--font-family);font-size:13px;font-weight:600;padding:8px 16px;border-radius:12px;cursor:pointer;transition:background .2s ease,transform .2s ease}.subtitles-next-btn:hover,.subtitles-close-btn:hover,.reopen-welcome-btn:hover{background:#ffffff29;transform:translateY(-1px)}.reopen-welcome-btn{position:fixed;bottom:24px;left:24px;z-index:20}.reopen-welcome-btn.hidden{display:none}.controls-hint-overlay{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:20;pointer-events:auto}.controls-hint-card{display:flex;align-items:center;gap:16px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);padding:10px 24px;border-radius:30px;box-shadow:0 8px 32px #0000004d;transition:opacity .6s ease,transform .6s ease}.controls-hint-card.faded{opacity:.25}.controls-hint-card:hover{opacity:1}.key-group{display:flex;align-items:center;gap:6px}.key{background:#ffffff1f;border:1px solid rgba(255,255,255,.2);color:#f8fafc;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;box-shadow:0 2px 4px #0003}.key.highlight{background:#f59e0b40;border-color:#f59e0b99;color:#fef3c7}.label{font-size:12px;color:#94a3b8;font-weight:500;margin-left:2px}.key-divider{width:1px;height:16px;background:#ffffff1f}.loader-screen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:120;background:radial-gradient(circle at center,#26160b,#140b05 65%,#080402);display:flex;justify-content:center;align-items:center;overflow:hidden;transition:opacity .8s cubic-bezier(.25,1,.5,1),visibility .8s ease}.loader-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,transparent 40%,rgba(0,0,0,.75) 100%);pointer-events:none}.loader-embers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.ember{position:absolute;bottom:-10px;background:radial-gradient(circle,#fde68a 0%,#d97706 70%,transparent 100%);border-radius:50%;opacity:0;filter:blur(.5px);animation:floatEmber linear infinite}@keyframes floatEmber{0%{transform:translateY(0) scale(.5) rotate(0);opacity:0}20%{opacity:.6}80%{opacity:.5}to{transform:translateY(-105vh) scale(1.1) rotate(120deg);opacity:0}}.loader-center-panel{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:28px}.sigil-3d-stage{position:relative;width:220px;height:220px;perspective:1000px;display:flex;justify-content:center;align-items:center}.sigil-3d-wrapper{position:relative;width:160px;height:160px;transform-style:preserve-3d;transform:rotateX(22deg) rotateY(8deg);transition:transform .25s ease-out;display:flex;justify-content:center;align-items:center}.sigil-ring{position:absolute;border-radius:50%;transform-style:preserve-3d}.ring-outer{width:160px;height:160px;border:2px solid #b45309;border-top-color:#fde68a;border-bottom-color:#78350f;animation:rotateOuterRing 14s linear infinite}.ring-middle{width:120px;height:120px;border:1.5px dashed #92400e;border-left-color:#d97706;border-right-color:#451a03;animation:rotateMiddleRing 10s linear infinite reverse}.ring-inner{width:84px;height:84px;border:1.5px solid #78350f;border-top-color:#fef3c7;animation:rotateInnerRing 6s ease-in-out infinite alternate}.sigil-core{position:absolute;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#881337,#4c0519 80%,#1e1b4b);border:1.5px solid #d97706;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 16px #0009;animation:pulseCore 3.5s ease-in-out infinite}.sigil-fleur{font-size:28px;color:#fef3c7;text-shadow:0 2px 8px rgba(0,0,0,.8);transform:translateZ(12px)}@keyframes rotateOuterRing{0%{transform:rotate(0) rotateX(20deg)}to{transform:rotate(360deg) rotateX(20deg)}}@keyframes rotateMiddleRing{0%{transform:rotate(0) rotateY(25deg)}to{transform:rotate(360deg) rotateY(25deg)}}@keyframes rotateInnerRing{0%{transform:rotate(-30deg) rotateX(10deg)}to{transform:rotate(30deg) rotateX(10deg)}}@keyframes pulseCore{0%,to{transform:scale(1) translateZ(6px)}50%{transform:scale(1.05) translateZ(10px)}}.progress-svg{position:absolute;top:0;left:0;width:220px;height:220px;transform:rotate(-90deg);transform-origin:50% 50%;pointer-events:none}.progress-bg{fill:none;stroke:#d977061a;stroke-width:3}.progress-bar{fill:none;stroke:#d97706;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:616;stroke-dashoffset:616;transition:stroke-dashoffset .25s cubic-bezier(.25,1,.5,1)}.loader-typography{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}.loader-brand{font-family:Cinzel,serif;font-size:28px;font-weight:800;letter-spacing:5px;color:#fef3c7;text-shadow:0 2px 8px rgba(0,0,0,.7)}.loader-status{font-family:MedievalSharp,cursive,serif;font-size:15px;color:#94a3b8;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.8);min-height:22px}.loader-percent{font-family:Cinzel,serif;font-size:13px;font-weight:700;letter-spacing:2px;color:#d97706}.cinematic-fade{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background-color:#000;opacity:1;pointer-events:none;transition:opacity 1.2s cubic-bezier(.25,1,.5,1)}.cinematic-fade.fade-out{opacity:0}.cinematic-fade.hidden{display:none!important}.speech-bubble-overlay{position:absolute;top:0;left:0;transform:translate(calc(-100% - 18px),-50%);z-index:100;pointer-events:auto;opacity:1;transform-origin:right center;transition:opacity .4s ease}.speech-bubble-overlay:not(.hidden) .medieval-scroll{animation:medievalUnfold .8s cubic-bezier(.175,.885,.32,1.275) forwards}.speech-bubble-overlay.hidden{opacity:0!important;display:none!important;pointer-events:none!important}@keyframes medievalUnfold{0%{opacity:0;transform:scale(.55) translateY(40px) rotate(-6deg);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}65%{transform:scale(1.05) translateY(-8px) rotate(1.5deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0);filter:drop-shadow(0 20px 45px rgba(0,0,0,.7))}}.medieval-scroll{position:relative;background:linear-gradient(135deg,#fff3,#0000000d),linear-gradient(180deg,#fefae0,#fef3c7 35%,#fde68a 85%,#f5d47a);border:3px solid #78350f;border-radius:8px;padding:22px 26px 18px;width:350px;max-width:90vw;box-shadow:inset 0 0 30px #b4530959,inset 0 0 8px #78350f66,0 15px 35px #000000a6;color:#2b1402;font-family:MedievalSharp,Cinzel,Georgia,serif}.medieval-scroll:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border:1px solid rgba(180,83,9,.45);border-radius:4px;pointer-events:none}.scroll-corner{position:absolute;width:10px;height:10px;border:2px solid #92400e}.scroll-corner.top-left{top:3px;left:3px;border-right:none;border-bottom:none}.scroll-corner.top-right{top:3px;right:3px;border-left:none;border-bottom:none}.scroll-corner.bottom-left{bottom:3px;left:3px;border-right:none;border-top:none}.scroll-corner.bottom-right{bottom:3px;right:3px;border-left:none;border-top:none}.scroll-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;border-bottom:1px solid rgba(146,64,14,.3);padding-bottom:6px}.scroll-title{font-family:Cinzel,serif;font-weight:900;font-size:13px;letter-spacing:3px;color:#78350f;text-shadow:0 1px 0 rgba(255,255,255,.6)}.fleur{color:#b45309;font-size:14px}.scroll-content{font-size:17px;line-height:1.55;color:#2b1303;margin-bottom:12px;text-shadow:0 1px 0 rgba(255,255,255,.4)}.initial-letter{font-family:Cinzel,serif;font-size:32px;font-weight:900;color:#991b1b;float:left;line-height:.85;margin-right:6px;text-shadow:1px 1px 0 rgba(254,243,199,.8)}.scroll-footer{display:flex;justify-content:flex-end;align-items:center}.wax-seal-btn{background:radial-gradient(circle at 35% 35%,#dc2626,#991b1b 60%,#7f1d1d);border:2px dashed rgba(254,240,138,.4);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 2px 4px #ffffff73,inset 0 -3px 6px #0009,0 8px 18px #7f1d1d99;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;outline:none}.wax-seal-btn:hover{transform:scale(1.18) rotate(5deg);box-shadow:inset 0 2px 5px #fff9,0 10px 24px #991b1bcc}.wax-inner{color:#fef08a;font-size:24px;font-weight:900;text-shadow:0 -1px 1px rgba(0,0,0,.7),0 1px 2px rgba(254,240,138,.8)}.scroll-pointer{position:absolute;right:-14px;top:62%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:14px solid #78350f}.scroll-pointer:after{content:"";position:absolute;right:2px;top:-8px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fde68a}.medieval-bottom-hint{position:absolute;bottom:28px;left:50%;transform:translate(-50%);z-index:100;pointer-events:none;animation:hintSlideUp .7s cubic-bezier(.175,.885,.32,1.275) forwards;transition:opacity .8s ease,transform .8s ease}.medieval-bottom-hint.fade-out{opacity:0;transform:translate(-50%,20px) scale(.95)}@keyframes hintSlideUp{0%{opacity:0;transform:translate(-50%,40px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.hint-inner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#ffffff40,#0000000d),linear-gradient(180deg,#fefae0,#fef3c7 40%,#fde68a);border:2px solid #78350f;border-radius:30px;padding:12px 28px;box-shadow:inset 0 0 15px #b453094d,0 10px 30px #0009;color:#2b1402;font-family:MedievalSharp,Georgia,serif;font-size:15px;white-space:nowrap}.hint-fleur{color:#b45309;font-size:16px}.hint-text strong{color:#991b1b;font-family:Cinzel,serif;font-weight:800}