/* ============================================================================
   Squad44控制面板 · 浏览器内核兼容层  (s44-compat.css v13)
   ----------------------------------------------------------------------------
   这一层不添加任何新外观，只做一件事：**在不支持某个新特性的内核上，
   把主题层原本会整条失效的声明补回来。**

   为什么需要它
   ----------------------------------------------------------------------------
   CSS 的容错方式是"整条丢弃"：浏览器解析到一个不认识的函数或值，会把
   **那一整条声明**扔掉，既不报错也不回退。所以
       border-color: color-mix(in srgb, var(--primary) 45%, var(--pro-line));
   在 Chromium 110 上的结果不是"颜色不太对"，而是**这条边框色压根没设置**，
   继承上一层的值 —— 表现出来就是描边消失、悬浮态没反应、骨架屏一片纯色。

   面板里 color-mix 用了 50 多处（s44-theme.css 23、icfk_pro.css 27），
   而 color-mix 要 Chromium 111 / Safari 16.2 才有。国内环境里 QQ 浏览器、
   UC、360、微信 WebView、以及一部分没升级的安卓系统 WebView 仍然停在
   Chromium 86–108 —— 那批用户看到的是一个"描边和悬浮态都不见了"的面板，
   而且不会有人来报错，因为页面看着能用。

   加载位置
   ----------------------------------------------------------------------------
   由 _brand.php 注入，排在 s44-theme.css 和 s44-mobile.css **之后**，
   保证 @supports 兜底块能压过前面的规则。

   目标下限
   ----------------------------------------------------------------------------
     Chromium 80+ / Safari 13.1+ / Firefox 78+
   为什么是这个线：全站 63 个文件用了可选链 `?.`、65 个用了空值合并 `??`，
   这两个是**语法**不是 API，polyfill 补不了 —— 低于这条线的内核连脚本都
   解析不了，整页白屏。真要支持更低的版本只能上构建工具做转译，
   那是另一个量级的工程。这一层负责的是"能跑但长得不对"的那一段区间。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. RGB 分量
   主题层只给 --primary 备了 --primary-rgb，其余语义色没有。
   下面的兜底要用 rgba() 表达半透明，所以先把缺的补齐。

   四套主题都要各写一份 —— s44-theme.css 里 --pro-card / --pro-line /
   --pro-subtle 在浅色、深色、护眼三态下取值都不同，只写一份的话
   护眼主题下的兜底会用浅色的值，颜色对不上。
   下面每个值都和 s44-theme.css 里对应的十六进制一一对应，改主题色要一起改。 */
:root{
  /* 语义色四态通用，s44-theme.css 里没有按主题重定义 */
  --s44-ok-rgb:46,125,91;         /* #2E7D5B */
  --s44-bad-rgb:179,69,59;        /* #B3453B */
  --s44-brass-rgb:201,138,46;     /* #C98A2E，--s44-warn 同值 */
  --s44-graphite-rgb:11,20,22;    /* #0B1416 */
  /* 浅色态 */
  --pro-subtle-rgb:124,141,144;   /* #7C8D90 */
  --pro-line-rgb:223,229,227;     /* #DFE5E3 */
  --pro-card-rgb:255,255,255;     /* #FFFFFF */
  --pro-card-2-rgb:245,247,246;   /* #F5F7F6 */
}
html[data-theme="dark"]{
  --pro-subtle-rgb:108,126,128;   /* #6C7E80 */
  --pro-line-rgb:34,56,61;        /* #22383D */
  --pro-card-rgb:17,30,33;        /* #111E21 */
  --pro-card-2-rgb:22,38,42;      /* #16262A */
}
html[data-theme="eye"]{
  --pro-subtle-rgb:154,150,138;   /* #9A968A */
  --pro-line-rgb:226,219,203;     /* #E2DBCB */
  --pro-card-rgb:255,252,246;     /* #FFFCF6 */
  --pro-card-2-rgb:247,242,231;   /* #F7F2E7 */
}
/* 跟随系统的 auto 主题在系统为深色时要用深色的一组 */
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --pro-subtle-rgb:108,126,128;
    --pro-line-rgb:34,56,61;
    --pro-card-rgb:17,30,33;
    --pro-card-2-rgb:22,38,42;
  }
}

