*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial}
body{background:radial-gradient(1200px 600px at 50% -10%, #17243f 0%, #0b1220 60%, #08101e 100%);color:#e9edf7}
.screen{display:none;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;padding:24px}
.screen.active{display:flex}
.hero{text-align:center;margin-bottom:18px}
h1{font-size:40px;margin:0 0 8px 0}
.subtitle{opacity:.8;margin:0 0 16px 0}
.menu-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
button{background:#0f1830;border:1px solid #1f2a44;color:#e9edf7;padding:10px 16px;border-radius:12px;cursor:pointer;transition:transform .05s ease, background .2s}
button:hover{background:#132040}button:active{transform:scale(.98)}
footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;opacity:.6;font-size:12px}
.hud{display:flex;gap:16px;align-items:center;justify-content:center;background:#0f1830;border:1px solid #1f2a44;border-radius:14px;padding:8px 12px;margin-bottom:8px;box-shadow:inset 0 0 0 1px #0b142a}
.hud .actions{display:flex;gap:8px}
#canvas{background:linear-gradient(#0c1a2e,#04101f);border-radius:18px;border:1px solid #1f2a44;box-shadow:inset 0 0 0 1px #0b142a}
.legend{opacity:.8;margin-top:8px}
dialog{border:1px solid #1f2a44;border-radius:12px;padding:16px;background:#0f1830;color:#e9edf7}
.config-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
label{display:flex;align-items:center;justify-content:space-between;gap:8px}