/* 美发街：全屏 3D，界面元素浮在画面上。颜色取自街景：石材米白、招牌墨绿、黄铜。 */
:root{
  --ink:#1f2a24; --muted:#5f685f; --paper:#fbf8f1; --line:#d9d2c2;
  --green:#2f4f44; --brass:#b8924a; --brass-ink:#85652a; --on-green:#ffffff; --glass:rgba(251,248,241,.9);
  --serif:"Noto Serif SC","Noto Serif CJK SC","Songti SC",serif;
  --sans:"Noto Sans SC","Noto Sans CJK SC","PingFang SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:#dcecf2;color:var(--ink);font:14px/1.5 var(--sans);-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0}
#scene canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
button,a{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.top{position:fixed;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.title{display:grid;gap:0;background:var(--glass);border-radius:12px;padding:8px 12px;box-shadow:0 2px 12px rgba(0,0,0,.1);backdrop-filter:blur(6px)}
.brand{font-size:12px;letter-spacing:.14em;color:var(--brass-ink);font-weight:700}
.title h1{margin:0;font:700 22px/1.2 var(--serif)}
.sub{font-size:12px;color:var(--muted)}
.round{pointer-events:auto;border:0;border-radius:999px;background:var(--glass);color:var(--ink);padding:9px 16px;box-shadow:0 2px 12px rgba(0,0,0,.12);cursor:pointer;backdrop-filter:blur(6px)}
.round.small{padding:4px 12px;box-shadow:none;border:1px solid var(--line)}

/* 铭牌：走近店铺时浮出，不挡路 */
.plate{position:fixed;left:50%;bottom:calc(132px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(340px,calc(100% - 32px));
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.14);backdrop-filter:blur(8px);text-align:center;animation:rise .25s ease-out}
.plate-city{font-size:12px;letter-spacing:.12em;color:var(--brass-ink);font-weight:700}
.plate-name{font:700 20px/1.3 var(--serif)}
.plate-en{font-size:12px;color:var(--muted)}
.plate-hours{font-size:12px;margin-top:4px}
.plate-link{display:inline-block;margin-top:8px;color:var(--green);font-weight:500}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.entering{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.entering svg{width:64px;height:64px;transform:rotate(-90deg)}
.entering circle{fill:none;stroke:rgba(255,255,255,.35);stroke-width:4}
.entering #ring{stroke:#fff;stroke-dasharray:119.4;stroke-dashoffset:119.4;stroke-linecap:round}
.entering span{font:700 16px var(--serif)}
.entering small{font-size:12px;opacity:.85}

.joy{position:fixed;left:max(24px,env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:116px;height:116px;border-radius:50%;
  background:rgba(251,248,241,.55);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(4px);touch-action:none}
.knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.hint{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0;max-width:52vw;text-align:right;font-size:12px;color:var(--muted);text-shadow:0 1px 6px rgba(255,255,255,.8);pointer-events:none}

.panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100%);background:var(--paper);box-shadow:-8px 0 30px rgba(0,0,0,.15);
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel h2{margin:0;font:700 18px var(--serif)}
.shops{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.shops button{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;display:grid;gap:1px}
.shops button:hover{border-color:var(--green)}
.shops b{font:700 15px var(--serif)}
.shops span{font-size:12px;color:var(--muted)}
.note{font-size:12px;color:var(--muted);margin:0}
.setting{display:grid;gap:6px;font-size:13px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;border:0;background:#fff;padding:7px 0;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--green);color:var(--on-green)}
.links{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.links a{color:var(--green)}

.guide{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(420px,calc(100% - 32px));
  background:var(--paper);border-radius:16px;padding:18px 18px 16px;box-shadow:0 10px 40px rgba(0,0,0,.2);display:grid;gap:8px}
.guide-face{width:40px;height:40px;border-radius:50%;background:var(--green);color:var(--on-green);display:grid;place-items:center;font-size:20px}
.guide h2{margin:0;font:700 18px var(--serif)}
.guide p{margin:0;color:var(--muted)}
.guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.guide-actions button,.guide-actions a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--ink);text-decoration:none}
.guide-actions .primary{background:var(--green);border-color:var(--green);color:var(--on-green)}

.fade{position:fixed;inset:0;background:#fbf8f1;opacity:0;pointer-events:none;transition:opacity .35s}
.fade.on{opacity:1}
.toast{position:fixed;left:50%;top:calc(80px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--green);color:var(--on-green);padding:7px 14px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

.fallback{position:fixed;inset:0;overflow:auto;background:var(--paper);padding:32px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.fallback h1{font:700 26px var(--serif);margin:0 0 6px}
.fallback li{margin:8px 0}

.shophud{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(380px,calc(100% - 32px));
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.14);backdrop-filter:blur(8px);text-align:center;display:grid;gap:2px}
.shophud-tag{font-size:12px;letter-spacing:.12em;color:var(--brass-ink);font-weight:700}
.shophud-name{font:700 19px/1.3 var(--serif)}
.shophud-sub{font-size:12px;color:var(--muted)}
.shophud-actions{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.shophud-actions a,.shophud-actions button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink);text-decoration:none;font-size:13px}
.shophud-actions .primary{background:var(--green);border-color:var(--green);color:var(--on-green)}
@media (max-width:600px){.shophud{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
@media (max-width:600px){.hint{display:none}.title h1{font-size:19px}}
@media (pointer:fine){.joy{opacity:.7}}
@media (prefers-reduced-motion:reduce){.fade,.toast{transition:none}.plate{animation:none}}

/* AI 居民名片 */
.rescard{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));width:min(300px,calc(100% - 32px));background:var(--glass);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;box-shadow:0 8px 28px rgba(0,0,0,.16);backdrop-filter:blur(8px);display:grid;gap:4px;animation:rise .2s ease-out}
.rescard #resClose{position:absolute;right:10px;top:10px}
.rescard-tag{font-size:12px;letter-spacing:.12em;color:var(--brass-ink);font-weight:700}
.rescard-name{font:700 20px/1.3 var(--serif);padding-right:30px}
.rescard-sub{font-size:12px;color:var(--muted)}
.rescard-state{font-size:13px;margin-top:2px}
.rescard-talk{display:flex;gap:6px;margin-top:8px}
.rescard-talk input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;background:#fff}
.rescard-talk button{border:0;border-radius:10px;background:var(--green);color:#fff;padding:8px 12px;cursor:pointer}
.rescard-links{display:flex;gap:12px;font-size:12px;margin-top:6px}
.rescard-links a{color:var(--green)}
.res-cta{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:#fff;border:1px dashed var(--brass);font-size:13px}
.res-cta .primary-link{color:var(--green);font-weight:700}
.shophud-owner{display:block;margin-top:10px;font-size:13px;color:var(--brass-ink);font-weight:700;text-decoration:underline}

/* Keep the forward view clear on desktop; each dock scrolls within its own bounds. */
.rescard{animation:none}
@media(min-width:800px){
 .plate{left:16px;top:104px;bottom:auto;transform:none;width:260px;text-align:left;animation:none;max-height:calc(100dvh - 240px);overflow:auto}
 .rescard{top:64px;width:300px;max-height:calc(100dvh - 90px);overflow:auto}
}
.rescard #resFold{position:absolute;right:52px;top:10px;font-size:12px}
.rescard-name{padding-right:100px}
.res-history{list-style:none;margin:12px 0;padding:0;max-height:170px;overflow:auto;overscroll-behavior:contain}
.res-history li{padding:8px 10px;margin:6px 0;border-radius:10px;background:#eee9df;white-space:pre-wrap;overflow-wrap:anywhere}
.res-history li[data-role="user"]{background:#dcece2}
.history-note{font-size:11px;color:var(--muted);margin:6px 0}
.history-note button{border:0;background:none;color:var(--green);text-decoration:underline;cursor:pointer}
@media(max-width:799px){.rescard{max-height:55dvh;overflow:auto}.res-history{max-height:100px}.plate{max-width:260px}.rescard:not([hidden])~.hint{display:none}}