:root{--cream:#fdf6ec;--ink:#3b2f2f;--ink-soft:#6b5b55;--accent:#b85a1e;--accent-ink:#fff;--panel:#fff;--line:#e6d8c6;--ok:#2f7d3b;--warn:#a15c00;--danger:#b3261e;color:var(--ink);background:var(--cream);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:100%}*{box-sizing:border-box}html,body{height:100%;margin:0}#app{flex-direction:column;min-height:100%;display:flex}button,input{font:inherit}button{background:var(--accent);min-width:44px;min-height:44px;color:var(--accent-ink);cursor:pointer;border:0;border-radius:.75rem;padding:.5rem 1rem;font-weight:600}button.secondary{color:var(--ink);border:2px solid var(--line);background:0 0}button:disabled{opacity:.6;cursor:progress}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #1d6fdc}.login{flex-direction:column;flex:1;justify-content:center;padding:1.5rem 1rem;display:flex}.login-card{background:var(--panel);border:2px solid var(--line);border-radius:1.25rem;width:100%;max-width:24rem;margin:0 auto;padding:1.5rem}.login h1{text-align:center;margin:0 0 1.25rem;font-size:1.75rem}.field{flex-direction:column;gap:.25rem;margin-bottom:1rem;display:flex}.field label{font-size:.9375rem;font-weight:600}.field input{border:2px solid var(--line);min-height:44px;color:var(--ink);background:#fff;border-radius:.75rem;padding:.5rem .75rem}.login button[type=submit]{width:100%}.form-error{min-height:1.5rem;color:var(--danger);margin:0 0 .75rem;font-size:.9375rem;font-weight:600}.town{min-height:100vh;flex-direction:column;flex:1;min-height:100dvh;display:flex}.topbar{background:var(--panel);border-bottom:2px solid var(--line);flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.5rem .75rem;display:flex}.topbar .title{overflow-wrap:anywhere;flex:auto;min-width:0;margin:0;font-size:1.125rem;font-weight:700}.status{align-items:center;gap:.4rem;font-size:.875rem;font-weight:600;display:inline-flex}.status:before{content:"";background:var(--warn);border-radius:50%;width:.75rem;height:.75rem}.status[data-state=connected]:before{background:var(--ok)}.town-view{background:#cfe8c4;flex:1;min-height:0;position:relative}.town-view canvas{width:100%;height:100%;display:block}@media (min-width:48rem){.login-card{padding:2rem}}