/* 添加正版游戏（入库）App
   —— 框架、侧边栏、主内容、卡片全部复用 steam-app 的 .sa-* 样式（50-steam-app.css）。
   本文件只补充入库专属的少量元素：侧栏说明、卡片底部的 AppID + 添加按钮、受限标记。 */

/* home 按钮：标题 + 会员角标 + 右侧的侧栏收起按钮挤在 282px 宽的一行里，
   「STEAM 添加器」会被折成两行并溢出固定的 30px 按钮高度。
   这里锁住不换行，宽度不足时让标题自己省略号截断，不去挤压角标。 */
.gu-home-btn { min-width: 0; }
.gu-home-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 侧栏 home 按钮上的会员标识小角标 */
.gu-free-badge {
  flex: none;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f9e57, #237043);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
/* 未开通用灰色：绿色是「已生效」的语义，未开通还标绿会让人以为已经买了 */
.gu-free-badge[data-state="off"] {
  background: rgba(255, 255, 255, 0.14);
  color: #b3bcc4;
}

/* 侧栏说明（替换 steam-app 的分组列表位置）。
   分四层：工具说明 → 添加前提 → 圆点含义 → 常见问题，各段用分隔线拉开。 */
.gu-side-tips { padding: 4px 16px 20px; }
/* 字号整体比 steam-app 侧栏的分组标签（11px）大一档：那边是短标签，
   这里是成句说明，11.5px 读起来太吃力。 */
.gu-tip-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: #c2cbd2;
}

