/* 暗色主题：theme.js 会在页面渲染前设置 data-theme="dark"。
   斗地主（doudizhu.html / doudizhu-friend.html）保持原有深色牌桌，不引入本文件。 */

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1216;
  --ink: #eef1f6;
  --ink-2: #b3bbc8;
  --ink-3: #7d8697;
  --ink2: #b3bbc8;
  --ink3: #7d8697;
  --line: rgba(255, 255, 255, .11);
  --line2: rgba(255, 255, 255, .18);
  --card: #181c24;
  --bg1: #0f1216;
  --bg2: #111823;
  --bg3: #0e1a17;
  --grid: rgba(255, 255, 255, .12);
  --grid-2: rgba(255, 255, 255, .4);
  --shadow-lg: 0 24px 48px -26px rgba(0, 0, 0, .85), 0 3px 10px -4px rgba(0, 0, 0, .5);
  --shadow-sm: 0 8px 20px -12px rgba(0, 0, 0, .7);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(76, 92, 255, .16) 0%, rgba(76, 92, 255, 0) 62%),
    radial-gradient(820px 520px at 100% 4%, rgba(46, 197, 197, .12) 0%, rgba(46, 197, 197, 0) 60%),
    linear-gradient(160deg, #0d1015 0%, #10141c 55%, #0d1418 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* ---------- 背景柔光 ---------- */
html[data-theme="dark"] .aura::before {
  background: radial-gradient(circle,
              rgba(92, 108, 255, .18) 0%,
              rgba(92, 108, 255, .05) 44%,
              rgba(92, 108, 255, 0) 70%);
}

html[data-theme="dark"] .aura::after {
  background: radial-gradient(circle,
              rgba(46, 197, 197, .15) 0%,
              rgba(46, 197, 197, .04) 46%,
              rgba(46, 197, 197, 0) 72%);
}

/* ---------- 半透明表面 / 按钮 ---------- */
html[data-theme="dark"] .back,
html[data-theme="dark"] .chat-link,
html[data-theme="dark"] .account__btn,
html[data-theme="dark"] .account__user,
html[data-theme="dark"] .score,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tool,
html[data-theme="dark"] .key,
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] .points-quick button,
html[data-theme="dark"] .game__play,
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-invite,
html[data-theme="dark"] .table-invite__ignore,
html[data-theme="dark"] .ov-btn:not(.ov-btn--primary) {
  background: rgba(24, 28, 36, .86);
  border-color: rgba(255, 255, 255, .11);
}

