/* 足一把 —— 样式
   美术方向:排版驱动的极简。不用纹理/渐变/发光/emoji 图标,层次全靠字号、字距、留白。
   三套配色由 <html> 上的 class 切换(bg-sand 纸白 / bg-green 夜场 / bg-mint 球场),默认纸白,
   玩家在页面下方自己选,选择写进 localStorage(见 game.js 的 applyTheme)。

   两条贯穿全局的规矩:
   1) 强调色(--accent)只出现在「选中的 tab」和「主按钮」两处,所以每屏视线终点唯一。
      暗色主题下它是象牙白,亮色主题下自动变成近黑 —— 主按钮因此在亮色下是黑底白字。
   2) 答错的灰格(--x)始终只比底色差一点点。原来它比底色亮一大截,十格里七格在抢注意力;
      压平之后绿和黄自己就浮出来了,一眼能看出进展。
   3) 棋盘上一行里的字只有一个颜色(--cell-on),换状态只换底色。
      ⚠️ 这条决定了填色的取值范围,别反过来先挑好看的绿黄再配字:
      亮色主题统一深字 → 绿必须亮到深字也有 4.5:1(所以是 #5A9054 这种中绿,不是深绿);
      墨绿主题统一浅字 → 黄必须压到浅字也有 4.5:1(所以是 #8A6624 这种暗赭,不是亮琥珀)。
      改任何一个判定色之前,先跑一遍对比度再说。
*/

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "Source Han Sans SC", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 纸白(默认,类名沿用 bg-sand) ----------
   2026-10 重配:原来的暖米灰偏黄发旧,换成几乎中性的纸白。
   强调色改成深球场绿 + 白字(按钮、选中页签、姊妹站入口),和棋盘的亮绿「正确」分开:
   一个是「能点的」,一个是「猜对了」,不再共用一个颜色。
   裸 html 选择器给默认值。bg-green / bg-mint 的特异性(0,1,1)高于它(0,0,1),
   所以显式选了别的主题时不会被这里覆盖,与规则先后无关。
   对比度(WCAG):棋盘深字压在绿/黄/灰砖上分别 7.4 / 10.2 / 11.8,最淡的辅助字 4.6。 */
html, html.bg-sand {
  --ink:#F4F3EF; --panel:#FAFAF8; --panel-2:#EEEDE8;
  --line:#D9D7CF; --line-soft:#E7E5DF; --line-strong:#C3C0B6;
  --text:#141614; --muted:#565B57; --faint:#6A6F6B;
  --cell-on:#141614;
  --x:#D2D0C8;
  --g:#4DBA74;
  --y:#F0B93E;
  --name-bg:#FFFFFF; --name-line:#D2D0C8;
  --surface:#FFFFFF;
  --btn-bg:#FFFFFF; --btn-on:#141614;
  --accent:#17784A; --accent-on:#FFFFFF;
  --warn:#C2521E;
  --shadow:rgba(30,35,30,.10);
}
/* ---------- 夜场(类名沿用 bg-green) ----------
   近黑底 + 一排亮砖,像夜场的记分牌。深字压砖:8.5 / 10.2 / 4.9 */
html.bg-green {
  --ink:#0C0F0E; --panel:#121614; --panel-2:#181D1B;
  --line:#2A302D; --line-soft:#1B201E; --line-strong:#3A423E;
  --text:#ECEFED; --muted:#A3ABA6; --faint:#848D88;
  --cell-on:#0C0F0E;
  --x:#7A837E;
  --g:#4CC27A;
  --y:#E8B546;
  --name-bg:#E4E9E6; --name-line:#B9C1BC;
  --surface:#141917;
  --btn-bg:#232A27; --btn-on:#ECEFED;
  --accent:#4CC27A; --accent-on:#0C0F0E;
  --warn:#E08A4E;
  --shadow:rgba(0,0,0,.5);
}
/* ---------- 球场(类名沿用 bg-mint) ----------
   深草坪绿底 + 象牙白字。灰砖故意用不带绿的暖灰:草坪底上再来一块灰绿砖,和「正确」的绿分不开。
   强调色是象牙白(主按钮白底绿字)。深字压砖:9.1 / 10.0 / 7.5 */
html.bg-mint {
  --ink:#0F3A2A; --panel:#134131; --panel-2:#174A37;
  --line:#2C5E49; --line-soft:#1B4D39; --line-strong:#3B6E58;
  --text:#F4F0E4; --muted:#C2D2C7; --faint:#A0B8A9;
  --cell-on:#0E241A;
  --x:#B3AE9F;
  --g:#74D68F;
  --y:#F2C557;
  --name-bg:#F4F0E4; --name-line:#D6D0BE;
  --surface:#154632;
  --btn-bg:#1D5940; --btn-on:#F4F0E4;
  --accent:#F4F0E4; --accent-on:#0F3A2A;
  --warn:#F2A15E;
  --shadow:rgba(0,0,0,.3);
}

html, body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100%;
}
body { padding-bottom: 40px; }
body.view-home { padding-bottom: 0; }

.hidden { display: none !important; }

