/* 「玩过的」游戏页：海报墙沿用 watched.css，这里是游戏自己的部分 —— 平台小标、时长条、奖杯 / 成就 */

/* ---------- 平台小标：品牌色圆章 ---------- */
.pb { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; flex: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 1px 3px rgba(0, 0, 0, .35); }
.pb svg { width: 13px; height: 13px; fill: currentColor; }
.pb-steam { background: #1B2838; }
.pb-ps { background: #0070D1; }
.pb-xbox { background: #107C10; }
.pb-ns { background: #E60012; }
/* 海报左下角一排 */
.pbs { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }

/* ---------- 顶部：各平台款数 ---------- */
.g-plats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-plats li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1.5px solid var(--card-line); background: var(--chip-bg); font-size: 13px; }
.g-plats li b { color: var(--accent); }
.g-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.g-tools .cats { flex: 1; min-width: 0; order: 1; }
.g-tools .sort-switch { order: 2; }

/* ---------- 卡片里的时长 / 时长条 / 奖杯成就 ---------- */
/* 游戏封面用 IGN 的方形图：卡片改成正方形（没有 IGN 图时，Steam / Bangumi 的竖封面从中间偏上裁成方块） */
.game .p-img { aspect-ratio: 1 / 1; }
.game .p-img img { object-position: 50% 30%; }
.game .p-t { -webkit-line-clamp: 2; }
.g-h { display: grid; margin-top: 4px; padding: 0 2px; min-width: 0; }
.g-h b { font-size: 13px; white-space: nowrap; color: var(--accent); }
/* 多平台：总时长下面一行写各平台分别多少 */
.g-h small { font-size: 10.5px; line-height: 1.35; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar { display: block; height: 5px; margin: 5px 2px 0; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: inherit; background: var(--g-bar, var(--accent)); }
/* 时长条下面：平均通关时长 + 进度（玩到平均通关时长 = 100%） */
.g-avg { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; padding: 0 2px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.g-avg span { overflow: hidden; text-overflow: ellipsis; }
.g-avg b { font-weight: inherit; color: var(--accent); flex: none; }
.g-avg .ov { font-style: normal; }
/* 超过平均通关时长：条满格，右端加一个小勾 */
.g-bar.over { position: relative; overflow: visible; }
.g-bar.over i { border-radius: inherit; }
.g-bar.over::after {
  content: "✓"; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 8.5px; line-height: 1; text-shadow: none;
}
.g-achs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; padding: 0 2px; font-size: 11px; color: var(--muted); }
.g-tr, .g-ach { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.g-tr i, .g-ach .gs { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 10.5px; line-height: 1; color: #2B2416; text-shadow: none; }
.tr-g { background: #F2C94C; }
.tr-s { background: #D6DBE2; }
.tr-b { background: #E7A27A; }
.g-ach .gs { border-radius: 50%; background: #107C10; color: #fff; font-weight: 900; }
.g-tr b, .g-ach b { margin-left: 2px; font-weight: inherit; opacity: .85; }

@media (max-width: 640px) {
  .posters.games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb { width: 18px; height: 18px; }
  .pb svg { width: 11px; height: 11px; }
  .pbs { left: 4px; bottom: 4px; gap: 3px; }
  .g-h b { font-size: 12px; }
  .g-h small { display: none; }
  .g-avg { font-size: 9.5px; gap: 4px; }
  .g-avg .ov { display: none; }
  .g-achs { font-size: 10px; gap: 3px 6px; }
  .g-tr i, .g-ach .gs { min-width: 14px; height: 14px; font-size: 9.5px; }
  .g-tools .sort-switch { margin-left: auto; }
}
@media (min-width: 560px) and (max-width: 640px) { .posters.games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 时长条配色：跟着主题 ---------- */
/* 雨夜：金色渐变，带一点光 */
@media (pointer: fine) and (min-aspect-ratio: 6/5), (pointer: none) and (min-aspect-ratio: 6/5), (pointer: coarse) and (min-aspect-ratio: 2/1) {
  :root { --g-bar: linear-gradient(90deg, #C99A3B, #FFD27A); }
  .g-bar { background: rgba(255, 255, 255, .1); }
  .g-bar i { box-shadow: 0 0 6px rgba(255, 210, 122, .55); }
  .g-h b { color: #FFD27A; }
  .g-plats li b { color: #FFD27A; }
}
/* 绘梨衣：红条 + 黑框，像贴纸 */
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 2/1) {
  :root { --g-bar: #C8102E; }
  .g-bar { height: 7px; border-radius: 0; border: 1.5px solid #111; background: #fff; }
  .g-bar i { border-radius: 0; }
  .pb { box-shadow: 0 0 0 2px #111; }
  .g-plats li { border-radius: .2rem; border: 2px solid #111; }
}
/* 幽香：叶绿到向日葵黄 */
@media (max-aspect-ratio: 3/5), (pointer: fine) and (max-aspect-ratio: 6/5), (pointer: none) and (max-aspect-ratio: 6/5) {
  :root { --g-bar: linear-gradient(90deg, #2F6A1F, #8DBA3C 60%, #F5B82E); }
  .g-bar { height: 6px; background: rgba(78, 125, 49, .15); }
}
/* 射命丸文：报纸红墨水条 + 细黑框 */
html.aya { --g-bar: repeating-linear-gradient(135deg, #B8352B 0 6px, #A12E25 6px 9px); }
html.aya .g-bar { height: 6px; border-radius: 0; border: 1px solid var(--ink); background: rgba(251, 248, 240, .7); }
html.aya .g-bar i { border-radius: 0; }
html.aya .g-h b, html.aya .g-plats li b { color: var(--red); }
html.aya .g-plats li { border-radius: .2rem; border-color: var(--ink); }
html.aya .pb { box-shadow: 0 0 0 1.5px #FBF8F0, 0 1px 2px rgba(31, 27, 22, .4); }