:root{--paper:#f2ead7;--ink:#293b50;--blue:#245a91;--orange:#d97035;--line:#c9b695;--cream:#fff9ed;--shadow:#bfa985}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.4 Georgia,serif}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);padding:9px 13px;cursor:pointer}button:hover{border-color:var(--blue)}button:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}button:disabled{opacity:.48;cursor:default}.primary{background:var(--blue);color:white;border-color:var(--blue)}#app{max-width:1180px;margin:auto;padding:12px}header{display:flex;align-items:center;gap:8px;min-height:74px}header img{width:48px;height:64px;object-fit:contain}.brand{flex:1;min-width:0}.brand small{font-size:11px;letter-spacing:.04em}h1{font-size:25px;margin:0;line-height:1.1}h2{font-size:21px;margin:0 0 10px}h3{font-size:17px}nav{display:flex;gap:5px}nav button{width:44px;padding:6px;font-weight:bold;font-size:22px}#hud{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;background:var(--cream);border:1px solid var(--line);border-radius:14px;font-size:14px}#goal{padding:8px 3px;font-weight:bold}#hold{font-size:13px;margin:0 3px 8px;color:var(--blue)}.cityLayout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}#viewport{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(#e8dfce,#d4cfb3);touch-action:pan-y}#board{width:576px;height:380px;position:relative;margin:auto}canvas{width:576px;height:380px;display:block}#plots{position:absolute;inset:0;pointer-events:none}.plot{position:absolute;width:88px;height:44px;min-height:44px;padding:0;border:0;background:transparent;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0;pointer-events:auto;color:transparent}.plot:focus-visible{background:#e9a95577;outline:none}.plot:hover{background:#ffd69855}.pan{display:block;text-align:center;font-size:11px;padding:6px}aside{border:1px solid var(--line);background:var(--cream);border-radius:16px;padding:14px;align-self:start}#details{font-size:13px}#details p{margin:6px 0}#notice{font-size:13px;color:#88471e;min-height:18px;margin:8px 0}.buildTools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#tools>button{width:100%;margin-top:6px}#preview{border-top:1px solid var(--line);margin-top:10px}#preview p{font-size:14px}#preview button{width:100%;margin-top:6px}#result{border-top:1px solid var(--line);margin-top:15px;padding-top:15px}#result button{width:100%;margin:4px 0}dialog{max-width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--cream);color:var(--ink);padding:22px}dialog::backdrop{background:#25394d77}dialog>button{display:block;width:100%;margin:8px 0}dialog label{display:block;margin:12px 0}dialog select{width:100%;margin:6px 0}.settings{border-top:1px solid var(--line);margin-top:14px}.settings label{display:flex;align-items:center;gap:10px}.settings input{width:22px;height:22px}p{overflow-wrap:anywhere}@media(max-width:840px){.cityLayout{grid-template-columns:minmax(0,1fr)}#app{padding:8px}aside{padding:13px}.buildTools{grid-template-columns:repeat(3,minmax(0,1fr))}#hud{font-size:12px;padding:10px 8px}#goal{font-size:13px}#tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.buildTools{grid-column:1/-1}#tools>button{margin:0}.brand small{font-size:9px}h1{font-size:21px}header{gap:5px}header img{width:38px}nav{gap:4px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

header .brand small{display:block;line-height:1.15}header h1{font-size:20px;white-space:nowrap}@media(max-width:360px){header h1{font-size:17px}.brand small{font-size:8px;max-width:110px}}

body{background:linear-gradient(#f2ead7bb,#f2ead7dd),url(assets/desk.webp) center/cover fixed}dialog .cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:14px}header{min-height:70px}header .brand small{max-width:150px}