:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0b0b0f; color: #e8e8ee; }
#map { position: absolute; inset: 0 22rem 0 0; background: #12121a; }
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: 22rem; overflow-y: auto; padding: 1rem; background: #14141c; border-left: 1px solid #262636; }
#panel h1 { font-size: 1.2rem; }
#painted { font-weight: 700; color: #7fb0ff; margin: .6rem 0; }
#updated { font-size: .8rem; opacity: .6; }
.war-day h4 { margin: .8rem 0 .2rem; font-size: .85rem; opacity: .7; }
.war-day ul { margin: 0; padding-left: 1.1rem; }
.war-day li { margin: .15rem 0; font-size: .9rem; }
.zone-popup h3 { margin: 0 0 .3rem; } .zone-popup .credit { font-size: .8rem; opacity: .7; margin-top: .3rem; }
footer { font-size: .7rem; opacity: .55; margin-top: 1.5rem; }
.tiles-down .leaflet-tile-pane { display: none; }
@media (max-width: 640px) { #map { inset: 0 0 45vh 0; } #panel { top: 55vh; width: 100%; border-left: 0; border-top: 1px solid #262636; } }