/* Tap Mini Games — 游戏内窗口皮肤。
 *
 * 游戏本体来自 win98 桌面项目，自带灰底凸起边框、蓝色渐变标题栏、「_ □ ×」窗口按钮。
 * 在站点里统一换成站点自己的深色圆角风格：只改「窗口 / 面板 / 按钮 / 选项」这些外壳，
 * 不碰游戏画面本身（画布、牌、棋子）。
 *
 * - 选择器都以 #tap-mount[data-engine="…"] 开头（player.js 按 games.json 的 global 打标）：
 *   一是 id 选择器优先级高，压得住游戏注入的同名样式；二是不同游戏的类名前缀会撞
 *   （Card Hall 和 Chess Hall 都用 .ch-），按引擎隔离互不影响。
 * - 只在游戏页加载（templates/partials/head.html）。
 * - 游戏改了类名，这里对应的块就失效（回落到游戏原样），不会把游戏弄坏。
 */

#tap-mount {
  --sk-bg: rgba(15, 18, 27, .97);
  --sk-surface: #1a1f2e;
  --sk-surface-2: #232a3c;
  --sk-surface-3: #2c3449;
  --sk-line: rgba(255, 255, 255, .09);
  --sk-line-2: rgba(255, 255, 255, .17);
  --sk-text: #eef0f6;
  --sk-muted: #a3abbe;
  --sk-acc: var(--c, #5b5bd6);
  --sk-sel: color-mix(in srgb, var(--sk-acc) 26%, var(--sk-surface));
  --sk-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .35);
  --sk-font: var(--font, system-ui, sans-serif);
}

