/* 猜履历 —— 排版驱动的极简。不用纹理、渐变、发光、emoji 图标,层次全靠字号/字距/留白。
   强调色**只出现在两个地方**:选中的配色胶囊 + 主按钮。所以每屏视线终点唯一。 */

/* 裸 html 给默认值。特异性 (0,0,1) 低于 html.bg-green 的 (0,1,1),
   所以显式选了别的主题时不会被默认值盖掉,**与规则书写先后无关**。 */
html {
  --bg: #0E100F;
  --panel: #171B18;
  --line: #2A312C;
  --line-strong: #4A564D;
  --text: #E9EEE8;
  --text-2: #B7C2B9;        /* 副题/次要标记:比正文浅一档,但远没到灰字那么弱 */
  --dim: #929F95;
  --accent: #4FB56A;
  --accent-fg: #10150F;
  --tile: transparent;      /* 队徽是真透明 PNG,直接落在底色上,不垫砖 */
  --tile-line: #3A443C;
  --crest-outline: #E9EEE8; /* 近黑底上的深色队徽(尤文整张纯黑)靠这圈描边才看得出形状 */
  --x: #141815;             /* 猜错的行:始终只比底色亮一点点,不给否定信息视觉重量 */
}
html.bg-warm {
  --bg: #F5F2EB;
  --panel: #FFFFFF;
  --line: #E0DACE;
  --line-strong: #A79D8A;
  --text: #22201B;
  --text-2: #4B4437;
  --dim: #6A6354;
  --accent: #4E7F49;
  --accent-fg: #FFFFFF;
  --tile: transparent;
  --tile-line: #CFC7B7;
  --crest-outline: #22201B;
  --x: #EDE9E0;
}
html.bg-grass {
  --bg: #EDF2E6;
  --panel: #FFFFFF;
  --line: #D5DFC8;
  --line-strong: #94A585;
  --text: #1E2419;
  --text-2: #45523C;
  --dim: #5D6B52;
  --accent: #3F7A46;
  --accent-fg: #FFFFFF;
  --tile: transparent;
  --tile-line: #C3D0B4;
  --crest-outline: #1E2419;
  --x: #E4EBDB;
}

* { box-sizing: border-box; }

/* 滚动条位置一直留着。不留的话:内容一超过一屏,滚动条冒出来把版心横向挤掉十几像素,
   居中的题面跟着横移一下 —— 和上下跳是同一类问题的两个方向。 */
html { scrollbar-gutter: stable; }

/* 格子边长抽成变量:箭头要按**队徽**的中线对齐,不是按"队徽+标记行"的中线,
   否则箭头会被下面那行标记压低半截。
   --arrow-gap 是箭头的左右内边距,也就是**相邻队徽之间的空白**。缩小队徽时它必须跟着缩,
   否则一行装得下的队徽数量根本涨不上去 —— 间距会吃掉省下来的宽度。 */
html { --tile-size: 112px; --arrow-gap: 16px; --crest-max: 1.3; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;        /* 主区吃掉剩余高度,页面短时底部不会露出空白 */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 镜像站横幅(只在非官方域名出现,见 game.js 的 showMirrorNote) ---------- */

/* 用强调色实底而不是描边:它是要被看见的东西,不是装饰。
   在顶栏**上面**,不进 #main-area —— 进去的话它会顶着题面,把"主区顶部锚定、
   题面一动不动"那条(第六节)破坏掉。 */
.mirror-note {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .02em;
}
.mirror-note a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

/* ---------- 顶栏 ---------- */

#topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  /* ⚠️ body 是 column flex,`margin: 0 auto` 会关掉 align-items: stretch,
     不写 width:100% 的话整条顶栏会缩成内容宽度,两端对齐就失效了。 */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 28px 22px;
  border-bottom: 1px solid var(--line);
}
#topbar h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .16em;    /* 中文标题,字距撑开 */
}
#topbar .sub {
  margin: 5px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .12em;
  /* 比站名浅一档:两行不能一样重,否则分不出主副;但也不能是灰字,
     它是整个游戏的问题本身。 */
  color: var(--text-2);
}
.tb-right { display: flex; gap: 8px; }

