: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{height:100vh;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.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{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}@media (min-width:48rem){.login-card{padding:2rem}}.resource-bar{background:var(--panel);border-bottom:2px solid var(--line);flex-wrap:wrap;gap:.25rem 1rem;padding:.375rem .75rem;font-size:.9375rem;font-weight:600;display:flex}.resource-label{color:var(--ink-soft)}.stage{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.stage .town-view{flex:1 1 0;min-height:5rem}.bottom-bar{padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:2px solid var(--line);flex-wrap:wrap;gap:.5rem;display:flex}.bottom-bar button{flex:1 1 0;min-width:2.75rem;padding-inline:.5rem}.bottom-bar button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px}.build-panel{background:var(--panel);border-top:2px solid var(--line);flex-direction:column;flex:none;max-height:40dvh;padding:.75rem;display:none;overflow-y:auto;box-shadow:0 -.25rem 1rem #0000001f}.build-panel[data-open=true]{animation:.2s ease-out panel-up;display:flex}@keyframes panel-up{0%{opacity:0;transform:translateY(1.5rem)}}@keyframes panel-in{0%{opacity:0;transform:translate(1.5rem)}}@media (prefers-reduced-motion:reduce){.build-panel[data-open=true]{animation:none}}.panel-head{order:1}.build-panel[data-mode=choosing] .build-message{order:2}.build-panel[data-mode=choosing] .panel-body{order:3}.build-panel[data-mode=placing] .panel-body{order:2}.build-panel[data-mode=placing] .build-message{order:3}.panel-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.panel-title{margin:0;font-size:1.125rem}.icon-button{padding:.25rem .75rem}.build-message{min-height:1.5rem;margin:.5rem 0;font-size:.9375rem;font-weight:600}.build-message[data-kind=error]{color:var(--danger)}.build-message[data-kind=ok]{color:var(--ok)}.panel-body[hidden]{display:none}.options{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.option{text-align:left;justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.option-cost{font-size:.875rem;font-weight:500}.panel-actions{gap:.5rem;display:flex}.panel-actions button{flex:1}@media (min-width:48rem){.bottom-bar{justify-content:center}.bottom-bar button{flex:0 12rem}.stage{flex-direction:row}.stage .town-view{min-height:0}.build-panel{border-top:0;border-left:2px solid var(--line);width:22rem;max-height:none;box-shadow:-.25rem 0 1rem #0000001f}.build-panel[data-open=true]{animation-name:panel-in}}@media (max-width:24rem){.topbar{flex-wrap:wrap}.topbar .title{flex:1 1 0;order:1}.topbar button{order:2}.topbar .status{flex-basis:100%;order:3}}.cat-badges{flex-wrap:wrap;gap:.5rem;min-height:0;margin:.5rem 0 0;display:flex}.badge{background:var(--line);color:var(--ink);border-radius:999px;padding:.125rem .625rem;font-size:.875rem;font-weight:700;display:inline-block}.badge[hidden]{display:none}.badge-warn{color:#7a4a00;background:#fde7c4}.cat-facts{grid-template-columns:auto 1fr;gap:.375rem .75rem;margin:.5rem 0 0;font-size:.9375rem;display:grid}.cat-facts dt{color:var(--ink-soft);font-weight:600}.cat-facts dd{margin:0}.cat-quirks{margin:0;padding-left:1.1rem}.cat-meter{vertical-align:middle;width:6rem}