/* ============================================================
   你画我猜 · 私人版 — Apple Design Theme v2
   参考 skribbl.io 信息架构（顶条提示/玩家条/工具条/聊天猜词/三选一），
   视觉采用 Apple HIG：系统字体、玻璃材质、克制动效、明暗自适应。
   ------------------------------------------------------------
   性能预算：
   - 零外部字体（system-ui 即 SF/Segoe/Roboto）
   - 动画只用 transform / opacity；无循环动画（打点除外，且可被
     prefers-reduced-motion 关闭）
   - backdrop-filter 仅用于小型 chrome；画布保持不透明白纸
   - 单文件、无图片资源
   ============================================================ */

/* ---------- 1. 令牌 ---------- */
:root {
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --accent-hover: #0077ed;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #98989d;
  --page: #f5f5f7;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.14);
  --radius-card: 20px;
  --radius-chip: 14px;
  --radius-btn: 12px;
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.16), 0 3px 12px rgba(0, 0, 0, 0.08);
  --blur: saturate(180%) blur(20px);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);   /* 临界阻尼入场 */
  --ease-pop: cubic-bezier(0.34, 1.4, 0.44, 1);  /* 轻弹性（揭晓/弹层专用） */
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.20);
    --accent-hover: #409cff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #7c7c80;
    --page: #0a0a0c;
    --surface: rgba(28, 28, 30, 0.72);
    --surface-strong: rgba(44, 44, 46, 0.86);
    --surface-solid: #1c1c1e;
    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-strong: rgba(255, 255, 255, 0.22);
    --shadow-card: 0 14px 44px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 18px 52px rgba(0, 0, 0, 0.65), 0 3px 12px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- 2. 基底 ---------- */
html, body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font: 100%/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 环境光斑：极淡的两团色，静态不动画 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% -6%, rgba(0, 113, 227, 0.075), transparent 68%),
    radial-gradient(640px 460px at 96% 108%, rgba(52, 199, 89, 0.06), transparent 66%);
}
@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(560px 420px at 12% -6%, rgba(10, 132, 255, 0.12), transparent 70%),
      radial-gradient(640px 460px at 96% 108%, rgba(48, 209, 88, 0.07), transparent 68%);
  }
}
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.12; font-weight: 700; }
b { font-weight: 650; }
a { color: var(--accent); }
::selection { background: rgba(0, 113, 227, 0.25); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 按钮 / 输入 ---------- */
.draw-btn, .ui-btn {
  background: var(--surface-strong) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: 0 0 0 0.5px var(--hairline), 0 2px 8px rgba(0, 0, 0, 0.07) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  transition: transform 100ms ease-out, background 160ms var(--ease), color 160ms var(--ease) !important;
}
.draw-btn:hover, .ui-btn:hover { background: var(--accent) !important; color: #fff !important; }
.draw-btn:active, .ui-btn:active { transform: scale(0.96) !important; transition-duration: 60ms !important; }
.draw-btn.current, .draw-btn.current-wire, .ui-btn.current, .ui-btn.current-wire {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35) !important;
}
@media (prefers-color-scheme: dark) {
  .draw-btn.current, .draw-btn.current-wire, .ui-btn.current, .ui-btn.current-wire {
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4) !important;
  }
}
.draw-btn.red-wire, .ui-btn.red-wire { color: var(--red) !important; }
.draw-btn:disabled { opacity: 0.4; pointer-events: none; }

.draw-input, input[type="text"], input[type="password"], textarea {
  border-radius: var(--radius-btn) !important;
  border: none !important;
  background: var(--surface-strong) !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  color: var(--ink) !important;
  transition: box-shadow 160ms var(--ease) !important;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3.5px var(--accent-soft) !important;
  outline: none !important;
}
select.draw-input, .draw-input.select { appearance: none; }

/* 玻璃卡通用 */
.view-home-box, .func-rooms-box, .theme-list-box, .draw-join-room-box,
.view-settings-box, .lib-edit-box, .seele-box, .layout .box,
[class*="view-"][class*="-box"] {
  background: var(--surface) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card), inset 0 0.5px 0 rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  color: var(--ink) !important;
}
[class*="view-"][class*="-box"] :is(h1, h2, h3, h4, h5, p, label, .label-name) { color: var(--ink) !important; }
.draw-app, .draw-what-bg { color: var(--ink) !important; }