/* ============================================================
   顶栏
   标题用宽字距 + 一行拉丁副题做识别度,图标按钮全部改成文字
  (emoji 在各系统渲染不一致,是廉价感的主要来源)。
   点标题回首页。
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
}
.brand .cn { font-size: 1.02rem; font-weight: 600; letter-spacing: .3em; }
.brand .en { font-size: .6rem; font-weight: 500; letter-spacing: .26em; color: var(--faint); }
.brand:hover .en { color: var(--muted); }
.topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 姊妹站入口(两个)。margin-right:auto —— auto 外边距先吃掉所有剩余空间,
   所以它紧贴在标题右边,右侧那组文字按钮照样被推到最右,不受 space-between 影响。 */
.brand-links { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 12px; min-width: 0; }
/* 姊妹站入口。这里破了「强调色只给选中 tab 和主按钮」的规矩(见文件头第 1 条)——
   顶栏本来没有强调色元素,这两块实心色在这里不和别处抢视线。
   ⚠️ 两个入口分量相同(都是实心 + 呼吸圆点),这是项目所有者定的:
   试过把老的降成描边款,被否掉了。别再改成一主一次。
   小圆点会呼吸,把眼睛勾过来;prefers-reduced-motion 下停掉。 */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.brand-link:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 14px var(--shadow); }
.brand-link:active { transform: translateY(0); }
.bl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-on);
  opacity: .85;
  animation: bl-pulse 1.9s ease-in-out infinite;
}
@keyframes bl-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-dot { animation: none; opacity: .85; }
  .brand-link:hover { transform: none; }
}

.topbar-side { display: flex; gap: 2px; }
.icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: .76rem;
  letter-spacing: .08em;
  padding: 8px 10px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--text); background: var(--panel-2); }
/* 中英切换:白底描边小按钮 + 下拉(参考弗一把的语言按钮),比顶栏文字按钮显眼。用 <details>,开合不靠 JS */
.lang-menu { position: relative; margin-left: 6px; align-self: center; }
.lang-btn {
  list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 7px 0 8px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--surface); color: var(--text);
  font: 700 .76rem/1 var(--font); letter-spacing: .04em;
  cursor: pointer; user-select: none;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover, .lang-menu[open] .lang-btn { border-color: var(--accent); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-btn .lang-ico { width: 14px; height: 14px; }
.lang-btn .lang-chev { width: 12px; height: 12px; opacity: .6; transition: transform .15s; }
.lang-menu[open] .lang-chev { transform: rotate(180deg); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 128px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow);
}
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 4px;
  color: var(--text); text-decoration: none; font-size: .86rem;
}
.lang-list a:hover { background: var(--panel-2); }
.lang-list a.active { font-weight: 700; color: var(--accent); background: var(--panel-2); }
.lang-list a svg { width: 14px; height: 14px; }

/* ============================================================
   首页(2026-10 模块化)
   左:标题卡 + 四张模式卡(2×2);右:天梯卡(默认无限模式榜)。
   所有模块是同一种卡片(白底、细边、14px 圆角),层次靠卡片本身而不是颜色。
   参考了弗一把(shnlfriberg.online)的模块化,但没学它的彩色按钮排、斜切角和先选难度那一步。
   动效:开场滚球、卡片依次浮出、模式卡悬停上浮 + 顶边一道强调色划开、
   三块小砖隔一会儿翻一下、天梯页签墨线滑动 + 榜单逐行进场。
   ============================================================ */
.home {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;          /* 左右两栏底边对齐:天梯卡多高,左边的模式卡就一起撑多高 */
}
.home-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- 标题卡 ---------- */
.home-hero {
  position: relative;
  overflow: hidden;              /* 开场的球从卡片左边缘滚出来,而不是从屏幕外 */
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 34px 32px 28px;
}
/* 右侧的中圈 + 中线:半个球场的意思,颜色压到几乎看不见 */
.hero-pitch {
  position: absolute;
  top: 50%;
  right: -70px;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  border: 2px solid var(--line-soft);
  border-radius: 50%;
  pointer-events: none;
}
.hero-pitch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -200px;
  bottom: -200px;
  width: 2px;
  margin-left: -1px;
  background: var(--line-soft);
}
.hero-pitch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--line-soft);
}

/* 标题:粗黑字 + 往右下错开一层棋盘绿(足一把自己的「签名」)。
   错开的那层在文字浮出之后再滑出来。 */
.home-title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: clamp(3rem, 6vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .1em;
}
.ht-txt {
  display: inline-block;
  text-shadow: .06em .06em 0 var(--g);
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) .5s both, ht-shadow .5s cubic-bezier(.2, .8, .2, 1) 1s both;
}
@keyframes ht-shadow {
  from { text-shadow: 0 0 0 var(--g); }
  to   { text-shadow: .06em .06em 0 var(--g); }
}
/* 开场动效:足球滚进来停在「足一把」前面,略过一点再回正。
   滚过一次之后 game.js 给球挂 .rested,回首页不再重滚、标题也不再等球。 */
.home-ball {
  flex: 0 0 auto;
  width: .72em;
  height: .72em;
  margin-right: .2em;
  animation: ball-in 1.15s cubic-bezier(.25, .75, .3, 1) both;
}
.home-ball svg { display: block; width: 100%; height: 100%; }
.home-ball.rested { animation: none; }
.home-ball.rested + .ht-txt { animation-delay: 0s, .3s; }
@keyframes ball-in {
  0%   { transform: translateX(-560px) rotate(-900deg); }
  80%  { transform: translateX(.07em) rotate(10deg); }
  100% { transform: none; }
}

