/* Local motion study: basalt, limestone, and the existing URUK orange. */
.spirit-welcome{position:absolute;inset:0;min-height:100svh;overflow:auto;background:#141210}
.welcome-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,#63381c20,transparent 53%)}
.welcome-title{position:absolute;inset-inline:20px;top:clamp(100px,16svh,155px);margin:0;color:var(--ink);text-align:center;font-size:clamp(40px,5.5vw,76px);text-wrap:balance}
.welcome-title em{color:#f5e8d0}
.welcome-name-form{position:absolute;top:calc(47svh + clamp(80px,14svh,115px) + 34px);left:50%;translate:-50% 0;width:min(390px,calc(100% - 48px));text-align:center}
.welcome-name-label{display:block;margin-bottom:18px;color:#e4e2d4;font-size:16px;font-weight:300}
.welcome-name-row{display:flex;gap:22px;align-items:center;border-bottom:1px solid #e4e2d45c;transition:border-color 160ms}
.welcome-name-row:focus-within{border-color:#fe6722}
.welcome-name-input{min-width:0;flex:1;min-height:52px;padding:0 2px;color:#f1efe6;background:transparent;border:0;border-radius:0;outline-offset:6px;caret-color:#fe6722;font:inherit;font-size:19px;font-weight:300}
.welcome-name-input::placeholder{color:#b0a79c}
.welcome-enter{display:flex;align-items:center;gap:18px;min-height:48px;padding:0 2px 0 12px;border:0;background:transparent;color:#f1efe6;font:inherit;font-size:13px;cursor:pointer}
.welcome-enter-icon{display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#fe6722;transition:transform 160ms cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.welcome-enter:hover .welcome-enter-icon{transform:translateX(2px)}}
.welcome-enter:active{transform:scale(.97)}
.welcome-enter:disabled{opacity:.5;cursor:wait}
.welcome-note{max-width:34ch;margin:18px auto 8px;color:#b8afa4;font-size:13px;line-height:1.5;text-wrap:balance}
.welcome-skip{border:0;background:none;color:#b8afa4;padding:8px 4px;min-height:44px;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.welcome-skip:hover{color:#f1efe6}
.welcome-name-error{color:#f4a394;font-size:13px;margin:12px 0}
body[data-spirit-active] ::selection{background:#fe67224d;color:#fff}
body[data-scene="landing"][data-spirit-active] .guide.orb{--spirit-size:clamp(160px,28svh,230px);position:fixed;top:calc(47svh - var(--spirit-size)/2);bottom:auto;left:calc(50% - var(--spirit-size)/2);right:auto;inset-inline:calc(50% - var(--spirit-size)/2) auto;margin:0;width:var(--spirit-size);height:var(--spirit-size);max-height:none;overflow:visible;display:block;pointer-events:none}
body[data-scene="landing"][data-spirit-active] .guide.orb .guide-orb{width:100%;height:100%;pointer-events:auto}
body[data-scene="landing"][data-spirit-active] .guide > :not(.guide-orb),body[data-scene="landing"][data-spirit-active] .top :is(#sections,.top-actions){display:none!important}
body[data-spirit-active] .guide.spirit-ready .guide-orb{border:0;box-shadow:none;background:transparent}
body[data-spirit-active] .guide-plate{animation:spirit-breathe 6.8s ease-in-out infinite}
@keyframes spirit-breathe{0%,100%{translate:0 4px;rotate:-1deg}50%{translate:0 -5px;rotate:1deg}}
/* Restore the actual guide in the map-only preview; listening has its own override below. */
body[data-city-map-only][data-spirit-active] #guide{display:block!important;visibility:visible;position:fixed;left:18px;right:auto;top:auto;bottom:24px;inset-inline:18px auto;margin:0;width:108px;height:108px;pointer-events:none}
body[data-city-map-only][data-spirit-active] #guide .guide-orb{width:108px;height:108px;position:relative;inset:auto;pointer-events:auto}
body[data-city-map-only][data-spirit-active] #guide > :not(.guide-orb){display:none!important}
body[data-city-map-only][data-spirit-active] .city-map-sigil{display:none}
body[data-city-map-only][data-spirit-active] .top-actions{display:none!important}
body[data-spirit-still] .guide-plate{animation:none}
@media(max-width:700px){
 .welcome-title{top:max(96px,14svh);font-size:clamp(35px,8.5vw,48px)}
 .welcome-name-form{top:calc(47svh + clamp(80px,14svh,115px) + 26px)}
 .welcome-name-label{font-size:15px}
 body[data-city-map-only][data-spirit-active] #guide{left:8px;inset-inline:8px auto;bottom:26px;width:88px;height:88px}
 body[data-city-map-only][data-spirit-active] #guide .guide-orb{width:88px;height:88px}
 body[data-city-home-open] #interest-btn{visibility:hidden}
 body[data-city-home-open][data-spirit-active]:not(.listening) #guide{visibility:hidden}
}
@media(max-height:600px){
 .welcome-title{top:80px;font-size:40px}
 body[data-scene="landing"][data-spirit-active] .guide.orb{--spirit-size:145px;top:155px}
 .welcome-name-form{top:315px}
 .welcome-name-label{margin-bottom:8px}
 .welcome-note{margin-top:10px}
 .spirit-welcome{min-height:530px}
}
@media(prefers-reduced-motion:reduce){.guide-plate{animation:none!important}.welcome-enter-icon{transition:none}.welcome-enter:hover .welcome-enter-icon{transform:none}}
/* The same conversation stays usable when the docked guide is opened. */
body[data-city-map-only][data-spirit-active] #guide.centre{display:grid!important;grid-template-columns:minmax(0,1fr);row-gap:14px;left:0;right:0;inset-inline:0;top:50%;bottom:auto;translate:0 -50%;width:min(520px,calc(100% - 36px));height:auto;max-height:90svh;overflow:auto;margin-inline:auto;padding:22px;background:#141210f5;border:1px solid #d3b88f40;border-radius:18px;pointer-events:auto;z-index:88}
body[data-city-map-only][data-spirit-active] #guide.centre .guide-orb{width:min(220px,50vw);height:min(220px,50vw)}
body[data-city-map-only][data-spirit-active] #guide.centre > .guide-line{display:block!important;grid-column:1;text-align:center}
body[data-city-map-only][data-spirit-active] #guide.centre > .chips,body[data-city-map-only][data-spirit-active] #guide.centre > form.ask{display:flex!important;grid-column:1;width:100%}
body[data-city-map-only][data-spirit-active] #guide.centre > .guide-slot:not([hidden]){display:block!important;grid-column:1}
body[data-city-home-open][data-spirit-active] #interest-btn{visibility:hidden}