/* 配色胶囊。描边提重之后三个长得一样了,选中态用**双线圈**
   (inset box-shadow),不引入新颜色也能一眼看出选了哪个。 */
.swatch {
  width: 30px; height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 3px; }
.swatch[data-theme="bg-warm"] span { background: #E4DFD3; }
.swatch[data-theme="bg-green"] span { background: #1B211C; }
.swatch[data-theme="bg-grass"] span { background: #CBD9BC; }
.swatch.on { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- 主区 ---------- */

/* 间距挂在容器上,不挂在会消失的元素上 —— 本局结束时搜索框整条会收起来 */
#main-area {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 7vh 28px 64px;
  /* ⚠️ 这里**不能**垂直居中。居中的话每多一条猜测记录,总高度就变,
     整块内容会被重新居中 —— 表现为"每猜一次题面就往上跳一下"。
     改成顶部锚定 + 一个视口比例的上边距:题面钉死不动,记录只往下长。 */
  flex: 1;
}
#main-area > section { margin-bottom: 46px; }

.section-h {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--dim);
  text-align: center;
}

/* ---------- 队徽链 ---------- */

.chain {
  display: flex;
  flex-wrap: wrap;               /* 自动折行。里瓦尔多有 16 站,一行绝对放不下 */
  align-items: center;
  justify-content: center;       /* 队徽链是题面本身,居中,视线落点唯一 */
  /* 行间距要和"链条底部到输入框"的距离成比例。原来排间距 36px、底部 114px,
     一行时看不出来,两三行时链条内部挤成一团、下面却空一大块。 */
  gap: 24px 0;
  min-height: 134px;             /* 挂在容器上:一站的题和十六站的题,下面的东西不会来回跳 */
}
/* 箭头绑在**它后面那一站**上。绑在前一站上的话,折行时箭头会留在上一行末尾指向空处,
   而新行第一站前面光秃秃 —— "退役"折到新行时最明显。 */
.link { display: inline-flex; align-items: flex-start; min-width: 0; }
.arrow {
  height: var(--tile-size);      /* 和队徽等高 -> 箭头落在队徽中线上 */
  display: inline-flex;
  align-items: center;
  padding: 0 var(--arrow-gap);   /* 这个内边距就是相邻队徽之间的空白,恒定 */
  color: var(--text);            /* 箭头是链条的一部分,不是注释,用正文色 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
/* ⚠️ 格子**不能定宽**。队徽被裁到贴边之后各自宽度差很多(实测 72~112px),
   固定方格会让"看得见的间距"从 29px 跳到 57px,差近一倍 —— 那正是"间距不一样"的根因。
   改成按高度对齐、宽度自适应内容:相邻队徽之间的空白就等于箭头的内边距,恒定。
   超宽的横幅型队徽用 max-width 收住,免得一个占掉半行。 */
.tile {
  height: var(--tile-size);
  display: flex; align-items: center; justify-content: center;
  background: var(--tile);
  position: relative;
}
.tile img {
  max-height: 100%;
  max-width: calc(var(--tile-size) * var(--crest-max));
  display: block;
}

/* 链条末尾的"退役"。和队徽同样大小的格子、同样没有底 —— 它是链条的一节,不是标签。
   两个字撑满格子才够明显,但不越界,所以字号跟着格子走。 */
.tile-end {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1.1;
}

/* 和底色对比不足的队徽(哪些是构建期算出来的,见 crest-outline.js)加一圈**跟随轮廓**的描边。
   用 drop-shadow 而不是加方块底:它沿 alpha 边缘走,透明 PNG 的内部镂空也会被描上,
   所以尤文那种整张纯黑的徽章连内部形状都读得出来,而且不会出现"白盒子"。
   只作用于算出来不合格的那几个,其余队徽一点不动 —— 不会有贴纸感。 */
.tile.lowc img {
  filter:
    drop-shadow(1.5px 0 0 var(--crest-outline))
    drop-shadow(-1.5px 0 0 var(--crest-outline))
    drop-shadow(0 1.5px 0 var(--crest-outline))
    drop-shadow(0 -1.5px 0 var(--crest-outline));
}

/* 一站 = 队徽 + 它下面那行标记。标记行**每一站都占位**(不租借的是空的),
   否则有标记的那几站会把整行队徽顶得高低不齐。 */
.stop { display: flex; flex-direction: column; align-items: center; }
.cap {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-2);
}

.chain-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 22px;              /* 没有位置提示时也占位,免得换题时下面的东西上下跳 */
}

/* ⚠️ 必须写成 `#main-area > #puzzle`(2,0,0) 才盖得过 `#main-area > section`(1,0,1)。
   只写 `#puzzle` 是 (1,0,0),权重更低,写在后面也不生效。 */
#main-area > #puzzle { margin-bottom: 14px; }
/* 位置提示。**只有单一俱乐部的题才有** —— 一个巴萨徽章分不出加维和亚马尔。
   不加框:链条那一片已经够满了,再来一个方框会多出一个不必要的视觉层级。 */
.pos-badge {
  display: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
}
.pos-badge.on { display: inline-block; }
.pos-badge .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

/* ---------- 搜索 ---------- */

/* 输入框是全屏唯一的操作入口,必须一眼看见:
   实底 + 两倍粗的强描边 + 大字号。"细描边 + 和底色差不多的填充"读起来就是一块背景。 */
.search-wrap { position: relative; max-width: 520px; margin: 0 auto; }
#guess-input {
  width: 100%;
  padding: 18px 20px;
  font: 500 20px/1.4 inherit;
  font-family: inherit;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--text);   /* 描边直接用正文色:它是全屏唯一的操作入口 */
  border-radius: 10px;
}
#guess-input:focus {
  border-color: var(--accent);
  outline: none;
}
#guess-input::placeholder { color: var(--dim); }

