html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1c1d1f;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#f3efe6}
.page{width:1920px;height:1080px;background:#1c1d1f;overflow:hidden;transform-origin:0 0}
.nav{position:relative;height:52px;background:#1f2124;color:#d8d4cc;font-size:15px;box-sizing:border-box;letter-spacing:.12em;border-bottom:1px solid rgba(196,168,118,.22)}
.nav .brand{position:absolute;left:22px;top:0;display:flex;align-items:center;height:52px;text-decoration:none}
.nav .brand img{height:34px;width:auto;display:block}
.nav-track{position:absolute;left:132px;right:380px;top:0;height:52px;display:flex;align-items:center;justify-content:space-between}
.nav .nav-item{color:#d8d4cc;text-decoration:none;white-space:nowrap;height:52px;display:inline-flex;align-items:center;line-height:1}
.nav .nav-item.on,.nav .nav-item:hover{color:#c4a876}
.nav .nav-item.login{position:absolute;right:28px;top:0;cursor:ns-resize}
.row{display:flex;height:1028px}
.hall{position:relative;width:1540px;height:1028px;background:#111;flex:none}
.hall img{width:1540px;height:1028px;object-fit:fill;display:block}
.hot{
  position:absolute;transform:translate(-50%,-50%);
  border:1px solid rgba(196,168,118,.5);
  background:linear-gradient(180deg,rgba(44,46,50,.9),rgba(18,20,24,.94));
  color:#f3efe6;
  width:auto;height:auto;
  padding:7px 15px 7px 13px;
  cursor:grab;
  font:600 15px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.2em;
  border-radius:2px;
  white-space:nowrap;
  box-shadow:0 3px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hot::before{
  content:"";
  display:inline-block;
  width:2px;height:.85em;
  margin-right:9px;
  background:#c4a876;
  vertical-align:-1px;
}
.hot:focus,.hot:hover{
  outline:0;
  border-color:rgba(220,192,140,.85);
  background:linear-gradient(180deg,rgba(52,54,58,.94),rgba(24,26,30,.96));
}
.hot.office{opacity:0;width:148px;height:90px;background:transparent;border:0;box-shadow:none;color:transparent;padding:0}
.hot.office::before{display:none}
.hot.office:hover,.hot.office:focus{opacity:1;color:#f3efe6;border:1px solid rgba(196,168,118,.5);padding:7px 15px 7px 13px;background:linear-gradient(180deg,rgba(44,46,50,.9),rgba(18,20,24,.94))}
.hot.office:hover::before,.hot.office:focus::before{display:inline-block}
.hot.island{letter-spacing:.28em}
.hot.dragging{cursor:grabbing;z-index:5}

.charle{
  width:380px;height:1028px;flex:none;
  box-sizing:border-box;
  padding:36px 32px 18px 30px;
  background:linear-gradient(180deg,#24262a 0%,#18191c 100%);
  border-left:1px solid rgba(196,168,118,.32);
  color:#f3efe6;
  display:flex;flex-direction:column;
  position:sticky;top:0;align-self:stretch;
  z-index:4;
}
.charle .log{
  flex:1;overflow:auto;
  padding:0 0 12px 16px;
  font-size:15px;line-height:1.75;color:#c4c0b6;
}
.charle .log p{margin:0 0 12px;padding:0;color:#c4c0b6}
.charle .log .you{color:#e8e2d6}
.charle .ask{display:flex;gap:8px;padding-left:16px;flex:none}
.charle .ask input{
  flex:1;height:38px;box-sizing:border-box;
  border:1px solid rgba(196,168,118,.28);
  background:#141518;color:#f3efe6;padding:0 12px;border-radius:2px;
  font:15px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
.charle .ask button{
  height:38px;padding:0 14px;cursor:pointer;
  border:1px solid rgba(196,168,118,.55);border-radius:2px;
  background:linear-gradient(180deg,rgba(44,46,50,.95),rgba(18,20,24,.98));
  color:#f3efe6;letter-spacing:.12em;
}
.charle h1{
  margin:0 0 20px;
  padding:0 0 0 14px;
  border-left:2px solid #c4a876;
  font:600 22px/1.25 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.28em;
  color:#f3efe6;
}
.charle p{
  margin:0;
  padding-left:16px;
  line-height:1.75;
  font-size:15px;
  color:#c4c0b6;
}
.charle .go{
  display:inline-block;
  margin:28px 0 0 16px;
  padding:9px 20px;
  border:1px solid rgba(196,168,118,.55);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(44,46,50,.95),rgba(18,20,24,.98));
  color:#f3efe6;
  text-decoration:none;
  font:600 15px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.2em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.charle .go:hover{border-color:rgba(220,192,140,.85);background:linear-gradient(180deg,rgba(52,54,58,.96),rgba(24,26,30,.98))}
.charle .hint{display:none}
.charle .xia-hits{margin:0 0 12px;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.charle .xia-hits a{color:#c4a876;text-decoration:none;font-size:14px;line-height:1.45}
.charle .xia-hits a:hover{color:#e2c89a}


body.edit .hot{pointer-events:none}
.region{
  position:absolute;box-sizing:border-box;
  border:2px solid rgba(0,220,255,.95);
  background:rgba(0,220,255,.16);
  cursor:move;
}
.region.on{
  border-color:#c4a876;
  background:rgba(196,168,118,.26);
  z-index:3;
}
.region.drawing{pointer-events:none;z-index:4}
.region .tag{
  position:absolute;left:-2px;top:-22px;
  padding:2px 8px;
  background:#1c1d1f;
  color:#f3efe6;
  font:600 12px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.12em;
  border:1px solid rgba(196,168,118,.5);
  white-space:nowrap;
  pointer-events:none;
}
.charle .picks{margin:0;padding:0;list-style:none}
.charle .picks button{
  display:block;width:100%;text-align:left;
  margin:0 0 6px;padding:8px 12px;
  border:1px solid rgba(196,168,118,.28);
  border-radius:2px;
  background:transparent;color:#f3efe6;
  font:600 14px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.12em;cursor:pointer;
}
.charle .picks button.on{border-color:#c4a876;background:rgba(196,168,118,.16);color:#c4a876}
.charle .picks button.ok::after{content:" 已画";color:#8fd18f;font-weight:400;letter-spacing:0}
.charle .hint2{margin:12px 0 16px;padding-left:16px;line-height:1.7;font-size:14px;color:#c4c0b6}
.charle .count{margin:10px 0 0 16px;font-size:13px;color:#c4a876;letter-spacing:.12em}

.region-svg{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:2;
}
.region-svg .poly{
  fill:rgba(0,220,255,.18);
  stroke:rgba(0,220,255,.95);
  stroke-width:0.28;
  stroke-linejoin:round;
}
.region-svg .poly.on{
  fill:rgba(196,168,118,.28);
  stroke:#c4a876;
}
.region-svg .trace{
  fill:none;
  stroke:#c4a876;
  stroke-width:0.38;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.region-svg .trace-start{fill:#c4a876;stroke:#fff;stroke-width:0.12}
.region-svg .poly-label{
  fill:#f3efe6;
  font-size:1.7px;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  text-anchor:middle;
  pointer-events:none;
}
body.play .hall{cursor:pointer}
body.play .hot{pointer-events:none}
.charle img.zoom{
  display:block;width:calc(100% - 16px);margin:22px 0 0 16px;
  border:1px solid rgba(196,168,118,.35);
  box-sizing:border-box;
}