/* ==========================================================================
   V12 结算面板样式（积分明细）

   本文件由 games/css/style.css 原样抽出，供两处共用：
     · games/game.html           —— 游戏胜利结算面板
     · zh/leaderboard.html       —— 排行榜「战局详情」弹窗
   两处渲染的都是同一个 V12.renderPanelHtml()，所以样式必须只有这一份。

   ⚠️ 为什么必须独立成文件：style.css 开头有 `*{}` 和 `body{}`
      （深色全屏游戏背景 + overflow:hidden），排行榜页若整份引用，
      整个站点页面会被游戏样式污染。本文件不含任何全局选择器，
      可安全地在普通站点页面里引用。
   ========================================================================== */
/* ==========================================================================
   V12 结算面板（积分明细）
   设计语言与本站其它面板保持一致：
     · 白底半透明 + 极浅 slate 边框（rgba(148,163,184,.2)）+ 8~12px 圆角
     · 文字层级 #1e293b（主）/ #475569（次）/ #94a3b8（弱）
     · 数字统一 tabular-nums，避免逐位跳动
     · 主色蓝 #3b82f6 / #1d4ed8（与提交按钮同源），金色 #f59e0b 仅用于分数强调
   颜色语义（重要）：只标「高于 / 低于全场平均」，不标好坏。
     高于平均 → 蓝 #185FA5；低于平均 → 琥珀 #854F0B。
     刻意不用红绿：一来这是积分榜不是行情图；二来这个游戏里「高」不等于「好」
     （收益率高恰恰说明打得保守），用红绿会把玩家带偏。
   ========================================================================== */
.v12-panel {
    margin-top: 4px;
    text-align: left;
}

/* ---------- 结果条：分数 + 排名 ---------- */
.v12-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 12px;
}

.v12-score-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 注：原来分数上方有一行小字「本局积分」（.v12-score-label），
   与弹窗区块标题重复，已随之去掉，此规则一并删除。 */

.v12-score-value {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.v12-score-value.v12-pending {
    color: #cbd5e1;
}

.v12-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 4px;
}

.v12-rank-line {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

/* ---------- 两条腿的卡片 ---------- */
.v12-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.v12-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

.v12-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.v12-card-big {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.v12-unit {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 3px;
}

.v12-card-sub {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* ---------- 计算链（玩家可手算复现） ---------- */
.v12-chain {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.75), rgba(226, 232, 240, 0.5));
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    padding: 10px 12px;
}

.v12-chain-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.v12-chain-row {
    display: grid;
    grid-template-columns: 16px minmax(64px, auto) 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.v12-chain-idx {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    text-align: center;
}

.v12-chain-label {
    font-size: 12.5px;
    color: #475569;
    white-space: nowrap;
}

.v12-chain-formula {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* ---------- 参考明细（默认收起） ---------- */
.v12-ref {
    margin-top: 10px;
}

.v12-ref-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.v12-ref-toggle:hover {
    background: rgba(148, 163, 184, 0.18);
}

.v12-ref-toggle-hint {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8;
}

.v12-ref-caret {
    font-size: 11px;
    color: #94a3b8;
    transition: transform 0.2s;
    line-height: 1;
}

.v12-ref-toggle.v12-open .v12-ref-caret {
    transform: rotate(180deg);
}

.v12-ref-body {
    padding: 8px 2px 0;
}

.v12-ref-head,
.v12-ref-row {
    display: grid;
    grid-template-columns: 1fr 78px 78px;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
}

.v12-ref-head {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    margin-bottom: 2px;
}

.v12-ref-head .v12-ref-mine,
.v12-ref-head .v12-ref-avg {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: right;
}

.v12-ref-row + .v12-ref-row {
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.v12-ref-name {
    font-size: 12.5px;
    color: #475569;
}

.v12-ref-mine,
.v12-ref-avg {
    font-size: 12.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.v12-ref-mine {
    font-weight: 700;
    color: #1e293b;
}

.v12-ref-avg {
    color: #94a3b8;
}

/* 高低标记（只比大小，不带褒贬） */
.v12-hi {
    color: #185FA5;
}

.v12-lo {
    color: #854F0B;
}

.v12-even {
    color: #64748b;
}

.v12-legend {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

/* ---------- 局信息条（人数/地图/难度/回合/领土）已整条移除 ----------
   这些是开局前就定好的常量（地图锁 60×40、难度锁挑战），结算时再列一遍
   既占版面又重复，玩家要求去掉。对应的 .v12-meta-wrap / .v12-meta /
   .v12-meta-item 三条规则和 game.html 的 buildMetaHtml() 一起删除了。 */

/* ---------- 服务端复核标记 ---------- */
.v12-verified {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #16a34a;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
}

/* ---------- 窄屏（手机竖屏）：折成单栏、点击区加高 ---------- */
@media (max-width: 520px) {
    .v12-score-value {
        font-size: 32px;
    }

    .v12-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .v12-chain-row {
        grid-template-columns: 16px 1fr;
    }

    /* 窄屏把公式换到第二行右对齐，避免左侧标签被挤成两行 */
    .v12-chain-formula {
        grid-column: 2 / 3;
        text-align: left;
    }

    .v12-ref-head,
    .v12-ref-row {
        grid-template-columns: 1fr 62px 56px;
        gap: 4px;
    }

    .v12-ref-toggle {
        min-height: 44px;   /* iOS 手指最小点击区 */
    }
}

/* ---------- 参考明细：宽容器排成两列（容器查询按「面板自身宽度」判断，不看视口） ----------
   渲染侧把明细切成两半、每半各带一份「我的 / 全场平均」表头（见 score-v12.js 的 refColsHtml）。
     · 排行榜「战局详情」弹窗（内容区约 452px）→ 单列，且只保留第一份表头（视觉连续）；
     · 游戏内结算面板（内容区 ≥ 600px）→ 两列，左右各带表头。
   container-type 不支持时本段整体失效 → 各自退回单列，行为安全（不会错排）。 */
.v12-ref {
    container-type: inline-size;
}

.v12-ref-cols {
    display: block;
}

.v12-ref-col + .v12-ref-col > .v12-ref-head {
    display: none;
}

@container (min-width: 560px) {
    .v12-ref-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 26px;
        align-items: start;
    }

    .v12-ref-col + .v12-ref-col > .v12-ref-head {
        display: grid;
    }
}

/* ---------- 兼容回退：不支持容器查询的浏览器 ----------
   旧版 Chrome（<105）/ Safari（<16）/ 部分国产内核不支持 container-type，
   上面的 @container 段会被整段忽略 → 参考明细永远单列；而这些浏览器此前
   拿到的是更早的"无条件两列"版本，用户会明显感觉"两列变一列"。
   这里按视口宽度近似（≥640px 时排行榜弹窗卡片 680~760px、游戏内面板内容区
   也足够宽），把两列行为补回来；支持容器查询的浏览器条件为假，本段不生效，
   行为完全不受影响。 */
@supports not (container-type: inline-size) {
    @media (min-width: 640px) {
        .v12-ref-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 26px;
            align-items: start;
        }

        .v12-ref-col + .v12-ref-col > .v12-ref-head {
            display: grid;
        }
    }
}