/* Canonical UI finish; loaded after the scene and social layout baselines. */
:root {
 --ink:#f2f3ed; --muted:#c7d2cf; --gold:#e4ceaa; --smoke:#243332;
 --panel:rgba(29,43,43,.38); --dialog:rgba(27,40,41,.76);
 --line:rgba(233,244,237,.24); --hover:rgba(239,245,235,.12);
 --selected:rgba(228,206,170,.15); --shadow:0 12px 36px #06181626,inset 0 1px 0 #ffffff18;
 --map-ink:#e1e9e2; --map-floor:rgba(142,170,161,.23); --map-shop:rgba(223,215,191,.19);
 --map-water:#9bcad0; --map-garden:#8cac90; --map-gallery:rgba(228,206,170,.12);
 --map-soil:#354b43; --map-leaf:#587963; --map-leaf-light:#92ab89; --map-planter:#a8b1a0; --map-plant-shadow:rgba(12,30,24,.25);
 --map-label-halo:#2d4140; --map-player:#e9d2a7; --map-heading:rgba(233,210,167,.24);
 --scroll-thumb:#81938c; --scroll-track:transparent; --scroll-hover:#b5c7bf; --scroll-active:#e4ceaa;
 --font-body:Roboto,"PingFang SC","Microsoft YaHei",sans-serif; --font-display:Georgia,"Songti SC",serif;
 --radius:18px; --control-radius:12px; --edge:28px;
 color:var(--ink);font-family:var(--font-body);scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin;
}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}::-webkit-scrollbar-thumb:active{background:var(--scroll-active)}
button{transition:background .16s,border-color .16s,color .16s;touch-action:manipulation}
button:disabled{cursor:default;opacity:.45}:where(button:hover:not(:disabled)){background:var(--hover);border-color:var(--line)}:where(button:active:not(:disabled)){background:var(--selected)} /* zero specificity: a fallback only, component hovers win (2026-10-06) */
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
kbd{font:10px var(--font-body);border:1px solid var(--line);border-radius:4px;padding:3px 5px;color:var(--muted);letter-spacing:.5px}
.panel,#social-tools button,#social-status,#talk-nearby,#avatar-dialog,#chat-panel .chat-card,#chat-panel .panel-close{
 background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
 backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);color:var(--ink);
}
.panel{border-radius:var(--radius)}
.brand{left:var(--edge);top:var(--edge);width:280px;min-width:0;height:70px;min-height:0;padding:15px 20px;gap:15px;font-size:23px;letter-spacing:1.5px}
.brand svg{width:39px;height:37px;stroke-width:2.5;stroke:var(--gold)}
.brand small{font-size:8px;letter-spacing:2.5px;margin-top:6px}
.intro{left:calc(var(--edge) + 5px);top:188px;padding:0;background:none;border:0;box-shadow:none;text-shadow:0 2px 8px #0009}
.intro strong{font-size:10px;font-weight:400;letter-spacing:3px;color:var(--gold)}
.intro p{font-size:12px;color:var(--ink);letter-spacing:1px;margin:10px 0}
.minimap-cluster{position:absolute;right:var(--edge);top:var(--edge);width:280px;pointer-events:none}
.minimap{position:relative;inset:auto;width:100%;min-width:0;aspect-ratio:1;padding:0;border-radius:50%;overflow:hidden;display:block;text-align:center;background:rgba(29,43,43,.26);border:1px solid rgba(228,206,170,.45);box-shadow:0 8px 24px #06181620,inset 0 1px 0 #ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.minimap::after{content:none}
.minimap:hover:not(:disabled),.minimap:active:not(:disabled){background:rgba(29,43,43,.32);border-color:var(--gold)}
#mini{display:block;width:100%;height:auto;min-height:0;aspect-ratio:1;mask-image:radial-gradient(circle closest-side,black 72%,transparent 100%);-webkit-mask-image:radial-gradient(circle closest-side,black 72%,transparent 100%)}
.map-north{position:absolute;left:0;right:0;top:13px;color:var(--gold);font-size:10px;letter-spacing:2px}
.map-open-hint{position:absolute;left:0;right:0;bottom:17px;font-size:9px;color:var(--ink);letter-spacing:1px}
.map-open-hint kbd{font-size:8px;margin-left:5px;padding:1px 3px}
.map-caption{display:flex;justify-content:space-between;align-items:center;margin:12px 22px;font-size:10px;letter-spacing:2px;text-shadow:0 1px 5px #000}
.map-caption>span:first-child{letter-spacing:1px;color:var(--gold)}
.clock-chip{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 18px;margin:16px auto 0;border-radius:30px;min-height:44px}
.clock-chip svg{width:17px;height:17px;color:var(--gold)}
#clock{border:0;padding:0;margin:0;color:var(--ink);font-size:17px;letter-spacing:1px;font-variant-numeric:tabular-nums}
#clock-phase{font-size:10px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;letter-spacing:1px}
.walk-help{left:var(--edge);bottom:var(--edge);padding:12px 16px;font-size:11px;border-radius:14px}
.walk-help kbd{margin-right:10px}.walk-help small{font-size:10px;margin-top:9px}
.dock{width:auto;min-width:0;bottom:var(--edge);padding:6px;gap:3px;border-radius:40px}
.dock button{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;padding:12px 22px;border-radius:30px;min-height:44px}
.dock button+button{border-left:0}.dock button svg{color:var(--gold)}
.options-button{right:var(--edge);bottom:var(--edge);display:flex;align-items:center;gap:9px;padding:13px 17px;border-radius:30px;font-size:12px;min-height:48px}
#fps{font-size:10px;margin:0;font-variant-numeric:tabular-nums}
#modal-root{position:fixed;z-index:20;background:rgba(9,19,21,.13);backdrop-filter:none;padding:16px;overscroll-behavior:contain;grid-template-columns:minmax(0,1fr)}
.modal{background:var(--dialog);padding:28px 32px;border-radius:26px;max-width:calc(100vw - 32px);min-width:0;max-height:calc(100dvh - 32px);box-shadow:0 28px 90px #081c3455,inset 0 1px 0 #ffffff26;scrollbar-gutter:stable;overscroll-behavior:contain}
.modal-title{font-size:20px;letter-spacing:1px;font-weight:400;padding-bottom:19px;gap:16px;color:var(--ink)}
.modal-title small{display:block;font-size:9px;letter-spacing:2.5px;color:var(--gold);margin-bottom:8px}
.close{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;flex-shrink:0;font-size:25px;color:var(--ink)}
#map-modal{width:1000px}.map-layout{gap:24px;grid-template-columns:minmax(0,1.9fr) minmax(235px,1fr)}
#floors{gap:4px;background:rgba(9,23,25,.14);border:1px solid var(--line);border-radius:30px;padding:4px;width:fit-content;margin:auto}
#floors button{background:none;border-radius:24px;padding:9px 13px;font-size:10px;min-height:36px}
#floors button.active{background:var(--selected);color:var(--gold);border-color:var(--line)}
#full-map{width:min(100%,calc(57dvh * 680 / 630));height:auto;max-height:none;margin:0 auto}
aside{padding-left:22px}h3{font-size:12px;letter-spacing:1.5px;color:var(--gold);margin:12px 0 18px}
#places button{font-size:12px;border-radius:var(--control-radius);padding:11px 12px;background:none;margin:3px 0;border:1px solid transparent;min-height:44px}
#places button b{font-weight:400;width:23px;height:23px;background:var(--hover);color:var(--muted);border:1px solid var(--line)}
#places button.active{background:var(--selected);color:var(--gold);border-color:var(--line)}
#places button.active b{background:var(--gold);color:var(--smoke)}
#place-detail{border-top:1px solid var(--line);margin-top:18px;min-height:100px}
#place-detail h4{font-size:16px;letter-spacing:1px}#place-detail p,aside>small{font-size:11px}
.legend{justify-content:center;gap:16px;font-size:10px;margin-top:4px}.legend span:first-child{color:var(--gold)}.legend span:nth-child(2){color:var(--map-garden)}.legend span:last-child{color:var(--map-water)}
#time-modal{width:790px;padding:28px 32px}.time-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);gap:32px;align-items:center;padding:22px 0 0}
.clock-column{min-width:0}#time-dial{width:100%;aspect-ratio:1;position:relative;touch-action:none;cursor:grab;border-radius:50%;user-select:none}
#time-dial.dragging{cursor:grabbing}#time-dial>svg{display:block;width:100%;height:auto;fill:none}
.dial-orbit{stroke:var(--line);stroke-width:.8}.dial-day{stroke:var(--gold);stroke-opacity:.5;stroke-width:1.5}
#dial-ticks path{stroke:var(--muted);stroke-width:.8}#dial-ticks .minor{opacity:.4}#dial-ticks .major{stroke:var(--gold);stroke-width:1.2}
.dial-inner{stroke:var(--line);stroke-width:.5}.dial-labels text{fill:var(--muted);text-anchor:middle;font:11px var(--font-body);letter-spacing:1px}
#dial-hand path{stroke:var(--gold);stroke-width:2;stroke-linecap:round}#dial-hand circle{fill:var(--gold);stroke:var(--smoke);stroke-width:3}
.dial-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:10px}
.dial-readout>small{font-size:12px;color:var(--gold);letter-spacing:3px}
#time-value{font:48px var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-1px;color:var(--ink);font-weight:400}
.dial-readout>span{font-size:8px;letter-spacing:2px;color:var(--muted)}
.clock-step{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.clock-step button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:20px}
#clock-help{font-size:10px;color:var(--muted)}
.section-label{font-size:10px;letter-spacing:2px;color:var(--muted);margin:0 0 13px}
.time-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.time-presets button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:rgba(224,238,232,.04);border:1px solid var(--line);border-radius:var(--control-radius);padding:13px 16px;font-size:13px}
.time-presets button small{font-size:10px;color:var(--muted);letter-spacing:1px;font-variant-numeric:tabular-nums}
.time-presets button.active{background:var(--selected);border-color:var(--gold);color:var(--gold)}
.time-actions{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.time-actions button{background:var(--selected);border-radius:var(--control-radius);padding:12px;font-size:12px;color:var(--gold);min-height:44px}
.time-actions label{display:flex;align-items:center;justify-content:space-between;border:0;background:none;padding:0;font-size:11px;color:var(--muted);gap:8px}
.time-actions select{border:1px solid var(--line);border-radius:8px;background:rgba(10,28,29,.35);padding:9px 8px;font-size:11px;color:var(--ink);max-width:160px;min-height:40px;color-scheme:dark;cursor:pointer}
.time-actions select option{background:var(--smoke);color:var(--ink)}
.quality-setting{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}.quality-setting .section-label{margin:0}
#quality{padding:10px 12px;border-radius:8px;background:none;font-size:11px;min-height:40px}
#time-modal .hint{font-size:10px;line-height:1.9;margin:17px 0 0;color:var(--muted)}
#info-modal{width:580px}#info-modal p{font-size:14px}#info-map{background:var(--selected);color:var(--gold);border-radius:var(--control-radius);padding:13px 18px}
#social-tools{left:var(--edge);top:113px;max-width:min(540px,calc(100vw - 370px));gap:7px;flex-wrap:wrap;align-items:center}
#social-tools button{padding:9px 13px;font-size:11px;min-height:38px;border-radius:24px}
#social-status{background:transparent;border:0;box-shadow:none;backdrop-filter:none;font-size:9px;flex-basis:100%;padding:3px 6px;text-shadow:0 1px 5px #000}
#talk-nearby{bottom:100px;color:var(--gold);padding:13px 22px;font-size:12px;border-radius:30px;background:var(--dialog)}
#avatar-dialog{background:var(--dialog);border-radius:26px;padding:28px;color:var(--ink);max-height:calc(100dvh - 32px);overflow:auto}
#avatar-dialog::backdrop{background:rgba(9,19,21,.22)}#avatar-dialog h2{font-size:22px;font-weight:400}#avatar-dialog .eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold)}#avatar-note{color:var(--muted);font-size:11px}
.avatar-choice{background:var(--hover);border:1px solid var(--line);border-radius:var(--control-radius);color:var(--ink);padding:10px;gap:10px}
.avatar-choice:hover{background:var(--selected)}
#chat-panel{color:var(--ink)}#chat-panel .chat-card{background:var(--dialog);border-radius:24px}
#chat-panel .panel-close{background:var(--dialog);color:var(--ink);border-color:var(--line)}
#chat-panel .chat-card>small,#chat-panel #chat-profile,#chat-panel #chat-status{color:var(--muted)}
#chat-panel #chat-input{background:rgba(221,239,234,.06);border-color:var(--line);color:var(--ink)}#chat-panel #chat-input::placeholder{color:var(--muted)}
#chat-panel #chat-send{background:var(--selected);border:1px solid var(--line);color:var(--gold)}
#joystick,.touch-buttons button{background:var(--panel);border-color:var(--line);backdrop-filter:blur(8px)}#joystick i{background:rgba(228,206,170,.4)}
#toast{background:var(--dialog);border:1px solid var(--line);border-radius:12px;color:var(--ink)}
#lift-prompt{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:6;border-radius:30px;padding:13px 22px;color:var(--gold);font-size:13px}
#lift-modal{width:420px}#lift-status{font-size:13px;color:var(--muted);min-height:20px;margin:22px 0}
#lift-levels{display:grid;gap:10px}#lift-levels button{display:flex;gap:20px;align-items:center;text-align:left;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--hover)}
#lift-levels b{font:30px var(--font-display);font-weight:400;color:var(--gold)}#lift-levels span{font-size:15px}#lift-levels small{display:block;font-size:11px;color:var(--muted);margin-top:5px}#lift-levels .active{background:var(--selected)}
#lift-call{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px;margin-top:15px;background:var(--selected);font-size:13px;color:var(--gold)}#lift-help{font-size:11px;line-height:1.8;margin-bottom:0}
body:has(#modal-root:not([hidden])) #hud,body:has(#modal-root:not([hidden])) #social-tools{visibility:hidden}
@media(max-width:1100px){:root{--edge:20px}.minimap-cluster{width:230px}.brand{width:260px;font-size:21px}.walk-help{display:none}.intro{top:187px}#social-tools{max-width:440px}.dock button{padding:12px 18px}.map-layout{gap:15px}#time-modal{width:740px}}
@media(max-width:700px){
 :root{--edge:16px}.brand{width:216px;height:61px;font-size:18px;padding:10px 14px;gap:10px}.brand svg{width:31px}.brand small{font-size:7px;letter-spacing:1.7px}
 .minimap-cluster{width:176px;top:94px}.map-caption{margin:8px 10px;font-size:8px;letter-spacing:1px}.map-open-hint{font-size:8px;bottom:10px}.map-open-hint kbd{display:none}.map-north{top:7px;font-size:8px}
 .clock-chip{gap:8px;padding:8px 12px;margin-top:10px;min-height:40px}#clock{font-size:14px}#clock-phase{font-size:8px;padding-left:8px}.clock-chip svg{width:14px}
 .intro{display:none}#social-tools{left:var(--edge);top:94px;width:155px;max-width:155px;gap:7px}#social-tools button{font-size:10px;padding:8px 11px;min-height:36px}#social-status{font-size:8px;line-height:1.7}
 .dock{bottom:max(18px,env(safe-area-inset-bottom));left:16px;transform:none;width:auto;min-width:0;padding:5px;gap:0}.dock button{font-size:12px;padding:10px 14px;gap:8px}.dock kbd{display:none}.dock svg{width:18px;height:18px}
 .options-button{right:16px;bottom:max(18px,env(safe-area-inset-bottom));padding:13px;font-size:12px;min-height:54px}.options-button::before{content:none}.options-label,#fps{display:none}
 #modal-root{padding:10px}.modal{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:20px;border-radius:22px}.modal-title{font-size:17px;letter-spacing:.5px}.modal-title small{font-size:8px;letter-spacing:2px}
 #time-modal{padding:20px;width:560px}.time-layout{grid-template-columns:1fr;gap:20px;padding-top:14px}.clock-column{width:min(100%,280px);margin:auto}.clock-step{margin-top:0}.time-settings{width:100%}
 .time-presets{grid-template-columns:repeat(4,1fr);gap:6px}.time-presets button{padding:10px 9px;font-size:12px}.time-presets button small{font-size:9px}.time-settings>.section-label{margin-bottom:10px}
 .time-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:14px 0}.time-actions label{flex-wrap:wrap;gap:6px}.time-actions select{max-width:100%;min-height:36px}.time-actions button{padding:9px;font-size:11px}
 .quality-setting{padding-top:10px}#time-modal .hint{font-size:9px;margin-top:10px}.map-layout{display:block;padding-top:12px}#floors button{padding:8px 10px;font-size:9px}
 #full-map{width:min(100%,calc(46dvh * 680 / 630));height:auto}.legend{flex-wrap:wrap;gap:7px;font-size:9px}#floor-hint{display:block;font-size:10px;line-height:1.6}
 aside{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:15px}#places{display:grid;grid-template-columns:1fr 1fr;gap:5px}#places button{font-size:11px;padding:8px 5px;margin:0;gap:8px}#place-detail{margin-top:12px;min-height:0;padding-top:5px}aside>small{display:none}
 .touch-buttons{right:19px;bottom:98px;flex-direction:column}#joystick{left:20px;bottom:103px;width:96px;height:96px}#joystick i{left:28px;top:28px}.touch-buttons button{width:44px;height:44px}
}
@media(max-height:600px) and (min-width:701px){
 :root{--edge:14px}.brand{height:55px;width:242px}.minimap-cluster{width:168px}.map-caption{margin:6px 10px}.clock-chip{margin-top:8px;min-height:36px;padding:7px 12px}.map-open-hint{bottom:9px}.map-north{top:7px}
 #social-tools{top:80px;max-width:450px}.intro{display:none}.time-layout{grid-template-columns:1fr 1fr;align-items:start;padding-top:12px;gap:22px}.clock-column{width:210px;margin:auto}#time-modal{width:680px;padding:20px 25px}.modal-title{font-size:17px;padding-bottom:12px}.time-presets button{padding:7px 12px}.time-actions{display:grid;grid-template-columns:1fr 1.2fr;margin:10px 0;gap:8px}.time-actions label{flex-wrap:wrap;gap:4px}.time-actions select{min-height:32px;padding:6px;font-size:10px}.time-actions button{padding:8px;font-size:10px}.quality-setting{padding-top:8px}#quality{min-height:32px;padding:7px 10px}#time-modal .hint{display:none}.clock-step{margin-top:0;gap:7px}#clock-help{font-size:8px}#time-value{font-size:36px}
 .dock button{padding:9px 17px}.options-button{padding:12px}.map-layout{grid-template-columns:1.2fr 1fr}.map-main>small{font-size:9px}#places button{padding:5px;font-size:11px;min-height:35px}#place-detail{min-height:0;margin-top:8px}#full-map{width:min(100%,calc(58dvh * 680 / 630))}
}
@media(max-width:370px){.minimap-cluster{width:151px}.brand{width:205px}.dock button{padding:10px 10px}.time-presets button{padding:9px 6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){*{scrollbar-color:auto}.panel,#avatar-dialog,#chat-panel .chat-card{background:Canvas;border:1px solid CanvasText}button{border-color:ButtonText}}
@supports not (backdrop-filter:blur(1px)){.panel,#avatar-dialog,#social-tools button,#talk-nearby,#chat-panel .chat-card{background:rgba(27,40,41,.92)}}
#lift-prompt:not([hidden]) ~ #talk-nearby{display:none}
body:has(#lift-prompt:not([hidden])) #talk-nearby{display:none}