/* Scoped to tools: LeetCode also uses common.css, but never these overrides. */
/* 小游戏是青绿色系，背景光晕也必须跟着换。此前只写 background-image:none 关掉光晕，
   但 common.css 里 [data-theme="dark"] body 的权重更高（0,1,1 > 0,1,0），
   暗色下又会漏出「主页紫」的光晕 —— 于是同一页亮色是平的、暗色泛紫。
   现在改成覆盖光晕色本身，明暗两种状态都由 common.css 那一处定义。 */
.games-app { --bg:#f4f6f4; --panel:#ffffff; --text:#233b36; --muted:#60736d; --border:#dce5df; --accent:#236d60; --accent-soft:#e5f1eb; --accent-ink:#ffffff; --stat-bg:#eef4f0; --chip:#edf2ef; --chip-text:#566e65; --glow-1:rgba(35,109,96,.07); --glow-2:rgba(168,101,15,.05); background:var(--bg); }
[data-theme="dark"] .games-app { --bg:#101d1a; --panel:#192923; --text:#e1eee7; --muted:#a1b9ac; --border:#31483c; --accent:#8ad4b6; --accent-soft:#263f34; --accent-ink:#08150f; --stat-bg:#20372c; --chip:#293f32; --chip-text:#b7cdbf; --glow-1:rgba(138,212,182,.10); --glow-2:rgba(224,164,74,.05); background:var(--bg); }
.games-app .wrap { max-width:1000px; padding:28px 24px 60px; }
.games-app .topbar { min-height:64px; border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:25px; gap:18px; }
.games-app .topbar h1 { font-size:23px; letter-spacing:-.025em; }
.games-app .back { font-size:14px; min-height:44px; }
.games-app .panel { padding:28px; border-radius:16px; box-shadow:0 5px 20px #14372b06; }
.games-app .btn { min-height:44px; }
/* 主按钮走变量，不再写死青绿：#fff 在两套主题下都不成立——
   暗色 accent 是浅薄荷 #8ad4b6，白字会糊，所以前景色取 --accent-ink */
.games-app .btn-primary { color:var(--accent-ink); background:var(--accent); }
.games-app .btn-primary:hover { box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 26%, transparent); }
.games-app input,.games-app select,.games-app textarea { accent-color:var(--accent); }
.games-app .field { margin-bottom:22px; }
.games-app .field label { font-weight:600; }
.games-app .hint,.games-app .note { font-size:13px; line-height:1.85; }
.games-app .stat { border-radius:12px; }
.games-app .scrollwrap { border-radius:10px; }
.games-app table { font-variant-numeric:tabular-nums; }
.games-app button:focus-visible,.games-app a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.games-app .theme-toggle { flex-shrink:0; }
.games-app .wrap.tools-hub { max-width:1200px; }
.hub-heading { padding:14px 0 24px; }
.hub-heading .eyebrow { color:var(--accent); font-size:12px; letter-spacing:.14em; font-weight:650; }
.hub-heading h1 { font-size:clamp(29px,4vw,42px); font-weight:650; letter-spacing:-.04em; margin:9px 0; }
.hub-heading p { margin:0; font-size:16px; color:var(--muted); }
.hub-tools { display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--panel); padding:16px; border:1px solid var(--border); border-radius:14px; }
.hub-search { display:flex; flex:1 1 260px; align-items:center; gap:12px; }
.hub-search input { width:100%; border:1px solid var(--border); border-radius:10px; padding:12px 14px; font:inherit; color:var(--text); background:var(--bg); min-width:0; }
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.filters button { border:0; border-radius:8px; padding:10px 15px; min-height:44px; cursor:pointer; font:inherit; font-size:14px; background:transparent; color:var(--muted); }
.filters button.on { background:var(--accent-soft); color:var(--accent); font-weight:650; }
.result-count { font-size:13px; color:var(--muted); margin:20px 0 12px; }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hub-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; padding:24px; color:var(--text); background:var(--panel); text-decoration:none; transition:transform .15s,border-color .15s,box-shadow .15s; }
/* 与主站 .card:hover 对齐：同样抬起 -3px，但主站会浮起一层投影、这里原来没有，手感不一致 */
.hub-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.hub-icon { width:44px; height:44px; display:grid; place-items:center; font-size:23px; border-radius:12px; background:var(--accent-soft); color:var(--accent); margin-bottom:19px; }
.hub-card h2 { font-size:18px; margin:0 0 9px; }
.hub-card p { font-size:14px; color:var(--muted); line-height:1.8; margin:0 0 23px; }
.hub-card footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:15px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.hub-card footer span:last-child { color:var(--accent); }
.hub-empty { padding:45px 20px; text-align:center; color:var(--muted); }
.hub-foot { margin-top:30px; border-top:1px solid var(--border); padding-top:20px; color:var(--muted); font-size:13px; line-height:1.8; }
@media(max-width:900px) { .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) {
 .games-app .wrap { padding:16px 14px 35px; }
 .games-app .topbar { flex-wrap:wrap; gap:10px; margin-bottom:18px; }
 .games-app .topbar h1 { font-size:19px; }
 .games-app .panel { padding:18px; }
 .hub-grid { grid-template-columns:1fr; gap:12px; }
 .hub-card { padding:21px; }
 .hub-tools { padding:12px; }
 .filters { gap:2px; }
 .filters button { padding:9px 12px; }
 .hub-heading { padding:8px 0 24px; }
}

/* ===== 移动端触控增强（全局，一次覆盖全部工具） =====
   1) touch-action:manipulation —— 去掉双击缩放与点击延迟。
      Corsi / 数字广度 / Stroop 都需要快速连点，没有它很容易误触发双击缩放。
   2) 对纯操作控件禁用文本选择，避免连点时弹出「选择 / 长按」菜单。
      只针对 button / a / [role=button]；结果文本与密码输出仍然可选可复制。 */
.games-app button,
.games-app a,
.games-app label,
.games-app [role="button"] {
  touch-action: manipulation;
}
.games-app button,
.games-app a,
.games-app [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}