.home-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: .86rem;
  letter-spacing: .12em;
}
/* 三块小砖:棋盘的 绿 / 黄 / 灰。每 5 秒依次翻一下,像有人刚猜了一次 */
.home-tiles { display: inline-flex; gap: 5px; perspective: 300px; }
.home-tiles i {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--x);
  animation: tile-flip 5s cubic-bezier(.4, 0, .2, 1) infinite;
}
.home-tiles .t-g { background: var(--g); }
.home-tiles .t-y { background: var(--y); animation-delay: .14s; }
.home-tiles .t-x { animation-delay: .28s; }
@keyframes tile-flip {
  0%, 12%, 100% { transform: rotateX(0); }
  6%            { transform: rotateX(90deg); }
}

/* 首页大标题已经是「足一把」,顶栏左上角那个就不重复了(只藏不删,位置留着,姊妹站入口不跳) */
body.view-home .brand { visibility: hidden; }

/* ---------- 模式卡(2×2) ---------- */
.mode-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.mode-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon title arrow" "icon desc arrow";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-height: 92px;
  padding: 18px 18px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  font-family: var(--font);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .3s;
}
/* 每种模式一个颜色(2026-10 学弗一把):顶边色条 + 实心色块图标。
   这几个色只当图形用(白色图标压在上面,对比度都 ≥3:1),不拿来当文字色,所以三套主题通用 */
.mode-card[data-mode="daily"]    { --c: #D94045; }
.mode-card[data-mode="infinite"] { --c: #1B9A58; }
.mode-card[data-mode="battle"]   { --c: #DB7414; }
.mode-card[data-mode="easy"]     { --c: #3A6BDB; }
/* 顶边色条:平时就在,悬停时加粗 */
.mode-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--c);
  transition: height .25s cubic-bezier(.2, .8, .2, 1);
}
.mc-icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--c);
  color: #FFFFFF;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.mc-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-title { grid-area: title; align-self: end; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; }
.mc-desc { grid-area: desc; align-self: start; color: var(--faint); font-size: .74rem; letter-spacing: .04em; }
.mc-arrow {
  grid-area: arrow;
  font-style: normal;
  font-size: 1.1rem;
  color: var(--faint);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .2s;
}
.mode-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--line-soft)); box-shadow: 0 10px 24px var(--shadow); }
.mode-card:hover::before { height: 5px; }
.mode-card:hover .mc-icon { transform: rotate(-8deg) scale(1.08); }
.mode-card:hover .mc-arrow { transform: translateX(4px); color: var(--c); }
.mode-card:active { transform: translateY(-1px); }
.mode-card[disabled] { cursor: default; opacity: .45; }
.mode-card[disabled]:hover { transform: none; border-color: var(--line-soft); box-shadow: none; }
.mode-card[disabled]:hover::before { height: 3px; }
.mode-card[disabled]:hover .mc-icon { transform: none; }
.mode-card[disabled]:hover .mc-arrow { transform: none; color: var(--faint); }

/* ---------- 首页天梯 ---------- */
.home-rank {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px 22px 14px;
}
.hr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hr-head h2 { font-size: .78rem; font-weight: 600; letter-spacing: .32em; color: var(--faint); }
.hr-tabs { position: relative; display: flex; gap: 20px; }
.hr-tab {
  background: none;
  border: 0;
  padding: 4px 0 8px;
  font-family: var(--font);
  font-size: .86rem;
  letter-spacing: .1em;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s;
}
.hr-tab:hover, .hr-tab.active { color: var(--text); }
.hr-tab.active { font-weight: 600; }
/* 墨线:位置和宽度由 game.js 的 renderHomeRankTabs() 写进去 */
.hr-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1);
}

/* 固定 10 行的高度:加载中 / 切页签时卡片不跳 */
.hr-list { list-style: none; min-height: 390px; }
.hr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 39px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .88rem;
  animation: hr-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.hr-row[data-still] { animation: none; }
