/* 房间创新中心与大厅模式卡。该文件最后加载，仅使用现有主题变量，不改变白板 Grid。 */

.room-features-hidden { display:none!important; }

#roomFeaturesBtn { position:relative; color:#bfc8ff; font-size:12px; font-weight:750; letter-spacing:0; }
.room-features-unread {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; color:#fff; background:#ef445d; border:2px solid var(--bg-deep,#17191c);
  border-radius:999px; font:700 9px/1 sans-serif; pointer-events:none;
}

.room-features-drawer {
  --room-panel:#24272d;
  --room-panel-soft:#2d3138;
  --room-panel-hover:#363b44;
  --room-line:#454b55;
  --room-text:#edf0f4;
  --room-muted:#a9b1bd;
  --room-faint:#7f8997;
  --room-accent:#7787f5;
  position:fixed; top:46px; right:0; bottom:0; z-index:92;
  width:min(390px,calc(100vw - 16px)); min-height:0;
  display:flex; flex-direction:column; color:var(--room-text); background:var(--room-panel);
  border-left:1px solid var(--room-line); box-shadow:-18px 0 42px rgba(0,0,0,.3);
  font-family:inherit; contain:layout paint;
}
:root[data-theme="light"] .room-features-drawer {
  --room-panel:#fff;
  --room-panel-soft:#f1f4f7;
  --room-panel-hover:#e8edf2;
  --room-line:#d3dbe4;
  --room-text:#202a36;
  --room-muted:#596675;
  --room-faint:#7a8795;
  --room-accent:#1769e0;
  box-shadow:-16px 0 38px rgba(38,49,64,.16);
}
.room-features-header {
  min-height:58px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 13px; background:var(--room-panel); border-bottom:1px solid var(--room-line);
}
.room-features-heading { min-width:0; display:flex; flex-direction:column; gap:2px; }
.room-features-heading strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.room-features-mode { color:var(--room-muted); font-size:10px; }
.room-features-close {
  width:36px; height:36px; flex:0 0 36px; color:var(--room-muted); background:transparent;
  border:1px solid transparent; border-radius:6px; cursor:pointer; font:22px/1 inherit;
}
.room-features-close:hover,.room-features-close:focus-visible { color:var(--room-text); background:var(--room-panel-hover); border-color:var(--room-line); }

