/* ============================================================
   小工具集 · 共享设计系统（common.css）
   由 9 个小游戏页共用：统一变量、基础组件、无障碍/触控增强、
   提质感（A）与深色主题（C）。改这里即可统一调整全部页面。
   各游戏页仅保留页面专属样式，并 <link> 引入本文件。
   ============================================================ */

:root{
  --bg:#f6f7f9; --panel:#ffffff; --border:#e6e8eb;
  --text:#1f2328; --muted:#6b7280;
  --accent:#4338ca; --accent-soft:#ede9fe;
  --ok:#2e9e6b; --bad:#d64545;
  /* 琥珀压深一档：原来的 #c9811f 当小字压在浅底上只有 ~3.4:1，
     现在无论当文字（压浅底）还是当底色（配 --warn-ink）都过 4.5:1 */
  --warn:#a8650f;
  /* accent / warn 当「底色」时的前景色。浅色主题下它们本身够深，所以配白字；
     深色主题下 accent/warn 是浅色，必须反过来配深字，否则白字直接糊掉 */
  --accent-ink:#ffffff; --warn-ink:#ffffff;
  --stat-bg:#eef2f4;            /* 提质感：统计块浅 tint */
  --ring:#e3e7ec;              /* 进度条/分隔底色 */
  --chip:#eef0f3; --chip-text:#6b7280;  /* 中性胶囊（标签/徽章） */
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 1px 3px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.05);
  /* 背景光晕色：跟随当前作用域的色系。小游戏作用域里会覆盖成青绿同源，
     所以这里不再写死「主页紫 + 琥珀」——那会和青绿 accent 打架 */
  --glow-1:rgba(67,56,202,.07); --glow-2:rgba(168,101,15,.05);
}

*{box-sizing:border-box;}
/* 点按不再给浏览器默认的灰块，交互反馈由各控件自己的 :active 负责 */
html{-webkit-tap-highlight-color:transparent;}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;                    /* 与主站 / 错误页统一，此前三处 1.6 / 1.65 / 1.7 */
  margin:0;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;  /* 与主站同一字重观感，此前只有主站开了 */
  overflow-x:hidden;
  /* 提质感：极淡的双色光晕，避免纯灰发闷。颜色走 --glow-1/--glow-2 */
  background-image:
    radial-gradient(60% 42% at 50% -6%, var(--glow-1), transparent 70%),
    radial-gradient(46% 36% at 92% 104%, var(--glow-2), transparent 70%);
}

.wrap{max-width:720px;margin:0 auto;padding:28px 18px 56px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.back{font-size:13px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;}
.back:hover{color:var(--accent);}
h1{font-size:18px;font-weight:600;margin:0;}

/* 提质感：卡片更大圆角 + 细腻阴影 */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow-md);
}
/* 提质感：页面标题左侧 accent 色条（呼应示意稿） */
.topbar h1{position:relative;padding-left:13px;}
.topbar h1::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;
  width:3px;border-radius:3px;background:var(--accent);
}
h2{font-size:15px;font-weight:700;margin:0 0 4px;}

.hidden{display:none!important;}

.btn{
  border:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  border-radius:10px;padding:11px 18px;
  transition:filter .15s,transform .08s,box-shadow .15s;
  box-shadow:var(--shadow-sm);
}
.btn:active{transform:scale(.96);}   /* 按下缩放统一 0.96（此前 0.94 / 0.96 / 0.97 三档并存） */
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);box-shadow:none;}
/* 提质感：hover 加位移 + 阴影，而非仅亮度。阴影取 accent 同源色，
   否则青绿按钮会顶着一块紫色投影（原来写死 rgba(67,56,202,.28)） */
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}

.field{margin-bottom:16px;}
.field label{display:block;font-size:14px;margin-bottom:6px;}
.field input[type=number]{width:100%;}
input[type=number]{
  width:100%;padding:10px 12px;font-size:16px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
/* 用 :focus-visible：鼠标点进来不再亮环，键盘 Tab 才有（此前 :focus 两种都会亮） */
input[type=number]:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
select{
  width:100%;padding:10px 12px;font-size:16px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);font-family:inherit;
}
textarea{
  width:100%;font-family:inherit;font-size:15px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);padding:10px 12px;
}
input[type=range]{width:100%;accent-color:var(--accent);}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);}
.hint{font-size:12px;color:var(--muted);margin-top:4px;}
.err{color:var(--bad);font-size:13px;min-height:18px;}

/* 分数/统计数字一律等宽（tabular-nums）：数字变化时宽度不再跳动 */
.score-num{font-size:44px;font-weight:800;color:var(--accent);text-align:center;line-height:1.15;font-variant-numeric:tabular-nums;}
.score-lbl{font-size:13px;color:var(--muted);text-align:center;}

