/* 公园：夜里的一块空地，灯是暖的，地上是湿的。 */
:root {
  --ink: #e9f2ea;
  --dim: #9db0a4;
  --line: rgba(233, 242, 234, 0.14);
  --card: rgba(10, 20, 16, 0.72);
  --warm: #ffcf8a;
  --moss: #274238;
  --grass: #1d3228;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: #081210; color: var(--ink);
  font: 14px/1.55 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }
#sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 520px at 70% -10%, rgba(90, 130, 160, 0.25), transparent 70%),
    radial-gradient(900px 420px at 10% 0%, rgba(255, 190, 120, 0.10), transparent 70%),
    linear-gradient(180deg, #0a1512 0%, #071110 100%);
}

/* ── 顶栏 ───────────────────────────────────────────── */
#top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: max(10px, env(safe-area-inset-top, 10px));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); background: rgba(8, 18, 15, 0.62);
}
#home {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
}
#titlebox { flex: 1; min-width: 0; }
#ttl { font-weight: 700; letter-spacing: 0.06em; }
#sub { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbtns { display: flex; gap: 6px; }
#who { font-size: 12px; color: var(--warm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini {
  font: inherit; font-size: 12px; color: var(--ink); cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 10px;
}
.mini:hover { background: rgba(255, 255, 255, 0.13); }
.mini:active { transform: translateY(1px); }
.mini[disabled] { opacity: 0.4; cursor: default; }

/* ── 舞台：先是区域列表，点进去是一个区自己的页 ───────── */
#stage { flex: 1; display: flex; min-height: 0; }
#view-list { flex: 1; min-width: 0; overflow-y: auto; padding: 8px; }
.zlist { display: flex; flex-direction: column; gap: 2px; }
#zone-list .zrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 11px;
  color: var(--ink); background: transparent; border: 1px solid transparent;
  transition: background 0.13s, border-color 0.13s;
}
#zone-list .zrow:hover { background: rgba(255, 255, 255, 0.055); }
#zone-list .zrow.here {
  border-color: rgba(255, 207, 138, 0.45);
  background: rgba(255, 207, 138, 0.075);
}
#zone-list .zi {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 18px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
}
#zone-list .zb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#zone-list .zb b { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 5px; }
#zone-list .ztag {
  font-style: normal; font-weight: 400; font-size: 9.5px; color: var(--warm);
  padding: 1px 5px; border-radius: 6px; background: rgba(255, 207, 138, 0.14);
}
#zone-list .zl {
  font-size: 11.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#zone-list .zr {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  min-width: 62px;
}
#zone-list .ztm { font-style: normal; font-size: 10px; color: #5e7268; }
#zone-list .zbadge {
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.5;
  min-width: 17px; padding: 0 5px; text-align: center;
  color: #16221c; background: var(--warm); border-radius: 9px;
}
#zone-list .zp {
  font-size: 10px; color: rgba(157, 176, 164, 0.75);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 一个区自己的页 */