/* =========================================================================
   2. color-mix 兜底
   -------------------------------------------------------------------------
   @supports not (...) 的判定逻辑：内核看不懂括号里的条件 → 条件为假 →
   not 假 = 真 → 块内规则生效。看得懂的内核跳过整块，一分钱不花。

   下面每一条都是 s44-theme.css 里对应规则的**逐行镜像**：同一个选择器、
   同一个属性、同一个百分比。写的时候是照着原文抄的，不是凭印象补的 ——
   选择器抄错的后果不是"没兜住"，而是**在老内核上用错误的颜色覆盖页面
   自己的样式**，比不兜更糟。
   注释里的行号指 s44-theme.css v11，改动那边时请回来对一遍。
   ========================================================================= */
@supports not (color: color-mix(in srgb, red 50%, blue)){

  /* 156-160  滚动条。丢了之后 WebKit 会退回系统默认的粗灰条，深色面板上很突兀 */
  ::-webkit-scrollbar-thumb{background:rgba(var(--pro-subtle-rgb),.34)}
  ::-webkit-scrollbar-thumb:hover{background:rgba(var(--primary-rgb),.55)}
  *{scrollbar-color:rgba(var(--pro-subtle-rgb),.34) transparent}

  /* 252  顶栏半透明。丢了会变成完全透明，滚动时内容直接穿过顶栏 */
  .topbar,.top-bar,.pro-topbar{background:rgba(var(--pro-card-rgb),.88)!important}

  /* 290  卡片悬浮描边。丢了之后鼠标移上去毫无反应 */
  .card:hover,.stat-card:hover,.pro-card:hover{
    border-color:rgba(var(--primary-rgb),.34)!important;
  }

  /* 304  卡片右上角那片黄铜切角。注意选择器带 :not(.no-notch) 和 .s44-notch，
          抄成 .card::before 会给所有卡片都画上角，那是错的 */
  .stat-card:not(.no-notch)::before,.card.s44-notch::before{
    background:linear-gradient(225deg,rgba(var(--s44-brass-rgb),.55) 0%,transparent 72%)!important;
  }

  /* 369-370  次级按钮悬浮态 */
  .btn-ghost:hover,.btn-secondary:hover{
    border-color:rgba(var(--primary-rgb),.45)!important;
    background:rgba(var(--primary-rgb),.07)!important;
  }

  /* 393  输入框聚焦环。原规则只有 box-shadow 这一条用了 color-mix，
          border-color 用的是纯 var(--primary)，不会失效，所以这里不重复设 */
  input:focus,select:focus,textarea:focus,.form-control:focus{
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18)!important;
  }

  /* 420-422  表格斑马纹与悬浮行。丢了之后长表格没有行分隔，读起来很累 */
  table tbody tr:nth-child(even){background:rgba(var(--pro-card-2-rgb),.55)}
  table tbody tr:hover,.table tbody tr:hover{background:rgba(var(--primary-rgb),.06)!important}

  /* 440-453  四种语义徽章。丢了之后底色透明、只剩文字，和普通文本分不开。
              选择器严格照抄 —— 页面自带的 .status-badge / .st 那些类
              用的是写死的 rgba()，本来就不受影响，不能顺手加进来覆盖 */
  .badge-success,.tag.ok,.status.online{
    background:rgba(var(--s44-ok-rgb),.14)!important;
    border-color:rgba(var(--s44-ok-rgb),.30)!important;
  }
  .badge-warning,.tag.warn{
    background:rgba(var(--s44-brass-rgb),.16)!important;
    border-color:rgba(var(--s44-brass-rgb),.34)!important;
  }
  .badge-danger,.tag.bad,.status.offline{
    background:rgba(var(--s44-bad-rgb),.13)!important;
    border-color:rgba(var(--s44-bad-rgb),.30)!important;
  }
  .badge-info,.tag.info{
    background:rgba(var(--primary-rgb),.13)!important;
    border-color:rgba(var(--primary-rgb),.30)!important;
  }

  /* 474  弹窗遮罩。这条最要命：丢了之后遮罩完全透明，
          用户看不出弹窗是模态的，会去点后面的内容 */
  .modal-overlay,.overlay{
    background:rgba(var(--s44-graphite-rgb),.62)!important;
  }

  /* 510  顶部进度条的辉光 */
  #s44-progress{box-shadow:0 0 8px rgba(var(--s44-brass-rgb),.55)}

  /* 518  骨架屏。中间那道高光没了就完全不动，看着像卡死 */
  .s44-skeleton{
    background:linear-gradient(100deg,var(--pro-card-2) 30%,
               rgba(var(--pro-line-rgb),.60) 50%,var(--pro-card-2) 70%)!important;
    background-size:220% 100%!important;
  }

  /* 532  空态的制图斜线。丢了之后空态是一块纯色，和"还没加载出来"分不清 */
  .empty,.empty-state,.no-data{
    background:repeating-linear-gradient(45deg,transparent 0 9px,
              rgba(var(--pro-line-rgb),.26) 9px 10px)!important;
  }

  /* s44-mobile.css 里唯一用到 color-mix 的一处 */
  .s44-flash{animation:s44-flash-fb 620ms ease 1}
  @keyframes s44-flash-fb{
    0%{background-color:rgba(var(--primary-rgb),.22)}
    100%{background-color:transparent}
  }
}

