body.visitor-mode{grid-template-columns:1fr}
body.visitor-mode>aside,body.visitor-mode #toggle-panel,body.visitor-mode #perf,body.visitor-mode #diagnostics,body.visitor-mode #status,body.visitor-mode #launch-probe,body.visitor-mode #preset-summary,body.visitor-mode #render-size{display:none!important}
/* Shared panel system: places, photo, settings, help and sharing. */
.visitor-dialog,#share-dialog{width:min(570px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--ui-border);border-radius:12px;box-shadow:0 16px 60px var(--shadow);overflow:auto;overscroll-behavior:contain}
:is(.visitor-dialog,#share-dialog)::backdrop{background:rgb(5 10 17 / 45%)}
.visitor-dialog>header,#share-dialog>.row{display:flex;align-items:center;gap:16px;padding:23px 25px 20px;border-bottom:1px solid var(--ui-border);background:var(--surface-1)}
.visitor-dialog>header{position:sticky;top:0;z-index:2}.visitor-heading{flex:1}.visitor-heading .eyebrow{font-size:9px;margin-bottom:6px}.visitor-dialog h2,#share-dialog h2{margin:0;color:var(--text-heading);font-size:25px;flex:1}
.visitor-dialog>header button,#share-close{border:0;background:transparent;font-size:26px;line-height:1;width:40px;padding:0;flex:none}.visitor-dialog>header button:hover,#share-close:hover{background:var(--ui-hover)}
.visitor-content{padding:22px 25px 26px}.visitor-intro{margin:0 0 22px;font-size:14px;line-height:1.6}
#visitor-places{width:min(1260px,calc(100% - 32px));height:min(900px,calc(100dvh - 36px));max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden!important}#visitor-places>header{flex:none;padding:18px 24px 14px}#visitor-places .visitor-content{flex:1;min-height:0;padding:16px 24px 20px;overflow:hidden!important;display:flex;flex-direction:column}#visitor-places #controls-places{flex:1;min-height:0;height:100%;display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:stretch;max-width:100%;margin:0}#visitor-places .places-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:2px;overflow-y:auto;scrollbar-width:thin}#visitor-places .places-sidebar .ui-field{margin:0}#visitor-places .places-sidebar select{width:100%}#visitor-places .places-sidebar .field-help{margin:0;text-align:left;font-size:12px;line-height:1.45;color:var(--text-muted)}#visitor-places .places-sidebar .control-group{margin:4px 0 0;border:1px solid var(--ui-border);border-radius:8px;background:var(--surface-2);padding:0;overflow:hidden}#visitor-places .places-sidebar .control-group summary{padding:10px 14px;font-weight:600;font-size:13px;cursor:pointer;user-select:none;background:color-mix(in srgb,var(--surface-2) 90%,transparent)}#visitor-places .places-sidebar .control-group-body{padding:12px 14px 14px}#visitor-places .places-sidebar .text-link{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12.5px;color:var(--accent);text-decoration:none}#visitor-places .places-sidebar .text-link:hover{text-decoration:underline}#visitor-places .places-map-wrap{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;min-height:0;height:100%}#visitor-places .places-map-toolbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}#visitor-places .places-zoom-controls{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--ui-border);border-radius:8px;padding:3px 6px}#visitor-places .places-zoom-controls button{background:transparent;border:0;color:var(--text-primary);font-size:14px;font-weight:700;width:26px;height:26px;border-radius:4px;display:grid;place-items:center;cursor:pointer;padding:0}#visitor-places .places-zoom-controls button:hover{background:var(--ui-hover);color:var(--accent)}#visitor-places #map-zoom-level{font-size:11.5px;font-weight:650;min-width:44px;text-align:center;color:var(--text-heading);font-variant-numeric:tabular-nums}#visitor-places .places-zoom-controls .preset-pill,#visitor-places #map-center-player{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;border:1px solid var(--ui-border);background:var(--surface-2);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;width:auto;height:auto}#visitor-places .places-zoom-controls .preset-pill:hover,#visitor-places #map-center-player:hover{border-color:var(--accent);color:var(--text-heading);background:var(--ui-hover)}#visitor-places .places-zoom-controls .preset-pill.active{background:var(--ui-selected);border-color:var(--accent);color:var(--accent)}#visitor-places .places-map-viewport{flex:1;min-height:0;height:100%;position:relative;width:100%;overflow:auto;border:1px solid var(--ui-border);border-radius:10px;background:#090e15;cursor:grab;box-shadow:inset 0 2px 12px rgba(0,0,0,0.55),0 4px 20px rgba(0,0,0,0.35);scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-2)}#visitor-places .places-map-viewport:active{cursor:grabbing}#visitor-places #map{display:block;width:1812px;height:2620px;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:transparent;user-select:none;-webkit-user-drag:none;touch-action:pan-x pan-y}aside .places-sidebar{display:contents}aside .places-sidebar .ui-field{order:1}aside .places-map-wrap{order:2}aside .places-sidebar .field-help{order:3}aside .places-sidebar .control-group{order:4}aside .places-sidebar .text-link{order:5}aside #controls-places{display:flex;flex-direction:column;gap:10px}aside .places-map-toolbar{display:none}aside .places-map-viewport{overflow:visible;height:auto;max-height:none;border:0;background:transparent;box-shadow:none}aside #map{width:100%!important;max-width:320px!important;aspect-ratio:1812 / 2620!important;height:auto!important;max-height:440px!important;margin:18px auto 8px!important;border:1px solid var(--ui-border)!important;border-radius:8px!important;background:var(--bg)!important;box-shadow:0 4px 18px rgba(0,0,0,0.3)!important}.visitor-dialog #map{width:100%;max-width:320px;aspect-ratio:1812 / 2620;height:auto;max-height:440px;margin:18px auto 8px;display:block;border:1px solid var(--ui-border);border-radius:8px;background:var(--bg);cursor:crosshair;box-shadow:0 4px 18px rgba(0,0,0,0.3)}.visitor-dialog .text-link{display:inline-block;margin-top:22px;font-size:13px;text-decoration:none}.visitor-dialog .text-link:hover{text-decoration:underline}.visitor-dialog #controls-places .field-help{margin-top:12px;text-align:center}
.panel-tabs{display:flex;gap:3px;padding:0 24px;border-bottom:1px solid var(--ui-border);background:var(--surface-1);overflow-x:auto}.panel-tabs button{flex:1;white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;padding:13px 10px;font-size:13px;font-weight:600;color:var(--text-muted)}
.panel-tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--text-heading)}.panel-tabs button:hover{background:var(--ui-hover);color:var(--text-primary)}.panel-tabs button:focus-visible{outline-offset:-3px}
#visitor-settings .visitor-content{padding-top:22px}.settings-footer{margin-top:24px;padding-top:20px;border-top:1px solid var(--ui-border);display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-footer p{font-size:11px;margin:0}.settings-footer button{font-size:12px}
.visitor-dialog .dev-setting{margin-top:25px;padding-top:20px;border-top:1px solid var(--ui-border)}#visitor-stop{background:transparent}#controls-storage>.row{flex-wrap:wrap}#controls-storage>.row button{flex:1;font-size:12px}#cache-status{font-size:11px;overflow-wrap:anywhere}
#visitor-photo{width:380px;max-width:calc(100% - 32px);margin:0;inset:calc(var(--hud-top) + var(--hud-height) + 12px) 16px 16px auto;max-height:calc(100dvh - var(--hud-top) - var(--hud-height) - 28px)}
#visitor-photo::backdrop{background:transparent}#visitor-photo .visitor-content{padding:0}#visitor-photo>header{padding:20px 22px 18px}#visitor-photo #photo-panel{padding:0;border:0;margin:0}#visitor-photo #photo-panel>summary{display:none}#visitor-photo .panel-tabs{padding:0 16px}
#photo-panel [data-photo-page]{padding:22px}aside #photo-panel [data-photo-page]{padding:16px 0 0}aside #photo-panel .panel-tabs{padding:0}
#photo-panel .photo-footer{position:sticky;bottom:0;z-index:1;border-top:1px solid var(--ui-border);padding:20px 22px;background:var(--surface-2)}aside #photo-panel .photo-footer{position:static;padding:16px 0;background:none}
.photo-footer .row{flex-wrap:wrap}.photo-footer button{flex:1;font-size:12px;padding-inline:8px}.photo-footer p{font-size:11px}.photo-footer p:empty{display:none}#photo-download{display:block;margin-top:13px;font-size:13px}#photo-status{color:var(--text-muted)}#capture-status{color:var(--success);overflow-wrap:anywhere}
#zoom{width:0;flex:1}#zoom-reset{font-size:12px}#focus-number{width:86px!important;flex:none;font-variant-numeric:tabular-nums;padding:7px}
#audio-panel{margin:0;padding:0;border:0}#audio-panel>summary{cursor:pointer;font-weight:600;font-size:14px;padding:14px 0}#visitor-settings #audio-panel>summary{display:none}#audio-panel label{margin-top:18px}#audio-status{padding-top:15px;border-top:1px solid var(--ui-border);font-size:12px;color:var(--text-muted)}.audio-debug{font:10px ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}body.visitor-mode .audio-debug{display:none}
#share-dialog{padding:0 25px 24px}#share-dialog>.row{margin:0 -25px 20px}#share-dialog>p{font-size:14px;margin-bottom:23px}#share-dialog>label{margin-top:16px}#share-url{font-size:12px}#share-dialog .share-actions{margin-top:18px}#share-dialog #share-status{font-size:12px;margin:12px 0 0}
#visitor-help dl{display:grid;grid-template-columns:1fr auto;gap:14px;margin:0;color:var(--text-secondary);font-size:14px}#visitor-help dd{margin:0;text-align:right}#visitor-help h3{margin-top:28px;font-size:16px}
/* Character dossier: tall by design, compact enough to keep common loot lists in view. */
#npc-target{position:absolute;top:calc(var(--hud-top,12px) + var(--hud-height,58px) + 12px);right:16px;bottom:16px;box-sizing:border-box;width:min(480px,calc(100% - 32px));overflow-y:auto;scrollbar-width:thin;padding:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-1) 84%,transparent),color-mix(in srgb,var(--surface-1) 78%,transparent));-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);border:1px solid var(--ui-border);border-radius:14px;box-shadow:0 14px 50px var(--shadow);color:var(--text-primary);z-index:6;overscroll-behavior:contain;animation:target-card-in .18s ease-out}
#npc-target[hidden]{display:none}#npc-target .target-close{position:absolute;right:8px;top:8px;z-index:2;width:36px;min-height:36px;padding:0;border:0;background:rgb(8 13 20 / 38%);border-radius:50%;font-size:24px;font-weight:400;color:var(--text-primary)}#npc-target .target-close:hover{background:var(--ui-hover)}
#npc-target .target-hero{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;padding:2px 30px 16px 0;border-bottom:1px solid var(--ui-border)}
#npc-target .target-portrait{position:relative;display:grid;place-items:center;width:92px;height:108px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--ui-border));border-radius:9px;background:radial-gradient(circle at 50% 25%,rgb(176 137 64 / 24%),transparent 55%),var(--surface-2);box-shadow:inset 0 0 24px rgb(0 0 0 / 20%)}
#npc-target .target-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#npc-target .target-photo-fallback{font:600 30px/1 Cinzel,Georgia,serif;color:color-mix(in srgb,var(--accent) 70%,var(--text-muted))}
#npc-target .target-identity{min-width:0}#npc-target .target-badges{display:flex;align-items:center;gap:7px;margin-bottom:9px}#npc-target .target-level,#npc-target .target-kind{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:999px;font-size:10px;line-height:1;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
#npc-target .target-level{color:#18120a;background:linear-gradient(135deg,#ead08a,#b88d3b);box-shadow:0 2px 12px rgb(181 134 47 / 22%)}#npc-target .target-kind{color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--ui-border)}#npc-target .target-kind[data-kind=monster]{color:#efc0b1;border-color:rgb(194 91 61 / 45%);background:rgb(132 47 33 / 18%)}#npc-target .target-kind[data-kind=raid-boss],#npc-target .target-kind[data-kind=grand-boss]{color:#ffd0b5;border-color:rgb(222 92 46 / 60%);background:rgb(156 45 24 / 28%)}
#npc-target .target-name{display:block;padding:0;font:500 23px/1.2 Cinzel,Georgia,serif;color:var(--text-heading);overflow-wrap:anywhere}#npc-target .target-info{display:block;margin-top:7px;font-size:11px;color:var(--text-muted);overflow-wrap:anywhere}
#npc-target .target-link{display:block;margin-top:14px;padding:10px 12px;background:var(--ui-selected);border:1px solid var(--ui-border);border-radius:7px;color:var(--text-heading);font-size:12px;text-align:center;text-decoration:none;font-weight:650}#npc-target .target-link:hover{border-color:var(--accent);background:var(--ui-hover)}#npc-target .target-link span{display:inline;margin-left:4px}
#npc-target .target-loading{display:block;min-height:16px;margin-top:8px;font-size:11px;color:var(--text-muted)}#npc-target .target-loading:empty{min-height:0;margin:0}#npc-target .target-retry{margin-top:9px}
.target-details{min-width:0}.target-vitals{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 10px}.target-vital{padding:9px 10px;border:1px solid var(--ui-border);border-radius:8px;background:color-mix(in srgb,var(--surface-2) 82%,transparent)}.target-vital>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.target-vital-name{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--text-secondary)}.target-vital>div>strong{display:flex;align-items:baseline;gap:4px;font:700 12px/1 Source Sans 3,system-ui,sans-serif;color:var(--text-heading);font-variant-numeric:tabular-nums}.target-vital>div>strong small{font-size:8px;letter-spacing:.05em;color:var(--text-muted)}
.target-vital-track{height:5px;margin-top:7px;overflow:hidden;border-radius:99px;background:rgb(0 0 0 / 28%)}.target-vital-fill{display:block;width:100%;height:100%;border-radius:inherit}.target-vital-hp .target-vital-fill{background:linear-gradient(90deg,#a73333,#e26957);box-shadow:0 0 9px rgb(218 77 61 / 35%)}.target-vital-mp .target-vital-fill{background:linear-gradient(90deg,#315aa2,#5d91e3);box-shadow:0 0 9px rgb(77 130 218 / 35%)}
.target-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}.target-stats>div{min-width:0;padding:7px 8px;border:1px solid color-mix(in srgb,var(--ui-border) 75%,transparent);border-radius:7px;background:color-mix(in srgb,var(--surface-2) 65%,transparent)}.target-stats dt{display:flex;align-items:center;gap:5px;min-width:0;color:var(--text-muted);font-size:9px;line-height:1.2;white-space:nowrap}.target-stats dd{margin:4px 0 0 21px;color:var(--text-primary);font-size:12px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.target-stat-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;color:var(--accent)}.target-stat-icon svg{display:block;width:100%;height:100%}
.target-places{display:flex;align-items:flex-start;gap:7px;margin:8px 0 3px;padding:8px 10px;border-radius:7px;background:var(--surface-2);font-size:11px;line-height:1.35;color:var(--text-secondary)}.target-places .target-stat-icon{margin-top:-1px}.target-places>span:last-child{min-width:0;overflow-wrap:anywhere}
@keyframes target-card-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:780px){#visitor-places{width:calc(100% - 16px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);overflow:hidden!important}#visitor-places .visitor-content{padding:12px 14px;overflow:hidden!important}#visitor-places #controls-places{display:flex;flex-direction:column;gap:10px;height:100%}#visitor-places .places-sidebar{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;flex:none}#visitor-places .places-sidebar .ui-field{flex:1;min-width:180px;margin:0}#visitor-places .places-sidebar .field-help{display:none}#visitor-places .places-sidebar .control-group{display:none}#visitor-places .places-sidebar .text-link{display:none}#visitor-places .places-map-wrap{flex:1;min-height:0;height:100%}#visitor-places .places-map-viewport{flex:1;min-height:0;height:100%}.visitor-dialog,#share-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 32px)}.visitor-dialog>header,#share-dialog>.row{padding:19px 20px 17px}.visitor-content{padding:20px}.panel-tabs{padding:0 12px}.panel-tabs button{font-size:13px;padding:12px 8px;min-height:44px}#visitor-photo{inset:16px 12px auto;margin:0 auto;width:calc(100% - 24px);max-width:430px;max-height:calc(100dvh - 32px)}#visitor-photo::backdrop{background:rgb(5 10 17 / 20%)}#photo-panel [data-photo-page]{padding:20px}.visitor-dialog #map{max-height:340px;max-width:260px}.visitor-dialog h2,#share-dialog h2{font-size:24px}#npc-target{top:76px;right:10px;bottom:172px;width:min(480px,calc(100% - 20px));padding:14px}#npc-target .target-hero{grid-template-columns:76px minmax(0,1fr);gap:12px}#npc-target .target-portrait{width:76px;height:90px}#npc-target .target-name{font-size:20px}.target-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-footer{flex-wrap:wrap}#visitor-help dl{font-size:13px;gap:12px}}
@media(max-width:420px){.target-vitals{grid-template-columns:1fr}.target-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#npc-target .target-loot-list{grid-template-columns:1fr}}
@media(max-height:540px){.visitor-dialog,#share-dialog{max-height:calc(100dvh - 24px)}#visitor-photo{top:12px;max-height:calc(100dvh - 24px)}#npc-target{top:72px;bottom:12px}}
@media(prefers-reduced-motion:reduce){#npc-target{animation:none}}

/* Details are loaded on selection, independent of movement and pointer lock. */
.target-reticle{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border:1px solid #ece7dd;border-radius:50%;box-shadow:0 0 0 1px #090f17aa;pointer-events:none;z-index:4}
.target-reticle[hidden]{display:none}
#npc-target .target-related-section,#npc-target .target-skills{margin:8px 0 0;color:var(--text-secondary);font-size:11px}#npc-target .target-related-section>summary,#npc-target .target-skills>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:7px 1px;border-top:1px solid var(--ui-border);color:var(--text-heading);font-size:12px;font-weight:700}#npc-target .target-related-section>summary::-webkit-details-marker,#npc-target .target-skills>summary::-webkit-details-marker{display:none}#npc-target .target-related-section>summary::after,#npc-target .target-skills>summary::after{content:'+';font-size:17px;font-weight:400;color:var(--text-muted)}#npc-target details[open]>summary::after{content:'−'}
#npc-target .target-loot-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;margin:3px 0 9px}#npc-target .target-loot-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;min-width:0;min-height:52px;padding:7px;border:1px solid color-mix(in srgb,var(--ui-border) 80%,transparent);border-radius:8px;background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
#npc-target .target-loot-art{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:1px solid var(--ui-border);border-radius:6px;background:rgb(4 8 13 / 35%)}#npc-target .target-loot-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto}#npc-target .target-loot-fallback{font:600 16px/1 Cinzel,Georgia,serif;color:var(--text-muted)}#npc-target .target-loot-content{display:flex;flex-direction:column;justify-content:center;min-width:0}#npc-target .target-loot-content>a,#npc-target .target-loot-content>span:first-child{display:-webkit-box;color:var(--text-heading);font-size:11px;font-weight:650;line-height:1.2;text-decoration:none;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}#npc-target .target-loot-content>a:hover{text-decoration:underline}
#npc-target .target-loot-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;margin-top:5px}#npc-target .target-loot-meta small{min-width:0;color:var(--text-muted);font-size:9px;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#npc-target .target-loot-meta strong{flex:none;padding:3px 5px;border-radius:999px;background:rgb(173 132 55 / 16%);color:color-mix(in srgb,var(--accent) 75%,var(--text-heading));font:700 9px/1 Source Sans 3,system-ui,sans-serif;font-variant-numeric:tabular-nums}
/* Gatekeeper Teleports Panel */
#npc-target .target-teleports-panel{margin:10px 0 8px;padding:10px 10px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--ui-border));border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface-1) 96%,transparent));box-shadow:0 4px 18px var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}
#npc-target .target-tp-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--ui-border) 80%,transparent)}
#npc-target .target-tp-title-group{display:flex;align-items:center;gap:8px;min-width:0}
#npc-target .target-tp-badge{display:inline-flex;align-items:center;gap:6px;color:var(--text-heading);font-family:Cinzel,Georgia,serif;font-size:12px;font-weight:700;letter-spacing:.02em}
#npc-target .target-tp-badge svg{color:var(--accent);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 60%,transparent));flex:none}
#npc-target .target-tp-count{font-size:9.5px;font-weight:650;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));color:color-mix(in srgb,var(--accent-strong) 85%,var(--text-heading));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);white-space:nowrap}
#npc-target .target-tp-search-wrap{position:relative;display:flex;align-items:center;width:125px;flex:none}
#npc-target .target-tp-search-icon{position:absolute;left:7px;pointer-events:none;display:flex;align-items:center;color:var(--text-muted)}
#npc-target .target-tp-search-input{width:100%;min-height:26px!important;height:26px;padding:2px 6px 2px 24px!important;font-size:11px!important;border-radius:6px!important;border:1px solid var(--ui-border)!important;background:color-mix(in srgb,var(--surface-1) 85%,black)!important;color:var(--text-primary)!important;transition:border-color .15s,box-shadow .15s}
#npc-target .target-tp-search-input:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 6px color-mix(in srgb,var(--accent) 40%,transparent)}
#npc-target .target-tp-search-input::placeholder{color:var(--text-muted);opacity:.75}
#npc-target .target-tp-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:2px 1px 2px 0;margin:0;max-height:240px;overflow-y:auto;scrollbar-width:thin}
#npc-target .target-tp-card{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;align-items:center;gap:7px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--ui-border) 70%,transparent);border-radius:7px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);cursor:pointer;user-select:none;transition:transform .12s ease,border-color .12s ease,background-color .12s ease,box-shadow .12s ease}
#npc-target .target-tp-card:hover,#npc-target .target-tp-card:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--surface-3) 90%,transparent);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.35),0 0 8px color-mix(in srgb,var(--accent) 25%,transparent);outline:none}
#npc-target .target-tp-card:active{transform:translateY(0);background:color-mix(in srgb,var(--ui-selected) 80%,var(--surface-2))}
#npc-target .target-tp-art{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),rgb(5 10 16 / 40%);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--ui-border));color:var(--accent);flex:none;transition:border-color .15s,color .15s}
#npc-target .target-tp-card:hover .target-tp-art{border-color:var(--accent-strong);color:var(--accent-strong)}
#npc-target .target-tp-content{display:flex;flex-direction:column;justify-content:center;min-width:0}
#npc-target .target-tp-name{display:block;font-size:11px;font-weight:650;line-height:1.2;color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#npc-target .target-tp-card:hover .target-tp-name{color:#fff}
#npc-target .target-tp-cost{display:flex;align-items:center;gap:3.5px;margin-top:2px;min-width:0;font-size:10px;font-weight:700;line-height:1;color:color-mix(in srgb,var(--accent-strong) 90%,var(--text-primary));font-variant-numeric:tabular-nums}
#npc-target .target-adena-coin{width:12px;height:12px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#npc-target .target-tp-cost small{font-size:8px;font-weight:500;color:var(--text-muted)}
#npc-target .target-tp-free-badge{display:inline-block;padding:1px 5px;border-radius:4px;background:color-mix(in srgb,var(--success) 22%,transparent);border:1px solid color-mix(in srgb,var(--success) 40%,transparent);color:var(--success);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#npc-target .target-tp-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-muted);opacity:.45;transition:opacity .15s,transform .15s,color .15s}
#npc-target .target-tp-card:hover .target-tp-arrow{opacity:1;color:var(--accent-strong);transform:translateX(2px)}
#npc-target .target-tp-empty{padding:18px 10px;text-align:center;font-size:11px;color:var(--text-muted);font-style:italic}
@media(max-width:420px){#npc-target .target-tp-grid{grid-template-columns:1fr}}

#npc-target .target-quest-list,#npc-target .target-skills ul{list-style:none;padding:0;margin:3px 0 9px}#npc-target .target-quest-list li,#npc-target .target-skills li{margin:0;padding:7px 2px;border-bottom:1px solid var(--ui-border)}#npc-target .target-quest-list a{color:var(--text-heading);font-size:11px;text-decoration:none;overflow-wrap:anywhere}#npc-target .target-quest-list a:hover{text-decoration:underline}#npc-target .target-quest-list small{display:block;margin-top:2px;color:var(--text-muted);font-size:9px;line-height:1.4}
/* A 1080p screen leaves roughly 890-970 CSS pixels once browser chrome is visible. */
@media (min-width:761px) and (max-height:1050px){
  #npc-target{padding:14px}
  #npc-target .target-hero{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:0 28px 10px 0}
  #npc-target .target-portrait{width:82px;height:88px}
  #npc-target .target-badges{margin-bottom:6px}
  #npc-target .target-name{font-size:21px}
  #npc-target .target-info{margin-top:4px}
  .target-vitals{gap:7px;margin:9px 0 7px}
  .target-vital{padding:7px 8px}
  .target-vital-track{margin-top:5px}
  .target-stats{gap:4px;margin-bottom:7px}
  .target-stats>div{padding:5px 7px}
  .target-stats dd{margin:3px 0 0 20px}
  .target-places{margin:5px 0 1px;padding:6px 8px}
  #npc-target .target-related-section,#npc-target .target-skills{margin-top:4px}
  #npc-target .target-related-section>summary,#npc-target .target-skills>summary{min-height:30px;padding:4px 1px}
    #npc-target .target-tp-grid{max-height:200px;gap:5px}
  #npc-target .target-tp-card{padding:5px 7px}
  #npc-target .target-tp-name{font-size:10.5px}
  #npc-target .target-loot-list{gap:4px;margin:2px 0 5px}
  #npc-target .target-loot-row{box-sizing:border-box;grid-template-columns:36px minmax(0,1fr);gap:6px;min-height:48px;padding:5px}
  #npc-target .target-loot-art{width:36px;height:36px}
  #npc-target .target-loot-content>a,#npc-target .target-loot-content>span:first-child{font-size:10.5px;line-height:1.15}
  #npc-target .target-loot-meta{margin-top:3px}
  #npc-target .target-loot-meta strong{padding:2px 4px}
  #npc-target .target-link{margin-top:8px;padding:8px 10px}
}
@media (min-width:761px){
  #npc-target{top:auto;bottom:16px;max-height:calc(100dvh - var(--hud-top,12px) - var(--hud-height,58px) - 28px)}
}
#share-preview{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:contain;border-radius:8px;margin:0 0 18px}#share-preview[hidden]{display:none}

#multiplayer-badge{position:absolute;left:16px;top:calc(var(--hud-top,16px) + var(--hud-height,64px) + 12px);z-index:4;min-height:32px;padding:5px 12px;border:1px solid var(--ui-border);border-radius:999px;background:var(--surface-1);color:var(--text-secondary);font:600 12px/1.5 "Source Sans 3",sans-serif;box-shadow:0 3px 18px var(--shadow)}
#multiplayer-badge[data-state="online"]{color:var(--success)}
#multiplayer-status{padding-top:16px;border-top:1px solid var(--ui-border);color:var(--text-secondary);font-size:13px}

#launch-nickname{box-sizing:border-box;display:block;width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);font:inherit}
#launch-nickname:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#nickname-help{margin:6px 0 16px;font-size:12px}#nickname-error{color:var(--danger,#e79886);font-size:13px;margin:6px 0 12px}
#explorer-chat{position:absolute;inset:0;z-index:5;pointer-events:none;font:14px/1.4 "Source Sans 3",system-ui,sans-serif}
#explorer-chat.is-typing{z-index:8}#explorer-chat[hidden],#explorer-chat [hidden]{display:none!important}
#explorer-chat .chat-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#explorer-chat .chat-bubble{position:absolute;left:0;top:0;box-sizing:border-box;max-width:240px;min-width:70px;padding:9px 13px;border:1px solid rgb(232 214 171 / 55%);border-radius:12px;background:rgb(13 22 32 / 94%);color:#f5f2e9;text-align:center;box-shadow:0 4px 20px rgb(0 0 0 / 30%);overflow-wrap:anywhere;will-change:transform}
#explorer-chat .chat-bubble:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 6px);width:12px;height:12px;transform:rotate(45deg);background:#18222e;border-right:1px solid rgb(232 214 171 / 55%);border-bottom:1px solid rgb(232 214 171 / 55%)}
#explorer-chat .chat-bubble strong{display:block;margin-bottom:3px;color:#e6c689;font-size:11px;font-weight:650}#explorer-chat .chat-bubble span{display:block;font-size:14px;line-height:1.35}
#explorer-chat .chat-toggle{position:absolute;left:16px;bottom:68px;pointer-events:auto;padding:6px 12px;min-height:34px;border:1px solid var(--ui-border);border-radius:8px;background:var(--surface-1);color:var(--text-secondary);font:inherit}
#explorer-chat .chat-toggle kbd{margin-left:8px;color:var(--text-muted);font-size:11px}#explorer-chat .chat-toggle:disabled{opacity:.55;cursor:default}
#explorer-chat .chat-composer{position:absolute;left:16px;bottom:68px;width:min(430px,calc(100% - 32px));box-sizing:border-box;padding:12px;pointer-events:auto;background:color-mix(in srgb,var(--surface-1) 94%,transparent);border:1px solid var(--ui-border);border-radius:10px;box-shadow:0 6px 25px var(--shadow)}
#explorer-chat .chat-composer>label{display:block;margin-bottom:6px;color:var(--accent);font-size:12px;font-weight:650}#explorer-chat .chat-entry{display:flex;gap:7px;align-items:center}#explorer-chat .chat-entry input{flex:1;min-width:0;box-sizing:border-box;min-height:38px;border:1px solid var(--ui-border);border-radius:6px;background:var(--surface-2);color:var(--text-primary);padding:7px 10px;font:16px/1.4 "Source Sans 3",system-ui,sans-serif}
#explorer-chat .chat-entry button{padding:7px 10px;min-height:38px;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-selected);color:var(--text-primary);font:inherit}#explorer-chat .chat-composer small{display:block;margin-top:7px;color:var(--text-muted);font-size:11px}
#explorer-chat .chat-notice{position:absolute;left:16px;bottom:110px;margin:0;box-sizing:border-box;max-width:min(430px,calc(100% - 32px));padding:8px 12px;border:1px solid var(--ui-border);border-radius:8px;color:var(--text-primary);background:var(--surface-1);overflow-wrap:anywhere}
#explorer-chat.is-typing .chat-notice{display:none}
#explorer-chat .chat-notice :is(.chat-copy-location,.chat-copy-value){pointer-events:auto}

/* ─── Chat history log ─── */
#explorer-chat .chat-log{max-height:180px;overflow-y:auto;scrollbar-width:thin;margin-bottom:10px;padding:8px 10px;border:1px solid var(--ui-border);border-radius:8px;background:color-mix(in srgb,var(--surface-2) 85%,transparent);overscroll-behavior:contain}
#explorer-chat .chat-log:empty{display:none}
#explorer-chat .chat-log-entry{padding:3px 0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
#explorer-chat .chat-log-entry+.chat-log-entry{border-top:1px solid color-mix(in srgb,var(--ui-border) 40%,transparent)}
#explorer-chat .chat-log-time{color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
#explorer-chat .chat-log-name{color:#e6c689;font-size:12px;font-weight:650}
#explorer-chat .chat-log-text{color:var(--text-primary)}
#explorer-chat .chat-log-location .chat-log-name{color:var(--text-heading)}
#explorer-chat .chat-location-result{display:flex;align-items:center;gap:8px;margin-top:2px}
#explorer-chat .chat-location-result .chat-log-text{flex:1;min-width:0;font-variant-numeric:tabular-nums}
#explorer-chat .chat-copy-location{display:inline-grid;place-items:center;flex:none;width:32px;min-height:32px;padding:6px;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-selected);color:var(--text-heading);cursor:pointer}
#explorer-chat .chat-copy-location:hover{border-color:var(--accent);background:var(--surface-3)}
#explorer-chat .chat-copy-location:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
#explorer-chat .chat-copy-location svg{width:16px;height:16px}
#explorer-chat .chat-copy-status{display:block;margin-top:3px;font-size:11px;color:var(--text-secondary)}
#explorer-chat .chat-copy-value{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:6px;border:1px solid var(--ui-border);border-radius:6px;background:var(--surface-2);color:var(--text-primary);font:13px/1.5 ui-monospace,monospace;resize:vertical}
#explorer-chat .chat-badge{display:inline-block;padding:1px 6px;margin:0 4px;border-radius:999px;background:var(--accent);color:#0c1722;font-size:11px;font-weight:700;line-height:1.2}
#explorer-chat .chat-log-notice{font-style:italic;opacity:.85}
#explorer-chat .chat-log-notice .chat-log-name{color:var(--text-muted)}
#explorer-chat .chat-log-notice .chat-log-text{color:var(--text-secondary)}

/* ─── Immersive mode: hide all UI overlays ─── */
body.immersive-mode #photo-toolbar,
body.immersive-mode #quick-toolbar,
body.immersive-mode #multiplayer-badge,
body.immersive-mode #walk-status,
body.immersive-mode #toolbar-status,
body.immersive-mode #perf,
body.immersive-mode #control-bar,
body.immersive-mode #toggle-panel,
body.immersive-mode #explorer-chat .chat-toggle,
body.immersive-mode #npc-target,
body.immersive-mode #touch-move{
  opacity:0!important;pointer-events:none!important;transition:opacity .3s ease
}
body:not(.immersive-mode) #photo-toolbar,
body:not(.immersive-mode) #quick-toolbar,
body:not(.immersive-mode) #multiplayer-badge,
body:not(.immersive-mode) #control-bar{
  transition:opacity .3s ease
}
/* Keep chat composer usable even in immersive mode */
body.immersive-mode #explorer-chat.is-typing .chat-composer{opacity:1;pointer-events:auto}

/* ─── Zone indicator in top banner ─── */
#zone-indicator{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 14px;
  margin-left:4px;
  border:1px solid rgb(232 214 171 / 25%);
  border-radius:999px;
  background:rgb(24 34 46 / 75%);
  color:#e6c689;
  font:600 13px/1.4 "Cinzel",Georgia,serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 8%), 0 2px 10px rgb(0 0 0 / 25%);
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
  pointer-events:none;
}
#zone-indicator::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent,#d4a359);
  box-shadow:0 0 8px var(--accent,#d4a359);
  flex:none;
}
#zone-indicator .zone-name{
  font-weight:600;
  color:#e6c689;
}
#zone-indicator .zone-parent{
  display:inline-block;
  font:600 10.5px/1.2 "Source Sans 3",system-ui,sans-serif;
  color:var(--text-muted,rgb(160 175 195));
  text-transform:uppercase;
  letter-spacing:.12em;
  padding-left:8px;
  border-left:1px solid rgb(232 214 171 / 30%);
}
#zone-indicator.zone-visible{opacity:1;transform:scale(1)}
#zone-indicator.zone-hidden{opacity:0;transform:scale(.95)}
#zone-indicator:empty{display:none}