.hr-row:last-child { border-bottom: 0; }
@keyframes hr-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.hr-rk {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--faint);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}
/* 前三名的名次用棋盘的三种砖色:冠军绿、亚军黄、季军灰 */
.hr-row.top .hr-rk { color: var(--cell-on); font-weight: 700; }
.hr-row.top:nth-child(1) .hr-rk { background: var(--g); }
.hr-row.top:nth-child(2) .hr-rk { background: var(--y); }
.hr-row.top:nth-child(3) .hr-rk { background: var(--x); }
.hr-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-row.top .hr-nm { font-weight: 600; }
.hr-elo { font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-empty { padding: 26px 0; text-align: center; color: var(--faint); font-size: .82rem; letter-spacing: .06em; }

.hr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  color: var(--faint);
  letter-spacing: .04em;
}
.hr-me strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-more {
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: var(--font);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.hr-more:hover { color: var(--text); transform: translateX(3px); }

/* 进场:每次回到首页,卡片依次从下往上浮出来。
   fill 只用 backwards:结束后不能留着 transform,否则模式卡的悬停上浮会被动画的终值压住 */
.home-hero, .mode-card, .home-rank { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.mode-card:nth-child(1) { animation-delay: .08s; }
.mode-card:nth-child(2) { animation-delay: .13s; }
.mode-card:nth-child(3) { animation-delay: .18s; }
.mode-card:nth-child(4) { animation-delay: .23s; }
.home-rank { animation-delay: .12s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 首页只留一个入口去天梯:就是首页这块。顶栏的「天梯」按钮在首页藏起来,局内还在 */
body.view-home #btn-rank { display: none; }

/* 配色:三个色点,不带文字(名字在 title 里,悬停可见) */
.theme-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 40px auto 0; padding: 0 16px; }
.sw {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s;
}
.sw i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(140, 140, 140, .55);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sw-sand i { background: #F4F3EF; }
.sw-green i { background: #0C0F0E; }
.sw-mint i { background: #0F3A2A; }
.sw:hover i { transform: scale(1.18); }
.sw.on { border-color: var(--muted); }

.mode-card:focus-visible,
.hr-tab:focus-visible,
.hr-more:focus-visible,
.mini-btn:focus-visible,
.sw:focus-visible,
.icon-btn:focus-visible,
.brand-link:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body.view-home .site-footer { margin-top: 18px; }

/* ---------- 通用过渡:局内区块淡入、弹窗浮出 ----------
   都挂在元素「从 display:none 变成显示」的那一刻,所以不用改 JS。
   局内只做透明度,不做位移 —— transform 会干扰棋盘首列的 sticky。 */
/* fill 用 backwards 不用 both:动画结束后不能留着 opacity,否则 .search-wrap 会一直是独立层叠上下文,
   联想下拉框(z-index:50)被关在里面,盖不住后面的棋盘(踩过一次:下拉框被表头压住) */
#main-area, .battle-panel, .search-wrap, .status-bar { animation: fade .35s ease backwards; }
.modal-overlay { animation: fade .2s ease both; }
.modal { animation: pop .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-tiles i, .home-hero, .mode-card, .home-rank, .hr-row, .home-ball, .ht-txt,
  #main-area, .battle-panel, .search-wrap, .status-bar, .modal-overlay, .modal { animation: none; }
  .mode-card, .mode-card::before, .mc-icon, .mc-arrow, .hr-ink, .hr-more { transition: none; }
}

/* ============================================================
   模式切换 / 状态行 / 搜索
   tab 从填色胶囊改成下划线 —— 更像栏目,安静得多
   ============================================================ */
.mode-tabs {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line-soft);
}
.tab {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: .86rem;
  letter-spacing: .06em;
  padding: 15px 2px 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
/* 局内页签:选中下划线改成一条会滑动的墨线(.mt-ink),页签自己的下边框就不画了 */
.mode-tabs { position: relative; }
.mode-tabs .tab.active { border-bottom-color: transparent; }
.mt-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1);
}

/* 次数格 */
.pips { display: inline-flex; gap: 4px; align-items: center; }
.pip {
  width: 9px; height: 9px; border-radius: 2px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color .2s;
}
.pip.on { background: var(--muted); box-shadow: none; }
.pip.win { background: var(--g); box-shadow: none; }
.pip.new { animation: pip-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pip-pop { from { transform: scale(.2); } to { transform: none; } }

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .06em;
  min-height: 1.6em;
}
.mode-note {
  text-align: center;
  color: var(--faint);
  font-size: .72rem;
  letter-spacing: .06em;
  margin: 6px 0 0;
}
.mode-note strong { color: var(--muted); font-weight: 600; }

/* 无限模式题库筛选。联赛模式只改变抽题和搜索范围,不进入现有总榜。 */
.league-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px auto 0;
  padding: 0 16px;
}
.league-filter-label {
  color: var(--faint);
  font-size: .7rem;
  letter-spacing: .1em;
  margin-right: 2px;
}
.league-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-bg);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font);
  font-size: .72rem;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.league-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.league-check:hover { color: var(--text); border-color: var(--accent); }
.league-check.active {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
}
/* 可交互控件用比容器更重的一级描边(--line-strong)+ 实底 + 深色文字。
   原来是"透明底 + --line 描边(对底色只有 1.2)+ 灰字",读起来就是一行普通文字,
   完全不像按钮 —— 放弃看答案 / 换一题 / 改名 / 看榜 都吃了这个亏。 */
.mini-btn {
  background: var(--btn-bg);
  border: 1px solid var(--line-strong);
  color: var(--btn-on);
  border-radius: 6px;
  padding: 6px 13px;
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .15s;
}
.mini-btn:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* 棋盘上方的间距挂在 #main-area 上,不挂在搜索框下面 ——
   本局结束时搜索框整条会收起来,间距不能跟着一起没了 */
.search-wrap { position: relative; max-width: 420px; margin: 22px auto 4px; padding: 0 16px; }
#main-area { padding-top: 26px; }
#search {
  width: 100%;
  padding: 14px 16px;
  font-size: .95rem;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#search::placeholder { color: var(--faint); }
/* 聚焦:强调色描边 + 一圈很淡的同色光晕 */
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
#search:disabled { opacity: .6; cursor: not-allowed; }

