html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #e9e9e6;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
#cv {
  display: block; width: 100vw; height: 100vh;
  touch-action: none;
}

/* 联机面板：DOM 处理长码复制粘贴，比 canvas 好按 */
#lobby {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233,233,230,0.94);
  padding: 16px;
}
#lobby.hidden { display: none; }
.lobby-card {
  width: min(400px, 100%);
  max-height: 92vh; overflow: auto;
  background: #f4f4f1;
  border: 2.5px solid #141414;
  padding: 18px 16px;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.lobby-title { font-size: 22px; font-weight: 800; color: #141414; letter-spacing: 1px; }
.lobby-sub { font-size: 12.5px; line-height: 1.6; color: #8c8c88; margin: 8px 0 14px; }
.lobby-row { display: flex; gap: 8px; margin: 10px 0; }
.lk {
  flex: 1; padding: 11px 6px;
  background: #141414; color: #f4f4f1;
  border: none; font-size: 14px; font-weight: 700;
  font-family: inherit; letter-spacing: 1px;
  cursor: pointer;
}
.lk:active { transform: translateY(1px); }
.lk.ghost { background: #f4f4f1; color: #141414; border: 2.2px solid #141414; }
#lobby-code {
  width: 100%; height: 96px; box-sizing: border-box;
  border: 2px solid #141414; background: #fff;
  color: #141414; font-size: 11px; line-height: 1.45;
  font-family: "SF Mono", ui-monospace, monospace;
  padding: 8px; resize: none; word-break: break-all;
  -webkit-user-select: text; user-select: text;
  touch-action: auto;
}
.lobby-hint { font-size: 11px; color: #8c8c88; line-height: 1.6; margin-top: 10px; }

.lk.small { padding: 8px 6px; font-size: 12.5px; background: transparent; color: #141414; border: 2px solid #141414; }
#turn-box.hidden { display: none; }
.turn-input {
  flex: 1; min-width: 0;
  border: 2px solid #141414; background: #fff; color: #141414;
  font-size: 11px; padding: 7px; font-family: "SF Mono", ui-monospace, monospace;
  -webkit-user-select: text; user-select: text; touch-action: auto;
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
}

#sig-box.hidden { display: none; }
#sig-room { max-width: 96px; }

#exp { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(233,233,230,0.94); padding: 16px; }
#exp.hidden { display: none; }
#ghost-box.hidden { display: none; }
#ghost-code {
  width: 100%; height: 86px; box-sizing: border-box;
  border: 2px solid #141414; background: #fff; color: #141414;
  font-size: 11px; line-height: 1.45; font-family: "SF Mono", ui-monospace, monospace;
  padding: 8px; resize: none; word-break: break-all;
  -webkit-user-select: text; user-select: text; touch-action: auto;
}

/* 设置面板 */
#set { position: fixed; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; background: rgba(233,233,230,0.95); padding: 16px; }
#set.hidden { display: none; }
.set-list { margin: 10px 0 14px; max-height: 52vh; overflow-y: auto; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(20,20,20,0.08); }
.set-row:last-child { border-bottom: 0; }
.set-label { font: 600 13.5px "PingFang SC", sans-serif; color: #141414; }
.set-hint { font: 400 11.5px "PingFang SC", sans-serif; color: #8a8a84; margin-top: 2px; }
.set-key { min-width: 76px; height: 32px; padding: 0 12px; border: 2px solid #141414; background: #fff; color: #141414;
  font: 700 12.5px "SF Mono", ui-monospace, monospace; cursor: pointer; border-radius: 8px; }
.set-key.waiting { background: #d92b2b; border-color: #d92b2b; color: #fff; }
.set-seg { display: flex; gap: 6px; }
.set-seg button { height: 30px; min-width: 40px; padding: 0 10px; border: 1.5px solid rgba(20,20,20,0.35); background: #fff;
  color: #141414; font: 600 12px "PingFang SC", sans-serif; border-radius: 8px; cursor: pointer; }
.set-seg button.on { background: #141414; border-color: #141414; color: #fff; }
.set-range { width: 130px; accent-color: #d92b2b; }

/* 设置面板 */
#set-list { margin: 4px 0 12px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px; margin-bottom: 6px;
  border: 2px solid #141414; background: #fff; cursor: pointer;
}
.set-row:active { transform: translateY(1px); }
.set-row .set-name { font-size: 13px; font-weight: 700; color: #141414; }
.set-row .set-name small { font-weight: 500; color: #8c8c88; margin-left: 6px; font-size: 11px; }
.set-row .set-key {
  min-width: 54px; text-align: center;
  font: 700 13px "SF Mono", ui-monospace, monospace;
  color: #141414; background: #f4f4f1;
  border: 1.5px solid rgba(20,20,20,0.35); padding: 3px 8px;
}
.set-row.capturing { background: #141414; border-color: #141414; }
.set-row.capturing .set-name, .set-row.capturing .set-key { color: #f4f4f1; }
.set-row.capturing .set-key { background: transparent; border-color: rgba(244,244,241,0.5); }
.set-row.clash { animation: setShake .24s linear 2; }
@keyframes setShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
#set-code {
  width: 100%; height: 74px; box-sizing: border-box;
  border: 2px solid #141414; background: #fff; color: #141414;
  font: 11px "SF Mono", ui-monospace, monospace; line-height: 1.45;
  padding: 8px; resize: none; word-break: break-all;
  -webkit-user-select: text; user-select: text; touch-action: auto;
}