body{margin:0;font-family:sans-serif;background-image:url(/sky.jpg);background-size:cover;background-attachment:fixed}.btn{padding:15px;border-radius:5px;cursor:pointer}.pane{position:absolute;z-index:1;padding:60px 10px 10px;width:200px;overflow:scroll;min-height:500px;max-height:90vh;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center}input{padding:10px;font-size:1rem;border-radius:5px;border:1px solid rgb(215,234,255);background-color:#fff}button{cursor:pointer;max-width:200px;font-size:1rem;border-radius:5px;border:none;background-color:#fff}.login{position:absolute;top:calc(50vh - 250px);width:300px;left:calc(50vw - 200px);background-color:#f0f8ff79;padding:70px 50px;border-radius:5px;display:flex;flex-direction:column;align-items:center}.login input{background-color:#ffffffa3;width:100%}.login button:hover{background-color:#d7eaff}.login button{margin-top:20px}h2{font-size:2rem;padding-bottom:5px;color:#566b81}.logo{width:150px}.username-text{position:absolute;z-index:5;bottom:0}.player-chat-bubble{white-space:nowrap;font-size:18px;font-weight:800;color:#ff0;stroke:1px solid black;background-color:#00000024;padding:1px 10px;pointer-events:none}#chatBox{width:calc(100% - 30px);max-width:1000px;pointer-events:none}#chatBox .chatLog::-webkit-scrollbar{display:none}#chatBox .chatLog{bottom:50px;transition:max-height .15s ease-out;height:200px;word-wrap:break-word;overflow:hidden;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}#chatBox .chatInputBar{display:flex}#chatBox .chatInputBar textarea{pointer-events:all;width:100%;border:0px;padding:5px;margin-top:auto;background-color:#ffe9cd60}#chatBox .chatInputBar button{pointer-events:all;color:#0000007a;background-color:#ffe9cd60}#chatBox .openChatButton.open{left:min(calc(100vw - 75px),950px)}#chatBox .openChatButton.open{bottom:225px;top:auto}.ui-group button{width:100%;pointer-events:all}.health-bar{content:"";background-color:red;width:10rem;height:1rem}.health-bar .fill{background-color:green;height:100%}.click-dropdown{position:absolute;padding:5px;z-index:5;display:flex;flex-direction:column;width:200px}.click-dropdown button:hover:disabled{cursor:default}.click-dropdown button:hover:enabled{opacity:1}.click-dropdown button:first-child{border-radius:5px 5px 0 0}.click-dropdown button:last-child{border-radius:0 0 5px 5px}.click-dropdown button{opacity:.6;padding:5px;background-color:#000;border-radius:0;color:#fff;border-bottom:1px solid #1e1e1e}canvas{position:static!important}.inventory.ui-element{max-width:200px;right:0}.ui-group{width:calc(100vw - 30px);pointer-events:none;z-index:2;position:absolute;height:100%;left:0;bottom:0;display:flex;align-items:end;flex-direction:column-reverse;padding:15px}.ui-group .modal{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:500px;height:500px;translate:-50% -50%;left:50vw;top:50vh}.ui-element{border:1px solid #00000060;border-radius:5px;padding:15px;background-color:#00000010;z-index:1}.damage-number{font-weight:700;font-size:24px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.damage-number.normal-damage{color:#f44}.damage-number.zero-damage{color:#48f}.damage-number.blocked-attack{color:#888;font-size:18px;text-decoration:line-through;opacity:.8}.damage-number.animation1{animation:damageNumber1 1.5s;animation-fill-mode:forwards}.damage-number.animation2{animation:damageNumber2 1.5s;animation-fill-mode:forwards}@keyframes damageNumber1{0%{transform:rotate(0);translate:45px;opacity:1}to{transform:rotate(40deg);translate:85px;opacity:0}}@keyframes damageNumber2{0%{transform:rotate(0);translate:-45px;opacity:1}to{transform:rotate(-40deg);translate:-85px;opacity:0}}.ui-element.modal{color:#fff;z-index:5;background-color:#00000096}.ui-element.modal button{background-color:#30a900}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden;transition:opacity .5s ease-out}.loading-screen.fade-out{opacity:0}.loading-content{text-align:center;color:#fff;z-index:2;position:relative;max-width:500px;padding:20px}.loading-logo{margin-bottom:40px}.game-title{font-size:4rem;font-weight:800;margin:0;background:linear-gradient(45deg,#fff,#a8d8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,255,255,.3);animation:titleGlow 2s ease-in-out infinite alternate}.game-subtitle{font-size:1.2rem;margin:10px 0 0;opacity:.8;font-weight:300}.loading-progress{margin:30px 0}.progress-bar{width:100%;height:8px;background:rgba(255,255,255,.2);border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#4CAF50,#81C784);border-radius:4px;transition:width .3s ease;box-shadow:0 0 10px #4caf5080}.progress-text{font-size:1.1rem;font-weight:600;opacity:.9}.loading-message{font-size:1.3rem;margin:20px 0;min-height:30px;font-weight:500;opacity:.9}.loading-tips{margin-top:40px;opacity:.7}.loading-tips p{margin:8px 0;font-size:.9rem;animation:fadeInUp .6s ease forwards}.loading-tips p:nth-child(1){animation-delay:.2s}.loading-tips p:nth-child(2){animation-delay:.4s}.loading-tips p:nth-child(3){animation-delay:.6s}.loading-background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}.floating-particle{position:absolute;background:rgba(255,255,255,.1);border-radius:50%;animation:float 6s ease-in-out infinite}.particle-1{width:20px;height:20px;top:20%;left:10%;animation-delay:0s}.particle-2{width:15px;height:15px;top:60%;left:80%;animation-delay:1s}.particle-3{width:25px;height:25px;top:80%;left:20%;animation-delay:2s}.particle-4{width:12px;height:12px;top:30%;left:70%;animation-delay:3s}.particle-5{width:18px;height:18px;top:70%;left:60%;animation-delay:4s}@keyframes titleGlow{0%{text-shadow:0 0 20px rgba(255,255,255,.3)}to{text-shadow:0 0 40px rgba(255,255,255,.6)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:.7;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.1}50%{transform:translateY(-20px) rotate(180deg);opacity:.3}}