/* 每日命题那三个角度的落地页（/daily-monster-challenge · /ai-judges-your-idea · /group-chat-game
   + ja 三张）在 seo-longtail.css 之上的一档。
   🔴 单开一个文件而不是加进 seo-shared.css：那份被全部 56 张静态页引用，而这里的类只有这 6 页用得上。
      也不内联进 HTML —— 六页的规则一模一样，内联就是同一份东西抄六遍（seoStatic.test.ts 有闸）。
   🔴 判决/外形那些**数字是真值**（shared/dailyJudge.ts 的 JUDGE_MULT / LOOK_MULT），判决名抄自
      app 的 i18n —— 两边任一漂了页面就在替产品说假话。已设机械闸逐行对（seoStatic.test.ts
      「判决名与倍率逐行对上」），所以改倍率会直接红，不必靠人记得。 */

/* ── 判决阶梯：左边判决名、中间倍率、右边裁判为什么这么判 ──
   刻意不画「条宽 = 倍率」的柱状图：0% 那档画不出来，−10% 更画不出来，
   而这四档恰恰是靠**对比**才有意思（+30 / +15 / 0 / −10），文字表比半截柱子读得快。 */
.vlad { display: grid; gap: 10px; max-width: 760px; margin: 4px 0 6px; padding: 0; list-style: none; }
/* 判决阶梯的行与组榜的行是同一种外观（描边卡片 + 一行网格），只有列宽/投影不同 ——
   共有的那层写一次，别各写一份（两份会分叉：第一版就已经差了 1px 圆角）。 */
.vrow, .grow {
  display: grid; align-items: center;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--panel);
}
.vrow {
  grid-template-columns: minmax(112px, auto) minmax(92px, auto) minmax(0, 1fr);
  gap: 8px 14px; padding: 12px 14px; box-shadow: 0 4px 0 var(--ink);
}
.vtag {
  display: inline-block; text-align: center; padding: 6px 12px; border-radius: 999px;
  border: 2px solid var(--ink); font-weight: 900; font-size: 15px; white-space: nowrap;
}
/* 🔴 四档一律墨字（不是白字）：实测品牌绿 #3FB877 + 白 = 2.52:1、橙 #F0825C + 白 = 2.61:1，
   都过不了 AA 的 4.5；换成墨字是 5.78 / 5.59，过。全站的 .navcta（绿+白）与 .button.primary
   （橙+白）确实是白字，但那是**大按钮**，而这里是 15px 的判决名 —— 那个词本身就是信息，
   看不清就等于这一段没写。四个底色仍然两两分明，所以只丢了白字、没丢辨识度。 */
.vtag.best { background: var(--green); color: var(--ink); }
.vtag.good { background: var(--gold); }
.vtag.flat { background: #fff; }
.vtag.bad  { background: var(--snap); color: var(--ink); }
.vnum { font-weight: 900; font-size: 17px; white-space: nowrap; }
.vsay { color: var(--sub); font-size: 15px; }

/* 外形评级：五档并排。幅度刻意比判决小一截 —— 它量的是「看起来多强」，不是「想得妙不妙」。 */
.lranks { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; padding: 0; list-style: none; }
.lrank {
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 13px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font-size: 15px;
}
.lrank b { font-size: 19px; }
.lrank span { color: var(--sub); font-weight: 800; font-size: 14px; }

/* ── 题面卡：开打前拿到的全部情报（弱点是明写的，谜语不是）── */
.brief {
  max-width: 560px; margin: 4px 0 10px; padding: 0;
  border: 2.5px solid var(--ink); border-radius: 14px; background: var(--panel); box-shadow: 0 6px 0 var(--ink);
}
.brief > h3 { margin: 0; padding: 13px 18px; border-bottom: 2px solid var(--ink); background: var(--gold); font-size: 17px; border-radius: 11px 11px 0 0; }
.brief dl { margin: 0; padding: 14px 18px 16px; display: grid; grid-template-columns: minmax(78px, auto) minmax(0, 1fr); gap: 9px 14px; }
.brief dt { color: var(--sub); font-size: 14px; font-weight: 800; }
.brief dd { margin: 0; font-size: 15px; }
.brief dd b { font-weight: 900; }
.brief .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.brief .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 14px; }
.brief .secret { color: var(--sub); font-size: 13px; padding: 0 18px 15px; margin: 0; }

/* ── 两周日历条：金框＝那天赢了。14 格固定，窄屏换行而不是压扁 ── */
.calstrip { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; padding: 0; list-style: none; }
.calcell {
  width: 42px; height: 52px; border: 2px solid rgba(43, 37, 64, .22); border-radius: 9px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: var(--sub); font-weight: 800; line-height: 1.25;
}
.calcell.won { border-color: var(--gold); border-width: 3px; box-shadow: 0 3px 0 var(--gold); color: var(--ink); }
.calcell.today { border-color: var(--ink); border-width: 3px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.calcell span { font-size: 15px; }

/* ── 组榜：一个链接开出来的那张榜 ── */
.gboard { display: grid; gap: 9px; max-width: 620px; margin: 4px 0 8px; padding: 0; list-style: none; }
.grow { grid-template-columns: minmax(26px, auto) minmax(0, 1fr) minmax(96px, auto); gap: 10px; padding: 11px 13px; }
.grow.crown { background: #FFF8E4; box-shadow: 0 4px 0 var(--gold); }
.grow .rk { font-weight: 900; color: var(--sub); }
.grow .who { font-weight: 800; }
.grow .who span { display: block; color: var(--sub); font-weight: 500; font-size: 14px; }

/* 道具菜单：左边道具名、右边「什么样的东西会拿到它」 */
.gearlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.gearlist li { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--panel); font-size: 15px; }
.gearlist b { display: block; margin-bottom: 3px; }
.gearlist span { color: var(--sub); }

@media (max-width: 760px) {
  .vrow { grid-template-columns: minmax(104px, auto) minmax(0, 1fr); }
  /* 窄屏把「裁判怎么说」整行放到第二行，别把判决名断成两截 */
  .vsay { grid-column: 1 / -1; }
  .gearlist { grid-template-columns: 1fr; }
  .grow { grid-template-columns: minmax(24px, auto) minmax(0, 1fr); }
  .grow .vtag { grid-column: 2; justify-self: start; }
}

/* 🔴 `.sectsub` / `.micro` 在 seo-page-core.css 里也有，但那份是**居中**版式（A 代页面用）。
   这六页是 seo-longtail.css 的左对齐长文版式，照搬会把小标题居中、和正文打架 ——
   所以在这里补左对齐版，而不是去改 core（那 9 页靠它居中）。 */
.sectsub { color: var(--sub); max-width: 680px; margin: 0 0 20px; }
.micro { color: var(--sub); font-size: 14px; margin: 12px 0 0; }