@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap";@import"https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Uncial+Antiqua&display=swap";@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600&display=swap";.game-canvas-wrapper{width:100vw;height:100vh;overflow:hidden;background-color:#000;position:relative}.game-canvas{width:1920px;height:1080px;position:absolute;overflow:hidden}.game-canvas>*{width:100%;height:100%}.auth-modal-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;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;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;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:1920px;height:1080px;background:linear-gradient(135deg,#1a1a2e,#0f0f1f);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.dashboard-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 30%,rgba(212,175,55,.04) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(118,75,162,.04) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(42,82,152,.03) 0%,transparent 60%);animation:backgroundShift 20s ease-in-out infinite}.dashboard-page:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none}@keyframes backgroundShift{0%,to{opacity:.5}50%{opacity:.8}}.dev-buttons{display:flex;gap:12px;margin-top:40px}.dev-test-button{padding:12px 24px;background:linear-gradient(135deg,#ff5722e6,#b71c1ce6);color:#fff;border:2px solid rgba(255,87,34,.5);border-radius:8px;font-size:12px;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;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}.dev-test-online{background:linear-gradient(135deg,#4caf50e6,#1b5e20e6);border-color:#4caf5080;box-shadow:0 4px 20px #0006,0 0 15px #4caf5033}.dev-test-online:hover{background:linear-gradient(135deg,#4caf50,#1b5e20);box-shadow:0 6px 25px #4caf5066,0 0 20px #4caf504d;border-color:#4caf50}.dev-test-quick{background:linear-gradient(135deg,#ffc107e6,#f57f17e6);border-color:#ffc10780;box-shadow:0 4px 20px #0006,0 0 15px #ffc10733}.dev-test-quick:hover{background:linear-gradient(135deg,#ffc107,#f57f17);box-shadow:0 6px 25px #ffc10766,0 0 20px #ffc1074d;border-color:#ffc107}.dashboard-content{display:flex;align-items:center;justify-content:center;padding:40px;position:relative;z-index:1}.dashboard-content.centered{margin-left:0}.dashboard-title-container{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}.dashboard-title{font-family:Cinzel,serif;font-size:96px;font-weight:900;letter-spacing:16px;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}.dashboard-subtitle{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:400;font-style:italic;color:#d4af37b3;letter-spacing:8px;margin-top:8px;text-transform:uppercase}@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}}.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:320px;padding:20px 48px;font-family:Cinzel,serif;font-size:20px;font-weight:700;letter-spacing:3px;text-transform:uppercase;border-radius:6px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px}.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%}.button-icon{font-size:24px}.battle-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}.battle-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)}.campaign-button{background:linear-gradient(135deg,#2a5298,#1e3a5f);color:#e8d5a3;border:2px solid rgba(212,175,55,.3);box-shadow:0 4px 20px #00000080,0 0 20px #2a52984d,inset 0 1px #ffffff1a;flex-wrap:wrap}.campaign-button:hover{background:linear-gradient(135deg,#3a6bc5,#2a5298);border-color:#d4af3780;box-shadow:0 6px 30px #0009,0 0 30px #2a529880,inset 0 1px #ffffff26;transform:translateY(-3px)}.dev-badge{font-size:10px;font-weight:600;letter-spacing:1px;padding:4px 8px;background:#ffc10733;border:1px solid rgba(255,193,7,.4);border-radius:4px;color:#ffc107;margin-left:8px}.settings-button{background:linear-gradient(135deg,#3c3c50e6,#282837f2);color:#c8c8dce6;border:2px solid rgba(150,150,170,.3);box-shadow:0 4px 20px #0006,inset 0 1px #ffffff0d}.settings-button:hover{background:linear-gradient(135deg,#505064f2,#3c3c4b);border-color:#c8c8dc66;color:#e6e6f5;box-shadow:0 6px 25px #00000080,inset 0 1px #ffffff1a;transform:translateY(-3px)}.online-section{margin-top:30px;animation:fadeInUp .7s ease-out}.online-button{background:linear-gradient(135deg,#00c853,#00897b,#00695c);color:#fff;border:2px solid rgba(0,230,118,.6);box-shadow:0 4px 20px #00000080,0 0 30px #00c85366,inset 0 1px #fff3}.online-button:hover{background:linear-gradient(135deg,#00e676,#00c853,#00897b);border-color:#00e676;box-shadow:0 6px 35px #0009,0 0 50px #00e67680,inset 0 1px #ffffff4d;transform:translateY(-3px)}.p2p-section{margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);text-align:center;animation:fadeInUp .8s ease-out}.p2p-title{font-family:Cinzel,serif;font-size:14px;font-weight:600;color:#ffffff80;letter-spacing:2px;text-transform:uppercase;margin:0 0 20px}.p2p-buttons{display:flex;gap:16px;justify-content:center}.p2p-button{display:flex;align-items:center;gap:10px;padding:14px 28px;font-size:14px;font-weight:600;font-family:Cinzel,serif;letter-spacing:1px;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.host-button{background:linear-gradient(135deg,#ffc10733,#ff980033);color:#ffd54f;border:2px solid rgba(255,193,7,.4);box-shadow:0 4px 15px #0000004d,0 0 20px #ffc1071a}.host-button:hover{background:linear-gradient(135deg,#ffc10759,#ff980059);border-color:#ffc10799;box-shadow:0 6px 20px #0006,0 0 30px #ffc10740;transform:translateY(-2px)}.join-button{background:linear-gradient(135deg,#64b5f633,#42a5f533);color:#90caf9;border:2px solid rgba(100,181,246,.4);box-shadow:0 4px 15px #0000004d,0 0 20px #64b5f61a}.join-button:hover{background:linear-gradient(135deg,#64b5f659,#42a5f559);border-color:#64b5f699;box-shadow:0 6px 20px #0006,0 0 30px #64b5f640;transform:translateY(-2px)}.connection-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:10px 16px;background:#0009;border-radius:20px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:Cinzel,serif;font-size:12px;font-weight:600;letter-spacing:1px;z-index:100;animation:fadeIn .5s ease-out}.connection-indicator.local{border-color:#64b5f666}.connection-indicator.cloud{border-color:#00e67666}.connection-indicator.lan{border-color:#ffc10766}.connection-switch-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff9;width:20px;height:20px;border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:4px;transition:all .2s ease}.connection-switch-btn:hover{background:#ff57224d;border-color:#ff572280;color:#ff5722}.dev-test-section{margin-top:30px}.dev-test-ability{background:linear-gradient(135deg,#9c27b0e6,#673ab7e6);border-color:#9c27b080;box-shadow:0 4px 20px #0006,0 0 15px #9c27b033}.dev-test-ability:hover{background:linear-gradient(135deg,#9c27b0,#673ab7);box-shadow:0 6px 25px #9c27b066,0 0 20px #9c27b04d;border-color:#9c27b0}.title-screen{width:1920px;height:1080px;background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.background-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.title-screen:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;pointer-events:none;z-index:1}.fade-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;z-index:100;pointer-events:none;transition:opacity .1s linear}.title-content{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;padding:60px 80px;box-sizing:border-box;position:relative;z-index:10}.title-content.fading{pointer-events:none}.title-content.ready{pointer-events:auto}.title-header{text-align:center;flex-shrink:0}.game-title{font-family:Cinzel Decorative,Cinzel,serif;font-weight:900;margin:0;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1}.title-aegis{font-size:140px;letter-spacing:20px;background:linear-gradient(180deg,#f0e6d3,#d4af37,#f4d03f,#d4af37,#8b6914,#5c4810);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(212,175,55,.3));animation:titleGlow 4s ease-in-out infinite alternate}.title-of{font-family:Uncial Antiqua,Cinzel,serif;font-size:48px;font-weight:400;letter-spacing:30px;color:#b4a08299;margin:-10px 0 -5px;text-transform:lowercase}.title-kings{font-size:140px;letter-spacing:20px;background:linear-gradient(180deg,#5c4810,#8b6914,#d4af37,#f4d03f,#d4af37,#f0e6d3);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(212,175,55,.3));animation:titleGlow 4s ease-in-out infinite alternate-reverse}@keyframes titleGlow{0%{filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(212,175,55,.2))}to{filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)) drop-shadow(0 0 60px rgba(212,175,55,.5))}}.title-main{display:flex;align-items:center;justify-content:center;gap:60px;flex:1;width:100%;max-width:1600px}.portrait-container{width:400px;height:400px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.portrait-image{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 20px rgba(0,0,0,.8));background:#000;border-radius:8px}.portrait-container:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(60px);opacity:.15;z-index:-1}.portrait-left:before{background:radial-gradient(circle,#4a90d9 0%,transparent 70%)}.portrait-right:before{background:radial-gradient(circle,#d94a6a 0%,transparent 70%)}.menu-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:400px}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}.menu-item{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 40px;min-width:320px;background:transparent;border:2px solid transparent;border-radius:4px;transition:all .3s ease;cursor:pointer}.menu-item.disabled{pointer-events:none;opacity:.5}.menu-label{font-family:Retro;font-size:24px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#c8beaab3;transition:all .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.8)}.menu-item.selected{background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.1) 20%,rgba(212,175,55,.15) 50%,rgba(212,175,55,.1) 80%,transparent 100%);border-color:#d4af3766}.menu-item.selected .menu-label{color:#f4d03f;text-shadow:0 0 10px rgba(244,208,63,.5),0 2px 4px rgba(0,0,0,.8)}.menu-item:not(.disabled):hover{background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.08) 20%,rgba(212,175,55,.12) 50%,rgba(212,175,55,.08) 80%,transparent 100%)}.menu-item.selected:before,.menu-item.selected:after{content:"";position:absolute;top:50%;width:40px;height:2px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent);transform:translateY(-50%)}.menu-item.selected:before{left:-50px}.menu-item.selected:after{right:-50px}.keyboard-cursor{position:absolute;left:-70px;width:48px;height:auto;image-rendering:pixelated;animation:cursorBounce .8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.4))}@keyframes cursorBounce{0%,to{transform:translate(0)}50%{transform:translate(-8px)}}.title-footer{flex-shrink:0;text-align:center;padding-bottom:20px}.hint-text{font-family:Retro;font-size:14px;font-weight:400;letter-spacing:2px;color:#968c7880;margin:0;text-transform:uppercase;animation:hintPulse 3s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:.8}}.connection-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:10px 16px;background:#0009;border-radius:20px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:Retro;font-size:12px;font-weight:400;letter-spacing:1px;z-index:50}.connection-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.connection-indicator.local .connection-dot{background:#64b5f6;box-shadow:0 0 10px #64b5f699}.connection-indicator.local .connection-label{color:#90caf9}.connection-indicator.cloud .connection-dot{background:#00e676;box-shadow:0 0 10px #00e67699}.connection-indicator.cloud .connection-label{color:#69f0ae}.connection-indicator.lan .connection-dot{background:#ffc107;box-shadow:0 0 10px #ffc10799}.connection-indicator.lan .connection-label{color:#ffd54f}.menu-item.dev-item{padding:10px 32px;min-width:260px}.menu-item.dev-item .menu-label{font-size:16px;letter-spacing:2px}.menu-item.dev-orange .menu-label{color:#ff9800b3}.menu-item.dev-orange.selected{background:linear-gradient(90deg,transparent 0%,rgba(255,152,0,.1) 20%,rgba(255,152,0,.15) 50%,rgba(255,152,0,.1) 80%,transparent 100%);border-color:#ff980066}.menu-item.dev-orange.selected .menu-label{color:#ff9800;text-shadow:0 0 10px rgba(255,152,0,.5),0 2px 4px rgba(0,0,0,.8)}.menu-item.dev-green .menu-label{color:#4caf50b3}.menu-item.dev-green.selected{background:linear-gradient(90deg,transparent 0%,rgba(76,175,80,.1) 20%,rgba(76,175,80,.15) 50%,rgba(76,175,80,.1) 80%,transparent 100%);border-color:#4caf5066}.menu-item.dev-green.selected .menu-label{color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.5),0 2px 4px rgba(0,0,0,.8)}.menu-item.dev-yellow .menu-label{color:#ffc107b3}.menu-item.dev-yellow.selected{background:linear-gradient(90deg,transparent 0%,rgba(255,193,7,.1) 20%,rgba(255,193,7,.15) 50%,rgba(255,193,7,.1) 80%,transparent 100%);border-color:#ffc10766}.menu-item.dev-yellow.selected .menu-label{color:#ffc107;text-shadow:0 0 10px rgba(255,193,7,.5),0 2px 4px rgba(0,0,0,.8)}.menu-item.dev-purple .menu-label{color:#9c27b0b3}.menu-item.dev-purple.selected{background:linear-gradient(90deg,transparent 0%,rgba(156,39,176,.1) 20%,rgba(156,39,176,.15) 50%,rgba(156,39,176,.1) 80%,transparent 100%);border-color:#9c27b066}.menu-item.dev-purple.selected .menu-label{color:#9c27b0;text-shadow:0 0 10px rgba(156,39,176,.5),0 2px 4px rgba(0,0,0,.8)}.menu-item.blinking{animation:selectionBlink .1s linear infinite}.menu-item.blinking .menu-label{animation:labelBlink .1s linear infinite}@keyframes selectionBlink{0%,49%{opacity:1;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 20%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.2) 80%,transparent 100%);border-color:#fff9}50%,to{opacity:.3;background:transparent;border-color:transparent}}@keyframes labelBlink{0%,49%{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.8),0 0 40px rgba(244,208,63,.6),0 2px 4px rgba(0,0,0,.8)}50%,to{color:#c8beaa66;text-shadow:0 2px 4px rgba(0,0,0,.8)}}.title-content.transitioning-out{animation:panUpAndOut 1.8s cubic-bezier(.4,0,.2,1) forwards}@keyframes panUpAndOut{0%{transform:translateY(0) scale(1);opacity:1}20%{transform:translateY(10px) scale(1.01);opacity:.9}50%{opacity:.3}to{transform:translateY(-80%) scale(.95);opacity:0}}.title-content.transitioning-out .portrait-left{animation:portraitExitLeft 1.8s cubic-bezier(.4,0,.2,1) forwards}.title-content.transitioning-out .portrait-right{animation:portraitExitRight 1.8s cubic-bezier(.4,0,.2,1) forwards}@keyframes portraitExitLeft{0%{transform:translate(0) translateY(0);opacity:1}40%{opacity:.4}to{transform:translate(-80px) translateY(-100%);opacity:0}}@keyframes portraitExitRight{0%{transform:translate(0) translateY(0);opacity:1}40%{opacity:.4}to{transform:translate(80px) translateY(-100%);opacity:0}}.title-content.transitioning-out .title-header{animation:titleFlyUp 1.8s cubic-bezier(.4,0,.2,1) forwards}@keyframes titleFlyUp{0%{transform:translateY(0);opacity:1}30%{opacity:.5}60%{opacity:.1}to{transform:translateY(-120%);opacity:0}}.title-content.transitioning-out .menu-container{animation:menuFlyUp 1.8s cubic-bezier(.4,0,.2,1) 50ms forwards}@keyframes menuFlyUp{0%{transform:translateY(0);opacity:1}35%{opacity:.4}70%{opacity:.1}to{transform:translateY(-100%);opacity:0}}.title-content.transitioning-out .title-footer{animation:footerFadeOut .6s ease-out forwards}@keyframes footerFadeOut{0%{opacity:1}to{opacity:0}}.sidebar{position:absolute;left:0;top:0;height:1080px;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}.home-page{width:100%;height:1080px;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{margin-bottom:2rem}.form-section h3{margin:0 0 1rem;color:#eee;font-size:1.3rem}.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::placeholder{color:#fff6}.button-group{display:flex;gap:1rem;margin-bottom:1.5rem}.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}.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}.tab-navigation{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid rgba(255,255,255,.1);padding-bottom:1rem}.tab-btn{flex:1;padding:.75rem 1rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;color:#888;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.tab-btn:hover{background:#ffffff1a;color:#ccc}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 15px #667eea66}.tab-content{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-group.keyboard-focus{position:relative}.form-group.keyboard-focus:before{content:"▶";position:absolute;left:-25px;top:50%;transform:translateY(-50%);color:#f4d03f;font-size:1rem;animation:pulse 1s infinite}.form-group.keyboard-focus input,.form-group.keyboard-focus select{border-color:#f4d03f!important;box-shadow:0 0 10px #f4d03f80,0 0 20px #f4d03f4d;background:#f4d03f1a}.btn.keyboard-focus{border-color:#f4d03f!important;box-shadow:0 0 15px #f4d03f99,0 4px 15px #667eea66;animation:pulse 1s infinite}.btn-start{width:100%;margin-top:1.5rem;padding:1.2rem;font-size:1.2rem}.keyboard-hint{text-align:center;padding:1rem;color:#888;font-family:Alagard,serif;font-size:.9rem;border-top:1px solid rgba(255,255,255,.1);margin-top:1rem}.keyboard-hint p{margin:0;color:#ffffff80}.hotseat-players-section{background:#ffffff08;border-radius:8px;padding:1rem;margin-top:1rem}.hotseat-players-section h4{margin:0 0 1rem;color:#bbb;font-size:1rem}@media (max-width: 1024px){.home-content{flex-direction:column}.welcome-card,.features-card{flex:1}}.host-game-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.host-game-container{max-width:600px;width:100%;background:#1e1e32f2;border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;position:relative}.host-game-header{text-align:center;margin-bottom:2rem;padding-top:1rem}.host-game-header h1{font-size:2.5rem;color:gold;margin:0 0 .5rem;text-shadow:0 2px 10px rgba(255,215,0,.3)}.host-game-header .subtitle{color:#fff9;margin:0;font-size:1rem}.loading-state,.error-state{text-align:center;padding:3rem}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:gold;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.error-icon{font-size:3rem;margin-bottom:1rem}.error-state p{color:#ff6b6b;margin-bottom:1.5rem}.retry-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;cursor:pointer;font-size:1rem;transition:transform .2s}.retry-button:hover{transform:scale(1.05)}.server-status{display:flex;justify-content:center;margin-bottom:1.5rem}.status-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500}.status-indicator.online{background:#4caf5033;color:#4caf50;border:1px solid rgba(76,175,80,.5)}.status-indicator.offline{background:#f4433633;color:#f44336;border:1px solid rgba(244,67,54,.5)}.status-dot{width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connection-info-card{background:#0000004d;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid rgba(255,215,0,.2)}.connection-info-card h2{color:#fff;margin:0 0 .5rem;font-size:1.2rem}.instruction{color:#fff9;margin:0 0 1rem;font-size:.9rem}.connection-display{display:flex;gap:1rem;align-items:center}.connection-string{flex:1;background:#0006;padding:1rem;border-radius:8px;font-size:1.5rem;color:gold;font-family:Fira Code,Consolas,monospace;text-align:center;border:1px solid rgba(255,215,0,.3);letter-spacing:1px}.copy-button{background:linear-gradient(135deg,gold,#ffb700);color:#1a1a2e;border:none;padding:1rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:1rem;transition:all .2s;min-width:100px}.copy-button:hover{transform:scale(1.05);box-shadow:0 4px 12px #ffd7004d}.copy-button.copied{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.alt-ips{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.alt-label{color:#ffffff80;font-size:.85rem;margin:0 0 .5rem}.alt-ip-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.alt-ip-row code{color:#ffffffb3;font-size:.9rem}.copy-button-small{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.75rem;transition:all .2s}.copy-button-small:hover{background:#ffffff1a;color:#fff}.host-info{background:#0003;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.host-info h3{color:#fff;margin:0 0 1rem;font-size:1.1rem}.host-info ol{margin:0;padding-left:1.5rem;color:#fffc}.host-info li{margin-bottom:.5rem;line-height:1.5}.host-info strong{color:gold}.user-info{text-align:center;margin-bottom:1.5rem;color:#ffffffb3}.action-buttons{display:flex;justify-content:center}.continue-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #4caf504d}.continue-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.continue-button:disabled{opacity:.5;cursor:not-allowed}.join-game-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.join-game-container{max-width:500px;width:100%;background:#1e1e32f2;border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;position:relative}.back-button{position:absolute;top:1rem;left:1rem;background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s}.back-button:hover{background:#ffffff1a;color:#fff}.join-game-header{text-align:center;margin-bottom:2rem;padding-top:1rem}.join-game-header h1{font-size:2.5rem;color:#64b5f6;margin:0 0 .5rem;text-shadow:0 2px 10px rgba(100,181,246,.3)}.join-game-header .subtitle{color:#fff9;margin:0;font-size:1rem}.connection-form{margin-bottom:1.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;color:#fffc;margin-bottom:.5rem;font-size:.9rem;font-weight:500}.form-group input{width:100%;padding:1rem;border-radius:8px;border:2px solid rgba(255,255,255,.1);background:#0000004d;color:#fff;font-size:1.2rem;font-family:Fira Code,Consolas,monospace;transition:all .2s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#64b5f6;box-shadow:0 0 0 3px #64b5f633}.form-group input.error{border-color:#f44336}.form-group input:disabled{opacity:.6;cursor:not-allowed}.form-group input::placeholder{color:#ffffff4d}.port-group{max-width:150px}.error-message{background:#f4433626;border:1px solid rgba(244,67,54,.5);border-radius:8px;padding:1rem;color:#ff6b6b;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.error-icon{font-size:1.2rem}.status-display{min-height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.status-text{color:#ffffff80;font-size:.9rem;margin:0}.connecting-status,.connected-status{display:flex;align-items:center;gap:.75rem}.connecting-status p,.connected-status p{margin:0;color:#fffc}.spinner-small{width:24px;height:24px;border:3px solid rgba(255,255,255,.2);border-top-color:#64b5f6;border-radius:50%;animation:spin 1s linear infinite}.success-icon{width:24px;height:24px;background:#4caf50;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.connected-status p{color:#4caf50}.connect-button{width:100%;background:linear-gradient(135deg,#64b5f6,#42a5f5);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #64b5f64d}.connect-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #64b5f666}.connect-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.help-section{background:#0003;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.help-section h3{color:#fff;margin:0 0 1rem;font-size:1.1rem}.help-section ol{margin:0;padding-left:1.5rem;color:#fffc}.help-section li{margin-bottom:.5rem;line-height:1.5}.help-section strong{color:#64b5f6}.user-info{text-align:center;color:#ffffffb3}.user-info strong{color:#fff}.dev-badge{display:inline-block;background:#ff57224d;color:#ff5722;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;margin-left:.5rem;font-weight:600}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.draft-carousel-3d{position:absolute;top:100px;left:50%;transform:translate(-50%);width:100%;height:calc(100% - 100px);display:flex;align-items:center;justify-content:center;overflow:visible;z-index:5;perspective:1600px}.carousel-flames-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.flames-video{width:100%;height:100%;object-fit:cover;opacity:.6}.carousel-stage{position:relative;width:320px;height:430px;transform-style:preserve-3d;transform:rotateY(calc(var(--rotation) * 1deg));transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:1}.carousel-card{position:absolute;top:0;right:0;bottom:0;left:0;width:320px;height:450px;transform:rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(700px);transform-style:preserve-3d;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;cursor:pointer;transition:filter .3s ease,opacity .3s ease}.carousel-card.disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.carousel-card:not(.centered):not(.disabled):hover{filter:brightness(1.2)}.card-3d-content{display:flex;align-items:center;justify-content:center;position:relative}.card-portrait-frame{position:relative;width:197px;height:201px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#000}.card-portrait-inner{position:absolute;width:150px;height:150px;overflow:hidden;background:#000;z-index:1}.card-portrait-inner img,.card-portrait-inner .portrait-fallback{position:relative;z-index:2}.frame-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/assets/ui/portrait-frame.png);background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;z-index:2;filter:drop-shadow(0 4px 16px rgba(0,0,0,.9))}.carousel-card.centered .frame-overlay{filter:drop-shadow(0 0 20px rgba(255,215,0,.4)) drop-shadow(0 4px 16px rgba(0,0,0,.9))}.card-portrait{width:150px;height:150px;overflow:hidden;border:3px solid rgba(40,40,60,.8);background:#111;box-shadow:0 4px 20px #000c;flex-shrink:0}.carousel-card.centered .card-portrait{border-color:#ffd70099;box-shadow:0 0 30px #ffd7004d,0 4px 20px #000c}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#28283ce6,#141428e6);font-family:Alagard,serif;font-size:3rem;color:#ffd70080}.card-stats-left,.card-stats-right{display:flex;flex-direction:column;gap:.4rem;opacity:0;transition:opacity .3s ease;pointer-events:none;position:absolute;z-index:5;background:none!important;border:none!important;box-shadow:none!important;padding:0!important}.card-stats-left.visible,.card-stats-right.visible{opacity:1}.card-stats-left{align-items:flex-end;text-align:right;left:-60px;top:50%;transform:translateY(-50%)}.card-stats-right{align-items:flex-start;text-align:left;right:-60px;top:50%;transform:translateY(-50%)}.stat-item{display:flex;flex-direction:column;gap:.15rem;background:none!important;border:none!important;box-shadow:none!important;padding:0!important}.card-stats-left .stat-item{align-items:flex-end}.card-stats-right .stat-item{align-items:flex-start}.stat-item .stat-label{font-family:Alagard,monospace;font-size:.75rem;color:#e74c3c;text-shadow:0 2px 4px rgba(0,0,0,.9);letter-spacing:1px}.stat-item .stat-value{font-family:Alagard,monospace;font-size:1.1rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.9)}.card-sprite-flat{margin-top:15px;display:flex;align-items:center;justify-content:center;min-height:120px;transform-style:flat;transition:transform .5s cubic-bezier(.4,0,.2,1);backface-visibility:visible}.carousel-unit-sprite{image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8))}.carousel-card.centered .carousel-unit-sprite{filter:drop-shadow(0 0 20px rgba(255,215,0,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.9));animation:spriteFloat 2.5s ease-in-out infinite}@keyframes spriteFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.card-name{margin-top:10px;font-family:Alagard,serif;font-size:.9rem;color:#ffffffb3;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,1),0 0 4px rgba(0,0,0,1);white-space:nowrap;transition:transform .5s cubic-bezier(.4,0,.2,1),color .3s ease,font-size .3s ease;transform-style:flat}.carousel-card.centered .card-name{font-size:1.3rem;color:gold;text-shadow:0 0 20px rgba(255,215,0,.6),0 2px 8px rgba(0,0,0,1)}.card-costs{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:.3rem;transform-style:flat;transition:transform .5s cubic-bezier(.4,0,.2,1)}.card-cost{display:flex;align-items:center;gap:.5rem;font-family:Alagard,serif;font-size:1rem;color:gold;text-shadow:0 2px 8px rgba(0,0,0,1)}.card-cost .cost-icon{font-size:1.2rem}.card-cost .cost-label{font-size:.85rem;color:#ffffffb3}.card-cost .cost-value{font-size:1.1rem;color:gold}.card-cost .cost-value.cannot-afford{color:#ff4a4a}.draft-carousel-3d.monster-draft-carousel .card-cost:not(.secondary) .cost-value{color:#64b5f6}.card-cost.secondary .cost-value{color:#b794f6}.carousel-nav-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}.nav-arrow{font-size:2.5rem;color:#ffd70080;text-shadow:0 0 15px rgba(255,215,0,.3);animation:arrowPulse 2s ease-in-out infinite;cursor:pointer;pointer-events:auto;padding:20px;border-radius:50%;transition:all .2s ease;-webkit-user-select:none;user-select:none}.nav-arrow:hover{color:#ffd700e6;text-shadow:0 0 25px rgba(255,215,0,.6);transform:scale(1.2);background:#ffd7001a}.nav-arrow:active{transform:scale(1.1)}.nav-arrow.left{animation-delay:0s}.nav-arrow.right{animation-delay:1s}@keyframes arrowPulse{0%,to{opacity:.5}50%{opacity:.9}}.carousel-nav-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-family:Alagard,monospace;font-size:.85rem;color:#fff9;text-shadow:0 2px 8px rgba(0,0,0,.9);white-space:nowrap;z-index:100}.draft-carousel-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:Alagard,serif;font-size:1.5rem;color:#ffffff80}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.evolution-tree-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:1000;display:flex;align-items:center;justify-content:center;font-family:Alagard,Courier New,monospace}.split-screen-container{position:relative;display:flex;width:1400px;height:800px;gap:30px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tree-panel,.stat-panel{flex:1;position:relative}.tree-panel-frame,.stat-panel-frame{position:absolute;top:0;left:0;width:100%;height:100%}.tree-panel-frame img,.panel-frame-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.tree-panel-content{position:absolute;left:6%;top:10%;right:6%;bottom:8%;display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:4px;border-bottom:2px solid rgba(255,215,0,.4);flex-shrink:0;margin-bottom:8px}.panel-title{font-size:1.1rem;color:gold;margin:0;text-shadow:0 2px 8px rgba(255,215,0,.5);text-transform:uppercase}.mana-display{font-size:1rem;color:#2ecc71;font-weight:700}.tree-visualization{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.tree-scale-container{display:flex;flex-direction:column;align-items:center;gap:15px;transform-origin:center center}.tree-level{display:flex;justify-content:center;align-items:flex-start;gap:20px}.tree-node{display:flex;flex-direction:column;align-items:center;padding:4px;cursor:pointer;transition:all .15s ease;border-radius:6px;background:transparent;border:2px solid transparent}.tree-node:hover:not(.disabled){background:#ffd7001a}.tree-node.focused{border-color:gold;background:#ffd70026;box-shadow:0 0 15px #ffd70066}.tree-node.disabled{opacity:.4;cursor:not-allowed}.node-sprite-container{display:flex;align-items:center;justify-content:center;min-width:173px;min-height:173px}.node-sprite{image-rendering:pixelated}.node-info{display:flex;flex-direction:column;align-items:center;gap:3px}.node-name{font-size:1.2rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.9)}.node-stars{display:flex;gap:3px}.rank-star-icon{width:18px;height:18px;filter:drop-shadow(0 0 3px rgba(255,215,0,.8))}.rank-star-icon.large{width:24px;height:24px}.tree-connector{position:absolute;top:-14px;left:50%;transform:translate(-50%);color:#ffd70099;font-size:.7rem}.stat-panel-content{position:absolute;left:8%;top:14%;right:8%;bottom:14%;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;gap:15px;overflow:hidden}.stats-left{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:12px}.stats-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.center-name{font-size:2.2rem;color:gold;text-shadow:0 2px 10px rgba(255,215,0,.6);text-align:center;margin:0}.center-stars{display:flex;gap:4px;margin-bottom:10px}.center-portrait{max-width:180px;max-height:180px;object-fit:contain;image-rendering:pixelated}.center-portrait-fallback{width:160px;height:160px;display:flex;align-items:center;justify-content:center}.defense-elements{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}.elements-label{font-size:.9rem;color:#fff9;text-transform:uppercase;letter-spacing:1px}.element-orbs-row{display:flex;gap:8px;justify-content:center}.element-orb{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.4);box-shadow:0 0 8px currentColor,inset 0 -4px 8px #0000004d,inset 0 4px 8px #fff3}.stats-right{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px}.bowling-pin-top{display:flex;align-items:flex-start}.bowling-pin-bottom{display:flex;flex-direction:column;gap:12px}.stat-row{display:flex;align-items:baseline;gap:8px}.stat-label{font-size:1.1rem;color:#ffffff80;font-weight:700;text-transform:uppercase}.stat-value{font-size:2.2rem;color:#fff;font-weight:700}.stat-delta{font-size:1rem;font-weight:700}.stat-delta.positive{color:#2ecc71}.stat-delta.negative{color:#e74c3c}.cost-row{display:flex;align-items:baseline;gap:6px}.cost-row .cost-label{font-size:.85rem;color:#ffffff80;text-transform:uppercase}.cost-row .cost-value{font-size:1.4rem;font-weight:700}.cost-row.mana .cost-value{color:#9b59b6}.cost-row.mana.cannot-afford .cost-value{color:#e74c3c}.cost-row.rune .cost-value{color:#64b5f6}.no-selection{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff6}.close-button{position:absolute;top:12px;right:12px;background:#e74c3c33;border:2px solid #e74c3c;color:#e74c3c;font-size:1.2rem;width:36px;height:36px;border-radius:6px;cursor:pointer;transition:all .2s ease;z-index:10;font-family:Alagard,Courier New,monospace}.close-button:hover{background:#e74c3c66;transform:scale(1.1)}.unit-info-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease-out}.unit-info-overlay .overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9}.unit-info-overlay .overlay-content{position:relative;width:90%;max-width:900px;max-height:85vh;background:linear-gradient(145deg,#1a1a2e,#0d0d1a);border:2px solid #4a4a7a;border-radius:12px;box-shadow:0 0 40px #6464c84d;display:flex;flex-direction:column;overflow:hidden}.info-header{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:linear-gradient(180deg,rgba(100,100,200,.2) 0%,transparent 100%);border-bottom:1px solid rgba(100,100,200,.3)}.info-portrait{width:100px;height:100px;border-radius:8px;overflow:hidden;border:2px solid #6a6aaa;flex-shrink:0;background:#0a0a15}.info-portrait .portrait-image{width:100%;height:100%;object-fit:cover}.info-portrait .portrait-sprite{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.info-title{flex:1}.info-title h2{font-family:Alagard,Courier New,monospace;font-size:2rem;color:#f0e6d2;margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.8)}.info-class{font-size:1.2rem;font-weight:700;margin-bottom:.25rem}.info-type{font-size:1rem;color:#fff9}.info-close-hint{font-size:.9rem;color:#ffffff80;text-align:right}.info-close-hint kbd{display:inline-block;padding:.2rem .5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-family:monospace;margin:0 .2rem}.info-tabs{display:flex;background:#0000004d;border-bottom:1px solid rgba(100,100,200,.3)}.info-tab{flex:1;padding:1rem;text-align:center;cursor:pointer;font-family:Alagard,Courier New,monospace;font-size:1.1rem;color:#fff9;transition:all .2s ease;border-bottom:3px solid transparent}.info-tab:hover{background:#6464c81a;color:#fffc}.info-tab.active{color:#f0e6d2;background:#6464c833;border-bottom-color:#8e44ad}.tab-count{display:inline-block;margin-left:.5rem;padding:.1rem .4rem;background:#8e44ad80;border-radius:10px;font-size:.8rem}.info-content{flex:1;padding:1.5rem;overflow-y:auto;min-height:300px}.info-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.stat-group{background:#0000004d;border-radius:8px;padding:1rem;border:1px solid rgba(100,100,200,.2)}.stat-group h4{font-family:Alagard,Courier New,monospace;font-size:1rem;color:#8e8ebe;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(100,100,200,.2)}.stat-item{display:flex;justify-content:space-between;padding:.4rem 0}.stat-label{color:#ffffffb3;font-size:.95rem}.stat-value{font-weight:700;font-size:.95rem}.stat-value.hp{color:#e74c3c}.stat-value.mp{color:#3498db}.stat-value.str{color:#ff9800}.stat-value.int{color:#9c27b0}.stat-value.agi{color:#4caf50}.stat-value.def{color:#607d8b}.stat-value.gold{color:gold}.stat-value.mana{color:#8e44ad}.stat-value.rune{color:#64b5f6}.info-combat-list{display:flex;flex-direction:column;gap:1rem}.combat-item{background:#0000004d;border-radius:8px;padding:1rem;border:1px solid rgba(100,100,200,.2);transition:border-color .2s ease}.combat-item:hover{border-color:#6464c880}.combat-item.attack{border-left:3px solid #e74c3c}.combat-item.ability{border-left:3px solid #f39c12}.combat-item.spell{border-left:3px solid #3498db}.combat-item.skill{border-left:3px solid #8e44ad}.combat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.combat-name{font-family:Alagard,Courier New,monospace;font-size:1.1rem;color:#f0e6d2}.combat-type{font-size:.9rem;font-weight:700}.combat-type.passive{color:#8e44ad}.combat-details{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.5rem}.combat-stat{font-size:.9rem;color:#ffffffb3;padding:.2rem .5rem;background:#ffffff0d;border-radius:4px}.combat-stat.mp-cost{color:#3498db;background:#3498db26}.combat-description{font-size:.9rem;color:#fff9;font-style:italic;padding-top:.5rem;border-top:1px solid rgba(100,100,200,.1)}.combat-divider{text-align:center;font-family:Alagard,Courier New,monospace;font-size:1rem;color:#8e8ebe;padding:1rem 0;border-top:1px solid rgba(100,100,200,.2);margin-top:.5rem}.empty-message{text-align:center;color:#ffffff80;font-style:italic;padding:2rem}.info-controls{display:flex;justify-content:center;gap:2rem;padding:1rem;background:#0000004d;border-top:1px solid rgba(100,100,200,.3)}.info-controls .control-hint{font-size:.9rem;color:#fff9}.info-controls .control-hint kbd{display:inline-block;padding:.2rem .5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-family:monospace;margin:0 .2rem}.info-content::-webkit-scrollbar{width:8px}.info-content::-webkit-scrollbar-track{background:#0000004d;border-radius:4px}.info-content::-webkit-scrollbar-thumb{background:#6464c866;border-radius:4px}.info-content::-webkit-scrollbar-thumb:hover{background:#6464c899}.drafted-units-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;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:1920px;height:1080px;background:#0a0a14;color:#fff;font-family:Alagard,Courier New,monospace;display:flex;flex-direction:column;overflow:hidden;position:relative}.draft-page-new:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0a0a1400,#1a1a2e4d);pointer-events:none;z-index:0}.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}.section-title{font-size:14px;font-weight:700;color:gold;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.summary-value.gold{color:gold}.summary-value.rune-power{color:#64b5f6}.top-drafted-overlay{position:absolute;top:10px;left:20px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}.top-drafted-overlay .drafted-label{font-family:Alagard,monospace;font-size:1rem;color:gold;text-shadow:0 2px 8px rgba(0,0,0,1),0 0 4px rgba(0,0,0,1);letter-spacing:1px}.top-drafted-overlay .drafted-units-row{display:flex;flex-wrap:wrap;gap:4px;max-width:300px}.top-drafted-overlay .drafted-unit-sprite{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.9))}.top-currency-overlay{position:absolute;top:20px;right:30px;z-index:200;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}.top-currency-overlay .currency-item{display:flex;align-items:center;gap:12px;font-family:Alagard,monospace;background:#00000080;padding:8px 16px;border-radius:8px}.top-currency-overlay .currency-icon{font-size:2.4rem}.top-currency-overlay .currency-label{font-size:1.7rem;color:#fffc;text-shadow:0 2px 8px rgba(0,0,0,1)}.top-currency-overlay .currency-value{font-size:2.2rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,1)}.top-currency-overlay .currency-item.gold .currency-value{color:gold}.top-currency-overlay .currency-item.rune-power .currency-value{color:#64b5f6}.top-currency-overlay .currency-item.mana .currency-value{color:#9b59b6}.draft-main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem 2rem;overflow:hidden;color:#fff;position:relative;z-index:1}.phase-content{width:100%;max-width:1200px;height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;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:1rem 2rem;z-index:5}.draft-background-video{position:absolute;top:0;left:0;width:1920px;height:1080px;object-fit:cover;opacity:.7;z-index:0;pointer-events:none}.phase-indicator{font-size:.85rem;color:#ffd700cc;text-align:center;letter-spacing:3px;text-shadow:0 2px 8px rgba(255,215,0,.5);position:relative;z-index:100}.phase-title{font-size:2rem;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:100}.sub-title{font-size:1.4rem;font-family:Alagard,Courier New,monospace;color:#f39c12;text-align:center;margin:0}.phase-instructions{font-size:.9rem;color:#fff9;text-align:center;margin:0;font-family:Alagard,Courier New,monospace;position:relative;z-index:100}.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:absolute;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:absolute;bottom:80px;left:50%;transform:translate(-50%);z-index:50}.right-control-panel{position:absolute;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}.menu-arrow-hint{font-size:1rem;color:#ffd70066;text-shadow:0 0 10px rgba(255,215,0,.2);text-align:center;letter-spacing:4px;position:relative;z-index:30}.menu-arrow-hint.up{animation:hintBounceUp 1.5s ease-in-out infinite}.menu-arrow-hint.down{animation:hintBounceDown 1.5s ease-in-out infinite;position:relative;z-index:100}@keyframes hintBounceUp{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:.9}}@keyframes hintBounceDown{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:.9}}.drafted-units-stage{display:flex;flex-direction:column;align-items:center;justify-content:center}.drafted-units-stage-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;max-width:800px;padding:2rem}.drafted-stage-unit{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#141428cc;border:2px solid rgba(255,215,0,.4);border-radius:8px;min-width:100px}.drafted-stage-unit.rune-knight{border-color:#ffd700b3;background:#281e0ae6}.drafted-stage-unit.monster{border-color:#3498dbb3;background:#0a1428e6}.drafted-stage-unit .unit-name{font-size:.75rem;color:#fffc;text-align:center;font-family:Alagard,Courier New,monospace}.no-units-message{font-size:1.2rem;color:#ffffff80;padding:3rem;text-align:center}.finish-stage{display:flex;flex-direction:column;align-items:center;justify-content:center}.finish-stage-content{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;background:#141428cc;border:3px solid rgba(46,204,113,.5);border-radius:12px;box-shadow:0 0 30px #2ecc7133}.finish-summary{display:flex;flex-direction:column;gap:1rem}.summary-item{display:flex;justify-content:space-between;gap:3rem;font-size:1.1rem;font-family:Alagard,Courier New,monospace}.summary-label{color:#ffffffb3}.summary-value{color:gold;font-weight:700}.summary-value.mana{color:#9b59b6}.finish-draft-button-large{padding:1.25rem 3rem;background:#2ecc714d;border:3px solid rgba(46,204,113,.7);color:#2ecc71;font-size:1.3rem;font-family:Alagard,Courier New,monospace;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.finish-draft-button-large:hover{background:#2ecc7180;border-color:#2ecc71;box-shadow:0 0 30px #2ecc7199;transform:translateY(-3px)}.unit-details-stage{display:flex;flex-direction:column;align-items:center;justify-content:center}.unit-details-stage-content{display:flex;align-items:center;gap:3rem;padding:2rem;background:#141428cc;border:2px solid rgba(255,215,0,.4);border-radius:12px}.unit-details-sprite{display:flex;align-items:center;justify-content:center;min-width:150px;min-height:150px}.unit-details-info{display:flex;flex-direction:column;gap:1rem}.unit-details-info .unit-name{font-size:1.8rem;color:gold;margin:0;font-family:Alagard,Courier New,monospace}.unit-details-info .unit-class{font-size:1.1rem;color:#ffffffb3;font-family:Alagard,Courier New,monospace}.unit-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.unit-stats-grid .stat{font-size:.95rem;color:#fffc;font-family:Alagard,Courier New,monospace;padding:.5rem 1rem;background:#0000004d;border-radius:4px}.no-unit-selected{font-size:1.2rem;color:#ffffff80;padding:3rem;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal}.assignment-page{width:1920px;height:1080px;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.assignment-background-video{position:absolute;top:0;left:0;width:1920px;height:1080px;object-fit:cover;opacity:.7;z-index:0;pointer-events:none}.assignment-frame{position:relative;width:1600px;height:950px;display:flex;align-items:center;justify-content:center;z-index:1}.frame-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:1}.frame-content{position:relative;z-index:10;width:90%;height:88%;display:flex;flex-direction:column;padding:40px 60px;box-sizing:border-box}.assignment-header{text-align:center;margin-bottom:20px;flex-shrink:0}.assignment-header h1{font-family:Alagard,Cinzel,serif;font-size:2.5rem;color:#f4d03f;text-shadow:0 0 20px rgba(244,208,63,.4),0 2px 8px rgba(0,0,0,.9);margin:0 0 8px;letter-spacing:4px}.player-name{font-family:Alagard,serif;font-size:1.1rem;color:#c8b48cb3;margin:0}.assignment-error{background:#e74c3c4d;border:1px solid #e74c3c;color:#ff6b6b;padding:8px 20px;border-radius:8px;margin-top:10px;display:inline-block;font-family:Alagard,serif;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.commander-carousel{display:flex;align-items:center;justify-content:center;gap:30px;flex:1;min-height:350px;position:relative}.carousel-arrow{background:#282332cc;border:2px solid rgba(212,175,55,.4);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#d4af37cc;cursor:pointer;transition:all .3s ease;flex-shrink:0;z-index:20}.carousel-arrow:hover:not(:disabled){background:#3c3246e6;border-color:#d4af37cc;transform:scale(1.1);box-shadow:0 0 20px #d4af374d}.carousel-arrow:disabled{opacity:.3;cursor:not-allowed}.carousel-track{display:flex;align-items:center;justify-content:center;gap:40px;perspective:1000px;flex:1;min-height:100%}.commander-card{background:linear-gradient(180deg,#1e192df2,#140f23fa);border:3px solid rgba(80,70,100,.6);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative}.commander-card.position-center{width:280px;min-height:380px;transform:scale(1.1) translateZ(0);z-index:10;border-color:#d4af3799;box-shadow:0 0 30px #d4af3733,0 10px 40px #00000080}.commander-card.position-left,.commander-card.position-right{width:220px;min-height:300px;transform:scale(.85);opacity:.6;z-index:5}.commander-card.position-left{transform:scale(.85) translate(-20px) rotateY(15deg)}.commander-card.position-right{transform:scale(.85) translate(20px) rotateY(-15deg)}.commander-card.position-hidden{display:none}.commander-card.position-left:hover,.commander-card.position-right:hover{opacity:.85;border-color:#d4af3766}.commander-card.over-capacity{border-color:#e74c3c99!important;box-shadow:0 0 20px #e74c3c33!important}.commander-card.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.commander-portrait{width:150px;height:150px;border-radius:8px;overflow:hidden;border:3px solid rgba(100,90,120,.5);background:#111;margin-bottom:15px;box-shadow:0 4px 20px #0009}.position-center .commander-portrait{width:180px;height:180px;border-color:#d4af3780;box-shadow:0 0 20px #d4af3733,0 4px 20px #0009}.commander-portrait .portrait-image{width:100%;height:100%;object-fit:cover}.commander-portrait .portrait-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#28283ce6,#141428e6);font-family:Alagard,serif;font-size:3rem;color:#d4af3780}.commander-name{font-family:Alagard,serif;font-size:1.1rem;color:#ffffffe6;text-align:center;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.9)}.position-center .commander-name{font-size:1.4rem;color:#f4d03f;text-shadow:0 0 15px rgba(244,208,63,.4),0 2px 8px rgba(0,0,0,.9)}.capacity-bar-container{width:100%;margin-bottom:15px}.capacity-bar{height:10px;background:#00000080;border-radius:5px;overflow:hidden;border:1px solid rgba(80,70,100,.4)}.position-center .capacity-bar{height:14px}.capacity-fill{height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:4px;transition:width .3s ease}.capacity-fill.over{background:linear-gradient(90deg,#e74c3c,#c0392b)}.capacity-text{font-family:Alagard,monospace;font-size:.85rem;color:#968cb4cc;display:block;text-align:center;margin-top:5px}.position-center .capacity-text{font-size:1rem;color:#3498db}.assigned-monsters{width:100%;min-height:60px;display:flex;flex-direction:column;gap:6px;margin-top:10px}.drop-hint{color:#968cb480;font-family:Alagard,serif;font-size:.9rem;text-align:center;padding:15px;border:2px dashed rgba(80,70,100,.4);border-radius:8px;font-style:italic}.assigned-monster-chip{display:flex;align-items:center;gap:8px;background:#2ecc7126;border:1px solid rgba(46,204,113,.3);border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .2s ease}.assigned-monster-chip:hover{background:#e74c3c33;border-color:#e74c3c66}.monster-chip-name{flex:1;font-family:Alagard,serif;font-size:.85rem;color:#ffffffe6}.monster-chip-cost{font-family:Alagard,monospace;font-size:.8rem;color:#3498db;background:#3498db33;padding:2px 6px;border-radius:4px}.monster-chip-remove{color:#e74c3c;font-size:1.1rem;font-weight:700;opacity:0;transition:opacity .2s}.assigned-monster-chip:hover .monster-chip-remove{opacity:1}.idle-units-section{background:linear-gradient(180deg,#140f1e99,#0f0a19cc);border:2px solid rgba(80,70,100,.3);border-radius:0 0 40px 40px;padding:15px 30px;margin-top:auto;position:relative}.idle-units-section:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:80%;height:2px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.3),transparent)}.idle-units-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:15px}.idle-units-header h2{font-family:Alagard,serif;font-size:1.2rem;color:#c8b48ccc;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.9)}.idle-count{font-family:Alagard,monospace;font-size:1rem;color:#3498db}.idle-units-track{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;min-height:100px;max-height:150px;overflow-y:auto;padding:10px 5px}.all-assigned-message{color:#2ecc71;font-family:Alagard,serif;font-size:1.2rem;text-align:center;padding:30px;width:100%;text-shadow:0 0 15px rgba(46,204,113,.4)}.idle-unit{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 10px 8px;background:#28233799;border:2px solid rgba(100,90,130,.4);border-radius:8px;cursor:grab;transition:all .2s ease;min-width:85px;height:115px}.idle-unit:hover{background:#3c3250cc;border-color:#d4af3780;transform:translateY(-3px);box-shadow:0 5px 15px #0006}.idle-unit.selected{border-color:#f4d03fcc;box-shadow:0 0 20px #f4d03f4d}.idle-unit:active{cursor:grabbing}.idle-unit-sprite{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.idle-sprite{image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));margin-bottom:-4px}.idle-unit-info{display:flex;flex-direction:column;align-items:center;gap:2px}.idle-unit-name{font-family:Alagard,serif;font-size:.75rem;color:#ffffffd9;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap}.idle-unit-cost{font-family:Alagard,monospace;font-size:.7rem;color:#e74c3c;background:#e74c3c33;padding:1px 6px;border-radius:4px}.idle-units-hint{text-align:center;margin-top:10px;font-family:Alagard,serif;font-size:.85rem;color:#968cb480;font-style:italic}.assignment-footer{text-align:center;margin-top:15px;flex-shrink:0}.ready-button{font-family:Alagard,serif;font-size:1.2rem;padding:14px 50px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.ready-button.ready{background:linear-gradient(145deg,#2ecc71,#27ae60);color:#fff;box-shadow:0 4px 20px #2ecc7166}.ready-button.ready:hover{transform:translateY(-2px);box-shadow:0 6px 25px #2ecc7180}.ready-button.has-unassigned{background:linear-gradient(145deg,#e67e22,#d35400);color:#fff;box-shadow:0 4px 20px #e67e2266}.ready-button.has-unassigned:hover{transform:translateY(-2px);box-shadow:0 6px 25px #e67e2280}.ready-button:disabled{background:linear-gradient(145deg,#34495e,#2c3e50);color:#7f8c8d;cursor:not-allowed;box-shadow:none}.ready-button.keyboard-focus{box-shadow:0 0 20px #f4d03f99,0 0 40px #f4d03f4d,0 4px 20px #2ecc7166;border:2px solid #f4d03f;animation:buttonPulse 1s infinite}@keyframes buttonPulse{0%,to{transform:scale(1);box-shadow:0 0 20px #f4d03f99,0 0 40px #f4d03f4d,0 4px 20px #2ecc7166}50%{transform:scale(1.02);box-shadow:0 0 25px #f4d03fcc,0 0 50px #f4d03f66,0 6px 25px #2ecc7180}}.unassigned-warning{color:#e67e22;margin-top:10px;font-family:Alagard,serif;font-size:.9rem;animation:warningPulse 2s infinite}@keyframes warningPulse{0%,to{opacity:1}50%{opacity:.6}}.player-status{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:50}.player-status-item{background:#000000b3;padding:8px 15px;border-radius:6px;font-family:Alagard,serif;font-size:.9rem;border:1px solid #34495e;color:#c8c8c8cc}.player-status-item.ready{border-color:#2ecc71;color:#2ecc71}.loading{display:flex;justify-content:center;align-items:center;height:1080px;width:1920px;font-family:Alagard,serif;font-size:1.5rem;color:#f4d03f;text-shadow:0 0 20px rgba(244,208,63,.4);position:absolute;top:0;left:0;z-index:10;background:#0000004d}.modal-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:linear-gradient(145deg,#2c3e50,#1a252f);border:3px solid #e67e22;border-radius:16px;padding:30px 40px;max-width:500px;width:90%;box-shadow:0 0 40px #e67e224d,0 10px 40px #00000080;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.leave-unassigned-modal h2{font-family:Alagard,serif;color:#e67e22;font-size:1.8rem;margin-bottom:20px;text-align:center}.modal-warning{font-family:Alagard,serif;color:#e0e0e0;font-size:1.1rem;margin-bottom:15px;text-align:center}.modal-warning strong{color:#e74c3c}.unassigned-list{background:#0000004d;border-radius:8px;padding:15px 25px;margin:15px 0;list-style:none}.unassigned-list li{font-family:Alagard,serif;color:#e0e0e0;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}.unassigned-list li:last-child{border-bottom:none}.unassigned-list .more-items{color:#7f8c8d;font-style:italic}.modal-info{font-family:Alagard,serif;color:#a0a0a0;font-size:.95rem;text-align:center;margin-bottom:25px}.modal-info strong{color:#e74c3c}.modal-buttons{display:flex;gap:15px;justify-content:center}.modal-btn{font-family:Alagard,serif;font-size:1.1rem;padding:12px 30px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.modal-btn.cancel-btn{background:linear-gradient(145deg,#34495e,#2c3e50);color:#e0e0e0;border:1px solid #5d6d7e}.modal-btn.cancel-btn:hover{background:linear-gradient(145deg,#4a6278,#3d5269);transform:translateY(-2px)}.modal-btn.confirm-btn{background:linear-gradient(145deg,#e74c3c,#c0392b);color:#fff}.modal-btn.confirm-btn:hover{background:linear-gradient(145deg,#ec7063,#e74c3c);transform:translateY(-2px);box-shadow:0 4px 15px #e74c3c66}.idle-units-track::-webkit-scrollbar{width:8px}.idle-units-track::-webkit-scrollbar-track{background:#0000004d;border-radius:4px}.idle-units-track::-webkit-scrollbar-thumb{background:#d4af3766;border-radius:4px}.idle-units-track::-webkit-scrollbar-thumb:hover{background:#d4af3799}.commander-card.keyboard-focus{animation:commanderFocusPulse 1s ease-in-out infinite}.commander-card.keyboard-focus:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:3px solid rgba(212,175,55,.8);border-radius:14px;pointer-events:none;animation:borderGlow 1.5s ease-in-out infinite}@keyframes commanderFocusPulse{0%,to{box-shadow:0 0 30px #d4af3733,0 10px 40px #00000080}50%{box-shadow:0 0 50px #d4af3766,0 10px 40px #00000080}}@keyframes borderGlow{0%,to{opacity:.8}50%{opacity:1}}.idle-unit.keyboard-focus{border-color:#ffd700e6!important;background:#463c5fe6!important;transform:translateY(-3px) scale(1.05);box-shadow:0 0 25px #ffd70066,0 8px 20px #00000080;animation:monsterFocusPulse 1s ease-in-out infinite}@keyframes monsterFocusPulse{0%,to{box-shadow:0 0 25px #ffd70066,0 8px 20px #00000080}50%{box-shadow:0 0 35px #ffd70099,0 8px 20px #00000080}}.idle-unit.keyboard-focus:before{content:"▶";position:absolute;left:-24px;top:50%;transform:translateY(-50%);color:gold;font-size:1.2rem;animation:focusArrowBounce .8s ease-in-out infinite}@keyframes focusArrowBounce{0%,to{transform:translateY(-50%) translate(0)}50%{transform:translateY(-50%) translate(3px)}}.idle-units-hint{font-family:Alagard,monospace;font-size:.75rem;letter-spacing:1px}.hex-tile{transition:all .15s ease}.hex-tile.buffer-hex{pointer-events:none;opacity:.7}.hex-tile.buffer-hex:hover path{stroke:none;stroke-width:0;filter:none}.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)}}.health-bar{position:relative;background:#1a0000;border:2px solid #8B4513;border-radius:2px;overflow:hidden;box-shadow:0 2px 4px #0006}.health-bar-fill{height:100%;background:linear-gradient(180deg,#4ade80,#22c55e,#16a34a);transition:width .3s ease-out;box-shadow:0 0 4px #22c55e}.status-effect-icons{pointer-events:none}.status-effect-icon{filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5))}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}}.status-effect-icons g{animation:status-pulse 2s ease-in-out infinite}.status-effect-icons g:nth-child(2){animation-delay:.3s}.status-effect-icons g:nth-child(3){animation-delay:.6s}.status-effect-icons g:nth-child(4){animation-delay:.9s}.unit{transition:none}.unit:hover circle{filter:brightness(1.3);stroke-width:3}.unit.selected circle{stroke:#fd4;stroke-width:5;filter:brightness(1.5) drop-shadow(0 0 8px rgba(255,221,68,.8));animation:selected-pulse 1.2s ease-in-out infinite}@keyframes selected-pulse{0%,to{stroke-width:5;filter:brightness(1.5) drop-shadow(0 0 8px rgba(255,221,68,.8))}50%{stroke-width:6;filter:brightness(1.7) drop-shadow(0 0 14px rgba(255,221,68,1))}}.unit.selected{filter:drop-shadow(0 0 6px rgba(255,221,68,.6))}.damage-popup{position:absolute;pointer-events:none;font-weight:700;font-size:29px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;z-index:10000;animation:damage-rise 1.5s ease-out forwards;transform-origin:center;transform:translate(-50%)}@keyframes damage-rise{0%{transform:translate(-50%) translateY(0) scale(.8);opacity:0}20%{opacity:1;transform:translate(-50%) translateY(-10px) scale(1.2)}to{transform:translate(-50%) translateY(-60px) scale(1);opacity:0}}.damage-popup-hit{color:#f33;font-size:29px}.damage-popup-crit{color:red;font-size:38px;font-weight:900;animation:damage-rise-crit 1.5s ease-out forwards}@keyframes damage-rise-crit{0%{transform:translate(-50%) translateY(0) scale(.8);opacity:0}10%{transform:translate(calc(-50% - 5px)) translateY(-5px) scale(1.3);opacity:1}20%{transform:translate(calc(-50% + 5px)) translateY(-10px) scale(1.2)}30%{transform:translate(calc(-50% - 3px)) translateY(-15px) scale(1.1)}40%{transform:translate(calc(-50% + 3px)) translateY(-20px) scale(1)}to{transform:translate(-50%) translateY(-70px) scale(1);opacity:0}}.damage-popup-miss{color:#fff;font-style:italic;font-size:24px;font-weight:400}.damage-popup-heal{color:#4cff4c;font-size:31px;font-weight:700;animation:heal-rise 1.5s ease-out forwards}@keyframes heal-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(-60px) scale(1);opacity:0}}.combat-log-container{position:absolute;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-entry.status-effect{border-left-color:#9b59b6;background:#9b59b61a}.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:absolute;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:absolute;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}.battle-mode-container{position:absolute;top:10px;right:20px;z-index:998;pointer-events:auto}.combat-log-toggle.with-mode-indicator{top:120px}.combat-log-container.with-mode-indicator{top:160px}.hex-grid-container{position:relative;width:100%;height:100%;background:#9ba8b4;overflow:hidden}.hex-grid-svg{width:100%;height:100%}.fog-overlay,.fog-cloud{display:none}.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:absolute;top:0;left:0;width:1920px;height:1080px;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{position:relative;width:1920px;height:1080px;background:#1a1a2e;color:#fff;overflow:hidden}.map-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.deployment-header-minimal{position:absolute;top:20px;left:20px;z-index:10}.player-turn-indicator{display:flex;align-items:center;gap:var(--space-md);background:#000000b3;padding:var(--space-sm) var(--space-md);border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.player-name-badge{font-size:var(--font-lg);font-weight:700;text-shadow:1px 1px 4px rgba(0,0,0,.8)}.units-count{font-size:var(--font-sm);color:#aaa;padding-left:var(--space-sm);border-left:1px solid rgba(255,255,255,.2)}.units-panel-overlay{position:absolute;left:20px;top:80px;bottom:20px;width:280px;z-index:10;background:#000000bf;border-radius:12px;padding:var(--space-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden}.units-panel-overlay h3{margin-bottom:var(--space-md);font-size:var(--font-lg);flex-shrink:0}.empty-message{text-align:center;opacity:.7;padding:var(--space-lg)}.units-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md);overflow-y:auto;flex:1;min-height:0}.unit-card{position:relative;background:#ffffff1a;border:2px solid;border-radius:8px;padding:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;transition:all .2s ease;color:#fff;text-align:left;flex-shrink:0}.unit-card:hover{background:#ffffff26;transform:translate(5px)}.unit-card.selected{background:#ffffff40;border-width:3px;transform:scale(1.02);box-shadow:0 4px 12px #ffffff4d}.unit-card.focused{outline:2px solid #ffd700;outline-offset:2px;box-shadow:0 0 12px #ffd70066}.unit-card.focused.selected{outline-color:#4caf50;box-shadow:0 0 16px #4caf5080}.unit-card.deployed{opacity:.5;filter:grayscale(60%);background:#64646433;border-color:#555!important}.unit-card.deployed:hover{opacity:.7;filter:grayscale(40%);background:#c8646433;border-color:#c44!important}.unit-card.deployed.focused{outline-color:#c44;opacity:.8;filter:grayscale(30%)}.deployed-badge{position:absolute;top:-8px;right:-8px;background:#4caf50;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 6px #0000004d}.unit-icon{font-size:var(--font-xl)}.unit-info{flex:1;min-width:0}.unit-name{font-size:var(--font-sm);font-weight:700;text-transform:capitalize;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-element{font-size:var(--font-xs);text-transform:capitalize;opacity:.9}.selection-hint{background:#3498db4d;border:2px dashed #3498db;border-radius:8px;padding:var(--space-sm);text-align:center;margin-bottom:var(--space-md);font-size:var(--font-xs);animation:pulse 2s infinite;flex-shrink:0}.keyboard-hint{background:#64648c33;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:var(--space-xs);text-align:center;margin-bottom:var(--space-sm);font-size:11px;color:#aaa;flex-shrink:0}.end-deployment-button{width:100%;padding:var(--space-sm) var(--space-md);background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:var(--font-md);font-weight:700;cursor:pointer;transition:all .3s ease;flex-shrink:0}.end-deployment-button:hover{background:#2ecc71;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.end-deployment-button.focused{outline:3px solid #ffd700;outline-offset:2px;box-shadow:0 0 16px #ffd70080;background:#2ecc71}.begin-battle-button{width:100%;padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;border-radius:8px;font-size:var(--font-md);font-weight:700;cursor:pointer;transition:all .3s ease;flex-shrink:0;margin-top:var(--space-sm)}.begin-battle-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c80}.waiting-message{text-align:center;padding:var(--space-md);flex-shrink:0}.waiting-message p{margin:var(--space-xs) 0;font-size:var(--font-sm)}.waiting-message p:first-child{font-size:var(--font-md);font-weight:700;color:#2ecc71}.players-panel-overlay{position:absolute;right:20px;top:20px;width:200px;z-index:10;background:#000000bf;border-radius:12px;padding:var(--space-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.players-panel-overlay h3{margin-bottom:var(--space-md);font-size:var(--font-lg)}.player-status-row{display:flex;flex-direction:column;gap:2px;padding:var(--space-sm);margin-bottom:var(--space-sm);background:#ffffff0d;border-radius:6px}.player-name{font-weight:700;font-size:var(--font-sm)}.player-deployed{font-size:var(--font-xs);opacity:.9}.player-ready{font-size:var(--font-xs);margin-top:2px}.ai-deploying-banner{position:absolute;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:linear-gradient(90deg,#ef4444f2,#b91c1cf2);color:#fff;box-shadow:0 4px 20px #00000080;animation:aiBannerSlideIn .3s ease-out}@keyframes aiBannerSlideIn{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.ai-deploying-banner .ai-icon{font-size:var(--font-2xl)}.ai-deploying-banner .ai-text{font-size:var(--font-lg)}.ai-deploying-banner .ai-text strong{color:#fef08a}.ai-deploying-banner .ai-hint{font-size:var(--font-sm);opacity:.9;background:#0003;padding:var(--space-xs) var(--space-sm);border-radius:4px}.zoom-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;background:transparent}.zoom-overlay.active{pointer-events:all}.hotseat-blocker{z-index:100}.waiting-screen{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:1000;display:flex;align-items:center;justify-content:center}.waiting-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.waiting-content{position:relative;width:90%;max-width:550px;background:linear-gradient(180deg,#1a1a2e,#16213e);border:3px solid rgba(102,126,234,.5);border-radius:16px;box-shadow:0 8px 32px #000000e6,0 0 60px #667eea26;overflow:hidden;animation:waitingSlideIn .3s ease-out}@keyframes waitingSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.waiting-header{padding:2rem 2rem 1.5rem;text-align:center;background:#0000004d;border-bottom:1px solid rgba(102,126,234,.3)}.waiting-header h2{margin:0;font-family:Cinzel,serif;font-size:1.8rem;font-weight:700;color:#667eea;letter-spacing:3px;text-shadow:0 2px 8px rgba(102,126,234,.5)}.waiting-subtitle{margin:.75rem 0 0;font-family:Inter,sans-serif;font-size:.95rem;color:#ffffffb3}.progress-section{padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.progress-bar{width:100%;height:10px;background:#ffffff1a;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:5px;transition:width .5s ease;box-shadow:0 0 12px #667eea80}.progress-text{text-align:center;margin-top:.75rem;font-family:Inter,sans-serif;font-size:.9rem;color:#fff9}.players-list{padding:1rem 1.5rem;max-height:300px;overflow-y:auto}.player-status-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;margin-bottom:.5rem;background:#28284666;border:2px solid rgba(100,100,150,.2);border-radius:10px;transition:all .2s ease}.player-status-row:last-child{margin-bottom:0}.player-status-row.current-user{background:#667eea26;border-color:#667eea66}.player-status-row.finished{background:#4caf501a;border-color:#4caf504d}.player-status-row.drafting,.player-status-row.deploying{background:#ffc1071a;border-color:#ffc1074d}.player-icon{font-size:1.3rem}.player-name{font-family:Inter,sans-serif;font-size:1rem;font-weight:500;color:#ffffffe6;display:flex;align-items:center;gap:.5rem}.you-badge{font-size:.75rem;font-weight:600;color:#667eea;background:#667eea33;padding:.15rem .4rem;border-radius:4px}.ai-badge{font-size:.7rem;font-weight:600;color:#ef4444;background:#ef444433;padding:.15rem .4rem;border-radius:4px}.status-info{display:flex;align-items:center;gap:.5rem}.status-icon{font-size:1.1rem}.status-text{font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;color:#ffffffb3}.player-status-row.finished .status-text{color:#4caf50}.player-status-row.drafting .status-text,.player-status-row.deploying .status-text{color:#ffc107}.waiting-animation{display:flex;justify-content:center;gap:.5rem;padding:1.5rem}.waiting-dot{width:12px;height:12px;background:#667eea;border-radius:50%;animation:waitingBounce 1.4s ease-in-out infinite}.waiting-dot:nth-child(2){animation-delay:.2s}.waiting-dot:nth-child(3){animation-delay:.4s}@keyframes waitingBounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.waiting-hint{padding:1rem 2rem 1.5rem;text-align:center;border-top:1px solid rgba(255,255,255,.1);background:#0003}.waiting-hint p{margin:0;font-family:Inter,sans-serif;font-size:.85rem;color:#ffffff80;font-style:italic}.waiting-hint .back-hint{margin-top:.75rem;color:#667eeacc;font-style:normal}.waiting-hint kbd{display:inline-block;padding:.2rem .5rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;box-shadow:0 2px #0000004d}@media (max-width: 600px){.waiting-content{width:95%}.waiting-header{padding:1.5rem}.waiting-header h2{font-size:1.4rem}.players-list{padding:.75rem 1rem;max-height:250px}.player-status-row{padding:.6rem .8rem}}.waiting-page{width:1920px;height:1080px;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f1a);display:flex;align-items:center;justify-content:center}.waiting-page .loading-message{font-family:Cinzel,serif;font-size:1.5rem;color:#ffffffb3;letter-spacing:2px}.waiting-page .waiting-screen{position:relative;width:100%;height:100%}.waiting-page .waiting-backdrop{background:transparent}.turn-announcement-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0a0a14f2,#000000fa);display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .5s ease;cursor:pointer;outline:none;overflow:hidden}.turn-announcement-content{text-align:center;animation:contentSlide .6s ease}@keyframes contentSlide{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.turn-number-badge{display:inline-block;padding:8px 32px;background:linear-gradient(135deg,#c9a227,#8b7014);color:#1a1a2e;font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;border-radius:24px;margin-bottom:32px;box-shadow:0 4px 20px #c9a22766;animation:badgeGlow 2s ease infinite}@keyframes badgeGlow{0%,to{box-shadow:0 4px 20px #c9a22766}50%{box-shadow:0 4px 30px #c9a22799}}.turn-announcement-text{font-family:Cinzel,Georgia,serif;font-size:4rem;font-weight:700;margin-bottom:24px;min-height:5rem;display:flex;justify-content:center;align-items:center;gap:2px}.player-name-text{letter-spacing:4px;display:inline-block}.typewriter-cursor{display:inline-block;font-weight:100;animation:blink .6s infinite;margin-left:2px;color:#c9a227}.typewriter-cursor.hidden{opacity:0}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.turn-announcement-subtitle{font-size:1.3rem;color:#888;letter-spacing:2px;margin-bottom:48px;opacity:0;transform:translateY(10px);transition:all .5s ease}.turn-announcement-subtitle.visible{opacity:1;transform:translateY(0)}.turn-continue-btn{padding:18px 64px;font-size:1.3rem;font-weight:700;font-family:Cinzel,Georgia,serif;background:linear-gradient(135deg,#2d5016,#3d6b1e);color:#fff;border:2px solid #4a8526;border-radius:12px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;opacity:0;transform:translateY(20px);box-shadow:0 8px 30px #0000004d;display:flex;align-items:center;gap:16px;margin:0 auto}.turn-continue-btn.visible{opacity:1;transform:translateY(0);animation:buttonPulse 2s ease infinite}@keyframes buttonPulse{0%,to{box-shadow:0 8px 30px #0000004d,0 0 #6ab82e66}50%{box-shadow:0 8px 30px #0000004d,0 0 0 10px #6ab82e00}}.turn-continue-btn:hover{background:linear-gradient(135deg,#3d6b1e,#4a8526);border-color:#6ab82e;transform:translateY(-3px);box-shadow:0 12px 40px #6ab82e4d}.turn-continue-btn .btn-hint{font-size:.85rem;color:#a8d86e;font-weight:400;opacity:.8}.turn-decoration{position:absolute;width:300px;height:2px;background:linear-gradient(90deg,transparent 0%,#c9a227 50%,transparent 100%);top:50%;opacity:.5}.turn-decoration.left{left:5%;animation:decorFadeIn 1s ease .3s forwards;opacity:0}.turn-decoration.right{right:5%;animation:decorFadeIn 1s ease .3s forwards;opacity:0}@keyframes decorFadeIn{0%{opacity:0;width:0}to{opacity:.5;width:300px}}@media (max-width: 768px){.turn-announcement-text{font-size:2.5rem}.turn-continue-btn{padding:14px 48px;font-size:1.1rem}.turn-decoration{display:none}}.end-turn-confirmation-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .2s ease;outline:none}.end-turn-confirmation-dialog{background:linear-gradient(135deg,#1a1a2e,#16213e);border:3px solid #c9a227;border-radius:16px;padding:32px 48px;text-align:center;box-shadow:0 0 40px #c9a2274d,0 20px 60px #00000080,inset 0 1px #ffffff1a;animation:slideIn .3s ease;min-width:320px}@keyframes slideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.end-turn-confirmation-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.end-turn-icon{font-size:2rem}.end-turn-confirmation-header h2{margin:0;font-size:1.8rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);font-family:Cinzel,Georgia,serif}.end-turn-message{color:#b8b8b8;font-size:1.1rem;margin-bottom:28px}.end-turn-buttons{display:flex;justify-content:center;gap:24px;margin-bottom:20px}.end-turn-btn{padding:14px 48px;font-size:1.2rem;font-weight:700;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.yes-btn{background:linear-gradient(135deg,#2d5016,#3d6b1e);color:#a8d86e;border-color:#4a8526}.yes-btn:hover,.yes-btn.selected{background:linear-gradient(135deg,#3d6b1e,#4a8526);border-color:#6ab82e;box-shadow:0 0 20px #6ab82e66;transform:translateY(-2px)}.no-btn{background:linear-gradient(135deg,#4a1a1a,#6b2020);color:#ff8a8a;border-color:#8b3030}.no-btn:hover,.no-btn.selected{background:linear-gradient(135deg,#6b2020,#8b3030);border-color:#b84040;box-shadow:0 0 20px #b8404066;transform:translateY(-2px)}.end-turn-hint{display:flex;justify-content:center;gap:20px;color:#666;font-size:.85rem;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.end-turn-hint span{display:flex;align-items:center;gap:4px}.action-menu-backdrop{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:999;background:transparent}.action-menu{position:absolute;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),.action-menu-option.focused:not(.disabled){background:linear-gradient(135deg,#4a4a6e,#3a3a5e);border-color:#6a6a8a;transform:translate(2px)}.action-menu-option.focused:not(.disabled){border-color:gold;box-shadow:0 0 8px #ffd7004d}.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)}.action-menu-option.disabled.focused{border-color:#666}.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}.action-menu-hint{display:flex;justify-content:center;gap:12px;padding:8px;border-top:1px solid #4a4a6a;background:#0003;font-size:11px;color:#888}.action-menu-hint span{white-space:nowrap}.submenu-backdrop{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:1000;background:#0000004d}.attack-submenu{position:absolute;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),.submenu-option.focused:not(.disabled){background:linear-gradient(135deg,#4a4a6e,#3a3a5e);border-color:#6a6a8a;transform:translate(2px)}.submenu-option.focused:not(.disabled){border-color:gold;box-shadow:0 0 8px #ffd7004d}.submenu-option.disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,#2a2a3e,#1a1a2e)}.submenu-option.disabled.focused{border-color:#666}.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}.submenu-hint{display:flex;justify-content:center;gap:12px;padding:8px;border-top:1px solid #4a4a6a;background:#0003;font-size:11px;color:#888}.submenu-hint span{white-space:nowrap}@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:0;width:auto;height:180px;background:#0a0a14f2;border-top:3px solid rgba(255,215,0,.6);display:grid;grid-template-columns:180px 1fr 200px auto;gap:1.5rem;padding:1rem 2rem;color:#fff;font-family:Alagard,Courier New,monospace;box-shadow:0 -8px 32px #000c;opacity:0;transform:translateY(100%);transition:transform .3s ease-out,opacity .3s ease-out;z-index:90;pointer-events:none}.unit-detail-panel-bottom.fade-in{opacity:1;transform:translateY(0);pointer-events:auto}.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:50px 1fr 85px;align-items:center;gap:.75rem}.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}.combat-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:.75rem;padding:.75rem;background:#0000004d;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.combat-stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.combat-stat-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.9}.combat-stat-number{font-size:1.8rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);font-family:Alagard,Courier New,monospace}.battle-status{display:flex;gap:.5rem}.status-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:3px;font-weight:700;letter-spacing:.5px}.status-badge.moved{background:#ff98004d;color:#ffb74d;border:1px solid rgba(255,152,0,.5)}.status-badge.attacked{background:#f443364d;color:#ef5350;border:1px solid rgba(244,67,54,.5)}.combat-info-section{display:flex;flex-direction:column;gap:.5rem;justify-content:center}.combat-stats{display:flex;flex-direction:column;gap:.75rem}.combat-stat{display:flex;flex-direction:column;align-items:center;background:#0000004d;padding:.5rem 1rem;border-radius:4px;border:1px solid rgba(255,215,0,.2)}.combat-label{font-size:.7rem;color:#fff9;text-transform:uppercase;letter-spacing:1px}.combat-value{font-size:1.4rem;font-weight:700;color:gold}.info-hint{display:flex;align-items:center;justify-content:center;padding:0 1rem;font-size:.75rem;color:#fff6}.info-hint kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:.15rem .4rem;margin:0 .3rem;font-family:monospace;color:#ffd700cc}@media (max-width: 1200px){.unit-detail-panel-bottom{grid-template-columns:140px 1fr 150px auto;height:160px}.portrait-image-standalone,.portrait-sprite-fallback{width:100px;height:100px}}.combat-preview-widget{position:absolute;top:100px;right:20px;width:380px;max-height:800px;background:#14141efa;border:2px solid #6b5b3d;border-radius:8px;box-shadow:0 4px 20px #000000b3;z-index:1000;display:flex;flex-direction:column;font-family:Courier New,monospace;overflow:hidden}.combat-preview-header{background:linear-gradient(180deg,#5c4a8a,#4a3a6a);padding:10px 15px;border-bottom:2px solid #3a2a4a;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}.combat-preview-title{color:#fff;font-size:14px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);display:flex;align-items:center;gap:8px}.combat-preview-badge{background:#9b59b6;color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;text-transform:uppercase}.combat-preview-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-preview-close:hover{background:#b71c1c}.combat-preview-content{padding:12px;overflow-y:auto;flex:1}.combat-preview-units{display:flex;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.combat-preview-unit{text-align:center;flex:1}.combat-preview-unit-label{color:#888;font-size:10px;text-transform:uppercase;margin-bottom:2px}.combat-preview-unit-name{color:#fff;font-size:14px;font-weight:700}.combat-preview-unit-level{color:#ffd54f;font-size:11px}.combat-preview-vs{color:#ff5252;font-size:18px;font-weight:700;padding:0 10px;display:flex;align-items:center}.combat-preview-section{margin-bottom:12px;padding:10px;background:#0000004d;border-radius:4px;border-left:3px solid #6b5b3d}.combat-preview-section.hit-chance{border-left-color:#4caf50}.combat-preview-section.damage{border-left-color:#ff5252}.combat-preview-section.crit{border-left-color:#ff9800}.combat-preview-section.status{border-left-color:#9b59b6}.combat-preview-section.counter{border-left-color:#448aff}.combat-preview-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.combat-preview-section-title{color:#fff;font-size:12px;font-weight:700;text-transform:uppercase}.combat-preview-section-value{font-size:16px;font-weight:700}.combat-preview-section-value.good{color:#4caf50}.combat-preview-section-value.warning{color:#ff9800}.combat-preview-section-value.bad{color:#ff5252}.combat-preview-section-value.neutral{color:#fff}.combat-preview-breakdown{font-size:11px;line-height:1.6}.combat-preview-row{display:flex;justify-content:space-between;color:#aaa;padding:1px 0}.combat-preview-row-label{color:#888}.combat-preview-row-value{font-family:Courier New,monospace}.combat-preview-row-value.positive{color:#4caf50}.combat-preview-row-value.negative{color:#ff5252}.combat-preview-row-value.highlight{color:#81d4fa}.combat-preview-row-value.buff{color:#9b59b6}.combat-preview-formula{background:#0000004d;padding:6px 8px;border-radius:4px;margin-top:6px;font-size:10px;color:#81d4fa;font-family:Courier New,monospace;word-break:break-word}.combat-preview-divider{height:1px;background:#ffffff1a;margin:4px 0}.combat-preview-actions{display:flex;gap:10px;padding:12px;background:#0006;border-top:1px solid rgba(255,255,255,.1)}.combat-preview-btn{flex:1;padding:10px 16px;border:none;border-radius:4px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase}.combat-preview-btn.confirm{background:linear-gradient(180deg,#4caf50,#388e3c);color:#fff;border:1px solid #2e7d32}.combat-preview-btn.confirm:hover{background:linear-gradient(180deg,#66bb6a,#43a047);transform:translateY(-1px)}.combat-preview-btn.cancel{background:linear-gradient(180deg,#616161,#424242);color:#fff;border:1px solid #333}.combat-preview-btn.cancel:hover{background:linear-gradient(180deg,#757575,#555);transform:translateY(-1px)}.combat-preview-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#888}.combat-preview-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#9b59b6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}.combat-preview-hint{display:flex;justify-content:center;gap:16px;padding:8px;background:#0000004d;font-size:10px;color:#666}.combat-preview-hint span{display:flex;align-items:center;gap:4px}kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:1px 4px;font-size:10px;font-family:Courier New,monospace}.battle-mode-indicator{position:relative;background:linear-gradient(135deg,#14141ef2,#0a0a14fa);border:1px solid rgba(120,100,80,.6);border-radius:8px;padding:10px 14px;min-width:180px;box-shadow:0 4px 20px #00000080,inset 0 1px #ffffff0d;font-family:alagard,serif}.battle-mode-indicator:before{content:"";position:absolute;top:-1px;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,160,100,.5),transparent)}.mode-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#b4a08cb3;margin-bottom:8px;text-align:center}.mode-display{position:relative;height:36px;background:#0006;border-radius:6px;overflow:hidden;border:1px solid rgba(80,70,60,.4)}.mode-display.rotating{animation:mode-pulse .3s ease-out}@keyframes mode-pulse{0%{transform:scale(1)}50%{transform:scale(1.02);box-shadow:0 0 15px #c8a06466}to{transform:scale(1)}}.mode-track{display:flex;align-items:center;height:100%;position:relative;z-index:2}.mode-option{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:100%;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.mode-option:hover{background:#ffffff0d}.mode-option.active{color:#fff}.mode-option.inactive{color:#968c8299}.mode-key{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#50463c80;border:1px solid rgba(120,100,80,.4);border-radius:3px;font-size:11px;font-family:monospace;transition:all .2s ease}.mode-option.active .mode-key{background:#c8a0644d;border-color:#c8a06499;color:#f0d090;box-shadow:0 0 6px #c8a0644d}.mode-name{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.mode-divider{width:1px;height:20px;background:#50463c66}.mode-selector{position:absolute;top:2px;bottom:2px;width:calc(50% - 4px);background:linear-gradient(135deg,#c8a06440,#a0783c26);border:1px solid rgba(200,160,100,.4);border-radius:4px;transition:left .25s cubic-bezier(.4,0,.2,1);z-index:1;box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff1a}.mode-selector.standard{left:2px}.mode-selector.march{left:calc(50% + 2px);background:linear-gradient(135deg,#64b4c840,#3c8ca026);border-color:#64b4c866}.mode-hint{font-size:9px;color:#968c8299;text-align:center;margin-top:8px;min-height:12px;transition:all .2s ease}.battle-mode-indicator:has(.mode-selector.march){border-color:#64a0b480}.battle-mode-indicator:has(.mode-selector.march):before{background:linear-gradient(90deg,transparent,rgba(100,180,200,.5),transparent)}.march-undo-overlay{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.march-undo-button{pointer-events:auto;background:linear-gradient(135deg,#b43c3ce6,#8c2828f2);border:1px solid rgba(220,100,100,.5);border-radius:6px;padding:8px 16px;color:#fff;font-family:alagard,serif;font-size:12px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff1a}.march-undo-button:hover{background:linear-gradient(135deg,#c85050f2,#a03232f2);transform:translateY(-1px);box-shadow:0 6px 16px #00000080,0 0 12px #dc64644d,inset 0 1px #ffffff26}.march-undo-button:active{transform:translateY(0)}.march-undo-label{font-size:10px;color:#ffdcb4e6;text-shadow:0 1px 2px rgba(0,0,0,.5)}.battle-page{width:1920px;height:1080px;display:flex;flex-direction:column;background:#1a1a2e}.battle-page.loading{justify-content:center;align-items:center}.loading-spinner{font-size:var(--font-2xl);color:#667eea;animation:pulse-text 1.5s infinite}@keyframes pulse-text{0%,to{opacity:.6}50%{opacity:1}}.victory-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;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:var(--space-2xl) clamp(40px,6vmin,80px);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:var(--font-3xl);margin:0 0 var(--space-md) 0;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#fff}.victory-banner p{font-size:var(--font-2xl);margin:0 0 var(--space-xl) 0;color:#fffffff2}.victory-banner .menu-btn{padding:var(--btn-padding-lg);font-size:var(--font-xl);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:none}.battle-header-minimal{position:absolute;top:20px;left:20px;z-index:100;background:#000c;padding:10px 16px;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}.turn-info-row{display:flex;align-items:center;gap:12px;color:#fff;flex-wrap:nowrap}.turn-text{font-size:15px;font-weight:500;white-space:nowrap}.your-turn-badge{background:linear-gradient(135deg,#f39c12,#e74c3c);color:#fff;padding:4px 10px;border-radius:4px;font-weight:700;font-size:13px;animation:pulse-glow 1s infinite;white-space:nowrap}.status-text{font-size:14px;color:#ffffffb3}.header-action-btn{background:#647eea4d;border:1px solid rgba(100,126,234,.4);color:#fff;padding:6px 12px;border-radius:5px;font-size:13px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.header-action-btn:hover{background:#647eea80;border-color:#647eeab3}.header-action-btn.end-turn{background:#2ecc714d;border-color:#2ecc7166}.header-action-btn.end-turn:hover{background:#2ecc7180;border-color:#2ecc71b3}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #f39c1280}50%{box-shadow:0 0 20px #f39c12}}.escape-menu-overlay{position:fixed;top:0;left:0;width:1920px;height:1080px;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.escape-menu{background:linear-gradient(145deg,#1e2030,#151825);border:2px solid rgba(100,120,200,.3);border-radius:16px;padding:30px 40px;min-width:320px;box-shadow:0 20px 60px #00000080}.escape-menu h3{margin:0 0 20px;text-align:center;color:#fff;font-size:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:15px}.escape-menu-content{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.battle-info-section{background:#0000004d;padding:10px 15px;border-radius:8px;margin-bottom:10px}.battle-id-display{font-family:monospace;font-size:12px;color:#fff9}.escape-menu-btn{background:#647eea33;border:1px solid rgba(100,126,234,.3);color:#fff;padding:14px 20px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s ease;text-align:left}.escape-menu-btn:hover{background:#647eea66;border-color:#647eea99;transform:translate(5px)}.escape-menu-btn.leave-btn{background:#e74c3c33;border-color:#e74c3c4d;margin-top:10px}.escape-menu-btn.leave-btn:hover{background:#e74c3c66;border-color:#e74c3c99}.escape-menu-close{width:100%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#ffffffb3;padding:10px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.escape-menu-close:hover{background:#fff3;color:#fff}.game-over{font-size:var(--font-xl);font-weight:700;color:#e74c3c}.leave-btn{padding:var(--btn-padding-sm);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;position:relative}.quick-actions{display:none}.quick-action-btn{padding:var(--btn-padding-sm);border:none;border-radius:6px;font-size:var(--font-sm);font-weight:600;transition:all .3s ease;cursor:pointer;box-shadow:0 4px 15px #0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.quick-action-btn.ready-btn{background:linear-gradient(135deg,#2ecc71e6,#27ae60e6);color:#fff}.quick-action-btn.undo-btn{background:linear-gradient(135deg,#f39c12e6,#e67e22e6);color:#fff}.quick-action-btn.end-turn-btn{background:linear-gradient(135deg,#3498dbe6,#2980b9e6);color:#fff}.quick-action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006}.grid-area{flex:1;position:relative}.message-toast{position:absolute;top:var(--bottom-offset-sm);right:var(--space-xl);background:#2ecc71f2;color:#fff;padding:var(--space-md) var(--space-lg);border-radius:8px;box-shadow:0 4px 20px #0000004d;font-weight:600;z-index:1000;animation:slideIn .3s ease}.error-toast{position:absolute;top:var(--bottom-offset-sm);right:var(--space-xl);background:#e74c3cf2;color:#fff;padding:var(--space-md) var(--space-lg);border-radius:8px;box-shadow:0 4px 20px #0000004d;font-weight:600;z-index:1000;animation:slideIn .3s ease}.autosave-toast{position:absolute;bottom:20px;left:20px;background:#1e1e32e6;color:#fffc;padding:8px 16px;border-radius:6px;font-size:12px;display:flex;align-items:center;gap:8px;z-index:1000;animation:fadeInOut 2s ease;border:1px solid rgba(255,215,0,.3)}.autosave-icon{font-size:14px}@keyframes fadeInOut{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.settings-page{width:1920px;height:1080px;background:linear-gradient(135deg,#1a1a2e,#0f0f1f);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}.settings-container{width:100%;max-width:700px;animation:fadeIn .3s ease-out}.settings-header{display:flex;align-items:center;gap:20px;margin-bottom:40px}.settings-title{font-family:Cinzel,serif;font-size:36px;font-weight:700;color:#d4af37;letter-spacing:4px;margin:0}.settings-content{display:flex;flex-direction:column;gap:30px}.settings-section{background:linear-gradient(145deg,#1e1e32e6,#141423f2);border:1px solid rgba(212,175,55,.2);border-radius:12px;padding:24px;box-shadow:0 8px 32px #0006}.section-title{font-family:Cinzel,serif;font-size:20px;font-weight:600;color:#e8d5a3;letter-spacing:2px;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(212,175,55,.2)}.setting-item{margin-bottom:20px}.setting-item:last-child{margin-bottom:0}.setting-label{display:flex;align-items:center;gap:10px;margin-bottom:12px}.label-icon{font-size:18px}.label-text{font-family:Inter,sans-serif;font-size:15px;font-weight:500;color:#dcdcebe6;flex:1}.label-value{font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:#d4af37;min-width:45px;text-align:right}.coming-soon-tag{font-size:10px;font-weight:600;letter-spacing:.5px;padding:3px 8px;background:#ffc10726;border:1px solid rgba(255,193,7,.3);border-radius:4px;color:#ffc107;text-transform:uppercase}.volume-slider{width:100%;height:8px;border-radius:4px;background:#3c3c50cc;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#d4af37,#b8860b);cursor:pointer;border:2px solid #f4d03f;box-shadow:0 2px 8px #0006;transition:transform .15s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#d4af37,#b8860b);cursor:pointer;border:2px solid #f4d03f;box-shadow:0 2px 8px #0006}.volume-slider.disabled{opacity:.5;cursor:not-allowed}.volume-slider.disabled::-webkit-slider-thumb{background:#646478cc;border-color:#9696aa80;cursor:not-allowed}.profile-info{display:flex;flex-direction:column;gap:16px}.profile-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#28283c80;border-radius:8px;border:1px solid rgba(100,100,130,.2)}.profile-label{font-family:Inter,sans-serif;font-size:14px;font-weight:500;color:#b4b4c8cc}.profile-value{font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:#e6e6f5f2}.profile-placeholder{margin-top:16px;padding:20px;background:#3232464d;border-radius:8px;border:1px dashed rgba(212,175,55,.3)}.placeholder-text{font-family:Inter,sans-serif;font-size:14px;color:#d4af37cc;margin:0 0 12px}.upcoming-features{margin:0;padding-left:20px;list-style-type:disc}.upcoming-features li{font-family:Inter,sans-serif;font-size:13px;color:#b4b4c8b3;margin-bottom:6px}.upcoming-features li:last-child{margin-bottom:0}.profile-not-logged-in{padding:24px;background:#28283c66;border-radius:8px;text-align:center}.not-logged-in-text{font-family:Inter,sans-serif;font-size:14px;color:#b4b4c8b3;margin:0}.about-info{text-align:center;padding:16px}.game-title{font-family:Cinzel,serif;font-size:18px;font-weight:600;color:#d4af37;letter-spacing:2px;margin:0 0 8px}.version-text{font-family:Inter,sans-serif;font-size:13px;color:#b4b4c8b3;margin:0 0 12px}.credits-text{font-family:Inter,sans-serif;font-size:12px;font-style:italic;color:#9696aa99;margin:0}.display-mode-buttons{display:flex;gap:12px;margin-top:12px}.mode-button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#28283c80;border:2px solid rgba(100,100,130,.3);border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:Inter,sans-serif}.mode-button:hover{background:#32324699;border-color:#d4af3766}.mode-button.active{background:#d4af3726;border-color:#d4af37cc;box-shadow:0 0 20px #d4af3733}.mode-icon{font-size:32px}.mode-name{font-size:16px;font-weight:600;color:#e6e6f5f2}.mode-desc{font-size:12px;color:#b4b4c8b3;text-align:center}.zoom-buttons{display:flex;gap:8px;margin-top:12px}.zoom-button{flex:1;padding:12px 16px;background:#28283c80;border:2px solid rgba(100,100,130,.3);border-radius:6px;color:#e6e6f5e6;font-family:Inter,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.zoom-button:hover{background:#32324699;border-color:#d4af3766}.zoom-button.active{background:#d4af3726;border-color:#d4af37cc;color:#d4af37;box-shadow:0 0 15px #d4af3733}.section-desc{font-family:Inter,sans-serif;font-size:13px;color:#b4b4c8b3;margin:-12px 0 16px;font-style:italic}.setting-desc{font-family:Inter,sans-serif;font-size:12px;color:#9696aa99;margin:8px 0 0;padding-left:28px}.toggle-wrapper{display:flex;align-items:center;gap:12px}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#3c3c50cc;transition:.3s;border-radius:26px;border:1px solid rgba(100,100,130,.3)}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#b4b4c8cc;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#9b59b680;border-color:#9b59b6cc}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px);background-color:#9b59b6;box-shadow:0 0 8px #9b59b680}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 4px #9b59b64d}.toggle-status{font-family:Inter,sans-serif;font-size:12px;font-weight:600;color:#b4b4c8cc;min-width:30px}.button-wrapper{display:flex;gap:12px}.export-button{padding:10px 16px;background:linear-gradient(145deg,#9b59b633,#9b59b61a);border:1px solid rgba(155,89,182,.5);border-radius:6px;color:#c8a0dcf2;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.export-button:hover{background:linear-gradient(145deg,#9b59b64d,#9b59b633);border-color:#9b59b6cc;transform:translateY(-1px)}.clear-button{padding:10px 16px;background:#28283c80;border:1px solid rgba(100,100,130,.3);border-radius:6px;color:#b4b4c8cc;font-family:Inter,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.clear-button:hover{background:#d32f2f26;border-color:#d32f2f80;color:#ff7878e6}@media (max-width: 600px){.settings-page{padding:20px 16px}.settings-header{flex-direction:column;align-items:flex-start;gap:16px}.settings-title{font-size:28px}.settings-section{padding:20px 16px}.section-title{font-size:18px}.profile-row{flex-direction:column;align-items:flex-start;gap:4px}.button-wrapper{flex-direction:column}}.campaign-mode-page{width:100%;height:1080px;background:linear-gradient(135deg,#1a1a2e,#0f0f1f);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;position:relative}.campaign-mode-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 30% 20%,rgba(139,69,19,.08) 0%,transparent 40%),radial-gradient(circle at 70% 80%,rgba(42,82,152,.06) 0%,transparent 40%);pointer-events:none}.campaign-container{width:100%;max-width:800px;position:relative;z-index:1;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.campaign-header{display:flex;align-items:center;gap:20px;margin-bottom:30px;flex-wrap:wrap}.back-button{padding:10px 20px;background:transparent;border:2px solid rgba(212,175,55,.4);border-radius:6px;color:#d4af37e6;font-family:Cinzel,serif;font-size:14px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#d4af371a;border-color:#d4af37b3;transform:translate(-3px)}.campaign-title{font-family:Cinzel,serif;font-size:36px;font-weight:700;color:#d4af37;letter-spacing:4px;margin:0;flex:1}.dev-banner{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffc10726;border:1px solid rgba(255,193,7,.4);border-radius:20px}.dev-icon{font-size:16px}.dev-text{font-family:Inter,sans-serif;font-size:12px;font-weight:600;color:#ffc107;text-transform:uppercase;letter-spacing:1px}.campaign-content{display:flex;flex-direction:column;gap:30px}.campaign-description{font-family:Inter,sans-serif;font-size:16px;line-height:1.7;color:#c8c8dcd9;margin:0;padding:20px 24px;background:linear-gradient(145deg,#1e1e32b3,#141423cc);border-radius:12px;border:1px solid rgba(212,175,55,.15)}.campaign-options{display:flex;flex-direction:column;gap:16px}.campaign-option-button{display:flex;align-items:center;gap:20px;padding:24px;background:linear-gradient(145deg,#1e1e32e6,#141423f2);border:2px solid rgba(100,100,130,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;text-align:left}.campaign-option-button:hover{border-color:#d4af3780;background:linear-gradient(145deg,#2a2a41f2,#1c1c2d);transform:translate(8px);box-shadow:0 8px 24px #0006}.campaign-option-button.online:hover{border-color:#2a5298b3}.campaign-option-button.local:hover{border-color:#2ecc7180}.campaign-option-button.practice:hover{border-color:#9b59b680}.option-icon{font-size:40px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#32324680;border-radius:12px;flex-shrink:0}.option-content{flex:1}.option-title{font-family:Cinzel,serif;font-size:20px;font-weight:600;color:#e8d5a3;margin:0 0 8px;letter-spacing:1px}.option-desc{font-family:Inter,sans-serif;font-size:14px;color:#b4b4c8b3;margin:0;line-height:1.5}.coming-soon-badge{display:inline-block;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.5px;padding:4px 10px;background:#ffc10726;border:1px solid rgba(255,193,7,.3);border-radius:4px;color:#ffc107;text-transform:uppercase}.option-arrow{font-size:24px;color:#d4af3780;transition:transform .2s ease,color .2s ease}.campaign-option-button:hover .option-arrow{transform:translate(5px);color:#d4af37e6}.campaign-info{background:linear-gradient(145deg,#1e1e32cc,#141423e6);border:1px solid rgba(212,175,55,.2);border-radius:12px;padding:24px}.info-title{font-family:Cinzel,serif;font-size:18px;font-weight:600;color:#d4af37;margin:0 0 20px;letter-spacing:2px}.features-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.features-list li{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#28283c66;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;color:#c8c8dcd9}.feature-icon{font-size:18px}.coming-soon-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#d4af37,#b8860b);color:#1a1a2e;padding:20px 40px;border-radius:8px;font-family:Cinzel,serif;font-size:20px;font-weight:700;letter-spacing:3px;text-transform:uppercase;box-shadow:0 10px 40px #0009;animation:toastPop .3s ease-out;z-index:1000}@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: 768px){.campaign-mode-page{padding:20px 16px}.campaign-header{flex-direction:column;align-items:flex-start;gap:16px}.campaign-title{font-size:28px}.campaign-option-button{padding:20px;gap:16px}.option-icon{font-size:32px;width:50px;height:50px}.option-title{font-size:18px}.option-arrow{display:none}.features-list{grid-template-columns:1fr}}@media (max-width: 480px){.campaign-title{font-size:24px;letter-spacing:2px}.campaign-option-button{flex-direction:column;text-align:center;gap:12px}.option-icon{margin:0 auto}}.dev-test-page{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);padding:2rem;display:flex;justify-content:center;align-items:flex-start}.dev-test-container{max-width:900px;width:100%;background:#ffffff0d;border-radius:16px;border:1px solid rgba(255,200,50,.3);padding:2rem;box-shadow:0 8px 32px #0006}.dev-test-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.dev-test-title{color:#ffc832;font-size:1.8rem;margin:0;flex:1;text-shadow:0 2px 10px rgba(255,200,50,.3)}.dev-badge{background:linear-gradient(135deg,#ff6b35,#f7c331);color:#1a1a2e;font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:4px;text-transform:uppercase;letter-spacing:1px}.back-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#fff3;border-color:#fff6}.dev-test-description{color:#ffffffb3;margin-bottom:2rem;line-height:1.5}.error-message{background:#e74c3c33;border:1px solid #e74c3c;color:#e74c3c;padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:center}.unit-selection{display:flex;gap:2rem;align-items:stretch;margin-bottom:2rem}.unit-select-panel{flex:1;background:#ffffff08;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.player-panel{border-color:#2ecc714d}.player-panel h2{color:#2ecc71}.enemy-panel{border-color:#e74c3c4d}.enemy-panel h2{color:#e74c3c}.unit-select-panel h2{font-size:1.2rem;margin:0 0 1rem}.unit-select-panel select{width:100%;padding:.8rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font-size:1rem;cursor:pointer}.unit-select-panel select:focus{outline:none;border-color:#ffc832}.unit-select-panel select option{background:#1a1a2e;color:#fff}.unit-select-panel select optgroup{background:#16213e;color:#ffc832;font-style:normal;font-weight:700}.unit-preview{margin-top:1rem;padding:1rem;background:#0003;border-radius:8px}.unit-name{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.5rem}.unit-stats{display:flex;gap:1rem;color:#ffffffb3;font-size:.85rem}.vs-divider{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#ffc832;text-shadow:0 0 20px rgba(255,200,50,.5)}.quick-presets{margin-bottom:2rem}.quick-presets h3{color:#fffc;font-size:1rem;margin:0 0 1rem}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.preset-buttons button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:.85rem}.preset-buttons button:hover:not(:disabled){background:#ffc83233;border-color:#ffc83266;color:#ffc832}.preset-buttons button:disabled{opacity:.5;cursor:not-allowed}.recent-presets{margin-bottom:1.5rem;padding:1rem;background:#6496ff0d;border-radius:12px;border:1px solid rgba(100,150,255,.2)}.recent-presets h3{color:#96c8ffe6;font-size:.95rem;margin:0 0 .75rem}.preset-list{display:flex;flex-wrap:wrap;gap:.5rem}.recent-preset-btn{background:#6496ff26;border:1px solid rgba(100,150,255,.3);color:#fff;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .2s ease;font-size:.85rem}.recent-preset-btn:hover:not(:disabled){background:#6496ff4d;border-color:#6496ff80;transform:translateY(-1px)}.recent-preset-btn:disabled{opacity:.5;cursor:not-allowed}.action-buttons{display:flex;justify-content:center;margin-bottom:2rem}.start-test-btn{background:linear-gradient(135deg,#27ae60,#2ecc71);border:none;color:#fff;padding:1rem 3rem;font-size:1.2rem;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #2ecc714d}.start-test-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2ecc7166}.start-test-btn:disabled{background:linear-gradient(135deg,#555,#666);cursor:not-allowed;transform:none;box-shadow:none}.dev-info{background:#0003;border-radius:8px;padding:1rem;border:1px dashed rgba(255,200,50,.3)}.dev-info h3{color:#ffc832;font-size:.9rem;margin:0 0 .5rem}.dev-info code{display:block;background:#0000004d;padding:.5rem;border-radius:4px;color:#2ecc71;font-size:.85rem;word-break:break-all}.dev-info .hint{color:#ffffff80;font-size:.8rem;margin:.5rem 0 0}@media (max-width: 768px){.dev-test-page{padding:1rem}.unit-selection{flex-direction:column}.vs-divider{padding:.5rem 0;font-size:1.5rem}.dev-test-header{flex-wrap:wrap}.dev-test-title{order:3;flex:100%;margin-top:1rem}}.saved-games-modal-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;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}}.map-options-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}.map-options-overlay .overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6}.map-options-overlay .overlay-content{position:relative;width:700px;height:auto;max-height:900px;background:linear-gradient(180deg,#1a1a2e,#16213e);border:3px solid rgba(76,175,80,.6);border-radius:16px;box-shadow:0 8px 32px #000000e6,0 0 60px #4caf5033;display:flex;flex-direction:column;overflow:hidden;animation:overlaySlideIn .25s ease-out}@keyframes overlaySlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.map-options-overlay .overlay-header{padding:1.5rem 2rem;background:#00000080;border-bottom:2px solid rgba(76,175,80,.4);text-align:center}.map-options-overlay .overlay-header h2{margin:0;font-family:Cinzel,serif;font-size:2rem;font-weight:700;color:#4caf50;letter-spacing:4px;text-shadow:0 2px 8px rgba(76,175,80,.5)}.map-options-overlay .overlay-subtitle{margin:.5rem 0 0;font-family:Retro;font-size:.9rem;color:#ffffffb3;letter-spacing:1px}.options-grid{flex:1;padding:1.5rem 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.option-row{display:flex;align-items:center;padding:1rem 1.25rem;background:#28284666;border:2px solid rgba(100,100,150,.2);border-radius:10px;transition:all .2s ease;position:relative}.option-row.focused{background:#4caf5026;border-color:#4caf50b3;box-shadow:0 0 20px #4caf5033,inset 0 0 30px #4caf500d}.option-row:hover:not(.focused){background:#32325080;border-color:#64649666}.option-label{display:flex;align-items:center;gap:.75rem;min-width:180px;font-family:Retro;font-size:.9rem;font-weight:500;color:#ffffffe6}.option-icon{font-size:1.3rem}.option-hint{font-size:.7rem;color:#ffffff80;font-style:italic;margin-left:.25rem}.option-value{flex:1;display:flex;align-items:center;gap:.75rem}.focus-indicator{position:absolute;right:1rem;font-size:.9rem;color:#4caf50;letter-spacing:4px;animation:pulseArrows 1s ease-in-out infinite}@keyframes pulseArrows{0%,to{opacity:.6}50%{opacity:1}}.preset-selector{display:flex;flex-wrap:wrap;gap:.5rem}.preset-btn{padding:.5rem 1rem;background:#ffffff14;border:2px solid rgba(255,255,255,.2);border-radius:20px;color:#ccc;font-family:Retro;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#4caf5033;border-color:#4caf5080;color:#fff}.preset-btn.active{background:#4caf504d;border-color:#4caf50cc;color:#4caf50;font-weight:600;box-shadow:0 0 12px #4caf504d}.number-display{gap:1rem}.value-display{font-family:Cinzel,serif;font-size:1.5rem;font-weight:700;color:gold;min-width:80px;text-align:center;text-shadow:0 2px 8px rgba(255,215,0,.3)}.value-range{font-family:Retro;font-size:.75rem;color:#fff6}.terrain-divider{display:flex;align-items:center;margin:.5rem 0;gap:1rem}.terrain-divider:before,.terrain-divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(76,175,80,.4),transparent)}.terrain-divider span{font-family:Cinzel,serif;font-size:.9rem;font-weight:600;color:#4caf50cc;letter-spacing:2px;text-transform:uppercase}.terrain-row{padding:.75rem 1.25rem}.slider-container{display:flex;align-items:center;gap:1rem;flex:1}.slider-track{flex:1;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;position:relative}.slider-fill{height:100%;border-radius:6px;transition:width .15s ease}.plains-fill{background:linear-gradient(90deg,#c9a66b,#dfc087)}.forest-fill{background:linear-gradient(90deg,#2e7d32,#4caf50)}.mountains-fill{background:linear-gradient(90deg,#5d4037,#795548)}.water-fill{background:linear-gradient(90deg,#1565c0,#42a5f5)}.slider-value{font-family:Retro;font-size:.9rem;font-weight:600;color:#ffffffe6;min-width:50px;text-align:right}.terrain-total{display:flex;justify-content:center;align-items:center;gap:.75rem;padding:.75rem;margin-top:.5rem;background:#0000004d;border-radius:8px}.terrain-total span{font-family:Retro;font-size:.85rem;color:#ffffffb3}.normalize-hint{font-size:.85rem!important;color:#ffc107cc!important;font-style:italic}.map-options-overlay .overlay-controls{display:flex;justify-content:center;gap:2.5rem;padding:1rem 2rem;background:#00000080;border-top:2px solid rgba(76,175,80,.4)}.map-options-overlay .control-hint{display:flex;align-items:center;gap:.4rem;color:#ffffffb3;font-family:Retro;font-size:.8rem}.map-options-overlay .control-hint kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.2rem .5rem;font-family:Retro;font-size:.7rem;color:#4caf50;margin-right:.2rem}.battle-page{width:1920px;height:1080px;background:#000;position:relative;overflow:hidden}.battle-bg{display:none}.battle-layout{width:100%;height:100%;background:#000;display:flex;gap:60px;padding:60px 80px;box-sizing:border-box}.left-panel{flex:1;display:flex;flex-direction:column;gap:0}.mode-tabs{display:flex;gap:0;flex-shrink:0}.mode-tabs .tab{flex:1;padding:20px 32px;background:#141414e6;border:2px solid rgba(212,175,55,.3);border-bottom:none;color:#b4b4c8b3;font-family:Retro;font-size:18px;cursor:pointer;transition:all .2s ease}.mode-tabs .tab:first-child{border-radius:8px 0 0}.mode-tabs .tab:last-child{border-radius:0 8px 0 0}.mode-tabs .tab:hover{background:#282828e6;color:#dcdcf0e6}.mode-tabs .tab.active{background:#d4af3726;border-color:#d4af37cc;color:#d4af37}.error-banner{background:#e74c3c33;border:2px solid rgba(231,76,60,.5);border-top:none;color:#ff6b6b;padding:16px 24px;font-family:Retro;font-size:16px;text-align:center}.tab-content{flex:1;background:#0f0f0ff2;border:2px solid rgba(212,175,55,.3);border-top:none;border-radius:0 0 8px 8px;overflow:hidden}.hotseat-layout{display:flex;flex-direction:column;height:100%}.players-section{flex:1;padding:30px;border-bottom:2px solid rgba(212,175,55,.2);display:flex;flex-direction:column}.section-title{font-family:Retro;font-size:20px;color:#d4af37;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(212,175,55,.3)}.player-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;flex:1}.player-slot{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#1e1e1ecc;border:2px solid rgba(100,100,130,.3);border-radius:8px;cursor:pointer;transition:all .2s ease}.player-slot:hover{border-color:#d4af3766}.player-slot.active{background:#282832cc;border-color:#667eea80}.player-slot.inactive{background:#0f0f0f99;border-style:dashed;opacity:.6}.player-slot.inactive:hover{opacity:.9;border-color:#4caf5080}.player-slot.is-ai{background:#ef444426;border-color:#ef444466}.slot-num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#d4af3740;border-radius:50%;font-family:Retro;font-size:16px;font-weight:700;color:#d4af37;flex-shrink:0}.slot-input{flex:1;padding:12px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;font-family:Retro;font-size:16px;min-width:0}.slot-input:focus{outline:none;border-color:#d4af37}.slot-empty{flex:1;font-family:Retro;font-size:16px;color:#9696aa80}.ai-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#64646433;border:1px solid rgba(150,150,150,.3);border-radius:6px;font-size:22px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.ai-btn:hover{background:#9696964d}.ai-btn.active{background:#ef444440;border-color:#ef444499}.map-options-section{padding:24px 30px;border-bottom:2px solid rgba(212,175,55,.2);display:flex;align-items:center;gap:24px}.map-options-preview{display:flex;gap:20px;font-family:Retro;font-size:16px}.map-options-preview .preview-item{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#1e1e1e99;border-radius:6px;border:1px solid rgba(100,100,130,.3)}.map-options-preview .preview-label{color:#b4b4c8b3}.map-options-preview .preview-value{color:gold;font-weight:700}.start-section{padding:24px 30px;display:flex;gap:20px}.big-btn{flex:1;padding:22px 32px;border:2px solid;border-radius:8px;font-family:Retro;font-size:20px;cursor:pointer;transition:all .2s ease}.big-btn:disabled{opacity:.5;cursor:not-allowed}.map-options-btn{flex:0 0 auto;background:linear-gradient(135deg,#4caf5033,#2e7d324d);border-color:#4caf5099;color:#4caf50}.map-options-btn:hover:not(:disabled){background:linear-gradient(135deg,#4caf504d,#2e7d3266);border-color:#4caf50e6}.start-btn{background:linear-gradient(135deg,#d4af37,#b8860b);border-color:#d4af37;color:#1a1a2e;font-weight:700;box-shadow:0 4px 20px #d4af374d}.start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px #d4af3780}.load-btn{background:#ffffff0d;border-color:#d4af3780;border-style:dashed;color:#d4af37}.load-btn:hover:not(:disabled){background:#d4af371a;border-color:#d4af37cc}.host-layout{padding:36px;display:flex;flex-direction:column;gap:28px;height:100%}.panel-description{padding:20px 24px;background:#2a529826;border-radius:10px;border:1px solid rgba(42,82,152,.3)}.panel-description p{margin:0;color:#c8c8dcd9;font-family:Retro;font-size:16px;line-height:1.6}.host-info{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#d4af371a;border-radius:8px;border:1px solid rgba(212,175,55,.3)}.host-info .label{color:#aaa;font-family:Retro;font-size:14px;text-transform:uppercase}.host-info .value{color:#d4af37;font-family:Retro;font-size:20px;font-weight:700}.settings-form{display:flex;flex-direction:column;gap:20px;flex:1}.form-group{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:#1e1e1e99;border-radius:10px}.form-group label{font-family:Retro;font-size:18px;color:#c8c8dce6}.number-input{display:flex;align-items:center;gap:20px}.number-input button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#d4af3733;border:1px solid rgba(212,175,55,.4);border-radius:6px;color:#d4af37;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s ease}.number-input button:hover:not(:disabled){background:#d4af374d}.number-input button:disabled{opacity:.4;cursor:not-allowed}.number-input span{font-family:Retro;font-size:24px;font-weight:700;color:#fff;min-width:50px;text-align:center}.btn-map-options{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:linear-gradient(135deg,#4caf5026,#2e7d3233);border:2px solid rgba(76,175,80,.4);border-radius:10px;color:#4caf50;font-family:Retro;font-size:18px;cursor:pointer;transition:all .2s ease}.btn-map-options:hover:not(:disabled){background:linear-gradient(135deg,#4caf5040,#2e7d324d);border-color:#4caf50b3}.btn-map-options .preview{font-size:14px;color:#c8c8dcb3;background:#0000004d;padding:8px 14px;border-radius:6px}.button-group{margin-top:auto}.btn-primary{width:100%;padding:22px 40px;background:linear-gradient(135deg,#d4af37,#b8860b);border:none;border-radius:8px;color:#1a1a2e;font-family:Retro;font-size:20px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #d4af374d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px #d4af3780}.join-layout{padding:36px;display:flex;flex-direction:column;gap:28px;height:100%}.manual-join-section h3{font-family:Retro;font-size:18px;color:#e8d5a3;margin:0 0 16px}.manual-join-input{display:flex;gap:16px}.manual-join-input input{flex:1;padding:18px 22px;background:#ffffff14;border:2px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;font-family:Retro;font-size:16px}.manual-join-input input:focus{outline:none;border-color:#d4af37}.manual-join-input button{padding:18px 36px;background:linear-gradient(135deg,#2a5298,#1e3a5f);border:none;border-radius:8px;color:#e8d5a3;font-family:Retro;font-size:16px;cursor:pointer;transition:all .2s ease}.manual-join-input button:hover:not(:disabled){background:linear-gradient(135deg,#3a6bc5,#2a5298)}.manual-join-input button:disabled{opacity:.5;cursor:not-allowed}.lobby-browser{flex:1;background:#0f0f0fb3;border-radius:12px;padding:24px;border:1px solid rgba(100,100,130,.2);display:flex;flex-direction:column}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.lobby-header h3{font-family:Retro;font-size:18px;color:#e8d5a3;margin:0}.refresh-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:20px;cursor:pointer;transition:all .2s ease}.refresh-btn:hover:not(:disabled){background:#ffffff26}.lobby-list{flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}.lobby-status{text-align:center;padding:50px 24px;font-family:Retro;font-size:16px;color:#b4b4c899}.lobby-item{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#1e1e1eb3;border-radius:10px;border:1px solid rgba(100,100,130,.2);transition:all .2s ease}.lobby-item:hover{border-color:#d4af374d}.lobby-info{display:flex;gap:24px}.lobby-host{font-family:Retro;font-size:16px;color:#e8d5a3}.lobby-players{font-family:Retro;font-size:14px;color:#b4b4c8b3}.join-lobby-btn{padding:12px 28px;background:linear-gradient(135deg,#2a5298,#1e3a5f);border:none;border-radius:6px;color:#e8d5a3;font-family:Retro;font-size:14px;cursor:pointer;transition:all .2s ease}.join-lobby-btn:hover:not(:disabled){background:linear-gradient(135deg,#3a6bc5,#2a5298)}.join-lobby-btn:disabled{opacity:.5;cursor:not-allowed}.right-panel{width:700px;display:flex;flex-direction:column;gap:30px;flex-shrink:0}.preview-frame{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(212,175,55,.1) 0%,transparent 70%);border-radius:50%}.preview-image{width:90%;height:700px;object-fit:cover;border-radius:50%;border:4px solid rgba(212,175,55,.6);box-shadow:0 0 50px #d4af374d,inset 0 0 50px #00000080}.description-panel{position:relative;flex:1;min-height:180px}.desc-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.desc-content{position:relative;z-index:1;padding:32px 40px;height:100%;display:flex;flex-direction:column}.desc-content h3{font-family:Cinzel Decorative,Cinzel,serif;font-size:24px;font-weight:700;color:#000;margin:0 0 16px;text-shadow:none}.desc-content p{font-family:Retro;font-size:16px;line-height:1.6;color:#1a1a1a;margin:0}.mode-tabs .tab.keyboard-focus{box-shadow:0 0 15px #f4d03f99,inset 0 0 10px #f4d03f33;border-color:#f4d03f!important;color:#f4d03f!important;animation:tabPulse 1s infinite}.big-btn.keyboard-focus,.btn-primary.keyboard-focus,.btn-map-options.keyboard-focus,button.keyboard-focus{box-shadow:0 0 20px #f4d03f99,0 0 40px #f4d03f4d!important;border:2px solid #f4d03f!important;animation:buttonPulse 1s infinite}.player-slot.keyboard-focus{box-shadow:0 0 15px #f4d03f99,inset 0 0 10px #f4d03f26;border-color:#f4d03f!important}.lobby-item.keyboard-focus{background:#f4d03f26!important;border-color:#f4d03f!important;box-shadow:0 0 15px #f4d03f66}.manual-join-input.keyboard-focus{box-shadow:0 0 15px #f4d03f80}.manual-join-input.keyboard-focus input{border-color:#f4d03f!important;box-shadow:inset 0 0 10px #f4d03f33}.number-input button.keyboard-focus{background:#f4d03f4d!important;border-color:#f4d03f!important}.refresh-btn.keyboard-focus{background:#f4d03f4d!important;border-color:#f4d03f!important;box-shadow:0 0 15px #f4d03f80}@keyframes tabPulse{0%,to{box-shadow:0 0 15px #f4d03f99,inset 0 0 10px #f4d03f33}50%{box-shadow:0 0 25px #f4d03fcc,inset 0 0 15px #f4d03f4d}}@keyframes buttonPulse{0%,to{transform:scale(1);box-shadow:0 0 20px #f4d03f99,0 0 40px #f4d03f4d}50%{transform:scale(1.02);box-shadow:0 0 25px #f4d03fcc,0 0 50px #f4d03f66}}.keyboard-hint-top{font-family:Retro;font-size:14px;color:#b4b4c899;text-align:center;padding:12px 20px;background:#000000b3;border:1px solid rgba(212,175,55,.3);border-bottom:none;border-radius:8px 8px 0 0;margin-bottom:-2px}.open-lobbies-page{width:100%;min-height:100vh;display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e)}.open-lobbies-content-wrapper{flex:1;margin-left:0;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:0;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;top:0;left:0;width:1920px;height:1080px;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:absolute;top:0;left:0;width:1920px;height:1080px;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:absolute;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:absolute;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:absolute;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:absolute;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;height:1080px;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%;height:1080px;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%;height:1080px;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)}}.transition-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:9999;opacity:0;transition:opacity .4s ease-in-out;pointer-events:none}.transition-overlay.visible{opacity:1;pointer-events:all}.transition-loading-text{position:absolute;bottom:40px;right:40px;font-family:Retro,sans-serif;font-size:14px;color:#fff9;letter-spacing:2px;text-transform:uppercase}.app{width:1920px;height:1080px;position:relative;display:flex;flex-direction:column;overflow:hidden}.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:translateZ(0) translate(0)}5%{transform:translateZ(0) translate(-4px,-3px)}10%{transform:translateZ(0) translate(4px,2px)}15%{transform:translateZ(0) translate(-3px,4px)}20%{transform:translateZ(0) translate(3px,-4px)}25%{transform:translateZ(0) translate(-4px,2px)}30%{transform:translateZ(0) translate(4px,-2px)}35%{transform:translateZ(0) translate(-2px,3px)}40%{transform:translateZ(0) translate(2px,-3px)}45%{transform:translateZ(0) translate(-3px,1px)}50%{transform:translateZ(0) translate(3px,-1px)}55%{transform:translateZ(0) translate(-2px,2px)}60%{transform:translateZ(0) translate(2px,-2px)}65%{transform:translateZ(0) translate(-1px,1px)}70%{transform:translateZ(0) translate(1px,-1px)}75%{transform:translateZ(0) translate(-1px)}80%{transform:translateZ(0) translate(1px)}85%{transform:translateZ(0) translateY(-1px)}90%{transform:translateZ(0) translateY(1px)}95%{transform:translateZ(0) translate(0)}to{transform:translateZ(0) 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-effect-red-dragon{animation:red-dragon-pulse 2s ease-in-out infinite}@keyframes red-dragon-pulse{0%,to{filter:sepia(.4) saturate(2.5) hue-rotate(-10deg) brightness(.9)}50%{filter:sepia(.5) saturate(3) hue-rotate(-5deg) brightness(.95)}}.sprite-effect-white-dragon{animation:white-dragon-glow 3s ease-in-out infinite}@keyframes white-dragon-glow{0%,to{filter:brightness(1.25) saturate(.6) contrast(1.1) drop-shadow(0 0 4px rgba(200,220,255,.4))}50%{filter:brightness(1.35) saturate(.5) contrast(1.15) drop-shadow(0 0 10px rgba(200,220,255,.7))}}.sprite-effect-salamander{animation:salamander-flame 1.5s ease-in-out infinite}@keyframes salamander-flame{0%,to{filter:sepia(.6) saturate(3) hue-rotate(-15deg) brightness(.85) contrast(1.2) drop-shadow(0 0 6px rgba(255,100,0,.5))}25%{filter:sepia(.7) saturate(3.5) hue-rotate(-20deg) brightness(.9) contrast(1.25) drop-shadow(0 0 12px rgba(255,150,0,.7))}50%{filter:sepia(.6) saturate(3.2) hue-rotate(-10deg) brightness(.88) contrast(1.2) drop-shadow(0 0 8px rgba(255,80,0,.6))}75%{filter:sepia(.65) saturate(3.3) hue-rotate(-18deg) brightness(.92) contrast(1.22) drop-shadow(0 0 10px rgba(255,120,0,.65))}}.sprite-effect-fafnir{animation:fafnir-radiance 2.5s ease-in-out infinite}@keyframes fafnir-radiance{0%,to{filter:brightness(1.4) saturate(.3) contrast(1.15) drop-shadow(0 0 8px rgba(255,255,200,.6))}33%{filter:brightness(1.5) saturate(.25) contrast(1.2) drop-shadow(0 0 14px rgba(255,255,220,.8))}66%{filter:brightness(1.45) saturate(.35) contrast(1.18) drop-shadow(0 0 10px rgba(255,255,180,.7))}}.sprite-optimized{backface-visibility:hidden;perspective:1000px;-webkit-font-smoothing:subpixel-antialiased;will-change:background-position,background-image,transform;contain:layout style}@media (prefers-reduced-motion: reduce){.sprite{animation:none!important}}:root{--space-xs: 6px;--space-sm: 10px;--space-md: 16px;--space-lg: 22px;--space-xl: 32px;--space-2xl: 44px;--font-xs: 12px;--font-sm: 14px;--font-md: 16px;--font-lg: 20px;--font-xl: 26px;--font-2xl: 32px;--font-3xl: 44px;--btn-padding-sm: 8px 16px;--btn-padding-md: 13px 26px;--btn-padding-lg: 19px 38px;--panel-sm: 230px;--panel-md: 300px;--panel-lg: 350px;--icon-sm: 32px;--icon-md: 46px;--icon-lg: 64px;--bottom-offset-sm: 80px;--bottom-offset-md: 130px;--bottom-offset-lg: 170px}@font-face{font-family:Retro;src:url(/fonts/retro.ttf) format("truetype");font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Retro;-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:Retro}input,select,textarea{font-family:Retro}body.cursor-mouse{cursor:url(/cursors/shiny-mouse.png) 0 0,crosshair}body.cursor-mouse button,body.cursor-mouse a,body.cursor-mouse [role=button],body.cursor-mouse .clickable,body.cursor-mouse .menu-item{cursor:url(/cursors/shiny-mouse.png) 0 0,pointer}body.cursor-keyboard,body.cursor-keyboard button,body.cursor-keyboard a,body.cursor-keyboard [role=button],body.cursor-keyboard .clickable,body.cursor-keyboard .menu-item{cursor:none}