.gu-tip-block {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gu-tip-title {
  margin: 0 0 9px;
  color: #dcdedf;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 「添加前请先做」与其它段落同样用分隔线，只把标题提亮做区分，不加背景板 */
.gu-tip-important .gu-tip-title { color: #9fd8f7; }

.gu-step-list {
  margin: 0;
  padding-left: 18px;
  color: #b7c0c8;
  font-size: 12.5px;
  line-height: 1.8;
}
.gu-step-list li { margin-bottom: 4px; }
.gu-tip-hint {
  margin: 8px 0 0;
  color: #8c96a0;
  font-size: 12px;
  line-height: 1.7;
}

/* 圆点含义：图例与卡片状态点同款 */
.gu-dot-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  color: #9aa4ae;
  font-size: 12.5px;
  line-height: 1.7;
}
.gu-dot-line:last-child { margin-bottom: 0; }
/* 圆点垂直居中对齐首行文字，字号变大后要跟着下移 */
.gu-dot-line .sa-card-dot { margin-top: 6px; }

.gu-faq-list { margin: 0; }
.gu-faq-list dt {
  position: relative;
  margin-bottom: 4px;
  padding-left: 11px;
  color: #b7c0c8;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
}
/* 用小圆点代替符号图标，与卡片状态点风格一致 */
.gu-faq-list dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #66c0f4;
}
.gu-faq-list dd {
  margin: 0 0 11px;
  padding-left: 11px;
  color: #8c96a0;
  font-size: 11px;
  line-height: 1.7;
}
.gu-faq-list dd:last-child { margin-bottom: 0; }
/* 答案正文是灰色，只靠 font-weight 加粗看不出来，重点句要同时提亮颜色 */
.gu-faq-list dd b { color: #c3ccd4; font-weight: 600; }

/* 顶栏图例：修改器在 data-single="1" 时会隐藏提示词（详情页只显示一类），
   入库页两类要一直并列显示，所以在 .gu-app 作用域内恢复提示词。 */
.gu-app .sa-lib-legend[data-single="1"] .sa-legend-hint { display: inline; }
.gu-app .sa-lib-legend .gu-dot-ok,
.gu-app .sa-lib-legend .gu-dot-blocked { width: 8px; height: 8px; }

/* 卡片状态圆点：沿用修改器 .sa-card-dot 的尺寸与光晕规格，只换配色。
   绿=可入库；红=D加密或需第三方平台账号（入库了也玩不了）。 */
.gu-dot-ok {
  background: #7cf01b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(124, 240, 27, 0.75);
}
.gu-dot-blocked {
  background: #ff4d4d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(255, 77, 77, 0.75);
}

/* 详情页受限标记（hero 的添加按钮旁不需要，这里保留给未来扩展） */
.gu-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.gu-tag-denuvo { background: rgba(255, 99, 99, 0.2); color: #ff9a9a; }
.gu-tag-third { background: rgba(255, 176, 32, 0.2); color: #ffc45a; }

/* 受限卡片整体降饱和，提示不可用 */
.gu-card-disabled .sa-card-cover img { filter: grayscale(0.6) brightness(0.85); }

/* 已添加角标：右上角小胶囊，避免用户重复添加 */
.gu-added-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(47, 158, 87, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ===== 详情页：复刻修改器 hero（.sa-hero/.sa-detail-*），此处只补介绍正文 =====
   注意：以下覆盖全部限定在 .gu-app 作用域内，不影响 STEAM 修改器。 */

/* 封面只覆盖 hero 区域，不铺到下方内容区。
   修改器是整页通铺（inset:-20px），入库页的介绍正文很长，通铺会让文字压在封面上难读。 */
.gu-app .sa-detail-backdrop {
  bottom: auto;
  height: 300px;
}
.gu-app .sa-detail-cover { inset: -20px -20px auto -20px; height: 320px; }
/* 渐变在封面底部收干净，过渡到内容区底色 */
.gu-app .sa-detail-scrim {
  background: linear-gradient(to bottom,
    rgba(21, 26, 33, 0.3) 0px,
    rgba(21, 26, 33, 0.45) 120px,
    rgba(21, 26, 33, 0.75) 220px,
    #171d25 300px);
}
/* 内容区自带实底，确保封面结束后没有拼接色差 */
.gu-app .sa-detail-body { background: #171d25; }

/* 添加游戏按钮：套用 .sa-launch-btn 的绿色渐变胶囊，只是文案/图标不同 */
.gu-launch-btn.gu-added { background: linear-gradient(to right, #2f9e57, #237043); }

/* 固定版本开关：完全复用修改器「保存修改状态」的开关外观（.sa-persist 系列），
   位于 hero 右侧、设置齿轮左边。注意修改器在窄布局下会隐藏 .sa-persist，
   但固定版本是影响结果的功能开关、不能藏，故在 .gu-app 作用域内恢复显示。 */
.gu-lock-toggle { flex: none; }
.gu-app .sa-hero-right .gu-lock-toggle { display: flex; }
.gu-lock-toggle:focus-visible { outline: 2px solid #1a9fff; outline-offset: 2px; border-radius: 4px; }

/* hero 右侧的类型标签 */
.gu-genres { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gu-genre {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #c2cbd2;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* hero 内的发行/开发/发行商元信息：在游戏名下、APPID 按钮上 */
.gu-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  color: #b7c0c8;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.gu-hero-meta .gu-dot { color: rgba(255, 255, 255, 0.45); }

/* 介绍正文区：外框复用修改器功能列表的 .sa-cheat-section（毛玻璃 + 细边 + 圆角），
   标题栏复用 .sa-cheat-group，此处只补正文排版。 */
/* 介绍 + 常见问题双栏。介绍占满剩余宽度，FAQ 固定窄栏贴右。
   min-width:0 必须有：flex 子项默认按内容撑开，游戏介绍里的宽图会把
   左栏顶大，把右栏挤出可视区。 */
.gu-intro-view { display: flex; gap: 16px; align-items: flex-start; }
/* 左栏容器：截图区 + 介绍区纵向排列。
   不设 max-width：那是单栏时期为限制长文行宽加的，双栏下会和右侧窄栏叠加
   超出主区可用宽度，把两栏一起挤窄。现在由 flex:1 吃掉剩余空间即可。 */
.gu-intro-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* min-width:0 + overflow:hidden 双保险：前者让 flex 子项能收缩到小于内容宽度，
   后者兜住内部真的放不下的元素（第三方富文本里的宽表格等） */
.gu-intro-section { min-width: 0; overflow: hidden; }

/* ---- 游戏截图（Steam 商店同款：大主图 + 缩略图条）---- */
/* 同样要 min-width:0：缩略图条是横向滚动容器，不限制的话它会按内容总宽度
   （十几张 108px）把整个截图区撑开，窄屏下顶破详情区 */
.gu-shots { min-width: 0; overflow: hidden; }
.gu-shots-body { padding: 12px 14px 14px; min-width: 0; }
.gu-shot-main {
  /* 16:9 固定比例：不同游戏的截图尺寸可能不一致，用 aspect-ratio 占位
     可避免图片逐张加载时页面高度反复跳动 */
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0e1319;
}
.gu-shot-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gu-shot-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  /* 横向滚动而不是换行：缩略图排成一条更接近 Steam 的观感，
     也不会因为图多而把介绍推到很下面 */
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
/* 选中态用明暗区分，不加线框：截图本身色彩繁杂，一道蓝框会和画面抢注意力，
   而「当前这张更亮」本身就是最直观的指示。未选中压暗并轻微降饱和，
   让选中的那张从一排缩略图里自然浮出来。 */
.gu-shot-thumb {
  flex: none;
  width: 108px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: #0e1319;
  cursor: pointer;
  filter: brightness(0.5) saturate(0.75);
  transition: filter 0.16s ease;
}
.gu-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gu-shot-thumb:hover { filter: brightness(0.78) saturate(0.9); }
/* 选中：完全恢复原图亮度与饱和度 */
.gu-shot-thumb.on { filter: none; }
/* 键盘聚焦仍保留描边 —— 那是无障碍必需的可见焦点指示，与鼠标选中态无关 */
.gu-shot-thumb:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }

/* 常见问题窄栏。sticky 让它在长篇介绍滚动时留在视野内 —— 这些问题多是
   「点了添加之后」才遇到的，需要随时能看到。 */
.gu-faq-aside {
  flex: none;
  /* 弹性宽度而不是固定值：这一栏是成段问答，宽度不足时每行只剩十几个字，
     一句话被切成四五行很难读。宽屏放到 420px 让答案两三行内说完，
     窄屏由下方的容器断点逐级收窄，尽量不掉到介绍下方。 */
  width: clamp(320px, 30vw, 420px);
  position: sticky;
  top: 12px;
  /* 100cqh 依赖 .sa-main 的容器查询上下文（与修改器详情侧栏同一套），
     减去顶部留白与底部呼吸空间，超出后自身滚动，不顶长页面 */
  max-height: calc(100cqh - 80px);
  overflow-y: auto;
  padding-bottom: 4px;
}
.gu-faq-aside .gu-faq-list { padding: 12px 16px 6px; }
/* .gu-faq-list 的基础字号（11.5/11px）是为窄侧边栏定的，放到详情页正文区偏小。
   这里只放大详情页里的这一份，侧栏其它提示文案不受影响。
   参照同页游戏介绍的 13.5px，问答分别取 13 / 12.5px。 */
.gu-faq-aside .gu-faq-list dt {
  font-size: 13px;
  color: #c6ccd2;
  margin-bottom: 5px;
  padding-left: 13px;
  /* 问题标题是扫读入口，优先保持单行；实在放不下才换行（不用 nowrap+ellipsis，
     截断成「提示「个别附加内容可…」反而看不出问的是什么）。
     balance 让被迫换行时两行长度接近，不出现末行只剩两个字。 */
  text-wrap: balance;
}
.gu-faq-aside .gu-faq-list dt::before { top: 8px; width: 6px; height: 6px; }
.gu-faq-aside .gu-faq-list dd {
  font-size: 12.5px;
  line-height: 1.8;
  color: #9aa4ae;
  margin-bottom: 14px;
  padding-left: 13px;
}
.gu-faq-aside .gu-faq-list dd b { color: #dfe5ea; }

/* 主区变窄时先逐级压缩 FAQ 栏，尽量保持双栏 —— 掉到介绍下方后用户要滚很长
   一段才看得到，等于这块说明失效了。
   断点用 @container samain（.sa-main 提供上下文），跟随主区实际宽度而不是窗口
   宽度：侧边栏展开/收起同样会改变主区可用宽度。 */
@container samain (max-width: 1040px) {
  .gu-faq-aside { width: 320px; }
}
/* 补这一档避免宽度倒挂：320px 若一直撑到 860px，主区 900px 时左栏只剩 524px，
   反而比 860px 档（536px）更窄，截图区会先被压扁 */
@container samain (max-width: 960px) {
  .gu-faq-aside { width: 292px; }
}
@container samain (max-width: 860px) {
  .gu-intro-view { gap: 12px; }
  .gu-faq-aside { width: 268px; }
  .gu-faq-aside .gu-faq-list { padding: 10px 12px 6px; }
}
@container samain (max-width: 720px) {
  /* 228px 是双栏的下限：再窄答案每行不足 14 个字，读起来比滚到下面更痛苦 */
  .gu-faq-aside { width: 228px; }
  .gu-faq-aside .gu-faq-list dt { font-size: 12.5px; }
  .gu-faq-aside .gu-faq-list dd { font-size: 12px; line-height: 1.7; }
}

/* 只有真的放不下（主区 ≤620px，此时左栏不足 400px）才改为上下排列 */
@container samain (max-width: 620px) {
  .gu-intro-view { flex-direction: column; }
  /* flex-direction 变 column 后，flex:1 控制的是高度不是宽度，
     左栏会退回按内容宽度（游戏介绍里的宽图 / 长英文会把它顶出可视区）。
     必须显式给 100% 才会跟着容器收窄。 */
  .gu-intro-col { width: 100%; flex: none; }
  .gu-faq-aside {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* 手机尺寸：收紧内边距把宽度让给内容，缩略图也缩小让一屏能看到更多张 */
@container samain (max-width: 480px) {
  .gu-intro-rich { padding: 12px 12px 14px; font-size: 13px; line-height: 1.8; }
  .gu-shots-body { padding: 10px 10px 12px; }
  .gu-shot-thumb { width: 88px; }
  .gu-faq-aside .gu-faq-list { padding: 10px 12px 6px; }
}

.gu-intro-rich {
  padding: 14px 16px 18px;
  color: #c6ccd2;
  font-size: 13.5px;
  line-height: 1.9;
  /* Steam 的 about_the_game 是第三方富文本，可能带宽表格、超长英文单词、
     内联 width 的元素。窄屏下这些会把容器顶破、整页出现横向滚动条。 */
  overflow-wrap: break-word;
  word-break: break-word;
}
.gu-intro-rich p { margin: 0 0 12px; }
.gu-intro-rich img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
/* 表格无法折行，只能让它自己横向滚动，不去撑破整个详情区 */
.gu-intro-rich table { display: block; max-width: 100%; overflow-x: auto; }
/* 第三方 HTML 常带 width="800" 之类的内联属性，统一压回容器宽度 */
.gu-intro-rich video, .gu-intro-rich iframe { max-width: 100%; }
.gu-intro-rich h1, .gu-intro-rich h2, .gu-intro-rich h3 { color: #fff; margin: 18px 0 8px; font-size: 16px; }
.gu-intro-rich ul, .gu-intro-rich ol { margin: 8px 0; padding-left: 22px; }
.gu-intro-rich a { color: #66c0f4; }
.gu-intro-rich strong { color: #fff; }

/* 设置弹窗直接复用 steam-app 的 .sa-settings-* 结构与样式，此处不再另写。 */