*{box-sizing:border-box}
html, body { height: 100%; }
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b0d12;color:#eef1f6}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #1e2330}
h1{margin:0;font-size:18px}
.user{font-size:12px;margin-right:8px}
.hidden{display:none}
main{position:relative;height:calc(100vh - 54px)}
#map{position:absolute;inset:0; width:100%; height:100%; display:block;}
#ui{position:absolute;left:12px;top:12px;display:flex;gap:12px;align-items:center;background:rgba(11,13,18,.6);padding:8px 10px;border:1px solid #2a3142;border-radius:8px}
#palette{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.swatch{width:22px;height:22px;border:1px solid #2a3142;cursor:pointer}
.swatch.active{outline:2px solid #fff}
#cooldown{font-size:12px;opacity:.85}
#progression{font-size:12px;opacity:.9}