/* =========================================================================
   3. 毛玻璃兜底
   -------------------------------------------------------------------------
   backdrop-filter：Firefox 103 之前默认关闭，部分安卓 WebView 认前缀但
   实际不渲染。失效时元素是**完全透明**的，顶栏和弹窗遮罩会直接消失。
   这比"没有模糊效果"严重得多，所以必须兜。
   ========================================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar,.top-bar,.pro-topbar{background:var(--pro-card)!important}
  .modal-overlay,.modal-mask,.ux-modal-mask{background:rgba(6,12,14,.62)!important}
  .glass,.blur-bg{background:var(--pro-card-2)!important}
}
/* 认前缀的老 WebKit（Safari 9–13、大量安卓 WebView）补一份带前缀的 */
@supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))){
  .topbar,.top-bar,.pro-topbar{-webkit-backdrop-filter:saturate(160%) blur(12px)}
}

/* =========================================================================
   4. flex/grid 的 gap
   -------------------------------------------------------------------------
   Safari 14.0 及更早不支持 flex 布局里的 gap（grid 里支持）。
   面板到处在用 display:flex + gap，失效之后所有按钮、标签会挤成一坨。
   兜底用负外边距的经典写法，只补最常见的几个容器，不搞全站替换 ——
   全站替换会在支持 gap 的内核上产生双倍间距的风险。
   ========================================================================= */
@supports not (row-gap: 1px){
  .header-actions,.topbar-right,.card-header,.form-actions,.modal-footer,
  .filter-bar,.matches-toolbar-left,.btn-group,.chips{
    margin-left:-4px;margin-right:-4px;
  }
  .header-actions > *,.topbar-right > *,.card-header > *,.form-actions > *,
  .modal-footer > *,.filter-bar > *,.matches-toolbar-left > *,
  .btn-group > *,.chips > *{
    margin-left:4px;margin-right:4px;margin-bottom:6px;
  }
}

/* =========================================================================
   5. inset 简写
   -------------------------------------------------------------------------
   Safari 14.0 及更早、Chromium 86 及更早不认 inset。用到的地方是遮罩层，
   失效之后遮罩尺寸塌成 0×0 —— 弹窗背后没有蒙层，点哪都能穿透。
   ========================================================================= */
@supports not (inset: 0){
  .overlay,.sidebar-overlay,.modal-overlay,.modal-mask,.ux-modal-mask,
  .loading-mask,.s44-mask{
    top:0!important;right:0!important;bottom:0!important;left:0!important;
  }
}

/* =========================================================================
   6. :focus-visible
   -------------------------------------------------------------------------
   Safari 15.4 之前没有 :focus-visible。整条选择器会被丢弃，
   结果是**键盘用户完全看不到焦点在哪** —— 这是无障碍问题，不是美观问题。
   兜底：退回 :focus。代价是鼠标点击也会出现焦点环，比看不见强。
   ========================================================================= */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,select:focus,textarea:focus,
  [tabindex]:focus,.btn:focus{
    outline:2px solid var(--primary)!important;outline-offset:2px!important;
  }
}