/* ─── Layout: text menu (Places, Photo, Settings) to the right next to Screenshot ─── */
@media(min-width:761px){
  #photo-toolbar .main-actions{margin-left:auto}
  #photo-toolbar .view-actions{margin-left:8px}
}

@media(max-width:1120px){
  #zone-indicator{font-size:12px;padding:4px 10px;margin-left:0}
}
@media(max-width:760px){
  #explorer-chat .chat-toggle,#explorer-chat .chat-composer{left:12px;bottom:180px}
  #explorer-chat .chat-notice{left:12px;bottom:300px}
  #explorer-chat .chat-bubble{max-width:180px}
  #explorer-chat .chat-log{max-height:130px}
  #zone-indicator{
    grid-column:1/-1;
    justify-self:center;
    order:1.5;
    font-size:11px;
    padding:3px 10px;
    margin:2px 0;
  }
}
@media(prefers-reduced-transparency:reduce){#npc-target{background:var(--surface-1);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ─── Keybindings customization styles ─── */
.keybindings-field{margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-border)}
.keybindings-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.keybindings-header label{margin:0;font-weight:600;font-size:13px;color:var(--text-heading)}
.keybindings-presets{display:flex;gap:5px;align-items:center}
.preset-pill{border:1px solid var(--ui-border);background:var(--surface-2);color:var(--text-secondary);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.preset-pill:hover{background:var(--ui-hover);color:var(--text-heading);border-color:var(--accent)}
.keybindings-table{display:flex;flex-direction:column;gap:5px;margin:8px 0 10px}
.keybind-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:7px;background:color-mix(in srgb,var(--surface-2) 65%,transparent);border:1px solid color-mix(in srgb,var(--ui-border) 70%,transparent)}
.keybind-row:hover{background:var(--surface-2);border-color:var(--ui-border)}
.keybind-name{font-size:12px;color:var(--text-primary);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keybind-slots{display:flex;align-items:center;gap:6px;flex:none}
.keybind-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 8px;border-radius:5px;border:1px solid var(--ui-border);background:var(--surface-1);color:var(--text-heading);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:11.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:all .15s}
.keybind-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--ui-hover)}
.keybind-btn.is-recording{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--surface-1));color:var(--accent-strong);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent);animation:keybind-pulse 1.2s infinite alternate}
.keybind-btn.is-empty{color:var(--text-muted);border-style:dashed}
@keyframes keybind-pulse{from{border-color:var(--accent);opacity:1}to{border-color:var(--accent-strong);opacity:.65}}
#keybindings-status{font-size:11px;color:var(--text-muted);margin:6px 0 0;min-height:16px}

/* ─── Places, Photo & Settings navbar icons ─── */
#places-toggle .places-icon,
#photo-toggle .photo-icon,
#settings-toggle .settings-icon{
  width:20px;
  height:20px;
  border-radius:3px;
  object-fit:cover;
  flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
  vertical-align:middle;
  transition:transform .15s ease;
}
#places-toggle:hover .places-icon,
#places-toggle[aria-expanded=true] .places-icon,
#photo-toggle:hover .photo-icon,
#photo-toggle[aria-expanded=true] .photo-icon,
#settings-toggle:hover .settings-icon,
#settings-toggle[aria-expanded=true] .settings-icon{
  transform:scale(1.08);
}

/* World time uses the same controls in both chronicles. */
.world-time-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.world-time-heading label{margin:0}.world-time-heading input{width:128px;flex:none;font-variant-numeric:tabular-nums}.world-time-scale{display:flex;justify-content:space-between;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}

.world-time-field input[type="range"]{display:block;width:100%;margin-inline:0;box-sizing:border-box}
