/* ==========================================================================================
   screens/stats.css — 统计数据 (js/screens/stats.js): the local match record as a full-screen overlay in the grammar of
   干员调配 (screens/loadout.css) — a top bar with the back button, four tabs (总览 / 策略 / 战斗累计 / 对局记录) and
   导出 / 导入 / 清空, a note line, a scrolling body of number cards, tables, the six 评语 and the history list; a stored
   match re-viewed as its settlement fills the overlay (.st--replay).
   Sizes use local management units and text follows the saved preference. Ported from PR #323 by @2321Robin.
   ========================================================================================== */

.st {
  position: fixed; inset: 0; z-index: 55; /* like .lo: above every screen (1) and the in-match banners (40), below the connection
                                             banner (60), modals / confirm dialogs (80), toasts and tooltips */
  display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: var(--bg-0);
  color: var(--text-hi);
  outline: none;
  animation: st-in 200ms var(--ease-out) backwards;
  overscroll-behavior: contain;
}
@keyframes st-in { from { opacity: 0; } }
.st__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, .07), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(246, 163, 41, .05), transparent 60%),
    linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / calc(0.6 * var(--ui-unit, 1rem)) calc(0.6 * var(--ui-unit, 1rem)),
    linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / calc(0.6 * var(--ui-unit, 1rem)) calc(0.6 * var(--ui-unit, 1rem)),
    linear-gradient(180deg, #0f1312, #090b0a);
}
.st-top, .st-note, .st-body { position: relative; }
/* the app screens behind the overlay do not need to animate */
.sp-stats-open .app-root > .screen { visibility: hidden; }
/* a stored match re-viewed as its settlement (the result screen fills the overlay) */
.st--replay { background: var(--bg-0); }