/* 深色下原浅色内衬收敛 */
@media (prefers-color-scheme: dark) {
  .rooms-box, .stat-inline-box, .func-rooms-box { background: rgba(28, 28, 30, 0.6) !important; box-shadow: none !important; }
  .tips-box, .more-options-box, .label-item, .room-create-tips { background: transparent !important; box-shadow: none !important; }
  .room-item { background: rgba(44, 44, 46, 0.85) !important; }
}

/* 弹窗组件（prompt/confirm/alert/toast） */
.ui-shadow {
  background: rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 200 !important;
}
.ui-prompt-box, .ui-confirm-box, .ui-alert-box {
  background: var(--surface-solid) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-float) !important;
  padding: 22px 24px !important;
}
.ui-toast-box {
  top: 18px !important;
  background: var(--surface-solid) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-float) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  animation: toastIn 0.45s var(--ease-pop) !important;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -14px) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* ---------- 4. 首页（大厅） ---------- */
.view-home-bg, .draw-what-bg { background: transparent !important; }
/* 全局页头：透明、紧凑，吉祥物居中 */
.app-min-head { background: transparent !important; box-shadow: none !important; }
.app-min-head .layout { max-width: none !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; }
.app-min-logo { display: none !important; }
.app-min-logo-box { float: none !important; position: static !important; display: inline-block !important; text-align: center !important; }
.app-min-head .layout { width: auto !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: flex-end !important; float: none !important; }
.app-min-head .layout > * { float: none !important; }
.nihua-shell { margin: 0 auto !important; display: block !important; transform: scale(0.82); transform-origin: center bottom; }

/* Hero 标题/副标语：全端可用，桌面放大；flex 排序保证 标题→导航→副标语 */
.view-home-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 10px 0 20px !important;
  overflow: visible !important;
}
.view-home-head::before { order: -1 !important; }
.view-home-head::after { order: 2 !important; }
.view-home-head::before {
  content: "你画我猜 · 私人版";
  display: block !important;
  font-size: clamp(26px, 4.6vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  background: linear-gradient(120deg, var(--ink) 30%, var(--accent) 78%, var(--green) 105%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}
.view-home-head::after {
  content: "开一间房，画一个词，猜一晚上";
  display: block !important;
  margin-top: 8px !important;
  font-size: clamp(13px, 1.6vw, 15px) !important;
  color: var(--ink-2) !important;
  letter-spacing: 0.04em;
}

@media (min-width: 960px) {
  /* 特异性需压过通用 [class*="view-"][class*="-box"] 玻璃卡规则 */
  .draw-app .view-home-box {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 0 0 30px !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
  }
  .view-home-head nav.r {
    position: absolute !important;
    top: -8px !important; right: 0 !important;
    display: flex !important; gap: 6px !important;
    float: none !important;
    z-index: 5;
  }
  .view-home-head nav.r a {
    float: none !important;
    font-size: 13px !important; font-weight: 600 !important;
    line-height: 1 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: var(--blur) !important;
    backdrop-filter: var(--blur) !important;
    box-shadow: 0 0 0 0.5px var(--hairline), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: transform 100ms ease-out, color 160ms var(--ease) !important;
  }
  .view-home-head nav.r a:hover { color: var(--accent) !important; transform: scale(1.05) !important; }
  .view-home-head nav.r a:active { transform: scale(0.94) !important; }
  .func-rooms-box {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 24px 26px 20px !important;
  }
  /* 内层容器去掉自带灰底 */
  .func-rooms-box .rooms-box { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
}

/* 房间卡片 */
.room-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 12px !important;
  border-radius: 16px !important;
}
.room-list:empty::after {
  content: "还没有房间，点「新建房间」开一局吧";
  display: block; text-align: center; padding: 40px 10px;
  opacity: 0.55; font-size: 14px;
  grid-column: 1 / -1;
}
.room-item {
  background: var(--surface-strong) !important;
  border-radius: var(--radius-chip) !important;
  border: none !important;
  box-shadow: 0 0 0 0.5px var(--hairline), 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out) !important;
  overflow: hidden;
  padding: 14px 16px !important;
  min-height: 96px !important;
  box-sizing: border-box !important;
}
.room-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12), 0 0 0 0.5px var(--hairline) !important;
}
.room-item a { color: inherit !important; text-decoration: none !important; display: block !important; }
.room-item a.room-item-link { margin: -14px -16px !important; padding: 14px 16px !important; }
.room-item h2, .room-item h3, .room-item p { color: var(--ink) !important; }
.room-item .tag { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 6px !important; }