.suggestions {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  max-height: 290px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 10px 28px var(--shadow);
}
.suggestion {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.suggestion:hover, .suggestion.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.suggestion .cn { font-weight: 600; letter-spacing: .02em; }
.suggestion .en { color: var(--faint); font-size: .78rem; }

/* ============================================================
   棋盘
   格子去边框、gap 收到 4px、圆角 6px —— 一行拼成整条,不再是十个独立方框。
   首列 sticky:横滑时球员名钉在左边不动(右侧一道投影表示它浮在上层)。
   绿格用浅字、黄格用深字 —— 两种状态除了色相还差一个明度,扫一眼就分得开。
   ============================================================ */
.board-outer { position: relative; max-width: 1000px; margin: 0 auto; }
.board-wrap {
  overflow-x: auto;
  padding: 0 16px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.board-wrap::-webkit-scrollbar { height: 6px; }
.board-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.scroll-hint {
  display: none;
  text-align: center;
  color: var(--faint);
  font-size: .74rem;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.scroll-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6px;
  width: 44px;
  pointer-events: none;
  background: linear-gradient(to left, var(--ink) 8%, rgba(0,0,0,0));
}

.board { min-width: 900px; }
.row {
  display: grid;
  grid-template-columns: 184px repeat(9, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}
.header-row .cell {
  background: none;
  min-height: 0;
  padding: 0 4px 9px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--faint);
}
.header-row .name-cell {
  padding-left: 12px;
  text-align: left;
  align-items: flex-start;
  background: var(--ink);       /* sticky 需要不透明底,否则横滑时会透出下面的格子 */
  border: none;
  box-shadow: none;
}

.cell {
  background: var(--x);
  color: var(--cell-on);
  border-radius: 6px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .85rem;
  padding: 5px 6px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.cell .sub { font-size: .7rem; letter-spacing: .04em; opacity: .72; margin-top: 2px; }

/* 球员名格:它是一块独立的砖,不是页面背景也不是"又一块灰砖"。
   原来用 --panel-2,和答错的灰格只差几个色阶(墨绿主题下差 6 个),糊成一片。
   现在给它整行最突出的底色 + 一圈描边 —— 右边九块是纯色填充、它是描边砖,
   两种做法不同,所以一眼就分得出来;顺便满足 sticky 需要不透明底。 */
.name-cell {
  background: var(--name-bg);
  border: 1px solid var(--name-line);
  color: var(--cell-on);
  align-items: flex-start;
  text-align: left;
  padding-left: 11px;
  padding-right: 11px;
  gap: 1px;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 14px 0 14px -13px var(--shadow);
}
.name-cell > span:first-child { font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
/* 英文名和其他格子的副行(大洲)用同一种做法:同一个文字色降透明度,
   这样整行的字仍然只有一个颜色 */
.name-cell .sub { font-size: .7rem; letter-spacing: .02em; opacity: .72; margin-top: 0; }

/* 三种状态只换底色,不换文字色 —— 一行里所有格子的字必须是同一个颜色 */
.cell.g { background: var(--g); }
.cell.y { background: var(--y); }
.cell.x { background: var(--x); }
/* 猜中的那一行,名字砖也转绿(整行一片绿是"赢了"最直接的信号) */
.name-cell.g { background: var(--g); border-color: var(--g); }

/* 对战:对手棋盘的球员名打码 */
.cell.masked { letter-spacing: .1em; font-size: .78rem; }

/* 翻转揭示动画 */
.cell.reveal { animation: flipIn .45s ease both; }
@keyframes flipIn {
  0%   { transform: rotateX(90deg); opacity: .4; }
  100% { transform: rotateX(0deg);  opacity: 1; }
}
/* 猜中:翻完之后整行从左到右依次跳一下。--i 是格子序号,由 addGuessRow() 写 */
.row.win .cell { animation: win-hop .55s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes win-hop {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-7px); }
}
/* 前庭敏感用户:关掉翻转、猜中跳动和倒计时弹跳,内容照常显示 */
@media (prefers-reduced-motion: reduce) {
  .cell.reveal, .battle-countdown.pop, .row.win .cell, .pip.new { animation: none; }
  .mt-ink { transition: none; }
}

/* ---------- 图例 ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 26px auto 0;
  color: var(--faint);
  font-size: .76rem;
  letter-spacing: .06em;
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.dot.g { background: var(--g); }
.dot.y { background: var(--y); }
.dot.x { background: var(--x); }

/* ============================================================
   联网对战面板
   ============================================================ */
.battle-panel { max-width: 720px; margin: 20px auto 0; padding: 0 16px; }
.battle-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 20px 18px;
  text-align: center;
}
.battle-card h3 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.battle-card .muted-line {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.8;
  letter-spacing: .04em;
  margin: 6px 0;
}
.room-code {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .34em;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.battle-timer { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.battle-timer.urgent { color: var(--warn); }
.battle-countdown {
  font-size: 3rem;
  font-weight: 600;
  margin: 8px 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.battle-countdown.pop { animation: cdPop .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes cdPop {
  0%   { transform: scale(1.5); opacity: .25; }
  100% { transform: scale(1);   opacity: 1; }
}
.battle-sub { color: var(--faint); font-size: .78rem; letter-spacing: .06em; margin-top: 4px; }
.battle-score-big { font-size: 1.5rem; font-weight: 600; letter-spacing: .1em; margin: 8px 0; font-variant-numeric: tabular-nums; }
.battle-hist { font-size: .78rem; color: var(--muted); line-height: 1.9; margin: 8px 0; letter-spacing: .04em; }
.battle-hist .win { color: var(--g); font-weight: 600; }
/* 对战大厅的房间题库选择。和无限模式的 .league-check 同一套药丸视觉,
   只是这里是单选、用按钮实现(选中态靠 .active) */
.battle-pool { margin-top: 16px; }
.battle-pool .bp-label {
  color: var(--faint);
  font-size: .7rem;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.battle-pool .bp-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.bp-pill {
  background: var(--btn-bg);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font);
  font-size: .72rem;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.bp-pill:hover { color: var(--text); border-color: var(--accent); }
.bp-pill.active {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
}
.battle-row-buttons { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.battle-join-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
#room-input {
  width: 132px;
  padding: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 1rem;
  font-family: var(--font);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
#room-input:focus { border-color: var(--muted); }
.opp-progress { margin-top: 12px; font-size: .76rem; color: var(--muted); letter-spacing: .06em; text-align: center; }

.opp-area { max-width: 1000px; margin: 26px auto 0; }
.opp-title {
  text-align: center;
  color: var(--faint);
  font-size: .76rem;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.opp-title span { color: var(--muted); font-weight: 600; }

.battle-warn { color: var(--warn); font-size: .78rem; letter-spacing: .04em; margin-top: 8px; }
.battle-error { color: var(--warn); font-size: .78rem; letter-spacing: .04em; margin-top: 10px; }

/* ============================================================
   弹窗
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 26px 24px 22px;
  box-shadow: 0 14px 44px var(--shadow);
}
.modal h2 { margin-bottom: 14px; font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; }
.modal h3 {
  margin: 18px 0 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--faint);
  text-transform: uppercase;
}
.modal p, .modal li { font-size: .84rem; line-height: 1.8; margin-bottom: 8px; color: var(--muted); }
.modal li strong, .modal p strong { color: var(--text); font-weight: 600; }
.modal ul { padding-left: 18px; margin-bottom: 8px; }
.modal .muted { color: var(--faint); font-size: .8rem; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.modal-close:hover { color: var(--text); }

.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .76rem; }
/* 帮助弹窗里的三个小色块,和棋盘同一套做法:只换底色,字色统一 */
.chip { color: var(--cell-on); }
.chip.g { background: var(--g); }
.chip.y { background: var(--y); }
.chip.x { background: var(--x); }

/* 统计 */
.stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stat-box .num { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-box .lbl { font-size: .68rem; color: var(--faint); letter-spacing: .1em; }
.stats-dist .dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: .76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 序号列定宽:不然两位数的"10"会把那一行的条子整体推右边一截 */
.stats-dist .dist-row > span:first-child { width: 20px; flex: 0 0 auto; text-align: right; color: var(--faint); }
.dist-bar {
  background: var(--g);
  color: var(--cell-on);
  border-radius: 4px;
  height: 18px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: .7rem;
}
.dist-bar.zero { background: var(--x); color: var(--cell-on); }

/* 结算 */
.result-answer {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0 16px;
  font-size: .8rem;
  line-height: 1.9;
  color: var(--muted);
}
.result-answer .big {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 10px;
}
/* 属性排成两列的键值表:标签浅、值深,一眼能扫到自己猜岔的那一项 */
.result-answer .kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 22px;
  line-height: 1.7;
}
.result-answer .kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 3px 0;
}
/* 属性是奇数条,落单的最后一条铺满整行,免得右边空一格 */
.result-answer .kv:last-child:nth-child(odd) { grid-column: 1 / -1; }
.result-answer .kv .k { color: var(--faint); letter-spacing: .06em; flex: 0 0 auto; }
.result-answer .kv .v { color: var(--text); text-align: right; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.action-btn {
  flex: 1;
  padding: 11px 14px;
  font-size: .84rem;
  letter-spacing: .06em;
  font-family: var(--font);
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--btn-bg);
  color: var(--btn-on);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.action-btn:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.action-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}
.action-btn.primary:hover { filter: brightness(1.08); }
.action-btn[disabled] { opacity: .5; cursor: default; filter: none; }
.share-toast { margin-top: 10px; text-align: center; color: var(--g); font-size: .78rem; letter-spacing: .06em; }

/* 更新公告 */
.news-date { color: var(--faint); font-size: .75rem; letter-spacing: .1em; margin: -8px 0 14px; }
/* 刷新提示。必须写成 .modal .news-refresh(0-2-0)才压得过上面的 .modal p(0-1-1),
   光写 .news-refresh 的话字号和颜色会被压回正文那一档,写在后面也没用 —— 权重不看先后。 */
.modal .news-refresh {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 7px;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-on);
  background: var(--accent);
  animation: refresh-pulse 1.9s ease-out infinite;
}
@keyframes refresh-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .modal .news-refresh { animation: none; }
}
/* 常驻置顶块(新域名 / QQ 群)。
   高亮靠左侧色条 + 浅底,不用 --accent 填充 —— 上面的刷新提示已经是整个弹窗里唯一的实心强调块,
   再来一块同分量的就没有主次了。 */
.news-pin {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
}
/* 写成 .modal .news-pin-row(0-2-0)才压得过 .modal p(0-1-1),同 .news-refresh 那条注释 */
.modal .news-pin-row {
  margin: 0;
  font-size: .88rem;
  line-height: 1.95;
  font-weight: 600;
  color: var(--text);
}
.news-pin-k {
  display: inline-block;
  min-width: 4.2em;
  color: var(--faint);
  font-weight: 400;
  font-size: .76rem;
  letter-spacing: .08em;
}
.news-pin a { color: inherit; }
/* 3.2rem = .news-pin-k 的 4.2em × .76rem,和上一行的值对齐 */
.news-pin-note {
  display: block;
  margin-left: 3.2rem;
  color: var(--faint);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: 0;
}
.news-list { padding-left: 18px; margin: 0; }
.news-list li { font-size: .84rem; line-height: 1.8; margin-bottom: 8px; }
.news-link { margin-bottom: 16px; }

/* 昵称 */
.name-edit-row { display: flex; gap: 8px; margin-top: 12px; }
#name-input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font-size: .95rem;
  font-family: var(--font);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
}
#name-input:focus { border-color: var(--muted); }
.name-edit-row .action-btn { flex: 0 0 auto; }

/* 天梯排行榜 */
.rank-tabs { display: flex; gap: 26px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.rank-season-tabs { display: flex; gap: 8px; margin: -2px 0 14px; }
.rank-season-tabs .tab { padding: 6px 14px; border: 1px solid var(--line-soft); border-radius: 999px; }
.rank-season-tabs .tab.active { border-color: var(--accent); color: var(--accent); }
.rank-league-tabs { display: flex; gap: 16px; margin: -4px 0 14px; border-bottom: 1px solid var(--line-soft); }
.rank-league-tabs .tab { font-size: .78rem; padding: 9px 2px 8px; }

/* ============================================================
   对战历史
   列表行是整行可点的按钮;详情里按局回看双方猜测,棋盘复用主棋盘样式。
   modal-wide 只加宽弹窗,不碰其它弹窗的 460px 上限。
   ============================================================ */
.modal-wide { max-width: 880px; }
.history-toolbar { display: flex; align-items: center; margin-bottom: 10px; }
.history-toolbar .action-btn { padding: 6px 12px; font-size: .78rem; }
.history-summary { font-size: .86rem; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--font);
  font-size: .84rem;
  color: var(--text);
  text-align: left;
  transition: border-color .15s;
}
.history-item:hover { border-color: var(--accent); }
.history-item .hi-time { color: var(--faint); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-item .hi-opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 题库标签:只有小题库的场次才有,全部球员那些行不挂 */
.history-item .hi-pool {
  flex: none;
  font-size: .72rem;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.history-item .hi-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.history-item .chip { font-size: .74rem; }
.history-item .hi-elo { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.history-round-tabs { display: flex; gap: 8px; margin: 12px 0 4px; border-bottom: 1px solid var(--line-soft); }
.history-round-tabs .tab { font-size: .78rem; padding: 8px 2px 7px; }
.history-round-title { font-size: .86rem; }
.history-side-title { margin: 12px 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.history-empty { padding: 4px 0 8px; }
.history-board { min-width: 780px; }

.rank-me {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 11px 13px;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
  letter-spacing: .04em;
}
.rank-me strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
}
.rank-row:last-child { border-bottom: none; }
.rank-row .rk { width: 24px; flex: 0 0 auto; color: var(--faint); font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums; }
.rank-row.top .rk {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 5px; color: var(--cell-on); font-weight: 700;
}
.rank-row.top:nth-child(1) .rk { background: var(--g); }
.rank-row.top:nth-child(2) .rk { background: var(--y); }
.rank-row.top:nth-child(3) .rk { background: var(--x); }
.rank-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-row .elo { flex: 0 0 auto; width: 48px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-row .sub2 { flex: 0 0 auto; width: 96px; text-align: right; color: var(--faint); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.elo-line { text-align: center; margin: 10px 0; font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.elo-line strong { color: var(--text); font-variant-numeric: tabular-nums; }

.site-footer {
  margin: 28px auto 0;
  padding: 0 16px;
  max-width: 940px;
}
/* 页脚彩色小块:爱发电紫 / B 站蓝 / B 站粉,白字。窄屏 flex-wrap 自己折行,别改成 nowrap */
.foot-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--chip);
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--chip) 62%, #000);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.chip-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip-link:hover { transform: translateY(-2px); box-shadow: 0 5px 0 color-mix(in srgb, var(--chip) 62%, #000); }
.chip-link:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--chip) 62%, #000); }
.chip-link:focus-visible { outline: 2px solid var(--chip); outline-offset: 3px; }
/* 电脑上:平台和名字连成一行,B 站两块中间补一个冒号(爱发电那块本来就是一句话,不补) */
.c-bili .cl-k::after, .c-bili2 .cl-k::after { content: "："; }
.chip-link .cl-v { margin-left: -7px; }   /* 抵掉 flex 的 gap:平台和名字之间不留空 */
:lang(en) .chip-link .cl-v { margin-left: 0; }   /* 英文版是单词,要留空格 */
.c-afd   { --chip: #7B4FD6; }
.c-bili  { --chip: #0074A8; }
.c-bili2 { --chip: #C8336C; }

/* ============================================================
   移动端
   ============================================================ */
@media (max-width: 640px) {
  .topbar { padding: 15px 14px 13px; }
  .brand .cn { font-size: .92rem; letter-spacing: .24em; }
  .brand .en { font-size: .55rem; letter-spacing: .14em; }
  .icon-btn { font-size: .74rem; padding: 8px 7px; }
  /* 姊妹站入口有两个之后,窄屏一行塞不下「标题+两个入口+四个按钮」了:
     整组折到第二行占满宽度。第一行就还原成加入口之前的样子(标题 + 四个按钮)。 */
  .topbar { flex-wrap: wrap; row-gap: 10px; padding-bottom: 11px; }
  .brand-links { order: 3; width: 100%; margin: 0; justify-content: center; gap: 7px; }
  .brand-link { font-size: .66rem; padding: 5px 10px; gap: 5px; letter-spacing: .02em; }
  .bl-dot { width: 5px; height: 5px; }

  .mode-tabs { gap: 18px; }
  .tab { font-size: .8rem; padding: 13px 2px 11px; }
  .league-filter { gap: 6px; margin-top: 10px; padding: 0 12px; }
  .league-check { padding: 6px 10px; gap: 5px; }
  .search-wrap { margin: 16px auto 2px; padding: 0 14px; }
  #main-area { padding-top: 20px; }

  /* 俱乐部那列单独放宽:「非五大联赛」「皇家马德里」都是 5 个字,
     等宽的话会被拆成 4+1 折行,一格里挤两行很难看 */
  .board { min-width: 760px; }
  .row {
    grid-template-columns: 122px repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr) repeat(6, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 3px;
  }
  .header-row .cell { font-size: .66rem; letter-spacing: .04em; }
  .cell { min-height: 46px; font-size: .76rem; border-radius: 5px; }
  .name-cell { padding-left: 10px; }
  .name-cell > span:first-child { font-size: .8rem; }
  .name-cell .sub { font-size: .66rem; }
  .board-wrap { padding: 0 12px 4px; }
  .scroll-hint { display: block; }
  .legend { font-size: .7rem; gap: 14px; margin-top: 20px; }
  .battle-panel { padding: 0 14px; }
  .stats-summary { gap: 6px; }
  .stat-box .num { font-size: 1.2rem; }
}

/* 手机竖屏。入口折到第二行以后,第一行只剩标题 + 四个按钮,
   FOOTBALL GUESS 那行(顶栏最宽的一块)不用再让位了。 */
@media (max-width: 460px) {
  .icon-btn { padding: 8px 5px; }
}

/* 340 以下(iPhone SE 那一档)再挤一次:两个入口并排要占满这一行 */
@media (max-width: 340px) {
  .brand .cn { letter-spacing: .12em; }
  .brand-links { gap: 6px; }
  .brand-link { font-size: .62rem; padding: 4px 8px; gap: 4px; }
  .icon-btn { font-size: .7rem; padding: 8px 4px; }
}

/* 手机首页的顶栏:首页左上角的小标题本来就藏着(大标题已经是「足一把」),
   所以不再分两行 —— 姊妹站入口靠左、玩法/昵称/统计靠右,并成一行,去掉分隔线。
   一行实测要 355px,360 宽的安卓也放得下;再窄放不下时 flex-wrap 让右边那组自己折到下一行靠右,不会横向溢出。
   局内顶栏不受影响(仍是「标题 + 按钮」一行、入口一行)。 */
@media (max-width: 640px) {
  body.view-home .topbar-lead { display: none; }
  body.view-home .topbar { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px 0; border-bottom: 0; }
  body.view-home .brand-links { order: 0; width: auto; margin: 0; justify-content: flex-start; gap: 5px; }
  body.view-home .topbar-side { margin-left: auto; }
  body.view-home .brand-link { font-size: .62rem; padding: 5px 7px; gap: 4px; letter-spacing: 0; }
  body.view-home .icon-btn { font-size: .72rem; padding: 6px 4px; }
}

/* 手机:页脚三块并排成一行(等宽三列),每块上下两行 —— 上面小字是平台,下面是名字。
   一行塞「B站：愿携手共余生」这种全称放不下,拆两行之后 320 宽也够 */
@media (max-width: 640px) {
  .foot-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .chip-link {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 4px;
    padding: 8px 4px 9px;
    white-space: normal;
    text-align: center;
  }
  .chip-link svg { width: 12px; height: 12px; }
  .chip-link .cl-k { font-size: .64rem; font-weight: 500; opacity: .88; }
  .chip-link .cl-v { flex-basis: 100%; margin-left: 0; font-size: .76rem; }
  .c-bili .cl-k::after, .c-bili2 .cl-k::after { content: none; }
}

/* 首页:窄于 860 改成单列,顺序是 标题卡 → 模式卡 → 天梯卡 */
@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; padding: 28px 20px 0; max-width: 600px; }
}
@media (max-width: 640px) {
  .home { padding: 16px 16px 0; gap: 12px; }
  .home-main { gap: 12px; }
  .home-hero { padding: 24px 20px 20px; border-radius: 12px; }
  .hero-pitch { width: 170px; height: 170px; right: -60px; }
  .home-title { font-size: 2.9rem; }
  .home-sub { margin-top: 14px; font-size: .8rem; }
  .mode-grid { gap: 10px; }
  /* 手机上两列卡片太窄:图标放上面、标题和说明在下面,箭头去掉 */
  .mode-card {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "title" "desc";
    justify-items: start;
    row-gap: 3px;
    min-height: 0;
    padding: 14px 14px 13px;
    border-radius: 12px;
  }
  .mc-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 8px; }
  .mc-ico { width: 19px; height: 19px; }
  .mc-title { font-size: 1rem; }
  .mc-desc { font-size: .7rem; }
  .mc-arrow { display: none; }
  .home-rank { padding: 16px 16px 12px; border-radius: 12px; }
  .hr-row { height: 37px; }
  .hr-list { min-height: 370px; }
}
/* 1366×768 这类矮屏:收紧上下留白 */
@media (min-width: 861px) and (max-height: 820px) {
  .home { padding-top: 24px; }
  .home-hero { padding: 26px 28px 22px; }
  .mode-card { min-height: 80px; padding: 14px 16px; }
  .hr-row { height: 34px; }
  .hr-list { min-height: 340px; }
}