.scene-camera-menu{position:fixed;z-index:1600;min-width:152px;padding:6px;border:1px solid #b6c7b0;border-radius:14px;background:rgba(250,252,243,.97);box-shadow:0 10px 30px #15271b2b;backdrop-filter:blur(12px);color:#233928;font:600 13px/1.4 var(--hl-font,system-ui,sans-serif)}
.scene-camera-menu[hidden]{display:none}
.scene-camera-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.scene-camera-menu button::before{content:'';width:7px;height:7px;border:1px solid #90a185;border-radius:50%}
.scene-camera-menu button[aria-checked=true]{background:#e1edce}
.scene-camera-menu button[aria-checked=true]::before{background:#5d853d;border-color:#5d853d}
.scene-camera-menu button:hover:not(:disabled),.scene-camera-menu button:focus-visible{background:#d9ecb6;outline:2px solid #729e43;outline-offset:-2px}
.scene-camera-menu button:disabled{opacity:.45;cursor:default}
.view-tools button[aria-pressed=true],.city-controls button[aria-pressed=true],.city-zoom button[aria-pressed=true],.dock-camera-mode button[aria-pressed=true]{background:#d6ed9e;color:#21341b;border-color:#8bae56}
canvas[data-camera-mode=free]{cursor:grab}
canvas[data-camera-mode=free]:active{cursor:grabbing}
/* The gesture guide stays discoverable without becoming another bottom panel. */
.scene-controls-hint{position:fixed;z-index:39;left:50%;bottom:calc(2px + env(safe-area-inset-bottom) + var(--hud-bottom,0px));transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:nowrap;gap:8px;width:max-content;max-width:calc(100% - 20px);padding:2px 8px;border:0;border-radius:8px;background:#f3f6eacc;color:#455e50;font:500 9px/1.25 var(--hl-font,system-ui,sans-serif);text-align:center;pointer-events:none;user-select:none;box-shadow:none;opacity:.78}
.scene-controls-hint span{white-space:nowrap}
.scene-controls-hint span[hidden]{display:none}
.scene-controls-hint span:nth-child(2),.scene-controls-hint span:nth-child(4){display:none}
body[data-camera-controls] .town-help{display:none!important}
/* Move only the bottom-level docks; their children keep the existing compact layout. */
body[data-camera-controls] :is(.scene-dock,.city-chat,.city-player,.city-controls,.city-credit,.world-footer,.chatbar,.chat-log,.emoji-pop){margin-bottom:var(--scene-controls-height,34px)}
body.hud-grouped[data-camera-controls] .scene-dock{margin-bottom:0!important}
body.hud-grouped .scene-controls-hint{display:none}
@media(max-width:760px){body.hud-grouped[data-camera-controls] .scene-dock{margin-bottom:0!important}}
/* Camera modes belong to the compact center module. */
.dock-camera-mode{display:flex;align-items:center;justify-content:center;gap:6px}
.dock-camera-mode button{min-width:54px;min-height:44px;padding:8px 12px;border:1px solid var(--hl-line,#b6c7b0);border-radius:10px;background:var(--hl-secondary,#edf1e5);color:var(--hl-ink,#233928);font:600 13px var(--hl-font,system-ui,sans-serif);cursor:pointer;white-space:nowrap}
@media(max-width:430px){.dock-camera-mode{justify-content:center}.dock-camera-mode button{flex:0 0 auto}}
/* Shared character selection: same grid, draft and confirmation on every map. */
.scene-role-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:24px;background:#fbfcf7;color:#26382c;border:1px solid #cbd6c3;border-radius:18px;box-shadow:0 18px 50px #0a1e2833;font:14px/1.5 var(--hl-font,system-ui,sans-serif)}
.scene-role-dialog::backdrop{background:#101d2866}
.scene-role-dialog h2{margin:0 0 18px;font:600 22px/1.4 var(--hl-font,system-ui,sans-serif)}
.scene-role-dialog .scene-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:min(360px,48dvh);overflow:auto;overscroll-behavior:contain;padding:2px}
.scene-role-dialog .scene-role-choice{display:flex;min-width:0;min-height:92px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:9px 3px;border:2px solid transparent;border-radius:8px;background:#edf2ea;color:#26382c;font:11px/1.4 var(--hl-font,system-ui,sans-serif);cursor:pointer}
.scene-role-dialog .scene-role-choice[aria-pressed=true]{border-color:#4b8058;background:#e0efe2}
.scene-role-dialog canvas{width:56px;height:56px;image-rendering:pixelated}
.scene-role-dialog .scene-role-actions{display:flex;gap:10px;margin-top:20px}
.scene-role-dialog .scene-role-actions button{flex:1;min-height:44px;border:1px solid #cbd6c3;border-radius:12px;background:#edf2ea;color:#26382c;font:600 14px var(--hl-font,system-ui,sans-serif);cursor:pointer}
.scene-role-dialog .scene-role-actions .scene-role-confirm{background:#d2f65a;border-color:#d2f65a}
.scene-role-dialog .scene-role-actions button:disabled{opacity:.45;cursor:default}
.scene-role-dialog .scene-role-note{font-size:13px;color:#596b5b}.scene-role-dialog .scene-role-note:empty{display:none}
.scene-role-dialog a{color:#426444}.scene-role-dialog :focus-visible{outline:2px solid #34785a;outline-offset:2px}
@media(max-width:420px){.scene-role-dialog{padding:18px}.scene-role-dialog canvas{width:48px;height:48px}.scene-role-dialog .scene-role-choice{min-height:84px}}
.scene-city-dock{position:fixed;z-index:38;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom) + var(--hud-bottom,0px));box-sizing:border-box;width:min(1120px,calc(100% - 40px));display:grid;grid-template-columns:minmax(170px,1fr) auto minmax(230px,1fr);gap:16px;align-items:center;padding:12px;background:var(--hl-paper,#f6f7ef);border:1px solid var(--hl-line,#c4d2bb);border-radius:16px;box-shadow:var(--hl-shadow)}
.scene-city-dock :is(.city-player,.city-controls,.city-chat){position:static;inset:auto;transform:none;width:auto;min-width:0;margin:0!important;padding:0;background:transparent;box-shadow:none}
.scene-city-dock .city-controls{justify-content:center;flex-wrap:wrap;max-width:300px}
.scene-city-dock .city-player>div{min-width:0}.scene-city-dock .city-player strong{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:950px){.scene-city-dock{width:calc(100% - 24px);grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px}.scene-city-dock .city-chat{grid-column:1/-1}.scene-city-dock .city-controls{max-width:240px}}
@media(max-width:480px){.scene-city-dock{grid-template-columns:1fr}.scene-city-dock .city-controls{justify-content:flex-start;max-width:none}.scene-city-dock .city-player{justify-content:flex-start}.scene-city-dock .city-player>div{flex:1}.scene-city-dock .city-chat{grid-column:auto}}
/* One transcript layout for every map; the input stays in its existing bottom dock. */
body>.scene-chat-history{position:fixed;z-index:37;left:max(12px,env(safe-area-inset-left));right:auto;top:auto;bottom:var(--scene-chat-bottom,150px);box-sizing:border-box;width:min(380px,calc(100vw - 24px));padding:8px 12px;background:var(--hl-paper,#f6f7ef);color:var(--hl-ink,#233928);border:1px solid var(--hl-line,#c4d2bb);border-radius:12px;box-shadow:var(--hl-shadow,0 8px 24px #102b2424);font:13px/1.5 var(--hl-font,system-ui,sans-serif)}
body>.scene-chat-history[hidden]{display:none}
body>.scene-chat-history>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;font-size:12px;font-weight:600;cursor:pointer;list-style:none}
body>.scene-chat-history>summary::-webkit-details-marker{display:none}
body>.scene-chat-history>summary::after{content:'+';font-size:18px}
body>.scene-chat-history[open]>summary::after{content:'−'}
body>.scene-chat-history>.scene-chat-lines{position:static;inset:auto;box-sizing:border-box;width:auto;min-height:32px;max-height:max(48px,min(240px,28dvh,calc(100dvh - var(--scene-chat-bottom,150px) - 140px)));overflow:auto;overscroll-behavior:contain;touch-action:pan-y;overflow-wrap:anywhere;padding:4px 0;margin:0;border:0;border-radius:0;background:none;color:inherit;box-shadow:none;text-shadow:none;font-size:13px;line-height:1.6;scrollbar-width:thin}
body>.scene-chat-history>.scene-chat-lines:empty::before{content:attr(data-empty);color:var(--hl-muted,#627368)}
body>.scene-chat-history>.scene-chat-lines :is(p,.chat-line){margin:0;padding:5px 0;border-bottom:1px solid var(--hl-line,#c4d2bb)}
body>.scene-chat-history>.scene-chat-lines b{color:var(--hl-green,#248257)}
body[data-scene=city]>.chatbar{bottom:calc(18px + env(safe-area-inset-bottom) + var(--hud-bottom,0px))}
@media(max-width:760px){body>.scene-chat-history{padding:6px 10px;width:min(330px,calc(100vw - 24px))}body>.scene-chat-history>.scene-chat-lines{font-size:12px}}