:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body{height:100%;margin:0;padding:0;overflow:hidden}body{display:flex;align-items:center;justify-content:center;background:#102;overflow:hidden}.game-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;background:#000}.game-container{width:100vw;height:auto;max-width:calc(100vh * (16 / 9));max-height:100vh;aspect-ratio:16 / 9;background:#333;position:relative}.location-container{width:80%;height:94.8%;background:#999;aspect-ratio:3 / 2;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0}.ui-side-pane-wrapper{position:absolute;top:0;right:0;width:20%;height:100%;z-index:11}.ui-side-pane{display:flex;width:100%;height:100%;background-color:#444;align-items:center}.fun-button{display:block;padding:5px 10px;margin:0;font-size:100%;border:1px solid silver;width:100%;height:100%}.navigation-container{justify-content:center;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:50%;height:auto;margin:auto}.navigation-item{margin:auto;display:flex;align-items:center;justify-content:center}.ui-bottom-pane-wrapper{position:absolute;bottom:0;left:0;width:100%;height:5.46875%;z-index:10}.ui-bottom-pane{display:flex;width:100%;height:100%;background-color:#333;align-items:center}.stat-bar-wrapper{width:15%;height:40%;margin:0 .5%;background-color:#000;border:2px solid #999;border-radius:999px;box-shadow:0 0 12px #000c;overflow:hidden;position:relative}.stat-bar-fill{height:100%;border-radius:none;transition:width .4s ease-in-out;text-align:center;z-index:1}.stat-bar-text{font-size:1.7cqh;line-height:1.7cqh;font-weight:700;font-style:italic;color:#ddd;text-shadow:0px 0px 5px black;font-family:Jost,sans-serif;font-optical-sizing:auto;z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.stat-bar-fill-color-red{background:linear-gradient(to bottom,#c00,#300)}.stat-bar-fill-color-blue{background:linear-gradient(to bottom,#00c,#003)}.stat-bar-fill-color-yellow{background:linear-gradient(to bottom,#cc0,#330)}.ui-top-pane-wrapper{position:absolute;top:0;left:0;width:40%;z-index:10;cursor:default}.ui-top-pane{position:relative;padding:2% 5% 8% 2%;color:#fff;border-radius:0;-webkit-user-select:none;user-select:none}.ui-top-pane:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#00000080 70%,#0000);z-index:-1;transition:opacity 2s ease-out;border-radius:0}.ui-top-pane.hidden:before{opacity:0}.ui-top-pane.visible:before,.ui-top-pane-wrapper:hover .ui-top-pane:before{opacity:1}.location-name{margin:0 0 5px;font-size:2.2cqh;font-weight:700;text-shadow:0px 0px 4px rgba(0,0,0,.8);position:relative;transition:opacity 2s ease-out;z-index:1}.ui-top-pane.hidden .location-name{opacity:.5}.ui-top-pane.visible .location-name,.ui-top-pane-wrapper:hover .location-name{opacity:1}.location-description{margin:0;font-size:1.5cqh;font-style:italic;text-shadow:0px 0px 2px rgba(0,0,0,.8);transition:opacity 2s ease-out;position:relative;z-index:1}.location-description.hidden{opacity:0}.location-description.visible,.ui-top-pane-wrapper:hover .location-description{opacity:.9}.ui-main-pane-wrapper{position:relative;width:80%;height:94.53125%}.location-container{position:relative;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.character{width:12%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;border-radius:0;overflow:visible;background-color:#0000;transition:background-color .3s ease;cursor:pointer;container-type:size}.character:hover{background-color:#0006}.character-name{position:absolute;top:-10cqh;height:9cqh;left:0;right:0;text-align:center;-webkit-user-select:none;user-select:none;font-size:7cqh;line-height:8cqh;font-weight:400;color:#ddd;text-shadow:1px 1px 3px black;padding:0 5px;font-family:Quicksand,sans-serif;transition:color .3s ease,text-shadow .3s ease}.character:hover .character-name{color:#fff;text-shadow:3px 5px 5px black}.character-carousel{position:absolute;bottom:0;left:0;display:flex;gap:10px;background:transparent;padding:0 20px 0 0;border-radius:0;width:100%;height:30%}.character-dialogue-wrapper{position:absolute;width:100%;height:100%;left:0;bottom:0;pointer-events:none}.character-dialogue-backdrop{position:absolute;left:0;bottom:0;width:100%;height:60%;z-index:5;-webkit-user-select:none;user-select:none}.character-dialogue-backdrop img{position:absolute;left:0;bottom:0;height:100%;width:auto;object-fit:contain}.character-dialogue-content{position:absolute;width:67%;height:30%;right:3%;bottom:3%;background:linear-gradient(to bottom,#4080ff,#5cc0ffb3);border-radius:3cqh;border:.5cqh solid rgba(128,192,255,1);box-shadow:0 10px 10px #00000080;padding:0;color:#fff;z-index:10;pointer-events:auto}.character-dialogue{width:100%;height:100%;cursor:pointer}.dialogue-content{width:100%;height:100%;display:block;position:relative;overflow:hidden}.dialogue-speaker{font-size:3.5cqh;text-align:left;-webkit-user-select:none;user-select:none;border-bottom:.5cqh solid rgba(128,192,255,1);padding:.5cqh 4cqh;height:18%;width:auto;overflow:hidden;font-family:Cherry Swash,serif;font-weight:700;font-style:normal;text-shadow:0 0 5px rgba(0,0,0,.5)}.dialogue-text{font-size:3cqh;text-align:left;overflow-y:auto;padding:1.5cqh 2.5cqh;height:66%;width:auto;font-family:Quicksand,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;position:relative;-webkit-user-select:none;user-select:none}.character-choices{width:100%;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:stretch;overflow:auto}.choice-button{width:100%;background:linear-gradient(to bottom,#fff0,#fff0);border:none;outline:none;color:#fff;font-weight:700;font-size:2.5cqh;padding:2cqh;text-align:left;display:flex;align-items:center;cursor:pointer;transition:background .2s;position:relative;border-radius:0}.choice-button:hover{background:linear-gradient(to bottom,#80c0ff00,#ffffff4d)}.choice-emoji{display:inline-block;width:2.5cqh;min-width:2.5cqh;text-align:center;margin-right:1.5cqh;opacity:0;transition:opacity .2s,transform .5s cubic-bezier(.4,0,.2,1);transform:translate(-5px)}.choice-button:hover .choice-emoji{opacity:1;transform:translate(0)}.choice-text{flex:1;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.6)}.character-loader{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.spinner{width:5cqh;height:5cqh;border:.7cqh solid rgba(255,255,255,.2);border-top:.7cqh solid #3af;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 16px #3af,0 0 4px #fff}.dialogue-continue-indicator{position:absolute;bottom:1cqh;right:2cqh;font-size:2.5cqh;color:#fffc;animation:bob 1.5s ease-in-out infinite;text-shadow:0 0 5px rgba(0,0,0,.3)}.dialogue-end-indicator{position:absolute;bottom:1cqh;right:2cqh;font-size:3.5cqh;color:#ffffffe6;animation:twinkle 2s ease-in-out infinite;text-shadow:0 0 8px rgba(255,255,255,.5)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes twinkle{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.character-dialogue-close{position:absolute;top:1cqh;right:0;z-index:20;background:transparent;color:#fff;border:none;width:4cqh;height:4cqh;font-size:3cqh;font-weight:700;cursor:pointer;transition:background .2s,color .2s,text-shadow .2s;text-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;opacity:.5}.character-dialogue-close:hover,.character-dialogue-close:focus{opacity:1;text-shadow:0 2px 12px rgba(0,0,0,.3)}.ui-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none}.ui-loader.visible{pointer-events:auto}.ui-loader-background{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;transition:opacity .35s ease}.ui-loader.visible .ui-loader-background{opacity:1}.ui-loader .spinner{width:5cqh;height:5cqh;border:.7cqh solid rgba(255,255,255,.2);border-top:.7cqh solid #3af;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 16px #3af,0 0 4px #fff;opacity:0;transform:scale(.7);transition:opacity .5s ease,transform .5s ease;z-index:1001}.ui-loader.show-spinner .spinner{opacity:1;transform:scale(1)}@keyframes spin{0%{transform:rotate(0) scale(1)}to{transform:rotate(360deg) scale(1)}}.login-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(to bottom,#2d1b69,#1e1346,#100a23 60%,#000);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;gap:8%}.game-title{z-index:9;font-size:4.5rem;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(74,144,226,.8),0 0 40px rgba(74,144,226,.4),0 0 60px rgba(74,144,226,.2),0 4px 8px rgba(0,0,0,.8);letter-spacing:8px;margin-bottom:2rem;animation:title-glow 3s ease-in-out infinite alternate;font-family:IM Fell English SC,serif;-webkit-user-select:none;user-select:none}@keyframes title-glow{0%{text-shadow:0 0 20px rgba(74,144,226,.8),0 0 40px rgba(74,144,226,.4),0 0 60px rgba(74,144,226,.2),0 4px 8px rgba(0,0,0,.8)}to{text-shadow:0 0 35px rgba(24,192,255,1),0 0 60px rgba(24,192,255,.6),0 0 85px rgba(24,192,255,.3),0 4px 8px rgba(0,0,0,.8)}}.login-container{z-index:10;background:linear-gradient(145deg,#1a1a2e,#16213e);border:2px solid #4a90e2;border-radius:12px;box-shadow:0 0 20px #4a90e24d,0 8px 32px #00000080,inset 0 1px #ffffff1a;padding:2.5rem;min-width:320px;max-width:400px;width:90%;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:-1rem}.login-container:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#4a90e2,#7b68ee,#4a90e2);border-radius:14px;z-index:-1;opacity:.4;animation:border-glow 5s ease-in-out infinite alternate}@keyframes border-glow{0%{opacity:.4}to{opacity:.6}}.login-form{display:flex;flex-direction:column;gap:1.5rem}.login-title{text-align:center;margin:0 0 1.5rem;color:#fff;font-size:2rem;font-weight:700;text-shadow:0 0 10px rgba(74,144,226,.8);letter-spacing:2px}.login-error{background:linear-gradient(145deg,#2d1b1b,#1a0f0f);border:1px solid #e74c3c;color:#ff6b6b;padding:1rem;border-radius:8px;font-family:Quicksand,sans-serif;font-size:1rem;text-align:center;margin-bottom:1rem;box-shadow:0 0 10px #e74c3c4d;text-shadow:0 0 5px rgba(255,107,107,.5)}.form-group{display:flex;flex-direction:column;gap:.1rem}.form-label{color:#b8c5d6;font-family:Quicksand,sans-serif;font-weight:600;font-size:1.2rem;text-shadow:0 0 5px rgba(184,197,214,.3);letter-spacing:.5px;-webkit-user-select:none;user-select:none}.form-input{padding:.7rem 1rem;background:linear-gradient(145deg,#0f1419,#1a1f2e);border:2px solid #2c3e50;border-radius:8px;color:#fff;font-family:Quicksand,sans-serif;font-size:1.1rem;transition:all .3s ease;box-shadow:inset 0 2px 4px #0000004d,0 0 #4a90e200}.form-input[type=password]{letter-spacing:.4rem}.form-input:focus{outline:none;border-color:#4a90e2;box-shadow:inset 0 2px 4px #0000004d,0 0 15px #4a90e266;background:linear-gradient(145deg,#1a1f2e,#2a2f3e)}.form-input::placeholder{color:#6c7b7f}.login-button{background:linear-gradient(145deg,#4a90e2,#357abd);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:1rem;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #4a90e24d,inset 0 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.5)}.login-button:hover{background:linear-gradient(145deg,#5ba0f2,#4a90e2);box-shadow:0 6px 20px #4a90e266,inset 0 1px #ffffff4d;transform:translateY(-2px)}.login-button:active{background:linear-gradient(145deg,#357abd,#2c5aa0);transform:translateY(0);box-shadow:0 2px 10px #4a90e24d,inset 0 1px #ffffff1a}.login-circle{z-index:1;background-image:url(/images/ui/login_spell_circle2.png);position:absolute;bottom:-40vh;right:-40vh;height:100vh;aspect-ratio:1/1;background-size:cover;animation:rotate-bg 120s linear infinite}@keyframes rotate-bg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}