/* ========== Virtual Life 等距 2.5D ========== */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; }
body {
  font-family:-apple-system,"PingFang SC","Segoe UI",Roboto,sans-serif;
  background:#9fd8f4; color:#2c3b23;
  user-select:none; -webkit-user-select:none;
}
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; border:none; }

/* 顶栏 */
#topbar {
  position:fixed; top:0; left:0; right:0; height:52px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border-bottom:2px solid #d9ead0;
}
.tb-left,.tb-right { display:flex; align-items:center; gap:10px; }
.logo { font-weight:800; font-size:15px; color:#4b8a2f; }
.res { font-size:12px; color:#7d8f73; background:#eef6e6; padding:3px 9px; border-radius:20px; }
.coins { font-size:13px; font-weight:700; color:#b8860b; }
.btn-ghost { background:#eef6e6; color:#4b8a2f; font-size:13px; font-weight:600; padding:7px 13px; border-radius:20px; }
.btn-ghost:active { transform:scale(.96); }

/* 街道舞台 */
.screen { position:fixed; inset:52px 0 0 0; }
#street { overflow:hidden; background:#9fd8f4; }
#stage { position:absolute; inset:0; overflow:hidden; }
#world {
  position:absolute; left:0; top:0;
  width:2400px; height:1200px;
  transform-origin:0 0;
  transition:transform .08s linear;
}
#ground { position:absolute; inset:0; width:2400px; height:1200px; display:block; }
#deco,#houses,#actors,#me { position:absolute; inset:0; }
#me,#actors { pointer-events:none; }

/* 等距房屋 */
.ih {
  position:absolute; width:300px; height:320px;
  transform-origin:bottom center; cursor:pointer;
  transition:filter .15s, transform .15s;
}
.ih img { width:100%; height:100%; display:block; pointer-events:none; }
.ih.empty { filter:grayscale(.8) brightness(1.08); opacity:.55; }
.ih:active { transform:translateY(-2px) scale(1.02); }
.ih .plate {
  position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  font-size:10px; font-weight:700; color:#fff; white-space:nowrap;
  background:#8cc43f; padding:2px 9px; border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.ih.empty .plate { background:#98a898; }
.ih .nm {
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  font-size:11px; color:#3f5236; white-space:nowrap;
  background:rgba(255,255,255,.9); padding:1px 8px; border-radius:9px;
}

/* 角色（带等距投影） */
.ia { position:absolute; width:88px; height:114px; transform-origin:bottom center; }
.ia img { width:100%; height:100%; display:block; pointer-events:none; }
.ia .tag {
  position:absolute; left:50%; top:-15px; transform:translateX(-50%);
  font-size:10px; color:#3d4b35; white-space:nowrap;
  background:rgba(255,255,255,.92); padding:1px 8px; border-radius:9px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
@keyframes ibob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.ia.walking img { animation:ibob .34s ease-in-out infinite; }
.ia.flip img { transform:scaleX(-1); }

/* 缩放按钮 */
.zoom { position:absolute; right:12px; bottom:74px; display:flex; flex-direction:column; gap:8px; }
.zoom button {
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92);
  color:#4b8a2f; font-size:19px; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}
.zoom button:active { transform:scale(.94); }

/* 提示 */
.tip {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  font-size:12px; color:#3d4b35; background:rgba(255,255,255,.88);
  padding:7px 15px; border-radius:20px; pointer-events:none;
  white-space:nowrap; transition:opacity .4s;
}
.tip.fade { opacity:0; }

/* ========== 等距房间 ========== */
#room { background:#f3ead9; display:flex; flex-direction:column; }
.room-head {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:#fff; border-bottom:2px solid #e5d8c0; flex:none; z-index:5;
}
.btn-back { background:none; color:#4b8a2f; font-size:14px; font-weight:700; padding:4px 6px; }
.room-title { font-size:14px; font-weight:700; flex:1; text-align:center; padding-right:48px; }

.room-stage { position:relative; flex:1; overflow:hidden;
  background:linear-gradient(#fdf6e8 0%, #f6edd9 100%); }
.iso-room {
  position:absolute; left:50%; top:52%;
  width:340px; height:340px;
  transform:translate(-50%,-50%) rotateX(56deg) rotateZ(45deg);
  transform-style:preserve-3d;
}
.iso-room .rf {
  position:absolute; inset:0; background:
    repeating-linear-gradient(0deg,#e6cba4 0 30px,#dfc094 30px 60px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 30px,transparent 30px 60px);
  border-radius:6px;
}
.iso-room .rw-l, .iso-room .rw-r {
  position:absolute; background:repeating-linear-gradient(90deg,#fbf3e2 0 22px,#f4e9d3 22px 44px);
  border:3px solid #d6c1a0;
}
.iso-room .rw-l {
  left:0; bottom:100%; width:100%; height:150px;
  transform-origin:bottom center; transform:rotateX(-90deg);
}
.iso-room .rw-r {
  left:100%; top:0; width:150px; height:100%;
  transform-origin:left center; transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg,#f3e7ce 0 22px,#ecdfc2 22px 44px);
}

/* 家具：反变换，始终正面朝向用户 */
.furn {
  position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; cursor:grab; touch-action:none;
  transform:rotateZ(-45deg) rotateX(-56deg);
  transform-style:preserve-3d;
  filter:drop-shadow(2px 4px 5px rgba(0,0,0,.28));
}
.furn:active { cursor:grabbing; }
.furn .del {
  position:absolute; top:-9px; right:-9px; width:20px; height:20px;
  border-radius:50%; background:#e0564a; color:#fff; font-size:12px;
  line-height:20px; text-align:center;
}

/* 家具库 */
.tray { flex:none; background:#fff; border-top:2px solid #e5d8c0; padding:9px 12px 14px; }
.tray-title { font-size:11px; color:#8a7a63; margin-bottom:7px; }
.tray-items { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.tray-items::-webkit-scrollbar { display:none; }
.tray-item {
  flex:none; width:54px; height:54px; border-radius:12px; background:#f7f2e6;
  display:flex; align-items:center; justify-content:center; font-size:27px;
  border:2px solid #ece0c8;
}
.tray-item:active { transform:scale(.94); background:#eee5d2; }

/* 注册弹层 */
.overlay {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(30,50,25,.55); backdrop-filter:blur(4px); padding:20px;
}
.gate-card {
  width:100%; max-width:380px; background:#fff; border-radius:22px;
  padding:26px 22px 22px; box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.gate-card h2 { margin:0 0 6px; font-size:20px; color:#3d5a2e; }
.gate-sub { margin:0 0 20px; font-size:13px; color:#8a9a80; }
.fld { display:block; margin-bottom:16px; }
.fld > span { display:block; font-size:12px; color:#6c7f62; margin-bottom:7px; font-weight:600; }
.fld input {
  width:100%; padding:12px 14px; border-radius:12px; border:2px solid #e0ecd8;
  font-size:15px; outline:none; background:#fbfdf9; font-family:inherit;
}
.fld input:focus { border-color:#8cc43f; background:#fff; }
.avatar-pick { display:flex; gap:8px; }
.avatar-pick .ap {
  flex:1; height:54px; border-radius:12px; border:2px solid #e0ecd8;
  display:flex; align-items:center; justify-content:center; font-size:25px; background:#fbfdf9;
}
.avatar-pick .ap.on { border-color:#8cc43f; background:#f0f9e6; box-shadow:0 0 0 3px rgba(140,196,63,.22); }
.btn-primary {
  width:100%; padding:14px; border-radius:14px; background:#8cc43f; color:#fff;
  font-size:16px; font-weight:800; box-shadow:0 4px 14px rgba(140,196,63,.4);
}
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { background:#c8d6bd; box-shadow:none; }
.gate-err { margin:10px 0 0; font-size:12px; color:#e0564a; text-align:center; min-height:16px; }

/* 吐司 */
.toast {
  position:fixed; left:50%; bottom:80px; transform:translate(-50%,20px);
  background:rgba(45,60,38,.95); color:#fff; font-size:13px;
  padding:10px 20px; border-radius:22px; opacity:0; pointer-events:none;
  transition:all .26s; z-index:200; max-width:82vw; text-align:center;
}
.toast.on { opacity:1; transform:translate(-50%,0); }