/* ==========================================================
   compat.css —— Chrome 61 基线兼容层
   ==========================================================
   为什么需要这个文件：
     小工具容器最低基线是 Android 8.1 出场 Chrome / WebView 61。
     Chrome 61 不支持：flex gap(84+)、grid 的 gap 简写(66+)、
     dvh(108+)、min()/max()(79+)、aspect-ratio(88+)、inset(87+)、env()(69+)。

   本文件按「基线层 + 能力检测增强层」组织：
     1. 基线层：所有内核都能解析的写法（子项 margin、grid-gap、实色背景）。
     2. 增强层：现代内核的提升（gap、dvh、env() 安全区）。

   间距方案说明：
     flex 容器统一用「子项单边 margin」（> * + *）形成间距 ——
     这在所有内核表现一致，因此**不需要**为 flex gap 做 JS 能力检测，
     也就不会出现「margin + gap 同时生效导致双倍间距」的问题。
     由 css/style.css 中的 --gap-* 变量统一驱动，媒体查询只改变量。

   grid 容器仍用 gap（Chrome 61 支持 grid-gap 别名），
   在下方用 grid-gap 补齐 Chrome 61 的解析。
   ========================================================== */

/* ================= 1. flex 容器间距（基线：子项 margin） ================= */

/* .app 列向：相邻区块之间留白 */
.app > * + * { margin-top: var(--gap-app); }

/* .topbar 横向：品牌区与按钮区之间 */
.topbar > * + * { margin-left: var(--gap-topbar-c); }

/* .brand 横向：图标与标题之间 */
.brand > * + * { margin-left: var(--gap-brand); }

/* .topbtns 横向：图标按钮之间 */
.topbtns > * + * { margin-left: var(--gap-topbtns); }

/* .rank-bar 横向：段位各元素之间 */
.rank-bar > * + * { margin-left: var(--gap-rank); }

/* .legend 换行：横向间距 + 行距（换行时由行高自然分隔） */
.legend > .lg { margin-right: var(--gap-legend-c); margin-bottom: var(--gap-legend-r); }

/* .lg：圆点图标与文字之间 */
.lg > .lg-dot { margin-right: var(--gap-lg); }

/* .ov-actions 列向：按钮之间 */
.ov-actions > * + * { margin-top: var(--gap-ov-actions); }

/* .guide-actions 横向：跳过与下一步之间 */
.guide-actions > * + * { margin-left: var(--gap-guide-actions); }

/* .boss-head 横向：状态点与标题之间 */
.boss-head > * + * { margin-left: var(--gap-boss-head); }

/* ================= 2. grid 容器的 Chrome 61 别名 =================
   Chrome 61 只认 grid-gap / grid-row-gap / grid-column-gap，
   不认 gap 简写（66+ 才有）。补上别名即可，值与 gap 一致。 */
.hud {
  grid-gap: var(--gap-hud);
  grid-row-gap: var(--gap-hud);
  grid-column-gap: var(--gap-hud);
}
.statcard {
  grid-gap: var(--gap-statcard);
  grid-row-gap: var(--gap-statcard);
  grid-column-gap: var(--gap-statcard);
}
.bar-block {
  grid-column-gap: var(--gap-bar-c);
  grid-row-gap: var(--gap-bar-r);
}

/* 横屏时 .app 变成 grid（媒体查询在 style.css 中定义轨道） */
@media (orientation: landscape) and (max-height: 560px) {
  .app {
    grid-column-gap: 14px;
    grid-row-gap: 6px;
  }
  /* 横屏 .app 内是 grid，不再使用 flex 子项 margin */
  .app > * + * { margin-top: 0; }
}

/* ================= 3. 安全区（env 基线 + @supports 增强） =================
   Chrome 61 无法解析含 env() 的整条 padding，会导致内边距整体丢失，
   所以先给不含安全区的基线值，再用 @supports 覆盖为安全区版本。 */

.app {
  /* 基线：等效于无刘海屏的常规内边距 */
  padding: 12px 14px;
}
@supports (padding: env(safe-area-inset-top)) {
  .app {
    padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right))
             calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  }
}

.guide {
  /* 基线 */
  padding: 12px 14px 14px;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .guide {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 900px) {
  .app { padding-top: 20px; }
  @supports (padding-top: env(safe-area-inset-top)) {
    .app { padding-top: calc(20px + env(safe-area-inset-top)); }
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .guide { padding: 8px 10px 8px; }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .guide { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  }
}

/* ================= 4. 毛玻璃降级 =================
   backdrop-filter 是 Chrome 76+。style.css 里 .overlay 已给出
   不依赖模糊的实色底 rgba(10,6,22,.88)，这里只做模糊增强，
   保证不支持的内核下遮罩依然足够不透明、遮住棋盘。 */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .overlay { background: rgba(10, 6, 22, .78); }
}

/* ================= 5. 触摸端 hover 保护 =================
   规范要求：关键操作不能只在 :hover 出现；触摸端默认可见，
   鼠标悬停效果只在 @media (hover: hover) 下启用。 */
@media (hover: none) {
  .btn:hover { background: var(--panel-2); }
  .btn.ghost:hover { background: transparent; }
  .guide-skip:hover { color: var(--text-dim); }
}

/* ================= 6. 隐私政策视图（单页切换） =================
   小工具是单页应用：视图切换用 JS 控制 hidden，
   不使用 target="_blank" 或任何站外跳转。 */

.view-privacy {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 120;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.view-privacy[hidden] { display: none; }
.view-privacy .doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  line-height: 1.75;
  font-size: 14.5px;
  color: var(--text);
  overflow-wrap: break-word;
}
.view-privacy h1 { font-size: 22px; margin: 0 0 6px; color: var(--accent); }
.view-privacy .ver { color: var(--text-dim); font-size: 12.5px; margin: 0 0 22px; }
.view-privacy h2 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
.view-privacy p { margin: 0 0 10px; }
.view-privacy ul { margin: 0 0 10px; padding-left: 20px; }
.view-privacy li { margin: 0 0 5px; }
.view-privacy table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.view-privacy th, .view-privacy td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.view-privacy th { color: var(--text-dim); font-weight: 600; }
.view-privacy code {
  background: var(--panel-2); padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
.view-privacy .note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 13.5px;
}
.view-privacy .back {
  display: inline-block; margin-bottom: 18px; padding: 8px 16px;
  border-radius: 10px;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* 页脚的隐私入口：做成按钮外观但语义仍是链接样式 */
.linklike {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: none;
}
.linklike:hover { color: var(--accent); }