/* Light console pass: reduce the heavy black/green feel. */
.module-bar {
  border-color: rgba(55, 78, 70, 0.12);
  background: rgba(255, 253, 247, 0.92);
  color: #19342f;
  box-shadow: 0 14px 34px rgba(38, 56, 50, 0.12);
}

.module-brand {
  background: #f2a42a;
  color: #241303;
}

.module-current,
.module-nav a,
.module-nav span,
.stealth-nav button,
.mode-chip {
  border-color: rgba(55, 78, 70, 0.14);
  background: #f5f7f4;
  color: #36524a;
}

.module-nav .active {
  border-color: rgba(213, 139, 40, 0.48);
  background: #fff2d8;
  color: #6a3e04;
}

.mode-chip {
  border-color: rgba(17, 133, 108, 0.22);
  background: #e8f5f1;
  color: #0f5c4f;
}

.section-head,
.toolbox-head,
.community-head {
  border-color: rgba(55, 78, 70, 0.12);
  background:
    linear-gradient(90deg, rgba(22, 90, 76, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(22, 90, 76, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, #fffdf7 0%, #eef6f1 58%, #f3f0e8 100%);
  color: #17352f;
  box-shadow: 0 18px 46px rgba(38, 56, 50, 0.12);
}

.section-kicker {
  color: #b56d13;
}

.fish-console .section-copy,
.section-copy {
  color: #4d675f;
}

.fish-actions button {
  border-color: rgba(22, 90, 76, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #17352f;
  box-shadow: 0 10px 24px rgba(38, 56, 50, 0.08);
}

.fish-actions button:nth-child(2) {
  border-color: rgba(213, 139, 40, 0.34);
  background: #fff5df;
}

.fish-actions button:nth-child(3) {
  border-color: rgba(40, 108, 143, 0.22);
  background: #eef6fb;
}

.fish-actions span {
  color: #657970;
}

.connection-box {
  border-color: rgba(55, 78, 70, 0.14);
  background: rgba(255, 253, 247, 0.86);
  color: #19342f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.connection-box label {
  color: #587066;
}

.stealth-panel {
  border-color: rgba(213, 139, 40, 0.26);
  background: #fff6e6;
}

.panel-label {
  color: #9a5b0b;
}

.stealth-panel strong,
.room-help strong,
.toolbox-note strong,
.community-note strong {
  color: #17352f;
}

.stealth-hint {
  color: #5f7285;
}

.room-help {
  border-top-color: rgba(55, 78, 70, 0.12);
  color: #667970;
}

.connection-status {
  border-color: rgba(213, 139, 40, 0.26);
  background: #fff7df;
  color: #724507;
}

.stealth-actions button,
.room-actions button,
.bot-toggle {
  border-color: rgba(55, 78, 70, 0.16);
  background: #f8faf7;
  color: #21433c;
}

.primary,
.chat-input-row button {
  background: linear-gradient(180deg, #20a483, #11856c);
  box-shadow: 0 6px 0 rgba(10, 86, 70, 0.9), 0 14px 24px rgba(17, 133, 108, 0.18);
}

.game-shell {
  border-color: rgba(55, 78, 70, 0.14);
  background: rgba(255, 253, 247, 0.92);
  box-shadow: 0 18px 46px rgba(38, 56, 50, 0.12);
}

.game-menu {
  border-right-color: rgba(55, 78, 70, 0.12);
  background:
    linear-gradient(90deg, rgba(22, 90, 76, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #f7faf6, #edf4ef);
}

.game-tab {
  border-color: rgba(55, 78, 70, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: #1f3e37;
}

.game-tab small {
  color: #60766d;
}

.game-tab:not(.active):hover {
  background: #eef6f1;
}

.game-tab.active {
  border-color: rgba(213, 139, 40, 0.46);
  background: linear-gradient(135deg, #f6b64b, #d58b28);
  color: #251604;
  box-shadow: 0 12px 24px rgba(164, 96, 13, 0.16);
}

.game-tab.active .game-icon {
  background: rgba(255, 255, 255, 0.38);
  color: #251604;
}

.game-stage {
  background:
    linear-gradient(90deg, rgba(22, 90, 76, 0.025) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fffdf8 0%, #f4f7f2 100%);
}

.panel-head {
  background: rgba(255, 255, 255, 0.82);
}

.tool-card,
.community-card,
.info-panel,
.game-overview div,
.board-frame,
.inline-tools,
.score-strip,
.guess-box,
.hand,
.chat-log {
  background: rgba(255, 253, 247, 0.9);
}

body.stealth-mode .module-bar {
  background: #fff;
  color: #2d3432;
}

/* Pale blue-white theme pass. */

.module-bar {
  border-color: rgba(47, 125, 182, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #153450;
  box-shadow: 0 14px 34px rgba(36, 79, 113, 0.11);
}

.module-brand {
  background: #dff0ff;
  color: #143d5f;
  border: 1px solid #a9d5f5;
}

.module-current,
.module-nav a,
.module-nav span,
.stealth-nav button,
.mode-chip {
  border-color: rgba(47, 125, 182, 0.16);
  background: #f7fbff;
  color: #426279;
}

.module-nav .active {
  border-color: rgba(47, 125, 182, 0.3);
  background: #e8f5ff;
  color: #19547d;
}

.mode-chip {
  border-color: rgba(47, 125, 182, 0.28);
  background: #e9f6ff;
  color: #17577f;
}

.section-head,
.toolbox-head,
.community-head {
  border-color: rgba(47, 125, 182, 0.14);
  background:
    linear-gradient(90deg, rgba(47, 125, 182, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(47, 125, 182, 0.034) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, #ffffff 0%, #eef7ff 58%, #f8fbff 100%);
  color: #102f4a;
  box-shadow: 0 18px 46px rgba(36, 79, 113, 0.12);
}

.section-kicker {
  color: #2f7db6;
}

.fish-console .section-copy,
.section-copy,
.toolbox-note span,
.community-note span {
  color: #5f7285;
}

.fish-actions button {
  border-color: rgba(47, 125, 182, 0.16);
  background: rgba(255, 255, 255, 0.84);
  color: #102f4a;
  box-shadow: 0 10px 24px rgba(36, 79, 113, 0.08);
}

.fish-actions button:nth-child(2) {
  border-color: rgba(47, 125, 182, 0.22);
  background: #eef8ff;
}

.fish-actions button:nth-child(3) {
  border-color: rgba(64, 143, 202, 0.24);
  background: #f2f9ff;
}

.fish-actions button:nth-child(4) {
  border-color: rgba(79, 164, 202, 0.22);
  background: #f4fbff;
}

.fish-actions span {
  color: #6d8091;
}

.connection-box,
.toolbox-note,
.community-note {
  border-color: rgba(47, 125, 182, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: #153450;
}

.connection-box label,
.room-help {
  color: #607789;
}

.stealth-panel {
  border-color: rgba(47, 125, 182, 0.2);
  background: #eef8ff;
}

.panel-label,
.toolbox-note strong,
.community-note strong,
.stealth-panel strong,
.room-help strong {
  color: #16496d;
}

.connection-status {
  border-color: rgba(47, 125, 182, 0.22);
  background: #eaf6ff;
  color: #19547d;
}

.stealth-actions button,
.room-actions button,
.bot-toggle,
.confirm-actions button {
  border-color: rgba(47, 125, 182, 0.18);
  background: #f8fbff;
  color: #174867;
}

input,
textarea {
  border-color: #d7e4ef;
  background: #fff;
  color: #10243a;
}

input:focus,
textarea:focus {
  border-color: #2f7db6;
  box-shadow: 0 0 0 3px rgba(47, 125, 182, 0.14);
}

.primary,
.chat-input-row button {
  background: linear-gradient(180deg, #4fa3db, #2f7db6);
  box-shadow: 0 6px 0 rgba(24, 76, 113, 0.86), 0 14px 24px rgba(47, 125, 182, 0.18);
}

.game-overview {
  border-color: rgba(47, 125, 182, 0.12);
  background: rgba(255, 255, 255, 0.66);
}

.game-overview div,
.tool-card,
.community-card,
.info-panel {
  border-color: rgba(47, 125, 182, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(36, 79, 113, 0.08);
}

.game-overview strong,
.info-panel h2,
.tool-card h2,
.community-card h2 {
  color: #16496d;
}

.game-shell {
  border-color: rgba(47, 125, 182, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(36, 79, 113, 0.12);
}

.game-menu {
  border-right-color: rgba(47, 125, 182, 0.13);
  background:
    linear-gradient(90deg, rgba(47, 125, 182, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #f8fcff, #eef7ff);
}

.game-tab {
  border-color: rgba(47, 125, 182, 0.13);
  background: rgba(255, 255, 255, 0.78);
  color: #143d5f;
}

.game-icon {
  border-color: rgba(47, 125, 182, 0.14);
  background: #f4faff;
  color: #2f7db6;
}

.game-tab small,
.panel-head p,
.muted {
  color: #61798b;
}

.game-tab:not(.active):hover {
  background: #eef8ff;
}

.game-tab.active {
  border-color: rgba(47, 125, 182, 0.28);
  background: linear-gradient(135deg, #dff1ff, #b8def8);
  color: #143d5f;
  box-shadow: 0 12px 24px rgba(36, 79, 113, 0.12);
}

.game-tab.active .game-icon {
  background: #ffffff;
  color: #1f6b9f;
}

.game-stage {
  background:
    linear-gradient(90deg, rgba(47, 125, 182, 0.024) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

.panel-head,
.board-frame,
.inline-tools,
.score-strip,
.guess-box,
.hand,
.chat-log {
  border-color: rgba(47, 125, 182, 0.14);
  background: rgba(255, 255, 255, 0.9);
}

.status-pill {
  border-color: rgba(47, 125, 182, 0.2);
  background: #eaf6ff;
  color: #19547d;
}

.feature-strip span,
.next-tags span {
  border-color: rgba(47, 125, 182, 0.16);
  background: #f1f8ff;
  color: #23618d;
}

.wood {
  background:
    linear-gradient(90deg, rgba(95, 124, 145, 0.1) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(#eac27d, #d29b52);
}

#panel-gomoku .wood {
  border-color: rgba(169, 112, 47, 0.34);
  background:
    linear-gradient(90deg, rgba(103, 73, 38, 0.1) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(135deg, #e9bf75, #cb8843 66%, #ad6a34);
}

.uno-table {
  border-color: rgba(47, 125, 182, 0.28);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.4), transparent 34%),
    linear-gradient(145deg, #dff1ff 0%, #b9dff7 56%, #edf7ff 100%);
}

.mahjong-table {
  border-color: rgba(47, 125, 182, 0.28);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(145deg, #e7f7ff, #bde3f9 66%, #dff1ff);
}

.uno-info div,
.uno-center,
.mj-center,
.mj-melds,
.mj-hand,
.mj-river {
  border-color: rgba(47, 125, 182, 0.14);
  background: rgba(255, 255, 255, 0.48);
}

body.stealth-mode {
  background: #f8fbff;
}

body.stealth-mode .module-bar,
body.stealth-mode .section-head,
body.stealth-mode .toolbox-head,
body.stealth-mode .community-head {
  border-color: #d7e4ef;
  background: #ffffff;
  color: #23394d;
}

/* Eye-care blue-white refinement: softer blue, less glare, quieter contrast. */

.module-bar,
.section-head,
.toolbox-head,
.community-head,
.game-shell,
.game-overview,
.tool-card,
.community-card,
.info-panel {
  border-color: rgba(75, 141, 185, 0.13);
  box-shadow: 0 16px 38px rgba(42, 85, 112, 0.09);
}

.module-bar {
  background: rgba(251, 253, 255, 0.92);
}

.section-head,
.toolbox-head,
.community-head {
  background:
    linear-gradient(90deg, rgba(75, 141, 185, 0.036) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(75, 141, 185, 0.028) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, #fbfdff 0%, #edf6fb 62%, #f7fbfd 100%);
}

.module-brand,
.module-current,
.module-nav a,
.module-nav span,
.stealth-nav button,
.mode-chip,
.fish-actions button,
.connection-box,
.toolbox-note,
.community-note,
.game-overview div,
.tool-card,
.community-card,
.info-panel,
.panel-head,
.board-frame,
.inline-tools,
.score-strip,
.guess-box,
.hand,
.chat-log {
  background-color: rgba(251, 253, 255, 0.88);
}

.module-brand {
  background: #e7f3fb;
  color: #255b7c;
}

.module-nav .active,
.mode-chip,
.status-pill,
.connection-status {
  border-color: rgba(75, 141, 185, 0.22);
  background: #e7f3fb;
  color: #255b7c;
}

.section-kicker,
.game-overview strong,
.info-panel h2,
.tool-card h2,
.community-card h2 {
  color: #255b7c;
}

.fish-actions button:nth-child(2),
.fish-actions button:nth-child(3),
.fish-actions button:nth-child(4),
.stealth-panel {
  background: #edf6fb;
}

.fish-actions span,
.section-copy,
.fish-console .section-copy,
.game-tab small,
.panel-head p,
.muted {
  color: #657889;
}

.primary,
.chat-input-row button {
  background: linear-gradient(180deg, #6aa7cd, #4b8db9);
  box-shadow: 0 6px 0 rgba(37, 91, 124, 0.78), 0 14px 24px rgba(75, 141, 185, 0.16);
}

.game-menu {
  background:
    linear-gradient(90deg, rgba(75, 141, 185, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #f7fbfd, #edf6fb);
}

.game-tab {
  background: rgba(251, 253, 255, 0.78);
  color: #255b7c;
}

.game-tab:not(.active):hover {
  background: #edf6fb;
}

.game-tab.active {
  border-color: rgba(75, 141, 185, 0.28);
  background: linear-gradient(135deg, #d9edf8, #c6e2f2);
  color: #1f4d69;
}

.game-stage {
  background:
    linear-gradient(90deg, rgba(75, 141, 185, 0.02) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
}

body.stealth-mode,
body.page-hidden {
  background: #f4f8fb !important;
}

/* ════════════════════════════════════════════════════════════
   视觉精致化层（最后加载，统一提升卡片/标签/面板质感）
   仅增强视觉，不改布局结构和交互逻辑。
   ════════════════════════════════════════════════════════════ */

/* 卡片：柔和双层阴影 + 悬停上浮，告别生硬的单层投影 */
.tool-card,
.community-card,
.info-panel,
.connection-box,
.game-shell,
.module-bar {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* 仅交互型卡片悬停上浮（静态展示卡片如公告不动，避免误导） */
.tool-card:hover,
.community-card:not(.notice-card):hover,
.connection-box:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 游戏标签：更明确的选中态 + 平滑过渡 */
.game-tab {
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}
.game-tab:hover:not(.active) {
  transform: translateX(2px);
}

/* 卡片标题：字重层次更清晰 */
.tool-card h2,
.community-card h2,
.info-panel h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 状态药丸：轻微立体感 */
.status-pill {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--transition-fast);
}

/* 输入框聚焦：柔和品牌色光环，替代生硬 outline */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ════════════════════════════════════════════════════════════
   游戏卡牌精致化：斗地主扑克牌、UNO 卡牌、麻将牌
   统一柔化阴影、增强交互反馈、让选中态更醒目。
   ════════════════════════════════════════════════════════════ */

/* 斗地主扑克牌：改用与整体蓝白主题协调的底色，柔化阴影 */
.card {
  border: 1px solid rgba(75, 141, 185, 0.22);
  border-radius: 8px;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8fc 100%);
  box-shadow: 0 1px 2px rgba(24, 48, 71, 0.08), 0 4px 10px rgba(42, 85, 112, 0.1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hand .card:hover:not(.selected) {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(24, 48, 71, 0.1), 0 10px 20px rgba(42, 85, 112, 0.16);
}

/* 选中态：上浮 + 品牌色描边光环，一眼可辨 */
.hand .card.selected {
  transform: translateY(-14px);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(75, 141, 185, 0.3), 0 8px 18px rgba(42, 85, 112, 0.2);
}

/* UNO 卡牌：减薄白边、柔化阴影、加交互反馈 */
.uno-card {
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* 可出的 UNO 牌：轻微上浮提示可点击（data-playable 由 app.js 标记） */
.uno-card[data-playable="1"] {
  cursor: pointer;
}
.uno-card[data-playable="1"]:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 14px 28px rgba(0, 0, 0, 0.28);
}

/* 不可出的 UNO 牌：降低饱和度，明确"不能出" */
.uno-card[data-disabled="1"] {
  opacity: 0.5;
  filter: saturate(0.6);
  cursor: not-allowed;
}

/* 麻将牌：柔化阴影，让叠放层次更自然 */
.mj-tile {
  border: 1px solid rgba(75, 141, 185, 0.2);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #ede4d0 100%);
  box-shadow: 0 1px 2px rgba(24, 48, 71, 0.08), 0 3px 8px rgba(42, 85, 112, 0.12);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mj-hand .mj-tile:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 8px rgba(24, 48, 71, 0.1), 0 10px 18px rgba(42, 85, 112, 0.18);
}

/* 牌桌区背景：让游戏面板更有"桌面"质感 */
.ddz-table,
.uno-table,
.mahjong-table {
  box-shadow: inset 0 2px 8px rgba(24, 48, 71, 0.06);
}

/* ════════════════════════════════════════════════════════════
   摸鱼功能体验优化：低调模式、快速隐藏、伪装文档
   核心改进：切换加平滑过渡，避免"突然消失"引人注意。
   ════════════════════════════════════════════════════════════ */

/* 全局过渡：低调模式切换时颜色/背景平滑变化，而非瞬间跳变 */
body.stealth-mode,
body.stealth-mode .module-bar,
body.stealth-mode .section-head,
body.stealth-mode .connection-box,
body.stealth-mode .game-shell,
body.stealth-mode .panel-head,
body.stealth-mode .tool-card,
body.stealth-mode .community-card {
  transition: background var(--transition-normal), color var(--transition-normal),
    border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* 快速隐藏：整页淡出而非瞬间消失，更不易被察觉 */
body.page-hidden > * {
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  opacity: 0;
}

/* 伪装封面：更像真实办公文档的纸张质感 */
.stealth-cover {
  transition: opacity var(--transition-normal);
}
.stealth-document {
  font-family: "Times New Roman", "SimSun", serif;
  line-height: 1.9;
  color: #2c2c2c;
}
.stealth-document h2 {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stealth-document p {
  text-indent: 2em;
}

/* 低调模式状态标识：更低调，不引人注意 */
body.stealth-mode .mode-chip {
  font-weight: 500;
  opacity: 0.7;
}