.func-rooms-box .head { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.stat-inline-box { text-align: left !important; margin: 0 0 0 auto !important; color: var(--ink-2) !important; font-size: 13px; }
.stat-inline-box b { color: var(--ink) !important; font-variant-numeric: tabular-nums; }

/* 移动端：头部导航收敛为行内胶囊 */
@media (max-width: 959px) {
  .view-home-head nav.r { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; float: none !important; padding: 0 !important; }
  .view-home-head nav.r a {
    float: none !important;
    font-size: 12px !important; font-weight: 600 !important;
    line-height: 1 !important; padding: 6px 11px !important;
    border-radius: 999px !important; color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 0.5px var(--hairline) !important;
  }
  .view-home-box { padding: 0 12px 24px !important; }
}

/* 社区活动区隐藏（私服裁剪） */
.theme-list, .theme-list-box { display: none !important; }

/* ---------- 5. 对局页布局（≥960px 桌面） ---------- */
@media (min-width: 960px) {
  /* JS 以 inline important 写入 --window-width/--window-height（按画布分辨率计算），
     这里直接覆盖消费尺寸，保证房间铺满视口 */
  .draw-what-bg {
    --draw-room-margin: 12px !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 10px 0 0 !important;
    overflow: hidden !important;
  }
  /* 高特异性：压过原站 width:calc(var(--window-width)…) 与 padding-right 侧栏占位 */
  .draw-what-bg .draw-room-box.draw-room-box {
    width: 100vw !important; height: 100% !important; margin: 0 !important;
    max-width: none !important; max-height: none !important;
    padding: 0 14px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 324px !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      "topbar  topbar"
      "members members"
      "canvas  chat" !important;
    gap: 10px 12px !important;
  }
  .draw-room-box > * { min-width: 0; min-height: 0; }
  .draw-what-bg .draw-room-box .head-info-box { grid-area: topbar !important; width: auto !important; position: relative !important; }
  .side-box { display: contents !important; }
  .draw-what-bg .draw-room-box .side-box { position: static !important; width: auto !important; }
  .draw-member-box { grid-area: members !important; }
  .draw-message-box { grid-area: chat !important; }
  .draw-what-bg .draw-room-box .left { grid-area: canvas !important; width: auto !important; display: flex !important; flex-direction: column !important; }
  .draw-canvas-box { flex: 1 !important; min-height: 0 !important; }
  .draw-bottom-box { margin-top: 10px !important; flex: none !important; }
  /* 桌面端聊天输入在工具条里，侧栏这份（移动端用）隐藏 */
  .side-box form.draw-message-form { display: none !important; }
  /* 玩家条内的房间信息卡与顶条重复，桌面隐藏 */
  .side-box .side-info-box { display: none !important; }

  /* ---- 顶条：玻璃药丸 ---- */
  .head-info-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 6px 10px 8px !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: var(--blur) !important;
    backdrop-filter: var(--blur) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.45) !important;
    color: var(--ink) !important;
    overflow: visible !important;
  }
  .head-info-box > span { flex: none !important; display: flex !important; align-items: center !important; gap: 6px !important; opacity: 1 !important; }
  .head-info-box > span > b { color: var(--ink) !important; font-weight: 650; }
  .head-info-box > div:first-of-type {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    position: static !important;
  }
  /* 房间状态角标（原 CSS 绝对定位叠字）→ 正常流内的小字 */
  .room-head-round-status-box {
    position: static !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0.06em;
  }
  .room-head-round-status-box[data-room-status="1"][data-round-status="quizing"]:before { content: "等待画手选题…" !important; }
  .room-head-round-status-box[data-room-status="1"][data-round-status="drawing"]:before { content: attr(data-room-name) !important; }
  .room-head-round-status-box[data-have-answer="true"]:before { content: attr(data-room-name) !important; }
  .room-head-round-status-box:after { content: "" !important; }

  /* 提示字块（词格）——skribbl 式字符瓦片 */
  .head-tips, .func-head-tips-box {
    pointer-events: none !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .func-head-tips-box .moji-list {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    font-weight: 700 !important;
  }
  .func-head-tips-box .moji {
    padding: 0 !important;
    min-width: 26px !important;
    height: 30px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: var(--surface-strong) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 0.5px var(--hairline) !important;
    font-size: 16px !important;
    line-height: 28px !important;
    transition: transform 0.3s var(--ease-pop), background 0.3s var(--ease) !important;
  }
  .func-head-tips-box .moji:before { content: attr(data-text); display: block !important; height: auto !important; width: auto !important; }
  .func-head-tips-box .moji:after { display: none !important; }
  .func-head-tips-box .moji[data-text=""] { background: transparent !important; box-shadow: 0 1.5px 0 var(--hairline-strong) !important; border-radius: 0 !important; }
  .func-head-tips-box .moji[data-text=""]:before { content: "•"; opacity: 0.35; }
  .func-head-tips-box .moji:not([data-text=""]) { animation: tilePop 0.45s var(--ease-pop); }
  @keyframes tilePop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .func-head-tips-box .moji-default { font-size: 12px !important; opacity: 0.55 !important; }

  /* 回合计时进度条：贴顶条底边 */
  .head-info-box .progress {
    position: absolute !important;
    left: 22px !important; right: 22px !important; bottom: 3px !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  .head-info-box .progress i {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg, var(--accent), var(--green)) !important;
    border-radius: 3px !important;
    transition: width 0.6s linear !important;
  }

  /* 离开 / 更多：图标按钮 */
  .head-info-box .leave-btn, .head-info-box .more-btn {
    position: static !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important; height: 36px !important;
    border-radius: 999px !important;
    color: var(--ink-2) !important;
    background-image: none !important;
    transition: background 160ms var(--ease), color 160ms var(--ease), transform 100ms ease-out !important;
  }
  .head-info-box .more-btn:before {
    content: "⋯";
    font-size: 22px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0.02em;
  }
  .leave-btn:hover { color: var(--red) !important; background: rgba(255, 59, 48, 0.1) !important; }
  .more-btn:hover { color: var(--ink) !important; background: var(--accent-soft) !important; }
  .leave-btn:active, .more-btn:active { transform: scale(0.92) !important; }

  /* ---- 玩家筹码横排 ---- */
  .draw-member-box {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    overflow-x: auto !important;
    padding: 2px 6px !important;
    background: transparent !important;
    scrollbar-width: none;
  }
  .draw-member-box::-webkit-scrollbar { display: none; }
  .draw-member-list { display: flex !important; gap: 8px !important; flex-wrap: nowrap !important; position: static !important; }
  .draw-member-item {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: none !important;
    padding: 5px 12px 5px 5px !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: var(--blur) !important;
    backdrop-filter: var(--blur) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 0.5px var(--hairline), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out) !important;
  }
  .draw-member-item:hover { transform: translateY(-1px) !important; }
  .draw-member-item .index {
    position: static !important;
    width: 26px !important; height: 26px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--accent), #7ac8f8) !important;
    color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important;
    flex: none !important;
  }
  .draw-member-item .nickname { position: static !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draw-member-item .score { position: static !important; font-size: 12px !important; color: var(--ink-2) !important; font-variant-numeric: tabular-nums; }
  .draw-member-item .score:after { content: " 分"; font-size: 10px; opacity: 0.75; }
  .draw-member-item[data-watch="true"] { opacity: 0.55; }
}