.scrollwrap{max-height:320px;overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{border:1px solid var(--border);padding:7px 6px;text-align:center;}
th{background:var(--stat-bg);font-weight:600;}

/* 提质感：统计块用浅 tint 而非纯灰，形成色彩节奏 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:16px 0;}
.stats div{background:var(--stat-bg);border-radius:10px;padding:10px;text-align:center;}
.stats .k{font-size:12px;color:var(--muted);}
.stats .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;}

.note{font-size:12px;color:var(--muted);background:var(--accent-soft);border-radius:8px;padding:10px 12px;margin:16px 0;line-height:1.55;}

.sec-t{font-size:14px;font-weight:700;margin:18px 0 8px;}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.actions .btn{flex:1;min-width:140px;min-height:44px;}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.result-actions .btn{flex:1;min-width:140px;min-height:44px;}

.radio-row{display:flex;gap:20px;flex-wrap:wrap;}
.radio-row label{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin:0;min-height:40px;cursor:pointer;}
.radio-row input{width:18px;height:18px;}
.radio-row .sub{font-size:12px;color:var(--muted);}

.checkrow{display:flex;align-items:center;min-height:44px;}
.checkrow label{font-size:14px;margin:0;}
.checkrow input{width:18px;height:18px;flex:none;margin-right:8px;}
.checks label,.field .checkrow{display:flex;align-items:center;min-height:44px;gap:8px;font-size:14px;cursor:pointer;}

/* 游戏页通用：状态条 / 计时条 / 反馈 */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.status-l{font-size:14px;font-weight:600;white-space:nowrap;}
.status-r{flex:1;max-width:240px;}
.timerbar{height:8px;border-radius:999px;background:var(--ring);overflow:hidden;}
.timerbar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--ok);transition:width .1s linear,background .2s;}
.stage{text-align:center;padding:6px 0 14px;}
.stage-tip{font-size:13px;color:var(--muted);margin-bottom:6px;}
.feedback{min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;font-weight:700;}
.fb-ok,.feedback.ok{color:var(--ok);}
.fb-bad,.feedback.bad{color:var(--bad);}
.fb-to,.fb-sub,.feedback .fb-sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px;}
.fb-warn,.center.warn{color:var(--warn);}

/* ===== 无障碍：焦点环（统一注入） ===== */
/* 粗细统一 3px / offset 2px：此前 2px 与 3px 两套并存（common 与 tools/leetcode 各一份） */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;}
button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
/* 选中文本跟随主题：此前全站只有主站写了 ::selection，这里和 /leetcode/ 都是浏览器默认蓝 */
::selection{background:var(--accent-soft);color:var(--text);}

/* ===== 触控目标增强（headless 实测后追加） ===== */
/* 返回链接命中区：各游戏页返回链接是 class="back"（href="../"），
   旧写法 a[href="/"] 只命中 hub，游戏页里是死规则。改用类选择器。
   不加负边距，避免在 9 个页面上造成视觉位移。 */
.back{display:inline-flex;align-items:center;min-height:44px;}
/* 任何包裹了复选框/单选框的 label，命中区撑到 44px */
.checks label,.checkrow,.checkrow label,.radio-row label,.field .checkrow{min-height:44px;}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:none;}
/* 复选框本体统一 20px，!important 用于压过 password 页的内联 style */
input[type=checkbox]{width:20px!important;height:20px!important;}
/* .checkrow 内复选框提高特异性，确保压过上面的 18px 基数（nback 页面内另覆盖为 24px） */
.checkrow input[type=checkbox]{width:20px!important;height:20px!important;}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;cursor:pointer;}
/* 滑块与数字输入的命中高度 */
input[type=range]{height:28px!important;}
input[type=number]{min-height:44px;}

/* ===== 主题切换按钮（common.js 注入到 .topbar） ===== */
.theme-toggle{
  flex:none;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,transform .08s,background .15s;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
.theme-toggle:active{transform:scale(.96);}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.theme-toggle svg{width:18px;height:18px;}
/* 触屏设备把命中区撑到 44px（主站早就有这条，9 个小游戏页一直缺） */
@media (pointer:coarse) { .theme-toggle { width:44px; height:44px; } }

/* ===== 深色主题（C） ===== */
[data-theme="dark"]{
  --bg:#0f141a; --panel:#171d25; --border:#28313c;
  --text:#e6e9ee; --muted:#9aa3af;
  --accent:#a5b4fc; --accent-soft:#1e1b4b;
  --ok:#3fbf7f; --bad:#f0706f; --warn:#e0a44a;
  /* 深色下 accent/warn 是浅色，底色必须配深字 */
  --accent-ink:#0f141a; --warn-ink:#1c1406;
  --stat-bg:#1c242e; --ring:#2a333f;
  --chip:#222b36; --chip-text:#9aa3af;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 3px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --glow-1:rgba(165,180,252,.13); --glow-2:rgba(224,164,74,.06);
}
/* 尊重系统偏好：未手动选择时跟随系统 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141a; --panel:#171d25; --border:#28313c;
    --text:#e6e9ee; --muted:#9aa3af;
    --accent:#a5b4fc; --accent-soft:#1e1b4b;
    --ok:#3fbf7f; --bad:#f0706f; --warn:#e0a44a;
    --accent-ink:#0f141a; --warn-ink:#1c1406;
    --stat-bg:#1c242e; --ring:#2a333f;
    --chip:#222b36; --chip-text:#9aa3af;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 3px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    --glow-1:rgba(165,180,252,.13); --glow-2:rgba(224,164,74,.06);
  }
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(60% 42% at 50% -6%, var(--glow-1), transparent 70%),
    radial-gradient(46% 36% at 92% 104%, var(--glow-2), transparent 70%);
}
[data-theme="dark"] .panel{background:var(--panel);}

/* ===== 尊重系统「减弱动态效果」设置 ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}