:root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#26344a;background:#17233b;font-size:15px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:linear-gradient(145deg,#17233b,#243a53);padding:14px}header,.town-card,aside,.feed{background:#f7f2e8;border:1px solid #ddcfb8;border-radius:16px;box-shadow:0 10px 30px #07111e55}header{display:flex;align-items:center;gap:20px;padding:10px 16px;margin-bottom:12px}header>div:first-child{display:flex;align-items:baseline;gap:9px;white-space:nowrap}.logo{font-size:28px}header strong{font-size:22px}header small{color:#7c6d5b}.clock{display:flex;flex:1;align-items:center;justify-content:center;gap:14px}.clock span{background:#e4d8c3;border-radius:999px;padding:5px 10px;color:#6c5943}.clock b{font-size:18px}button{border:0;border-radius:8px;background:#334c66;color:white;padding:8px 11px;cursor:pointer;font:inherit}button:hover{background:#466987}nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}main{display:grid;grid-template-columns:minmax(620px,1fr) 390px;gap:12px;height:calc(100vh - 278px);min-height:510px}.town-card{padding:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#dceac8}canvas{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;cursor:pointer}aside{overflow:auto;padding:16px}.empty{height:100%;display:grid;place-items:center;color:#7c6d5b;text-align:center;padding:40px}.agent-head{display:flex;gap:12px;align-items:center}.agent-head h1{margin:0}.agent-head p{margin:4px 0;color:#6f7480}#avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#e7dbc5}.tabs{display:flex;gap:5px;margin:14px 0}.tabs button{background:#ddd1bc;color:#4c5565;flex:1}.tabs button.active{background:#334c66;color:#fff}h2{font-size:17px;margin:0 0 8px}.block{border-top:1px solid #e2d6c1;padding:10px 0}.block h3{font-size:14px;margin:0 0 6px;color:#7b5e42}.thought{background:#eee8f6;border-left:4px solid #886fb1;padding:12px;border-radius:8px;font-style:italic}.memory,.history{padding:9px 0;border-bottom:1px solid #eadfcd}.meta{font-size:12px;color:#85838a}.meter{display:grid;grid-template-columns:48px 1fr 40px;gap:8px;align-items:center;margin:7px 0}.meter i{height:7px;background:#d8d1c4;border-radius:8px;overflow:hidden}.meter i::after{content:"";display:block;height:100%;width:var(--value);background:#ef9f62}.feed{margin-top:12px;height:145px;padding:12px 16px;overflow:auto}.feed h2{position:sticky;top:-12px;background:#f7f2e8;padding:3px 0}.event{display:inline-block;margin:3px 12px 3px 0}.event time{color:#85838a;margin-right:6px}.conversation{color:#a25f86}.reflection{color:#6d5cae}.rare_event{color:#c0613d;font-weight:700}.recovery{color:#4f7c59}.warning{color:#b64b4b}dialog{border:0;border-radius:16px;width:min(560px,92vw);background:#f7f2e8;color:#26344a;padding:0;box-shadow:0 25px 80px #0008}dialog::backdrop{background:#10192cbf}dialog form{padding:24px;position:relative}dialog h2{font-size:22px}dialog label{display:block;margin:13px 0 5px;font-weight:600}dialog input{display:block;width:100%;padding:10px;border:1px solid #cdbfa8;border-radius:8px;margin-top:5px;font:inherit}.check{display:flex;gap:8px;align-items:center}.check input{width:auto;margin:0}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:10px 0 0}.close{position:absolute;right:14px;top:12px;background:transparent;color:#555;font-size:22px}output{display:block;color:#b64b4b;margin-top:8px}@media(max-width:980px){header{align-items:flex-start;flex-wrap:wrap}.clock{order:3;width:100%}main{grid-template-columns:1fr;height:auto}.town-card{height:58vw;min-height:420px}aside{height:520px}.feed{height:180px}}