/* =========================================================================
   7. 前缀补齐
   -------------------------------------------------------------------------
   这些属性在目标下限的内核上需要前缀。写在无前缀版本**前面**，
   支持无前缀的内核会用后者覆盖，不冲突。
   ========================================================================= */

/* 粘性定位：iOS Safari 12 及部分安卓 WebView 只认前缀版 */
.topbar,.top-bar,.pro-topbar,
thead th,.modal-header,.m-hd,
.table-sticky-first tbody td:first-child,
.table-sticky-first thead th:first-child{
  position:-webkit-sticky;
  position:sticky;
}

/* 表单控件外观。不加 -webkit-appearance，iOS 上的 select 和 date
   会强制套系统样式，圆角和背景全部失效。 */
select,input[type="date"],input[type="datetime-local"],
input[type="time"],input[type="search"],
.form-input,.form-select,.fi{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
/* iOS 会给搜索框画一个内置的清除按钮，位置和面板自己的图标打架 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}

/* 文本选择与拖拽 */
.no-select,.s44-tabbar,.nav-item,.browser-tab{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

/* 字号自动调整：不写死的话 iOS 横屏会把正文放大 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 惯性滚动：iOS 13 之前不加这句，容器内滚动是"生硬"的一段一段 */
.modal-body,.m-bd,.tbl-scroll,.table-wrap,.table-responsive,
.picker,.nav-container,.match-players-list{
  -webkit-overflow-scrolling:touch;
}

/* 打印时保留底色。Chrome 用无前缀，Safari 至今仍需前缀。 */
@media print{
  .status-badge,.tier,.badge{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* =========================================================================
   8. content-visibility
   -------------------------------------------------------------------------
   s44-theme.css 无条件给 img 开了 content-visibility:auto。支持的内核上
   这是性能优化；不支持的内核上属性被忽略，无害。
   但**部分早期实现**（Chromium 85–89）在没有 contain-intrinsic-size 的
   情况下会让图片高度先塌成 0，滚动时整页跳动。这里补一个内在尺寸，
   把跳动限制在一次。
   ========================================================================= */
@supports (content-visibility: auto){
  img{contain-intrinsic-size:auto 300px}
}

/* =========================================================================
   9. 高对比度与强制色
   -------------------------------------------------------------------------
   Windows 高对比度模式（forced-colors）下系统会强制替换所有颜色，
   靠背景色区分的状态徽章会全部变成同一个样子。给它们补上边框，
   在只有两种颜色可用时仍然能区分。
   ========================================================================= */
@media (forced-colors: active){
  .status-badge,.tier,.badge,.tag,.st{border:1px solid currentColor!important}
  .btn-primary{border:2px solid currentColor!important}
  .s44-tabbar-item.on{outline:2px solid currentColor;outline-offset:-2px}
  /* 强制色模式下自绘的进度条会消失，换成边框表达 */
  #s44-progress{background:Highlight!important}
}

/* =========================================================================
   10. 兜底可读性
   -------------------------------------------------------------------------
   自定义属性（CSS 变量）本身是 IE 之后所有内核都支持的，但如果某个页面
   在变量定义之前就用了变量（加载顺序问题），值会解析成空 → 颜色变成
   "无" → 文字和背景同色，页面看起来是空白的。
   这里给最关键的两个属性上一道保险：变量没值时至少还有个可读的颜色。
   ========================================================================= */
body{background-color:#EDF0EE}
html[data-theme="dark"] body{background-color:#0B1416}
body{color:#101A1C}
html[data-theme="dark"] body{color:#E4ECEC}

/* =========================================================================
   11. 减少动态 / 省电
   -------------------------------------------------------------------------
   有的内核（尤其安卓 WebView）不认 prefers-reduced-motion，
   但会认 update: slow（低刷新率设备，比如墨水屏和一部分车机）。
   两个条件都兜一遍。
   ========================================================================= */
@media (update: slow){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}