/* ---- 画布卡 ---- */
.draw-canvas-box {
  position: relative !important;
  background: var(--surface-solid) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  color: #1d1d1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.draw-canvas-box :is(p, h3, h4, label):not(.tag) { color: #1d1d1f !important; }
.draw-canvas-outter-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.draw-what-bg canvas.draw-canvas {
  aspect-ratio: 1280 / 960 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* ---- 工具条（原站为 float+em 硬约束布局，这里显式中和） ---- */
.draw-bottom-box {
  background: var(--surface) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border-radius: var(--radius-chip) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}
.draw-bottom-box .room-draw-options-box { float: none !important; margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
.draw-options-advanced-content-box { display: flex !important; align-items: center !important; gap: 12px 14px !important; flex-wrap: wrap !important; height: auto !important; width: auto !important; }
.bursh-config-box { display: contents !important; }

/* 颜色网格：19 色 + 系统取色器 */
.draw-options-advanced-box .color-list {
  display: grid !important;
  grid-template-columns: repeat(10, 18px) !important;
  gap: 3px !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 5px !important;
  float: none !important;
  background: var(--surface-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
}
.draw-options-advanced-box .color-list .item {
  float: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12) !important;
  transition: transform 100ms ease-out !important;
}
.draw-options-advanced-box .color-list .item:hover { transform: scale(1.18) !important; }
.draw-options-advanced-box .color-list .item:active { transform: scale(0.95) !important; }
.draw-options-advanced-box .color-list .item[data-active] {
  box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3.5px var(--accent) !important;
  border-radius: 7px !important;
}
.draw-options-advanced-box .color-list .item[data-name="eraser"] { display: none !important; }
.draw-options-advanced-box .color-list .item.system-color-picker { display: flex !important; align-items: center; justify-content: center; }

/* 粗细 / 透明度：两列圆点胶囊 */
.draw-options-advanced-box .radius-opacity-box { display: flex !important; flex-direction: column !important; gap: 6px !important; width: auto !important; height: auto !important; float: none !important; }
.draw-options-advanced-box .radius-list {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 10px !important;
  float: none !important;
  background: var(--surface-strong) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  height: auto !important;
}
.draw-options-advanced-box .radius-list .item {
  float: none !important;
  width: 19px !important;
  height: 19px !important;
  position: relative !important;
  transition: transform 100ms ease-out !important;
}
.draw-options-advanced-box .radius-list .item:before {
  margin: auto !important;
  width: 10px !important;
  height: 10px !important;
  max-width: 10px !important;
  background: var(--ink-2) !important;
  border-radius: 999px !important;
}
.draw-options-advanced-box .radius-list:first-of-type .item:after { content: attr(data-radius); }
.draw-options-advanced-box .radius-list .item:hover { transform: scale(1.15) !important; }
.draw-options-advanced-box .radius-list .item[data-active]:before {
  background: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3.5px var(--accent) !important;
}

/* 背景色板 */
.draw-options-advanced-box .background-list {
  display: grid !important;
  grid-template-columns: repeat(5, 18px) !important;
  gap: 3px !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 5px !important;
  float: none !important;
  background: var(--surface-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  position: static !important;
}
.draw-options-advanced-box .background-list .item {
  float: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12) !important;
  transition: transform 100ms ease-out !important;
}
.draw-options-advanced-box .background-list .item:hover { transform: scale(1.18) !important; }
.draw-options-advanced-box .background-list .item[data-active] { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3.5px var(--accent) !important; }

/* 笔刷 / 混合 / 撤销重做 / 工具 组 */
.draw-options-advanced-box .bursh-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  height: auto !important;
  width: auto !important;
  padding: 4px !important;
  float: none !important;
  background: var(--surface-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
}
.draw-options-advanced-box .bursh-list .bursh-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background-size: 22px !important;
  transition: background-color 140ms var(--ease), transform 100ms ease-out !important;
}
.draw-options-advanced-box .bursh-list .bursh-icon:hover { transform: scale(1.1) !important; }
.draw-options-advanced-box .bursh-list .bursh-icon:active { transform: scale(0.92) !important; }
.draw-options-advanced-box .bursh-list .bursh-icon[data-active] {
  background-color: var(--accent-soft) !important;
  border-radius: 8px !important;
}
.draw-options-advanced-box .bursh-list .bursh-icon[data-key]:before {
  font-size: 8px !important;
  color: var(--ink-3) !important;
  font-weight: 700 !important;
}


@media (prefers-color-scheme: dark) {
  .draw-options-advanced-box .bursh-list .bursh-icon { background-color: rgba(255, 255, 255, 0.92) !important; }
  .draw-options-advanced-box .bursh-list .bursh-icon[data-active] { background-color: var(--accent) !important; }
  .draw-options-advanced-box .bursh-list .bursh-icon[data-tag]:after { background: var(--red) !important; }
}

/* 原站 zoom 缩放中和 + 工具条内聊天输入 */
.draw-what-bg .draw-room-box .draw-bottom-box { zoom: 1 !important; }
.draw-bottom-box form.draw-message-form {
  flex: 1 1 260px !important;
  margin: 0 !important;
  min-width: 220px !important;
  display: flex !important;
  align-items: center !important;
}
.draw-bottom-box form.draw-message-form .message-input {
  width: 100% !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: var(--surface-strong) !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  padding: 0 42px 0 16px !important;
  font-size: 14px !important;
}
.emotion-btn-box { margin-left: -40px !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; color: var(--ink-2) !important; }
.emotion-btn-box:hover { color: var(--accent) !important; background: var(--accent-soft) !important; }
.emotion-box {
  background: var(--surface-solid) !important;
  border-radius: var(--radius-chip) !important;
  box-shadow: var(--shadow-float) !important;
  border: none !important;
}

/* ---- 右列聊天流 ---- */
.draw-message-box {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border-radius: var(--radius-chip) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.45) !important;
  padding: 12px 4px 8px 12px !important;
  box-sizing: border-box !important;
  height: 100% !important;
  width: 100% !important;
}
.side-box .draw-message-box { width: 100% !important; height: 100% !important; }
.draw-message-box .message-list { flex: 1 !important; overflow-y: auto !important; padding-right: 8px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.draw-message-box .message-list > .item { padding: 4px 6px !important; border-radius: 10px !important; font-size: 14px !important; line-height: 1.45 !important; animation: msgIn 0.25s var(--ease-out) !important; }
@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.draw-message-box .message-list > .item .text { color: var(--ink) !important; }
.draw-message-box .message-list > .item[data-type="system"], .draw-message-box .message-list > .item[data-type="join"], .draw-message-box .message-list > .item[data-type="leave"] { opacity: 0.55 !important; font-size: 12.5px !important; }
.draw-message-box .message-list > .item[data-type="near"] {
  background: rgba(255, 149, 0, 0.13) !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
}
.draw-message-box .message-list > .item[data-type="near"] .text { color: var(--orange) !important; }
.draw-message-box .message-list > .item[data-type="hit"] {
  background: rgba(52, 199, 89, 0.14) !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
}
.draw-message-box .message-list > .item[data-type="hit"] .text { color: var(--green) !important; }
.draw-message-box .message-list > .item[data-is-me="true"] .text { font-weight: 600; }

/* ---- 遮罩层：等待 / 揭晓 ---- */
.draw-shade-box {
  border-radius: var(--radius-card) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  transition: background 0.4s var(--ease) !important;
}
@media (prefers-color-scheme: dark) {
  .draw-shade-box { background: rgba(10, 10, 12, 0.55) !important; }
  .draw-shade-box :is(p, h3, h4, label):not(.tag) { color: var(--ink) !important; }
}
/* 等待开局（房主表单） */
.draw-shade-box form.start-form-box {
  background: var(--surface) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-float), inset 0 0.5px 0 rgba(255, 255, 255, 0.5) !important;
  padding: 26px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: min(360px, 92%) !important;
  box-sizing: border-box !important;
  animation: cardIn 0.4s var(--ease-out) !important;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.start-form-box .label-item { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.start-form-box .label-item p { text-align: center !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; margin: 0 0 2px !important; }
.start-form-box .ctrl-box { display: flex !important; justify-content: center !important; }
.start-form-box .draw-btn.big { min-width: 200px !important; height: 48px !important; font-size: 16px !important; border-radius: 999px !important; }
.start-form-box .tip-box { text-align: center !important; opacity: 0.6 !important; font-size: 12.5px !important; }
.start-form-box .libs-select-box, .start-form-box select.draw-input { border-radius: 10px !important; }
/* 等待画手选题（猜题者视角） */
.draw-shade-box.quizing-box { color: var(--ink) !important; }
.draw-shade-box.quizing-box:empty:before { content: ""; }

/* 揭晓答案（rest 帧） */
.draw-shade-box h2 {
  font-size: clamp(2.2em, 5vw, 3.4em) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink) !important;
  animation: revealPop 0.55s var(--ease-pop) !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.12) !important;
}
.draw-shade-box h4 { letter-spacing: 0.3em; text-indent: 0.3em; opacity: 0.62 !important; font-weight: 600 !important; }
@keyframes revealPop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---- 三选一浮层（e46367f9.js 挂类名，宿主为 .draw-canvas-box） ---- */
[data-private-wc] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.4) !important;
  -webkit-backdrop-filter: blur(5px) saturate(140%) !important;
  backdrop-filter: blur(5px) saturate(140%) !important;
}
@media (prefers-color-scheme: dark) {
  [data-private-wc] { background: rgba(10, 10, 12, 0.4) !important; }
}
/* 浮层打开时隐藏底层「等待选题」遮罩文案 */
.draw-canvas-box:has([data-private-wc]) .draw-shade-box { opacity: 0 !important; }
[data-private-wc] .nihua-wc-tip {
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0.35em !important;
  text-indent: 0.35em !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}