#view-zone { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
#view-zone[hidden] { display: none; }
#zone-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}
#zback {
  flex: none; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--ink); background: transparent; border: 0; padding: 4px 8px; border-radius: 8px;
}
#zback:hover { background: rgba(255, 255, 255, 0.09); }
#zicon { font-size: 19px; }
#zone-head .zh { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#zone-head .zh b { font-size: 14.5px; }
#zname { font-size: 14.5px; font-weight: 700; }
#zmeta { font-size: 11px; color: var(--dim); }
#zgo { margin-left: auto; }
#zgo[hidden] { display: none; }
#ztabs {
  flex: none; display: flex; gap: 4px; padding: 6px 10px 0;
  overflow-x: auto; border-bottom: 1px solid var(--line);
}
.ztab {
  flex: none; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  color: var(--dim); background: transparent; border: 0;
  border-bottom: 2px solid transparent; padding: 6px 9px 7px;
}
.ztab:hover { color: var(--ink); }
.ztab.on { color: var(--warm); border-bottom-color: var(--warm); font-weight: 600; }
.ztab[hidden] { display: none; }
#panes { flex: 1; min-height: 0; display: flex; }
.pane { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.pane[hidden] { display: none; }
.pane-note { font-size: 11.5px; color: var(--dim); margin: 2px 0 8px; }
#pane-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#pane-chat[hidden] { display: none; }
#pane-chat #stream { height: auto; flex: 1; min-height: 90px; }
#pane-stats .card { margin-top: 4px; }

/* 名单行：旁观 / 参与人 / 在场都用它 */
.frow {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 8px; border-radius: 9px; margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
}
.frow b { font-size: 12.5px; font-weight: 600; }
.frow small { font-size: 10.5px; color: var(--dim); }
.frow.house { border-color: rgba(240, 217, 168, 0.3); }
.frow.human { border-color: rgba(120, 190, 140, 0.3); }
.frow.visitor { border-color: rgba(160, 140, 220, 0.38); }
.frow.me { background: rgba(255, 207, 138, 0.13); }
.frow.speaking { animation: pop 0.9s ease-in-out infinite; }
.srow {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 8px; border-radius: 9px; margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
}
.srow .sn {
  font-style: normal; font-size: 10px; color: var(--dim);
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 6px; background: rgba(0, 0, 0, 0.3);
}
.srow b { font-size: 12.5px; font-weight: 600; }
.srow small { font-size: 10.5px; color: var(--dim); }
.srow.turn { border-color: rgba(255, 207, 138, 0.55); background: rgba(255, 207, 138, 0.1); }
.srow.me { background: rgba(255, 207, 138, 0.13); }
.sb {
  font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 6px;
  background: rgba(255, 207, 138, 0.2); color: #f0d9a8;
}
.sb.bad { background: rgba(240, 150, 130, 0.2); color: #f0b4a8; }
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* 停在列表页时，区页里的东西一律不显示 */
body.listmode #zgo { display: none; }

/* ── 侧栏 ───────────────────────────────────────────── */
#side {
  flex: none; width: 300px; overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  border-left: 1px solid var(--line); background: rgba(8, 16, 13, 0.5);
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.card h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; }
.card h3 small { color: var(--dim); font-weight: 400; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  font-size: 12px; cursor: pointer;
}
.item:hover { background: rgba(255, 255, 255, 0.09); }
.item .kind { font-size: 10px; color: var(--dim); margin-left: auto; }
.item.on { border-color: rgba(255, 207, 138, 0.55); }

/* 访客簿：主人能改（✎ 只在这台带口令的机器上出现） */
.item.guest { flex-wrap: wrap; align-items: baseline; position: relative; padding-right: 26px; }
.item.guest .gname { font-size: 12.5px; }
.item.guest .on-now {
  font-style: normal; font-size: 9.5px; margin-left: 5px; padding: 1px 5px;
  border-radius: 6px; background: rgba(120, 200, 140, 0.22); color: #b9e6c4;
}
.item.guest .gnote { flex-basis: 100%; font-size: 11px; color: #d8c9a8; margin-top: 2px; }
.item.guest .gedit {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 1;
  color: var(--dim); background: transparent; border: 0; cursor: pointer; border-radius: 6px;
}
.item.guest .gedit:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.item.guest.edit { flex-direction: column; align-items: stretch; gap: 5px; padding-right: 8px; cursor: default; }
.item.guest.edit input {
  width: 100%; font: 12px/1.4 inherit; color: var(--ink); background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px;
}
.item.guest.edit .g-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.item.guest.edit .g-btns button {
  font: 11px/1 inherit; padding: 5px 8px; border-radius: 7px; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line);
}
.item.guest.edit .g-btns button:hover { background: rgba(255, 255, 255, 0.16); }
.item.guest.edit .g-btns button.danger { color: #f0b4a8; border-color: rgba(240, 150, 130, 0.35); }
textarea {
  width: 100%; margin-top: 8px; font: 12px/1.5 ui-monospace, Consolas, monospace;
  color: var(--ink); background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px; resize: vertical;
}

/* 棋盘 */
.board { display: grid; grid-template-columns: repeat(15, 1fr); gap: 0; width: 100%; aspect-ratio: 1; margin: 4px 0; }
.board i {
  display: block; aspect-ratio: 1; border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; position: relative;
}
.board i.b { background: radial-gradient(circle, #eef4f0 0 42%, transparent 44%); }
.board i.w { background: radial-gradient(circle, #1c2a24 0 42%, transparent 44%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.board i.l { outline: 1px solid rgba(255, 207, 138, 0.7); }
.board i:hover { background-color: rgba(255, 207, 138, 0.10); }

/* ── 底部对话流 ─────────────────────────────────────── */
#chat { flex: none; border-top: 1px solid var(--line); background: rgba(8, 16, 13, 0.66); }
#stream {
  height: 138px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px;
}
#stream .ln { color: var(--ink); }
#stream .nm { color: var(--warm); }
#stream .nm.house { color: #f0d9a8; }
#stream .nm.human { color: #cfe8c2; }
#stream .nm.visitor { color: #cdbdf0; }
#stream .tm { color: #5e7268; font-size: 10px; margin-right: 4px; }
#stream .sys { color: var(--dim); font-style: italic; }
#stream .clap { color: #ffd9a0; }
/* 谁进来、谁走了：自己那条亮一点，一眼看见「你进公园了」 */
#stream .ln.note { color: var(--dim); font-size: 12px; }
#stream .ln.note .nm { color: var(--dim); }
#stream .ln.note.me { color: #bfe3d0; }
#stream .ln.note.me .nm { color: #d8f3e6; font-weight: 600; }
#composer {
  display: flex; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
#say {
  flex: 1; font: inherit; color: var(--ink); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; outline: none;
}
#say:focus { border-color: rgba(255, 207, 138, 0.5); }
#btn-say, #btn-clap {
  font: inherit; color: #16221c; background: var(--warm); border: 0; border-radius: 11px;
  padding: 0 14px; cursor: pointer; font-weight: 600;
}
#btn-clap { background: rgba(255, 255, 255, 0.1); color: var(--ink); }

/* ── 进公园 ─────────────────────────────────────────── */
#veil[hidden] { display: none; }
#veil {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 30;
  background: rgba(4, 10, 8, 0.72); backdrop-filter: blur(4px);
}
.modal {
  width: min(360px, 88vw); padding: 16px; border-radius: 16px;
  background: #0d1a15; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.modal h3 { margin: 0 0 6px; font-size: 15px; }
.modal .hint { margin: 0 0 10px; color: var(--dim); font-size: 12px; }

/* 你是谁：人类 / 替主人来的 AI */
#join-kind.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#join-kind .kind {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font: inherit; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 12px;
  color: var(--ink); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
#join-kind .kind b { font-size: 13px; font-weight: 600; }
#join-kind .kind i { font-style: normal; font-size: 11px; color: var(--dim); }
#join-kind .kind.on {
  border-color: var(--warm); background: rgba(255, 207, 138, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 207, 138, 0.35) inset;
}
#join-kind .kind.on i { color: #e6d2ae; }
.modal input {
  width: 100%; margin-bottom: 8px; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
}
.modal .row { margin-top: 4px; }
#join-go { flex: 1; font: inherit; font-weight: 600; color: #16221c; background: var(--warm); border: 0; border-radius: 10px; padding: 9px; cursor: pointer; }
.ghost { background: transparent; }

/* ── 手机 ───────────────────────────────────────────── */
@media (max-width: 760px) {
  #stage { flex-direction: column; }
  #side {
    width: auto; border-left: 0; border-top: 1px solid var(--line);
    max-height: 40vh; flex-direction: row; overflow-x: auto; overflow-y: auto;
  }
  .card { min-width: 260px; }
  #stream { height: 108px; }
}

/* ── 象棋 ─────────────────────────────────────────── */
.xq {
  display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; margin: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; overflow: hidden;
  background: rgba(255, 240, 210, 0.045);
}
.xq .cell {
  height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.xq .cell.red { color: #ff9c7a; }
.xq .cell.black { color: #bfe0ff; }
.xq .cell.last { box-shadow: inset 0 0 0 1px rgba(255, 207, 138, 0.85); }
.xq .cell.picked { background: rgba(255, 207, 138, 0.22); }
.xq .cell.tgt { background: radial-gradient(circle, rgba(120, 220, 160, 0.4) 0 42%, transparent 46%); }
.xq .cell:hover { background-color: rgba(255, 255, 255, 0.06); }

/* ── 飞行棋 ───────────────────────────────────────── */
.fx { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.fx-row {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 8px;
}
.fx-row.on { border-color: rgba(255, 207, 138, 0.6); background: rgba(255, 207, 138, 0.08); }
.fx-nm { font-size: 12px; min-width: 44px; }
.plane { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--dim); }
.plane.fly { color: #cfe9ff; background: rgba(120, 180, 255, 0.14); }
.plane.win { color: #b6f0c8; background: rgba(120, 220, 160, 0.18); }
.fx-dice { font-size: 12px; color: var(--dim); margin: 2px 0 6px; }
.fx-dice b { font-size: 16px; color: var(--warm); margin-left: 4px; }

/* ── 斗地主 ───────────────────────────────────────── */
.dd-counts { font-size: 11px; color: var(--dim); margin: 2px 0 6px; }
.hand { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 6px; }
.hand .card {
  font: inherit; font-size: 13px; line-height: 1; padding: 5px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink); cursor: pointer;
  transition: transform 0.08s;
}
.hand .card:hover { background: rgba(255, 255, 255, 0.13); }
.hand .card.on { border-color: rgba(255, 207, 138, 0.8); background: rgba(255, 207, 138, 0.22); transform: translateY(-2px); }

/* ── 邀请码 ──────────────────────────────────────── */
#join-inv { width: 100%; margin-bottom: 8px; font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.inv-num { width: 62px; flex: none; }
.item.inv { display: flex; align-items: center; gap: 8px; }
.item.inv .inv-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--warm); }
.item.inv .inv-meta { flex: 1; min-width: 0; font-size: 11px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.inv.dead { opacity: .45; }

/* ── 跑团（DND / COC）：GM 叙述 + 角色卡 ───────────── */
.rpg-sheets { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.rpg-sheet {
  display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 8px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--dim);
}
.rpg-sheet b { color: var(--ink); font-weight: 600; }
.rpg-sheet i { font-style: normal; font-size: 10px; opacity: .8; }
.rpg-sheet.acted { border-color: rgba(255, 207, 138, .55); background: rgba(255, 207, 138, .12); }
.rpg-sheet.down { border-color: rgba(255, 120, 120, .5); background: rgba(255, 120, 120, .12); }
.rpg-sheet .bad { color: #ff9c9c; }
.rpg-gmtext {
  font-size: 13.5px; line-height: 1.75; color: var(--ink); max-height: 44vh; overflow: auto;
  padding: 10px 12px; margin: 2px 0 8px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035);
  border-left: 3px solid rgba(255, 207, 138, .55);
}
.rpg-gmtext p { margin: 0 0 .7em; }
.rpg-gmtext p:last-child { margin-bottom: 0; }
.rpg-log { display: flex; flex-direction: column; gap: 1px; margin: 0 0 8px; }
#tc-check, #tc-rpg-url {
  font: inherit; font-size: 12px; color: var(--ink); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; flex: 1; min-width: 110px;
}
.rpg-load { margin-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .12); padding-top: 7px; }
.rpg-load summary { font-size: 11.5px; color: var(--dim); cursor: pointer; }
.rpg-load .row { margin-top: 6px; }
#open-pick { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
#open-pick .pick { font-size: 11.5px; }
#open-pick .pick i { font-style: normal; opacity: .65; }

/* ── 设施（每处自己的几件东西，点着玩） ───────────── */
#pane-play {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; overflow-y: auto;
}
#pane-play[hidden] { display: none; }
#fac-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.fac {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(140, 180, 255, .18);
  background: linear-gradient(160deg, rgba(40, 58, 92, .62), rgba(26, 36, 58, .72));
  color: #e9f0ff; font: inherit;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.fac:hover { transform: translateY(-2px); border-color: rgba(150, 200, 255, .45); background: linear-gradient(160deg, rgba(52, 74, 116, .72), rgba(32, 44, 70, .8)); }
.fac:active { transform: translateY(0) scale(.985); }
.fac.dim { opacity: .46; cursor: not-allowed; transform: none; }
.fac-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.fac-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fac-tx b { font-size: 14.5px; font-weight: 600; letter-spacing: .3px; }
.fac-tx i { font-style: normal; font-size: 12px; color: rgba(206, 222, 248, .62); }
#fac-log { display: flex; flex-direction: column; gap: 6px; }
.fac-h {
  font-size: 12px; color: rgba(200, 216, 244, .5); letter-spacing: .6px;
  margin-top: 2px; padding-left: 2px;
}
.fac-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: rgba(226, 234, 250, .86);
  padding: 8px 12px; border-radius: 10px;
  background: rgba(30, 42, 66, .5); border-left: 2px solid rgba(120, 170, 240, .35);
}
.fac-row .tm { font-size: 11px; color: rgba(190, 208, 236, .48); font-variant-numeric: tabular-nums; }
.fac-row b { font-weight: 600; color: #cfe3ff; }
.fac-row span:last-child { color: rgba(224, 232, 246, .9); white-space: pre-line; }
@media (max-width: 720px) {
  #pane-play { padding: 12px; }
  #fac-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
  .fac { padding: 11px 12px; gap: 9px; }
  .fac-ic { font-size: 22px; }
  .fac-tx b { font-size: 13.5px; }
  .fac-tx i { font-size: 11px; }
}

/* ── 头像／搭子／摸脸／@ ─────────────────────────────── */
.av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08); color: #dfe9ff;
}
.av.ph.h { background: rgba(240, 217, 168, .22); color: #f3e2bf; }
.av.ph.a { background: rgba(160, 140, 220, .26); color: #ddd2ff; }
.av.ph.u { background: rgba(120, 190, 140, .22); color: #cfeedd; }
.av.sm { width: 22px; height: 22px; font-size: 10.5px; margin-right: 5px; vertical-align: -6px; }
#me-av { width: 24px; height: 24px; font-size: 11px; cursor: pointer; }
#who { display: flex; align-items: center; gap: 6px; max-width: 190px; }
#btn-av.on, #btn-partner.on { border-color: var(--warm); color: var(--warm); }
.mate {
  font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 999px;
  color: #cdbff0; background: rgba(160, 140, 220, .18);
  border: 1px solid rgba(160, 140, 220, .3); margin-left: 5px;
}
.frow { cursor: pointer; }
.frow:active { transform: scale(.99); }

/* 摸脸：动作行，比发言轻 */
.ln.pat { color: #f0e0c4; }
.ln.pat .ptx { font-size: 13px; }
.ln.tome { background: rgba(255, 207, 138, .1); border-radius: 8px; }
.at { font-style: normal; color: var(--warm); font-weight: 600; }

/* 有人找我：脚边一小条 */
#notices {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px 0;
  scrollbar-width: none;
}
#notices[hidden] { display: none; }
#notices::-webkit-scrollbar { display: none; }
#notices .nt {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px;
  font: inherit; font-size: 11.5px; cursor: pointer;
  padding: 5px 10px; border-radius: 999px; color: var(--ink);
  background: rgba(255, 207, 138, .14);
  border: 1px solid rgba(255, 207, 138, .3);
}
#notices .nt b { font-weight: 600; color: var(--warm); }
#notices .nt span { color: var(--dim); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 点人弹出来的动作条 */
#amenu[hidden] { display: none; }
#amenu {
  position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 4px;
  min-width: 148px; padding: 8px; border-radius: 12px;
  background: #0d1a15; border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
#amenu b { font-size: 12px; color: var(--warm); padding: 2px 4px 5px; }
#amenu button {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: 8px; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid transparent;
}
#amenu button:hover { background: rgba(255, 207, 138, .14); border-color: rgba(255, 207, 138, .3); }

/* 带搭子 */
#pveil[hidden] { display: none; }
#pveil {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 31;
  background: rgba(4, 10, 8, .72); backdrop-filter: blur(4px);
}
#pveil #p-go {
  flex: 1; font: inherit; font-weight: 600; color: #16221c;
  background: var(--warm); border: 0; border-radius: 10px; padding: 9px; cursor: pointer;
}

