*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background-color:#2a2a2a;color:#f0f0f0;overflow:hidden}#game-container{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%;cursor:grab}#game-canvas:active{cursor:grabbing}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-overlay>*{pointer-events:auto}#top-bar{position:absolute;top:0;left:0;right:0;background:linear-gradient(to bottom,#3a3a3a,#2d2d2d);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #5a5a5a;box-shadow:0 2px 5px #0000004d;min-height:60px;z-index:100}#faction-info{display:flex;align-items:center;gap:30px;font-size:16px;font-weight:700}#current-faction{color:#f0f0f0;padding:8px 20px;background:#4a4a4a;border:2px solid #6a6a6a;border-radius:3px;text-transform:uppercase;letter-spacing:1px;box-shadow:inset 0 1px 3px #0000004d;display:flex;align-items:center;gap:10px}#faction-flag{width:48px;height:32px;object-fit:cover;border:1px solid #6a6a6a;box-shadow:0 1px 3px #00000080}#turn-counter{color:#d4af37;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,.5);padding:8px 16px;background:#d4af371a;border:1px solid rgba(212,175,55,.3);border-radius:3px}#date-display{color:#b0b0b0;font-size:14px;padding:8px 12px;border-left:2px solid #5a5a5a;text-transform:uppercase;letter-spacing:.5px}#game-status{display:flex;align-items:center;gap:20px;font-size:14px;color:#e0e0e0}#game-status>span{padding:6px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:3px}#cities-controlled{border-left:3px solid #4169E1}#units-count{border-left:3px solid #7FBF7F}#resources{display:flex;align-items:center;gap:25px}.resource{display:flex;align-items:center;gap:10px;padding:8px 20px;background:#4a4a4a;border:2px solid #6a6a6a;border-radius:3px;font-weight:700;font-size:16px;box-shadow:inset 0 1px 3px #0000004d;text-transform:uppercase;letter-spacing:.5px}#resources-value{color:#d4af37;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,.5)}#bottom-panel{display:none}#bottom-bar{position:absolute;bottom:20px;right:20px;display:flex;gap:15px;z-index:100}#bottom-bar-left{position:absolute;bottom:20px;left:20px;display:flex;gap:15px;z-index:100}#end-turn-btn,#resign-btn{background:#8b4513;color:#f0f0f0;border:3px solid #654321;padding:12px 30px;font-size:16px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;box-shadow:0 3px 5px #0000004d;position:relative}#resign-btn{background:#8b2222;border:3px solid #5c1515}#end-turn-btn:hover{background:sienna;box-shadow:0 4px 8px #0006}#resign-btn:hover{background:brown;box-shadow:0 4px 8px #0006}#end-turn-btn:active,#resign-btn:active{transform:translateY(1px);box-shadow:0 2px 3px #0000004d}#left-panel{position:absolute;left:0;top:0;width:280px;background:#3a3a3a;border-right:2px solid #5a5a5a;height:100%;padding:80px 20px 100px;overflow-y:auto;z-index:99;box-shadow:3px 0 10px #00000080}#side-panel{position:absolute;right:0;top:0;width:280px;background:#3a3a3a;border-left:2px solid #5a5a5a;height:100%;padding:80px 20px 100px;overflow-y:auto;z-index:99;box-shadow:-3px 0 10px #00000080}.panel{margin-bottom:20px;padding:12px;background:#4a4a4a;border:2px solid #6a6a6a;position:relative}.panel h3{margin-bottom:10px;color:#d4af37;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.hidden{display:none}#unit-details,#tile-details{font-size:13px;line-height:1.6;color:#e0e0e0}.stat-line{display:flex;justify-content:space-between;margin-bottom:5px;padding:3px 8px;background:#525252;border-left:3px solid #d4af37}.stat-value{font-weight:700;color:#f0f0f0}#side-panel::-webkit-scrollbar{width:8px}#side-panel::-webkit-scrollbar-track{background:#2a2a2a}#side-panel::-webkit-scrollbar-thumb{background:#5a5a5a}#side-panel::-webkit-scrollbar-thumb:hover{background:#6a6a6a}