.room-features-tabs {
  flex:0 0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:4px;
  padding:7px 8px; background:var(--room-panel); border-bottom:1px solid var(--room-line);
}
.room-features-tab {
  min-width:0; min-height:36px; padding:6px 8px; overflow:hidden; color:var(--room-muted);
  background:transparent; border:1px solid transparent; border-radius:6px; cursor:pointer;
  font:600 11px/1.2 inherit; text-overflow:ellipsis; white-space:nowrap;
}
.room-features-tab:hover { color:var(--room-text); background:var(--room-panel-hover); }
.room-features-tab.active { color:#fff; background:var(--room-accent); border-color:transparent; }
.room-features-body { min-height:0; flex:1; display:flex; overflow:hidden; }
.room-features-panel { min-width:0; min-height:0; width:100%; padding:12px; overflow:auto; overscroll-behavior:contain; }
.room-features-panel[hidden] { display:none!important; }
.room-feature-section-title { margin:14px 0 7px; color:var(--room-muted); font-size:10px; font-weight:700; letter-spacing:.65px; text-transform:uppercase; }
.room-feature-empty { padding:20px 12px; color:var(--room-faint); font-size:11px; line-height:1.55; text-align:center; }
.room-feature-notice {
  margin-bottom:10px; padding:8px 10px; color:var(--room-muted); background:var(--room-panel-soft);
  border:1px solid var(--room-line); border-radius:6px; font-size:11px; line-height:1.5;
}
.room-feature-notice[data-kind="error"] { color:#ffb3b9; background:rgba(171,43,57,.2); border-color:rgba(218,83,98,.42); }
.room-feature-notice[data-kind="success"] { color:#a8e4c0; background:rgba(33,133,82,.18); border-color:rgba(65,176,113,.38); }
.room-feature-notice[data-kind="warning"] { color:#f4d290; background:rgba(150,105,23,.2); border-color:rgba(198,145,48,.4); }
:root[data-theme="light"] .room-feature-notice[data-kind="error"] { color:#a51e34; background:#fff0f2; }
:root[data-theme="light"] .room-feature-notice[data-kind="success"] { color:#176e3c; background:#eefaf3; }
:root[data-theme="light"] .room-feature-notice[data-kind="warning"] { color:#7a5412; background:#fff8e8; }
.room-primary-button {
  min-height:38px; padding:8px 13px; color:#fff; background:var(--room-accent);
  border:0; border-radius:6px; cursor:pointer; font:650 11px/1.25 inherit;
}
.room-primary-button:hover:not(:disabled) { filter:brightness(1.09); }
.room-primary-button:disabled { opacity:.52; cursor:wait; }
.room-danger-button {
  min-height:38px; padding:8px 13px; color:#fff; background:#b83c50;
  border:1px solid #dc6275; border-radius:6px; cursor:pointer; font:700 11px/1.25 inherit;
}
.room-danger-button:hover:not(:disabled),.room-danger-button:focus-visible { background:#cf465d; border-color:#ff8192; }
.room-danger-button:disabled { opacity:.48; cursor:wait; }
.room-secondary-button {
  min-height:38px; padding:8px 13px; color:var(--room-text); background:var(--room-panel-soft);
  border:1px solid var(--room-line); border-radius:6px; cursor:pointer; font:650 11px/1.25 inherit;
}
.room-secondary-button:hover:not(:disabled) { background:var(--room-panel-hover); }
.room-secondary-button:disabled { opacity:.46; cursor:not-allowed; }

/* 聊天 */
#roomFeaturesPanel-chat { display:flex; flex-direction:column; overflow:hidden; }
.room-chat-list { min-height:150px; flex:1; overflow:auto; padding:2px 3px 12px; overscroll-behavior:contain; }
.room-chat-message { max-width:88%; margin:0 0 9px; }
.room-chat-message.own { margin-left:auto; }
.room-chat-meta { display:flex; align-items:center; gap:7px; margin:0 3px 3px; }
.room-chat-message.own .room-chat-meta { justify-content:flex-end; }
.room-chat-meta strong { min-width:0; overflow:hidden; color:var(--room-muted); font-size:10px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.room-chat-meta time { color:var(--room-faint); font-size:9px; }
.room-chat-message p {
  margin:0; padding:8px 10px; overflow-wrap:anywhere; color:var(--room-text); background:var(--room-panel-soft);
  border:1px solid var(--room-line); border-radius:5px 12px 12px; font-size:12px; line-height:1.55; white-space:pre-wrap;
}
.room-chat-message.own p { color:#fff; background:#315fa6; border-color:#4779c1; border-radius:12px 5px 12px 12px; }
.room-chat-form { flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding-top:9px; border-top:1px solid var(--room-line); }
.room-chat-input,.room-game-input,.room-game-select {
  width:100%; min-width:0; color:var(--room-text); background:var(--room-panel-soft);
  border:1px solid var(--room-line); border-radius:6px; outline:0; font:12px/1.45 inherit;
}
.room-chat-input { min-height:42px; max-height:120px; padding:8px 9px; resize:vertical; }
.room-chat-input:focus,.room-game-input:focus,.room-game-select:focus { border-color:var(--room-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--room-accent) 17%,transparent); }
.room-chat-form .room-primary-button { align-self:end; }

/* 你画我猜 */
.room-game-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; padding:11px 12px; background:var(--room-panel-soft); border:1px solid var(--room-line); border-radius:8px; }
.room-game-summary strong { font-size:12px; }
.room-game-drag-handle { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.room-game-drag-handle:focus-visible { outline:2px solid #aeb8ff; outline-offset:2px; }
.room-game-hud-panel.dragging .room-game-drag-handle { cursor:grabbing; }
.room-game-summary-actions { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.room-game-timer { min-width:56px; color:#aebaff; font:750 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-align:right; font-variant-numeric:tabular-nums; }
.room-game-panel-reset {
  width:30px; height:30px; display:grid; place-items:center; color:#e8ebff; background:rgba(99,111,198,.4);
  border:1px solid rgba(210,216,255,.3); border-radius:8px; cursor:pointer; font:700 16px/1 inherit;
}
.room-game-panel-reset:hover,.room-game-panel-reset:focus-visible { color:#fff; background:rgba(119,135,245,.72); border-color:#b9c2ff; }
.room-game-timer.urgent { color:#ff7588; animation:room-timer-pulse .75s ease-in-out infinite alternate; }
@keyframes room-timer-pulse { to { opacity:.56; } }
.room-game-role-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.room-role-button { min-height:37px; padding:6px; color:var(--room-muted); background:var(--room-panel-soft); border:1px solid var(--room-line); border-radius:6px; cursor:pointer; font:600 10px/1.2 inherit; }
.room-role-button:hover:not(:disabled) { color:var(--room-text); background:var(--room-panel-hover); }
.room-role-button.active { color:#fff; background:#535fc5; border-color:#8993f0; }
.room-role-button:disabled { opacity:.55; cursor:wait; }
.room-game-role-list { display:grid; gap:4px; margin-top:8px; }
.room-game-role-row { min-width:0; display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; padding:6px 8px; background:var(--room-panel-soft); border-radius:5px; }
.room-game-role-row span { color:var(--room-faint); font-size:10px; }
.room-game-role-row strong { overflow:hidden; font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.room-game-prompt { margin-top:12px; padding:12px; color:#fff; background:linear-gradient(145deg,#7253ad,#345ca9); border:1px solid rgba(194,184,255,.42); border-radius:8px; }
.room-game-prompt small { display:block; margin-bottom:4px; color:#e2dcff; font-size:9px; letter-spacing:.6px; }
.room-game-prompt strong { display:block; overflow-wrap:anywhere; font-size:16px; }
.room-game-form { margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.room-game-form label { grid-column:1/-1; color:var(--room-muted); font-size:10px; font-weight:650; }
.room-game-input,.room-game-select { min-height:38px; padding:8px 9px; }
.room-game-select { width:auto; }
.room-game-select option { color:#1f2937; background:#fff; }
.room-game-form .room-primary-button { grid-column:1/-1; }
.room-game-submission-status {
  margin:9px 0 3px; padding:8px 9px; color:#dbe1ff; background:rgba(91,104,188,.22);
  border:1px solid rgba(174,184,255,.3); border-radius:7px; font-size:10px; line-height:1.45;
}
.room-game-submission-status.all-submitted { color:#bdf2d4; background:rgba(38,139,87,.22); border-color:rgba(100,213,150,.42); }
.room-game-guesses { display:grid; gap:6px; }
.room-game-guess { min-width:0; display:flex; align-items:center; gap:8px; padding:8px; background:var(--room-panel-soft); border:1px solid var(--room-line); border-radius:6px; }
.room-game-guess-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.room-game-guess-copy strong { overflow:hidden; color:var(--room-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.room-game-guess-copy span { overflow-wrap:anywhere; font-size:11px; }
.room-game-guess-actions { display:flex; gap:4px; }
.room-game-guess-actions button { padding:5px 7px; color:var(--room-text); background:var(--room-panel); border:1px solid var(--room-line); border-radius:4px; cursor:pointer; font-size:9px; }
.room-game-guess-actions button.correct:hover { color:#baf0ce; border-color:#4eae78; }
.room-game-guess-actions button.wrong:hover { color:#ffc0c5; border-color:#c25d68; }
.room-game-guess em.verdict { padding:3px 6px; border-radius:4px; font-size:9px; font-style:normal; }
.room-game-guess em.pending { color:#e1e5f5; background:rgba(130,138,170,.2); }
.room-game-guess em.correct { color:#baf0ce; background:rgba(47,153,90,.22); }
.room-game-guess em.wrong { color:#ffc0c5; background:rgba(184,65,80,.22); }
.room-next-round { width:100%; margin-top:12px; }
.room-end-game { width:100%; margin-top:7px; }
.room-game-leaderboard { margin:0; padding:0; display:grid; gap:5px; list-style:none; }
.room-game-rank-row {
  min-width:0; display:grid; grid-template-columns:27px minmax(0,1fr) auto; align-items:center; gap:7px;
  padding:7px 8px; color:var(--game-hud-text,var(--room-text)); background:rgba(21,25,39,.36);
  border:1px solid rgba(226,230,255,.13); border-radius:7px;
}
.room-game-rank-row.mvp { background:linear-gradient(135deg,rgba(184,126,31,.3),rgba(91,78,171,.28)); border-color:rgba(255,209,105,.46); }
.room-game-rank-number { display:grid; place-items:center; width:24px; height:24px; color:#d7dcf8; background:rgba(255,255,255,.08); border-radius:7px; font-size:10px; font-weight:800; }
.room-game-rank-row.mvp .room-game-rank-number { color:#3b2a05; background:#ffd86e; }
.room-game-rank-player { min-width:0; display:grid; grid-template-columns:minmax(0,auto) auto; align-items:center; justify-content:start; gap:2px 5px; }
.room-game-rank-player strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.room-game-rank-player small { grid-column:1/-1; color:var(--game-hud-muted,var(--room-muted)); font-size:8px; }
.room-game-mvp { padding:2px 5px; color:#3c2a04; background:#ffd86e; border-radius:999px; font-size:7px; font-style:normal; font-weight:900; letter-spacing:.45px; }
.room-game-rank-points { color:#ffe29a; font-size:11px; white-space:nowrap; }
.room-game-leaderboard-empty { padding:11px 8px; color:var(--game-hud-muted,var(--room-faint)); background:rgba(21,25,39,.25); border-radius:7px; font-size:9px; text-align:center; }

/* 你画我猜画布 HUD：外层永不拦截绘图，只有实际控件接收指针。游戏信息以
   两块轻量透明浮层停靠在画布边缘，中心区域始终留给所有角色观察画布。 */
.room-game-hud {
  --game-hud-text:#f6f7ff;
  --game-hud-muted:#c5cad8;
  --game-hud-line:rgba(226,230,255,.23);
  --game-hud-surface:rgba(16,19,31,.5);
  position:absolute; inset:0; z-index:9; overflow:hidden; color:var(--game-hud-text);
  pointer-events:none; font-family:inherit;
}
.room-game-hud-panel {
  position:absolute; top:54px; right:12px; width:min(360px,calc(100% - 24px));
  height:min(62%,600px); min-width:min(280px,calc(100% - 16px)); min-height:min(220px,calc(100% - 16px));
  max-width:calc(100% - 16px); max-height:calc(100% - 66px); padding:10px; overflow:auto; overscroll-behavior:contain;
  box-sizing:border-box;
  color:var(--game-hud-text); background:var(--game-hud-surface);
  border:1px solid var(--game-hud-line); border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.19);
  backdrop-filter:blur(9px) saturate(112%); -webkit-backdrop-filter:blur(9px) saturate(112%);
  pointer-events:auto; touch-action:pan-y; resize:both;
}
.room-game-hud-panel.room-features-panel { min-width:min(280px,calc(100% - 16px)); min-height:min(220px,calc(100% - 16px)); }
.room-game-hud-panel .room-game-summary { margin-bottom:6px; padding:8px 9px; background:rgba(21,25,39,.42); border-color:var(--game-hud-line); }
.room-game-hud-panel .room-feature-notice { margin-bottom:7px; padding:6px 8px; }
.room-game-hud-panel .room-feature-notice:not([data-kind="error"]):not([data-kind="success"]):not([data-kind="warning"]) { color:var(--game-hud-muted); background:rgba(21,25,39,.38); border-color:var(--game-hud-line); }
.room-game-hud-panel .room-feature-section-title { margin:9px 0 5px; color:var(--game-hud-muted); }
.room-game-hud-panel .room-game-role-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:5px; }
.room-game-hud-panel .room-game-role-row { grid-template-columns:1fr; gap:2px; padding:5px 6px; background:rgba(21,25,39,.36); }
.room-game-hud-panel .room-game-role-row span,.room-game-hud-panel .room-game-role-row strong { font-size:9px; }
.room-game-hud-panel .room-game-form { margin-top:8px; }
.room-game-hud-panel .room-game-prompt { margin-top:8px; padding:8px 9px; }
.room-game-hud-panel .room-game-prompt strong { font-size:14px; }
.room-game-hud-panel .room-game-guesses { max-height:150px; overflow:auto; overscroll-behavior:contain; }
.room-game-hud-panel .room-primary-button {
  color:#fff; background:#6575e6; border:1px solid #93a0ff; box-shadow:0 5px 15px rgba(24,31,91,.25);
}
.room-game-hud-panel .room-primary-button:hover:not(:disabled),.room-game-hud-panel .room-primary-button:focus-visible { background:#7484f2; }

/* 滚动内容默认隐藏轨道，悬停、键盘聚焦或实际交互时再显现细滚动条。 */
.room-game-hud-panel,.room-game-guesses,.room-game-leaderboard,.room-live-chat-list,.room-features-panel {
  scrollbar-width:none; scrollbar-color:transparent transparent;
}
.room-game-hud-panel::-webkit-scrollbar,.room-game-guesses::-webkit-scrollbar,
.room-game-leaderboard::-webkit-scrollbar,.room-live-chat-list::-webkit-scrollbar,
.room-features-panel::-webkit-scrollbar { width:0; height:0; }
.room-game-hud-panel:hover,.room-game-hud-panel:focus-within,.room-game-guesses:hover,
.room-game-guesses:focus-within,.room-live-chat-list:hover,.room-live-chat-list:focus-within,
.room-features-panel:hover,.room-features-panel:focus-within {
  scrollbar-width:thin; scrollbar-color:rgba(185,194,227,.5) transparent;
}
.room-game-hud-panel:hover::-webkit-scrollbar,.room-game-hud-panel:focus-within::-webkit-scrollbar,
.room-game-guesses:hover::-webkit-scrollbar,.room-game-guesses:focus-within::-webkit-scrollbar,
.room-live-chat-list:hover::-webkit-scrollbar,.room-live-chat-list:focus-within::-webkit-scrollbar,
.room-features-panel:hover::-webkit-scrollbar,.room-features-panel:focus-within::-webkit-scrollbar { width:6px; height:6px; }
.room-game-hud-panel::-webkit-scrollbar-thumb,.room-game-guesses::-webkit-scrollbar-thumb,
.room-live-chat-list::-webkit-scrollbar-thumb,.room-features-panel::-webkit-scrollbar-thumb {
  background:rgba(185,194,227,.46); border-radius:999px;
}

/* 聊天消息层本身完全透明；文字使用描边阴影保持在浅色、深色及网格画布上都可读。
   只有发送输入条采用很低透明度的磨砂层，避免遮住其后的绘画内容。 */
.room-live-chat {
  position:absolute; left:14px; bottom:55px; width:min(390px,calc(100% - 28px));
  max-height:min(34%,310px); min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:5px;
  background:transparent; pointer-events:none;
}
.room-live-chat-heading { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:0 4px; color:var(--game-hud-muted); text-shadow:0 1px 3px #000; font-size:9px; }
.room-live-chat-heading strong { font-size:10px; letter-spacing:.45px; }
.room-live-chat-list {
  flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:3px 4px;
  background:transparent; pointer-events:auto; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 100%);
}
.room-live-chat-message {
  margin:3px 0; padding:0; overflow-wrap:anywhere; color:#fff; background:transparent;
  font-size:12px; line-height:1.45; text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.9);
}
.room-live-chat-message time { margin-right:5px; color:rgba(255,255,255,.7); font-size:9px; font-variant-numeric:tabular-nums; }
.room-live-chat-message strong { color:#bfc9ff; font-weight:750; }
.room-live-chat-message.own strong { color:#8ff0c7; }
.room-live-chat-empty { padding:4px 0; color:rgba(255,255,255,.74); font-size:10px; text-shadow:0 1px 3px #000; }
.room-live-chat-notice { align-self:flex-start; padding:3px 7px; color:#fff; background:rgba(10,13,24,.46); border-radius:999px; font-size:9px; pointer-events:none; }
.room-live-chat-notice[data-kind="error"] { color:#ffd2d7; }
.room-live-chat-form {
  flex:0 0 auto; width:min(100%,360px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px;
  padding:5px; background:rgba(11,14,24,.24); border:1px solid rgba(255,255,255,.18);
  border-radius:11px; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); pointer-events:auto;
}
.room-live-chat-input {
  min-width:0; min-height:36px; padding:7px 9px; color:#fff; background:rgba(6,9,18,.2);
  border:1px solid rgba(255,255,255,.2); border-radius:8px; outline:0; font:12px/1.35 inherit;
}
.room-live-chat-input::placeholder { color:rgba(242,244,255,.72); }
.room-live-chat-input:focus { border-color:#aeb8ff; box-shadow:0 0 0 3px rgba(119,135,245,.2); }
.room-live-chat-send {
  min-width:55px; min-height:36px; padding:6px 10px; color:#fff; background:rgba(77,91,194,.76);
  border:1px solid rgba(190,199,255,.34); border-radius:8px; cursor:pointer; font:700 11px/1 inherit;
  touch-action:manipulation;
}
.room-live-chat-send:hover:not(:disabled),.room-live-chat-send:focus-visible { background:rgba(89,104,218,.9); }
.room-live-chat-send:disabled { opacity:.55; cursor:wait; }

/* 画布工具菜单与就地选区栏仍应盖在 HUD 上，确保 AI/背景等常驻工具可随时操作。 */
#canvasWrap > .ai-menu { z-index:15; }

/* 登录后的四模式中心：同一信息层级、不同视觉语义，桌面四列并自适应收束。 */
.dashboard-mode-section { width:min(1180px,100%); margin:0 auto 30px; }
.dashboard-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dashboard-mode-card {
  --mode-accent:#7283ff; --mode-accent-2:#9c61e8; --mode-soft:rgba(114,131,255,.13);
  position:relative; min-width:0; min-height:370px; padding:22px; overflow:hidden;
  display:flex; flex-direction:column; color:var(--text,#eef0f4);
  background:
    radial-gradient(circle at 105% -8%,var(--mode-soft),transparent 43%),
    linear-gradient(155deg,rgba(31,35,69,.94),rgba(17,20,42,.96));
  border:1px solid color-mix(in srgb,var(--mode-accent) 34%,var(--border,rgba(255,255,255,.12)));
  border-radius:22px; box-shadow:0 18px 45px rgba(3,7,22,.24);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.dashboard-mode-card::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--mode-accent),var(--mode-accent-2)); }
.dashboard-mode-card::after { content:''; position:absolute; width:150px; height:150px; right:-80px; bottom:-90px; border:1px solid color-mix(in srgb,var(--mode-accent) 25%,transparent); border-radius:50%; }
.dashboard-mode-card.solo { --mode-accent:#22a77b; --mode-accent-2:#3d9bd5; --mode-soft:rgba(34,167,123,.15); }
.dashboard-mode-card.collab { --mode-accent:#6579ed; --mode-accent-2:#8a6cf0; --mode-soft:rgba(101,121,237,.16); }
.dashboard-mode-card.game { --mode-accent:#df6a6d; --mode-accent-2:#ef9a55; --mode-soft:rgba(223,106,109,.15); }
.dashboard-mode-card.ai-image { --mode-accent:#a565e8; --mode-accent-2:#e35fa5; --mode-soft:rgba(165,101,232,.16); }
.dashboard-mode-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--mode-accent) 68%,#fff 8%); box-shadow:0 23px 55px rgba(3,7,22,.34); }
.dashboard-mode-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dashboard-mode-icon { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; color:var(--mode-accent); background:var(--mode-soft); border:1px solid color-mix(in srgb,var(--mode-accent) 36%,transparent); border-radius:16px; }
.dashboard-mode-icon svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-mode-index { color:color-mix(in srgb,var(--mode-accent) 82%,#fff 18%); font-size:10px; font-weight:800; letter-spacing:1.35px; }
.dashboard-mode-card h2 { margin:24px 0 10px; color:inherit; font-size:24px; letter-spacing:-.35px; }
.dashboard-mode-card > p { min-height:66px; margin:0; color:var(--text-dim,#aeb4c1); font-size:13px; line-height:1.7; }
.dashboard-mode-features { margin:16px 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }
.dashboard-mode-features li { padding:6px 8px; color:color-mix(in srgb,var(--mode-accent) 72%,#fff 28%); background:var(--mode-soft); border:1px solid color-mix(in srgb,var(--mode-accent) 24%,transparent); border-radius:999px; font-size:11px; font-weight:650; }
.dashboard-mode-actions { position:relative; z-index:1; margin-top:auto; display:grid; grid-template-columns:1fr; gap:8px; }
.mode-action { min-height:46px; padding:10px 13px; border-radius:11px; cursor:pointer; font:700 12px/1.25 inherit; transition:filter .18s,transform .18s,border-color .18s,background .18s; }
.mode-action.primary { color:#fff; background:linear-gradient(135deg,var(--mode-accent),var(--mode-accent-2)); border:0; box-shadow:0 9px 22px color-mix(in srgb,var(--mode-accent) 24%,transparent); }
.mode-action.secondary { color:var(--text-dim,#c9ceda); background:rgba(255,255,255,.035); border:1px solid color-mix(in srgb,var(--mode-accent) 26%,var(--border)); }
.mode-action:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.mode-action:focus-visible { outline:3px solid color-mix(in srgb,var(--mode-accent) 35%,transparent); outline-offset:2px; }
.mode-action:disabled { opacity:.58; cursor:wait; transform:none; }
.mode-create-status { min-height:22px; padding-top:7px; color:#ffb0bb; font-size:12px; text-align:center; }
:root[data-theme="light"] .dashboard-mode-card { color:#202a36; background:radial-gradient(circle at 105% -8%,var(--mode-soft),transparent 43%),#fff; border-color:color-mix(in srgb,var(--mode-accent) 35%,#d7dee7); box-shadow:0 14px 34px rgba(38,49,64,.11); }
:root[data-theme="light"] .dashboard-mode-card > p { color:#596675; }
:root[data-theme="light"] .dashboard-mode-features li { color:color-mix(in srgb,var(--mode-accent) 76%,#27313d 24%); }
:root[data-theme="light"] .mode-action.secondary { color:#445160; background:#f8fafc; }

/* 旧版 Edge/Chromium 不支持 color-mix() 时保留清晰边界、文字和键盘焦点。 */
@supports not (color:color-mix(in srgb,#000 50%,#fff)) {
  .dashboard-mode-card { border:1px solid rgba(118,132,238,.36); }
  .dashboard-mode-card:hover { border-color:rgba(142,154,255,.72); }
  .dashboard-mode-card::after,.dashboard-mode-icon,.dashboard-mode-features li { border:1px solid rgba(132,146,245,.3); }
  .dashboard-mode-index,.dashboard-mode-features li { color:#d7dcff; }
  .mode-action.primary { box-shadow:0 9px 22px rgba(93,108,222,.25); }
  .mode-action.secondary { border:1px solid rgba(132,146,245,.32); }
  .mode-action:focus-visible { outline:3px solid rgba(124,139,245,.42); }
  :root[data-theme="light"] .dashboard-mode-card { border-color:#c6cede; }
  :root[data-theme="light"] .dashboard-mode-features li { color:#4355a8; }
}

@media (max-width:1050px) {
  .dashboard-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) {
  .room-features-drawer { inset:0; z-index:115; width:100%; max-width:none; border:0; contain:layout paint; }
  .room-features-header { min-height:calc(58px + env(safe-area-inset-top)); padding-top:calc(10px + env(safe-area-inset-top)); }
  .room-features-body { padding-bottom:env(safe-area-inset-bottom); }
  .room-features-panel { padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .room-game-hud-panel {
    top:48px; right:8px; width:min(340px,calc(100% - 16px)); height:min(54%,440px);
    max-height:calc(100% - 58px);
    padding:8px; border-radius:12px;
  }
  .room-live-chat { left:10px; bottom:58px; width:min(350px,calc(100% - 20px)); max-height:29%; }
}

@media (max-width:760px) {
  .dashboard-mode-grid { grid-template-columns:1fr; }
  .dashboard-mode-card { min-height:0; padding:19px; border-radius:18px; }
  .dashboard-mode-card > p { min-height:0; }
  .mode-action { min-height:48px; }
  .room-features-tabs { padding-inline:max(8px,env(safe-area-inset-left)); }
  .room-features-tab { min-height:44px; font-size:12px; }
  .room-features-close { width:44px; height:44px; flex-basis:44px; }
  .room-chat-form { grid-template-columns:1fr; }
  .room-chat-form .room-primary-button { min-height:44px; }
  .room-game-hud-panel { height:min(48%,420px); }
  .room-live-chat { bottom:max(58px,calc(48px + env(safe-area-inset-bottom))); max-height:27%; }
  .room-live-chat-form { width:100%; }
  .room-live-chat-input,.room-live-chat-send { min-height:44px; }
}

@media (max-width:420px) {
  .dashboard-mode-icon { width:46px; height:46px; flex-basis:46px; border-radius:14px; }
  .dashboard-mode-card h2 { margin-top:19px; font-size:22px; }
  .room-features-panel { padding-inline:9px; }
  .room-game-form { grid-template-columns:1fr; }
  .room-game-form label,.room-game-form .room-primary-button { grid-column:1; }
  .room-game-select { width:100%; }
  .room-game-guess { align-items:flex-start; flex-direction:column; }
  .room-game-guess-actions { width:100%; }
  .room-game-guess-actions button { min-height:38px; flex:1; }
  .room-game-hud-panel { top:46px; right:6px; width:calc(100% - 12px); height:min(50%,430px); max-height:calc(100% - 54px); }
  .room-game-hud-panel .room-game-role-list { grid-template-columns:1fr 1fr; }
  .room-game-hud-panel .room-game-role-row:last-child { grid-column:1/-1; }
  .room-live-chat { left:7px; width:calc(100% - 14px); max-height:25%; }
  .room-live-chat-message { font-size:11px; }
}

/* 极短视口改为左右停靠，避免聊天表单被 HUD 的 overflow 裁掉；两侧浮层之间仍
   保留可直接观察和绘制的画布通道。各自内部独立滚动，不把整页重新撑高。 */
@media (max-height:520px) {
  .room-game-hud-panel {
    top:48px; right:4px; width:min(350px,46%); height:calc(100% - 56px); max-height:calc(100% - 56px);
  }
  .room-live-chat {
    left:4px; bottom:4px; width:min(390px,48%); height:calc(100% - 8px); max-height:none;
  }
  .room-live-chat-heading { display:none; }
  .room-live-chat-form { padding:3px; }
  .room-live-chat-input,.room-live-chat-send { min-height:34px; }
}

@media (max-width:560px) {
  .room-game-hud-panel.room-features-panel { min-width:0; min-height:180px; resize:none; }
  .room-game-drag-handle { min-height:44px; }
  .room-game-panel-reset { width:34px; height:34px; }
  .room-game-rank-row { grid-template-columns:25px minmax(0,1fr) auto; }
}

@media (prefers-reduced-motion:reduce) {
  .room-game-timer.urgent { animation:none; }
  .dashboard-mode-card,.mode-action { transition:none; }
  .room-game-hud-panel,.room-live-chat-form { backdrop-filter:none; -webkit-backdrop-filter:none; }
}