/* ---- top bar ----------------------------------------------------------------------------------------------------- */
.st-top {
  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: calc(0.2 * var(--ui-unit, 1rem));
  height: max(calc(1 * var(--ui-unit, 1rem)), calc(0.48 * var(--ui-unit, 1rem))); padding: 0 calc(0.36 * var(--ui-unit, 1rem));
  background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
  border-bottom: 1px solid var(--line);
}
.st-top::after {
  content: ''; position: absolute; left: calc(0.36 * var(--ui-unit, 1rem)); right: calc(0.36 * var(--ui-unit, 1rem)); bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
}
.st-top__left { justify-self: start; display: flex; align-items: center; gap: calc(0.14 * var(--ui-unit, 1rem)); }
.st-top__center { display: flex; flex-direction: column; align-items: center; gap: calc(0.02 * var(--ui-unit, 1rem)); min-width: 0; }
.st-top__right { justify-self: end; display: flex; align-items: center; gap: calc(0.16 * var(--ui-unit, 1rem)); min-width: 0; }
.st-tabs { display: flex; align-items: stretch; gap: calc(0.04 * var(--ui-unit, 1rem)); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.st-tab {
  display: inline-flex; align-items: center; padding: calc(0.02 * var(--ui-unit, 1rem)) calc(0.16 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(0.24 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 900;
  letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
}
.st-tab:hover { color: var(--text-hi); }
.st-tab.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }

/* the note lines under the bar: where the data lives, what went wrong with the stored value */
.st-note {
  flex: none; display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); margin: 0; padding: calc(0.07 * var(--ui-unit, 1rem)) calc(0.36 * var(--ui-unit, 1rem));
  font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo);
  background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
  border-bottom: 1px solid rgba(47, 58, 53, .6);
}
.st-note .icon { width: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); color: var(--mint-500); flex: none; }
.st-note.is-warn { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
.st-note.is-warn .icon { color: var(--amber); }

/* ---- body ------------------------------------------------------------------------------------------------------------ */
.st-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(0.2 * var(--ui-unit, 1rem)) calc(0.36 * var(--ui-unit, 1rem)) calc(0.32 * var(--ui-unit, 1rem)); scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.st-body > * { max-width: max(calc(12.4 * var(--ui-unit, 1rem)), calc(7.6 * var(--ui-unit, 1rem))); margin-left: auto; margin-right: auto; }
.st-loading { flex: 1; display: grid; place-items: center; min-height: calc(2 * var(--ui-unit, 1rem)); }
.st-empty { margin: calc(0.6 * var(--ui-unit, 1rem)) auto; text-align: center; font-size: max(calc(0.2 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); color: var(--text-lo); letter-spacing: .06em; }

.st-sec__h { display: flex; align-items: baseline; gap: calc(0.12 * var(--ui-unit, 1rem)); margin: 0 0 calc(0.1 * var(--ui-unit, 1rem)); font-size: max(calc(0.22 * var(--utility-text, var(--t))), calc(0.14 * var(--ui-unit, 1rem))); font-weight: 800; letter-spacing: .1em; color: var(--text-hi); }
.st-sub { margin: calc(0.22 * var(--ui-unit, 1rem)) 0 calc(0.08 * var(--ui-unit, 1rem)); font-size: max(calc(0.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; letter-spacing: .08em; color: var(--text-md); }

/* number cards */
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(calc(1.5 * var(--ui-unit, 1rem)), calc(0.96 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.08 * var(--ui-unit, 1rem)); }
.st-card {
  display: flex; flex-direction: column; gap: calc(0.02 * var(--ui-unit, 1rem)); min-width: 0; padding: calc(0.08 * var(--ui-unit, 1rem)) calc(0.12 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem));
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.st-card--mint { border-color: var(--mint-800); background: var(--mint-a10); }
.st-card--gold { border-color: rgba(246, 163, 41, .45); background: rgba(246, 163, 41, .07); }
.st-card__num { font-size: max(calc(0.3 * var(--utility-text, var(--t))), calc(0.17 * var(--ui-unit, 1rem))); font-weight: 900; line-height: 1.15; color: var(--text-hi); overflow-wrap: anywhere; }
.st-card--mint .st-card__num { color: var(--mint-400); }
.st-card--gold .st-card__num { color: var(--amber); }
.st-card__label { font-size: max(calc(0.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); letter-spacing: .06em; }
.st-split { display: flex; gap: calc(0.26 * var(--ui-unit, 1rem)); margin: calc(0.1 * var(--ui-unit, 1rem)) 0 calc(0.14 * var(--ui-unit, 1rem)); font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-md); }
.st-split b { margin-left: calc(0.06 * var(--ui-unit, 1rem)); font-size: max(calc(0.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); color: var(--text-hi); }

/* tables (难度 / 策略 / 对局记录) */
.st-tablewrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: max(calc(0.17 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.st-table th {
  padding: calc(0.05 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)); text-align: left; font-size: max(calc(0.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); font-weight: 600; letter-spacing: .08em;
  color: var(--text-lo); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.st-table td { padding: calc(0.06 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)); color: var(--text-md); border-bottom: 1px solid var(--line); vertical-align: middle; }
/* the per-difficulty and per-strategy tables stay narrow enough to read across; the history takes the width */
.st-table:not(.st-table--history) { max-width: max(calc(9.4 * var(--ui-unit, 1rem)), calc(5.6 * var(--ui-unit, 1rem))); }
.st-table th.num, .st-table td.num { text-align: right; }
.st-table tbody tr:hover td { background: rgba(78, 216, 175, .05); }
.st-table td.st-diff { color: var(--d-color, var(--text-md)); font-weight: 700; white-space: nowrap; }
.st-band { display: inline-flex; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); color: var(--text-hi); white-space: nowrap; vertical-align: middle; }
.st-band .bandicon { flex: none; }
.st-t { font-family: var(--font-num); font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo); white-space: nowrap; }
.st-rate { white-space: nowrap; }
.st-rate b { color: var(--text-hi); font-weight: 700; }
.st-bar { display: inline-block; width: max(calc(0.8 * var(--ui-unit, 1rem)), calc(0.48 * var(--ui-unit, 1rem))); height: max(calc(0.07 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); margin-right: calc(0.1 * var(--ui-unit, 1rem)); vertical-align: middle; background: var(--line); }
.st-bar i { display: block; height: 100%; background: var(--mint-500); }

/* 对局记录: result colours, the 不计入统计 chip, clickable rows */
.st-res { white-space: nowrap; }
.t-win { color: var(--mint-400); font-weight: 800; }
.t-lose { color: var(--red-premium); font-weight: 800; }
.t-quit { color: var(--amber); font-weight: 800; }
.st-chip {
  display: inline-block; margin-left: calc(0.08 * var(--ui-unit, 1rem)); padding: 0 calc(0.06 * var(--ui-unit, 1rem)); font-style: normal; font-size: max(calc(0.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); letter-spacing: .04em;
  color: var(--text-lo); border: 1px solid var(--line-2); white-space: nowrap;
}
.st-table tr.is-excluded td { opacity: .6; }
.st-table tr.is-clickable { cursor: pointer; }
.st-table tr.is-clickable:hover td, .st-table tr.is-clickable:focus-visible td { background: rgba(78, 216, 175, .1); color: var(--text-hi); }
.st-table tr.is-clickable:focus-visible { outline: 2px solid var(--mint-400); outline-offset: -2px; }
.st-go { width: calc(0.24 * var(--ui-unit, 1rem)); color: var(--text-lo); }
.st-go .icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); }
.st-table tr.is-clickable:hover .st-go { color: var(--mint-400); }
.st-more { display: flex; justify-content: center; margin: calc(0.14 * var(--ui-unit, 1rem)) 0 0; }
.st-hint { margin: calc(0.1 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(0.13 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.6; color: var(--text-lo); letter-spacing: .04em; }

/* the six 评语 with their counts */
.st-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(1.9 * var(--ui-unit, 1rem)), calc(1.2 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.08 * var(--ui-unit, 1rem)); }
.st-title { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); min-width: 0; padding: calc(0.06 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.st-title.is-none { opacity: .45; }
.st-title__icon { width: max(calc(0.38 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); height: max(calc(0.38 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); flex: none; object-fit: contain; }
.st-title__text { display: flex; flex-direction: column; min-width: 0; }
.st-title__text span { font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-title__text b { font-size: max(calc(0.22 * var(--utility-text, var(--t))), calc(0.14 * var(--ui-unit, 1rem))); font-weight: 900; color: var(--amber); line-height: 1.1; }

/* what counts (the rule of ui/stats.js countsTowardStats) */
.st-rule { display: flex; flex-wrap: wrap; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); margin: calc(0.24 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(0.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.6; color: var(--text-lo); }
.st-rule .icon { width: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); flex: none; color: var(--mint-500); }
.st-rule b { color: var(--amber); font-weight: 700; }

/* 战斗累计 */
.st-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(2.4 * var(--ui-unit, 1rem)), calc(1.5 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.06 * var(--ui-unit, 1rem)); }
.st-sum { display: flex; align-items: baseline; justify-content: space-between; gap: calc(0.08 * var(--ui-unit, 1rem)); padding: calc(0.08 * var(--ui-unit, 1rem)) calc(0.12 * var(--ui-unit, 1rem)); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.st-sum span { font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); }
.st-sum b { font-size: max(calc(0.22 * var(--utility-text, var(--t))), calc(0.14 * var(--ui-unit, 1rem))); font-weight: 800; color: var(--text-hi); }

/* the shared Button scales with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's own controls keep a
   readable size and a tappable height */
.st .st-back { height: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))) 0 max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem))); font-size: max(calc(0.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
.st .st-top__right .btn, .st .st-more .btn { height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }

/* the entry buttons of the lobby / room top bars: on the narrowest phones (≤ 700 px) the icon alone — the room's top bar has
   no room for another label beside 玩法说明 (its title ran under the label at 640 px); the name stays aria-label / title */

/* ---- narrow / short viewports ------------------------------------------------------------------------------------------ */
/* phones in landscape (up to 932 px wide): 返回 shows its icon only (the text stays its name) */
.sp-coarse .st-tab, .sp-coarse .st-table tr.is-clickable td { min-height: calc(0.3 * var(--ui-unit, 1rem)); }
/* Desktop records use a smaller centred window; phones and archived result replay keep their existing layout. */
.st:not(.st--replay) {
    margin: auto; width: min(calc(12 * var(--ui-unit, 1rem)), calc(11.2 * var(--ui-unit, 1rem)), 90vw); height: min(calc(8 * var(--ui-unit, 1rem)), calc(7.8 * var(--ui-unit, 1rem)), 86vh); height: min(calc(8 * var(--ui-unit, 1rem)), calc(7.8 * var(--ui-unit, 1rem)), 86dvh);
    box-sizing: border-box; border: 1px solid var(--line-2); box-shadow: 0 0 calc(0.5 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .65);
  }
@media (prefers-reduced-motion: reduce) { .st { animation: none; } }