/* ── 手机横屏（宽度够、高度紧）────────────────────────── */
@media (orientation: landscape) and (max-height: 560px) {
  #top {
    padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    gap: 8px;
  }
  #home { width: 30px; height: 30px; }
  #sub { display: none; }
  .mini { padding: 5px 8px; font-size: 11.5px; }

  /* 宽了就别按手机那套竖着堆：区列表 / 区页 横排 */
  #stage { flex-direction: row; }
  #view-list { padding: 6px; }
  #zone-list .zrow { padding: 7px 9px; }
  #zone-head { padding: 6px 8px; }
  #side { width: 226px; padding: 6px; gap: 7px; }
  .card { padding: 7px 9px; border-radius: 11px; }
  .card h3 { margin-bottom: 6px; font-size: 12px; }
  .item { padding: 5px 7px; }

  /* 区页里 #pane-chat #stream 是 flex:1（两个 id），横屏必须同强度压回来 */
  #stream, #pane-chat #stream { height: 90px; min-height: 0; flex: none; padding: 6px 10px; font-size: 12px; }
  #composer { padding: 6px 10px max(6px, env(safe-area-inset-bottom, 0px)); gap: 6px; }
  #say { padding: 7px 10px; }
  #btn-say, #btn-clap { padding: 0 11px; }

  .board { max-height: 44vh; width: auto; }
  .xq .cell { height: 22px; }
  .modal { width: min(430px, 92vw); padding: 12px; }
}