/*
 * CS2 式回合结束 / MVP。预览页和 shell.html 共用这一份。
 * 坐标跟底栏一样走 640×480 HUD 单位（--hx / --hy）。
 */

@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2regular.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2medium.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

#web-winpanel {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  container-type: size;
  --hx: calc(100cqw / 640);
  --hy: calc(100cqh / 480);
  --wp-ct: #b5d4ee;
  --wp-t: #ead18a;
  --wp-draw: #d0d0d0;
  --wp-accent: var(--wp-draw);
  --wp-banner-bg: rgba(38, 38, 40, 0.8);
  --wp-grid: rgba(255, 255, 255, 0.06);
  font-family: Stratum2, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  color: var(--wp-accent);
  user-select: none;
}
#web-winpanel[hidden] {
  display: none !important;
}

.wp-root {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.wp-root.is-show {
  opacity: 1;
}
.wp-root.is-ct {
  --wp-accent: var(--wp-ct);
  --wp-banner-bg: rgba(30, 40, 50, 0.82);
  --wp-grid: rgba(181, 212, 238, 0.14);
}
.wp-root.is-t {
  --wp-accent: var(--wp-t);
  --wp-banner-bg: rgba(48, 40, 26, 0.82);
  --wp-grid: rgba(234, 209, 138, 0.14);
}
.wp-root.is-draw {
  --wp-accent: var(--wp-draw);
  --wp-banner-bg: rgba(38, 38, 40, 0.8);
  --wp-grid: rgba(255, 255, 255, 0.06);
}

.wp-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.06) 32%, transparent 52%);
}

.wp-banner {
  position: absolute;
  left: 50%;
  top: calc(58 * var(--hy));
  width: calc(268 * var(--hx));
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: calc(6 * var(--hy)) calc(12 * var(--hx)) calc(5 * var(--hy));
  text-align: center;
  color: var(--wp-accent);
  background-color: var(--wp-banner-bg);
  background-image:
    linear-gradient(var(--wp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp-grid) 1px, transparent 1px);
  background-size: calc(3 * var(--hy)) calc(3 * var(--hy));
  box-shadow: 0 calc(2 * var(--hy)) calc(10 * var(--hy)) rgba(0, 0, 0, 0.35);
}
.wp-banner::before,
.wp-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(1.5 * var(--hx));
  background: var(--wp-accent);
  box-shadow: 0 0 calc(6 * var(--hy)) color-mix(in srgb, var(--wp-accent) 55%, transparent);
}
.wp-banner::before { left: 0; }
.wp-banner::after { right: 0; }
.wp-root.is-show .wp-banner {
  animation: wp-banner-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wp-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--hx));
}

.wp-chev {
  flex: 0 0 auto;
  font-size: calc(11 * var(--hy));
  font-weight: 700;
  letter-spacing: -0.12em;
  line-height: 1;
  color: var(--wp-accent);
}

.wp-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(14 * var(--hy));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--wp-accent);
  text-shadow: 0 calc(1 * var(--hy)) calc(3 * var(--hy)) rgba(0, 0, 0, 0.55);
}

.wp-bar,
.wp-reason,
.wp-scores {
  display: none !important;
}

.wp-funfact {
  margin-top: calc(3 * var(--hy));
  font-size: calc(6.5 * var(--hy));
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wp-accent);
  opacity: 0.88;
  text-shadow: 0 1px 3px #000a;
}

.wp-mvp {
  position: absolute;
  left: 50%;
  bottom: calc(72 * var(--hy));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--hx));
  min-width: calc(268 * var(--hx));
  max-width: calc(360 * var(--hx));
  padding: calc(8 * var(--hy)) calc(14 * var(--hx));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wp-accent) 18%, #0c0e12cc) 0%, #10141acc 42%, #0c1016d8 100%);
  border: 1px solid color-mix(in srgb, var(--wp-accent) 38%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 calc(8 * var(--hy)) calc(24 * var(--hy)) rgba(0, 0, 0, 0.45),
    0 0 calc(28 * var(--hy)) color-mix(in srgb, var(--wp-accent) 16%, transparent);
}
.wp-mvp[hidden] {
  display: none !important;
}
.wp-root.is-show .wp-mvp {
  animation: wp-mvp-in 0.55s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wp-mvp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(3 * var(--hx));
  background: var(--wp-accent);
  box-shadow: 0 0 calc(10 * var(--hy)) var(--wp-accent);
}

.wp-avatar {
  width: calc(40 * var(--hy));
  height: calc(40 * var(--hy));
  flex: 0 0 auto;
  border-radius: 50%;
  border: calc(1.6 * var(--hy)) solid var(--wp-accent);
  background-color: #1a1e24;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 calc(12 * var(--hy)) color-mix(in srgb, var(--wp-accent) 40%, transparent);
}
.wp-avatar.is-ct { background-image: url("sb/avatar-ct.png"); }
.wp-avatar.is-t { background-image: url("sb/avatar-terrorist.png"); }
.wp-avatar.has-photo {
  background-image: var(--wp-photo);
}

.wp-mvp-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.5 * var(--hy));
}

.wp-mvp-badge {
  font-size: calc(8 * var(--hy));
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f0d060;
  text-shadow: 0 0 calc(8 * var(--hy)) rgba(240, 208, 96, 0.55);
}

.wp-mvp-name {
  max-width: 100%;
  font-size: calc(14 * var(--hy));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px #000c;
}

.wp-mvp-clan {
  margin-right: 0.35em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.wp-mvp-clan[hidden] {
  display: none !important;
}

.wp-mvp-why {
  font-size: calc(8 * var(--hy));
  font-weight: 400;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--wp-accent) 80%, #fff);
  opacity: 0.9;
}

.wp-mvp-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(2 * var(--hy));
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.wp-stat {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--hx));
  line-height: 1;
}
.wp-stat-n {
  font-size: calc(13 * var(--hy));
  font-weight: 700;
  min-width: 1.4em;
  text-align: right;
}
.wp-stat-k { font-size: calc(7 * var(--hy)); font-weight: 400; letter-spacing: 0.06em; color: rgba(220, 226, 232, 0.55); }
.wp-stat.is-star .wp-stat-n { color: #f0d060; }

@keyframes wp-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(-10 * var(--hy))); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes wp-mvp-in {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(14 * var(--hy))); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}