[data-private-wc] .nihua-wc-row { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; justify-content: center !important; pointer-events: auto !important; }
[data-private-wc] .nihua-wc-btn {
  font-size: 19px !important;
  padding: 14px 30px !important;
  border-radius: 16px !important;
  background: var(--surface-solid) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-float) !important;
  animation: wcIn 0.4s var(--ease-pop) backwards !important;
}
[data-private-wc] .nihua-wc-btn:nth-child(1) { animation-delay: 0.03s; }
[data-private-wc] .nihua-wc-btn:nth-child(2) { animation-delay: 0.09s; }
[data-private-wc] .nihua-wc-btn:nth-child(3) { animation-delay: 0.15s; }
@keyframes wcIn { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } }
[data-private-wc] .nihua-wc-btn:hover { background: var(--accent) !important; color: #fff !important; transform: translateY(-2px) scale(1.03) !important; }
[data-private-wc] .nihua-wc-btn:active { transform: scale(0.96) !important; }

/* ---- 更多选项面板（管理员菜单） ---- */
.draw-more-info-box {
  background: var(--surface-strong) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border-radius: 0 0 0 16px !important;
  box-shadow: var(--shadow-float) !important;
  padding: 12px !important;
  width: 300px !important;
}
.draw-more-info-box .draw-btn,
.current-member-admin-ctrl-box .draw-btn,
.admin-ctrl-box .draw-btn {
  background: var(--surface-strong) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  margin: 2px !important;
}
.draw-more-info-box .draw-btn.red-wire, .current-member-admin-ctrl-box .draw-btn.red-wire {
  color: var(--red) !important;
  background: rgba(255, 59, 48, 0.1) !important;
  box-shadow: 0 0 0 0.5px rgba(255, 59, 48, 0.4) !important;
}
.draw-more-info-box .draw-btn.red-wire:hover, .current-member-admin-ctrl-box .draw-btn.red-wire:hover { background: var(--red) !important; color: #fff !important; }
.current-member-admin-ctrl-box, .admin-ctrl-box {
  background: var(--surface) !important;
  border-radius: 12px !important;
  padding: 8px 10px 10px !important;
  margin: 10px 0 !important;
  overflow: visible !important;
}
.current-member-admin-ctrl-box:before {
  content: "管理员操作（谨慎使用）" !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  background: none !important;
  padding: 2px 2px 4px !important;
}
.admin-ctrl-box:before { content: "管理员操作" !important; color: var(--ink-2) !important; font-size: 11px !important; background: none !important; }

/* ---------- 6. 加入房间 / 设置 / 词库等页面 ---------- */
@media (min-width: 960px) {
  .draw-join-room-box { max-width: 560px !important; margin: 44px auto 0 !important; padding: 30px 34px !important; }
  .view-settings-box { max-width: 1080px !important; margin: 24px auto !important; }
}
.label-item .switch, .ui-switch, .ui-switch .track { background: rgba(120, 120, 128, 0.32) !important; }
.more-options-box { background: transparent !important; color: var(--ink) !important; }
.view-room-create-box :is(p, .more-options-box :is(h4, span, label)):not(.tag) { color: var(--ink) !important; }

/* ---------- 6.5 接龙（传话链）加入页 ---------- */
.view-chain-room-box .layout.draw-join-room-box {
  max-width: 560px !important;
  margin: 44px auto 0 !important;
  padding: 34px 30px !important;
  text-align: center !important;
}
.view-chain-room-box .draw-join-room-box button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 13px 38px !important;
  margin: 8px 4px !important;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35) !important;
  transition: transform 100ms ease-out, background 160ms var(--ease) !important;
}
.view-chain-room-box .draw-join-room-box button:hover { background: var(--accent-hover) !important; }
.view-chain-room-box .draw-join-room-box button:active { transform: scale(0.96) !important; }
.view-chain-room-box .draw-join-room-box input {
  border-radius: 999px !important;
  background: var(--surface-strong) !important;
  box-shadow: 0 0 0 0.5px var(--hairline) !important;
  padding: 10px 18px !important;
  margin: 6px !important;
}
.view-chain-room-box .side-box { max-width: 100vw !important; }

