.city-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:23px;align-items:start}
.city-frame{position:relative;height:min(74vh,780px);min-height:440px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#8fc8ff;box-shadow:0 22px 60px rgba(0,0,0,.45)}
#city-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#city-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#city-overlay>*{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}
#city-overlay [hidden]{display:none}
.city-label{display:flex;gap:7px;align-items:center;white-space:nowrap;background:rgba(14,16,36,.8);backdrop-filter:blur(6px);color:#f2f4ff;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s}
.city-label span{font-size:9px;font-weight:700;letter-spacing:.8px;color:#f2f4ff}
.city-label.planned span{color:#a6acd0}
.city-label.live span{color:#ffc15e}
.city-label.hot{border-color:#ffc15e;background:rgba(34,53,45,.95)}
.city-tag{background:rgba(14,16,36,.75);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;cursor:pointer;transform-origin:center}
.city-tag.hot{background:#5a6bd8}
.city-tag.speaking{background:#ffc15e;color:#2b1b00}
.city-bubble{width:250px;background:#fff;color:#1b2a30;border-radius:12px;padding:10px 12px 9px;font-size:12px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer;margin-top:-14px}
.city-bubble::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}
.city-bubble small{display:block;font-size:9px;font-weight:800;letter-spacing:.8px}
.city-bubble small.demo{color:#a8457f}.city-bubble small.live{color:#0a6b54}
.city-bubble p{margin:4px 0 6px;color:#1b2a30;line-height:1.45}
.city-bubble span{font-size:10px;font-weight:700;color:#5a6bd8}
.city-thinking{display:flex;gap:5px;align-items:center;background:#fff;border-radius:14px;padding:7px 11px;box-shadow:0 6px 20px rgba(0,0,0,.3);margin-top:-10px}
.city-thinking i{width:7px;height:7px;border-radius:50%;background:#9fb0b6}
.city-thinking[data-step="0"] i:nth-child(1),.city-thinking[data-step="1"] i:nth-child(2),.city-thinking[data-step="2"] i:nth-child(3){background:#1b2a30}
.city-thinking em{display:none;font-style:normal;font-size:9px;font-weight:800;color:#0a6b54;margin-left:3px}
.city-thinking.live em{display:inline}
.city-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.city-controls button,.city-controls select{background:rgba(14,16,36,.8);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:#f2f4ff;border-radius:8px;padding:7px 11px;font-size:12px;width:auto}
.city-hint{position:absolute;left:12px;bottom:10px;margin:0;font-size:11px;color:#fff;background:rgba(14,16,36,.6);padding:4px 10px;border-radius:12px;pointer-events:none}
.city-fallback{position:absolute;inset:auto 20px 50% 20px;color:#2b1b00;background:#fff;padding:16px;border-radius:10px}
#city-replay{white-space:nowrap}
.city-list{display:grid;gap:4px;margin:10px 0 18px}
.city-item{display:flex;gap:11px;align-items:flex-start;text-align:left;background:none;border-color:transparent;padding:9px 8px;font-size:13px;font-weight:600}
.city-item:hover,.city-item:focus-visible{background:#1b282e}
.city-item small{display:block;font-weight:400;color:var(--muted);font-size:11px;line-height:1.5;margin-top:2px}
.swatch{width:12px;height:12px;border-radius:3px;background:var(--c);flex-shrink:0;margin-top:5px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.sw-openai{--c:#10a37f}.sw-anthropic{--c:#d97757}.sw-xai{--c:#b3b7c9}.sw-google{--c:#4285f4}
.sw-council{--c:#5a6bd8}.sw-web{--c:#3d6fb6}.sw-content{--c:#c0508f}.sw-reception{--c:#2b8a8a}.sw-shop{--c:#5a9a3c}.sw-university{--c:#b5654b}
#city-detail h2{margin:8px 0 4px}
.city-text{white-space:pre-wrap;overflow-wrap:anywhere;background:#0d1028;border:1px solid var(--line);border-radius:8px;padding:12px;font:12px/1.6 ui-monospace,monospace;color:#d6e2e4;max-height:340px;overflow:auto}
.city-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;margin:14px 0}
.city-facts dt{color:var(--muted)}
.city-facts dd{margin:0;overflow-wrap:anywhere}
#city-detail .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media(max-width:1100px){.city-layout{grid-template-columns:1fr}}
@media(max-width:700px){.city-frame{height:62vh;min-height:380px;border-radius:10px}.city-bubble{width:200px;font-size:11px}.city-label{font-size:11px;padding:4px 9px}.city-hint{display:none}}

.sw-google{--c:#4285f4}
.city-feed{position:absolute;left:12px;bottom:44px;width:min(380px,calc(100% - 24px));background:rgba(14,16,36,.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px;color:#f2f4ff;font-size:11.5px;pointer-events:none}
.city-feed b{font-size:9px;letter-spacing:1.4px;color:#ffc15e;text-transform:uppercase}
.city-feed ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.city-feed time{color:#a6acd0;margin-right:4px}
.city-inside-bar{position:absolute;top:12px;left:12px;display:flex;gap:10px;align-items:center}
.city-inside-bar span{display:none;background:rgba(14,16,36,.8);color:#f2f4ff;border-radius:8px;padding:7px 12px;font-weight:700;font-size:13px}
.city-frame.inside .city-inside-bar span{display:inline-block}
.city-frame.inside .city-feed,.city-frame.inside .city-hint{display:none}
#city-exit{background:#ffc15e;color:#2b1b00;border:0;font-weight:700;border-radius:8px;padding:7px 12px;font-size:12px}
.city-tag.council{background:rgba(34,53,45,.9)}
.chip.st-graduated,.chip.st-faculty,.chip.st-approved,.chip.st-recommended{color:#ffc15e;border-color:#3e6b55}
.chip.st-enrolled,.chip.st-proposed,.chip.st-voting{color:#f2d14b;border-color:#6b5c2a}
.chip.st-deceased,.chip.st-rejected,.chip.st-not_recommended{color:#f29a8c;border-color:#6b3a33}
.idea{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:4px}
.idea small{display:block;color:var(--muted);font-size:11px}
.idea pre{white-space:pre-wrap;max-height:320px;overflow:auto;font-size:12px}
#city-detail a,#ideas a{color:#8fc8ff}
@media(max-width:700px){.city-feed{display:none}}

/* ---------- full-screen game mode ---------- */
:root{--glass:rgba(17,20,42,.82);--glass-strong:rgba(20,24,48,.96);--edge:rgba(255,255,255,.12);--gold:#f2c94c}
.city-hud,.hud-dock{display:none}
body.city-mode aside,body.city-mode header,body.city-mode #city-view .heading,body.city-mode #city-view .city-layout>div:first-child>.fine{display:none}
body.city-mode main{margin:0}
body.city-mode section#city-view{padding:0;max-width:none}
body.city-mode .city-layout{display:block}
body.city-mode .city-frame{position:fixed;inset:0;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;z-index:5}
/* top bar: brand + live state, resource chips, To do */
body.city-mode .city-hud{display:block;position:absolute;top:0;left:0;right:0;z-index:3;padding:10px 14px 0;pointer-events:none}
.city-hud>*{pointer-events:auto}
.hud-top{display:flex;align-items:center;gap:10px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--edge);border-radius:14px;padding:7px 8px 7px 14px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.hud-brand-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.hud-brand{color:#eafff0;font-size:16px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.hud-live{font-size:10px;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:20px;background:#3a2f17;color:#ffc15e;white-space:nowrap}
.hud-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.hud-live.live{background:#173d2c;color:#6ff2a0}.hud-live.live::before{animation:pulse 1.2s infinite}
.hud-live.wait{background:#2f2a18;color:#f2d46b}.hud-live.sleep{background:#232a44;color:#aab8ff}.hud-live.off{background:#3a2622;color:#f2a08c}
@keyframes pulse{50%{opacity:.25}}
.hud-stats{display:flex;gap:6px;flex:1;justify-content:center;min-width:0;overflow:hidden}
.stat{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:4px 10px;white-space:nowrap;font-size:12px;color:#dfe9ea}
.stat b{font-size:13px;color:#fff;font-variant-numeric:tabular-nums}.stat small{color:#93a7ae;font-size:10px}
.stat .mini{width:46px;height:5px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.stat .mini i{display:block;height:100%;width:var(--w,0);background:#ffc15e}
.stat.up b{color:#6ff2a0}.stat.down b{color:#ff9c8a}
.hud-todo{position:relative;background:var(--gold);color:#1d1a0e;border:0;border-radius:11px;padding:8px 14px;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 4px 14px rgba(242,201,76,.25)}
.hud-todo .todo-badge{position:absolute;top:-7px;right:-7px;margin:0;background:#e2533d;color:#fff;border:2px solid #0e1124}
.hud-status{margin:6px 0 0;display:flex;justify-content:center}
#city-hud-status{font-size:12px;color:#f2f4ff;background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--edge);padding:4px 12px;border-radius:14px;max-width:min(760px,92vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bottom dock */
body.city-mode .hud-dock{display:flex;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;gap:4px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--edge);border-radius:18px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.hud-dock button{display:grid;justify-items:center;gap:2px;min-width:74px;background:transparent;border:0;border-radius:12px;color:#e7f0f1;font-size:20px;padding:7px 8px 6px;line-height:1}
.hud-dock button span{font-size:10.5px;font-weight:700;letter-spacing:.2px;color:#a9bcc2}
.hud-dock button:hover{background:rgba(255,193,94,.12)}.hud-dock button:hover span{color:#ffc15e}
body.city-mode.city-drawer-open #city-drawer-toggle{background:rgba(255,193,94,.18)}
/* corner widgets */
body.city-mode .city-controls{top:auto;bottom:18px;left:14px;right:auto}
.city-controls select{background:var(--glass)!important;border-radius:10px!important}
body.city-mode .city-inside-bar{top:104px}
body.city-mode .city-feed{left:14px;bottom:62px;width:min(340px,calc(100% - 28px));max-height:150px;overflow:hidden;background:var(--glass);border-radius:12px;font-size:11.5px;mask-image:linear-gradient(#000 75%,transparent)}
body.city-mode .city-hint{left:auto;right:14px;bottom:auto;top:110px;background:var(--glass);font-size:11px;opacity:.85}
.city-hint kbd{display:inline-block;font:700 10px system-ui;background:rgba(255,255,255,.14);border-radius:4px;padding:1px 5px;margin:0 1px}
/* camera pad */
.city-cam{position:absolute;right:14px;bottom:96px;z-index:2;display:grid;gap:6px;justify-items:center}
.dpad{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:3px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--edge);border-radius:50%;padding:6px}
.dpad [data-pan=up]{grid-area:1/2}.dpad [data-pan=left]{grid-area:2/1}.dpad #city-reset{grid-area:2/2}.dpad [data-pan=right]{grid-area:2/3}.dpad [data-pan=down]{grid-area:3/2}
.cam-row{display:flex;gap:4px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--edge);border-radius:12px;padding:4px}
.city-cam button{width:40px;height:40px;border-radius:10px;background:transparent;color:#f2f4ff;border:0;font-size:16px;padding:0;touch-action:none;user-select:none}
.city-cam button:hover{background:rgba(255,193,94,.14)}.city-cam button:active{background:rgba(255,193,94,.3)}
.dpad #city-reset{font-size:18px;color:#ffc15e}
/* side drawer (Explore) */
body.city-mode .city-layout>div:last-child{position:fixed;top:70px;right:14px;bottom:96px;width:370px;overflow:auto;z-index:6;transform:translateX(calc(100% + 28px));transition:transform .25s ease;scrollbar-width:thin}
body.city-mode.city-drawer-open .city-layout>div:last-child{transform:none}
body.city-mode .city-layout>div:last-child .panel{background:var(--glass-strong);backdrop-filter:blur(10px);border-color:var(--edge)}
body.city-mode.city-drawer-open .city-cam,body.city-mode.city-drawer-open .city-hint{right:398px}
/* panels open as a sheet on the right */
body.city-mode .modal{place-items:stretch end;padding:0;background:rgba(5,8,10,.35)}
body.city-mode .modal-card{width:min(620px,100vw);max-height:none;height:100dvh;border-radius:18px 0 0 18px;border-width:0 0 0 1px;padding:22px 24px 40px;animation:sheet .22s ease}
@keyframes sheet{from{transform:translateX(40px);opacity:.4}}
.modal-card>.row:first-child{position:sticky;top:-22px;background:var(--panel);margin:-22px -24px 10px;padding:18px 24px 14px;border-bottom:1px solid var(--line);z-index:2}
.modal-card h2{font-size:20px}
@media(max-width:1100px){body.city-mode .city-layout>div:last-child{width:min(360px,calc(100vw - 28px))}body.city-mode.city-drawer-open .city-cam,body.city-mode.city-drawer-open .city-hint{right:14px}.stat.opt{display:none}}
@media(max-width:700px){
 body.city-mode .city-hud{padding:8px 8px 0}
 .hud-top{padding:6px 6px 6px 10px;gap:6px;border-radius:12px}
 .hud-brand{font-size:14px}.hud-live{font-size:9px;padding:3px 7px}
 .stat{padding:3px 7px;font-size:11px}.stat small,.stat .mini,.stat.opt{display:none}
 .hud-todo span{display:none}.hud-todo{padding:7px 11px}
 .hud-stats{justify-content:flex-end}
 #city-hud-status{font-size:11px}
 body.city-mode .hud-dock{left:0;right:0;bottom:0;transform:none;border-radius:16px 16px 0 0;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .hud-dock button{min-width:0;flex:1;font-size:19px;padding:6px 2px}.hud-dock button span{font-size:9px}
 body.city-mode .city-feed,body.city-mode .city-hint{display:none}
 body.city-mode .city-controls{bottom:auto;top:88px;left:8px}
 .city-cam{right:8px;bottom:84px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px)}.city-cam button{width:36px;height:36px}
 body.city-mode .city-layout>div:last-child{top:auto;left:0;right:0;bottom:64px;width:auto;max-height:58vh;transform:translateY(calc(100% + 70px));border-radius:16px 16px 0 0}
 body.city-mode.city-drawer-open .city-layout>div:last-child{transform:none}
 body.city-mode.city-drawer-open .city-cam{display:none}
 body.city-mode .modal-card{width:100vw;border-radius:0;padding:18px 16px 40px}
 .modal-card>.row:first-child{margin:-18px -16px 10px;padding:14px 16px 12px;top:-18px}
}
@media(prefers-reduced-motion:reduce){body.city-mode .city-layout>div:last-child{transition:none}.modal-card{animation:none}}

.drawer-close{display:none}
body.city-mode .drawer-close{display:block;position:sticky;top:0;z-index:2;margin:0 0 8px auto;background:#ffc15e;color:#2b1b00;border:0;font-weight:700;border-radius:9px;padding:8px 14px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* activity icons, sleeping houses, tap speech */
.city-icon{font-size:16px;line-height:1;background:rgba(14,16,36,.55);border-radius:12px;padding:3px 5px;cursor:pointer;margin-top:-6px}
.city-zz{font-size:11px;font-weight:700;color:#e8ecff;background:rgba(30,40,80,.75);border-radius:12px;padding:3px 8px;white-space:nowrap;cursor:pointer}
.city-say{max-width:230px;background:#fffbe8;color:#1b2a30;border-radius:12px;padding:8px 10px;font-size:12px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.35);margin-top:-12px}
.city-say::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fffbe8}
/* To do and Today panels */
.todo-badge{display:inline-block;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:10px;background:#f2c94c;color:#1b1a10;font-size:11px;font-weight:800;text-align:center}
.needs-you h2{font-size:22px}
.todo-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.todo-item b{display:block;font-size:13px;line-height:1.4}
.todo-item small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.5}
.todo-item .actions{margin-top:8px;gap:8px}
.todo-item .actions button,.todo-item .actions .button{padding:7px 12px;font-size:12px}
.todo-icon{font-size:20px;line-height:1.2;width:26px;flex-shrink:0;text-align:center}
.todo-item pre{white-space:pre-wrap;font-size:12px;color:#d3d7f2}
.budget{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;font-size:12px;margin:6px 0}
.budget span{color:var(--muted)}
.bar{height:8px;background:#272c52;border-radius:6px;overflow:hidden;display:block}
.bar i{display:block;height:100%;width:var(--w,0);background:var(--mint)}
.ops-form .check{display:flex;gap:10px;align-items:flex-start}.ops-form .check input{width:auto;margin-top:3px}
@media(max-width:700px){.budget{grid-template-columns:1fr auto}.budget .bar{grid-column:1/-1;order:3}}
/* Trading Desk */
.trade{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;display:grid;gap:4px}
.trade small{color:var(--muted);font-size:11px}
.pos{color:#6ff2a0}.neg{color:#ff9c8a}
.ops-stats .pos,.ops-stats .neg{font-size:22px;display:block}
/* panel polish */
.modal-card .notice{margin:4px 0 14px}
.ops{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ops>.row h3{font-size:15px}
.todo-item:first-of-type{border-top:0}
/* Money and rewards */
.money{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0;background:rgba(255,255,255,.02)}
.money h3{font-size:15px}.money ul{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px;font-size:12.5px;color:#cfd3ef}
.money li.done{color:#f2f4ff}.money .next{margin:8px 0 0;font-size:12.5px;color:#ffd58f;line-height:1.5}
.leaders{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.leaders span{background:rgba(255,193,94,.1);border:1px solid rgba(255,193,94,.25);border-radius:10px;padding:4px 10px;font-size:12px}
.city-label.venue b{color:#ffd58f}
/* café conversations */
.city-chat{position:absolute;max-width:220px;background:#fff7e6;color:#2a2238;border-radius:14px;padding:7px 10px;font-size:11.5px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.3);margin-top:-10px;pointer-events:none;animation:pop .25s ease}
.city-chat b{color:#b4541c;margin-right:3px}
.city-chat::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fff7e6}
.city-chat.learned{background:#e9fff1;box-shadow:0 0 0 2px #6ff2a0,0 6px 18px rgba(0,0,0,.3)}.city-chat.learned::after{border-top-color:#e9fff1}
@keyframes pop{from{opacity:0}}