/* ---------- Dou Dizhu（Win98Doudizhu） ---------- */
#tap-mount[data-engine="Win98Doudizhu"] .ddz-modal { background: rgba(4, 6, 11, .55); backdrop-filter: blur(3px); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-window {
  background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font);
  border: 1px solid var(--sk-line-2); border-radius: 18px; box-shadow: var(--sk-shadow);
  scrollbar-color: rgba(255, 255, 255, .2) transparent; scrollbar-width: thin;
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-window * { color: inherit; font-family: inherit; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-titlebar {
  background: rgba(15, 18, 27, .98); color: var(--sk-muted); border-bottom: 1px solid var(--sk-line);
  padding: 12px 18px; font: 600 12.5px/1.3 var(--sk-font); letter-spacing: .03em;
  position: sticky; top: 0; z-index: 2; backdrop-filter: blur(8px);
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-titlebar .dots { display: none; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-winbody h2 { color: #fff; font-weight: 800; letter-spacing: .02em; text-shadow: none; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-rule, #tap-mount[data-engine="Win98Doudizhu"] .ddz-keys {
  background: rgba(255, 255, 255, .04); color: var(--sk-muted); box-shadow: none;
  border: 1px solid var(--sk-line); border-radius: 12px;
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-field > span { color: var(--sk-muted); font-weight: 600; }
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt) {
  background: var(--sk-surface); color: var(--sk-text); box-shadow: none;
  border: 1px solid var(--sk-line); border-radius: 12px;
  transition: background-color .15s, border-color .15s;
}
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt) small { color: var(--sk-muted); }
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt):hover:not(:disabled) { background: var(--sk-surface-2); border-color: var(--sk-line-2); }
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt).sel {
  background: var(--sk-sel); color: #fff;
  border-color: color-mix(in srgb, var(--sk-acc) 75%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-acc) 55%, transparent);
}
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt).sel small { color: rgba(255, 255, 255, .78); }
#tap-mount[data-engine="Win98Doudizhu"] :is(.ddz-opt):disabled { opacity: .45; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn {
  background: var(--sk-surface-2); color: var(--sk-text); box-shadow: none; text-shadow: none;
  border: 1px solid var(--sk-line-2); border-radius: 10px; font-family: var(--sk-font); font-weight: 650;
  transition: background-color .15s, filter .15s;
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn:hover:not(:disabled) { background: var(--sk-surface-3); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn:active:not(:disabled) { transform: translateY(1px); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn.primary { background: var(--sk-acc); border-color: transparent; color: #fff; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn.primary:hover:not(:disabled) { background: var(--sk-acc); filter: brightness(1.1); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn.danger { background: #b42318; border-color: transparent; color: #fff; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn.on { background: var(--sk-sel); border-color: color-mix(in srgb, var(--sk-acc) 70%, #fff); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-btn:disabled { opacity: .45; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-panel {
  background: var(--sk-bg); color: var(--sk-text); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .75);
  border: 1px solid var(--sk-line-2); border-radius: 14px;
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-toast { border-radius: 12px; border: 1px solid var(--sk-line-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }

/* ---------- Faction Duel（Win98Gwent） ---------- */
#tap-mount[data-engine="Win98Gwent"] .gwt-modal { background: rgba(4, 6, 11, .55); backdrop-filter: blur(3px); }
#tap-mount[data-engine="Win98Gwent"] .gwt-window {
  background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font);
  border: 1px solid var(--sk-line-2); border-radius: 18px; box-shadow: var(--sk-shadow);
  scrollbar-color: rgba(255, 255, 255, .2) transparent; scrollbar-width: thin;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-window * { color: inherit; font-family: inherit; }
#tap-mount[data-engine="Win98Gwent"] .gwt-titlebar {
  background: rgba(15, 18, 27, .98); color: var(--sk-muted); border-bottom: 1px solid var(--sk-line);
  padding: 12px 18px; font: 600 12.5px/1.3 var(--sk-font); letter-spacing: .03em;
  position: sticky; top: 0; z-index: 2; backdrop-filter: blur(8px);
}
#tap-mount[data-engine="Win98Gwent"] .gwt-titlebar .dots { display: none; }
#tap-mount[data-engine="Win98Gwent"] .gwt-winbody h2 { color: #fff; font-weight: 800; letter-spacing: .02em; text-shadow: none; }
#tap-mount[data-engine="Win98Gwent"] .gwt-rule, #tap-mount[data-engine="Win98Gwent"] .gwt-keys {
  background: rgba(255, 255, 255, .04); color: var(--sk-muted); box-shadow: none;
  border: 1px solid var(--sk-line); border-radius: 12px;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-field > span { color: var(--sk-muted); font-weight: 600; }
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction) {
  background: var(--sk-surface); color: var(--sk-text); box-shadow: none;
  border: 1px solid var(--sk-line); border-radius: 12px;
  transition: background-color .15s, border-color .15s;
}
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction) small { color: var(--sk-muted); }
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction):hover:not(:disabled) { background: var(--sk-surface-2); border-color: var(--sk-line-2); }
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction).sel {
  background: var(--sk-sel); color: #fff;
  border-color: color-mix(in srgb, var(--sk-acc) 75%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-acc) 55%, transparent);
}
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction).sel small { color: rgba(255, 255, 255, .78); }
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction):disabled { opacity: .45; }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn {
  background: var(--sk-surface-2); color: var(--sk-text); box-shadow: none; text-shadow: none;
  border: 1px solid var(--sk-line-2); border-radius: 10px; font-family: var(--sk-font); font-weight: 650;
  transition: background-color .15s, filter .15s;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-btn:hover:not(:disabled) { background: var(--sk-surface-3); }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn:active:not(:disabled) { transform: translateY(1px); }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn.primary { background: var(--sk-acc); border-color: transparent; color: #fff; }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn.primary:hover:not(:disabled) { background: var(--sk-acc); filter: brightness(1.1); }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn.danger { background: #b42318; border-color: transparent; color: #fff; }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn.on { background: var(--sk-sel); border-color: color-mix(in srgb, var(--sk-acc) 70%, #fff); }
#tap-mount[data-engine="Win98Gwent"] .gwt-btn:disabled { opacity: .45; }
#tap-mount[data-engine="Win98Gwent"] .gwt-panel {
  background: var(--sk-bg); color: var(--sk-text); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .75);
  border: 1px solid var(--sk-line-2); border-radius: 14px;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-toast { border-radius: 12px; border: 1px solid var(--sk-line-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }

/* ---------- Dou Dizhu：牌桌上的面板（叫分、记牌器、BGM 开关） ---------- */
#tap-mount[data-engine="Win98Doudizhu"] .ddz-bid-label,
#tap-mount[data-engine="Win98Doudizhu"] .ddz-counter-title { color: var(--sk-text); border-bottom-color: var(--sk-line); }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-counter-cell {
  background: var(--sk-surface-2); color: var(--sk-muted); border: 1px solid var(--sk-line); border-radius: 6px;
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-counter-cell b { color: #6ee7b7; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-counter-cell.gone b { color: #fca5a5; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-counter-cell.joker b { color: #f0abfc; }
#tap-mount[data-engine="Win98Doudizhu"] .ddz-bgm {
  background: rgba(15, 18, 27, .8); color: var(--sk-text); border: 1px solid var(--sk-line-2); border-radius: 999px;
  padding: 4px 12px; backdrop-filter: blur(6px);
}
#tap-mount[data-engine="Win98Doudizhu"] .ddz-bgm.off { color: var(--sk-muted); background: rgba(15, 18, 27, .6); }

/* ---------- Faction Duel：右侧战术栏 ---------- */
#tap-mount[data-engine="Win98Gwent"] .gwt-sidebar {
  background: rgba(13, 16, 24, .94); border-left: 1px solid var(--sk-line); box-shadow: none; color: var(--sk-text);
}
#tap-mount[data-engine="Win98Gwent"] .gwt-sidebar-title {
  background: transparent; color: var(--sk-muted); border-bottom: 1px solid var(--sk-line); letter-spacing: .08em;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-side-section {
  background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 12px; box-shadow: none;
}
#tap-mount[data-engine="Win98Gwent"] .gwt-side-heading { color: var(--sk-muted); background: transparent; }
#tap-mount[data-engine="Win98Gwent"] :is(.gwt-opt, .gwt-faction, .gwt-btn).focus { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }

/* ---------- Fruit Match（Win98FruitMatch）：开局 / 结算弹窗 + 右侧信息栏 ---------- */
#tap-mount[data-engine="Win98FruitMatch"] .wfm-overlay { background: rgba(4, 6, 11, .45); backdrop-filter: blur(3px); }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-dialog {
  background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font);
  border: 1px solid var(--sk-line-2); border-radius: 18px; box-shadow: var(--sk-shadow); padding: 18px;
}
#tap-mount[data-engine="Win98FruitMatch"] .wfm-dialog-logo { color: #fff; text-shadow: none; letter-spacing: .02em; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-dialog-copy { color: var(--sk-muted); }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-button {
  background: var(--sk-surface-2); color: var(--sk-text); font-family: var(--sk-font); font-weight: 650;
  border: 1px solid var(--sk-line-2); border-radius: 10px; box-shadow: none; min-height: 32px; padding: 4px 10px;
}
#tap-mount[data-engine="Win98FruitMatch"] .wfm-button:hover { background: var(--sk-surface-3); }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-button:active { transform: translateY(1px); box-shadow: none; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-dialog .wfm-button { background: var(--sk-acc); border-color: transparent; color: #fff; min-height: 40px; padding: 6px 22px; }
#tap-mount[data-engine="Win98FruitMatch"] :is(.wfm-button.focused, .wfm-button:focus-visible) { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-side {
  background: rgba(13, 16, 24, .94); color: var(--sk-text); border-left: 1px solid var(--sk-line); box-shadow: none;
  font-family: var(--sk-font); scrollbar-width: thin;
}
#tap-mount[data-engine="Win98FruitMatch"] .wfm-card {
  background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 12px; box-shadow: none;
}
#tap-mount[data-engine="Win98FruitMatch"] .wfm-card-title {
  margin: -8px -8px 8px; padding: 7px 8px 6px; background: transparent; color: var(--sk-muted);
  border-bottom: 1px solid var(--sk-line); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
}
#tap-mount[data-engine="Win98FruitMatch"] .wfm-score { color: #fff; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-best { color: var(--sk-muted); }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-moves { color: #fca5a5; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-goal.done span { color: #6ee7b7; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-goal-track { background: rgba(255, 255, 255, .1); border: 0; border-radius: 999px; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-goal-track i { border-radius: 999px; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-stars { color: #4b5563; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-stars i.on { color: #fbbf24; text-shadow: none; }
#tap-mount[data-engine="Win98FruitMatch"] .wfm-toast {
  background: rgba(15, 18, 27, .95); color: #fff; border: 1px solid var(--sk-line-2); border-radius: 12px;
}

/* ---------- Mahjong Solitaire（Win98MahjongSolitaire）：开局 / 结算弹窗 ---------- */
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-modal { background: rgba(4, 6, 11, .5); backdrop-filter: blur(3px); }
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-dialog {
  background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font);
  border: 1px solid var(--sk-line-2); border-radius: 18px; box-shadow: var(--sk-shadow);
}
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-dialog h2 { color: #fff; }
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-dialog p { color: var(--sk-muted); }
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-dialog .ms-legend { color: #fde68a; }
#tap-mount[data-engine="Win98MahjongSolitaire"] .ms-dialog .ms-btn {
  background: var(--sk-acc); color: #fff; border: 0; border-radius: 10px; box-shadow: none; padding: 8px 22px; font-family: var(--sk-font);
}