.suggest {
  position: absolute;
  z-index: 20;
  left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.suggest li {
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px;
  min-width: 0;
}
.suggest li .lat { color: var(--dim); font-size: 13px; white-space: nowrap; }
.suggest li .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest li.sel, .suggest li:hover { background: var(--x); }

.tries {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text);
  text-align: center;
}


/* ---------- 猜过的记录 ---------- */

/* 宽度和居中写在这一条里。拆成两条(一条给 max-width 一条给 margin)会被后面的
   `margin: 0` 同权重覆盖掉 —— 踩过一次,记录整块偏在左边。 */
.history { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; }
.history li {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  /* 实底 + 强描边。原来"和底色差一点点的填充 + 细边"读起来就是一块背景。 */
  background: var(--panel);
  border: 2px solid var(--line-strong);
  font-size: 18px;
  font-weight: 600;
  display: flex; justify-content: center; align-items: baseline; gap: 10px;
}
.history li .lat { color: var(--dim); font-size: 14px; font-weight: 400; }
.history li.hit { background: var(--accent); color: var(--accent-fg); }
.history li.hit .lat { color: var(--accent-fg); opacity: .8; }

/* ---------- 按钮 ---------- */

/* 可交互控件必须比容器描边重一级:实底 + 强描边 + 深色文字。
   "透明底 + 普通描边 + 灰字"读起来就是一行普通文字,完全不像按钮。 */
.actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
}
.btn {
  font: inherit;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--text); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

/* 「分享这题」要显眼,但**不能也做成实底强调色**。
   实底的主按钮同屏只能有一个,否则视线终点就有两个了(见文件开头那条)——
   而它和「下一题」在答完之后是同时出现的。
   所以这里用强调色的描边 + 强调色的字:比普通按钮重一档,又不跟实底主按钮抢。 */
.btn-share {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.btn-share:hover { border-color: var(--accent); background: var(--x); }

.hidden { display: none !important; }

/* ---------- 页脚署名 ---------- */

/* 排版沿用姊妹站 D:\guess 的 .site-footer:两行、小字、字距撑开、上面一道细分隔线,
   链接用 border-bottom 而不是 text-decoration(下划线离字更远,不糊)。
   两处不同:颜色用正文色不用灰字(署名压成灰的等于藏起来),以及它在 #main-area 里
   紧跟按钮,不是推到视口底部的独立 footer。字重保持常规,不加粗。 */
#credit {
  margin: 34px auto 0;
  padding-top: 20px;
  max-width: 520px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.9;
}
#credit a {
  display: inline-block;
  margin-top: 3px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  word-break: break-all;         /* 窄屏上这串网址一行装不下,得允许断开 */
}
#credit a:hover { border-bottom-color: var(--text); }
#credit a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-all;         /* 窄屏上这串网址一行装不下,得允许断开 */
}
#credit a:hover { text-decoration-thickness: 2px; }

