body,html{margin:0;padding:0;background-color:#1f2937;color:#fff;font-family:sans-serif;height:100vh;width:100vw;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative}.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:#111827;border-bottom:1px solid #374151;gap:1rem;z-index:1002}.header-left{display:flex;align-items:center;gap:1rem}.header-icon{width:24px;height:24px;flex-shrink:0}.resource-tickers{display:flex;gap:.5rem;flex-wrap:wrap}.resource-ticker{display:flex;align-items:center;padding-left:.2rem;padding-right:.2rem;border-radius:4px}.resource-icon{font-size:1rem}.resource-value{font-size:.85rem;font-weight:500;color:#e5e7eb}.session-icons{display:flex;align-items:center;gap:1rem}.profile-icon{fill:#166534;stroke:#166534;cursor:pointer}.logout-button{background-color:#111827;padding:0;cursor:pointer}.icon{color:#fff;cursor:pointer}.login-form{display:flex;align-items:center;gap:.5rem;flex-grow:1;justify-content:flex-end}.input{background-color:#1f2937;border:1px solid #374151;border-radius:4px;color:#fff;padding:6px 10px;font-size:.9rem;outline-offset:2px;transition:border-color .2s ease}.input:focus{border-color:#2563eb}.button{background-color:#2563eb;border:none;border-radius:4px;padding:6px 12px;color:#fff;font-weight:700;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.button:hover{background-color:#1d4ed8}.error-box{color:#f87171;background-color:#4b0000;padding:1rem;border-radius:.75rem;border:1px solid #dc2626;max-width:32rem;font-size:1.125rem;margin:1rem auto;text-align:center;z-index:1004;position:fixed;top:90px}.loading-message{padding:1rem;font-size:1rem;color:#facc15;text-align:center}.map-scroll-container{flex:1;overflow:auto;width:100%;height:calc(100vh - 60px);padding:8px;box-sizing:border-box;position:relative;cursor:grab;z-index:1000}.map-scroll-container:active{cursor:grabbing}.map-grid{display:grid;grid-template-columns:repeat(100,32px);grid-template-rows:repeat(100,32px);gap:2px;width:3398px;height:3398px;margin:auto;box-sizing:content-content}.tile{width:32px;height:32px;border-radius:4px;box-sizing:border-box;position:relative;transition:filter .2s ease,box-shadow .2s ease,transform .2s ease;margin:-1px}.tile:hover{filter:brightness(80%)}.tile-clicked{filter:brightness(60%)}.tile.grass{background-color:#22c55e}.tile.forest{background-color:#166534}.tile.mountain{background-color:#6b7280}.tile.border-top{border-top:2px solid var(--nation-color, #808080)}.tile.border-right{border-right:2px solid var(--nation-color, #808080)}.tile.border-bottom{border-bottom:2px solid var(--nation-color, #808080)}.tile.border-left{border-left:2px solid var(--nation-color, #808080)}.tile.capital-highlight{box-shadow:0 0 8px 3px gold;animation:glow 1.5s ease-in-out infinite}.tile.selected-tile{box-shadow:0 0 8px 3px #2563eb,inset 0 0 8px 3px #2563eb;animation:selected-glow 1.5s ease-in-out infinite}.capital-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px}@keyframes glow{0%,to{box-shadow:0 0 8px 3px gold;transform:scale(1)}50%{box-shadow:0 0 15px 6px gold;transform:scale(1.1)}}@keyframes selected-glow{0%,to{box-shadow:0 0 8px 3px #2563eb,inset 0 0 8px 3px #2563eb;transform:scale(1)}50%{box-shadow:0 0 15px 6px #2563eb,inset 0 0 15px 6px #2563eb;transform:scale(1.1)}}.tooltip{position:absolute;background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;z-index:1000;pointer-events:none}.modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1004}.modal-content{background:#111827;padding:1.5rem;border-radius:8px;width:300px;display:flex;flex-direction:column;gap:1rem}.left-menu{position:absolute;left:0;top:50px;width:90px;background:#111827b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#c2ac4b;font-size:.85rem;font-weight:500;margin:10px;padding:10px;z-index:1002;border-radius:4px}.main-menu{position:absolute;left:118px;top:50px;right:0;background:#111827b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#e5e7eb;font-size:.85rem;font-weight:500;line-height:1.8em;margin:10px;padding:10px;z-index:1001;border-radius:4px;min-height:100px}.bottom-menu{position:fixed;bottom:0;left:0;right:0;height:60px;margin:0;z-index:1005;background:#111827b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:10px;color:#e5e7eb;font-size:.85rem;border-radius:4px 4px 0 0}.close-menu{position:absolute;top:5px;right:5px;width:20px;height:20px;background:#8b0000cc;color:#fff;text-align:center;line-height:20px;border-radius:4px;cursor:pointer;transition:background-color .2s ease;z-index:1002}.close-menu:hover{background-color:#8b0000}table{border-collapse:collapse;min-width:20%;max-width:600px;margin:0}th,td{text-align:left;color:#e5e7eb}.tile-info-container{display:flex;height:60px;align-items:center;padding:0 5px}.tile-info-table{max-height:60px;overflow:hidden}.tile-info-table table{border-collapse:collapse;color:#e5e7eb;font-size:.65rem}.tile-info-table td{padding:1px 4px;border:none}.tile-info-label{font-weight:700;width:60px}.building-options{display:flex;width:100%;justify-content:space-evenly;gap:10px;align-items:center}.building-option{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.building-option:hover{background:#374151}.building-option svg{width:24px;height:24px;color:#c2ac4b;stroke:#c2ac4b}.building-option span{font-size:.65rem;color:#c2ac4b}.delete-building-option{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.delete-building-option:hover{background:#4b0000}.delete-building-option svg{width:24px;height:24px;color:#f87171;stroke:#f87171}.delete-building-option span{font-size:.65rem;color:#f87171}.tile.border-top{border-top:2px solid var(--nation-color, #808080);box-shadow:0 -1px 6px 1px var(--nation-color, #808080)}.tile.border-right{border-right:2px solid var(--nation-color, #808080);box-shadow:1px 0 6px 1px var(--nation-color, #808080)}.tile.border-bottom{border-bottom:2px solid var(--nation-color, #808080);box-shadow:0 1px 6px 1px var(--nation-color, #808080)}.tile.border-left{border-left:2px solid var(--nation-color, #808080);box-shadow:-1px 0 6px 1px var(--nation-color, #808080)}@keyframes border-glow{0%,to{box-shadow:0 0 6px 1px var(--nation-color, #808080)}50%{box-shadow:0 0 12px 2px var(--nation-color, #808080)}}.tile.border-top,.tile.border-right,.tile.border-bottom,.tile.border-left{animation:border-glow 2s ease-in-out infinite}