/* 保持主按钮 / 危险按钮 / 激活态的品牌色 */
html[data-theme="dark"] .lbtn.primary,
html[data-theme="dark"] .ov-btn--primary {
  background: linear-gradient(140deg, #ff8358, #ffb23f);
  border-color: transparent;
  color: #fff;
}

html[data-theme="dark"] .rbtn.danger {
  background: rgba(224, 86, 63, .18);
  border-color: rgba(224, 86, 63, .4);
  color: #ffb4a6;
}

html[data-theme="dark"] .chip.is-active {
  color: #9fb0ff;
  border-color: rgba(76, 92, 255, .55);
  background: rgba(76, 92, 255, .2);
}

html[data-theme="dark"] .tool[aria-pressed="true"] {
  color: #9fb0ff;
  border-color: rgba(76, 92, 255, .55);
  background: rgba(76, 92, 255, .18);
}

html[data-theme="dark"] .tbtn.active,
html[data-theme="dark"] .ctab.active {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  border-color: transparent;
  color: #fff;
}

html[data-theme="dark"] .theme-seg {
  background: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .theme-seg button.on {
  background: #232a36;
  color: var(--ink);
}

html[data-theme="dark"] .table-invite__join:disabled {
  background: rgba(255, 255, 255, .12);
  color: var(--ink-3);
}

html[data-theme="dark"] .back:hover,
html[data-theme="dark"] .chat-link:hover,
html[data-theme="dark"] .account__btn:hover,
html[data-theme="dark"] .account__user:hover,
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .ov-btn:hover {
  background: rgba(38, 44, 56, .94);
  border-color: rgba(76, 92, 255, .45);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .data-entry:hover,
html[data-theme="dark"] .hub:hover {
  background: rgba(34, 40, 51, .94);
}

/* 品牌方块在暗色下反色 */
html[data-theme="dark"] .brand__mark {
  background: #eef1f6;
  color: #10141c;
  box-shadow: none;
}

/* ---------- 纯白 / 近白面板 ---------- */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .overlay__card,
html[data-theme="dark"] .pw-card,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .confirm-card,
html[data-theme="dark"] .manage-card,
html[data-theme="dark"] .msg__bubble,
html[data-theme="dark"] .audit-msg,
html[data-theme="dark"] .chat-back,
html[data-theme="dark"] .detail-back,
html[data-theme="dark"] .chat-invite,
html[data-theme="dark"] .fn-card,
html[data-theme="dark"] #calc,
html[data-theme="dark"] #panel {
  background: #181c24;
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .request {
  background: rgba(76, 92, 255, .12);
}

/* ---------- 表单控件 ---------- */
html[data-theme="dark"] .auth-field input,
html[data-theme="dark"] .text-input,
html[data-theme="dark"] .dialog-input,
html[data-theme="dark"] .password-wrap input,
html[data-theme="dark"] .composer input,
html[data-theme="dark"] .settings__form input,
html[data-theme="dark"] .points-row input,
html[data-theme="dark"] .vip-options button {
  background: #121620;
  color: var(--ink);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .auth-field input:focus,
html[data-theme="dark"] .text-input:focus,
html[data-theme="dark"] .dialog-input:focus,
html[data-theme="dark"] .password-wrap input:focus,
html[data-theme="dark"] .composer input:focus,
html[data-theme="dark"] .settings__form input:focus,
html[data-theme="dark"] .points-row input:focus {
  background: #1d2430;
  border-color: rgba(76, 92, 255, .65);
}

html[data-theme="dark"] .auth-tabs {
  background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .auth-tabs button.on {
  background: #232a36;
  color: var(--ink);
}

html[data-theme="dark"] .auth-close,
html[data-theme="dark"] .pw-close,
html[data-theme="dark"] .dialog-close,
html[data-theme="dark"] .manage-close {
  background: rgba(255, 255, 255, .08);
  color: var(--ink-2);
}

html[data-theme="dark"] .auth-close:hover,
html[data-theme="dark"] .pw-close:hover,
html[data-theme="dark"] .dialog-close:hover,
html[data-theme="dark"] .manage-close:hover {
  background: rgba(255, 255, 255, .16);
  color: var(--ink);
}

/* ---------- 聊天 ---------- */
html[data-theme="dark"] .friends,
html[data-theme="dark"] .conversation,
html[data-theme="dark"] .convs,
html[data-theme="dark"] .detail {
  background: rgba(20, 24, 31, .55);
}

html[data-theme="dark"] .chat-head,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .detail-head {
  background: rgba(24, 28, 36, .86);
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .friend:hover,
html[data-theme="dark"] .conv:hover {
  background: rgba(76, 92, 255, .12);
}

html[data-theme="dark"] .friend.on,
html[data-theme="dark"] .conv.on {
  background: rgba(76, 92, 255, .2);
}

html[data-theme="dark"] .friend__presence.is-online {
  color: #59d999;
}

html[data-theme="dark"] .friend__presence-dot {
  background: #5b6270;
}

html[data-theme="dark"] .friend__presence.is-online .friend__presence-dot {
  background: #22c55e;
}

html[data-theme="dark"] .date-sep,
html[data-theme="dark"] .friends-head__count,
html[data-theme="dark"] .convs-count,
html[data-theme="dark"] .game__levels span,
html[data-theme="dark"] .detail-game {
  background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .chat-invite {
  background: linear-gradient(145deg, rgba(76, 92, 255, .16), rgba(46, 197, 197, .1));
}

html[data-theme="dark"] .search input {
  background: transparent;
}

/* ---------- 记录页 / 管理页 ---------- */
html[data-theme="dark"] .role-badge,
html[data-theme="dark"] .vip-badge {
  background: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .soon__tags span {
  border-color: rgba(255, 255, 255, .14);
}

/* ---------- 2048 / 数独 ---------- */
html[data-theme="dark"] .board {
  border-color: rgba(255, 255, 255, .16);
  background: #151a22;
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .cell-bg {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .tile-inner {
  background: rgba(255, 255, 255, .07);
  color: var(--ink-2);
}

html[data-theme="dark"] .cell.is-user .val {
  color: #8b9bff;
}

html[data-theme="dark"] .overlay {
  background: rgba(12, 15, 20, .78);
}

html[data-theme="dark"] .ring__track {
  stroke: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .chip--custom:focus-within {
  background: #1d2430;
}

/* ---------- 模式选择页 ---------- */
html[data-theme="dark"] .mode {
  background: rgba(24, 28, 36, .88);
  border-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .mode__arrow {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .active-table {
  background: linear-gradient(135deg, rgba(76, 92, 255, .2), rgba(46, 197, 197, .12));
  border-color: rgba(76, 92, 255, .32);
}

html[data-theme="dark"] .note--mode {
  background: rgba(76, 92, 255, .12);
  border-color: rgba(76, 92, 255, .22);
}

/* ---------- 函数图像 ---------- */
html[data-theme="dark"] #panel {
  background: rgba(20, 24, 31, .94);
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] #equation {
  background: #16213a;
  border-color: rgba(59, 130, 246, .35);
  color: #bfd4ff;
}

html[data-theme="dark"] .coef label {
  color: var(--ink-2);
}

html[data-theme="dark"] .coef input,
html[data-theme="dark"] .fn-card select,
html[data-theme="dark"] .calc-input input,
html[data-theme="dark"] #calcResult {
  background: #121620;
  color: var(--ink);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .tbtn,
html[data-theme="dark"] .abtn,
html[data-theme="dark"] .ctab {
  background: #1c2230;
  color: var(--ink-2);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] #points li,
html[data-theme="dark"] #legend .chip {
  background: #1c2230;
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] #points li .coord {
  color: var(--ink);
}

html[data-theme="dark"] .fn-card {
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .fn-card select {
  background: #121620;
}

/* ---------- 五子棋 ---------- */
html[data-theme="dark"] .gomoku-page .card,
html[data-theme="dark"] .gomoku-friend-page .card {
  background: #181c24;
  border-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .lv {
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
}

html[data-theme="dark"] .lv:hover {
  background: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .lv.on {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
}

html[data-theme="dark"] .seg button {
  background: rgba(255, 255, 255, .06);
  color: var(--ink-2);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .seg button.on {
  background: linear-gradient(140deg, #3e9bff, #7fc0ff);
  color: #fff;
}

html[data-theme="dark"] .btn.ghost {
  background: rgba(255, 255, 255, .07);
  color: var(--ink-2);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .status.win {
  background: linear-gradient(140deg, rgba(255, 131, 88, .2), rgba(255, 178, 63, .12));
}

html[data-theme="dark"] .status.lose {
  background: linear-gradient(140deg, rgba(62, 155, 255, .18), rgba(123, 123, 255, .12));
}

html[data-theme="dark"] .status.draw {
  background: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .thinking {
  background: rgba(24, 28, 36, .92);
  color: var(--ink-2);
}

html[data-theme="dark"] .result {
  background: rgba(12, 15, 20, .74);
}

html[data-theme="dark"] .result-inner {
  background: #181c24;
}

/* ---------- 五子棋好友房 ---------- */
html[data-theme="dark"] .gomoku-friend-page .topbar {
  background: rgba(18, 21, 27, .9);
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .room-pill,
html[data-theme="dark"] .rbtn {
  background: #1c2230;
  border-color: rgba(255, 255, 255, .12);
  color: var(--ink-2);
}

html[data-theme="dark"] .rbtn:hover {
  background: #252c3b;
  color: var(--ink);
}

html[data-theme="dark"] .rbtn.danger {
  background: rgba(224, 86, 63, .18);
  border-color: rgba(224, 86, 63, .4);
  color: #ffb4a6;
}

html[data-theme="dark"] .player {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .player.turn {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(62, 155, 255, .45);
}

html[data-theme="dark"] .player__avatar,
html[data-theme="dark"] .lseat__avatar,
html[data-theme="dark"] .fd-avatar {
  background: #232a36;
  color: var(--ink-2);
}

html[data-theme="dark"] .gomoku-friend-page .lobby {
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(44, 34, 24, .8), rgba(15, 18, 22, .97) 62%),
    linear-gradient(160deg, rgba(15, 18, 22, .98), rgba(17, 23, 30, .98));
}

html[data-theme="dark"] .lobby-card {
  background: #181c24;
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .lseat {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .lseat.filled {
  background: #1c2230;
}

html[data-theme="dark"] .lbtn {
  background: #1c2230;
  border-color: rgba(255, 255, 255, .12);
  color: var(--ink-2);
}

html[data-theme="dark"] .lobby-invite {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .fd-row {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .fd-close {
  background: rgba(255, 255, 255, .08);
  color: var(--ink-2);
}

html[data-theme="dark"] .fd-close:hover {
  background: rgba(255, 255, 255, .16);
  color: var(--ink);
}

html[data-theme="dark"] .fd-invite:disabled {
  background: rgba(255, 255, 255, .12);
  color: var(--ink-3);
}

html[data-theme="dark"] .avatar-link {
  color: #8b9bff;
}

html[data-theme="dark"] .gomoku-friend-page dialog {
  background: #181c24;
  color: var(--ink);
}

html[data-theme="dark"] .closed {
  background: rgba(12, 15, 20, .94);
}

html[data-theme="dark"] .closed__card {
  background: #181c24;
}

html[data-theme="dark"] .fd-presence.is-online {
  color: #59d999;
}

/* ---------- 暗色下的阴影 ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-invite,
html[data-theme="dark"] .lobby-card,
html[data-theme="dark"] .closed__card,
html[data-theme="dark"] .result-inner,
html[data-theme="dark"] .overlay__card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .pw-card,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .confirm-card,
html[data-theme="dark"] .manage-card {
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .92);
}