@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap";.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:linear-gradient(135deg,#1a1a2ef2,#16213ef2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:2px solid rgba(212,175,55,.3);box-shadow:4px 0 20px #00000080;display:flex;flex-direction:column;z-index:1000;overflow-y:auto}.sidebar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(0,0,0,.03) 10px,rgba(0,0,0,.03) 20px);opacity:.3;pointer-events:none}.sidebar-header{padding:30px 20px 20px;position:relative;z-index:1}.sidebar-header.authenticated{border-bottom:1px solid rgba(212,175,55,.2)}.sidebar-title{font-size:20px;font-weight:700;letter-spacing:2px;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 8px;text-shadow:0 0 20px rgba(212,175,55,.3)}.sidebar-user{font-size:12px;color:#fff9;margin:0;letter-spacing:1px}.sidebar-nav{flex:1;padding:20px 0;position:relative;z-index:1}.sidebar-section{margin-bottom:10px}.sidebar-item{width:100%;display:flex;align-items:center;padding:14px 20px;background:transparent;border:none;color:#fffc;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative;text-align:left;border-left:3px solid transparent}.sidebar-item:before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;background:#d4af370d;opacity:0;transition:opacity .3s ease}.sidebar-item:hover{color:#d4af37;border-left-color:#d4af37}.sidebar-item:hover:before{opacity:1}.sidebar-item.active{color:#f4d03f;border-left-color:#d4af37;background:#d4af371a}.sidebar-item.primary{font-size:16px;font-weight:600;padding:16px 20px;margin:0 10px 5px;border-radius:8px;background:linear-gradient(135deg,#d4af3726,#b8860b26);border:1px solid rgba(212,175,55,.3);border-left-width:3px;box-shadow:0 4px 15px #0000004d}.sidebar-item.primary:hover{background:linear-gradient(135deg,#d4af3740,#b8860b40);transform:translate(2px);box-shadow:0 6px 20px #d4af3733}.sidebar-icon{margin-right:12px;font-size:18px;display:flex;align-items:center;justify-content:center;width:24px}.sidebar-label{flex:1}.sidebar-arrow{font-size:20px;transition:transform .3s ease;font-weight:700}.sidebar-arrow.open{transform:rotate(90deg)}.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-left:10px}.sidebar-submenu.open{max-height:300px}.sidebar-subitem{width:100%;display:flex;align-items:center;padding:10px 20px 10px 56px;background:transparent;border:none;color:#ffffffb3;font-size:14px;cursor:pointer;transition:all .2s ease;text-align:left;border-left:2px solid transparent}.sidebar-subitem:hover{color:#d4af37;background:#d4af370d;border-left-color:#d4af37}.sidebar-sublabel{position:relative}.sidebar-sublabel:before{content:"›";margin-right:8px;color:#d4af3780}.sidebar-footer{padding:20px 0;border-top:1px solid rgba(212,175,55,.2);position:relative;z-index:1}.sidebar-item.logout{color:#ff6464cc;font-weight:600}.sidebar-item.logout:hover{color:#ff6b6b;border-left-color:#ff6b6b;background:#ff64641a}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#0003}.sidebar::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#d4af3780}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn .2s ease-in-out}.auth-modal-card{width:100%;max-width:450px;background:linear-gradient(135deg,#1a1a2efa,#16213efa);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(212,175,55,.3);border-radius:10px;padding:40px;box-shadow:0 20px 60px #000000b3,0 0 30px #d4af3726;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-modal-close{position:absolute;top:15px;right:15px;background:transparent;border:none;color:#fff9;font-size:32px;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .2s}.auth-modal-close:hover{color:#d4af37;transform:rotate(90deg)}.auth-modal-title{text-align:center;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 25px;font-size:28px;font-weight:700;letter-spacing:2px;text-shadow:0 0 20px rgba(212,175,55,.3)}.auth-modal-tabs{display:flex;gap:10px;margin-bottom:25px;border-bottom:2px solid rgba(212,175,55,.2)}.auth-tab{flex:1;padding:12px 20px;background:transparent;border:none;color:#fff9;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;position:relative;border-bottom:3px solid transparent;margin-bottom:-2px}.auth-tab:hover:not(:disabled){color:#ffffffe6}.auth-tab.active{color:#d4af37;border-bottom-color:#d4af37}.auth-tab:disabled{cursor:not-allowed;opacity:.5}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:500;color:#ffffffe6;font-size:14px}.form-group input{padding:12px;background:#ffffff0d;border:1px solid rgba(212,175,55,.3);border-radius:5px;font-size:16px;color:#fff;transition:all .2s}.form-group input:focus{outline:none;border-color:#d4af37;background:#ffffff14;box-shadow:0 0 10px #d4af3733}.form-group input:disabled{background-color:#ffffff05;cursor:not-allowed;opacity:.5}.error-message{background-color:#ff464626;border:1px solid rgba(255,70,70,.3);color:#f99;padding:12px;border-radius:5px;font-size:14px;text-align:center}.auth-button{padding:14px;background:linear-gradient(135deg,#d4af37cc,#b8860bcc);color:#fff;border:1px solid rgba(212,175,55,.5);border-radius:5px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #0000004d;margin-top:10px}.auth-button:hover:not(:disabled){background:linear-gradient(135deg,#d4af37,#b8860b);box-shadow:0 6px 20px #d4af374d;transform:translateY(-2px)}.auth-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.dashboard-page{width:100%;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#0f0f1f);display:flex;position:relative}.dashboard-login-button{position:fixed;top:20px;left:20px;padding:12px 30px;background:linear-gradient(135deg,#d4af37e6,#b8860be6);color:#fff;border:2px solid rgba(212,175,55,.5);border-radius:8px;font-size:16px;font-weight:700;font-family:Cinzel,serif;letter-spacing:1px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #0006,0 0 15px #d4af3733;z-index:1000;text-transform:uppercase}.dashboard-login-button:hover{background:linear-gradient(135deg,#d4af37,#b8860b);box-shadow:0 6px 25px #d4af3766,0 0 20px #d4af374d;transform:translateY(-2px);border-color:#d4af37}.dev-test-button{position:fixed;top:20px;left:150px;padding:12px 20px;background:linear-gradient(135deg,#ff5722e6,#b71c1ce6);color:#fff;border:2px solid rgba(255,87,34,.5);border-radius:8px;font-size:14px;font-weight:700;font-family:Cinzel,serif;letter-spacing:1px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #0006,0 0 15px #ff572233;z-index:1000;text-transform:uppercase}.dev-test-button:hover{background:linear-gradient(135deg,#ff5722,#b71c1c);box-shadow:0 6px 25px #ff572266,0 0 20px #ff57224d;transform:translateY(-2px);border-color:#ff5722}.dashboard-content{flex:1;margin-left:280px;display:flex;align-items:center;justify-content:center;padding:40px;position:relative}.dashboard-content:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 30%,rgba(212,175,55,.03) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(118,75,162,.03) 0%,transparent 50%);animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift{0%,to{opacity:.5}50%{opacity:.8}}.dashboard-title-container{position:relative;z-index:1;text-align:center}.dashboard-title{font-family:Cinzel,serif;font-size:96px;font-weight:900;letter-spacing:12px;margin:0;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37,#b8860b,#d4af37);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 80px rgba(212,175,55,.5),0 0 40px rgba(212,175,55,.3),0 10px 30px rgba(0,0,0,.8);animation:titleShine 4s ease-in-out infinite;position:relative;display:inline-block}@keyframes titleShine{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.dashboard-title:before,.dashboard-title:after{content:"⚔";position:absolute;font-size:40px;color:#d4af37;opacity:.6;animation:floatSword 3s ease-in-out infinite}.dashboard-title:before{left:-80px;top:50%;transform:translateY(-50%) rotate(-45deg)}.dashboard-title:after{right:-80px;top:50%;transform:translateY(-50%) rotate(45deg) scaleX(-1)}@keyframes floatSword{0%,to{transform:translateY(-50%) rotate(-45deg);opacity:.6}50%{transform:translateY(-60%) rotate(-45deg);opacity:.9}}@media (max-width: 1200px){.dashboard-title{font-size:72px;letter-spacing:8px}.dashboard-title:before,.dashboard-title:after{font-size:32px}.dashboard-title:before{left:-60px}.dashboard-title:after{right:-60px}}@media (max-width: 900px){.dashboard-content{margin-left:0;padding:20px}.dashboard-title{font-size:48px;letter-spacing:4px}.dashboard-title:before,.dashboard-title:after{display:none}}@media (max-width: 600px){.dashboard-title{font-size:32px;letter-spacing:2px}}.main-menu-buttons{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:60px;animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-menu-button{min-width:280px;padding:18px 48px;font-family:Cinzel,serif;font-size:22px;font-weight:700;letter-spacing:3px;text-transform:uppercase;border-radius:6px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.main-menu-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s ease}.main-menu-button:hover:before{left:100%}.continue-button{background:linear-gradient(135deg,#2a5298,#1e3a5f);color:#e8d5a3;border:2px solid rgba(212,175,55,.4);box-shadow:0 4px 20px #00000080,0 0 20px #2a52984d,inset 0 1px #ffffff1a}.continue-button:hover{background:linear-gradient(135deg,#3a6bc5,#2a5298);border-color:#d4af37b3;box-shadow:0 6px 30px #0009,0 0 30px #2a529880,inset 0 1px #ffffff26;transform:translateY(-3px)}.new-game-button{background:linear-gradient(135deg,#d4af37,#b8860b,#8b6914);color:#1a1a2e;border:2px solid rgba(244,208,63,.6);box-shadow:0 4px 20px #00000080,0 0 25px #d4af3766,inset 0 1px #fff3}.new-game-button:hover{background:linear-gradient(135deg,#f4d03f,#d4af37,#b8860b);border-color:#f4d03f;box-shadow:0 6px 35px #0009,0 0 40px #d4af3799,inset 0 1px #ffffff4d;transform:translateY(-3px)}.new-game-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.new-game-modal{background:linear-gradient(145deg,#1f1f3a,#151528);border:2px solid rgba(212,175,55,.4);border-radius:12px;padding:40px;min-width:400px;max-width:500px;position:relative;box-shadow:0 20px 60px #000c,0 0 40px #d4af3726,inset 0 1px #ffffff0d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.new-game-modal-title{font-family:Cinzel,serif;font-size:28px;font-weight:700;color:#d4af37;text-align:center;margin:0 0 30px;letter-spacing:2px;text-transform:uppercase}.new-game-options{display:flex;flex-direction:column;gap:16px}.new-game-option{display:flex;flex-direction:column;align-items:flex-start;padding:20px 24px;background:linear-gradient(135deg,#1e1e3ccc,#141428e6);border:1px solid rgba(212,175,55,.2);border-radius:8px;cursor:pointer;transition:all .25s ease;text-align:left}.new-game-option:hover{background:linear-gradient(135deg,#2a529866,#1e3a5f80);border-color:#d4af3780;transform:translate(8px);box-shadow:0 4px 20px #0006}.option-icon{font-size:28px;margin-bottom:8px}.option-label{font-family:Cinzel,serif;font-size:18px;font-weight:600;color:#e8d5a3;letter-spacing:1px}.option-desc{font-size:13px;color:#c8c8dcb3;margin-top:4px}.new-game-modal-close{display:block;width:100%;margin-top:24px;padding:12px;background:transparent;border:1px solid rgba(150,150,170,.3);border-radius:6px;color:#c8c8dcb3;font-family:Cinzel,serif;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.new-game-modal-close:hover{background:#9696aa1a;border-color:#9696aa80;color:#dcdcf0e6}.coming-soon-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#d4af37,#b8860b);color:#1a1a2e;padding:16px 32px;border-radius:8px;font-family:Cinzel,serif;font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;box-shadow:0 8px 30px #0009;animation:toastPop .3s ease-out;z-index:10}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}50%{transform:translate(-50%,-50%) scale(1.05)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width: 900px){.main-menu-buttons{margin-top:40px}.main-menu-button{min-width:240px;padding:14px 36px;font-size:18px}.new-game-modal{min-width:320px;max-width:90%;padding:30px}}@media (max-width: 600px){.main-menu-buttons{margin-top:30px;gap:16px}.main-menu-button{min-width:200px;padding:12px 28px;font-size:16px;letter-spacing:2px}.new-game-modal{min-width:280px;padding:24px}.new-game-modal-title{font-size:22px}.new-game-option{padding:16px 18px}.option-label{font-size:16px}}.home-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.home-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.home-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center;box-shadow:0 4px 20px #0000004d}.home-header h1{margin:0;font-size:3rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.home-header p{margin:.5rem 0 0;font-size:1.2rem;opacity:.95}.home-content{flex:1;display:flex;gap:2rem;padding:2rem;max-width:1400px;margin:0 auto;width:100%;overflow-y:auto}.welcome-card{flex:2;background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.welcome-card h2{margin:0 0 1rem;color:#667eea;font-size:2rem}.welcome-card>p{margin:0 0 2rem;color:#ccc;line-height:1.6}.form-section h3{margin:0 0 1rem;color:#eee;font-size:1.3rem}.form-group input::placeholder{color:#fff6}.button-group{display:flex;gap:1rem;margin-bottom:1.5rem}.divider{text-align:center;margin:2rem 0;position:relative}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:45%;height:1px;background:#fff3}.divider:before{left:0}.divider:after{right:0}.divider span{background:#1a1a2e;padding:0 1rem;color:#888;font-weight:600}.features-card{flex:1;background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);height:fit-content}.features-card h3{margin:0 0 1.5rem;color:#667eea;font-size:1.5rem}.features-card ul{list-style:none;padding:0;margin:0}.features-card li{padding:.75rem 0;color:#ccc;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}.features-card li:last-child{border-bottom:none}@media (max-width: 1024px){.home-content{flex-direction:column}.welcome-card,.features-card{flex:1}}.carousel-3d{position:relative;width:100%;height:300px;display:flex;align-items:center;justify-content:center;perspective:1000px;overflow:visible;z-index:30}.carousel-track{position:relative;width:100%;height:200px;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}.carousel-item{position:absolute;width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:#0009;border:2px solid rgba(255,255,255,.2);border-radius:8px;transition:all .3s ease-out;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.carousel-item:hover:not(.disabled){border-color:#ffd70080;box-shadow:0 0 20px #ffd7004d}.carousel-item.centered{width:180px;height:180px;border-color:#ffd700cc;box-shadow:0 0 30px #ffd70080;background:#141428e6}.carousel-item.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1)}.carousel-item-icon{font-size:3rem;transition:font-size .3s ease}.carousel-item.centered .carousel-item-icon{font-size:4rem}.carousel-item-label{font-size:.9rem;font-weight:700;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.8);transition:font-size .3s ease}.carousel-item.centered .carousel-item-label{font-size:1.1rem}.carousel-item-indicator{position:absolute;bottom:-30px;font-size:1.5rem;color:gold;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.carousel-arrows{position:absolute;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:100}.carousel-arrow{font-size:2rem;color:#ffd70099;animation:arrowPulse 2s ease-in-out infinite;text-shadow:0 0 10px rgba(255,215,0,.5)}.carousel-arrow.left{animation-delay:0s}.carousel-arrow.right{animation-delay:1s}@keyframes arrowPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.carousel-hint{position:absolute;bottom:-40px;left:50%;transform:translate(-50%);font-size:.85rem;color:#fff9;text-align:center;white-space:nowrap;font-family:Alagard,Courier New,monospace;z-index:150;pointer-events:none}.carousel-3d-empty{width:100%;height:300px;display:flex;align-items:center;justify-content:center;color:#ffffff80;font-size:1.2rem}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.sprite-carousel{position:relative;width:100%;height:450px;display:flex;align-items:center;justify-content:center;perspective:1400px;overflow:visible;z-index:30}.sprite-carousel-track{position:relative;width:100%;height:380px;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}.sprite-carousel-item{position:absolute;width:280px;height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;-webkit-user-select:none;user-select:none;pointer-events:auto}.sprite-carousel-item.transitioning{transition:all .6s cubic-bezier(.4,0,.2,1)}.sprite-carousel-item.disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.sprite-container-wrapper{position:relative;width:100%;height:280px;display:flex;align-items:center;justify-content:center;overflow:visible}.sprite-carousel-item.centered .sprite-container-wrapper{filter:drop-shadow(0 0 40px rgba(255,215,0,.8));animation:floatSprite 3s ease-in-out infinite}.sprite-carousel-item:not(.centered) .carousel-sprite{animation:none}@keyframes floatSprite{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}.sprite-label{font-family:Alagard,Courier New,monospace;font-size:.9rem;font-weight:700;color:#ffffffb3;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.9);transition:all .3s ease;white-space:nowrap}.sprite-carousel-item.centered .sprite-label{font-size:1.2rem;color:gold;text-shadow:0 0 20px rgba(255,215,0,.6)}.sprite-selection-indicator{position:absolute;bottom:-35px;font-size:1.8rem;color:gold;animation:bounce 1s ease-in-out infinite;text-shadow:0 0 15px rgba(255,215,0,.8)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.sprite-carousel-arrows{position:absolute;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:100}.sprite-carousel-arrow{font-size:2.5rem;color:#ffd700b3;animation:arrowPulse 2s ease-in-out infinite;text-shadow:0 0 20px rgba(255,215,0,.6);font-weight:700}.sprite-carousel-arrow.left{animation-delay:0s}.sprite-carousel-arrow.right{animation-delay:1s}@keyframes arrowPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.sprite-carousel-hint{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);font-size:.9rem;color:#ffffffb3;text-align:center;white-space:nowrap;font-family:Alagard,Courier New,monospace;z-index:150;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.9)}.sprite-carousel-empty{width:100%;height:400px;display:flex;align-items:center;justify-content:center;color:#ffffff80;font-size:1.3rem;font-family:Alagard,Courier New,monospace}.sprite-carousel-item:not(.centered):not(.disabled):hover{filter:brightness(1.2)}.sprite-carousel-item.centered{z-index:25!important}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.unit-detail-panel-bottom{position:fixed;bottom:0;left:0;right:350px;width:auto;height:220px;background:#0a0a14f2;border-top:3px solid rgba(255,215,0,.6);display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1rem 2rem;color:#fff;font-family:Alagard,Courier New,monospace;box-shadow:0 -8px 32px #000c;opacity:0;transform:translateY(20px);transition:all .3s ease-out;z-index:90}.unit-detail-panel-bottom.fade-in{opacity:1;transform:translateY(0)}.portrait-section-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.portrait-with-orbs{position:relative;display:flex;flex-direction:column;align-items:center}.portrait-image-standalone{width:140px;height:140px;object-fit:cover;image-rendering:auto;border-radius:4px;box-shadow:0 4px 16px #000c}.portrait-sprite-fallback{width:140px;height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#28283ccc,#141428cc);border-radius:4px;box-shadow:0 4px 16px #0009;overflow:hidden}.portrait-animated{object-fit:contain;image-rendering:pixelated}.portrait-loading{width:140px;height:140px;display:flex;align-items:center;justify-content:center;color:#ffffff80;font-size:.9rem;font-family:Alagard,Courier New,monospace;background:linear-gradient(135deg,#28283ccc,#141428cc);border-radius:4px}.element-orbs{display:flex;gap:.4rem;margin-top:.5rem}.element-orb{width:20px;height:20px;border-radius:50%;box-shadow:0 0 10px currentColor,inset 0 2px 4px #fff6,inset 0 -2px 4px #0006;animation:orbPulse 2s ease-in-out infinite}.element-orb:nth-child(2){animation-delay:.3s}.element-orb:nth-child(3){animation-delay:.6s}@keyframes orbPulse{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}.unit-name-bottom{font-size:1.1rem;font-weight:700;color:gold;text-shadow:0 2px 4px rgba(0,0,0,.8);text-align:center}.unit-class-bottom{font-size:.9rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.8)}.stats-section-bottom{display:flex;flex-direction:column;gap:.75rem}.stats-header-with-cost{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,215,0,.3);padding-bottom:.25rem}.stats-header{font-size:.9rem;font-weight:700;color:gold;letter-spacing:2px}.mana-cost-inline{display:flex;align-items:center;gap:.5rem}.mana-cost-label{font-size:.75rem;font-weight:700;color:gold;letter-spacing:1px}.mana-cost-value{font-size:1.3rem;font-weight:700;color:#2ecc71;text-shadow:0 0 12px rgba(46,204,113,.6)}.mana-cost-value.cannot-afford{color:#e74c3c;text-shadow:0 0 12px rgba(231,76,60,.6)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.stat-row-horizontal{display:grid;grid-template-columns:45px 1fr 50px;align-items:center;gap:.5rem}.stat-label{font-size:.8rem;font-weight:700;color:#ffffffe6}.stat-bar-horizontal{height:14px;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:2px;overflow:hidden}.stat-bar-fill{height:100%;transition:width .5s ease-out;box-shadow:inset 0 2px 4px #ffffff4d}.stat-value{font-size:.9rem;font-weight:700;text-align:right;color:#fff}@media (max-width: 1200px){.unit-detail-panel-bottom{grid-template-columns:180px 1fr;height:180px;right:300px}.portrait-frame-large{width:120px;height:120px}}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.evolution-tree-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;display:flex;align-items:center;justify-content:center;font-family:Alagard,Courier New,monospace}.overlay-content{position:relative;width:90%;max-width:1200px;height:85%;background:#0a0a14f2;border:3px solid rgba(255,215,0,.6);border-radius:8px;display:flex;flex-direction:column;box-shadow:0 16px 48px #000000e6;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:2px solid rgba(255,215,0,.3)}.overlay-title{font-size:1.8rem;color:gold;font-family:Alagard,Courier New,monospace;margin:0;text-shadow:0 2px 8px rgba(255,215,0,.5)}.mana-display{font-size:1.4rem;color:#2ecc71;font-weight:700;font-family:Alagard,Courier New,monospace}.close-button{background:#e74c3c33;border:2px solid #e74c3c;color:#e74c3c;font-size:1.5rem;width:40px;height:40px;border-radius:4px;cursor:pointer;transition:all .2s ease;font-family:Alagard,Courier New,monospace}.close-button:hover{background:#e74c3c66;box-shadow:0 0 16px #e74c3c80;transform:scale(1.1)}.evolution-tree-container{flex:1;overflow-y:auto;padding:2rem;display:flex;flex-direction:column;gap:1rem}.evolution-tree-container::-webkit-scrollbar{width:10px}.evolution-tree-container::-webkit-scrollbar-track{background:#0000004d}.evolution-tree-container::-webkit-scrollbar-thumb{background:#ffd70066;border-radius:5px}.evolution-tree-container::-webkit-scrollbar-thumb:hover{background:#ffd70099}.evolution-node{position:relative;background:#141428cc;border:2px solid;border-radius:4px;padding:1rem;cursor:pointer;transition:all .2s ease;font-family:Alagard,Courier New,monospace}.evolution-node:hover:not(.disabled){transform:translate(5px);box-shadow:0 4px 16px #ffd7004d}.evolution-node.focused{border-width:3px;box-shadow:0 0 24px #ffd70080;transform:translate(5px) scale(1.02)}.evolution-node.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}.evolution-arrow{position:absolute;left:-80px;top:50%;transform:translateY(-50%);font-size:1rem;color:#ffd70099;font-weight:700}.node-content{display:flex;flex-direction:column;gap:.5rem}.node-header{display:flex;align-items:center;justify-content:space-between}.node-name{font-size:1.2rem;font-weight:700;color:#fff}.node-stars{font-size:1rem;color:gold}.node-element{font-size:.9rem;font-weight:700}.node-stats{display:flex;gap:1rem;font-size:.85rem;color:#fffc}.stat{display:flex;align-items:center;gap:.25rem}.node-cost{font-size:1.1rem;font-weight:700;color:#2ecc71;text-align:right}.node-cost.cannot-afford{color:#e74c3c}.overlay-footer{padding:1rem 1.5rem;border-top:2px solid rgba(255,215,0,.3);background:#0000004d}.control-hint{font-size:.9rem;color:#fff9;text-align:center;font-family:Alagard,Courier New,monospace}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.unit-details-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.unit-details-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.unit-details-panel{position:relative;width:90%;max-width:1200px;max-height:90vh;background:linear-gradient(180deg,#0a0a14fa,#141428fa);border:3px solid rgba(255,215,0,.6);border-radius:8px;box-shadow:0 8px 64px #000000e6;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .4s ease-out}.unit-details-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#00000080;border-bottom:2px solid rgba(255,215,0,.4)}.unit-details-title{font-family:Alagard,Courier New,monospace;font-size:2rem;color:gold;margin:0;letter-spacing:3px;text-shadow:0 2px 8px rgba(255,215,0,.5)}.unit-details-close{background:#e74c3c4d;border:2px solid #e74c3c;color:#e74c3c;padding:.75rem 1.5rem;font-size:.9rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:4px;cursor:pointer;transition:all .2s ease;text-transform:uppercase}.unit-details-close:hover{background:#e74c3c80;box-shadow:0 0 20px #e74c3c80;transform:translateY(-2px)}.unit-details-animation-section{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1rem;background:#0000004d;border-bottom:2px solid rgba(255,215,0,.2)}.animation-label{font-family:Alagard,Courier New,monospace;font-size:.9rem;color:#ffd700cc;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.animation-display{width:220px;height:220px;border:3px solid;border-radius:8px;background:linear-gradient(135deg,#28283ccc,#141428cc);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #000c;overflow:hidden;position:relative}.unit-name-large{font-family:Alagard,Courier New,monospace;font-size:1.8rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8);margin:0}.unit-class-large{font-family:Alagard,Courier New,monospace;font-size:1.1rem;color:#ffffffb3;text-shadow:0 2px 4px rgba(0,0,0,.8)}.unit-details-stats-overview{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;padding:1.5rem 2rem;background:#0003;border-bottom:2px solid rgba(255,215,0,.2)}.stat-box{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#0006;border:2px solid rgba(255,255,255,.1);border-radius:4px;transition:all .2s ease}.stat-box:hover{border-color:#ffd70066;transform:translateY(-2px)}.overlay-element-orbs{display:flex;gap:.5rem;justify-content:center}.overlay-orb{width:24px;height:24px;border-radius:50%;box-shadow:0 0 12px currentColor,inset 0 2px 4px #fff6,inset 0 -2px 4px #0006;animation:overlayOrbPulse 2s ease-in-out infinite}.overlay-orb:nth-child(2){animation-delay:.3s}.overlay-orb:nth-child(3){animation-delay:.6s}@keyframes overlayOrbPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.stat-box .stat-label{font-family:Alagard,Courier New,monospace;font-size:.8rem;font-weight:700;color:#ffffffb3;letter-spacing:1px}.stat-box .stat-value{font-family:Alagard,Courier New,monospace;font-size:1.5rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8)}.unit-details-content{flex:1;overflow-y:auto;padding:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.details-section{display:flex;flex-direction:column;gap:1rem}.section-header{font-family:Alagard,Courier New,monospace;font-size:1.1rem;font-weight:700;color:gold;padding:.75rem 1rem;background:#0006;border-left:4px solid;border-radius:2px;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.section-content{padding:0 1rem}.details-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.detail-item{font-family:Alagard,Courier New,monospace;font-size:.95rem;color:#ffffffe6;line-height:1.5;padding:.5rem 0;display:flex;align-items:flex-start;gap:.5rem}.detail-bullet{color:gold;font-size:1.1rem;flex-shrink:0}.ability-description{padding:.75rem 1rem;background:#0000004d;border-left:3px solid rgba(255,215,0,.4);border-radius:2px}.no-content{font-family:Alagard,Courier New,monospace;font-size:.9rem;color:#fff6;font-style:italic;text-align:center;padding:1.5rem}.unit-details-footer{padding:1rem 2rem;background:#00000080;border-top:2px solid rgba(255,215,0,.2);text-align:center;font-family:Alagard,Courier New,monospace;font-size:.85rem;color:#fff9}.unit-details-content::-webkit-scrollbar{width:12px}.unit-details-content::-webkit-scrollbar-track{background:#0000004d}.unit-details-content::-webkit-scrollbar-thumb{background:#ffd70066;border-radius:6px}.unit-details-content::-webkit-scrollbar-thumb:hover{background:#ffd70099}@media (max-width: 1000px){.unit-details-content{grid-template-columns:1fr}.unit-details-stats-overview{grid-template-columns:repeat(3,1fr)}}.drafted-units-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;display:flex;align-items:center;justify-content:center}.overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.overlay-content{position:relative;width:90%;max-width:1200px;height:85vh;background:linear-gradient(180deg,#1a1a2e,#16213e);border:3px solid rgba(255,215,0,.5);border-radius:12px;box-shadow:0 8px 32px #000000e6;display:flex;flex-direction:column;overflow:hidden}.overlay-header{padding:1.5rem 2rem;background:#00000080;border-bottom:2px solid rgba(255,215,0,.3);text-align:center}.overlay-header h2{margin:0;font-size:2rem;color:gold;letter-spacing:3px;text-shadow:0 2px 8px rgba(255,215,0,.5)}.overlay-subtitle{margin:.5rem 0 0;font-size:1rem;color:#ffffffb3;letter-spacing:1px}.no-units-message{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffffff80}.no-units-message p{font-size:1.5rem;margin:.5rem 0}.no-units-message .hint{font-size:1rem;color:#ffd70099}.drafted-units-grid{flex:1;padding:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem;overflow-y:auto;align-content:start}.drafted-unit-card{position:relative;background:#0006;border:2px solid rgba(150,150,150,.3);border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.75rem}.drafted-unit-card:hover{background:#32325080;border-color:#ffd70080;transform:translateY(-2px)}.drafted-unit-card.focused{background:#64649666;border-color:#ffd700cc;box-shadow:0 0 20px #ffd70066,inset 0 0 20px #ffd7001a;transform:translateY(-4px) scale(1.05)}.drafted-unit-card.rune-knight{border-color:#ffd70080}.drafted-unit-card.rune-knight.focused{border-color:gold;box-shadow:0 0 24px #ffd70099,inset 0 0 24px #ffd70026}.unit-sprite-large{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);border-radius:50%}.unit-info{text-align:center;width:100%}.unit-name{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.25rem;text-shadow:0 1px 3px rgba(0,0,0,.8)}.unit-type{font-size:.75rem;color:#fff9;margin-bottom:.25rem}.unit-cost{font-size:.85rem;color:gold}.focus-indicator{position:absolute;left:.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:gold;animation:pulse-arrow 1s ease-in-out infinite}@keyframes pulse-arrow{0%,to{opacity:.6;transform:translateY(-50%) translate(0)}50%{opacity:1;transform:translateY(-50%) translate(4px)}}.overlay-controls{display:flex;justify-content:center;gap:2rem;padding:1rem 2rem;background:#00000080;border-top:2px solid rgba(255,215,0,.3)}.control-hint{display:flex;align-items:center;gap:.5rem;color:#ffffffb3;font-size:.9rem}.control-hint kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.25rem .5rem;font-family:monospace;font-size:.8rem;color:gold}.details-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10}.confirm-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.confirm-box{background:linear-gradient(180deg,#1a1a2e,#16213e);border:3px solid rgba(239,68,68,.8);border-radius:12px;padding:2rem;max-width:400px;text-align:center;box-shadow:0 8px 32px #ef444466}.confirm-box h3{margin:0 0 1rem;font-size:1.5rem;color:#ef4444;text-shadow:0 2px 8px rgba(239,68,68,.5)}.confirm-box p{margin:0 0 1.5rem;color:#ffffffe6;font-size:1rem;line-height:1.5}.confirm-box p strong{color:gold}.confirm-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.confirm-buttons button{padding:.75rem 1.5rem;border:none;border-radius:6px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.btn-confirm{background:#ef4444cc;color:#fff;border:2px solid rgba(239,68,68,1)}.btn-confirm:hover{background:#ef4444;box-shadow:0 0 16px #ef444499}.btn-cancel{background:#64646480;color:#fff;border:2px solid rgba(150,150,150,.5)}.btn-cancel:hover{background:#969696b3;border-color:#c8c8c8cc}.confirm-box .hint{font-size:.85rem;color:#ffd70099}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.draft-page-new{width:100vw;height:100vh;background:linear-gradient(180deg,#0a0a14,#1a1a2e);color:#fff;font-family:Alagard,Courier New,monospace;display:flex;flex-direction:column;overflow:hidden}.draft-page-new.loading{display:flex;align-items:center;justify-content:center;font-size:2rem;color:#ffd70099}.ai-drafting-banner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 2rem;background:linear-gradient(90deg,#ef444426,#ef444440,#ef444426);border-bottom:2px solid rgba(239,68,68,.5);animation:ai-pulse 2s ease-in-out infinite}@keyframes ai-pulse{0%,to{background:linear-gradient(90deg,#ef444426,#ef444440,#ef444426)}50%{background:linear-gradient(90deg,#ef444433,#ef444459,#ef444433)}}.ai-drafting-banner .ai-icon{font-size:1.5rem;animation:ai-bounce 1s ease-in-out infinite}@keyframes ai-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.ai-drafting-banner .ai-text{font-size:1.1rem;color:#fff;letter-spacing:1px}.ai-drafting-banner .ai-text strong{color:#ef4444}.ai-drafting-banner .ai-hint{font-size:.85rem;color:#fff9;font-style:italic}.draft-top-bar{display:flex;justify-content:space-between;padding:1.5rem 2rem;background:#00000080;border-bottom:3px solid rgba(255,215,0,.4);box-shadow:0 4px 16px #000c;z-index:100}.section-title{font-size:20px;font-weight:700;color:gold;letter-spacing:2px;margin-bottom:.75rem;text-shadow:0 2px 4px rgba(0,0,0,.8)}.drafted-units-display{min-width:300px}.drafted-units-grid{display:flex;flex-wrap:wrap;gap:.5rem}.drafted-unit-sprite{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#141428cc;border:2px solid rgba(255,215,0,.4);border-radius:4px;box-shadow:0 2px 8px #0009;overflow:hidden;position:relative}.drafted-unit-sprite img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.drafted-unit-sprite .sprite-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drafted-unit-sprite.rune-knight{border-color:#ffd700cc;background:#281e0ae6}.drafted-unit-sprite.monster{border-color:#3498dbcc;background:#0a1428e6}.drafted-unit-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#141428cc;border:2px solid rgba(255,215,0,.4);border-radius:4px;box-shadow:0 2px 8px #0009}.mana-display-top{text-align:right}.mana-value{font-size:30px;height:36px;font-weight:700;color:#2ecc71;text-shadow:0 0 20px rgba(46,204,113,.5)}.draft-main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow-y:auto;color:#fff;position:relative;z-index:1}.phase-content{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;gap:2rem;position:relative;z-index:10;animation:fadeIn .5s ease-out}.phase-content.rune-knight-phase,.phase-content.monster-phase{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;max-width:none;padding:3rem;z-index:5}.phase-content.rune-knight-phase:before,.phase-content.monster-phase:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/BackGroundPanel.gif);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.7;z-index:-1;will-change:transform}.phase-indicator{font-size:1rem;color:#ffd700cc;text-align:center;letter-spacing:3px;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(255,215,0,.5)}.phase-title{font-size:2.5rem;font-family:Alagard,Courier New,monospace;color:gold;text-align:center;text-shadow:0 4px 16px rgba(255,215,0,.6);margin:0;letter-spacing:3px;position:relative;z-index:20}.sub-title{font-size:1.8rem;font-family:Alagard,Courier New,monospace;color:#f39c12;text-align:center;margin:0}.phase-instructions{font-size:1rem;color:#ffffffb3;text-align:center;margin:.5rem 0;font-family:Alagard,Courier New,monospace}.no-knights{font-size:1.2rem;color:#ffffff80;padding:3rem;text-align:center}.back-button,.phase-continue-button{background:#141428e6;border:2px solid rgba(255,215,0,.6);color:gold;padding:1rem 2rem;font-size:1rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:4px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;position:relative;z-index:50;margin-top:3rem}.back-button:hover,.phase-continue-button:hover,.back-button.focused,.phase-continue-button.focused{background:#28283ce6;border-color:gold;box-shadow:0 0 20px #ffd70066;transform:translateY(-2px)}.back-button.focused,.phase-continue-button.focused{animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{box-shadow:0 0 20px #ffd70066}50%{box-shadow:0 0 30px #ffd700b3}}.phase-continue-button{background:#2ecc7133;border-color:#2ecc71;color:#2ecc71;font-size:1.2rem;font-family:Alagard,Courier New,monospace;padding:1.5rem 3rem;z-index:50}.phase-continue-button:hover{background:#2ecc714d;border-color:#27ae60;box-shadow:0 0 24px #2ecc7180}.unit-details-hint{font-size:.85rem;color:#ffd700b3;font-family:Alagard,Courier New,monospace;margin-top:.75rem;text-align:center;animation:hintPulse 2s ease-in-out infinite;text-shadow:0 2px 8px rgba(0,0,0,.8)}@keyframes hintPulse{0%,to{opacity:.7}50%{opacity:1;color:gold}}.draft-complete{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.draft-complete h1{font-size:3rem;color:#2ecc71;text-shadow:0 0 32px rgba(46,204,113,.7);margin:0}.draft-complete p{font-size:1.3rem;color:#ffffffb3}.draft-bottom-controls{padding:1.5rem;background:#00000080;border-top:3px solid rgba(255,215,0,.4);display:flex;flex-direction:column;align-items:center;gap:.75rem;z-index:100}.end-draft-btn{background:#2ecc714d;border:3px solid #2ecc71;color:#2ecc71;padding:1.5rem 4rem;font-size:1.3rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:4px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 16px #0009}.end-draft-btn:hover:not(:disabled){background:#2ecc7180;box-shadow:0 0 32px #2ecc71b3;transform:translateY(-4px)}.end-draft-btn:disabled{background:#64646433;border-color:#666;color:#666;cursor:not-allowed;opacity:.5}.draft-requirement-message{font-size:.9rem;color:#e74c3c;font-family:Alagard,Courier New,monospace;text-align:center;font-style:italic}.phase-toggle-container{position:fixed;bottom:140px;left:50%;transform:translate(-50%);z-index:50}.phase-toggle-button{padding:.75rem 2rem;background:#ffd70026;border:2px solid rgba(255,215,0,.5);color:gold;font-size:1rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:6px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:0 2px 12px #00000080}.phase-toggle-button:hover{background:#ffd70040;border-color:#ffd700cc;box-shadow:0 0 20px #ffd70066;transform:translateY(-2px)}.phase-toggle-button.focused{background:#ffd70059;border-color:gold;color:#fff;text-shadow:0 0 10px rgba(255,215,0,.8);box-shadow:0 0 24px #ffd700b3,0 0 48px #ffd7004d,inset 0 0 16px #ffd70026;transform:translateY(-2px) scale(1.03);animation:toggle-pulse 1.5s ease-in-out infinite}@keyframes toggle-pulse{0%,to{box-shadow:0 0 24px #ffd700b3,0 0 48px #ffd7004d,inset 0 0 16px #ffd70026}50%{box-shadow:0 0 32px #ffd700e6,0 0 64px #ffd70080,inset 0 0 20px #ffd70040}}.finish-draft-container{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:50}.right-control-panel{position:fixed;right:1rem;bottom:1rem;z-index:100;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;width:280px}.nav-hint-button{padding:.5rem 1rem;background:#ffd7001a;border:2px solid rgba(255,215,0,.3);color:#ffd700cc;font-size:.8rem;font-family:Alagard,Courier New,monospace;border-radius:4px;cursor:default;display:flex;align-items:center;justify-content:center;gap:.5rem}.nav-hint-button.carousel-hint{background:#3498db1a;border-color:#3498db66;color:#3498dbe6}.nav-hint-button .arrow{font-size:1rem}.nav-hint-button .arrow.up{animation:arrowBounceUp 1.5s ease-in-out infinite}.nav-hint-button .arrow.down{animation:arrowBounceDown 1.5s ease-in-out infinite}.nav-hint-button .arrow.left{animation:arrowBounceLeft 1.5s ease-in-out infinite}.nav-hint-button .arrow.right{animation:arrowBounceRight 1.5s ease-in-out infinite;animation-delay:.75s}@keyframes arrowBounceUp{0%,to{transform:translateY(0);opacity:.7}50%{transform:translateY(-3px);opacity:1}}@keyframes arrowBounceDown{0%,to{transform:translateY(0);opacity:.7}50%{transform:translateY(3px);opacity:1}}@keyframes arrowBounceLeft{0%,to{transform:translate(0);opacity:.7}50%{transform:translate(-3px);opacity:1}}@keyframes arrowBounceRight{0%,to{transform:translate(0);opacity:.7}50%{transform:translate(3px);opacity:1}}.phase-toggle-button.inline,.finish-draft-button.inline{width:100%}.phase-toggle-button.inline{padding:.6rem 1rem;font-size:.9rem}.finish-draft-button.inline{padding:.7rem 1rem;font-size:1rem}.finish-draft-button{padding:.9rem 2.5rem;background:#2ecc714d;border:3px solid rgba(46,204,113,.5);color:#2ecc71;font-size:1.15rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:3px;box-shadow:0 4px 16px #0009}.finish-draft-button:hover{background:#2ecc7166;border-color:#2ecc71b3;box-shadow:0 0 24px #2ecc7180;transform:translateY(-2px)}.finish-draft-button.focused{background:#2ecc7180;border-color:#2ecc71;color:#fff;box-shadow:0 0 32px #2ecc71cc,0 0 64px #2ecc7166,inset 0 0 24px #2ecc7133;transform:translateY(-4px) scale(1.05);animation:finish-pulse 1.5s ease-in-out infinite}@keyframes finish-pulse{0%,to{box-shadow:0 0 32px #2ecc71cc,0 0 64px #2ecc7166,inset 0 0 24px #2ecc7133}50%{box-shadow:0 0 40px #2ecc71,0 0 80px #2ecc7199,inset 0 0 32px #2ecc714d}}.draft-main-content::-webkit-scrollbar{width:12px}.draft-main-content::-webkit-scrollbar-track{background:#0000004d}.draft-main-content::-webkit-scrollbar-thumb{background:#ffd70066;border-radius:6px}.draft-main-content::-webkit-scrollbar-thumb:hover{background:#ffd70099}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hex-tile{transition:all .15s ease}.hex-tile:hover path{stroke:#f39c12;stroke-width:3;filter:brightness(1.2)}.hex-tile.selected path{stroke:#e74c3c;stroke-width:4;filter:brightness(1.3)}.hex-tile.highlighted path{stroke:#2ecc71;stroke-width:3;fill-opacity:.8}.hex-tile.highlighted:hover path{stroke:#27ae60;stroke-width:4;fill-opacity:1;filter:brightness(1.3)}.hex-tile.valid-move path{fill-opacity:.7;stroke:#3498db;stroke-width:3;animation:pulse 1s infinite}.hex-tile.valid-target path{fill-opacity:.7;stroke:#e74c3c;stroke-width:3;animation:pulse 1s infinite}@keyframes pulse{0%,to{stroke-width:3}50%{stroke-width:5}}.hex-tile.ability-range-enemy path{fill-opacity:.6;stroke:#800020;stroke-width:3;animation:pulse-burgundy 1.2s infinite}.hex-tile.ability-range-enemy.has-target path{fill-opacity:.75;stroke:#a00030;stroke-width:4;animation:pulse-burgundy-strong .8s infinite;filter:brightness(1.2) drop-shadow(0 0 4px #800020)}.hex-tile.ability-range-ally path{fill-opacity:.6;stroke:#228b22;stroke-width:3;animation:pulse-green 1.2s infinite}.hex-tile.ability-range-ally.has-target path{fill-opacity:.75;stroke:#2aaa2a;stroke-width:4;animation:pulse-green-strong .8s infinite;filter:brightness(1.2) drop-shadow(0 0 4px #228B22)}.hex-tile.line-preview path{fill-opacity:.8;stroke:gold;stroke-width:4;filter:brightness(1.3)}.hex-tile.aoe-preview path{fill-opacity:.7;stroke:#ff8c00;stroke-width:3;animation:glow .8s infinite alternate}.hex-tile.hovered-target path{fill-opacity:.9;stroke:red;stroke-width:5;filter:brightness(1.5) drop-shadow(0 0 8px #FF0000)}@keyframes pulse-burgundy{0%,to{stroke-width:3;stroke:#800020}50%{stroke-width:5;stroke:#a0002a}}@keyframes pulse-burgundy-strong{0%,to{stroke-width:4;stroke:#a00030}50%{stroke-width:6;stroke:#c00040}}@keyframes pulse-green{0%,to{stroke-width:3;stroke:#228b22}50%{stroke-width:5;stroke:#2aaa2a}}@keyframes pulse-green-strong{0%,to{stroke-width:4;stroke:#2aaa2a}50%{stroke-width:6;stroke:#3acc3a}}@keyframes glow{0%{filter:brightness(1.2)}to{filter:brightness(1.5) drop-shadow(0 0 5px #FF8C00)}}.unit{transition:all .2s ease}.unit:hover circle{filter:brightness(1.3);stroke-width:3}.unit.selected circle{stroke:#fff;stroke-width:4;filter:brightness(1.5)}.hex-grid-container{position:relative;width:100%;height:100%;background:#0f1419;overflow:hidden}.hex-grid-svg{width:100%;height:100%}.grid-controls{position:absolute;bottom:1rem;right:1rem;background:#000000b3;padding:.75rem 1rem;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-hint{color:#ccc;font-size:.85rem;margin:.25rem 0}.hex-cursor .cursor-glow{animation:cursorPulse 1.5s ease-in-out infinite}.hex-cursor .cursor-border{animation:cursorBlink .8s ease-in-out infinite alternate}@keyframes cursorPulse{0%,to{opacity:.3;stroke-width:3}50%{opacity:.6;stroke-width:5}}@keyframes cursorBlink{0%{opacity:.7}to{opacity:1}}.hotseat-blocker{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;align-items:center;animation:fadeIn .3s ease}.blocker-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#1e3c72,#2a5298);opacity:.98}.blocker-content{position:relative;background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:60px 80px;max-width:600px;text-align:center;box-shadow:0 20px 60px #00000080;border:2px solid rgba(255,255,255,.2);animation:slideUp .4s ease}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.blocker-header h1{font-size:3rem;color:#fff;margin-bottom:30px;text-shadow:2px 2px 8px rgba(0,0,0,.5)}.blocker-body{margin:40px 0}.current-player{font-size:4rem;font-weight:700;margin-bottom:20px;text-shadow:3px 3px 10px rgba(0,0,0,.7);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.blocker-message{font-size:2rem;color:#fff;margin-bottom:15px}.blocker-instruction{font-size:1.2rem;color:#fffc;margin-bottom:0}.continue-button{padding:20px 60px;font-size:1.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#27ae60,#2ecc71);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #2ecc7166;margin-top:30px}.continue-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px #2ecc7199;background:linear-gradient(135deg,#2ecc71,#27ae60)}.continue-button:active{transform:translateY(0)}.blocker-footer{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}.blocker-footer p{color:#fff9;font-size:.9rem;margin:0}@media (max-width: 768px){.blocker-content{padding:40px;margin:20px}.blocker-header h1{font-size:2rem}.current-player{font-size:2.5rem}.blocker-message{font-size:1.5rem}.continue-button{padding:15px 40px;font-size:1.2rem}}.deployment-page{width:100%;min-height:100vh;background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:20px;overflow-y:auto}.deployment-header{text-align:center;margin-bottom:20px}.deployment-header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.deployment-info{display:flex;justify-content:center;gap:20px;font-size:1.3rem}.units-remaining{background:#0000004d;padding:10px 20px;border-radius:8px}.deployment-content{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:300px 1fr 250px;gap:20px}@media (max-width: 1200px){.deployment-content{grid-template-columns:1fr}}.units-panel{background:#0000004d;border-radius:12px;padding:20px;height:fit-content}.units-panel h3{margin-bottom:15px;font-size:1.5rem}.empty-message{text-align:center;opacity:.7;padding:20px}.units-list{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.unit-card{background:#ffffff1a;border:2px solid;border-radius:8px;padding:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s ease;color:#fff;text-align:left}.unit-card:hover{background:#ffffff26;transform:translate(5px)}.unit-card.selected{background:#ffffff40;border-width:3px;transform:scale(1.05);box-shadow:0 4px 12px #ffffff4d}.unit-icon{font-size:2rem}.unit-info{flex:1}.unit-name{font-size:1.1rem;font-weight:700;text-transform:capitalize;margin-bottom:3px}.unit-element{font-size:.9rem;text-transform:capitalize;opacity:.9}.selection-hint{background:#3498db4d;border:2px dashed #3498db;border-radius:8px;padding:15px;text-align:center;margin-bottom:15px;font-size:.95rem;animation:pulse 2s infinite}.end-deployment-button{width:100%;padding:15px;background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease}.end-deployment-button:hover{background:#2ecc71;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.waiting-message{text-align:center;padding:20px}.waiting-message p{margin:8px 0}.waiting-message p:first-child{font-size:1.3rem;font-weight:700;color:#2ecc71}.map-container{background:#0003;border-radius:12px;padding:20px;display:flex;justify-content:center;align-items:center;overflow:auto;max-height:80vh}.players-status{background:#0000004d;border-radius:12px;padding:20px;height:fit-content}.players-status h3{margin-bottom:15px;font-size:1.5rem}.player-status-row{display:flex;flex-direction:column;gap:5px;padding:12px;margin-bottom:10px;background:#ffffff0d;border-radius:6px}.player-name{font-weight:700;font-size:1.1rem}.player-deployed{font-size:.9rem;opacity:.9}.player-ready{font-size:.95rem;margin-top:3px}.damage-popup{position:fixed;pointer-events:none;font-weight:700;font-size:24px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;z-index:1000;animation:damage-rise 1.5s ease-out forwards;transform-origin:center}@keyframes damage-rise{0%{transform:translateY(0) scale(.8);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.2)}to{transform:translateY(-60px) scale(1);opacity:0}}.damage-popup-hit{color:#f33;font-size:24px}.damage-popup-crit{color:red;font-size:32px;font-weight:900;animation:damage-rise 1.5s ease-out forwards,damage-shake .3s ease-in-out 2}@keyframes damage-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.damage-popup-miss{color:#fff;font-style:italic;font-size:20px;font-weight:400}.damage-popup-heal{color:#4cff4c;font-size:26px;font-weight:700;animation:heal-rise 1.5s ease-out forwards}@keyframes heal-rise{0%{transform:translateY(0) scale(.8);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.1)}to{transform:translateY(-60px) scale(1);opacity:0}}.combat-log-container{position:fixed;top:100px;right:20px;width:400px;max-height:500px;background:#14141ef2;border:2px solid #6b5b3d;border-radius:8px;box-shadow:0 4px 12px #00000080;z-index:999;display:flex;flex-direction:column;font-family:Courier New,monospace;pointer-events:auto}.combat-log-header{background:linear-gradient(180deg,#8b7355,#6b5b3d);padding:10px 15px;border-bottom:2px solid #5a4a2d;display:flex;justify-content:space-between;align-items:center;cursor:move;-webkit-user-select:none;user-select:none}.combat-log-title{color:#fff;font-size:16px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.combat-log-close{background:#d32f2f;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;transition:background .2s}.combat-log-close:hover{background:#b71c1c}.combat-log-content{padding:10px;overflow-y:auto;flex:1;max-height:440px}.combat-log-entry{margin-bottom:12px;padding:8px;border-left:3px solid #6b5b3d;background:#0000004d;border-radius:4px;font-size:12px;line-height:1.5}.combat-log-entry.damage-dealt{border-left-color:#ff5252;background:#ff52521a}.combat-log-entry.damage-taken{border-left-color:#448aff;background:#448aff1a}.combat-log-entry.miss{border-left-color:#9e9e9e;background:#9e9e9e1a}.combat-log-entry.healing{border-left-color:#4caf50;background:#4caf501a}.combat-log-main{color:#fff;font-weight:700;margin-bottom:4px}.combat-log-attack-name{color:#ffd54f;font-weight:400;font-size:11px}.combat-log-math{color:#aaa;font-size:11px;padding-left:10px;font-family:Courier New,monospace}.combat-log-math.formula{color:#81d4fa;margin-bottom:2px}.combat-log-math.damage-value{color:#ff5252}.combat-log-math.heal-value{color:#4caf50}.combat-log-crit{color:#ff9800;font-weight:700;text-transform:uppercase}.combat-log-timestamp{color:#666;font-size:10px;margin-top:4px}.combat-log-content::-webkit-scrollbar{width:8px}.combat-log-content::-webkit-scrollbar-track{background:#0003}.combat-log-content::-webkit-scrollbar-thumb{background:#6b5b3d;border-radius:4px}.combat-log-content::-webkit-scrollbar-thumb:hover{background:#8b7355}.combat-log-toggle{position:fixed;top:60px;right:20px;background:linear-gradient(180deg,#8b7355,#6b5b3d);border:2px solid #5a4a2d;color:#fff;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;z-index:998;box-shadow:0 2px 6px #0006;transition:all .2s;pointer-events:auto}.combat-log-toggle:hover{background:linear-gradient(180deg,#9b8365,#7b6b4d);transform:translateY(-2px);box-shadow:0 4px 8px #00000080}.floating-text{position:fixed;pointer-events:none;font-weight:700;font-size:18px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;z-index:1000;animation:floating-rise 1.2s ease-out forwards;transform-origin:center;white-space:nowrap}@keyframes floating-rise{0%{transform:translate(-50%) translateY(0) scale(.8);opacity:0}20%{opacity:1;transform:translate(-50%) translateY(-10px) scale(1.1)}to{transform:translate(-50%) translateY(-50px) scale(1);opacity:0}}.floating-text-warning{color:#ff6b6b;font-size:16px;text-transform:uppercase;letter-spacing:1px}.floating-text-info{color:#74b9ff;font-size:16px}.floating-text-success{color:#55efc4;font-size:16px}.action-menu-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}.action-menu{position:fixed;z-index:1000;background:linear-gradient(135deg,#2a2a3e,#1a1a2e);border:2px solid #4a4a6a;border-radius:8px;box-shadow:0 8px 24px #0009;min-width:200px;font-family:Cinzel,serif}.action-menu-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#4a4a6a4d;border-bottom:1px solid #4a4a6a}.action-menu-title{font-size:14px;font-weight:600;color:gold;text-transform:uppercase;letter-spacing:1px}.action-menu-close{background:none;border:none;color:#aaa;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.action-menu-close:hover{color:#fff}.action-menu-options{padding:4px}.action-menu-option{width:100%;padding:10px 12px;margin:2px 0;background:linear-gradient(135deg,#3a3a4e,#2a2a3e);border:1px solid #4a4a6a;border-radius:4px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;text-align:left;display:flex;flex-direction:column;gap:4px}.action-menu-option:hover:not(.disabled){background:linear-gradient(135deg,#4a4a6e,#3a3a5e);border-color:#6a6a8a;transform:translate(2px)}.action-menu-option:active:not(.disabled){transform:translate(2px) scale(.98)}.action-menu-option.disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,#2a2a3e,#1a1a2e)}.option-label{font-size:14px;font-weight:600;letter-spacing:.5px}.option-reason{font-size:11px;color:#888;font-style:italic;font-weight:400}.action-menu{animation:slideIn .2s ease-out}.submenu-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:#0000004d}.attack-submenu{position:fixed;z-index:1001;background:linear-gradient(135deg,#2a2a3e,#1a1a2e);border:2px solid #4a4a6a;border-radius:8px;box-shadow:0 8px 24px #0009;min-width:280px;max-width:350px;font-family:Cinzel,serif;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.submenu-header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#4a4a6a4d;border-bottom:1px solid #4a4a6a}.back-btn{background:#4a4a6a80;border:1px solid #6a6a8a;border-radius:4px;color:#fff;font-size:16px;padding:4px 10px;cursor:pointer;transition:all .2s}.back-btn:hover{background:#64648c99}.submenu-title{font-size:14px;font-weight:600;color:gold;text-transform:uppercase;letter-spacing:1px}.submenu-options{padding:8px;max-height:300px;overflow-y:auto}.no-options{padding:20px;text-align:center;color:#888;font-style:italic}.submenu-option{width:100%;padding:10px 12px;margin:4px 0;background:linear-gradient(135deg,#3a3a4e,#2a2a3e);border:1px solid #4a4a6a;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s;text-align:left;display:flex;flex-direction:column;gap:6px}.submenu-option:hover:not(.disabled){background:linear-gradient(135deg,#4a4a6e,#3a3a5e);border-color:#6a6a8a;transform:translate(2px)}.submenu-option.disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,#2a2a3e,#1a1a2e)}.option-main{display:flex;justify-content:space-between;align-items:center}.option-name{font-size:14px;font-weight:600;letter-spacing:.5px}.option-mp{font-size:12px;color:#6af;background:#6496ff33;padding:2px 6px;border-radius:4px}.option-stats{display:flex;gap:12px;font-size:11px;color:#aaa}.stat{background:#64648c33;padding:2px 6px;border-radius:3px}.option-reason{font-size:11px;color:#f88;font-style:italic}.battle-page{width:100%;height:100vh;display:flex;flex-direction:column;background:#1a1a2e}.battle-page.loading{justify-content:center;align-items:center}.loading-spinner{font-size:2rem;color:#667eea;animation:pulse-text 1.5s infinite}@keyframes pulse-text{0%,to{opacity:.6}50%{opacity:1}}.victory-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .5s ease-in}.victory-banner{background:linear-gradient(135deg,#667eea,#764ba2);padding:3rem 5rem;border-radius:20px;text-align:center;box-shadow:0 10px 50px #00000080;animation:scaleIn .5s ease-out;border:3px solid rgba(255,255,255,.3)}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.victory-banner h1{font-size:4rem;margin:0 0 1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#fff}.victory-banner p{font-size:2rem;margin:0 0 2rem;color:#fffffff2}.victory-banner .menu-btn{padding:1rem 3rem;font-size:1.5rem;background:#fff;color:#667eea;border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s ease}.victory-banner .menu-btn:hover{transform:scale(1.05);box-shadow:0 5px 20px #0000004d;background:#f0f0f0}.battle-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 10px #0000004d}.battle-info h2{margin:0;font-size:1.5rem}.battle-id{font-size:.85rem;opacity:.8;font-family:monospace}.turn-info{display:flex;align-items:center;gap:1rem}.turn-indicator{font-size:1.1rem;font-weight:600}.your-turn{background:#2ecc71;color:#fff;padding:.5rem 1rem;border-radius:6px;font-weight:700;animation:pulse-glow 1s infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #2ecc7180}50%{box-shadow:0 0 20px #2ecc71}}.waiting-text{color:#f39c12;font-size:1.1rem}.game-over{font-size:1.5rem;font-weight:700;color:#e74c3c}.leave-btn{padding:.5rem 1rem;background:#e74c3ce6;color:#fff;border:none;border-radius:6px;font-weight:600;transition:all .3s ease}.leave-btn:hover{background:#c0392b;transform:translateY(-1px)}.battle-content{flex:1;display:flex;overflow:hidden}.battle-sidebar{width:300px;background:#ffffff0d;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.panel{background:#ffffff0d;border-radius:8px;padding:1rem;border:1px solid rgba(255,255,255,.1)}.panel h3{margin:0 0 1rem;color:#667eea;font-size:1.2rem}.players-panel{flex:0}.player-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#ffffff0d;border-radius:6px;border:2px solid transparent;transition:all .2s ease}.player-item.me{border-color:#3498db}.player-item.active{background:#2ecc7126;border-color:#2ecc71}.player-color{width:20px;height:20px;border-radius:50%;border:2px solid white}.player-name{flex:1;color:#eee;font-weight:500}.player-ready{font-size:1.2rem}.unit-panel{flex:0}.unit-stats{display:flex;flex-direction:column;gap:.5rem}.stat-row{display:flex;justify-content:space-between;padding:.5rem;background:#ffffff0d;border-radius:4px;color:#ccc}.stat-row span:last-child{font-weight:600;color:#eee}.actions-panel{flex:0}.action-btn{width:100%;padding:1rem;border:none;border-radius:6px;font-size:1rem;font-weight:600;transition:all .3s ease;margin-bottom:.5rem}.ready-btn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff}.ready-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #2ecc7166}.end-turn-btn{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.end-turn-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #3498db66}.grid-area{flex:1;position:relative}.message-toast{position:fixed;top:100px;right:2rem;background:#2ecc71f2;color:#fff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 20px #0000004d;font-weight:600;z-index:1000;animation:slideIn .3s ease}.error-toast{position:fixed;top:100px;right:2rem;background:#e74c3cf2;color:#fff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 20px #0000004d;font-weight:600;z-index:1000;animation:slideIn .3s ease}.saved-games-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.saved-games-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;width:90%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;border:1px solid rgba(102,126,234,.3);animation:slideUp .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.modal-title-row{display:flex;align-items:center;gap:1rem}.modal-header h2{margin:0;color:#667eea;font-size:1.5rem}.save-count{background:#667eea33;color:#667eea;font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:20px}.modal-close-btn{background:none;border:none;color:#888;font-size:2rem;cursor:pointer;padding:0;line-height:1;transition:color .2s}.modal-close-btn:hover{color:#fff}.modal-content{flex:1;overflow-y:auto;padding:1.5rem 2rem}.modal-loading{text-align:center;padding:3rem;color:#ccc}.modal-loading .loading-spinner{width:48px;height:48px;border:4px solid rgba(102,126,234,.3);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.modal-error{text-align:center;padding:2rem;color:#ff6b6b}.modal-error p{margin-bottom:1rem}.modal-empty{text-align:center;padding:3rem}.modal-empty .empty-icon{font-size:4rem;margin-bottom:1rem}.modal-empty h3{color:#667eea;margin:0 0 .5rem}.modal-empty p{color:#888;margin:0}.saved-games-list{display:flex;flex-direction:column;gap:1rem}.saved-game-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.25rem;transition:all .2s}.saved-game-item:hover{border-color:#667eea80;background:#ffffff14}.saved-game-item.your-turn{border-color:#10b981;box-shadow:0 0 15px #10b98126}.game-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;min-height:32px}.save-name{color:#fff;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:.5rem}.header-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .2s}.saved-game-item:hover .header-actions{opacity:1}.btn-icon{background:#ffffff1a;border:none;border-radius:6px;padding:.35rem .5rem;font-size:.85rem;cursor:pointer;transition:all .2s}.btn-icon:hover:not(:disabled){background:#fff3}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-delete:hover:not(:disabled){background:#ef44444d}.btn-rename:hover:not(:disabled){background:#667eea4d}.rename-input-container{display:flex;align-items:center;gap:.5rem;flex:1}.rename-input{flex:1;background:#ffffff1a;border:1px solid rgba(102,126,234,.5);border-radius:6px;padding:.4rem .75rem;color:#fff;font-size:.95rem;outline:none}.rename-input:focus{border-color:#667eea;background:#ffffff26}.btn-confirm{color:#10b981}.btn-confirm:hover:not(:disabled){background:#10b9814d}.btn-cancel{color:#ef4444}.btn-cancel:hover:not(:disabled){background:#ef44444d}.game-item-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.game-status{font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:20px;background:#0000004d}.game-updated{color:#888;font-size:.8rem}.game-item-players{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}.player-badge{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:20px;border:1px solid;font-size:.85rem}.player-badge .player-name{font-weight:600}.player-badge .player-cities{color:#aaa;font-size:.75rem}.game-item-details{display:flex;align-items:center;gap:.5rem;color:#888;font-size:.85rem;margin-bottom:.75rem}.detail-separator{opacity:.5}.your-turn-indicator{background:linear-gradient(90deg,#10b981,#059669);color:#fff;text-align:center;padding:.4rem;border-radius:6px;font-weight:600;font-size:.85rem;margin-bottom:.75rem}.btn-select-game{width:100%;padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-select-game:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.btn-select-game:disabled{opacity:.6;cursor:not-allowed}.saved-game-item.your-turn .btn-select-game{background:linear-gradient(135deg,#10b981,#059669)}.saved-game-item.your-turn .btn-select-game:hover:not(:disabled){box-shadow:0 4px 15px #10b98166}.modal-content .btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.modal-content .btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.modal-content .btn-secondary:hover{background:#fff3}@media (max-width: 600px){.saved-games-modal{width:95%;max-height:90vh}.modal-header,.modal-content{padding:1rem 1.25rem}.game-item-details{flex-wrap:wrap}}.lobby-creation-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.lobby-creation-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.lobby-creation-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center;box-shadow:0 4px 20px #0000004d}.lobby-creation-header h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.lobby-creation-header p{margin:.5rem 0 0;font-size:1.1rem;opacity:.95}.lobby-creation-content{flex:1;display:flex;gap:2rem;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.lobby-creation-card{flex:1;background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);height:fit-content}.lobby-creation-card h2{margin:0 0 1.5rem;color:#667eea;font-size:1.8rem}.host-info{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#667eea1a;border-radius:8px;margin-bottom:1.5rem;border:1px solid rgba(102,126,234,.3)}.host-label{color:#aaa;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.form-section{margin-bottom:2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#bbb;font-weight:600}.form-group input,.form-group select{width:100%;padding:.75rem 1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;transition:all .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;background:#ffffff26}.form-group input:disabled,.form-group select:disabled{opacity:.5;cursor:not-allowed}.form-hint{display:block;margin-top:.5rem;color:#888;font-size:.85rem}.button-group{display:flex;gap:1rem;margin-top:2rem}.btn{flex:1;padding:1rem 2rem;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;transition:all .3s ease;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.info-card{flex:1;background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);height:fit-content}.info-card h3{margin:0 0 1.5rem;color:#667eea;font-size:1.5rem}.info-card ol{padding-left:1.5rem;margin:0 0 2rem;color:#ccc;line-height:1.8}.info-card ol li{margin-bottom:.5rem}.game-mode-info{margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.game-mode-info h4{margin:0 0 1rem;color:#eee;font-size:1.2rem}.game-mode-info ul{list-style:none;padding:0;margin:0}.game-mode-info li{padding:.75rem 0;color:#ccc;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.05)}.game-mode-info li:last-child{border-bottom:none}.game-mode-info strong{color:#667eea}.hotseat-players-section{margin-top:1.5rem;padding:1.5rem;background:#667eea1a;border-radius:12px;border:1px solid rgba(102,126,234,.3)}.hotseat-players-section h4{margin:0 0 .5rem;color:#667eea;font-size:1.1rem}.hotseat-players-section>.form-hint{margin-bottom:1rem;font-style:italic}.hotseat-players-section .player-name-input{margin-bottom:.75rem}.hotseat-players-section .player-name-input:last-child{margin-bottom:0}.hotseat-players-section .player-name-input label{font-size:.85rem;color:#aaa}.hotseat-players-section .player-name-input input{padding:.5rem .75rem;font-size:.95rem}.player-input-row{display:flex;align-items:center;gap:.75rem}.player-input-row input[type=text]{flex:1}.ai-toggle-btn{display:flex;align-items:center;gap:.4rem;cursor:pointer;padding:.5rem .8rem;background:#64646433;border:2px solid rgba(150,150,150,.3);border-radius:8px;transition:all .2s ease;font-size:.85rem;font-weight:500;color:#aaa;min-width:90px;justify-content:center}.ai-toggle-btn:hover{background:#9696964d;border-color:#96969680;color:#fff}.ai-toggle-btn.active{background:#ef444440;border-color:#ef444499;color:#ef4444;font-weight:600;box-shadow:0 0 12px #ef44444d}.ai-toggle-btn.active:hover{background:#ef444459;border-color:#ef4444cc}.player-name-input.is-ai{background:#ef444414;border-radius:8px;padding:.5rem;margin:0 -.5rem}.player-name-input.is-ai label{color:#ef4444!important}.ai-info-box{display:flex;align-items:flex-start;gap:.5rem;margin-top:1rem;padding:.75rem 1rem;background:#667eea1a;border:1px solid rgba(102,126,234,.3);border-radius:8px;font-size:.85rem;color:#aaa;line-height:1.4}.ai-info-icon{flex-shrink:0}.terrain-config-section{margin-top:1.5rem;padding:1.5rem;background:#2e7d321a;border-radius:12px;border:1px solid rgba(46,125,50,.3)}.terrain-config-section h4{margin:0 0 1rem;color:#4caf50;font-size:1.1rem}.terrain-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.preset-btn{padding:.5rem 1rem;background:#ffffff14;border:2px solid rgba(255,255,255,.2);border-radius:20px;color:#ccc;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-btn:hover:not(:disabled){background:#4caf5033;border-color:#4caf5080;color:#fff}.preset-btn.active{background:#4caf504d;border-color:#4caf50cc;color:#4caf50;font-weight:600}.terrain-sliders{display:flex;flex-direction:column;gap:1rem}.terrain-slider{display:flex;flex-direction:column;gap:.3rem}.terrain-slider label{font-size:.9rem;color:#bbb;font-weight:500}.terrain-slider input[type=range]{width:100%;height:8px;background:#ffffff1a;border-radius:4px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.terrain-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#4caf50,#2e7d32);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform .2s ease}.terrain-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.terrain-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,#4caf50,#2e7d32);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.terrain-config-section .form-hint{margin-top:1rem;text-align:center;font-size:.85rem;color:#888}.load-saved-section{margin-top:1.5rem;padding-top:1.5rem}.section-divider{display:flex;align-items:center;margin-bottom:1.5rem}.section-divider:before,.section-divider:after{content:"";flex:1;height:1px;background:#ffffff26}.section-divider span{padding:0 1rem;color:#888;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.btn-load-saved{width:100%;padding:1rem 2rem;background:#ffffff14;border:2px dashed rgba(102,126,234,.4);border-radius:8px;color:#667eea;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-load-saved:hover:not(:disabled){background:#667eea26;border-color:#667eeab3;transform:translateY(-2px)}.btn-load-saved:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 1024px){.lobby-creation-content{flex-direction:column}.lobby-creation-card,.info-card{flex:1}}.open-lobbies-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.open-lobbies-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.open-lobbies-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center;box-shadow:0 4px 20px #0000004d}.open-lobbies-header h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.open-lobbies-header p{margin:.5rem 0 0;font-size:1.1rem;opacity:.95}.open-lobbies-content{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.lobbies-actions{display:flex;gap:1rem;margin-bottom:2rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;transition:all .3s ease;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66;flex:1}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.btn-secondary{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-secondary:hover:not(:disabled){background:#fff3;border-color:#ffffff80}.loading-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:#aaa}.loading-message p{font-size:1.1rem;margin:0}.no-lobbies-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;background:#ffffff0d;border-radius:16px;border:2px dashed rgba(255,255,255,.2)}.no-lobbies-icon{font-size:5rem;margin-bottom:1rem;opacity:.7}.no-lobbies-message h3{margin:0 0 .5rem;color:#ccc;font-size:1.5rem}.no-lobbies-message p{margin:0 0 2rem;color:#888;font-size:1rem}.lobbies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.lobby-card{background:#ffffff0d;border-radius:12px;padding:1.5rem;box-shadow:0 4px 16px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.lobby-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #667eea4d;border-color:#667eea66}.lobby-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.lobby-host{display:flex;align-items:center;gap:.5rem}.host-icon{font-size:1.2rem}.host-name{color:#667eea;font-weight:700;font-size:1.1rem}.lobby-time{color:#888;font-size:.85rem}.lobby-card-body{margin-bottom:1rem}.lobby-info-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.lobby-info-row:last-child{border-bottom:none}.info-label{color:#aaa;font-size:.9rem;font-weight:500}.info-value{color:#eee;font-weight:600}.players-count{color:#667eea}.lobby-card-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.btn-join{width:100%;padding:.75rem 1.5rem;background:linear-gradient(135deg,#52c234,#42a024);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #52c2344d}.btn-join:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #52c23480}.btn-join:disabled{background:#ffffff1a;color:#888;cursor:not-allowed;box-shadow:none}.lobby-card.resume-lobby{border:2px solid rgba(255,193,7,.4);background:linear-gradient(135deg,#ffc1071a,#ffffff0d)}.lobby-card.resume-lobby:hover{border-color:#ffc107b3;box-shadow:0 8px 24px #ffc10733}.lobby-badges{display:flex;align-items:center;gap:.75rem}.resume-badge{background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a1a2e;padding:.25rem .6rem;border-radius:12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.resume-players-info{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1)}.resume-players-info .info-label{display:block;margin-bottom:.5rem;font-size:.85rem}.required-players{display:flex;flex-wrap:wrap;gap:.5rem}.required-player{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .65rem;background:#0000004d;border-radius:16px;font-size:.8rem;font-weight:500;border-left:3px solid}.required-player.connected{color:#52c234;background:#52c23426}.required-player.waiting{color:#aaa}.btn-disabled{width:100%;padding:.75rem 1.5rem;background:#ffffff0d;color:#666;border:1px dashed rgba(255,255,255,.2);border-radius:8px;font-size:.95rem;font-weight:500;cursor:not-allowed}@media (max-width: 768px){.open-lobbies-content-wrapper{margin-left:0}.lobbies-grid{grid-template-columns:1fr}.lobbies-actions{flex-direction:column}}.lobby-waiting-room{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.lobby-waiting-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.lobby-waiting-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center;box-shadow:0 4px 20px #0000004d}.lobby-waiting-header h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.lobby-waiting-header p{margin:.5rem 0 0;font-size:1.1rem;opacity:.95}.lobby-waiting-content{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:2rem}.lobby-info-panel,.players-panel,.actions-panel{background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.lobby-info-panel h2,.players-panel h2{margin:0 0 1.5rem;color:#667eea;font-size:1.5rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.info-item{display:flex;flex-direction:column;gap:.5rem}.info-label{color:#aaa;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;font-weight:600}.info-value{color:#eee;font-size:1.1rem;font-weight:700}.players-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.player-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#ffffff0d;border-radius:8px;border:2px solid rgba(255,255,255,.1);transition:all .3s ease}.player-item.ready{border-color:#52c23480;background:#52c2341a}.player-item.not-ready{border-color:#ffc10780;background:#ffc1070d}.player-item.is-ai{border-color:#ef444480;background:#ef44441a}.player-info{display:flex;align-items:center;gap:.75rem}.player-name{color:#eee;font-size:1.1rem;font-weight:600}.player-badge{padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.host-badge{background:linear-gradient(135deg,#d4af37,#f4d03f);color:#1a1a2e}.ai-badge{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.you-badge{background:#667eea4d;color:#667eea;border:1px solid rgba(102,126,234,.5)}.player-status{display:flex;align-items:center;gap:.75rem}.status-ready{color:#52c234;font-weight:700}.status-not-ready{color:#ffc107;font-weight:700}.btn-remove-ai{width:28px;height:28px;border-radius:50%;background:#ef444433;border:2px solid rgba(239,68,68,.5);color:#ef4444;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-remove-ai:hover{background:#ef444466;border-color:#ef4444cc;transform:scale(1.1)}.btn-add-ai{background:#ef444426;border:2px dashed rgba(239,68,68,.5);color:#ef4444;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s ease;margin-bottom:1rem}.btn-add-ai:hover{background:#ef444440;border-color:#ef4444cc;transform:translateY(-2px)}.waiting-for-players{text-align:center;padding:1.5rem;border-top:1px solid rgba(255,255,255,.1);margin-top:1rem}.waiting-for-players p{color:#aaa;margin:0 0 1rem}.lobby-code{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem}.code-label{color:#888;font-size:.9rem}.code-value{background:#0000004d;padding:.5rem 1rem;border-radius:6px;color:#667eea;font-family:Courier New,monospace;font-size:.9rem;border:1px solid rgba(102,126,234,.3)}.actions-panel{display:flex;flex-direction:column;gap:1rem;align-items:stretch}.btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;transition:all .3s ease;cursor:pointer;text-align:center}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-start{background:linear-gradient(135deg,#52c234,#42a024);color:#fff;box-shadow:0 4px 15px #52c23466}.btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #52c23499}.btn-ready{background:linear-gradient(135deg,#52c234,#42a024);color:#fff;box-shadow:0 4px 15px #52c23466}.btn-ready:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #52c23499}.btn-unready{background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a1a2e;box-shadow:0 4px 15px #ffc10766}.btn-unready:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ffc10799}.btn-leave{background:#e74c3c33;color:#ff6b6b;border:2px solid rgba(231,76,60,.5)}.btn-leave:hover:not(:disabled){background:#e74c3c4d;border-color:#e74c3cb3}.helper-text{text-align:center;color:#aaa;font-size:.9rem;margin:0}.loading-message,.starting-message,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;min-height:400px}.spinner{width:50px;height:50px;border:4px solid rgba(102,126,234,.2);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading-message p,.starting-message p{color:#aaa;font-size:1.1rem;margin:0}.starting-message h2{color:#667eea;font-size:2rem;margin:1rem 0}.error-container{background:#ffffff0d;border-radius:16px;border:2px solid rgba(231,76,60,.5);max-width:500px;margin:2rem auto}.error-container h2{color:#ff6b6b;margin:0 0 1rem}.resume-players-panel{background:linear-gradient(135deg,#d4af371a,#b8960c1a);border-radius:16px;padding:2rem;border:2px solid rgba(212,175,55,.3)}.resume-players-panel h2{color:#d4af37;margin:0 0 .5rem;font-size:1.3rem}.resume-info{color:#ffffffb3;margin:0 0 1rem;font-size:.95rem}.required-players-list{display:flex;flex-direction:column;gap:.75rem}.required-player{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#0003;border-radius:8px;border-left:4px solid}.required-player .player-name{color:#e8e8e8;font-weight:600}.required-player .player-status{font-size:.9rem}.required-player.connected .player-status{color:#10b981}.required-player.waiting .player-status{color:#f59e0b}.team-selection-panel{background:#ffffff0d;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.team-selection-panel h2{margin:0 0 .5rem;color:#667eea;font-size:1.5rem}.team-selection-info{color:#aaa;margin:0 0 1.5rem;font-size:.95rem}.teams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.team-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:#0003;border-radius:12px;border:3px solid;cursor:pointer;transition:all .2s ease;text-align:left}.team-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.team-card:disabled{opacity:.5;cursor:not-allowed}.team-card.selected{border-width:4px;box-shadow:0 0 20px #fff3}.team-card.taken:not(.selected){border-style:dashed}.team-color-indicator{width:16px;height:40px;border-radius:4px;flex-shrink:0}.team-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.team-name{color:#eee;font-size:1.1rem;font-weight:700}.team-cities{color:#aaa;font-size:.85rem}.team-player{color:#667eea;font-size:.85rem;font-weight:600;white-space:nowrap}.team-card.selected .team-player{color:#52c234}.team-warning{color:#f59e0b;margin:1rem 0 0;font-size:.9rem;text-align:center}.team-badge{color:#fff;font-size:.7rem;padding:.2rem .5rem}@media (max-width: 768px){.lobby-waiting-content-wrapper{margin-left:0}.info-grid{grid-template-columns:1fr}.lobby-waiting-header h1{font-size:1.8rem}.teams-grid{grid-template-columns:1fr}}.city-info-panel{position:absolute;top:20px;left:20px;width:280px;max-height:calc(100vh - 200px);background:#0a0c14f2;border:2px solid #d4af37;border-radius:12px;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff0d;overflow:hidden;display:flex;flex-direction:column}.city-info-panel.empty{height:auto}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg,#d4af3726,#d4af370d);border-bottom:1px solid rgba(212,175,55,.3)}.panel-title{font-size:13px;font-weight:700;color:#d4af37;text-transform:uppercase;letter-spacing:1.5px}.panel-close{width:24px;height:24px;border:none;background:#ffffff1a;color:#888;font-size:18px;line-height:1;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.panel-close:hover{background:#fff3;color:#fff}.panel-content{padding:16px;overflow-y:auto;flex:1}.panel-content.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.panel-content.empty-state p{color:#ffffff80;font-size:13px;line-height:1.5;margin:0}.city-name-section{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.city-color-indicator{width:40px;height:40px;border-radius:50%;flex-shrink:0;border:3px solid rgba(255,255,255,.2);box-shadow:0 0 16px currentColor}.city-name-info{display:flex;flex-direction:column;gap:4px}.city-name{font-size:20px;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.5)}.owner-name{font-size:13px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}.panel-section{margin-bottom:16px}.panel-section:last-child{margin-bottom:0}.section-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.section-icon{font-size:14px}.section-title{font-size:12px;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px;flex:1}.unit-count{background:#d4af3733;color:#d4af37;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}.units-list{display:flex;flex-direction:column;gap:6px}.unit-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#ffffff0d;border-radius:6px;transition:background .2s ease}.unit-item:hover{background:#ffffff1a}.unit-icon{font-size:18px}.unit-details{display:flex;flex-direction:column;gap:2px;flex:1}.unit-name{font-size:13px;font-weight:600;color:#fff}.monster-count{font-size:11px;color:#10b981e6}.unit-item.unit-moving{background:#f59e0b40;border:1px solid rgba(245,158,11,.6);box-shadow:0 0 8px #f59e0b4d}.unit-item.unit-moving:hover{background:#f59e0b59}.moving-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;box-shadow:0 2px 4px #0000004d}.moving-dest{font-weight:600;opacity:.9}.no-units{color:#fff6;font-size:12px;font-style:italic;padding:8px 0}.adjacent-group{margin-bottom:10px}.adjacent-group:last-child{margin-bottom:0}.group-label{font-size:11px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.adjacent-group.friendly .group-label{color:#10b981cc}.adjacent-group.enemy .group-label{color:#ef4444cc}.adjacent-list{display:flex;flex-direction:column;gap:4px}.adjacent-city-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#ffffff08;border-radius:4px;font-size:12px}.adjacent-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}.adjacent-name{color:#ffffffe6;flex:1}.adjacent-owner{font-size:11px;opacity:.7}.no-adjacent{color:#fff6;font-size:12px;font-style:italic;padding:8px 0}.location-section{padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.location-coords{font-size:12px;color:#ffffff80;font-family:Courier New,monospace}@media (max-width: 768px){.city-info-panel{width:240px;left:10px;top:10px;max-height:calc(100vh - 150px)}.city-name{font-size:18px}.city-color-indicator{width:32px;height:32px}.panel-content{padding:12px}}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.panel-content::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:3px}.panel-content::-webkit-scrollbar-thumb:hover{background:#d4af3780}.city-actions-panel{position:absolute;top:20px;left:310px;width:260px;max-height:calc(100vh - 200px);background:#0a0c14f2;border:2px solid #d4af37;border-radius:12px;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff0d;overflow:hidden;display:flex;flex-direction:column}.actions-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg,#d4af3726,#d4af370d);border-bottom:1px solid rgba(212,175,55,.3)}.actions-panel-title{font-size:13px;font-weight:700;color:#d4af37;text-transform:uppercase;letter-spacing:1.5px}.phase-badge{background:#d4af3733;color:#d4af37;font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px}.actions-panel-content{padding:16px;overflow-y:auto;flex:1}.no-city-selected,.enemy-city-selected,.combat-phase-notice{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center}.empty-icon{font-size:40px;margin-bottom:12px;opacity:.6}.no-city-selected p,.enemy-city-selected p,.combat-phase-notice p{color:#ffffff80;font-size:13px;line-height:1.5;margin:0}.hint-text{margin-top:8px!important;font-size:11px!important;color:#d4af37b3!important}.actions-list{display:flex;flex-direction:column;gap:8px}.action-button{width:100%;background:#282a36cc;border:1px solid rgba(255,255,255,.1);color:#e8e8e8;padding:12px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease;text-align:left}.action-button:hover:not(:disabled){background:#3c3e4ae6;border-color:#d4af3780;transform:translate(4px)}.action-button:active:not(:disabled){transform:translate(2px)}.action-button:disabled{opacity:.4;cursor:not-allowed}.action-button:disabled:hover{transform:none;background:#282a36cc;border-color:#ffffff1a}.action-icon{font-size:22px;width:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.action-info{display:flex;flex-direction:column;gap:2px;flex:1}.action-name{font-size:14px;font-weight:600;color:#fff}.action-desc{font-size:11px;color:#ffffff80}.action-button.organize:hover:not(:disabled){border-color:#f59e0b}.action-button.organize:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #f59e0b)}.action-button.summon:hover:not(:disabled){border-color:#8b5cf6}.action-button.summon:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #8b5cf6)}.action-button.quest:hover:not(:disabled){border-color:#10b981}.action-button.quest:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #10b981)}.action-button.move:hover:not(:disabled){border-color:#3b82f6}.action-button.move:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #3b82f6)}.action-button.attack{background:#b91c1c4d;border-color:#ef44444d}.action-button.attack:hover:not(:disabled){background:#b91c1c80;border-color:#ef4444}.action-button.attack:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #ef4444)}.actions-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:8px 0}.action-button.end-turn{background:linear-gradient(135deg,#3b82f64d,#2563eb4d);border-color:#3b82f666}.action-button.end-turn:hover:not(:disabled){background:linear-gradient(135deg,#3b82f680,#2563eb80);border-color:#3b82f6}.action-button.end-turn:hover:not(:disabled) .action-icon{filter:drop-shadow(0 0 4px #3b82f6)}.action-button.save-game{background:linear-gradient(135deg,#10b98133,#05966933);border-color:#10b9814d}.action-button.save-game:hover{background:linear-gradient(135deg,#10b98166,#05966966);border-color:#10b981}.action-button.save-game:hover .action-icon{filter:drop-shadow(0 0 4px #10b981)}.action-button.exit-game{background:linear-gradient(135deg,#ef444426,#b91c1c26);border-color:#ef444440;margin-top:4px}.action-button.exit-game:hover{background:linear-gradient(135deg,#ef44444d,#b91c1c4d);border-color:#ef4444}.action-button.exit-game:hover .action-icon{filter:drop-shadow(0 0 4px #ef4444)}@media (max-width: 900px){.city-actions-panel{left:20px;top:auto;bottom:20px;width:280px}}@media (max-width: 768px){.city-actions-panel{width:calc(100% - 40px);max-width:320px;left:20px;top:auto;bottom:20px}.action-button{padding:10px 12px}.action-icon{font-size:20px;width:28px}.action-name{font-size:13px}.action-desc{font-size:10px}}.actions-panel-content::-webkit-scrollbar{width:6px}.actions-panel-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.actions-panel-content::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:3px}.actions-panel-content::-webkit-scrollbar-thumb:hover{background:#d4af3780}.attack-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.attack-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #d4af37;border-radius:12px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}.attack-overlay-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #d4af37}.attack-overlay-header h2{margin:0;color:#1e1e28;font-size:20px;font-weight:700}.attack-overlay-close{background:transparent;border:none;color:#1e1e28;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.attack-overlay-close:hover{background:#0000001a}.attack-overlay-body{flex:1;overflow-y:auto;padding:20px}.units-table{width:100%;border-collapse:collapse;background:#1e1e2880;border-radius:8px;overflow:hidden}.units-table thead{background:#d4af3733}.units-table th{padding:12px 16px;text-align:left;color:#d4af37;font-weight:700;font-size:14px;text-transform:uppercase;border-bottom:2px solid #d4af37}.units-table tbody tr{border-bottom:1px solid rgba(255,255,255,.1);transition:background .2s ease}.units-table tbody tr:hover{background:#d4af371a}.units-table tbody tr:last-child{border-bottom:none}.units-table td{padding:12px 16px;color:#e8e8e8;font-size:14px}.monster-unit-row{background:#0003}.monster-unit-row:hover{background:#8a2be21a!important}.monster-unit-name{padding-left:32px!important;color:#b19cd9!important;font-style:italic;font-size:13px!important}.no-units-message{text-align:center;padding:40px 20px;color:#888}.no-units-message p{margin:0;font-size:16px}.attack-overlay-footer{padding:16px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:flex-end;gap:12px}@media (max-width: 768px){.attack-overlay-content{width:95%;max-height:90vh}.attack-overlay-header h2{font-size:18px}.units-table th,.units-table td{padding:10px 12px;font-size:13px}}.move-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.move-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #d4af37;border-radius:12px;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}.move-overlay-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #d4af37}.move-overlay-header h2{margin:0;color:#1e1e28;font-size:20px;font-weight:700}.move-overlay-close{background:transparent;border:none;color:#1e1e28;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.move-overlay-close:hover{background:#0000001a}.move-overlay-body{flex:1;overflow-y:auto;padding:20px}.move-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:100%;min-height:400px}.move-panel{background:#1e1e2880;border:1px solid rgba(212,175,55,.3);border-radius:8px;padding:16px;display:flex;flex-direction:column}.move-panel h3{margin:0 0 16px;color:#d4af37;font-size:16px;font-weight:700;text-transform:uppercase;border-bottom:2px solid rgba(212,175,55,.3);padding-bottom:8px}.units-list,.cities-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.unit-item,.city-item{background:#32323ccc;border:2px solid transparent;padding:12px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease}.unit-item:hover,.city-item:hover{background:#464650e6;border-color:#d4af3780;transform:translate(4px)}.unit-item.selected,.city-item.selected{background:#d4af3733;border-color:#d4af37;box-shadow:0 0 12px #d4af374d}.unit-item.unit-already-moving{background:#f59e0b33;border-color:#f59e0b80;cursor:not-allowed;opacity:.8}.unit-item.unit-already-moving:hover{transform:none;border-color:#f59e0b80;background:#f59e0b40}.already-moving-badge{margin-left:auto;background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;font-size:10px;font-weight:700;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.unit-icon,.city-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.unit-name,.city-name{color:#e8e8e8;font-size:14px;font-weight:500}.monster-unit-item{background:#1e1e2899;padding:8px 16px 8px 32px;margin-left:16px;margin-top:4px;border-radius:4px;display:flex;align-items:center;gap:12px;border-left:2px solid rgba(138,43,226,.5)}.monster-unit-item .unit-name{color:#b19cd9;font-style:italic;font-size:13px}.monster-unit-item .unit-icon{font-size:16px}.move-overlay-footer{padding:16px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:flex-end;gap:12px}@media (max-width: 768px){.move-overlay-content{width:95%;max-height:90vh}.move-panels{grid-template-columns:1fr;min-height:300px}.move-panel{min-height:200px}.move-overlay-header h2{font-size:18px}}.units-list::-webkit-scrollbar,.cities-list::-webkit-scrollbar{width:8px}.units-list::-webkit-scrollbar-track,.cities-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.units-list::-webkit-scrollbar-thumb,.cities-list::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:4px}.units-list::-webkit-scrollbar-thumb:hover,.cities-list::-webkit-scrollbar-thumb:hover{background:#d4af3780}.attack-declaration-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.attack-declaration-content{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #ef4444;border-radius:12px;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}.attack-declaration-header{background:linear-gradient(135deg,#ef4444,#dc2626);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #ef4444}.attack-declaration-header h2{margin:0;color:#fff;font-size:20px;font-weight:700}.attack-declaration-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.attack-declaration-close:hover{background:#ffffff1a}.attack-declaration-body{flex:1;overflow-y:auto;padding:20px}.attack-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:100%;min-height:400px}.attack-panel{background:#1e1e2880;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:16px;display:flex;flex-direction:column}.attack-panel h3{margin:0 0 16px;color:#ef4444;font-size:16px;font-weight:700;text-transform:uppercase;border-bottom:2px solid rgba(239,68,68,.3);padding-bottom:8px}.units-selection-list,.targets-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.unit-checkbox-item{background:#32323ccc;border:2px solid transparent;padding:12px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease}.unit-checkbox-item:hover{background:#464650e6;border-color:#ef444480}.unit-checkbox-item.selected{background:#ef444433;border-color:#ef4444;box-shadow:0 0 12px #ef44444d}.unit-checkbox-item.cannot-attack{opacity:.5;cursor:not-allowed;background:#28283299}.unit-checkbox-item.cannot-attack:hover{background:#28283299;border-color:transparent;transform:none}.moved-badge{background:#f59e0b4d;color:#f59e0b;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:auto}.unit-checkbox-item input[type=checkbox]{cursor:pointer}.unit-checkbox-item.cannot-attack input[type=checkbox]{cursor:not-allowed}.target-item{background:#32323ccc;border:2px solid transparent;padding:12px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease}.target-item:hover{background:#464650e6;border-color:#ef444480;transform:translate(4px)}.target-item.selected{background:#ef444433;border-color:#ef4444;box-shadow:0 0 12px #ef44444d}.unit-icon,.target-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.unit-name,.target-name{color:#e8e8e8;font-size:14px;font-weight:500;flex:1}.monster-unit-display{background:#1e1e2899;padding:8px 16px 8px 48px;margin-left:16px;margin-top:4px;border-radius:4px;display:flex;align-items:center;gap:12px;border-left:2px solid rgba(138,43,226,.5)}.monster-unit-display .unit-name{color:#b19cd9;font-style:italic;font-size:13px}.monster-unit-display .unit-icon{font-size:16px}.target-badge{background:#ef44444d;color:#ef4444;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase}.selection-info{margin-top:12px;padding-top:12px;border-top:1px solid rgba(239,68,68,.3);color:#aaa;font-size:13px;text-align:center}.empty-message{text-align:center;padding:40px 20px;color:#888;font-size:14px}.attack-declaration-footer{padding:16px 20px;border-top:1px solid rgba(239,68,68,.3);display:flex;justify-content:flex-end;gap:12px}.btn-attack{padding:10px 24px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease}.btn-attack:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.btn-attack:active:not(:disabled){transform:translateY(0)}.btn-attack:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.attack-declaration-content{width:95%;max-height:90vh}.attack-panels{grid-template-columns:1fr;min-height:300px}.attack-panel{min-height:200px}.attack-declaration-header h2{font-size:18px}}.units-selection-list::-webkit-scrollbar,.targets-list::-webkit-scrollbar{width:8px}.units-selection-list::-webkit-scrollbar-track,.targets-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.units-selection-list::-webkit-scrollbar-thumb,.targets-list::-webkit-scrollbar-thumb{background:#ef44444d;border-radius:4px}.units-selection-list::-webkit-scrollbar-thumb:hover,.targets-list::-webkit-scrollbar-thumb:hover{background:#ef444480}.organize-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:2000;animation:overlayFadeIn .3s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.organize-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a38);border:3px solid #d4af37;border-radius:12px;padding:0;width:90%;max-width:900px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:contentSlideIn .3s ease-out}.organize-overlay-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 24px;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom:2px solid #d4af37;display:flex;justify-content:space-between;align-items:center}.organize-overlay-header h2{margin:0;color:#1e1e28;font-size:22px;font-weight:700}.organize-overlay-close{background:transparent;border:none;color:#1e1e28;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.organize-overlay-close:hover{background:#0000001a}.organize-overlay-body{padding:20px;flex:1;overflow:hidden}.organize-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:100%;min-height:400px;max-height:60vh}.organize-column{display:flex;flex-direction:column;background:#1e1e2880;border:1px solid rgba(212,175,55,.3);border-radius:8px;overflow:hidden}.column-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#d4af371a;border-bottom:1px solid rgba(212,175,55,.2)}.column-header h3{margin:0;color:#d4af37;font-size:14px;text-transform:uppercase;letter-spacing:1px}.storage-count,.commander-count{background:#3b82f633;color:#60a5fa;font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px}.storage-count.full{background:#ef444433;color:#f87171}.storage-list,.commanders-list{flex:1;overflow-y:auto;padding:12px}.unit-card{display:flex;align-items:center;gap:12px;padding:12px;background:#32323ccc;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease;margin-bottom:8px}.unit-card:last-child{margin-bottom:0}.unit-card:hover{background:#464650e6;border-color:#d4af3780}.unit-card.selected{background:#d4af3733;border-color:#d4af37;box-shadow:0 0 8px #d4af374d}.unit-card.small{padding:8px 10px;gap:8px}.unit-icon{font-size:28px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#8a2be233;border-radius:6px;flex-shrink:0}.unit-icon.small{font-size:20px;width:28px;height:28px}.unit-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.unit-name{color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-stats{color:#888;font-size:11px}.commander-section{background:#28283299;border:1px solid rgba(212,175,55,.2);border-radius:8px;padding:12px;margin-bottom:12px}.commander-section:last-child{margin-bottom:0}.commander-header{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px}.commander-portrait{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#d4af3733;border-radius:8px}.commander-info{flex:1;display:flex;flex-direction:column;gap:2px}.commander-name{color:#d4af37;font-size:16px;font-weight:700}.commander-rp,.commander-hp{color:#888;font-size:12px}.commander-units{display:flex;flex-direction:column;gap:6px}.no-units-message{color:#666;font-size:12px;font-style:italic;text-align:center;padding:8px}.empty-message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 16px;text-align:center;color:#666}.empty-icon{font-size:32px;opacity:.5}.empty-hint{font-size:12px;color:#555}.action-section{padding:12px;background:#d4af371a;border-top:1px solid rgba(212,175,55,.3);display:flex;flex-direction:column;gap:10px}.selected-unit-display{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#aaa}.selected-unit-display strong{color:#d4af37}.unit-rp{color:#8b5cf6;font-size:12px}.commander-select{display:flex;flex-direction:column;gap:8px}.commander-select label{color:#888;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.commander-buttons{display:flex;flex-direction:column;gap:6px}.commander-select-btn{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#32323ccc;border:2px solid rgba(212,175,55,.3);border-radius:6px;cursor:pointer;transition:all .2s ease}.commander-select-btn:hover:not(.disabled){border-color:#d4af37;background:#3c3c46e6}.commander-select-btn.selected{border-color:#d4af37;background:#d4af3733}.commander-select-btn.disabled{opacity:.5;cursor:not-allowed}.cmd-name{color:#fff;font-size:13px;font-weight:600}.cmd-rp{color:#8b5cf6;font-size:12px}.assign-button,.return-button{padding:12px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease}.assign-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.assign-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.assign-button:disabled{opacity:.5;cursor:not-allowed;background:#464650cc}.return-button{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.return-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.return-button:disabled{opacity:.5;cursor:not-allowed;background:#464650cc}.organize-overlay-footer{padding:12px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:flex-end}.btn-secondary:hover{background:#5a5a64e6;border-color:#d4af37}.storage-list::-webkit-scrollbar,.commanders-list::-webkit-scrollbar{width:6px}.storage-list::-webkit-scrollbar-track,.commanders-list::-webkit-scrollbar-track{background:#0003;border-radius:3px}.storage-list::-webkit-scrollbar-thumb,.commanders-list::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:3px}.storage-list::-webkit-scrollbar-thumb:hover,.commanders-list::-webkit-scrollbar-thumb:hover{background:#d4af3780}@media (max-width: 768px){.organize-overlay-content{width:95%;max-height:90vh}.organize-columns{grid-template-columns:1fr;min-height:auto}.organize-column{max-height:40vh}.organize-overlay-header h2{font-size:18px}}.summon-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:3000;animation:overlayFadeIn .3s ease-out}.summon-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a38);border:3px solid #8b5cf6;border-radius:12px;padding:0;min-width:500px;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #000c;animation:contentSlideIn .3s ease-out}@keyframes contentSlideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.summon-overlay-header{background:linear-gradient(135deg,#8b5cf6,#7c3aed);padding:20px 24px;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom:2px solid #8b5cf6;display:flex;justify-content:space-between;align-items:center}.summon-overlay-header h2{margin:0;color:#fff;font-size:24px;font-weight:700}.summon-overlay-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.summon-overlay-close:hover{background:#ffffff1a}.summon-overlay-body{padding:24px}.resource-display{display:flex;gap:16px;margin-bottom:20px}.mana-display,.storage-display{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;background:#8a2be233;border:2px solid rgba(138,43,226,.4);border-radius:8px}.storage-display{background:#3b82f633;border-color:#3b82f666}.storage-display.full{background:#ef444433;border-color:#ef444480}.mana-icon,.storage-icon{font-size:24px}.mana-amount,.storage-amount{color:#d4af37;font-size:28px;font-weight:700}.storage-amount{color:#60a5fa}.storage-display.full .storage-amount{color:#f87171}.mana-label,.storage-label{color:#aaa;font-size:12px;text-transform:uppercase;letter-spacing:1px}.summon-info{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:8px;margin-bottom:16px}.info-icon{font-size:18px}.info-text{color:#93c5fd;font-size:13px;line-height:1.4}.info-text strong{color:#60a5fa}.storage-full-warning{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ef444426;border:1px solid rgba(239,68,68,.4);border-radius:8px;margin-bottom:16px;color:#fca5a5;font-size:13px}.warning-icon{font-size:18px}.summon-cost-info{text-align:center;margin-bottom:24px}.summon-cost-info p{margin:0;color:#b19cd9;font-size:16px}.monster-options{display:flex;flex-direction:column;gap:16px}.monster-options h3{margin:0 0 8px;color:#8b5cf6;font-size:14px;text-transform:uppercase;letter-spacing:1px}.monster-card{background:#32323ce6;border:2px solid rgba(138,43,226,.3);border-radius:8px;padding:20px;display:flex;align-items:center;gap:20px;transition:all .2s ease}.monster-card:hover:not(.disabled){border-color:#8b5cf6;transform:translate(4px);box-shadow:0 4px 12px #8a2be24d}.monster-card.disabled{opacity:.6}.monster-icon{font-size:48px;display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:#8a2be233;border-radius:8px}.monster-info{flex:1}.monster-info h3{margin:0 0 8px;color:#fff;font-size:20px;font-weight:700}.monster-cost{margin:0;color:#d4af37;font-size:14px;font-weight:600}.summon-button{padding:12px 24px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;transition:all .2s ease;white-space:nowrap}.summon-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #8a2be266}.summon-button:active:not(:disabled){transform:translateY(0)}.summon-button:disabled{opacity:.5;cursor:not-allowed;background:#464650cc}.summon-overlay-footer{padding:16px 24px;border-top:1px solid rgba(138,43,226,.3);display:flex;justify-content:flex-end;gap:12px}.btn-secondary{padding:10px 24px;background:#464650cc;border:1px solid #888;color:#e8e8e8;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease}.btn-secondary:hover{background:#5a5a64e6;border-color:#8b5cf6;transform:translateY(-1px)}@media (max-width: 768px){.summon-overlay-content{min-width:300px;max-width:95%}.summon-overlay-header h2{font-size:20px}.monster-card{flex-direction:column;text-align:center}.mana-amount{font-size:24px}}.order-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .2s ease-out}.order-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #d4af37;border-radius:12px;width:90%;max-width:900px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}.order-overlay-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #d4af37}.order-overlay-header h2{margin:0;color:#1e1e28;font-size:20px;font-weight:700}.order-overlay-close{background:transparent;border:none;color:#1e1e28;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.order-overlay-close:hover{background:#0000001a}.order-overlay-body{flex:1;overflow-y:auto;padding:20px}.order-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:100%;min-height:450px}.order-panel{background:#1e1e2880;border:1px solid rgba(212,175,55,.3);border-radius:8px;padding:16px;display:flex;flex-direction:column}.order-panel h3{margin:0 0 16px;color:#d4af37;font-size:16px;font-weight:700;text-transform:uppercase;border-bottom:2px solid rgba(212,175,55,.3);padding-bottom:8px}.order-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.order-item{background:#32323ccc;border:2px solid transparent;padding:12px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease}.order-item:hover{background:#464650e6;border-color:#d4af3780;transform:translate(4px)}.order-item.selected{background:#d4af3733;border-color:#d4af37;box-shadow:0 0 12px #d4af374d}.order-icon{font-size:20px;display:flex;align-items:center;justify-content:center;width:32px}.order-info{flex:1;display:flex;flex-direction:column;gap:4px}.order-name{color:#e8e8e8;font-size:14px;font-weight:600}.order-detail{color:#aaa;font-size:12px}.monster-display{background:#1e1e2899;padding:8px 16px 8px 48px;margin-left:16px;margin-top:4px;border-radius:4px;display:flex;align-items:center;gap:12px;border-left:2px solid rgba(138,43,226,.5)}.monster-display .order-name{color:#b19cd9;font-style:italic;font-size:13px}.monster-display .order-icon{font-size:16px;width:24px}.empty-message{text-align:center;padding:40px 20px;color:#888;font-size:14px;line-height:1.6}.order-overlay-footer{padding:16px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:flex-end;gap:12px}.btn-primary,.btn-secondary{padding:10px 24px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease;border:none}.btn-primary{background:linear-gradient(135deg,#d4af37,#aa8c2e);color:#1e1e28}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d4af3766}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#464650cc;border:1px solid #888;color:#e8e8e8}.btn-secondary:hover{background:#5a5a64e6;border-color:#d4af37;transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}@media (max-width: 768px){.order-overlay-content{width:95%;max-height:90vh}.order-panels{grid-template-columns:1fr;min-height:300px}.order-panel{min-height:200px}.order-overlay-header h2{font-size:18px}}.order-list::-webkit-scrollbar{width:8px}.order-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.order-list::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:4px}.order-list::-webkit-scrollbar-thumb:hover{background:#d4af3780}.class-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .2s ease-out}.class-overlay-content{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #d4af37;border-radius:12px;width:90%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.class-overlay-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #d4af37}.class-overlay-header h2{margin:0;color:#1e1e28;font-size:20px;font-weight:700}.class-overlay-close{background:transparent;border:none;color:#1e1e28;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.class-overlay-close:hover{background:#0000001a}.class-overlay-body{flex:1;overflow-y:auto;padding:20px;min-height:300px}.class-units-list{display:flex;flex-direction:column;gap:16px}.class-unit-group{background:#1e1e2880;border:2px solid rgba(212,175,55,.3);border-radius:8px;padding:12px;transition:all .2s ease}.class-unit-group:hover{border-color:#d4af3780;background:#28283299}.class-unit-header{display:flex;align-items:center;gap:12px;padding:8px;background:#32323c99;border-radius:6px;margin-bottom:12px}.class-unit-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px}.class-unit-info{flex:1;display:flex;flex-direction:column;gap:4px}.class-unit-name{color:#e8e8e8;font-size:16px;font-weight:700}.class-unit-detail{color:#aaa;font-size:13px}.class-monsters-container{display:flex;flex-direction:column;gap:6px;padding-left:12px}.class-monster-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1e1e2866;border-radius:4px;border-left:2px solid rgba(138,43,226,.5);transition:all .2s ease}.class-monster-item:hover{background:#28283280;border-left-color:#8a2be2cc}.class-monster-connector{color:#666;font-size:14px;font-family:monospace;width:20px;flex-shrink:0}.class-monster-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0}.class-monster-info{flex:1;display:flex;flex-direction:column;gap:2px}.class-monster-name{color:#b19cd9;font-size:14px;font-weight:600}.class-monster-type{color:#888;font-size:11px;font-style:italic;text-transform:uppercase}.class-no-monsters{opacity:.6}.class-monster-placeholder{color:#666;font-size:13px;font-style:italic}.class-empty-message{text-align:center;padding:60px 20px;color:#888}.class-empty-icon{font-size:64px;margin-bottom:16px;opacity:.3}.class-empty-message p{margin:8px 0;font-size:16px}.class-empty-hint{font-size:13px;opacity:.7}.class-overlay-footer{padding:16px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:center}.btn-back{padding:10px 24px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease;background:#464650cc;border:1px solid #888;color:#e8e8e8}.btn-back:hover{background:#5a5a64e6;border-color:#d4af37;transform:translateY(-1px)}.btn-back:active{transform:translateY(0)}@media (max-width: 768px){.class-overlay-content{width:95%;max-height:90vh}.class-overlay-header h2{font-size:18px}.class-unit-name{font-size:14px}.class-monster-name{font-size:13px}}.class-overlay-body::-webkit-scrollbar{width:8px}.class-overlay-body::-webkit-scrollbar-track{background:#0003;border-radius:4px}.class-overlay-body::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:4px}.class-overlay-body::-webkit-scrollbar-thumb:hover{background:#d4af3780}.phase-display{position:absolute;top:10px;left:10px;background:#14141ee6;border:1px solid #d4af37;border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 16px #0009;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);max-width:280px}.phase-info{border-bottom:1px solid rgba(212,175,55,.3);padding-bottom:8px}.phase-header{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}.phase-label{color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.phase-name{color:#d4af37;font-size:14px;font-weight:700}.phase-description{color:#aaa;font-size:11px;font-style:italic}.turn-info{display:flex;flex-direction:column;gap:6px}.current-team{display:flex;align-items:center;gap:6px}.turn-label{color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.team-display{display:flex;align-items:center;gap:6px}.team-color-indicator{width:16px;height:16px;border-radius:3px;border:1px solid #fff;box-shadow:0 1px 3px #0000004d}.team-name{color:#fff;font-size:13px;font-weight:700}.stats-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mana-info{display:flex;align-items:center;gap:4px;padding:3px 8px;background:#8a2be233;border:1px solid rgba(138,43,226,.4);border-radius:4px}.mana-icon{font-size:12px}.mana-value{color:#d4af37;font-size:13px;font-weight:700}.mana-label{color:#aaa;font-size:10px;text-transform:uppercase;letter-spacing:.3px}.round-info{color:#888;font-size:11px}.teams-overview{border-top:1px solid rgba(212,175,55,.3);padding-top:8px}.teams-label{color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.teams-list{display:flex;gap:8px;flex-wrap:wrap}.team-item{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:3px;background:#32323c80;transition:all .2s ease}.team-item.active{background:#d4af3733;border:1px solid #d4af37;box-shadow:0 0 6px #d4af374d}.team-color-dot{width:10px;height:10px;border-radius:50%;border:1px solid #fff}.team-item-name{color:#e8e8e8;font-size:11px;font-weight:500}@media (max-width: 768px){.phase-display{max-width:220px;padding:8px 10px;gap:6px}.phase-name{font-size:12px}.team-name{font-size:11px}.phase-description,.round-info,.mana-label{font-size:9px}}.combat-results-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .3s ease-out}.combat-results-modal{background:linear-gradient(135deg,#1e1e28,#2a2a3e);border:3px solid #d4af37;border-radius:12px;width:90%;max-width:600px;box-shadow:0 8px 32px #000c;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.combat-results-header{background:linear-gradient(135deg,#d4af37,#aa8c2e);padding:16px 20px;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom:2px solid #d4af37}.combat-results-header h2{margin:0;color:#1e1e28;font-size:20px;font-weight:700;text-align:center}.combat-results-body{padding:24px}.battle-participants{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.participant{flex:1;text-align:center;padding:16px;border-radius:8px;background:#32323c80}.participant.attacker{border:2px solid #ef4444}.participant.defender{border:2px solid #3b82f6}.participant h3{margin:0 0 8px;color:#fff;font-size:18px;font-weight:700}.participant-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.7;color:#aaa}.vs-divider{font-size:20px;font-weight:700;color:#d4af37;padding:0 8px}.battle-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.battle-section{background:#1e1e2880;border:1px solid rgba(212,175,55,.3);border-radius:8px;padding:16px}.battle-section h4{margin:0 0 12px;color:#d4af37;font-size:14px;text-transform:uppercase;letter-spacing:1px}.dice-rolls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;justify-content:center}.dice{width:36px;height:36px;background:linear-gradient(135deg,#fff,#e8e8e8);color:#1e1e28;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;border-radius:6px;border:2px solid #d4af37;box-shadow:0 2px 4px #0000004d}.total{text-align:center;font-size:16px;font-weight:700;padding:8px;border-radius:4px;border:2px solid}.total.attacker-total{background:#ef44441a;border-color:#ef4444;color:#ef4444}.total.defender-total{background:#3b82f61a;border-color:#3b82f6;color:#3b82f6}.battle-result{background:#d4af371a;border:2px solid #d4af37;border-radius:8px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.battle-result.attacker{background:#ef44441a;border-color:#ef4444}.battle-result.defender{background:#3b82f61a;border-color:#3b82f6}.result-icon{font-size:48px}.result-text{color:#fff;font-size:16px;line-height:1.5}.result-text strong{color:#d4af37}.combat-results-footer{padding:16px 20px;border-top:1px solid rgba(212,175,55,.3);display:flex;justify-content:center}.btn-next{padding:12px 32px;background:linear-gradient(135deg,#d4af37,#aa8c2e);color:#1e1e28;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;transition:all .2s ease;min-width:150px}.btn-next:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d4af3766}.btn-next:active{transform:translateY(0)}@media (max-width: 768px){.combat-results-modal{width:95%}.battle-participants{flex-direction:column;gap:8px}.vs-divider{transform:rotate(90deg)}.battle-details{grid-template-columns:1fr}.dice{width:32px;height:32px;font-size:16px}.result-icon{font-size:36px}.result-text{font-size:14px}}.team-legend{position:absolute;top:20px;right:20px;background:#000000d9;border:2px solid #d4af37;border-radius:8px;padding:12px 16px;z-index:100;min-width:160px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #00000080}.legend-header{display:flex;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(212,175,55,.4)}.legend-title{font-size:14px;font-weight:700;color:#d4af37;text-transform:uppercase;letter-spacing:1px}.legend-items{display:flex;flex-direction:column;gap:10px}.legend-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:#ffffff0d;transition:all .2s ease}.legend-item:hover{background:#ffffff1a}.legend-item.current{background:#ffffff1f;border:1px solid rgba(255,255,255,.2)}.legend-color-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}.legend-info{display:flex;flex-direction:column;gap:2px}.legend-team-name{font-size:13px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}.legend-city-count{font-size:11px;color:#fff9}@media (max-width: 768px){.team-legend{top:10px;right:10px;padding:8px 12px;min-width:140px}.legend-title{font-size:12px}.legend-items{gap:6px}.legend-item{padding:4px 6px;gap:8px}.legend-color-swatch{width:12px;height:12px}.legend-team-name{font-size:11px}.legend-city-count{font-size:10px}}.overworld-page{width:100%;height:100vh;background:#1a1a2e;display:flex;flex-direction:column;overflow:hidden;position:relative}.overworld-header{position:absolute;top:10px;left:50%;transform:translate(-50%);padding:8px 20px;background:#000000bf;border:1px solid #d4af37;border-radius:8px;text-align:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overworld-header h1{margin:0;color:#d4af37;font-size:18px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.overworld-header p{margin:4px 0 0;color:#e8e8e8;font-size:12px;opacity:.9}.overworld-map-container{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;position:relative;width:100%;height:100vh}.overworld-map{position:relative;display:inline-block;max-width:100%;max-height:100vh}.map-image{display:block;max-width:100vw;max-height:100vh;width:auto;height:auto;-webkit-user-select:none;user-select:none;border:none}.city-marker{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:10;transition:transform .2s ease}.city-marker:hover{transform:translate(-50%,-50%) scale(1.2);z-index:20}.city-marker.active{z-index:30}.city-dot{width:16px;height:16px;border:2px solid #ffffff;border-radius:50%;position:relative;z-index:2;transition:all .2s ease}.city-marker.owned .city-dot{border-width:3px;transform:scale(1.1)}.city-marker:hover .city-dot{filter:brightness(1.2);transform:scale(1.2)}.city-marker.active .city-dot{border-color:gold!important;filter:brightness(1.3);transform:scale(1.25)}.city-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;animation:pulse 2s ease-out infinite;z-index:1}.city-marker:hover .city-pulse{animation:pulse 1s ease-out infinite}.city-marker.active .city-pulse{animation:pulse .8s ease-out infinite;background:#ffd70080!important}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(3);opacity:0}}.city-name-label{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:4px;padding:2px 6px;background:#000000d9;border-radius:3px;font-size:9px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:5;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,1);border:1px solid rgba(255,255,255,.3);letter-spacing:.5px}.city-marker:hover .city-name-label{background:#000000f2;transform:translate(-50%) scale(1.1);border-color:#ffd70080}.city-marker.active .city-name-label{background:#000000f2;border-color:gold;color:gold}.unit-count-badge{position:absolute;top:-8px;right:-8px;min-width:16px;height:16px;padding:0 4px;background:#e74c3c;border:1px solid #fff;border-radius:8px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;z-index:3}@media (max-width: 768px){.overworld-header{padding:6px 12px}.overworld-header h1{font-size:14px}.overworld-header p{font-size:10px}.city-dot,.city-pulse{width:12px;height:12px}.city-name-label{font-size:8px}}@media (max-height: 600px){.overworld-page{height:100vh}}.quest-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.quest-overlay-content{background:linear-gradient(145deg,#1a1a2e,#16213e);border-radius:16px;width:90%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080,0 0 40px #8b5cf626;border:1px solid rgba(139,92,246,.3);overflow:hidden}.quest-overlay-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(90deg,rgba(139,92,246,.2),transparent);border-bottom:1px solid rgba(139,92,246,.2)}.quest-overlay-header h2{margin:0;color:#e2e8f0;font-size:1.5rem;font-weight:600}.quest-overlay-close{background:#ffffff1a;border:none;color:#94a3b8;font-size:1.25rem;width:36px;height:36px;border-radius:8px;cursor:pointer;transition:all .2s}.quest-overlay-close:hover{background:#ef44444d;color:#ef4444}.quest-overlay-body{flex:1;overflow-y:auto;padding:20px 24px}.quest-info-section{margin-bottom:20px}.quest-info-card{display:flex;gap:12px;padding:16px;background:#8b5cf61a;border-radius:12px;border:1px solid rgba(139,92,246,.2)}.quest-info-card .info-icon{font-size:1.5rem}.quest-info-card .info-content{flex:1}.quest-info-card .info-content p{margin:0;color:#cbd5e1;font-size:.9rem;line-height:1.5}.quest-info-card .info-content p+p{margin-top:8px}.active-quests-section{margin-bottom:24px}.active-quests-section h3{color:#f59e0b;font-size:1rem;margin:0 0 12px;font-weight:600}.active-quests-list{display:flex;flex-direction:column;gap:8px}.active-quest-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f59e0b1a;border-radius:8px;border:1px solid rgba(245,158,11,.2)}.active-quest-item .commander-name{color:#fcd34d;font-weight:500;min-width:120px}.active-quest-item .quest-name{flex:1;color:#cbd5e1;font-size:.9rem}.active-quest-item .turns-left{color:#94a3b8;font-size:.85rem;background:#0000004d;padding:4px 10px;border-radius:12px}.commander-selection-section h3{color:#e2e8f0;font-size:1rem;margin:0 0 16px;font-weight:600;display:flex;align-items:center;gap:8px}.selection-count{color:#8b5cf6;font-weight:500}.commanders-list{display:flex;flex-direction:column;gap:10px}.commander-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff08;border-radius:12px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s}.commander-card:hover{background:#8b5cf61a;border-color:#8b5cf64d}.commander-card.selected{background:#8b5cf626;border-color:#8b5cf6;box-shadow:0 0 20px #8b5cf633}.commander-checkbox{font-size:1.25rem}.commander-icon{font-size:1.75rem}.commander-details{flex:1;display:flex;flex-direction:column;gap:4px}.commander-details .commander-name{color:#e2e8f0;font-weight:600;font-size:1rem}.commander-details .commander-stats{color:#94a3b8;font-size:.85rem}.commander-units{display:flex;gap:4px;align-items:center}.unit-badge{font-size:1rem;opacity:.8}.more-units{color:#94a3b8;font-size:.8rem;margin-left:4px}.no-commanders{text-align:center;padding:40px 20px;color:#94a3b8}.no-commanders .empty-icon{font-size:3rem;display:block;margin-bottom:16px;opacity:.5}.no-commanders p{margin:0}.no-commanders .hint{font-size:.85rem;margin-top:8px;opacity:.7}.selection-limit-notice{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;margin-top:16px;background:#f59e0b1a;border-radius:8px;color:#fcd34d;font-size:.9rem}.quest-overlay-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0003}.quest-overlay-footer button{padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#94a3b8}.btn-secondary:hover{background:#ffffff26;color:#e2e8f0}.btn-primary.send-quest-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;color:#fff;min-width:200px}.btn-primary.send-quest-btn:hover:not(:disabled){background:linear-gradient(135deg,#9f75ff,#8b5cf6);box-shadow:0 0 20px #8b5cf666}.btn-primary.send-quest-btn:disabled{background:#8b5cf64d;color:#fff6;cursor:not-allowed}.combat-transition-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.combat-transition-content{text-align:center;max-width:800px;width:90%;padding:40px}.combat-title{color:#d4af37;font-size:48px;margin:0 0 40px;text-shadow:0 0 20px rgba(212,175,55,.5);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{text-shadow:0 0 20px rgba(212,175,55,.5)}50%{text-shadow:0 0 40px rgba(212,175,55,.8)}}.combat-matchup{display:flex;align-items:stretch;justify-content:center;gap:24px;margin-bottom:40px}.combat-side{flex:1;max-width:280px;background:#1e1e3ccc;border-radius:16px;padding:24px;border:2px solid}.combat-side.attacker{border-color:#ef4444}.combat-side.defender{border-color:#3b82f6}.combat-side h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:2px}.combat-side.attacker h3{color:#ef4444}.combat-side.defender h3{color:#3b82f6}.city-name{color:#e8e8e8;font-size:18px;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.unit-list{display:flex;flex-direction:column;gap:8px}.unit-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0000004d;border-radius:8px}.unit-icon{font-size:20px}.unit-name{flex:1;color:#e8e8e8;text-align:left}.unit-hp{color:#10b981;font-size:12px;font-family:monospace}.vs-divider{display:flex;align-items:center;justify-content:center;padding:0 16px}.vs-divider span{color:#d4af37;font-size:32px;font-weight:700;text-shadow:0 0 10px rgba(212,175,55,.5)}.countdown-section{margin-top:32px}.countdown-number{width:80px;height:80px;margin:0 auto 16px;background:linear-gradient(135deg,#d4af37,#b8960c);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1a1a2e;font-size:36px;font-weight:700;animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.countdown-section p{color:#e8e8e8;font-size:16px;margin:0;opacity:.8}.skip-button{margin-top:24px;padding:12px 32px;background:transparent;border:2px solid rgba(255,255,255,.3);border-radius:8px;color:#fff9;font-size:14px;cursor:pointer;transition:all .2s}.skip-button:hover{border-color:#d4af37;color:#d4af37}@media (max-width: 600px){.combat-matchup{flex-direction:column}.combat-side{max-width:none}.vs-divider{padding:16px 0}.combat-title{font-size:32px}}.exit-game-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.exit-game-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;width:90%;max-width:480px;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;border:1px solid rgba(239,68,68,.3);animation:slideUp .3s ease-out}.exit-game-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.exit-game-modal .modal-header h2{margin:0;color:#ef4444;font-size:1.4rem}.exit-game-modal .modal-close-btn{background:none;border:none;color:#888;font-size:1.8rem;cursor:pointer;padding:0;line-height:1;transition:color .2s}.exit-game-modal .modal-close-btn:hover:not(:disabled){color:#fff}.exit-game-modal .modal-close-btn:disabled{opacity:.5;cursor:not-allowed}.exit-game-modal .modal-content{padding:2rem 1.5rem;text-align:center}.warning-icon{font-size:3.5rem;margin-bottom:1rem}.warning-message{color:#fff;font-size:1.2rem;font-weight:600;margin:0 0 .75rem}.warning-detail{color:#9ca3af;font-size:.95rem;margin:0;line-height:1.5}.save-error{background:#ef444426;border:1px solid rgba(239,68,68,.4);border-radius:8px;padding:.75rem 1rem;margin-top:1rem;color:#ef4444;font-size:.9rem;display:flex;align-items:center;gap:.5rem;justify-content:center}.confirm-warning{background:#f59e0b26;border:1px solid rgba(245,158,11,.4);border-radius:8px;padding:.75rem 1rem;margin-top:1rem;color:#f59e0b;font-size:.9rem;display:flex;align-items:center;gap:.5rem;justify-content:center;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.exit-game-modal .modal-actions{display:flex;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid rgba(255,255,255,.1);background:#0003;border-radius:0 0 16px 16px}.exit-game-modal .btn{flex:1;padding:.85rem 1rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.exit-game-modal .btn:disabled{opacity:.6;cursor:not-allowed}.exit-game-modal .btn-cancel{background:#ffffff1a;color:#ccc;border:1px solid rgba(255,255,255,.2)}.exit-game-modal .btn-cancel:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.exit-game-modal .btn-exit-no-save{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.exit-game-modal .btn-exit-no-save:hover:not(:disabled){background:#ef444440;border-color:#ef444480}.exit-game-modal .btn-exit-no-save.confirm{background:#ef444466;border-color:#ef4444;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.exit-game-modal .btn-save-exit{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.exit-game-modal .btn-save-exit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #10b98166}@media (max-width: 500px){.exit-game-modal{width:95%}.exit-game-modal .modal-actions{flex-direction:column}.exit-game-modal .btn{flex:none}}.save-name-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.save-name-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;width:90%;max-width:450px;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;border:1px solid rgba(16,185,129,.3);animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.save-name-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.save-name-modal .modal-header h2{margin:0;color:#10b981;font-size:1.4rem}.save-name-modal .modal-close-btn{background:none;border:none;color:#888;font-size:1.8rem;cursor:pointer;padding:0;line-height:1;transition:color .2s}.save-name-modal .modal-close-btn:hover:not(:disabled){color:#fff}.save-name-modal .modal-close-btn:disabled{opacity:.5;cursor:not-allowed}.save-name-modal .modal-content{padding:1.5rem}.save-info{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.save-icon{font-size:2rem}.save-info p{color:#ccc;margin:0;font-size:.95rem}.save-name-input{width:100%;background:#ffffff1a;border:2px solid rgba(16,185,129,.3);border-radius:8px;padding:.85rem 1rem;color:#fff;font-size:1rem;outline:none;transition:all .2s}.save-name-input:focus{border-color:#10b981;background:#ffffff26}.save-name-input:disabled{opacity:.5;cursor:not-allowed}.save-name-input::placeholder{color:#666}.save-count-info{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.save-count{color:#888;font-size:.85rem}.save-count.at-limit{color:#f59e0b}.limit-warning{color:#ef4444;font-size:.85rem;background:#ef44441a;padding:.5rem .75rem;border-radius:6px;border:1px solid rgba(239,68,68,.3)}.save-name-modal .modal-actions{display:flex;gap:.75rem;margin-top:.5rem}.save-name-modal .btn{flex:1;padding:.85rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.save-name-modal .btn:disabled{opacity:.6;cursor:not-allowed}.save-name-modal .btn-cancel{background:#ffffff1a;color:#ccc;border:1px solid rgba(255,255,255,.2)}.save-name-modal .btn-cancel:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.save-name-modal .btn-save{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.save-name-modal .btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #10b98166}@media (max-width: 500px){.save-name-modal{width:95%}}.overworld-page.multiplayer{position:relative}.overworld-page.loading,.overworld-page.error{display:flex;align-items:center;justify-content:center}.loading-content,.error-content{text-align:center;color:#e8e8e8}.error-content h2{color:#ef4444;margin-bottom:16px}.error-content button{padding:12px 24px;background:linear-gradient(135deg,#d4af37,#b8960c);border:none;border-radius:8px;color:#1a1a2e;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.error-content button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d4af3766}.waiting-for-turn{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,transparent 100%);padding:16px;text-align:center;z-index:100;pointer-events:none}.waiting-for-turn p{color:#f59e0b;font-size:18px;margin:0;animation:pulse-text 2s ease-in-out infinite}@keyframes pulse-text{0%,to{opacity:.7}50%{opacity:1}}.game-paused{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;padding:32px 48px;border-radius:16px;border:2px solid #f59e0b;z-index:200}.game-paused p{color:#f59e0b;font-size:20px;margin:0}.victory-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#000000f2,#1e1e3cf2);padding:48px 64px;border-radius:16px;border:3px solid #d4af37;text-align:center;z-index:300;box-shadow:0 16px 64px #000c}.victory-banner h2{color:#d4af37;font-size:48px;margin:0 0 16px;text-shadow:0 2px 8px rgba(212,175,55,.5)}.victory-banner p{color:#e8e8e8;font-size:18px;margin:0 0 24px}.victory-banner button{padding:14px 32px;background:linear-gradient(135deg,#d4af37,#b8960c);border:none;border-radius:8px;color:#1a1a2e;font-size:16px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.victory-banner button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #d4af3766}.unit-count-badge{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#1a1a2e;border:2px solid #d4af37;border-radius:50%;color:#d4af37;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:5}.city-menu-popup.disabled{opacity:.6;pointer-events:none}.save-notification{position:fixed;top:20px;right:20px;padding:16px 24px;border-radius:12px;display:flex;align-items:center;gap:12px;z-index:1000;animation:slideIn .3s ease-out,fadeOut .3s ease-in 2.7s forwards;box-shadow:0 4px 20px #00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.save-notification.success{background:linear-gradient(135deg,#10b981f2,#059669f2);border:2px solid #10b981}.save-notification.error{background:linear-gradient(135deg,#ef4444f2,#b91c1cf2);border:2px solid #ef4444}.save-notification .notification-icon{font-size:24px}.save-notification .notification-message{color:#fff;font-size:14px;font-weight:600}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.ongoing-games-page{display:flex;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.ongoing-games-content-wrapper{flex:1;margin-left:250px;padding:32px}.ongoing-games-header{text-align:center;margin-bottom:32px}.ongoing-games-header h1{color:#d4af37;font-size:36px;margin:0 0 8px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.ongoing-games-header p{color:#e8e8e8;opacity:.8;margin:0}.ongoing-games-content{max-width:900px;margin:0 auto}.loading-container{text-align:center;padding:64px;color:#e8e8e8}.loading-spinner{width:48px;height:48px;border:4px solid rgba(212,175,55,.3);border-top-color:#d4af37;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:#ef444433;border:1px solid #ef4444;border-radius:8px;padding:16px;color:#ef4444;text-align:center;margin-bottom:24px}.no-games{text-align:center;padding:64px 32px;background:#0000004d;border-radius:16px;border:2px dashed rgba(212,175,55,.3)}.no-games-icon{font-size:64px;margin-bottom:16px}.no-games h2{color:#d4af37;margin:0 0 8px}.no-games p{color:#e8e8e8;opacity:.7;margin:0 0 24px}.games-list{display:flex;flex-direction:column;gap:16px}.game-card{background:#1e1e3ccc;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;transition:all .2s}.game-card:hover{border-color:#d4af3780;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.game-card.your-turn{border-color:#10b981;box-shadow:0 0 20px #10b98133}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.game-status{font-size:14px;padding:4px 12px;border-radius:20px;background:#0000004d}.status-active{color:#10b981}.status-paused{color:#f59e0b}.status-finished{color:#6b7280}.game-updated{color:#9ca3af;font-size:12px}.game-players{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}.player-info{flex:1;min-width:150px;padding:12px;background:#0000004d;border-radius:8px;border-left:4px solid}.player-name{display:block;color:#e8e8e8;font-weight:700;margin-bottom:4px}.player-cities{color:#9ca3af;font-size:13px}.game-details{display:flex;gap:24px;margin-bottom:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.detail-item{display:flex;flex-direction:column}.detail-label{color:#9ca3af;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.detail-value{color:#e8e8e8;font-size:14px}.your-turn-banner{background:linear-gradient(90deg,#10b981,#059669);color:#fff;text-align:center;padding:8px;border-radius:8px;font-weight:700;margin-bottom:16px;animation:pulse-banner 2s ease-in-out infinite}@keyframes pulse-banner{0%,to{opacity:1}50%{opacity:.8}}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#d4af37,#b8960c);color:#1a1a2e}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d4af3766}.game-actions{display:flex;gap:12px}.btn-host-lobby{flex:1;background:linear-gradient(135deg,#d4af37,#b8960c);color:#1a1a2e}.btn-host-lobby:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d4af3766}.btn-host-lobby:disabled{opacity:.6;cursor:not-allowed}.btn-resume{flex:1;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.btn-resume:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.game-card.your-turn .btn-resume{background:linear-gradient(135deg,#10b981,#059669)}.game-card.your-turn .btn-resume:hover{box-shadow:0 4px 12px #10b98166}@media (max-width: 768px){.ongoing-games-content-wrapper{margin-left:0;padding:16px}.game-players{flex-direction:column;gap:8px}.player-info{min-width:auto}.game-details{flex-wrap:wrap;gap:12px}}.users-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.users-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.users-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center;box-shadow:0 4px 20px #0000004d}.users-header h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.users-header p{margin:.5rem 0 0;font-size:1.1rem;opacity:.95}.users-content{flex:1;padding:2rem;max-width:900px;margin:0 auto;width:100%}.users-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:#ffffff0d;padding:.5rem;border-radius:12px}.tab-btn{flex:1;padding:.75rem 1.5rem;background:transparent;border:none;border-radius:8px;color:#aaa;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.tab-btn:hover{color:#fff;background:#ffffff1a}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.invite-badge{background:#e74c3c;color:#fff;padding:.2rem .5rem;border-radius:10px;font-size:.8rem;min-width:20px;text-align:center}.search-bar{margin-bottom:1.5rem}.search-bar input{width:100%;padding:.875rem 1.25rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:1rem;transition:all .3s ease}.search-bar input:focus{outline:none;border-color:#667eea;background:#ffffff26}.search-bar input::placeholder{color:#fff6}.user-list,.invite-list{display:flex;flex-direction:column;gap:.75rem}.user-card,.invite-card{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.user-card:hover,.invite-card:hover{background:#ffffff14;border-color:#fff3}.user-info,.invite-info{display:flex;align-items:center;gap:1rem}.user-avatar,.invite-icon{font-size:1.75rem;width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:#667eea33;border-radius:50%}.user-details,.invite-details{display:flex;flex-direction:column}.user-name,.invite-sender{color:#fff;font-weight:600;font-size:1.05rem}.user-meta,.invite-meta{color:#888;font-size:.85rem;margin-top:.2rem}.friend-badge{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;margin-left:.75rem}.user-actions,.invite-actions{display:flex;gap:.5rem}.btn-action{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-add{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}.btn-add:hover{transform:translateY(-2px);box-shadow:0 4px 15px #2ecc7166}.btn-remove{background:#e74c3c33;color:#e74c3c;border:1px solid rgba(231,76,60,.3)}.btn-remove:hover{background:#e74c3c4d}.btn-challenge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-challenge:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.btn-accept{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}.btn-accept:hover{transform:translateY(-2px);box-shadow:0 4px 15px #2ecc7166}.btn-decline{background:#ffffff1a;color:#aaa;border:1px solid rgba(255,255,255,.2)}.btn-decline:hover{background:#ffffff26;color:#fff}.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.btn-page{padding:.5rem 1.25rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-page:hover:not(:disabled){background:#fff3}.btn-page:disabled{opacity:.4;cursor:not-allowed}.page-info{color:#888;font-size:.9rem}.loading{text-align:center;padding:3rem;color:#888;font-size:1.1rem}.empty-state{text-align:center;padding:3rem;color:#888}.empty-state p{margin:.5rem 0;font-size:1rem}.empty-state p:first-child{color:#aaa;font-size:1.1rem}@media (max-width: 768px){.users-content-wrapper{margin-left:0}.user-card,.invite-card{flex-direction:column;align-items:flex-start;gap:1rem}.user-actions,.invite-actions{width:100%;justify-content:flex-end}.users-tabs{flex-direction:column}}.profile-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.profile-content-wrapper{flex:1;margin-left:280px;display:flex;flex-direction:column;overflow-y:auto}.profile-header{background:linear-gradient(135deg,#667eea,#764ba2);padding:2.5rem;display:flex;align-items:center;gap:1.5rem;box-shadow:0 4px 20px #0000004d}.profile-avatar{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff;text-transform:uppercase;box-shadow:0 4px 15px #0000004d;border:4px solid rgba(255,255,255,.3)}.profile-header-info h1{margin:0;color:#fff;font-size:2rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.profile-header-info p{margin:.25rem 0 0;color:#ffffffd9;font-size:1rem}.profile-content{flex:1;padding:2rem;max-width:1000px;margin:0 auto;width:100%}.error-message{background:#e74c3c33;border:1px solid rgba(231,76,60,.5);color:#ff6b6b;padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:center;font-weight:500}.success-message{background:#2ecc7133;border:1px solid rgba(46,204,113,.5);color:#2ecc71;padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:center;font-weight:500}.loading-state,.error-state{display:flex;align-items:center;justify-content:center;height:100%;color:#888;font-size:1.2rem}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem}.profile-card{background:#ffffff0d;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.profile-card h2{margin:0 0 1.25rem;color:#667eea;font-size:1.25rem;font-weight:600}.info-row{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.info-row:last-child{border-bottom:none}.info-label{color:#888}.info-value{color:#fff;font-weight:500}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}.stat-item{padding:.75rem;background:#ffffff0d;border-radius:8px}.stat-value{display:block;font-size:1.75rem;font-weight:700;color:#fff}.stat-item.wins .stat-value{color:#2ecc71}.stat-item.losses .stat-value{color:#e74c3c}.stat-label{display:block;font-size:.85rem;color:#888;margin-top:.25rem}.win-rate-bar{margin-top:1rem;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.win-rate-fill{height:100%;background:linear-gradient(90deg,#27ae60,#2ecc71);border-radius:4px;transition:width .5s ease}.bio-card{grid-column:span 2}.bio-card textarea{width:100%;min-height:100px;padding:1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;resize:vertical;font-family:inherit}.bio-card textarea:focus{outline:none;border-color:#667eea}.bio-card textarea::placeholder{color:#fff6}.bio-footer{display:flex;justify-content:flex-end;margin-top:.5rem}.char-count{color:#666;font-size:.85rem}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}.color-option{width:100%;aspect-ratio:1;border-radius:8px;border:3px solid transparent;cursor:pointer;transition:all .2s ease}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 10px #ffffff80}.color-preview{display:flex;align-items:center;gap:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.preview-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff;text-transform:uppercase}.color-preview span{color:#888}.save-section{margin-bottom:1.5rem}.btn-save{width:100%;padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-save:disabled{opacity:.6;cursor:not-allowed}.password-card{margin-bottom:1.5rem}.password-card .form-group{margin-bottom:1rem}.password-card label{display:block;color:#aaa;margin-bottom:.5rem;font-weight:500}.password-card input{width:100%;padding:.75rem 1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem}.password-card input:focus{outline:none;border-color:#667eea}.password-card input::placeholder{color:#fff6}.btn-change-password{padding:.75rem 1.5rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-change-password:hover:not(:disabled){background:#fff3;border-color:#ffffff80}.btn-change-password:disabled{opacity:.5;cursor:not-allowed}.danger-card{border-color:#e74c3c4d}.danger-card h2{color:#e74c3c}.danger-card>p{color:#888;margin:0 0 1rem}.btn-delete-account{padding:.75rem 1.5rem;background:#e74c3c33;border:2px solid rgba(231,76,60,.5);border-radius:8px;color:#e74c3c;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-delete-account:hover{background:#e74c3c4d}.delete-confirm{background:#e74c3c1a;padding:1rem;border-radius:8px;border:1px solid rgba(231,76,60,.3)}.delete-warning{color:#e74c3c;margin:0 0 1rem;font-weight:500}.delete-confirm input{width:100%;padding:.75rem 1rem;background:#ffffff1a;border:2px solid rgba(231,76,60,.3);border-radius:8px;color:#fff;font-size:1rem;margin-bottom:1rem}.delete-confirm input:focus{outline:none;border-color:#e74c3c}.delete-confirm input::placeholder{color:#fff6}.delete-actions{display:flex;gap:1rem}.btn-cancel{flex:1;padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#aaa;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-cancel:hover{background:#fff3;color:#fff}.btn-confirm-delete{flex:1;padding:.75rem;background:#e74c3c;border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-confirm-delete:hover:not(:disabled){background:#c0392b}.btn-confirm-delete:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.profile-content-wrapper{margin-left:0}.profile-header{flex-direction:column;text-align:center}.profile-grid{grid-template-columns:1fr}.bio-card{grid-column:span 1}.stats-grid{grid-template-columns:repeat(2,1fr)}}.app,.page{width:100%;height:100%;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 2rem;box-shadow:0 2px 10px #0000004d}.header h1{margin:0;font-size:2rem;font-weight:600}.main-content{flex:1;overflow:hidden;display:flex}.sprite-container{position:relative;display:inline-block;overflow:hidden;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges}.sprite{display:block;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges}.sprite-flip{transform:scaleX(-1)}.sprite-hurt{animation:sprite-hurt-shake .4s ease-out 1}@keyframes sprite-hurt-shake{0%{transform:translate(0)}5%{transform:translate(-4px,-3px)}10%{transform:translate(4px,2px)}15%{transform:translate(-3px,4px)}20%{transform:translate(3px,-4px)}25%{transform:translate(-4px,2px)}30%{transform:translate(4px,-2px)}35%{transform:translate(-2px,3px)}40%{transform:translate(2px,-3px)}45%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}55%{transform:translate(-2px,2px)}60%{transform:translate(2px,-2px)}65%{transform:translate(-1px,1px)}70%{transform:translate(1px,-1px)}75%{transform:translate(-1px)}80%{transform:translate(1px)}85%{transform:translateY(-1px)}90%{transform:translateY(1px)}95%{transform:translate(0)}to{transform:translate(0)}}.sprite-fade-in{animation:fade-in .3s ease-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sprite-death{animation:death-anim .8s ease-out forwards}@keyframes death-anim{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}to{opacity:0;transform:scale(.5)}}.sprite-spawn{animation:spawn-anim .5s ease-out}@keyframes spawn-anim{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.sprite-scale-1x{transform:scale(1)}.sprite-scale-1-25x{transform:scale(1.25)}.sprite-scale-1-5x{transform:scale(1.5)}.sprite-scale-2x{transform:scale(2)}.sprite-optimized{backface-visibility:hidden;perspective:1000px;transform:translateZ(0);-webkit-font-smoothing:subpixel-antialiased}@media (prefers-reduced-motion: reduce){.sprite{animation:none!important}}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Alagard,Courier New,monospace,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a1a2e;color:#eee;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100vw;height:100vh}button{cursor:pointer;font-family:Alagard,Courier New,monospace}input,select{font-family:Alagard,Courier New,monospace}