/* ---------- 6.6 画廊页容器 ---------- */
.view-gallery-box, .view-gallerys-box {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 18px 28px 60px !important;
}
/* 标题与筛选区之间原站有大幅空带（filter-box 内部占位），收紧 */
.view-gallery-box .filter-box, .view-gallerys-box .filter-box {
  padding: 4px 0 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.view-gallery-box .filter-box > *, .view-gallerys-box .filter-box > * { margin-top: 0 !important; }
/* 筛选区顶部的空占位 div（原站遗留，158px 空带） */
.view-gallery-box .filter-box > div:empty, .view-gallerys-box .filter-box > div:empty { display: none !important; }

/* ---------- 7. 页脚与其他 ---------- */
/* 举报入口图标缺资源，私服场景隐藏 */
.draw-message-box .message-list .item .report { display: none !important; }
/* 首页空态高度收紧 */
.func-rooms-box .rooms-box { min-height: 150px !important; }
.draw-footer, .draw-footer-shell { display: none !important; }
@keyframes nearPulse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.draw-message-box .message-list > .item[data-type="near"] { animation: nearPulse 0.5s ease, msgIn 0.25s var(--ease-out) !important; }
.draw-show-more-info-btn { background: var(--surface-strong) !important; color: var(--ink-2) !important; border-radius: 10px 0 0 0 !important; box-shadow: 0 0 0 0.5px var(--hairline) !important; }

/* ---------- 8. 无障碍三档 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .room-item:hover, .draw-btn:hover, .ui-btn:hover, [data-private-wc] .nihua-wc-btn:hover { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .head-info-box, .draw-bottom-box, .draw-member-box, .draw-member-item,
  .draw-message-box, .view-home-box, .func-rooms-box, .draw-join-room-box,
  .view-settings-box, .lib-edit-box, .seele-box, .draw-shade-box form.start-form-box {
    background: var(--surface-strong) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  :root { --surface: #ffffff; --hairline: rgba(0, 0, 0, 0.4); --hairline-strong: rgba(0, 0, 0, 0.55); }
  .draw-btn, .ui-btn, .draw-member-item, .head-info-box { box-shadow: 0 0 0 1px var(--hairline-strong) !important; }
}