/* ---------- 结果弹窗 ---------- */

.modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 26px 24px;
  max-width: 420px; width: 100%;
  text-align: center;
}
.modal-box h2 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .24em;
  color: var(--dim);
}
.result-name { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
.result-detail { margin: 0 0 22px; font-size: 13px; color: var(--dim); }
.modal-box .btn { width: 100%; }

/* ---------- 分享卡 ---------- */

.share-box {
  max-width: 400px;
  position: relative;
  /* 16 站的题卡很高,小屏上要能滚,否则底部的按钮够不着 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.share-close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; cursor: pointer;
  color: var(--dim); font-size: 16px; line-height: 1;
  padding: 4px 6px;
}
.share-close:hover { color: var(--text); }
#share-title {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .24em;
  color: var(--dim);
}
/* 卡外面那圈描边只是让它在弹窗里“成为一张卡”。卡本身的底色是主题色,
   和弹窗底色(--panel)不一样,不描边的话两块颜色糊在一起看不出边界。 */
.share-card-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;               /* canvas 是 inline 元素,不去掉基线间隙下面会多一条缝 */
}
.share-card-wrap canvas,
.share-card-wrap img { width: 100%; height: auto; display: block; }
.share-tip {
  margin: 12px 0 0;
  font-size: 12px; line-height: 1.7;
  color: var(--dim);
  text-align: left;
}
.share-actions {
  display: flex; gap: 8px; margin-top: 16px;
}
.share-act { flex: 1; padding: 10px 8px; font-size: 14px; }

/* 提示条:比 alert 轻,不打断操作 */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; letter-spacing: .04em;
  z-index: 80; pointer-events: none;
  max-width: calc(100vw - 40px);
}

/* ---------- 移动端:三档,每档解决一个具体问题 ---------- */

@media (max-width: 640px) {
  #topbar { padding: 24px 14px 16px; }
  #main-area { padding: 34px 14px 60px; }
  #main-area > section { margin-bottom: 34px; }
  #topbar h1 { font-size: 26px; }
  html { --tile-size: 70px; --arrow-gap: 8px; --crest-max: 1.2; }
  .tile-end { font-size: 20px; }
  .chain { min-height: 92px; gap: 18px 0; }
  .arrow { font-size: 15px; }
  .cap { height: 18px; line-height: 18px; font-size: 12px; }
}
@media (max-width: 460px) {
  /* 手机竖屏。队徽再小就认不出徽章上的图案了,这一档是下限附近 */
  #topbar h1 { font-size: 23px; }
  #main-area { padding-left: 10px; padding-right: 10px; }
  /* 横幅型队徽在窄屏上尤其吃宽度,上限收到 1.1 倍,一行才放得下五六个 */
  /* 队徽大小和"一行放几个"是直接矛盾的:这一档是量出来的折中 —— 再大就掉回 4 个/行,
     再小徽章上的图案就认不出了。--crest-max 收到 1.05 是因为横幅型队徽在窄屏上
     一个就能顶掉一个格位。 */
  html { --tile-size: 52px; --arrow-gap: 4px; --crest-max: 1.02; }
  .tile-end { font-size: 16px; }
  .chain { min-height: 76px; gap: 16px 0; }
  .arrow { font-size: 13px; }
  #guess-input { padding: 15px 16px; font-size: 18px; }
  .history li { font-size: 16px; }
  .pos-badge { font-size: 15px; }
}
@media (max-width: 340px) {
  /* iPhone SE 那一档,再挤一次,否则顶栏折成两行 */
  #topbar h1 { font-size: 20px; letter-spacing: .1em; }
  #topbar .sub { font-size: 15px; }
  html { --tile-size: 46px; --arrow-gap: 4px; --crest-max: 1; }
  .tile-end { font-size: 14px; }
  .chain { min-height: 68px; }
  .swatch { width: 26px; }
}

/* 关掉动效,但**内容照常显示** */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}