html, body { height:100%; margin:0; background:#0b0f14; color:#e8f0ff; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#topbar { position:fixed; left:0; right:0; top:0; height:48px; display:flex; align-items:center; gap:8px; padding:0 10px; background:#11161f; border-bottom:1px solid #1c2433; z-index:10; }
#auth input { background:#0d1320; border:1px solid #1e2a3f; color:#cfe3ff; padding:6px 8px; border-radius:6px; }
#auth button, #btnTrain { background:#1e90ff; border:none; color:white; padding:7px 10px; border-radius:6px; cursor:pointer; }
.hidden { display:none; }


#map { position:fixed; inset:48px 0 0 0; background:#0b0f14; }
#map.grid { position:absolute; left:50%; top:50%; width:512px; height:512px; transform:translate(-50%, -50%); background:#0c1119; box-shadow:0 0 30px rgba(0,0,0,0.5) inset; border:1px solid #182132; }
.tile { position:absolute; width:16px; height:16px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.03); }
.t-grass { background:#0f1a26; }
.t-forest { background:#14301d; }
.t-hill { background:#2b2620; }
.t-water { background:#112236; }
.t-road { background:#2a2a2a; }
.t-node { outline:1px solid #ffd54a; }