.clock{gap:10px;flex-wrap:wrap}
.empty{display:block;height:auto;padding:0;text-align:left}.empty>p{color:#7c6d5b}.roster{display:grid;grid-template-columns:1fr 1fr;gap:8px}.resident-card{display:block;width:100%;background:#eee5d5;color:#26344a;text-align:left;padding:10px;border:1px solid #ded0b8}.resident-card:hover{background:#e2d4bc}.resident-card b,.resident-card small{display:block}.resident-card small{color:#777;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-roster{margin-top:10px;background:#ddd1bc;color:#4c5565;padding:6px 9px}
.facility-title{margin:18px 0 8px;padding-top:12px;border-top:1px solid #decfb6;color:#6e5136;font-size:14px}.place-roster{display:grid;grid-template-columns:1fr 1fr;gap:7px}.place-roster button{display:block;padding:9px;border:1px solid #c9b28b;background:#e6eddc;color:#40503d;text-align:left}.place-roster button:hover{background:#d6e4cb}.place-roster b,.place-roster small{display:block}.place-roster small{margin-top:3px;color:#73806d;font-size:10px}
.outing-profile{padding:7px 9px;border-radius:8px;background:#e8f0df;color:#526846;font-weight:650}.neighborhood-homes{line-height:1.7}
.incident-card{margin:4px 0;padding:12px;border:1px solid #d9aa8c;border-radius:11px;background:#fff0e5}.incident-card h3{color:#a84f32}.incident-card b,.incident-card small{display:block}.incident-card small{margin-top:7px;color:#7b5e42}
.collision-legend{position:absolute;left:20px;top:20px;z-index:2;display:flex;gap:10px;flex-wrap:wrap;max-width:390px;padding:7px 10px;border-radius:10px;background:#17233bde;color:#fff7df;font-size:11px;box-shadow:0 3px 12px #07111e66}.collision-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;border:2px solid;vertical-align:-2px}.collision-legend .agent-volume::before{border-radius:50%;border-color:#76dcff;background:#4cc9f024}.collision-legend .object-volume::before{border-color:#ff4f7d;background:#ff2d5538}.collision-legend .prop-volume::before{border-radius:50%;border-color:#ffd15c;background:#ffb0003d}.collision-legend .edge-volume::before{border-color:#a8f0ff;background:transparent}
.resident-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center}.resident-card-art{grid-row:1/3;width:42px;height:46px;border:1px solid #c8b797;border-radius:9px;background-color:#f8efd9;background-repeat:no-repeat;filter:drop-shadow(0 2px 1px #5b422a2b)}.resident-card b,.resident-card small{min-width:0}#avatar{background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #cbb897,0 2px 5px #3324172b}
.town-card{padding:9px;background:linear-gradient(145deg,#795638,#3f2e29);border-color:#a98254;box-shadow:0 14px 38px #07111e77,inset 0 0 0 2px #e6c98d55}canvas{border:2px solid #e6ca8e;border-radius:12px;box-shadow:inset 0 0 24px #16223166,0 4px 10px #17110b66;background:#3f2e29}header{background:linear-gradient(110deg,#fff8e9,#efe5d1)}
.town-card{position:relative}#town{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}#town.dragging{cursor:grabbing}.map-controls{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:5px;padding:6px;border:1px solid #ead39a99;border-radius:12px;background:#17233bd9;box-shadow:0 4px 14px #07111e66;z-index:2}.map-controls button{min-width:34px;height:34px;padding:4px 9px;background:#f7f2e8;color:#26344a;font-weight:700}.map-controls button:hover{background:#fff}.map-controls button.active{background:#6fc8df;color:#102b37}.map-controls #collision-toggle{min-width:68px}.map-controls output{min-width:48px;margin:0;color:#fff;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.map-hint{position:absolute;left:20px;bottom:20px;padding:6px 10px;border-radius:999px;background:#17233bbf;color:#fff7df;font-size:12px;pointer-events:none;box-shadow:0 2px 8px #07111e55}#town:focus-visible{outline:3px solid #ffe09b;outline-offset:-5px}
@media(max-width:680px){.map-controls{top:16px;right:16px}.map-hint{left:16px;bottom:16px}.map-controls button{min-width:32px;height:32px;padding:3px 7px}}
.influence-card{margin-top:4px;padding:12px;border:1px solid #d8c9ae;border-radius:12px;background:#fff9ed}.influence-card.used{background:#eef2e9}.influence-card p{margin:6px 0 10px;color:#6e6b65;font-size:13px;line-height:1.55}.influence-card select{width:100%;padding:9px;border:1px solid #cdbfa8;border-radius:8px;background:white;color:#26344a;font:inherit}.influence-card button{width:100%;margin-top:8px}.influence-card output{font-size:13px;line-height:1.5}

/* 小镇观察证：与地图的木框、羊皮纸和林地色彩使用同一套视觉语言。 */
.account-button{
  border:1px solid #9a6b38;
  background:linear-gradient(180deg,#f3d38b,#d9a753);
  color:#44301e;
  font-weight:750;
  box-shadow:inset 0 1px #fff1be,0 2px 0 #7b4f2d;
}
.account-button::before{content:"✦";margin-right:6px;color:#7d5127}
.account-button:hover{background:linear-gradient(180deg,#ffe4a5,#e7b966);color:#342315}
.account-button:active{transform:translateY(1px);box-shadow:inset 0 1px #fff1be,0 1px 0 #7b4f2d}

.auth-dialog{
  width:min(650px,94vw);
  max-height:min(820px,94vh);
  overflow:auto;
  border:1px solid #9e7546;
  border-radius:22px;
  padding:0;
  background:#ead7ad;
  color:#3d3023;
  box-shadow:0 30px 100px #090e18d9,0 0 0 7px #312319b3;
}
.auth-dialog::backdrop{
  background:radial-gradient(circle at 50% 38%,#273c49c4,#0c1422ed 72%);
  backdrop-filter:blur(3px);
}
.auth-dialog form{
  position:relative;
  overflow:hidden;
  padding:0 34px 22px;
  background:
    radial-gradient(circle at 15% 12%,#fff9dfd9 0 14%,transparent 35%),
    repeating-linear-gradient(0deg,#f7edcf 0,#f7edcf 27px,#efe0ba 28px);
  box-shadow:inset 0 0 0 2px #fff9db,inset 0 0 38px #b3864b47;
}
.auth-dialog form::before,.auth-dialog form::after{
  content:"";
  position:absolute;
  z-index:0;
  top:142px;
  bottom:20px;
  width:13px;
  border-radius:50%;
  background:repeating-linear-gradient(180deg,#8a6740 0 7px,#c69b60 8px 12px);
  opacity:.55;
}
.auth-dialog form::before{left:8px}
.auth-dialog form::after{right:8px}
.auth-dialog form>*{position:relative;z-index:1}
.auth-dialog .close{
  position:absolute;
  z-index:3;
  top:12px;
  right:13px;
  display:grid;
  width:36px;
  height:36px;
  padding:0;
  place-items:center;
  border:1px solid #e2bd72;
  border-radius:50%;
  background:#3d3127;
  color:#fff4d3;
  font:700 23px/1 Georgia,serif;
  box-shadow:0 2px 0 #1f1711;
}
.auth-dialog .close:hover{background:#62452f}
.auth-scene{
  height:102px;
  margin:0 -34px;
  padding:14px 38px;
  overflow:hidden;
  border-bottom:4px solid #b7864f;
  background:linear-gradient(180deg,#547383 0 45%,#8eaa91 46% 67%,#48694e 68%);
  color:#fff6c7;
  box-shadow:inset 0 -12px 20px #253c3185;
}
.auth-scene::before,.auth-scene::after{
  content:"";
  position:absolute;
  bottom:0;
  width:150px;
  height:32px;
  border-radius:60% 60% 0 0;
  background:#31503d;
}
.auth-scene::before{left:-20px}
.auth-scene::after{right:-32px;bottom:-6px;width:210px;height:45px;background:#294735}
.auth-scene-stars{font-size:16px;letter-spacing:5px;opacity:.9}
.auth-scene-house{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  font-size:56px;
  filter:drop-shadow(0 4px 0 #24372f);
}
.auth-scene-trees{
  position:absolute;
  right:70px;
  bottom:8px;
  z-index:1;
  color:#203e31;
  font:700 32px/1 Georgia,serif;
  letter-spacing:10px;
}
.auth-heading{
  display:block;
  margin:0 -2px;
  padding:23px 0 15px;
  border:0;
  border-bottom:1px dashed #b99562;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.auth-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#8b6137;
  font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:2px;
}
.auth-dialog h2{
  margin:0;
  color:#3b2d21;
  font:800 28px/1.25 ui-rounded,"PingFang SC",system-ui,sans-serif;
  letter-spacing:.5px;
}
.auth-heading p{max-width:410px;margin:8px 0 0;color:#665440;font-size:14px;line-height:1.7}
.auth-dialog .auth-quota{
  position:absolute;
  z-index:2;
  top:178px;
  right:34px;
  display:grid;
  grid-template-columns:auto auto;
  align-items:end;
  column-gap:5px;
  min-width:132px;
  padding:8px 11px 7px;
  transform:rotate(2deg);
  border:2px solid #8c5438;
  border-radius:5px;
  background:#f9e8bc;
  color:#76452f;
  box-shadow:0 2px 0 #c3985c;
}
.auth-quota span{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:1px}
.auth-quota strong{font:900 28px/.95 Georgia,serif}
.auth-quota small{padding-bottom:2px;font-size:11px;font-weight:700}
.auth-fields{display:grid;gap:2px;padding-top:9px}
.auth-dialog label{margin:9px 0 0;color:#4a3828;font-weight:750}
.auth-dialog label>span{display:block;margin-bottom:6px;font-size:13px}
.auth-dialog label b{
  display:inline-grid;
  width:24px;
  height:18px;
  margin-right:4px;
  place-items:center;
  border-radius:4px;
  background:#7e9a78;
  color:#fff9e1;
  font:800 10px/1 ui-monospace,monospace;
}
.auth-dialog input{
  height:46px;
  margin:0;
  padding:10px 12px;
  border:1px solid #b5966a;
  border-radius:8px;
  background:#fffdf3cc;
  color:#2f2d28;
  box-shadow:inset 0 2px 5px #7b5c2b1c,0 1px #fff;
}
.auth-dialog input::placeholder{color:#9d907f}
.auth-dialog input:focus{outline:3px solid #dfb65b66;border-color:#8c673c;background:#fffdf5}
.auth-dialog input:disabled{background:#e4dcc7;color:#817563}
.auth-dialog .auth-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.auth-dialog .auth-code-row label{margin-top:9px}
.auth-dialog .auth-code-row button{
  height:46px;
  margin:0;
  padding:8px 15px;
  border:1px solid #385143;
  background:linear-gradient(180deg,#6f9270,#527557);
  color:#fffbe7;
  font-weight:750;
  box-shadow:inset 0 1px #a9c19c,0 2px 0 #304737;
}
.auth-dialog .auth-code-row button:hover{background:linear-gradient(180deg,#7fa17e,#5e8362)}
.auth-dialog .auth-code-row button:disabled{opacity:.55;cursor:wait}
.auth-dialog .safety-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:17px;
  padding:12px 14px;
  border:1px solid #9db292;
  border-radius:10px;
  background:#e5ecd6d9;
  color:#46533e;
  box-shadow:inset 0 0 0 2px #f7f2d9;
}
.safety-seal{
  display:grid;
  flex:0 0 38px;
  width:38px;
  height:38px;
  place-items:center;
  border:2px solid #668063;
  border-radius:50%;
  color:#587252;
  font:800 16px/1 Georgia,serif;
  transform:rotate(-8deg);
}
.auth-dialog .safety-note strong{font-size:13px;color:#3e513c}
.auth-dialog .safety-note p{margin:3px 0 0;font-size:12px;line-height:1.55}
.auth-dialog output{
  min-height:20px;
  margin:11px 0 0;
  padding:7px 10px;
  border-left:3px solid #b76645;
  background:#f4dfc4a6;
  color:#944c36;
  font-size:12px;
  line-height:1.45;
}
.auth-dialog output:empty{display:none}
.auth-dialog menu{margin:10px 0 0;padding:10px 0 0;border-top:1px dashed #b99562}
.auth-dialog menu button{
  min-height:42px;
  border:1px solid #6f4528;
  background:linear-gradient(180deg,#9a663d,#75462a);
  color:#fff8dc;
  font-weight:750;
  box-shadow:inset 0 1px #ca9664,0 2px 0 #4d2f1d;
}
.auth-dialog menu button:hover{background:linear-gradient(180deg,#ad7548,#895333)}
.auth-dialog menu .auth-secondary{
  border-color:#a98a5d;
  background:#efe1bd;
  color:#675038;
  box-shadow:inset 0 1px #fff6d9,0 2px 0 #b79a6c;
}
.auth-dialog menu .auth-secondary:hover{background:#f8edce}
.auth-dialog menu .admin-link{display:inline-grid;min-height:42px;padding:8px 15px;place-items:center;border:1px solid #385143;border-radius:8px;background:linear-gradient(180deg,#6f9270,#527557);color:#fffbe7;font-weight:750;text-decoration:none;box-shadow:inset 0 1px #a9c19c,0 2px 0 #304737}
.auth-dialog menu .admin-link:hover{background:linear-gradient(180deg,#7fa17e,#5e8362)}
.auth-footnote{margin:13px 0 0;color:#927957;text-align:center;font:600 10px/1 ui-monospace,monospace;letter-spacing:1.2px}

@media(max-width:560px){
  .auth-dialog{width:96vw;max-height:96vh;border-radius:16px}
  .auth-dialog form{padding:0 19px 17px}
  .auth-dialog form::before,.auth-dialog form::after{display:none}
  .auth-scene{height:78px;margin:0 -19px;padding:11px 22px}
  .auth-scene-house{font-size:45px}
  .auth-scene-trees{right:37px;font-size:25px}
  .auth-heading{padding-top:17px}
  .auth-dialog h2{font-size:23px}
  .auth-heading p{font-size:13px;line-height:1.55}
  .auth-dialog .auth-quota{position:static;width:max-content;margin:0 0 2px auto;transform:translateY(-4px) rotate(1deg)}
  .auth-dialog .auth-code-row{grid-template-columns:1fr}
  .auth-dialog .auth-code-row button{width:100%}
  .auth-dialog .safety-note{gap:9px;margin-top:14px;padding:10px}
  .safety-seal{flex-basis:32px;width:32px;height:32px;font-size:13px}
  .auth-dialog menu{display:grid;grid-template-columns:1fr 1.35fr}
  .auth-dialog menu button{width:100%}
  .auth-dialog menu #sign-out:not([hidden]){grid-column:1/-1;grid-row:2}
  .auth-footnote{margin-top:11px}
}

/* 全站字体与生活场景卡片 */
:root{
  --font-ui:ui-rounded,"Hiragino Sans GB","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-story:"Kaiti SC","STKaiti","Songti SC",serif;
  font-family:var(--font-ui);
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:var(--font-ui)}
header strong,.agent-head h1,h2,h3,.resident-card b,.tabs button{font-family:var(--font-ui);letter-spacing:.02em}
header small,.meta,.auth-eyebrow,.auth-footnote{letter-spacing:.04em}
.thought{font-family:var(--font-story);font-size:16px;line-height:1.7}

.home-card{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:2px;
  padding:11px 12px;
  border:1px solid #d7be90;
  border-radius:12px;
  background:linear-gradient(135deg,#fff8e8,#eee1c6);
}
.home-card .home-pin{
  display:grid;
  flex:0 0 42px;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid #9c7044;
  border-radius:50% 50% 45% 45%;
  background:#a87045;
  color:#fff4d4;
  font-size:24px;
  box-shadow:inset 0 1px #d9ad78;
}
.home-card h3{margin:0 0 2px;color:#604226;font-size:14px}
.home-card p{margin:0;color:#7b674e;font-size:12px}
.home-card small{display:block;margin-top:3px;color:#8b765b;font-size:11px}

.interior-card{
  margin:10px 0 2px;
  padding:0;
  overflow:hidden;
  border:2px solid #8b633e;
  border-radius:13px;
  background:#ead8b3;
  box-shadow:inset 0 0 0 2px #fff3d3,0 4px 12px #4d32152b;
}
.interior-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  background:linear-gradient(110deg,#5e7b62,#3d5b49);
  color:#fff8dc;
}
.interior-title small{display:block;color:#d9e7cc;font-size:9px;letter-spacing:1.3px}
.interior-title h3{margin:2px 0 0;color:inherit;font-size:14px}
.interior-title em{padding:4px 8px;border:1px solid #bdd0ad;border-radius:999px;background:#f4efd61f;font-size:10px;font-style:normal}
.interior-levels{padding:7px 9px;background:linear-gradient(90deg,#d9ba83 0 6px,transparent 6px calc(100% - 6px),#d9ba83 calc(100% - 6px))}
.interior-level{
  display:grid;
  grid-template-columns:58px 1fr;
  min-height:44px;
  border:1px solid #b48a55;
  border-bottom:0;
  background:#fff5d9;
}
.interior-level:last-child{border-bottom:1px solid #b48a55}
.interior-level>b{display:grid;place-items:center;border-right:1px dashed #c4a272;background:#e7d0a6;color:#6d4c2d;font-size:10px}
.interior-level>div{display:flex;flex-wrap:wrap;gap:5px;align-content:center;padding:7px}
.interior-level span{padding:4px 6px;border-radius:5px;background:#e8eddb;color:#4f6048;font-size:10px}
.interior-occupants{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-top:1px solid #b48a55;background:#d5c097}
.interior-occupants span{padding:4px 7px;border:1px solid color-mix(in srgb,var(--resident,#7c6d5b),#fff 35%);border-radius:999px;background:#fff9e9;color:#5a4632;font-size:10px}
.interior-occupants .empty-room{border-color:#b49f7e;background:transparent;color:#806e58}
.interior-card.isometric_45 .interior-level{transform:skewY(-1deg);transform-origin:center}
.relationship-list ul{display:grid;gap:7px;padding:0;list-style:none}
.relationship-list li{padding:8px 9px;border:1px solid #dfd0b7;border-radius:9px;background:#fbf5e9}
.relationship-list li b,.relationship-list li small{display:block}
.relationship-list li small{margin-top:3px;color:#756d63;font-size:11px}

.place-head{display:flex;gap:11px;align-items:center;margin:13px 0 12px}
.place-head>span{display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;border-radius:14px;background:#4f7057;color:#fff4d7;font-size:26px;box-shadow:inset 0 0 0 2px #aac09a}
.place-head h1{margin:0;color:#3e3125;font-size:21px}
.place-head p{margin:4px 0 0;color:#80715f;font-size:12px}
.place-scene{overflow:hidden;padding:7px;border:2px solid #8d6741;border-radius:13px;background:linear-gradient(135deg,#d6b77e,#b58b53);box-shadow:inset 0 0 0 2px #f4dfac}
.place-level{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:50px;padding:8px;border:1px solid #b28b58;border-bottom:0;background:#fff2d1}
.place-level:last-child{border-bottom:1px solid #b28b58}
.place-level>b{width:100%;color:#694b2f;font-size:11px}
.place-level span{padding:5px 7px;border-radius:6px;background:#e4ead6;color:#4d5c46;font-size:11px}
.place-scene.side_cutaway .place-level:nth-child(even){margin-left:12px}
.place-scene.isometric_45{padding:16px 12px;background:linear-gradient(145deg,#7cab72,#4f7655)}
.place-scene.isometric_45 .place-level{transform:skewY(-2deg);border-color:#b9a76d;background:#eaf0cc}
.place-activities{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.place-activities span{padding:5px 8px;border-radius:999px;background:#e7ddc8;color:#6c5c48;font-size:10px}
.building-entry-hint{display:grid;gap:3px;margin:8px 0;padding:10px 11px;border:1px solid #b99a6d;border-radius:11px;background:#f5ead2;color:#5e4b35}
.building-entry-hint b{font-size:12px}
.building-entry-hint span{font-size:10px;color:#806b51}
.occupants{margin-top:8px}.occupant{display:grid;width:100%;grid-template-columns:10px 1fr;column-gap:8px;margin-top:6px;padding:8px 9px;text-align:left;background:#eee5d5;color:#4a4035;border:1px solid #d8c8ac}.occupant i{grid-row:1/3;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--resident)}.occupant b,.occupant small{display:block}.occupant small{margin-top:2px;color:#817665;font-size:10px}.place-empty{margin:7px 0;color:#807565;font-size:12px;line-height:1.5}

@media(max-width:680px){
  body{padding:8px}
  header{gap:8px;margin-bottom:9px;padding:10px 12px}
  header>div:first-child{width:100%;align-items:center}
  header>div:first-child small{flex:1;text-align:right}
  nav{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  nav button{width:100%;min-height:38px;padding:7px 6px;font-size:13px}
  nav #account{grid-column:span 2}
  .clock{gap:6px}
  .clock span{padding:4px 8px;font-size:12px}
  .clock b{width:100%;text-align:center;font-size:17px}
  main{gap:9px;min-height:0}
  .town-card{height:auto;min-height:0;aspect-ratio:3/2;padding:7px}
  aside{height:auto;min-height:420px;padding:14px}
  .feed{height:170px;margin-top:9px}
  .map-controls{top:14px;right:14px}
  .map-hint{left:14px;bottom:14px}
}

/* 建筑选中后进入服务器驱动的侧面剖视室内场景。 */
.open-interior{width:100%;margin:2px 0 10px;border:1px solid #6b4c2d;background:linear-gradient(180deg,#b17a42,#86542e);box-shadow:inset 0 1px #e8bd7d,0 2px 0 #57351f;font-weight:750}
.open-interior:hover{background:linear-gradient(180deg,#c68b50,#995f34)}
.interior-stage{
  position:absolute;
  inset:9px;
  z-index:4;
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:2px solid #e6ca8e;
  border-radius:12px;
  background:linear-gradient(180deg,#c8d9cf 0 15%,#9fb9a6 15% 17%,#73533b 17% 100%);
  box-shadow:inset 0 0 36px #182b235c;
  animation:interior-enter .22s ease-out;
}
@keyframes interior-enter{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.showing-interior .map-controls,.showing-interior .map-hint{display:none}
.interior-stage-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:0;
  padding:10px 13px;
  border:0;
  border-bottom:2px solid #91704d;
  border-radius:0;
  background:linear-gradient(180deg,#fff7dd,#dfc89c);
  box-shadow:0 3px 0 #4e3928aa;
}
.interior-stage-head button{background:#4e674f;white-space:nowrap}
.interior-stage-head small{display:block;color:#806b50;font-size:10px;letter-spacing:.08em}
.interior-stage-head h2{margin:2px 0 0;color:#3f3022;font-size:20px}
.interior-stage-head>span{padding:6px 9px;border:1px solid #a98555;border-radius:999px;background:#f7e8bf;color:#705334;font-size:11px;white-space:nowrap}
.interior-stage-scene{flex:1;min-height:0;padding:14px;overflow:auto;background:radial-gradient(circle at 50% 0,#f6e9c477,transparent 42%)}
.cutaway-building{width:min(920px,100%);margin:0 auto;border:7px solid #5a3f2d;border-top-width:11px;border-radius:8px 8px 3px 3px;background:#c39c68;box-shadow:0 9px 0 #38291f,0 16px 25px #22170e66,inset 0 0 0 2px #e5c28e}
.scene-floor{display:grid;grid-template-columns:62px minmax(0,1fr);min-height:142px;border-bottom:7px solid #5a3f2d}
.scene-floor:last-child{border-bottom:0}
.scene-floor>strong{display:grid;place-items:center;padding:5px;border-right:5px solid #5a3f2d;background:linear-gradient(90deg,#b98552,#d6ad77);color:#fff3d3;font-size:11px;writing-mode:vertical-rl;letter-spacing:.12em;text-shadow:0 1px #5a3f2d}
.scene-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));min-width:0}
.scene-room{position:relative;min-width:0;border-right:5px solid #5a3f2d;background:#f3dfb8}
.scene-room:last-child{border-right:0}
.scene-room h4{position:absolute;z-index:3;top:5px;left:7px;margin:0;padding:3px 7px;border-radius:999px;background:#5d4633d9;color:#fff7df;font-size:10px;font-weight:700}
.room-wall{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#f6ebd1 0 72%,#b98557 72% 77%,#9e6f48 77%);box-shadow:inset 0 0 18px #7b57312e}
.room-wall::after{content:"";position:absolute;inset:auto 0 0;height:24%;background:repeating-linear-gradient(90deg,#7e5638 0 18px,#9e7048 19px 36px);opacity:.46}
.window-light{position:absolute;top:30px;right:10px;width:28px;height:30px;border:4px solid #7a5738;background:linear-gradient(145deg,#cbe2df,#fff6c2);box-shadow:0 0 12px #f8e7a4aa}
.window-light::before,.window-light::after{content:"";position:absolute;background:#7a5738}.window-light::before{left:50%;top:0;width:2px;height:100%}.window-light::after{left:0;top:50%;width:100%;height:2px}
.scene-furniture{position:absolute;z-index:2;left:var(--x);bottom:calc(100% - var(--y));display:grid;width:42px;height:42px;place-items:end center;transform:translate(-50%,50%);color:#62462f;filter:drop-shadow(0 3px 1px #50351f42)}
.scene-furniture i{position:relative;display:block;width:34px;height:23px;border:3px solid #69482e;border-radius:3px;background:#b87843}
.furniture-sofa i{width:40px;height:20px;border-radius:8px 8px 3px 3px;background:#6f9270}.furniture-sofa i::before{content:"";position:absolute;left:3px;right:3px;top:7px;border-top:2px solid #4d684f}
.furniture-bed i,.furniture-medical_bed i{width:43px;height:16px;border-radius:3px;background:#d5b58b}.furniture-bed i::before,.furniture-medical_bed i::before{content:"";position:absolute;left:2px;top:2px;width:11px;height:7px;border-radius:3px;background:#f8ebd2}
.furniture-medical_bed i{background:#b9d6cc}
.furniture-wardrobe i,.furniture-cabinet i,.furniture-shelf i,.furniture-tool_rack i{width:27px;height:39px;background:#8a6040}.furniture-shelf i{background:repeating-linear-gradient(0deg,#7b593e 0 6px,#d5b075 7px 9px)}
.furniture-table i,.furniture-desk i,.furniture-school_desk i,.furniture-workbench i,.furniture-garden_table i,.furniture-counter i{height:12px;border-radius:2px;background:#b77a46}.furniture-table i::before,.furniture-desk i::before,.furniture-school_desk i::before,.furniture-workbench i::before,.furniture-garden_table i::before,.furniture-counter i::before{content:"";position:absolute;left:4px;right:4px;top:9px;height:18px;border-left:3px solid #69482e;border-right:3px solid #69482e}
.furniture-lamp i{width:5px;height:28px;border:0;background:#765337}.furniture-lamp i::before{content:"";position:absolute;left:-9px;top:-4px;width:23px;height:12px;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);background:#e5bd68}
.furniture-stove i{background:#75918a}.furniture-stove i::before{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;border:2px solid #3f554f;border-radius:50%;box-shadow:13px 0 #75918a,13px 0 0 2px #3f554f}
.furniture-board i{width:43px;height:28px;background:#54735c;border-color:#735032}.furniture-instrument i{width:23px;height:34px;border-radius:50% 50% 7px 7px;background:#a46c38}.furniture-easel i{width:29px;height:31px;background:linear-gradient(145deg,#cf877a,#6e8fa1)}
.furniture-plant i,.furniture-tree i{width:10px;height:15px;border-radius:2px;background:#8a5f3a}.furniture-plant i::before,.furniture-tree i::before{content:"";position:absolute;left:-12px;top:-20px;width:31px;height:26px;border-radius:50%;background:#678454;box-shadow:8px -7px #78945d}.furniture-tree i{height:22px}.furniture-tree i::before{transform:scale(1.25)}
.furniture-bench i{height:10px;background:#8d663e}.furniture-bench i::before{content:"";position:absolute;left:3px;right:3px;top:8px;height:15px;border-left:3px solid #65472f;border-right:3px solid #65472f}.furniture-play i{border-radius:50%;background:#d49a4c}.furniture-chair i{width:20px;height:22px;border-radius:3px;background:#a47348}
.scene-resident{position:absolute;z-index:4;left:var(--resident-x);bottom:1px;width:58px;height:68px;padding:0;transform:translateX(-50%);border:0;background:transparent;color:transparent;filter:none;will-change:transform}
.scene-resident::before{content:"";position:absolute;z-index:5;display:none;pointer-events:none}
.scene-resident::after{content:"";position:absolute;z-index:-1;left:50%;bottom:1px;width:32px;height:8px;border-radius:50%;background:#3f2b1c45;transform:translateX(-50%) scaleX(.9);filter:blur(1px)}
.scene-resident:hover,.scene-resident:focus-visible{background:transparent;outline:none}
.scene-resident:hover .scene-resident-art,.scene-resident:focus-visible .scene-resident-art{filter:drop-shadow(0 0 3px #fff5ca) drop-shadow(0 3px 2px #35231680);transform:translateX(-50%) scale(1.06)}
.scene-resident-art{position:absolute;left:50%;bottom:4px;display:block;width:46px;height:60px;transform:translateX(-50%);border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #35231666);transition:filter .15s,transform .15s}
.scene-resident-walking{animation:scene-resident-roam var(--walk-duration,5s) ease-in-out infinite alternate}
.scene-resident-walking .scene-resident-art{animation:scene-resident-step .48s ease-in-out infinite alternate}
.scene-resident-stationary .scene-resident-art{animation:scene-resident-breathe 2.8s ease-in-out infinite}
.scene-resident.pose-talk .scene-resident-art,.scene-resident.action-respond .scene-resident-art{animation:scene-resident-talk .72s ease-in-out infinite}
.scene-resident.pose-work .scene-resident-art{animation:scene-resident-work .62s ease-in-out infinite alternate}
.scene-resident.pose-craft .scene-resident-art{animation:scene-resident-craft .5s ease-in-out infinite alternate}
.scene-resident.pose-eat .scene-resident-art{animation:scene-resident-eat .9s ease-in-out infinite}
.scene-resident.pose-observe .scene-resident-art{animation:scene-resident-look 2.4s ease-in-out infinite}
.scene-resident.pose-read .scene-resident-art{animation:scene-resident-read 1.8s ease-in-out infinite}
.scene-resident.pose-fish .scene-resident-art,.scene-resident.pose-sit .scene-resident-art{animation:scene-resident-sit 2.2s ease-in-out infinite}
.scene-resident.pose-sleep .scene-resident-art{animation:scene-resident-sleep 3.2s ease-in-out infinite}
.scene-resident.pose-talk::before,.scene-resident.action-respond::before{display:block;right:1px;top:0;width:24px;height:15px;border-radius:8px;background:radial-gradient(circle at 6px 8px,#725c45 0 1.3px,transparent 1.7px),radial-gradient(circle at 12px 8px,#725c45 0 1.3px,transparent 1.7px),radial-gradient(circle at 18px 8px,#725c45 0 1.3px,transparent 1.7px),#fff8e8ed;box-shadow:0 2px 3px #4d352342;animation:scene-effect-pulse .8s ease-in-out infinite}
.scene-resident.pose-work::before,.scene-resident.pose-craft::before{display:block;right:1px;top:27px;width:5px;height:5px;transform:rotate(45deg);background:#ffe390;box-shadow:7px -7px #f2ba67,-5px -10px #fff0ad;animation:scene-effect-sparks .7s linear infinite}
.scene-resident.pose-eat::before{display:block;right:3px;top:14px;width:16px;height:21px;border-left:2px solid #fff2cfaa;border-right:2px solid #fff2cf88;border-radius:50%;animation:scene-effect-steam 1.5s ease-in-out infinite}
.scene-resident.pose-observe::before,.scene-resident.pose-read::before{display:block;right:2px;top:17px;width:10px;height:10px;background:linear-gradient(45deg,transparent 43%,#d5f4e5 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#d5f4e5 44% 56%,transparent 57%);animation:scene-effect-glint 1.8s ease-in-out infinite}
.scene-resident.pose-read::before{background:linear-gradient(45deg,transparent 43%,#ffe09d 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#ffe09d 44% 56%,transparent 57%)}
.scene-resident.pose-sit::before,.scene-resident.pose-sleep::before,.scene-resident.pose-fish::before{display:block;right:2px;top:8px;width:5px;height:5px;border:1px solid #e8f1d4aa;border-radius:50%;box-shadow:7px -8px 0 1px #e8f1d477;animation:scene-effect-drift 2.1s ease-in-out infinite}
@keyframes scene-resident-roam{from{transform:translateX(calc(-50% - 13px))}to{transform:translateX(calc(-50% + 13px))}}
@keyframes scene-resident-step{from{bottom:4px}to{bottom:7px}}
@keyframes scene-resident-breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.015,.99)}}
@keyframes scene-resident-talk{0%,100%{transform:translateX(-50%) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-1px) rotate(1.5deg)}}
@keyframes scene-resident-work{from{transform:translateX(-50%) rotate(-2deg) scale(1,.99)}to{transform:translateX(-50%) translateY(-2px) rotate(2.5deg) scale(1.02,.98)}}
@keyframes scene-resident-craft{from{transform:translateX(-50%) rotate(-4deg)}to{transform:translateX(-50%) translateY(-1px) rotate(4deg)}}
@keyframes scene-resident-eat{0%,100%{transform:translateX(-50%) rotate(0)}45%{transform:translateX(-50%) translateY(-2px) rotate(-1deg)}65%{transform:translateX(-50%) translateY(-1px) rotate(1deg)}}
@keyframes scene-resident-look{0%,100%{transform:translateX(-50%) rotate(-2.5deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@keyframes scene-resident-read{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.99,1.015)}}
@keyframes scene-resident-sit{0%,100%{transform:translateX(-50%) translateY(7px) scale(1,.84)}50%{transform:translateX(-50%) translateY(6px) scale(1.015,.83)}}
@keyframes scene-resident-sleep{0%,100%{transform:translateX(-50%) translateY(9px) rotate(-4deg) scale(1,.8)}50%{transform:translateX(-50%) translateY(8px) rotate(-3deg) scale(1.02,.79)}}
@keyframes scene-effect-pulse{0%,100%{transform:scale(.94);opacity:.78}50%{transform:scale(1.04);opacity:1}}
@keyframes scene-effect-sparks{0%{transform:rotate(45deg) scale(.7);opacity:.45}50%{transform:rotate(135deg) scale(1.1);opacity:1}100%{transform:rotate(225deg) scale(.7);opacity:.45}}
@keyframes scene-effect-steam{0%{transform:translateY(5px) scale(.75);opacity:0}45%{opacity:.85}100%{transform:translateY(-7px) scale(1.1);opacity:0}}
@keyframes scene-effect-glint{0%,65%,100%{transform:scale(.55);opacity:.28}78%{transform:scale(1.25);opacity:1}}
@keyframes scene-effect-drift{0%{transform:translateY(5px);opacity:.25}55%{opacity:.8}100%{transform:translateY(-7px);opacity:0}}
.cutaway-building.isometric_45{transform:perspective(900px) rotateX(3deg);border-color:#496242;background:#6e925f}
.cutaway-building.isometric_45 .scene-floor>strong{background:#5e7e55}.cutaway-building.isometric_45 .room-wall{background:linear-gradient(180deg,#dce9c4 0 65%,#789761 66%)}
.interior-stage-scene>footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:min(920px,100%);margin:17px auto 0;padding:8px 10px;border:1px solid #8f6c46;border-radius:9px;background:#f4e4becf;color:#654a31}
.interior-stage-scene>footer b{margin-right:5px;font-size:11px}.interior-stage-scene>footer span{padding:4px 7px;border-radius:999px;background:#6b855f;color:#fff8df;font-size:9px}

@media(max-width:680px){
  .town-card.showing-interior{height:680px;min-height:680px;aspect-ratio:auto}
  .interior-stage{inset:7px}
  .interior-stage-head{grid-template-columns:auto 1fr;gap:7px;padding:8px}
  .interior-stage-head button{padding:7px;font-size:12px}
  .interior-stage-head h2{font-size:16px}
  .interior-stage-head>span{grid-column:1/-1;justify-self:start}
  .interior-stage-scene{padding:9px}
  .scene-floor{grid-template-columns:38px 1fr;min-height:132px}
  .scene-floor>strong{font-size:9px}
  .scene-rooms{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .scene-furniture{transform:translate(-50%,50%) scale(.86)}
}

/* Mobile play surface: safe areas, thumb-sized controls and an in-context detail sheet. */
@media(pointer:coarse){
  button,.back-roster,.auth-dialog menu button,.auth-dialog .admin-link{min-height:44px}
  input,select{min-height:46px;font-size:16px}
  .map-controls button{min-width:44px;height:44px}
}

@media(max-width:680px){
  body{
    min-height:100dvh;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-right:max(8px,env(safe-area-inset-right));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
    padding-left:max(8px,env(safe-area-inset-left));
  }
  body.mobile-detail-open{overflow:hidden}
  body.mobile-detail-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:8;
    background:#0b1321a6;
    backdrop-filter:blur(2px);
  }
  header{position:relative;z-index:3}
  header strong{font-size:19px}
  header small{font-size:10px}
  .logo{font-size:24px}
  nav{display:block}
  nav #account{width:100%;min-height:44px}
  main{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;height:auto}
  .town-card{
    width:100%;
    height:clamp(340px,55dvh,520px);
    min-height:340px;
    aspect-ratio:auto;
    touch-action:none;
  }
  .map-controls{top:12px;right:12px;gap:4px;padding:5px}
  .map-controls output{min-width:42px}
  .map-hint{right:12px;bottom:12px;left:12px;text-align:center;font-size:11px}
  aside{height:auto;min-height:0;max-height:none;overscroll-behavior:contain}
  body.mobile-detail-open aside{
    position:fixed;
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
    left:max(8px,env(safe-area-inset-left));
    z-index:10;
    height:min(72dvh,640px);
    min-height:0;
    padding:22px 14px 14px;
    border-radius:20px 20px 14px 14px;
    box-shadow:0 24px 70px #050a12cc;
    animation:mobile-sheet-in .2s ease-out;
  }
  body.mobile-detail-open aside::before{
    content:"";
    position:sticky;
    top:-15px;
    z-index:4;
    display:block;
    width:42px;
    height:5px;
    margin:-10px auto 5px;
    border-radius:999px;
    background:#b7a991;
  }
  .back-roster{margin-top:8px;min-width:120px}
  .tabs{
    position:sticky;
    top:-8px;
    z-index:3;
    margin:12px -4px 8px;
    padding:5px 4px;
    background:#f7f2e8f2;
    backdrop-filter:blur(6px);
  }
  .tabs button{min-height:44px;padding:7px 4px}
  .resident-card,.place-roster button,.occupant{min-height:58px}
  .feed{height:150px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .auth-dialog{max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
  .auth-dialog form{padding-bottom:max(17px,env(safe-area-inset-bottom))}
  .town-card.showing-interior{height:clamp(520px,78dvh,720px);min-height:520px}
}

@media(max-width:390px){
  .map-controls #collision-toggle{display:none}
  .map-controls{max-width:calc(100% - 24px)}
  .roster,.place-roster{grid-template-columns:1fr}
  .auth-dialog menu{grid-template-columns:1fr}
  .auth-dialog menu #sign-out:not([hidden]){grid-column:auto;grid-row:auto}
}

@keyframes mobile-sheet-in{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}