/* =========================================================
   雷一把 - style.css
   与用户提供的 index.html 类名完全匹配
   ========================================================= */

:root {
  --bg-0: #070a09;
  --bg-1: #0b100e;
  --bg-2: #111814;
  --panel: rgba(16, 23, 19, 0.94);
  --panel-soft: rgba(21, 29, 25, 0.82);

  --line: rgba(159, 177, 164, 0.22);
  --line-strong: rgba(191, 205, 195, 0.38);

  --text: #eef2ee;
  --text-soft: #b7c1ba;
  --text-dim: #77827b;

  --accent: #d79a42;
  --accent-light: #f0b968;
  --accent-dark: #7f5420;

  --exact: #397c4e;
  --exact-border: #62a878;

  --close: #aa7028;
  --close-border: #d49a4d;

  --wrong: #514a5a;
  --wrong-border: #746a80;

  --danger: #d36f67;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

/* =========================
   全局
   ========================= */

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(106, 126, 108, 0.26), transparent 34rem),
    linear-gradient(180deg, #111713 0%, var(--bg-0) 54%, #050706 100%);

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  background:
    linear-gradient(rgba(235, 242, 237, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235, 242, 237, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.42));
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

::selection {
  color: #111;
  background: var(--accent-light);
}

/* 轻微噪点层 */
.page-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: soft-light;

  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      transparent 0,
      transparent 1px,
      rgba(255, 255, 255, 0.035) 2px,
      transparent 3px
    );
  background-size: 11px 11px;
}

/* =========================
   顶栏
   ========================= */

.site-header {
  width: min(1440px, 94%);
  min-height: 74px;
  margin: 0 auto;
  padding: 18px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border-bottom: 1px solid var(--line);
}

.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;

  transition: color 0.2s ease;
}

.mini-brand:hover {
  color: var(--text);
}

.mini-brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;

  color: #10140f;
  background:
    linear-gradient(145deg, var(--accent-light), var(--accent));
  border: 1px solid #f3c57f;
  border-radius: 2px;

  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7) inset,
    0 7px 20px rgba(0, 0, 0, 0.3);
}

.daily-stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.daily-stamp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: #69bd78;
  box-shadow: 0 0 12px rgba(105, 189, 120, 0.7);
}

.daily-stamp strong {
  color: var(--text);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-weight: 700;
}


.header-mode {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.header-mode__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #69bd78;
  box-shadow: 0 0 12px rgba(105, 189, 120, 0.7);
}

/* =========================
   主体
   ========================= */

main {
  width: min(1280px, 92%);
  margin: 0 auto;
  padding: 72px 0 100px;
}

/* =========================
   Hero
   ========================= */

.hero {
  position: relative;
  padding: 28px 0 52px;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: min(760px, 85vw);
  height: 230px;
  transform: translateX(-50%);
  z-index: -1;

  background:
    radial-gradient(circle, rgba(121, 144, 124, 0.2), transparent 68%);
  filter: blur(10px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.hero__line {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.title-lockup {
  margin-top: 25px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 30px);
}

.title-lockup h1 {
  margin: 0;

  font-size: clamp(58px, 9vw, 104px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;

  color: #f5f7f4;
  text-shadow:
    0 3px 0 rgba(81, 56, 23, 0.9),
    0 10px 38px rgba(0, 0, 0, 0.62);
}

.title-lockup p {
  margin: 18px 0 0;

  color: var(--text-soft);
  font-size: 15px;
  letter-spacing: 0.26em;
}

.title-lockup__bracket {
  color: rgba(215, 154, 66, 0.72);
  font-family: Consolas, monospace;
  font-size: clamp(62px, 9vw, 112px);
  line-height: 0.8;
  font-weight: 200;
}

.hero__brief {
  width: min(650px, 100%);
  margin: 30px auto 0;

  color: var(--text-soft);
  font-size: 15px;
}

/* =========================
   游戏输入区域
   ========================= */

.game-shell {
  position: relative;
  overflow: visible;

  padding: 0 32px 30px;
  margin-top: 10px;

  background:
    linear-gradient(180deg, rgba(28, 38, 32, 0.96), rgba(11, 16, 13, 0.97));
  border: 1px solid var(--line-strong);
  border-radius: 3px;

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.game-shell::before,
.game-shell::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.game-shell::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid rgba(215, 154, 66, 0.65);
  border-left: 2px solid rgba(215, 154, 66, 0.65);
}

.game-shell::after {
  right: 8px;
  bottom: 8px;
  border-right: 2px solid rgba(215, 154, 66, 0.45);
  border-bottom: 2px solid rgba(215, 154, 66, 0.45);
}

.game-shell__topline {
  height: 42px;
  margin: 0 -32px 27px;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #89958d;
  background: rgba(4, 7, 5, 0.52);
  border-bottom: 1px solid var(--line);

  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.guess-form > label {
  display: block;
  margin-bottom: 10px;

  color: #d9dfda;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.guess-form__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
}

.search-box {
  position: relative;
  min-width: 0;
}

.search-box__scope {
  position: absolute;
  left: 17px;
  top: 50%;
  z-index: 2;

  width: 15px;
  height: 15px;
  transform: translateY(-50%);

  border: 1px solid #89958d;
  border-radius: 50%;
  pointer-events: none;
}

.search-box__scope::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;

  width: 6px;
  height: 1px;
  transform: rotate(45deg);
  transform-origin: left center;

  background: #89958d;
}

#vehicle-input {
  width: 100%;
  height: 54px;
  padding: 0 18px 0 48px;

  color: var(--text);
  background: rgba(5, 9, 7, 0.82);
  border: 1px solid #49554d;
  border-radius: 2px;
  outline: none;

  font-size: 16px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#vehicle-input::placeholder {
  color: #667169;
}

#vehicle-input:hover {
  border-color: #66746a;
}

#vehicle-input:focus {
  border-color: var(--accent);
  background: rgba(10, 15, 12, 0.98);

  box-shadow:
    0 0 0 3px rgba(215, 154, 66, 0.14),
    0 12px 25px rgba(0, 0, 0, 0.26);
}

#vehicle-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 搜索建议 */
.suggestions {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 50;

  max-height: 290px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;

  list-style: none;
  color: var(--text);
  background: rgba(9, 14, 11, 0.985);
  border: 1px solid #56635a;
  border-radius: 2px;

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.52);
}

.suggestions li {
  padding: 11px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: var(--text-soft);
  border: 1px solid transparent;
  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.suggestions li:hover,
.suggestions li[aria-selected="true"] {
  color: #fff;
  background: rgba(215, 154, 66, 0.12);
  border-color: rgba(215, 154, 66, 0.32);
}

#submit-button {
  min-width: 162px;
  height: 54px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  color: #15120c;
  background:
    linear-gradient(180deg, var(--accent-light), var(--accent));
  border: 1px solid #f4c87e;
  border-radius: 2px;

  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;

  box-shadow:
    0 4px 0 #6f491d,
    0 12px 25px rgba(0, 0, 0, 0.28);

  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

#submit-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);

  box-shadow:
    0 5px 0 #6f491d,
    0 15px 30px rgba(0, 0, 0, 0.34);
}

#submit-button:active {
  transform: translateY(3px);

  box-shadow:
    0 1px 0 #6f491d,
    0 5px 14px rgba(0, 0, 0, 0.25);
}

#submit-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none;
  box-shadow: none;
}

.button-arrow {
  font-size: 22px;
  line-height: 1;
}

.form-message {
  min-height: 24px;
  margin: 13px 0 0;

  color: var(--text-dim);
  font-size: 13px;
}

.form-message.is-error {
  color: #e58880;
}

.form-message.is-success {
  color: #75c58a;
}

.form-message.is-warning {
  color: #e0aa5d;
}

/* =========================
   游戏状态
   ========================= */

.game-status {
  margin-top: 23px;
  padding: 17px 20px;

  display: flex;
  align-items: center;
  gap: 25px;

  background: rgba(3, 6, 4, 0.42);
  border-top: 1px solid rgba(190, 205, 194, 0.12);
  border-bottom: 1px solid rgba(190, 205, 194, 0.12);
}

.status-item {
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-item span {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.15em;
}

.status-item strong {
  color: var(--text);
  font-family: Consolas, monospace;
  font-size: 20px;
  line-height: 1.25;
}

.status-item--wide {
  flex: 1;
}

.status-divider {
  width: 1px;
  height: 35px;
  flex: 0 0 auto;
  background: var(--line);
}

/* =========================
   猜中结果面板
   ========================= */

.result-panel {
  margin-top: 24px;
  padding: 24px 28px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 22px;

  background:
    linear-gradient(135deg, rgba(48, 105, 66, 0.93), rgba(20, 55, 32, 0.96));
  border: 1px solid var(--exact-border);
  border-radius: 3px;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  animation: resultReveal 0.45s ease both;
}

.result-panel__icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  color: #17331f;
  background: #8dd39e;
  border: 1px solid #b1e1bb;
  border-radius: 50%;

  font-size: 27px;
  font-weight: 900;
}

.result-panel__kicker {
  margin: 0 0 3px;

  color: #a9dcb4;
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.result-panel h2 {
  margin: 0;
  font-size: clamp(20px, 3vw, 30px);
}

.result-panel p:last-child {
  margin: 5px 0 0;
  color: #cce4d2;
}

.result-panel__code {
  padding-left: 18px;

  color: #b9d7c0;
  border-left: 1px solid rgba(203, 231, 211, 0.28);

  font-family: Consolas, monospace;
  font-size: 20px;
}

@keyframes resultReveal {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================
   区块标题
   ========================= */

.intel-section,
.how-to {
  margin-top: 72px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;

  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.section-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-heading__index {
  color: var(--accent);
  font-family: Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

.section-heading h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 15px;

  color: var(--text-dim);
  font-size: 12px;
}

.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend__swatch {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: 1px solid transparent;
}

.legend__swatch--exact {
  background: var(--exact);
  border-color: var(--exact-border);
}

.legend__swatch--close {
  background: var(--close);
  border-color: var(--close-border);
}

.legend__swatch--wrong {
  background: var(--wrong);
  border-color: var(--wrong-border);
}

.scroll-hint {
  margin: 12px 0 18px;

  color: var(--text-dim);
  font-size: 12px;
  text-align: right;
}

.scroll-hint span {
  margin: 0 5px;
  color: var(--accent);
}

/* =========================
   对比表格
   ========================= */

.comparison-wrap {
  width: 100%;
  overflow-x: auto;

  background: rgba(5, 8, 6, 0.52);
  border: 1px solid var(--line);
  border-radius: 3px;

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.27);
  outline: none;
}

.comparison-wrap:focus {
  border-color: rgba(215, 154, 66, 0.56);
  box-shadow:
    0 0 0 3px rgba(215, 154, 66, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.27);
}

.comparison-wrap::-webkit-scrollbar,
.suggestions::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.comparison-wrap::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track {
  background: #0d120f;
}

.comparison-wrap::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb {
  background: #4e5a52;
  border: 2px solid #0d120f;
}

.comparison-table {
  width: 100%;
  min-width: 1080px;

  border-collapse: separate;
  border-spacing: 6px;
  padding: 7px;
}

.comparison-table th {
  height: 48px;
  padding: 9px;

  color: #aab4ad;
  background: rgba(29, 39, 33, 0.76);
  border: 1px solid rgba(157, 174, 162, 0.18);
  border-radius: 2px;

  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.comparison-table td {
  min-width: 110px;
  height: 72px;
  padding: 10px;

  color: #f1f3f1;
  background: #313a34;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 2px;

  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 800;
  word-break: break-word;

  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.2);

  animation: cellIn 0.38s ease both;
}

.comparison-table tbody tr:hover td {
  filter: brightness(1.07);
}

/* 兼容多种 JS class 命名 */
.comparison-table td.exact,
.comparison-table td.correct,
.comparison-table td.is-exact,
.comparison-table td.result-exact {
  background:
    linear-gradient(145deg, #458c5a, var(--exact));
  border-color: var(--exact-border);
}

.comparison-table td.close,
.comparison-table td.near,
.comparison-table td.is-close,
.comparison-table td.result-close {
  background:
    linear-gradient(145deg, #c28535, var(--close));
  border-color: var(--close-border);
}

.comparison-table td.wrong,
.comparison-table td.incorrect,
.comparison-table td.is-wrong,
.comparison-table td.result-wrong {
  background:
    linear-gradient(145deg, #62586c, var(--wrong));
  border-color: var(--wrong-border);
}

.comparison-table td.vehicle-name,
.comparison-table td.name-cell {
  background:
    linear-gradient(145deg, #39453d, #263029);
  border-color: rgba(151, 168, 156, 0.32);
}

.comparison-table .arrow {
  display: inline-block;
  margin-left: 5px;

  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

@keyframes cellIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 每行格子依次出现 */
.comparison-table tbody td:nth-child(1) { animation-delay: 0ms; }
.comparison-table tbody td:nth-child(2) { animation-delay: 35ms; }
.comparison-table tbody td:nth-child(3) { animation-delay: 70ms; }
.comparison-table tbody td:nth-child(4) { animation-delay: 105ms; }
.comparison-table tbody td:nth-child(5) { animation-delay: 140ms; }
.comparison-table tbody td:nth-child(6) { animation-delay: 175ms; }
.comparison-table tbody td:nth-child(7) { animation-delay: 210ms; }
.comparison-table tbody td:nth-child(8) { animation-delay: 245ms; }
.comparison-table tbody td:nth-child(9) { animation-delay: 280ms; }

/* 空状态 */
.empty-state td {
  height: 175px !important;

  color: var(--text-dim) !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0.012) 10px,
      transparent 10px,
      transparent 20px
    ) !important;
  border: 1px dashed rgba(151, 168, 156, 0.25) !important;

  font-weight: 400 !important;
}

.empty-state strong,
.empty-state small {
  display: block;
}

.empty-state strong {
  margin-top: 14px;
  color: #b7c1ba;
  font-size: 16px;
}

.empty-state small {
  margin-top: 3px;
  color: #6d7871;
  font-size: 12px;
}

.empty-state__reticle {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-block;

  border: 1px solid #657168;
  border-radius: 50%;
}

.empty-state__reticle::before,
.empty-state__reticle::after {
  content: "";
  position: absolute;
  background: #657168;
}

.empty-state__reticle::before {
  top: 50%;
  left: -8px;
  right: -8px;
  height: 1px;
}

.empty-state__reticle::after {
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 1px;
}

/* =========================
   行动简报
   ========================= */

.briefing-grid {
  margin-top: 25px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.briefing-grid article {
  position: relative;
  min-height: 180px;
  padding: 24px 23px;

  background:
    linear-gradient(145deg, rgba(25, 34, 29, 0.91), rgba(11, 16, 13, 0.92));
  border: 1px solid var(--line);
  border-radius: 3px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.briefing-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 154, 66, 0.42);
  background:
    linear-gradient(145deg, rgba(31, 41, 35, 0.95), rgba(13, 19, 15, 0.94));
}

.briefing-grid__number {
  color: var(--accent);
  font-family: Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

.briefing-grid h3 {
  margin: 25px 0 8px;
  font-size: 18px;
}

.briefing-grid p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* =========================
   页脚
   ========================= */

footer {
  width: min(1280px, 92%);
  margin: 0 auto;
  padding: 27px 0 35px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  color: #59645d;
  border-top: 1px solid var(--line);

  font-size: 11px;
}

footer p {
  margin: 0;
}

footer span,
footer sup {
  color: var(--accent);
}




/* =========================
   直接看答案按钮
   ========================= */

.reveal-answer-button {
  min-width: 132px;
  height: 54px;
  padding: 0 18px;
  color: #d8ded9;
  background: linear-gradient(180deg, #3b433e, #252c28);
  border: 1px solid #5f6b63;
  border-radius: 2px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 0 #151a17, 0 10px 22px rgba(0, 0, 0, 0.24);
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.reveal-answer-button:hover {
  filter: brightness(1.1);
  border-color: #9b7450;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #151a17, 0 13px 26px rgba(0, 0, 0, 0.3);
}

.reveal-answer-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #151a17, 0 5px 12px rgba(0, 0, 0, 0.22);
}

.reveal-answer-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none;
  box-shadow: none;
}

.result-panel.is-revealed {
  background:
    linear-gradient(135deg, rgba(139, 88, 32, 0.95), rgba(68, 42, 19, 0.97));
  border-color: var(--close-border);
}

.result-panel.is-revealed .result-panel__icon {
  color: #4b2e0c;
  background: #efba6d;
  border-color: #ffd69c;
}

.result-panel.is-revealed .result-panel__kicker {
  color: #f4cf9c;
}

.result-panel.is-revealed p:last-child {
  color: #f0d7b5;
}

/* =========================
   再来一把按钮
   ========================= */

.new-round-button {
  min-width: 126px;
  height: 46px;
  padding: 0 18px;

  color: #17331f;
  background: #9bd8a8;
  border: 1px solid #c1e9c9;
  border-radius: 2px;

  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;

  box-shadow:
    0 4px 0 #397648,
    0 10px 22px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

.new-round-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);

  box-shadow:
    0 5px 0 #397648,
    0 13px 26px rgba(0, 0, 0, 0.3);
}

.new-round-button:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #397648,
    0 5px 12px rgba(0, 0, 0, 0.22);
}

/* =========================
   响应式
   ========================= */

@media (max-width: 900px) {
  main {
    width: min(94%, 1280px);
    padding-top: 52px;
  }

  .briefing-grid {
    grid-template-columns: 1fr;
  }

  .briefing-grid article {
    min-height: 0;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 64px;
  }

  .mini-brand > span:last-child {
    display: none;
  }

  .daily-stamp > span:nth-child(2) {
    display: none;
  }

  main {
    padding: 38px 0 70px;
  }

  .hero {
    padding-bottom: 38px;
  }

  .hero__eyebrow {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .hero__line {
    width: 28px;
  }

  .title-lockup {
    gap: 6px;
  }

  .title-lockup h1 {
    letter-spacing: 0.02em;
  }

  .title-lockup p {
    margin-top: 11px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .title-lockup__bracket {
    opacity: 0.65;
  }

  .hero__brief {
    font-size: 13px;
  }

  .game-shell {
    padding: 0 16px 22px;
  }

  .game-shell__topline {
    margin: 0 -16px 20px;
  }

  .guess-form__controls {
    grid-template-columns: 1fr;
  }

  #submit-button,
  .reveal-answer-button {
    width: 100%;
  }

  .game-status {
    padding: 14px;
    gap: 14px;
  }

  .status-item {
    min-width: 0;
    flex: 1;
  }

  .status-item span {
    font-size: 9px;
  }

  .status-item strong {
    font-size: 16px;
  }

  .status-divider {
    height: 30px;
  }

  .result-panel {
    grid-template-columns: auto 1fr;
    padding: 21px;
  }

  .result-panel__code {
    grid-column: 1 / -1;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(203, 231, 211, 0.25);
  }

  .new-round-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .legend {
    justify-content: flex-start;
  }

  .scroll-hint {
    text-align: left;
  }
}

@media (max-width: 460px) {
  .site-header,
  main,
  footer {
    width: 92%;
  }

  .hero__eyebrow span:first-child,
  .hero__eyebrow span:last-child {
    font-size: 8px;
  }

  .title-lockup__bracket {
    display: none;
  }

  .game-status {
    flex-wrap: wrap;
  }

  .status-divider {
    display: none;
  }

  .status-item--wide {
    flex-basis: 100%;
  }

  .result-panel__icon {
    width: 45px;
    height: 45px;
  }

  .comparison-table {
    min-width: 980px;
  }
}

/* 尊重系统减少动画设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   模式选择入口
   ========================================================= */

.mode-screen {
  min-height: 100vh;
  width: min(1180px, 92%);
  margin: 0 auto;
  padding: 72px 0;

  display: grid;
  place-items: center;
}

.mode-panel {
  width: 100%;
  padding: clamp(28px, 5vw, 58px);

  background:
    linear-gradient(
      145deg,
      rgba(25, 34, 29, 0.97),
      rgba(7, 11, 8, 0.98)
    );

  border: 1px solid var(--line-strong);
  border-radius: 3px;

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  text-align: center;
}

.mode-panel__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  color: var(--text-dim);
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.mode-panel__line {
  width: 70px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );
}

.mode-panel h1 {
  margin: 24px 0 0;

  font-size: clamp(42px, 7vw, 76px);
  letter-spacing: 0.08em;
}

.mode-panel__brief {
  width: min(650px, 100%);
  margin: 18px auto 0;

  color: var(--text-soft);
}

.mode-grid {
  margin-top: 42px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.mode-card {
  position: relative;
  min-height: 275px;
  padding: 27px 22px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: var(--text);
  background:
    linear-gradient(
      145deg,
      rgba(33, 44, 37, 0.94),
      rgba(12, 17, 14, 0.96)
    );

  border: 1px solid var(--line);
  border-radius: 3px;

  text-align: left;
  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 154, 66, 0.58);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34);
}

.mode-card--available {
  background:
    linear-gradient(
      145deg,
      rgba(47, 63, 51, 0.98),
      rgba(15, 22, 17, 0.98)
    );
}

.mode-card--coming {
  color: #929c95;
  filter: saturate(0.6);
}

.mode-card__icon {
  position: relative;

  width: 70px;
  height: 70px;

  margin-bottom: 27px;

  display: block;

  border: 1px solid rgba(215, 154, 66, 0.45);
  border-radius: 50%;

  background: rgba(215, 154, 66, 0.06);
}

.mode-card__icon::before,
.mode-card__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.mode-card__icon--ground::before {
  width: 40px;
  height: 18px;
  left: 14px;
  top: 28px;

  border: 2px solid var(--accent);
  background: transparent;
}

.mode-card__icon--ground::after {
  width: 28px;
  height: 8px;
  left: 22px;
  top: 20px;

  border: 2px solid var(--accent);
  background: transparent;
}

.mode-card__icon--air::before {
  width: 44px;
  height: 3px;
  left: 13px;
  top: 33px;

  transform: rotate(-12deg);
}

.mode-card__icon--air::after {
  width: 15px;
  height: 30px;
  left: 30px;
  top: 20px;

  transform: rotate(-12deg);
}

.mode-card__icon--naval::before {
  width: 42px;
  height: 15px;
  left: 14px;
  top: 34px;

  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.mode-card__icon--naval::after {
  width: 18px;
  height: 13px;
  left: 26px;
  top: 22px;
}

.mode-card__code {
  color: var(--accent);
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.mode-card strong {
  margin-top: 5px;

  font-size: 29px;
  letter-spacing: 0.08em;
}

.mode-card small {
  margin-top: 5px;

  color: var(--text-dim);
  font-size: 13px;
}

.mode-card__status {
  margin-top: auto;
  padding: 5px 9px;

  color: #142016;
  background: #80c18e;
  border-radius: 2px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mode-card--coming .mode-card__status {
  color: #c5cbc7;
  background: #3b443e;
}

.mode-message {
  min-height: 25px;
  margin: 25px 0 0;

  color: var(--text-dim);
  font-size: 13px;
}

.mode-message.is-warning {
  color: #e0aa5d;
}

.mode-card.is-denied {
  animation: modeDenied 0.34s ease;
}

@keyframes modeDenied {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

/* =========================================================
   游戏顶栏模式切换
   ========================================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mode-switch-button {
  min-height: 35px;
  padding: 0 13px;

  color: var(--text-soft);
  background: rgba(22, 29, 25, 0.78);
  border: 1px solid var(--line);
  border-radius: 2px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.mode-switch-button:hover {
  color: #fff;
  background: rgba(39, 49, 43, 0.95);
  border-color: rgba(215, 154, 66, 0.5);
}

/* 热成像有/无的文字稍微收紧 */
.comparison-table td.boolean-value {
  letter-spacing: 0.1em;
}

@media (max-width: 850px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-card {
    min-height: 190px;
  }
}

@media (max-width: 560px) {
  .mode-screen {
    width: 92%;
    padding: 30px 0;
  }

  .mode-panel {
    padding: 25px 18px;
  }

  .mode-panel__eyebrow {
    gap: 8px;
    font-size: 8px;
  }

  .mode-panel__line {
    width: 30px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-mode {
    display: none;
  }

  .mode-switch-button {
    padding: 0 10px;
  }
}


/* =========================================================
   本地调试版附加样式
   ========================================================= */

.debug-panel {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 24px;
  padding: 22px;
  border: 1px solid rgba(154, 186, 146, 0.28);
  background:
    linear-gradient(180deg, rgba(17, 23, 19, 0.96), rgba(8, 12, 10, 0.96));
}

.debug-panel__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.debug-panel__heading span {
  color: #7f9880;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.debug-panel__heading h2 {
  margin: 4px 0 0;
}

.debug-badge {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid rgba(154, 186, 146, 0.24);
  background: rgba(75, 100, 76, 0.12);
}

.debug-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, auto);
  gap: 10px;
  align-items: end;
}

.debug-grid label {
  display: block;
  margin-bottom: 7px;
  color: #9cab9f;
  font-size: 12px;
}

.debug-grid input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  color: #e9f0e8;
  background: #090d0a;
  border: 1px solid rgba(126, 155, 135, 0.34);
  outline: none;
}

.debug-grid input:focus {
  border-color: rgba(171, 199, 160, 0.75);
}

.debug-grid button {
  min-height: 44px;
  padding: 0 14px;
  color: #dbe5d9;
  background: #172019;
  border: 1px solid rgba(126, 155, 135, 0.32);
  cursor: pointer;
}

.debug-grid button:hover {
  background: #202d23;
}

.debug-answer {
  min-height: 22px;
  margin: 15px 0 0;
  color: #9bac9e;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.vehicle-display-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vehicle-display-name__text {
  min-width: 0;
}

.vehicle-origin-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  object-fit: contain;
}

.suggestions .vehicle-origin-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.comparison-table .vehicle-origin-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

#answer-name.vehicle-display-name {
  vertical-align: middle;
}

.comparison-table {
  min-width: 1320px;
}

.comparison-table td.unknown {
  color: #c3c0c4;
  background: rgba(72, 68, 75, 0.78);
}

.legend__swatch--unknown {
  background: #56515b;
}

.comparison-table td .arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 15px;
  font-weight: 900;
}

.form-message.is-warning {
  color: #e0b36c;
}

@media (max-width: 900px) {
  .debug-grid {
    grid-template-columns: 1fr 1fr;
  }

  .debug-grid > div {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .debug-panel {
    width: min(100% - 18px, 1180px);
    padding: 16px;
  }

  .debug-grid {
    grid-template-columns: 1fr;
  }

  .debug-grid > div {
    grid-column: auto;
  }

  .vehicle-origin-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
}


/* =========================================================
   V8：军种 / 难度选择
   ========================================================= */

.setup-screen {
  width: min(1040px, calc(100% - 32px));
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  padding: 72px 0 90px;
  display: grid;
  place-items: center;
}

.setup-shell {
  width: 100%;
  padding: 34px;
  border: 1px solid rgba(151, 178, 151, 0.28);
  background:
    linear-gradient(180deg, rgba(17, 23, 19, 0.98), rgba(8, 12, 10, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.setup-kicker {
  color: #7e977f;
  font-size: 11px;
  letter-spacing: 0.22em;
}

.setup-shell > h1 {
  margin: 8px 0 4px;
  font-size: clamp(34px, 5vw, 58px);
}

.setup-shell > p {
  margin: 0;
  color: #8e9c90;
}

.setup-step {
  margin-top: 36px;
}

.setup-step__heading {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 14px;
}

.setup-step__index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(149, 180, 148, 0.3);
  color: #c8d5c7;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.setup-step__heading small {
  color: #708573;
  letter-spacing: 0.15em;
}

.setup-step__heading h2 {
  margin: 2px 0 0;
}

.mode-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mode-card {
  position: relative;
  min-height: 152px;
  padding: 20px;
  text-align: left;
  color: #e8eee7;
  background:
    linear-gradient(145deg, rgba(30, 42, 33, 0.94), rgba(13, 18, 15, 0.96));
  border: 1px solid rgba(145, 175, 145, 0.28);
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.mode-card:hover:not(.mode-card--disabled) {
  transform: translateY(-2px);
  border-color: rgba(180, 210, 174, 0.7);
  background:
    linear-gradient(145deg, rgba(37, 53, 40, 0.98), rgba(16, 23, 18, 0.98));
}

.mode-card__code {
  display: block;
  margin-bottom: 20px;
  color: #738975;
  font: 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.16em;
}

.mode-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
}

.mode-card small {
  display: block;
  max-width: 84%;
  color: #89988c;
  line-height: 1.6;
}

.mode-card__status {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 4px 7px;
  border: 1px solid rgba(147, 174, 146, 0.28);
  color: #9eaf9f;
  font-size: 10px;
}

.mode-card--disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.setup-message {
  min-height: 22px;
  margin: 12px 0 0;
  color: #dfb86e;
}

.setup-back-button {
  margin-top: 16px;
  padding: 9px 0;
  border: 0;
  color: #91a293;
  background: transparent;
  cursor: pointer;
}

.setup-back-button:hover {
  color: #d8e1d7;
}

@media (max-width: 680px) {
  .setup-screen {
    width: min(100% - 18px, 1040px);
    padding-top: 34px;
  }

  .setup-shell {
    padding: 20px;
  }

  .mode-card-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Room Battle V1
   ========================================================= */

.play-select-screen {
  width: min(1040px, calc(100% - 32px));
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  padding: 72px 0 90px;
  display: grid;
  place-items: center;
}

.play-mode-grid,
.room-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.play-mode-card {
  position: relative;
  min-height: 180px;
  padding: 23px;
  box-sizing: border-box;
  color: #e8eee7;
  text-decoration: none;
  text-align: left;
  background: linear-gradient(145deg, rgba(30, 42, 33, 0.94), rgba(13, 18, 15, 0.96));
  border: 1px solid rgba(145, 175, 145, 0.28);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.play-mode-card:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 210, 174, 0.7);
  background: linear-gradient(145deg, rgba(37, 53, 40, 0.98), rgba(16, 23, 18, 0.98));
}

.play-mode-card--accent {
  border-color: rgba(181, 201, 148, 0.52);
}

.play-mode-card--button {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.play-mode-card strong {
  display: block;
  margin: 22px 0 8px;
  font-size: 27px;
}

.play-mode-card small {
  display: block;
  max-width: 86%;
  color: #89988c;
  line-height: 1.6;
}

.landing-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.landing-rules span {
  padding: 6px 9px;
  border: 1px solid rgba(146, 173, 147, 0.2);
  color: #849487;
  font-size: 11px;
}

.room-form-panel {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(145, 175, 145, 0.2);
}

.room-label,
.room-choice-title {
  display: block;
  margin: 14px 0 7px;
  color: #9dac9f;
  font-size: 12px;
}

.room-input {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 0 13px;
  color: #edf2ec;
  background: #090d0a;
  border: 1px solid rgba(126, 155, 135, 0.34);
  outline: none;
}

.room-input:focus {
  border-color: rgba(171, 199, 160, 0.75);
}

.room-code-input {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.room-choice-group {
  margin-top: 18px;
}

.room-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-radio {
  position: relative;
  display: block;
  padding: 15px;
  border: 1px solid rgba(142, 169, 143, 0.24);
  background: rgba(18, 25, 20, 0.72);
  cursor: pointer;
}

.room-radio input {
  margin-right: 7px;
}

.room-radio span {
  color: #e0e8df;
}

.room-radio small {
  display: block;
  margin: 6px 0 0 24px;
  color: #77877a;
}

.room-radio--disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.room-primary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 18px;
  color: #0a0d0a;
  background: #bdcbb7;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

.room-primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.room-setting-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 25px 0;
}

.room-setting-summary > div,
.match-strip > div {
  padding: 13px;
  border: 1px solid rgba(140, 168, 141, 0.22);
  background: rgba(14, 19, 16, 0.74);
}

.room-setting-summary span,
.match-strip span {
  display: block;
  color: #7d8d80;
  font-size: 11px;
  margin-bottom: 5px;
}

.room-setting-summary strong,
.match-strip strong {
  color: #e2e9e1;
}

.room-player-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.room-player-card {
  min-height: 92px;
  padding: 15px;
  border: 1px solid rgba(140, 168, 141, 0.22);
  background: rgba(14, 19, 16, 0.74);
}

.room-player-card.is-empty {
  opacity: 0.55;
  border-style: dashed;
}

.room-player-card span {
  display: block;
  color: #748477;
  font-size: 11px;
}

.room-player-card strong {
  display: block;
  margin: 8px 0;
  color: #e5ece4;
}

.room-ready-state {
  color: #90a990;
  font-size: 12px;
}

.match-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.opponent-table td {
  min-width: 88px;
  height: 48px;
  text-align: center;
}

.opponent-table td.opponent-index {
  min-width: 50px;
  color: #859488;
  background: rgba(19, 24, 21, 0.78);
}

.opponent-cell-symbol {
  font-weight: 900;
  font-size: 16px;
}

.opponent-placeholder {
  color: #4f5c52;
  background: rgba(18, 22, 20, 0.66);
}

.form-message.is-error,
.setup-message.is-error {
  color: #df8079;
}

.form-message.is-success,
.setup-message.is-success {
  color: #9fc39e;
}

.form-message.is-warning,
.setup-message.is-warning {
  color: #e0b36c;
}

@media (max-width: 760px) {
  .play-select-screen {
    width: min(100% - 18px, 1040px);
    padding-top: 34px;
  }

  .play-mode-grid,
  .room-action-grid,
  .room-choice-row,
  .room-player-list,
  .room-setting-summary,
  .match-strip {
    grid-template-columns: 1fr;
  }
}


/* V1.1：明确返回“单人 / 多人”选择页 */
.header-return-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .site-header {
    gap: 10px;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .header-return-link {
    order: -1;
  }
}


/* =========================================================
   Room Battle V1.2
   多人对战：左右双情报 + 底部固定搜索栏
   ========================================================= */

.multiplayer-page {
  padding-bottom: 118px;
}

/* 多人对战顶部收紧，给双人情报腾空间 */
.multiplayer-page #online-game-app .hero {
  padding-top: 22px;
  padding-bottom: 12px;
}

.multiplayer-page #online-game-app .hero__eyebrow {
  margin-bottom: 8px;
}

.multiplayer-page #online-game-app .title-lockup {
  margin-top: 4px;
}

.multiplayer-page #online-game-app .title-lockup h1 {
  font-size: clamp(30px, 4vw, 50px);
}

.multiplayer-page #online-game-app .title-lockup p {
  margin-top: 2px;
  font-size: 12px;
}

.multiplayer-page #online-game-app .hero__brief {
  display: none;
}

.multiplayer-page .match-strip {
  width: min(1780px, calc(100% - 24px));
  margin-bottom: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.multiplayer-page .match-strip > div {
  padding: 8px 10px;
}

.multiplayer-page .match-strip span {
  margin-bottom: 2px;
  font-size: 9px;
}

.multiplayer-page .match-strip strong {
  font-size: 12px;
}

/* 原 game-shell 现在主要承载紧凑状态条 */
.multiplayer-page #online-game-app .game-shell {
  width: min(1780px, calc(100% - 24px));
  margin: 0 auto 8px;
  padding: 7px 10px;
}

.multiplayer-page #online-game-app .game-shell__topline {
  display: none;
}

.multiplayer-page #online-game-app .game-status {
  min-height: 0;
  padding: 0;
}

.multiplayer-page #online-game-app .status-item {
  padding: 3px 12px;
}

.multiplayer-page #online-game-app .status-item span {
  font-size: 9px;
}

.multiplayer-page #online-game-app .status-item strong {
  font-size: 12px;
}

/* 左右玩家情报 */
.multiplayer-page .battle-intel-grid {
  width: min(1780px, calc(100% - 24px));
  margin: 8px auto 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.multiplayer-page .compact-intel-section {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(142, 169, 143, 0.18);
  background: rgba(11, 15, 12, 0.72);
}

.multiplayer-page .compact-intel-section .section-heading {
  margin-bottom: 5px;
}

.multiplayer-page .compact-intel-section .section-heading > div:first-child {
  gap: 7px;
}

.multiplayer-page .compact-intel-section .section-heading__index {
  width: 23px;
  height: 23px;
  font-size: 9px;
}

.multiplayer-page .compact-intel-section .section-heading h2 {
  font-size: 15px;
}

.multiplayer-page .compact-intel-section .legend {
  gap: 6px;
  font-size: 8px;
}

.multiplayer-page .compact-intel-section .legend span {
  gap: 3px;
}

.multiplayer-page .compact-intel-section .legend__swatch {
  width: 7px;
  height: 7px;
}

.multiplayer-page .compact-intel-section .scroll-hint {
  margin: 2px 0 6px;
  font-size: 8px;
  line-height: 1.35;
}

/* 每个玩家的表独立横向滚动 */
.multiplayer-page .compact-intel-section .comparison-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(132, 159, 136, 0.14);
  scrollbar-width: thin;
}

.multiplayer-page .compact-intel-section .comparison-table {
  width: 100%;
  min-width: 690px;
  table-layout: fixed;
  font-size: 9px;
}

.multiplayer-page .compact-intel-section .comparison-table th,
.multiplayer-page .compact-intel-section .comparison-table td {
  min-width: 0;
  height: 34px;
  padding: 4px 3px;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiplayer-page .self-intel-section .comparison-table th:first-child,
.multiplayer-page .self-intel-section .comparison-table td:first-child {
  width: 105px;
}

.multiplayer-page .opponent-intel-section .comparison-table th:first-child,
.multiplayer-page .opponent-intel-section .comparison-table td:first-child {
  width: 26px;
}

.multiplayer-page .compact-intel-section .vehicle-origin-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}

.multiplayer-page .compact-intel-section .arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 9px;
}

.multiplayer-page .compact-intel-section .empty-state td {
  height: 82px;
}

.multiplayer-page .compact-intel-section .empty-state strong {
  font-size: 11px;
}

.multiplayer-page .compact-intel-section .empty-state small {
  font-size: 8px;
}

/* 搜索框固定在屏幕下方 */
.multiplayer-page .multiplayer-guess-dock {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 28px));
  margin: 0;
  padding: 9px 10px 7px;
  box-sizing: border-box;
  border: 1px solid rgba(174, 199, 164, 0.42);
  background: rgba(9, 13, 10, 0.97);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.015) inset;
  backdrop-filter: blur(12px);
}

.multiplayer-page .multiplayer-guess-dock > label {
  display: none;
}

.multiplayer-page .multiplayer-guess-dock .guess-form__controls {
  gap: 7px;
}

.multiplayer-page .multiplayer-guess-dock .search-box input {
  height: 42px;
  font-size: 13px;
}

.multiplayer-page .multiplayer-guess-dock #online-submit-button {
  min-width: 116px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 11px;
}

.multiplayer-page .multiplayer-guess-dock .form-message {
  min-height: 15px;
  margin: 5px 2px 0;
  font-size: 9px;
  line-height: 1.2;
}

/* 搜索结果向上弹，避免被屏幕底边吃掉 */
.multiplayer-page .multiplayer-guess-dock .suggestions {
  top: auto;
  bottom: calc(100% + 7px);
  z-index: 400;
  max-height: min(360px, 48vh);
  overflow-y: auto;
  border: 1px solid rgba(169, 197, 162, 0.48);
  background: rgba(8, 12, 9, 0.99);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.44);
}

.multiplayer-page .multiplayer-guess-dock .suggestions li {
  min-height: 38px;
  padding: 7px 10px;
}

.multiplayer-page .multiplayer-guess-dock .suggestions strong {
  font-size: 11px;
}

.multiplayer-page .multiplayer-guess-dock .suggestions span {
  font-size: 8px;
}

/* 结算面板不再占整屏 */
.multiplayer-page #online-result-panel {
  width: min(1100px, calc(100% - 24px));
  margin: 8px auto;
  padding: 12px 14px;
}

@media (max-width: 1100px) {
  .multiplayer-page .battle-intel-grid {
    grid-template-columns: 1fr;
  }

  .multiplayer-page .compact-intel-section .comparison-table {
    min-width: 720px;
  }
}

@media (max-width: 760px) {
  .multiplayer-page {
    padding-bottom: 126px;
  }

  .multiplayer-page .match-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .multiplayer-page .multiplayer-guess-dock {
    bottom: 7px;
    width: calc(100vw - 14px);
    padding: 7px;
  }

  .multiplayer-page .multiplayer-guess-dock .guess-form__controls {
    grid-template-columns: 1fr auto;
    display: grid;
  }

  .multiplayer-page .multiplayer-guess-dock #online-submit-button {
    min-width: 88px;
    padding: 0 9px;
  }

  .multiplayer-page .compact-intel-section {
    padding: 7px;
  }
}


/* =========================================================
   Room Battle V1.4
   1) 多人情报恢复上下纵向排列
   2) 修复多人搜索框实际 ID 没吃到单人输入框样式的问题
   ========================================================= */

/* ---------- 情报：你的在上，对手紧接在下面 ---------- */
.multiplayer-page .battle-intel-grid {
  width: min(1280px, calc(100% - 24px)) !important;
  margin: 8px auto 22px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  align-items: stretch !important;
}

.multiplayer-page .compact-intel-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}

.multiplayer-page .compact-intel-section .comparison-table {
  width: 100% !important;
  min-width: 1020px !important;
  table-layout: fixed;
  font-size: 10px !important;
}

.multiplayer-page .compact-intel-section .comparison-table th,
.multiplayer-page .compact-intel-section .comparison-table td {
  height: 37px !important;
  padding: 4px 5px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.multiplayer-page .compact-intel-section .section-heading h2 {
  font-size: 16px !important;
}

.multiplayer-page .compact-intel-section .scroll-hint {
  margin-bottom: 5px !important;
  font-size: 9px !important;
}

/* 自己的载具名稍微宽一点 */
.multiplayer-page .self-intel-section .comparison-table th:first-child,
.multiplayer-page .self-intel-section .comparison-table td:first-child {
  width: 145px !important;
}

/* 对手第一列只是次数 */
.multiplayer-page .opponent-intel-section .comparison-table th:first-child,
.multiplayer-page .opponent-intel-section .comparison-table td:first-child {
  width: 42px !important;
}

/* ---------- 搜索栏：固定底部并真正铺满 ---------- */
.multiplayer-page .multiplayer-guess-dock {
  width: min(880px, calc(100vw - 24px)) !important;
  padding: 9px 10px 7px !important;
}

/*
  之前 multiplayer 用的是 #online-vehicle-input，
  但原单人样式只写了 #vehicle-input，所以浏览器用了默认白色 input。
  这里直接给多人输入框完整样式。
*/
.multiplayer-page .multiplayer-guess-dock .guess-form__controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 8px !important;
  width: 100% !important;
}

.multiplayer-page .multiplayer-guess-dock .search-box {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
}

.multiplayer-page #online-vehicle-input {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  box-sizing: border-box !important;
  padding: 0 14px 0 44px !important;

  color: #e8eee9 !important;
  background: rgba(5, 9, 7, 0.98) !important;
  border: 1px solid #536058 !important;
  border-radius: 2px !important;
  outline: none !important;

  font-family: inherit !important;
  font-size: 14px !important;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.multiplayer-page #online-vehicle-input::placeholder {
  color: #68746c !important;
  opacity: 1;
}

.multiplayer-page #online-vehicle-input:focus {
  background: rgba(8, 13, 10, 0.99) !important;
  border-color: #a9b9a8 !important;
  box-shadow: 0 0 0 2px rgba(169, 185, 168, 0.1) !important;
}

.multiplayer-page #online-vehicle-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.multiplayer-page .multiplayer-guess-dock .search-box__scope {
  left: 15px !important;
}

.multiplayer-page #online-submit-button {
  width: 132px !important;
  min-width: 132px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  color: #15120c !important;
  background: linear-gradient(180deg, var(--accent-light), var(--accent)) !important;
  border: 1px solid #f4c87e !important;
  border-radius: 2px !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
}

.multiplayer-page #online-submit-button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.45);
}

.multiplayer-page .multiplayer-guess-dock .form-message {
  margin: 5px 2px 0 !important;
}

/* 候选列表和输入框同宽，并向上展开 */
.multiplayer-page .multiplayer-guess-dock .suggestions {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  top: auto !important;
  bottom: calc(100% + 7px) !important;
}

.multiplayer-page .multiplayer-guess-dock .suggestions li {
  padding: 8px 10px !important;
}

.multiplayer-page .multiplayer-guess-dock .suggestions strong {
  font-size: 12px !important;
}

.multiplayer-page .multiplayer-guess-dock .suggestions span {
  font-size: 9px !important;
}

/* 手机仍然一行：输入框 + 提交按钮 */
@media (max-width: 760px) {
  .multiplayer-page .battle-intel-grid {
    width: calc(100% - 14px) !important;
  }

  .multiplayer-page .compact-intel-section {
    padding: 7px !important;
  }

  .multiplayer-page .multiplayer-guess-dock {
    width: calc(100vw - 12px) !important;
    padding: 7px !important;
  }

  .multiplayer-page .multiplayer-guess-dock .guess-form__controls {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 6px !important;
  }

  .multiplayer-page #online-submit-button {
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 7px !important;
  }

  .multiplayer-page #online-submit-button .button-arrow {
    display: none;
  }
}


/* =========================================================
   Room Battle V1.5 - 游戏界面 HUD 精简
   ========================================================= */

/* 真正开始玩以后，大号标题完全不占空间 */
.single-page #game-app > .hero,
.multiplayer-page #online-game-app > .hero {
  display: none !important;
}

/* 顶部小框压紧，作为统一 HUD */
.single-page .site-header,
.multiplayer-page .site-header {
  width: min(1880px, calc(100% - 18px));
  min-height: 52px;
  padding: 7px 0;
  gap: 9px;
  align-items: center;
}

/* 左上角“雷”保留成真正的小 logo */
.single-page .mini-brand,
.multiplayer-page .mini-brand {
  flex: 0 0 auto;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.single-page .mini-brand__mark,
.multiplayer-page .mini-brand__mark {
  width: 29px;
  height: 29px;
  font-size: 14px;
}

/* ---------------- 单人 HUD ---------------- */
.single-page .single-header-hud {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;

  background: transparent !important;
  border: 0 !important;
}

.single-page .single-header-hud[hidden] {
  display: none !important;
}

.single-page .single-header-hud .status-item {
  min-width: 80px;
  padding: 2px 12px;
  gap: 0;
}

.single-page .single-header-hud .status-item span {
  font-size: 7px;
  letter-spacing: 0.07em;
}

.single-page .single-header-hud .status-item strong {
  font-size: 11px;
}

.single-page .single-header-hud .status-divider {
  height: 23px;
}

/* 单人不再给大标题预留空白 */
.single-page #game-app {
  padding-top: 10px;
}

.single-page #game-app .game-shell {
  margin-top: 6px;
}

/* ---------------- 多人 HUD ---------------- */
.multiplayer-page .multiplayer-header-hud-wrap {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.multiplayer-page .header-room-hud,
.multiplayer-page .multiplayer-header-status-hud {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.multiplayer-page .header-room-hud[hidden],
.multiplayer-page .multiplayer-header-status-hud[hidden] {
  display: none !important;
}

/* 房间 / 玩家信息直接缩进顶栏 */
.multiplayer-page .header-room-hud {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 3px !important;
}

.multiplayer-page .header-room-hud > div {
  min-width: 68px;
  padding: 3px 7px !important;

  border: 1px solid rgba(140, 168, 141, 0.16) !important;
  background: rgba(14, 19, 16, 0.52) !important;
}

.multiplayer-page .header-room-hud span {
  margin: 0 0 1px !important;
  font-size: 7px !important;
  letter-spacing: 0.05em;
}

.multiplayer-page .header-room-hud strong {
  display: block;
  max-width: 110px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 9px !important;
  line-height: 1.2;
}

/* 自己次数 / 载具池 / 状态也放进顶栏 */
.multiplayer-page .multiplayer-header-status-hud {
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

.multiplayer-page .multiplayer-header-status-hud .status-item {
  min-width: 64px;
  padding: 2px 7px !important;
}

.multiplayer-page .multiplayer-header-status-hud .status-item span {
  font-size: 7px !important;
  letter-spacing: 0.05em;
}

.multiplayer-page .multiplayer-header-status-hud .status-item strong {
  font-size: 9px !important;
}

.multiplayer-page .multiplayer-header-status-hud .status-divider {
  height: 22px !important;
}

/* game-shell 里只剩固定底部搜索，别再占一大片空区域 */
.multiplayer-page #online-game-app {
  padding-top: 7px;
}

.multiplayer-page #online-game-app .game-shell {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 情报紧接着顶栏出现 */
.multiplayer-page .battle-intel-grid {
  margin-top: 6px !important;
}

/* 顶栏操作按钮也继续压紧 */
.single-page .header-actions,
.multiplayer-page .header-actions {
  flex: 0 0 auto;
  gap: 4px;
}

.single-page .header-actions .mode-switch-button,
.multiplayer-page .header-actions .mode-switch-button,
.single-page .header-mode,
.multiplayer-page .header-mode {
  min-height: 28px;
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: 0.03em;
}

@media (max-width: 1100px) {
  .single-page .single-header-hud,
  .multiplayer-page .multiplayer-header-hud-wrap {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .single-page .mini-brand > span:last-child,
  .multiplayer-page .mini-brand > span:last-child {
    display: none;
  }
}

@media (max-width: 720px) {
  .single-page .site-header,
  .multiplayer-page .site-header {
    width: calc(100% - 10px);
    gap: 4px;
  }

  .single-page .header-mode,
  .multiplayer-page .header-mode {
    display: none;
  }

  .multiplayer-page .header-room-hud > div {
    min-width: 58px;
  }

  .single-page .single-header-hud .status-item {
    min-width: 65px;
    padding: 2px 7px;
  }
}


/* =========================================================
   Room Battle V1.6 - 快速匹配
   ========================================================= */

.multiplayer-page .room-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.multiplayer-page .play-mode-card--match {
  border-color: rgba(187, 202, 150, 0.5);
}

.matchmaking-branch-note {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 9px;
  align-items: center;
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(142, 169, 143, 0.22);
  background: rgba(14, 19, 16, 0.72);
}

.matchmaking-branch-note span {
  color: #7d8d80;
  font-size: 11px;
}

.matchmaking-branch-note strong {
  color: #e2e9e1;
  font-size: 13px;
}

.matchmaking-branch-note small {
  justify-self: end;
  color: #758278;
  font-size: 10px;
}

.matchmaking-search-shell {
  text-align: center;
}

.matchmaking-radar {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 28px auto 20px;
  overflow: hidden;
  border: 1px solid rgba(151, 181, 151, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(119, 153, 121, 0.07) 0 2px, transparent 3px),
    rgba(7, 12, 8, 0.88);
}

.matchmaking-radar::before,
.matchmaking-radar::after {
  content: "";
  position: absolute;
  background: rgba(130, 161, 132, 0.16);
}

.matchmaking-radar::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.matchmaking-radar::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.matchmaking-radar__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(133, 164, 134, 0.19);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.matchmaking-radar__ring--1 {
  width: 62px;
  height: 62px;
}

.matchmaking-radar__ring--2 {
  width: 120px;
  height: 120px;
}

.matchmaking-radar__ring--3 {
  width: 174px;
  height: 174px;
}

.matchmaking-radar__sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(188, 210, 179, 0.75), transparent);
  animation: matchmakingSweep 1.7s linear infinite;
}

.matchmaking-radar__dot {
  position: absolute;
  left: 67%;
  top: 33%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9ceb4;
  box-shadow: 0 0 14px rgba(185, 206, 180, 0.68);
  animation: matchmakingBlink 1.1s ease-in-out infinite alternate;
}

.matchmaking-summary {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.matchmaking-status-message {
  min-height: 24px;
  margin-top: 18px;
  color: #a8baa7;
}

.matchmaking-cancel-button {
  margin-top: 6px;
}

@keyframes matchmakingSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes matchmakingBlink {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@media (max-width: 820px) {
  .multiplayer-page .room-action-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Room Battle V1.7 - 对局结束弹窗
   ========================================================= */

.end-modal {
  position: fixed !important;
  z-index: 1000 !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(2, 5, 3, 0.78) !important;
  backdrop-filter: blur(7px);
  border: 0 !important;
}

.end-modal[hidden] {
  display: none !important;
}

.end-modal__card {
  position: relative;
  width: min(540px, calc(100vw - 28px));
  box-sizing: border-box;

  padding: 30px 30px 24px;

  color: #e8eee7;
  background:
    linear-gradient(
      180deg,
      rgba(20, 28, 22, 0.99),
      rgba(8, 12, 9, 0.995)
    );
  border: 1px solid rgba(174, 199, 164, 0.52);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.end-modal__card::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(195, 211, 184, 0.8),
      transparent
    );
}

.end-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;

  width: 32px;
  height: 32px;

  color: #89968b;
  background: transparent;
  border: 0;

  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.end-modal__close:hover {
  color: #eef3ed;
}

.end-modal__content {
  text-align: center;
}

/* 覆盖旧 result-panel 的横向布局 */
.end-modal .result-panel__icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(175, 201, 168, 0.35) !important;
  border-radius: 50% !important;

  font-size: 30px !important;
}

.end-modal .result-panel__kicker {
  margin: 0 0 8px !important;

  color: #c5d2c1 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.end-modal h2 {
  margin: 18px 0 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #89978c !important;
}

.end-modal h2 > span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  margin-top: 8px;

  color: #f0f4ef !important;
  font-size: clamp(24px, 5vw, 36px) !important;
  font-weight: 900 !important;
}

.end-modal h2 .vehicle-origin-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
}

.end-modal #result-summary,
.end-modal #online-result-summary {
  margin: 14px auto 0 !important;
  max-width: 420px;

  color: #9eaba0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.end-modal .result-panel__code {
  display: inline-block !important;
  margin: 18px 0 0 !important;
  padding: 5px 9px !important;

  color: #98a79a !important;
  background: rgba(128, 151, 130, 0.08) !important;
  border: 1px solid rgba(128, 151, 130, 0.18) !important;

  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

.end-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;

  margin-top: 24px;
}

.end-modal__actions .new-round-button,
.end-modal__secondary {
  min-height: 44px;
  margin: 0 !important;
  padding: 0 14px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.end-modal__secondary {
  color: #d6dfd4;
  background: rgba(18, 25, 20, 0.86);
  border: 1px solid rgba(148, 176, 148, 0.32);
}

.end-modal__secondary:hover {
  border-color: rgba(183, 207, 178, 0.65);
}

.end-modal__actions .new-round-button {
  width: 100% !important;
}

/* 胜负视觉差异 */
.multiplayer-page #online-result-panel .result-panel__kicker {
  text-transform: none !important;
}

@media (max-width: 560px) {
  .end-modal__card {
    padding: 26px 18px 18px;
  }

  .end-modal__actions {
    grid-template-columns: 1fr;
  }

  .end-modal .result-panel__kicker {
    font-size: 20px !important;
  }
}


/* =========================================================
   Room Battle V1.8 - 结果弹窗真正居中 + 两按钮
   ========================================================= */

.end-modal {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;

  margin: 0 !important;
  padding: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  overflow: auto !important;

  transform: none !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.end-modal[hidden] {
  display: none !important;
}

.end-modal__card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;

  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  max-height: calc(100vh - 40px) !important;

  margin: auto !important;
  transform: none !important;

  overflow-y: auto !important;
}

/* 结果弹窗只留两个动作：返回主页 / 再来一把 */
.end-modal__actions {
  grid-template-columns: 1fr 1fr !important;
}

.end-modal__secondary,
.end-modal__actions .new-round-button {
  min-height: 46px !important;
}

.end-modal__secondary {
  color: #dce5da !important;
  background: rgba(14, 20, 16, 0.92) !important;
  border: 1px solid rgba(157, 183, 157, 0.36) !important;
}

@media (max-width: 560px) {
  .end-modal__actions {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Room Battle V1.9 - 对手断线/退出提示
   ========================================================= */

.opponent-disconnect-notice {
  width: min(1280px, calc(100% - 24px));
  margin: 6px auto 0;
  padding: 8px 12px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #e6c78b;
  background: rgba(37, 28, 13, 0.92);
  border: 1px solid rgba(219, 175, 94, 0.42);

  font-size: 11px;
  line-height: 1.3;
}

.opponent-disconnect-notice[hidden] {
  display: none !important;
}

.opponent-disconnect-notice strong {
  color: #f0d49d;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.opponent-disconnect-notice span {
  color: #c8aa75;
}

@media (max-width: 700px) {
  .opponent-disconnect-notice {
    width: calc(100% - 12px);
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 10px;
  }
}


/* =========================================================
   Room Battle V2.0 - 多人 8 分钟回合倒计时
   ========================================================= */

.multiplayer-page .round-time-status strong {
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

.multiplayer-page #round-time-left.is-warning {
  color: #e6c378 !important;
}


/* =========================================================
   Room Battle V2.1 - 账号系统
   ========================================================= */

/* 主页面左下角账号卡 */
.account-dock {
  position: fixed;
  z-index: 120;
  left: 16px;
  bottom: 16px;

  width: 250px;
  box-sizing: border-box;
  padding: 12px 13px;

  color: #dfe7de;
  background: rgba(8, 12, 9, 0.96);
  border: 1px solid rgba(147, 174, 148, 0.28);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
}

.account-dock__view {
  display: grid;
  gap: 5px;
}

.account-dock__view[hidden] {
  display: none !important;
}

.account-dock__view > span {
  color: #7f8f82;
  font-size: 9px;
  line-height: 1.4;
}

.account-dock__view > strong {
  overflow: hidden;
  color: #eef3ed;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dock__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
}

.account-dock button {
  min-height: 32px;
  color: #dce5da;
  background: rgba(18, 25, 20, 0.9);
  border: 1px solid rgba(148, 176, 148, 0.3);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.account-dock button:hover {
  border-color: rgba(188, 208, 181, 0.65);
}

.account-dock__logout {
  margin-top: 5px;
}

/* 登录注册弹窗 */
.account-modal {
  position: fixed;
  z-index: 900;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  box-sizing: border-box;

  background: rgba(2, 5, 3, 0.78);
  backdrop-filter: blur(6px);
}

.account-modal[hidden] {
  display: none !important;
}

.account-modal__card {
  position: relative;
  width: min(430px, calc(100vw - 28px));
  padding: 24px;
  box-sizing: border-box;

  color: #e9eee8;
  background: rgba(9, 14, 10, 0.995);
  border: 1px solid rgba(171, 196, 166, 0.45);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.account-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;

  width: 32px;
  height: 32px;

  color: #859187;
  background: transparent;
  border: 0;

  font-size: 23px;
  cursor: pointer;
}

.account-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 36px 20px 0;
}

.account-modal__tabs button {
  min-height: 36px;
  color: #87958a;
  background: rgba(16, 23, 18, 0.78);
  border: 1px solid rgba(135, 159, 136, 0.2);
  font-family: inherit;
  cursor: pointer;
}

.account-modal__tabs button.is-active {
  color: #edf3eb;
  border-color: rgba(185, 205, 178, 0.6);
  background: rgba(33, 44, 34, 0.92);
}

.account-form {
  display: grid;
  gap: 8px;
}

.account-form[hidden] {
  display: none !important;
}

.account-form h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.account-form label {
  margin-top: 5px;
  color: #9eaba0;
  font-size: 10px;
}

.account-form input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 11px;

  color: #ecf1eb;
  background: rgba(5, 9, 6, 0.98);
  border: 1px solid #4e5b51;
  outline: none;

  font-family: inherit;
  font-size: 13px;
}

.account-form input:focus {
  border-color: #aab9a7;
  box-shadow: 0 0 0 2px rgba(170, 185, 167, 0.09);
}

.account-form small {
  color: #738077;
  font-size: 9px;
  line-height: 1.5;
}

.account-form__submit {
  min-height: 42px;
  margin-top: 10px;

  color: #17130c;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border: 1px solid #f0c47a;

  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.account-form__message {
  min-height: 18px;
  margin: 12px 0 0;
  color: #91a095;
  font-size: 10px;
  text-align: center;
}

.account-form__message[data-type="error"] {
  color: #d49d91;
}

/* 多人身份固定由账号系统决定 */
.multiplayer-identity-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;

  margin: 18px 0 0;
  padding: 10px 12px;

  background: rgba(12, 18, 14, 0.72);
  border: 1px solid rgba(140, 167, 140, 0.2);
}

.multiplayer-identity-note span,
.multiplayer-identity-note small {
  color: #7d8c80;
  font-size: 9px;
}

.multiplayer-identity-note strong {
  overflow: hidden;
  color: #e7ede5;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-name-input[readonly] {
  color: #bac7ba !important;
  background: rgba(13, 18, 14, 0.78) !important;
  cursor: default;
}

@media (max-width: 700px) {
  .account-dock {
    left: 8px;
    bottom: 8px;
    width: min(230px, calc(100vw - 16px));
  }

  .multiplayer-identity-note {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* =========================================================
   Room Battle V2.2 - 外观设置
   默认主题：浅色
   ========================================================= */

.account-dock__settings {
  width: 100%;
  margin-top: 7px;
}

.settings-modal {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(18, 22, 20, 0.32);
  backdrop-filter: blur(7px);
}

.settings-modal[hidden] {
  display: none !important;
}

.settings-modal__card {
  position: relative;
  width: min(440px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 26px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}

.settings-modal__close {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  font-size: 23px;
  cursor: pointer;
}

.settings-modal__eyebrow {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.settings-modal h2 {
  margin: 4px 0 22px;
  font-size: 22px;
}

.settings-theme-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.settings-theme-row > div:first-child {
  display: grid;
  gap: 3px;
}

.settings-theme-row strong {
  font-size: 13px;
}

.settings-theme-row span {
  color: var(--text-dim);
  font-size: 10px;
}

.settings-theme-row b {
  color: var(--text-soft);
  font-weight: 700;
}

.settings-theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.settings-theme-options button {
  min-width: 72px;
  min-height: 36px;
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.settings-theme-options button.is-active {
  color: #1b160d;
  background:
    linear-gradient(
      180deg,
      var(--accent-light),
      var(--accent)
    );
  border-color: #c48a36;
}

.settings-modal__note {
  margin: 16px 0 0;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.6;
}

/* 浅色主题 */
html[data-theme="light"] {
  color-scheme: light;

  --bg-0: #f4f1e9;
  --bg-1: #eeebe2;
  --bg-2: #e6e3d9;

  --panel: rgba(250, 248, 242, 0.97);
  --panel-soft: rgba(240, 237, 228, 0.94);

  --line: rgba(71, 82, 73, 0.18);
  --line-strong: rgba(65, 75, 67, 0.34);

  --text: #202722;
  --text-soft: #4c5950;
  --text-dim: #7a857d;

  --accent: #c88931;
  --accent-light: #eab158;
  --accent-dark: #7f5420;

  --exact: #78ae85;
  --exact-border: #4d8b60;

  --close: #d6a159;
  --close-border: #ad7227;

  --wrong: #b8b1bf;
  --wrong-border: #827888;

  --danger: #ae544e;
  --shadow:
    0 20px 54px
      rgba(51, 48, 40, 0.14);
}

html[data-theme="light"] body {
  color: var(--text);
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(207, 197, 167, 0.48),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #fbfaf5 0%,
      var(--bg-0) 52%,
      #ece8dc 100%
    );
}

html[data-theme="light"] body::before {
  background:
    linear-gradient(
      rgba(52, 65, 56, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(52, 65, 56, 0.035) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
}

html[data-theme="light"] body::after {
  background:
    linear-gradient(
      90deg,
      rgba(97, 92, 76, 0.08),
      transparent 18%,
      transparent 82%,
      rgba(97, 92, 76, 0.08)
    ),
    linear-gradient(
      180deg,
      transparent 72%,
      rgba(116, 104, 81, 0.08)
    );
}

html[data-theme="light"] .page-noise {
  opacity: 0.07;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .mini-brand__mark {
  color: #18140d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    0 5px 14px rgba(74, 63, 42, 0.15);
}

html[data-theme="light"] :is(
  .game-shell,
  .setup-shell,
  .setup-step,
  .mode-card,
  .play-mode-card,
  .comparison-wrap,
  .intel-section,
  .compact-intel-section,
  .room-form-panel,
  .waiting-room-card,
  .account-dock,
  .account-modal__card,
  .settings-modal__card,
  .matchmaking-branch-note,
  .multiplayer-identity-note
) {
  color: var(--text) !important;
  background: rgba(250, 248, 242, 0.96) !important;
  border-color: rgba(72, 82, 74, 0.2) !important;
  box-shadow: 0 14px 38px rgba(69, 62, 48, 0.08) !important;
}

html[data-theme="light"] .comparison-table th {
  color: #59645d !important;
  background: #e8e5dc !important;
  border-color: rgba(67, 77, 70, 0.18) !important;
}

html[data-theme="light"] .comparison-table td {
  color: #252d27 !important;
  background: rgba(250, 248, 242, 0.95) !important;
  border-color: rgba(67, 77, 70, 0.16) !important;
}

html[data-theme="light"]
.comparison-table tr:nth-child(even) td {
  background: rgba(242, 239, 231, 0.96) !important;
}

html[data-theme="light"] .empty-state td {
  color: #737f76 !important;
}

html[data-theme="light"] :is(
  input,
  .room-input,
  .account-form input,
  #online-vehicle-input
) {
  color: #202722 !important;
  background: rgba(255, 254, 250, 0.98) !important;
  border-color: #a8aea8 !important;
}

html[data-theme="light"] :is(
  input,
  .room-input,
  .account-form input,
  #online-vehicle-input
)::placeholder {
  color: #939c95 !important;
}

html[data-theme="light"] :is(
  input,
  .room-input,
  .account-form input,
  #online-vehicle-input
):focus {
  background: #ffffff !important;
  border-color: #7f8b82 !important;
  box-shadow:
    0 0 0 2px rgba(91, 105, 96, 0.1)
    !important;
}

html[data-theme="light"]
.identity-name-input[readonly] {
  color: #5d685f !important;
  background: #ece9e0 !important;
}

html[data-theme="light"] .suggestions {
  color: #252d27 !important;
  background: #fbfaf5 !important;
  border-color: rgba(70, 80, 72, 0.28) !important;
  box-shadow:
    0 12px 34px rgba(70, 61, 44, 0.14)
    !important;
}

html[data-theme="light"] .suggestions li {
  border-color: rgba(70, 80, 72, 0.1) !important;
}

html[data-theme="light"]
.suggestions li:hover,
html[data-theme="light"]
.suggestions li.is-active {
  background: #ebe7dd !important;
}

html[data-theme="light"] :is(
  .mode-switch-button,
  .setup-back-button,
  .room-secondary-button,
  .end-modal__secondary,
  .account-dock button,
  .account-modal__tabs button,
  .settings-theme-options button
) {
  color: #404b43 !important;
  background: rgba(239, 236, 227, 0.96) !important;
  border-color: rgba(78, 90, 81, 0.26) !important;
}

html[data-theme="light"] :is(
  .mode-switch-button,
  .setup-back-button,
  .room-secondary-button,
  .end-modal__secondary,
  .account-dock button,
  .account-modal__tabs button,
  .settings-theme-options button
):hover {
  color: #1f2822 !important;
  border-color: rgba(78, 90, 81, 0.52) !important;
}

html[data-theme="light"] :is(
  .account-form__submit,
  .room-primary-button,
  .new-round-button,
  #online-submit-button
) {
  color: #1b160d !important;
}

html[data-theme="light"]
.multiplayer-guess-dock {
  background: rgba(248, 246, 239, 0.98) !important;
  border-color: rgba(82, 94, 85, 0.34) !important;
  box-shadow:
    0 16px 44px rgba(66, 58, 43, 0.16)
    !important;
}

html[data-theme="light"]
.header-room-hud > div {
  background: rgba(237, 234, 225, 0.82) !important;
  border-color: rgba(70, 82, 73, 0.18) !important;
}

html[data-theme="light"]
.header-room-hud strong,
html[data-theme="light"]
.multiplayer-header-status-hud strong {
  color: #252d27 !important;
}

html[data-theme="light"]
.matchmaking-radar {
  background:
    radial-gradient(
      circle,
      rgba(92, 110, 95, 0.08) 0 2px,
      transparent 3px
    ),
    rgba(239, 237, 229, 0.95)
    !important;
  border-color: rgba(78, 96, 82, 0.28) !important;
}

html[data-theme="light"]
.matchmaking-radar::before,
html[data-theme="light"]
.matchmaking-radar::after {
  background: rgba(70, 90, 75, 0.13) !important;
}

html[data-theme="light"]
.opponent-disconnect-notice {
  color: #76541c !important;
  background: rgba(250, 239, 214, 0.97) !important;
  border-color: rgba(174, 121, 41, 0.38) !important;
}

html[data-theme="light"]
.opponent-disconnect-notice strong {
  color: #754d0d !important;
}

html[data-theme="light"]
.opponent-disconnect-notice span {
  color: #8a6428 !important;
}

html[data-theme="light"] .end-modal {
  background: rgba(105, 103, 93, 0.28) !important;
}

html[data-theme="light"]
.end-modal__card {
  color: #252d27 !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 254, 250, 0.995),
      rgba(242, 239, 230, 0.995)
    )
    !important;
  border-color: rgba(70, 82, 73, 0.35) !important;
  box-shadow:
    0 26px 72px rgba(66, 59, 44, 0.2)
    !important;
}

html[data-theme="light"]
.end-modal h2 > span {
  color: #202722 !important;
}

html[data-theme="light"] :is(
  .account-dock__view > strong,
  .multiplayer-identity-note strong,
  .account-form h2,
  .settings-modal h2
) {
  color: #202722 !important;
}

html[data-theme="light"] :is(
  .hero__eyebrow,
  .title-lockup p,
  .section-heading small,
  .setup-kicker,
  .room-label,
  .room-choice-title,
  .scroll-hint,
  .form-message,
  .account-dock__view > span,
  .account-form label,
  .settings-modal__eyebrow
) {
  color: #768178 !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

@media (max-width: 560px) {
  .settings-theme-row {
    grid-template-columns: 1fr;
  }

  .settings-theme-options {
    width: 100%;
  }

  .settings-theme-options button {
    width: 100%;
  }
}

/* =========================================================
   Room Battle V2.3 - 数据统计 / 排行榜 / 回放
   ========================================================= */

.account-dock__utility-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}

.data-modal {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(2, 5, 3, 0.72);
  backdrop-filter: blur(7px);
}

.data-modal[hidden] {
  display: none !important;
}

.data-modal__card {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 26px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}

.data-modal__card--wide {
  width: min(860px, calc(100vw - 28px));
}

.data-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  font-size: 23px;
  cursor: pointer;
}

.data-modal__kicker {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.data-modal h2 {
  margin: 4px 0 2px;
  font-size: 22px;
}

.profile-username {
  display: block;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-size: 13px;
}

.data-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.data-tabs button,
.replay-back {
  min-height: 34px;
  padding: 0 13px;
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.data-tabs button.is-active {
  color: #1b160d;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-color: #c48a36;
}

.profile-panel[hidden] {
  display: none !important;
}

.stats-mode-block + .stats-mode-block {
  margin-top: 20px;
}

.stats-mode-block h3 {
  margin: 0 0 9px;
  font-size: 13px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-stat-card {
  min-height: 76px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.profile-stat-card span,
.replay-summary-grid span {
  color: var(--text-dim);
  font-size: 9px;
}

.profile-stat-card strong {
  color: var(--text);
  font-size: 21px;
  line-height: 1.1;
}

.replay-list {
  display: grid;
  gap: 7px;
}

.replay-row {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-family: inherit;
  cursor: pointer;
}

.replay-row:hover {
  border-color: var(--line-strong);
}

.replay-row > div {
  display: grid;
  gap: 2px;
}

.replay-row span {
  color: var(--text-dim);
  font-size: 9px;
}

.replay-row b {
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft);
  font-size: 11px;
}

.replay-detail h3 {
  margin: 14px 0 10px;
}

.replay-detail h4 {
  margin: 18px 0 8px;
  font-size: 12px;
}

.replay-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.replay-summary-grid > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.replay-summary-grid strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.replay-guesses {
  margin: 0;
  padding-left: 30px;
  display: grid;
  gap: 5px;
}

.replay-guesses li {
  padding: 7px 9px;
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-size: 11px;
}

.leaderboard-note {
  margin: 8px 0 16px;
  color: var(--text-dim);
  font-size: 10px;
}

.leaderboard-table-wrap {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) {
  text-align: left;
}

.leaderboard-table th {
  color: var(--text-dim);
  font-size: 9px;
}

.leaderboard-table td:first-child {
  font-weight: 900;
}

html[data-theme="light"] .data-modal {
  background: rgba(105, 103, 93, 0.28);
}

html[data-theme="light"] :is(
  .data-modal__card,
  .profile-stat-card,
  .replay-row,
  .replay-summary-grid > div,
  .replay-guesses li,
  .data-tabs button,
  .replay-back
) {
  color: #202722;
  background: rgba(250, 248, 242, 0.98);
  border-color: rgba(72, 82, 74, 0.2);
}

html[data-theme="light"] .data-tabs button.is-active {
  color: #1b160d;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-color: #c48a36;
}

@media (max-width: 650px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replay-summary-grid {
    grid-template-columns: 1fr;
  }

  .replay-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .replay-row b {
    max-width: 100%;
  }
}


/* =========================================================
   Room Battle V2.4 - BO1 / BO3 / BO5
   ========================================================= */

.room-choice-row--three {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.room-setting-summary--four {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.multiplayer-page
.header-room-hud
> div {
  min-width: 62px;
}

.multiplayer-page
#match-series-score {
  font-variant-numeric:
    tabular-nums;
}

.replay-round-list {
  display: grid;
  gap: 10px;
}

.replay-round {
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.replay-round__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.replay-round__head strong {
  color: var(--text);
  font-size: 12px;
}

.replay-round__head span {
  color: var(--text-soft);
  font-size: 10px;
  text-align: right;
}

@media (max-width: 760px) {
  .room-choice-row--three,
  .room-setting-summary--four {
    grid-template-columns: 1fr;
  }

  .replay-round__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .replay-round__head span {
    text-align: left;
  }
}


/* =========================================================
   V2.4.1 - 快速匹配固定 BO3
   ========================================================= */

.matchmaking-panel
.room-radio.is-disabled-choice {
  opacity: 0.38;
  cursor: not-allowed;
}

.matchmaking-panel
.room-radio.is-disabled-choice
input {
  pointer-events: none;
}

.matchmaking-panel
.room-radio.is-locked-choice {
  border-color:
    rgba(196, 138, 54, 0.58);
}

.matchmaking-panel
.room-radio.is-locked-choice
small {
  color: var(--accent-dark);
}


/* =========================================================
   V2.5 - 主页面布局重排
   ========================================================= */

.landing-home-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows:
    auto minmax(0, 1fr) auto;
}

.landing-home-page > main {
  min-height: 0;
  display: grid;
}

/* ---------- 右上角：账号 + 设置 ---------- */

.landing-home-page .site-header {
  width: min(1440px, calc(100% - 32px));
  min-height: 58px;
  padding: 9px 0;
}

.landing-home-page .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-header-account {
  display: flex;
  align-items: center;
}

.landing-header-account
.account-dock__view {
  display: flex;
  align-items: center;
  gap: 7px;
}

.landing-header-account
.account-dock__view[hidden] {
  display: none !important;
}

.landing-header-account
#account-guest-view
> span {
  display: none;
}

.landing-header-account
#account-guest-view
> strong {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.landing-header-account
.account-dock__buttons {
  display: flex;
  gap: 5px;
  margin: 0;
}

.landing-header-account
#account-user-view {
  gap: 8px;
}

.landing-header-account
#account-user-view
> span {
  display: none;
}

.landing-header-account
#account-user-view
> strong {
  max-width: 160px;
  overflow: hidden;

  color: var(--text);
  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-header-account
button,
.landing-header-settings {
  min-height: 32px;
  padding: 0 11px;

  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);

  font-family: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.landing-header-account
button:hover,
.landing-header-settings:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.landing-header-account
.account-dock__logout {
  margin: 0;
}

/* ---------- 中间主内容：不要再额外撑高 ---------- */

.landing-home-page
.play-select-screen {
  width: min(1040px, calc(100% - 32px));
  min-height: 0;
  height: 100%;

  padding: 18px 0;
  box-sizing: border-box;
}

.landing-home-page
.setup-shell {
  align-self: center;
  padding: 26px 30px;
}

.landing-home-page
.setup-shell > h1 {
  font-size: clamp(30px, 4.4vw, 50px);
}

.landing-home-page
.play-mode-grid {
  margin-top: 24px;
}

.landing-home-page
.play-mode-card {
  min-height: 154px;
  padding: 20px;
}

.landing-home-page
.play-mode-card strong {
  margin-top: 17px;
}

.landing-home-page
.landing-rules {
  margin-top: 14px;
  gap: 6px;
}

.landing-home-page
.landing-rules span {
  padding: 5px 8px;
  font-size: 10px;
}

/* ---------- 底部：数据 / 排行榜 + 声明 + 版本 ---------- */

.landing-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.landing-footer__inner {
  width: min(1440px, calc(100% - 32px));
  min-height: 48px;
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.landing-footer__tools {
  display: flex;
  gap: 6px;
  margin: 0;
}

.landing-footer__tools button {
  min-height: 30px;
  padding: 0 10px;

  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line);

  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.landing-footer__tools button:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.landing-footer__disclaimer {
  min-width: 0;
  margin: 0;

  overflow: hidden;
  color: var(--text-dim);

  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-footer__version {
  color: var(--text-dim);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 浅色模式也保持右上角控件统一 */
html[data-theme="light"]
.landing-home-page
:is(
  .landing-header-account button,
  .landing-header-settings
) {
  color: #404b43 !important;
  background: rgba(239, 236, 227, 0.96) !important;
  border-color: rgba(78, 90, 81, 0.26) !important;
}

/* 768p 一类的桌面高度继续压缩 */
@media
  (min-width: 761px)
  and (max-height: 820px) {

  .landing-home-page
  .site-header {
    min-height: 52px;
    padding: 6px 0;
  }

  .landing-home-page
  .play-select-screen {
    padding: 10px 0;
  }

  .landing-home-page
  .setup-shell {
    padding: 20px 26px;
  }

  .landing-home-page
  .setup-shell > h1 {
    margin-top: 5px;
    font-size: clamp(28px, 4vw, 42px);
  }

  .landing-home-page
  .play-mode-grid {
    margin-top: 17px;
  }

  .landing-home-page
  .play-mode-card {
    min-height: 132px;
    padding: 16px 18px;
  }

  .landing-home-page
  .play-mode-card strong {
    margin: 13px 0 6px;
    font-size: 23px;
  }

  .landing-home-page
  .play-mode-card small {
    line-height: 1.4;
  }

  .landing-home-page
  .landing-rules {
    margin-top: 10px;
  }

  .landing-footer__inner {
    min-height: 42px;
  }
}

/* 桌面主页本身不滚；
   弹窗自身仍然可以滚。 */
@media (min-width: 761px) {
  .landing-home-page {
    height: 100dvh;
    overflow: hidden;
  }
}

/* 手机仍自然滚动，避免硬裁内容 */
@media (max-width: 760px) {
  .landing-home-page {
    display: block;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .landing-home-page
  .site-header {
    width: calc(100% - 18px);
    align-items: flex-start;
    gap: 10px;
  }

  .landing-home-page
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .landing-header-account
  #account-guest-view
  > strong {
    display: none;
  }

  .landing-home-page
  .play-select-screen {
    width: calc(100% - 18px);
    height: auto;
    padding: 24px 0;
  }

  .landing-home-page
  .setup-shell {
    padding: 20px;
  }

  .landing-footer__inner {
    width: calc(100% - 18px);
    padding: 10px 0;

    grid-template-columns:
      1fr auto;
    gap: 8px 12px;
  }

  .landing-footer__tools {
    grid-column: 1 / -1;
  }

  .landing-footer__disclaimer {
    text-align: left;
  }
}


/* =========================================================
   V2.6 - 首页导航 / 白底 / 强化操作按钮
   ========================================================= */

/* ---------- 设置：纯图标按钮 ---------- */

.icon-settings-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
}

.icon-settings-button svg {
  display: block;
  width: 19px;
  height: 19px;
  pointer-events: none;
}

/* ---------- 首页浅色主题：纯白 ---------- */

html[data-theme="light"]
.landing-home-page {
  background: #ffffff !important;
}

html[data-theme="light"]
.landing-home-page::before,
html[data-theme="light"]
.landing-home-page::after {
  display: none !important;
}

html[data-theme="light"]
.landing-home-page
.page-noise {
  display: none !important;
}

html[data-theme="light"]
.landing-home-page
.setup-shell {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 主选择卡在白底上保留轻边框，不再搞大块灰底 */
html[data-theme="light"]
.landing-home-page
.play-mode-card {
  background: #ffffff !important;
  border: 1px solid #dcdcdc !important;
  box-shadow:
    0 6px 22px
    rgba(20, 20, 20, 0.055)
    !important;
}

html[data-theme="light"]
.landing-home-page
.play-mode-card:hover {
  border-color: #9f9f9f !important;
  box-shadow:
    0 10px 28px
    rgba(20, 20, 20, 0.09)
    !important;
}

/* ---------- 右上角登录 / 注册：明显一点 ---------- */

.landing-header-account
#open-login-button,
.landing-header-account
#open-register-button {
  min-height: 38px;
  padding: 0 16px;

  border-radius: 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.landing-header-account
#open-login-button {
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
}

.landing-header-account
#open-register-button {
  color: #ffffff !important;
  background: #171717 !important;
  border: 1px solid #171717 !important;
}

.landing-header-account
#open-register-button:hover {
  background: #333333 !important;
  border-color: #333333 !important;
}

html[data-theme="dark"]
.landing-header-account
#open-register-button {
  color: #151515 !important;
  background: #f1f1ec !important;
  border-color: #f1f1ec !important;
}

/* 登录后的账号区同样稍微更有存在感 */
.landing-header-account
#account-user-view {
  min-height: 38px;
}

.landing-header-account
#account-username-display {
  font-weight: 850;
}

/* ---------- 右上设置图标 ---------- */

.landing-header-settings {
  color: #2e2e2e !important;
  background: transparent !important;
  border: 1px solid #d7d7d7 !important;
}

.landing-header-settings:hover {
  color: #111111 !important;
  background: #f5f5f5 !important;
  border-color: #a9a9a9 !important;
}

html[data-theme="dark"]
.landing-header-settings {
  color: var(--text) !important;
  background: var(--panel-soft) !important;
  border-color: var(--line) !important;
}

/* ---------- Footer：左声明 / 中按钮 / 右版本 ---------- */

.landing-footer__inner {
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: 20px;
}

.landing-footer__disclaimer {
  justify-self: start;
  text-align: left;
}

.landing-footer__tools {
  justify-self: center;
  display: flex;
  gap: 10px;
}

/* 数据 / 回放、排行榜做成真正的主页入口按钮 */
.landing-footer__tools button {
  min-height: 38px;
  padding: 0 18px;

  border-radius: 8px;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.landing-footer__tools
#open-profile-button {
  color: #ffffff !important;
  background: #171717 !important;
  border-color: #171717 !important;
}

.landing-footer__tools
#open-profile-button:hover {
  background: #333333 !important;
  border-color: #333333 !important;
}

.landing-footer__tools
#open-leaderboard-button {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--line-strong) !important;
}

.landing-footer__tools
#open-leaderboard-button:hover {
  background: rgba(0, 0, 0, 0.045) !important;
}

html[data-theme="dark"]
.landing-footer__tools
#open-profile-button {
  color: #151515 !important;
  background: #f1f1ec !important;
  border-color: #f1f1ec !important;
}

html[data-theme="dark"]
.landing-footer__tools
#open-leaderboard-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.landing-footer__version {
  justify-self: end;

  color: var(--text-dim);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* footer 本身也保持纯白 */
html[data-theme="light"]
.landing-footer {
  background: #ffffff !important;
}

/* ---------- 单人 / 多人顶部设置也统一成图标 ---------- */

.single-page
.icon-settings-button,
.multiplayer-page
.icon-settings-button {
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

/* ---------- 窄屏 ---------- */

@media (max-width: 760px) {
  .landing-footer__inner {
    grid-template-columns: 1fr auto;
  }

  .landing-footer__disclaimer {
    grid-column: 1;
    grid-row: 2;
  }

  .landing-footer__tools {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .landing-footer__tools button {
    flex: 1;
  }

  .landing-footer__version {
    grid-column: 2;
    grid-row: 2;
  }

  .landing-header-account
  #open-login-button,
  .landing-header-account
  #open-register-button {
    padding: 0 12px;
  }
}


/* =========================================================
   V2.7 - 设置高对比 + footer 三入口 + 更新公告
   ========================================================= */

/* ---------- 浅色设置：当前选项必须明显 ---------- */

/*
  旧版浅色通用按钮样式会在后面把 is-active 的颜色覆盖掉。
  这里用更明确的选择器重新覆盖，主题和语言都生效。
*/
html[data-theme="light"]
.settings-theme-options
button.is-active,
html[data-theme="light"]
.settings-theme-options
button[aria-pressed="true"] {
  color: #ffffff !important;
  background: #171717 !important;
  border-color: #171717 !important;
  box-shadow:
    0 0 0 2px
    rgba(23, 23, 23, 0.12)
    !important;
  font-weight: 900 !important;
}

html[data-theme="light"]
.settings-theme-options
button:not(.is-active):not([aria-pressed="true"]) {
  color: #555d57 !important;
  background: #ffffff !important;
  border-color: #cfcfcf !important;
}

html[data-theme="light"]
.settings-theme-options
button:not(.is-active):not([aria-pressed="true"]):hover {
  color: #171717 !important;
  background: #f4f4f4 !important;
  border-color: #9d9d9d !important;
}

/* 深色继续保持明显选中状态，同时和浅色逻辑一致 */
html[data-theme="dark"]
.settings-theme-options
button.is-active,
html[data-theme="dark"]
.settings-theme-options
button[aria-pressed="true"] {
  font-weight: 900;
}

/* ---------- Footer 三个入口统一高对比 ---------- */

.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
) {
  min-height: 38px;
  padding: 0 18px;

  color: #ffffff !important;
  background: #171717 !important;
  border: 1px solid #171717 !important;
  border-radius: 8px;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;

  box-shadow:
    0 4px 13px
    rgba(0, 0, 0, 0.08);
}

.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
):hover {
  color: #ffffff !important;
  background: #333333 !important;
  border-color: #333333 !important;

  transform: translateY(-1px);
}

html[data-theme="dark"]
.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
) {
  color: #151515 !important;
  background: #f1f1ec !important;
  border-color: #f1f1ec !important;
}

html[data-theme="dark"]
.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
):hover {
  color: #151515 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ---------- 更新公告弹窗 ---------- */

.updates-modal {
  position: fixed;
  z-index: 1500;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 18px;

  background: rgba(12, 15, 13, 0.42);
  backdrop-filter: blur(7px);
}

.updates-modal[hidden] {
  display: none !important;
}

.updates-modal__card {
  position: relative;

  width: min(600px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 36px));

  box-sizing: border-box;
  padding: 28px;

  overflow-y: auto;

  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;

  box-shadow:
    0 26px 80px
    rgba(0, 0, 0, 0.24);
}

.updates-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;

  width: 34px;
  height: 34px;

  color: var(--text-dim);
  background: transparent;
  border: 0;

  font-size: 23px;
  cursor: pointer;
}

.updates-modal__eyebrow {
  color: var(--text-dim);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.updates-modal h2 {
  margin: 4px 0 22px;
  font-size: 24px;
}

.updates-list {
  display: grid;
  gap: 12px;
}

.update-entry {
  padding: 15px 16px;

  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.update-entry__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.update-entry__head strong {
  min-width: 46px;
  color: var(--text);
  font-size: 13px;
}

.update-entry__head span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.update-entry ul {
  margin: 10px 0 0;
  padding-left: 19px;

  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.75;
}

/* 浅色更新弹窗也纯净一点 */
html[data-theme="light"]
.updates-modal__card {
  background: #ffffff;
  border-color: #d2d2d2;
}

html[data-theme="light"]
.update-entry {
  background: #f7f7f7;
  border-color: #e2e2e2;
}

@media (max-width: 760px) {
  .landing-footer__tools {
    gap: 7px;
  }

  .landing-footer__tools
  :is(
    #open-profile-button,
    #open-leaderboard-button,
    #open-updates-button
  ) {
    padding: 0 10px;
    font-size: 10px;
  }

  .updates-modal__card {
    padding: 22px 18px;
  }
}


/* =========================================================
   V2.8 - 弗一把式主页布局 + 载具查询
   ========================================================= */

/* ---------- 首页：大 Hero + 三张功能卡 ---------- */

.landing-home-page > main {
  display: block;
  min-height: 0;
}

.reference-home-layout {
  width: min(1320px, calc(100% - 42px));
  height: 100%;
  min-height: 0;
  margin: 0 auto;

  display: grid;
  grid-template-rows:
    minmax(230px, 0.95fr)
    minmax(180px, 0.75fr);
  gap: 22px;

  box-sizing: border-box;
  padding: 16px 0 18px;
}

.reference-hero {
  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 247, 241, 0.96)
    );

  box-shadow:
    0 8px 30px
    rgba(30, 35, 31, 0.055);

  clip-path:
    polygon(
      0 0,
      calc(100% - 34px) 0,
      100% 34px,
      100% 100%,
      34px 100%,
      0 calc(100% - 34px)
    );
}

.reference-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      125deg,
      rgba(78, 91, 80, 0.035) 0,
      rgba(78, 91, 80, 0.035) 1px,
      transparent 1px,
      transparent 36px
    );

  pointer-events: none;
}

.reference-hero::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: 11%;

  width: 230px;
  height: 9px;

  background: #bfe843;
  opacity: 0.76;
}

.reference-hero__inner {
  position: relative;
  z-index: 1;

  width: min(620px, calc(100% - 40px));
  text-align: center;
}

.reference-hero__kicker {
  display: inline-block;
  padding-left: 12px;

  border-left: 4px solid #b8e238;

  color: #566242;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.22em;
}

.reference-hero h1 {
  margin: 14px 0 0;

  color: #181418;
  font-size: clamp(58px, 7.2vw, 100px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: -0.08em;

  text-shadow:
    6px 6px 0
    rgba(187, 232, 55, 0.82);
}

.reference-hero__subtitle {
  display: block;
  margin-top: 12px;

  color: #504a50;
  font-size: 16px;
  font-weight: 850;
}

.reference-hero p {
  margin: 8px 0 0;

  color: #888288;
  font-size: 11px;
}

.reference-mode-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.reference-mode-card {
  --card-accent: #72cf8c;
  --card-soft: #edf9f0;

  position: relative;
  overflow: hidden;

  min-height: 0;
  padding: 22px;

  display: flex;
  flex-direction: column;

  color: #1d1b1e;
  text-decoration: none;

  background: #ffffff;
  border: 1px solid #dedede;
  border-top: 4px solid var(--card-accent);

  box-shadow:
    0 7px 24px
    rgba(20, 20, 20, 0.05);

  clip-path:
    polygon(
      0 0,
      calc(100% - 24px) 0,
      100% 24px,
      100% 100%,
      24px 100%,
      0 calc(100% - 24px)
    );

  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.reference-mode-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px
    rgba(20, 20, 20, 0.1);
}

.reference-mode-card--orange {
  --card-accent: #e6a94e;
  --card-soft: #fff7e9;
}

.reference-mode-card--blue {
  --card-accent: #79aaf1;
  --card-soft: #edf4ff;
}

.reference-mode-card__icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  color: color-mix(
    in srgb,
    var(--card-accent) 78%,
    #222
  );

  background: var(--card-soft);
  border: 1px solid
    color-mix(
      in srgb,
      var(--card-accent) 48%,
      white
    );

  border-radius: 3px;
}

.reference-mode-card__icon svg {
  width: 27px;
  height: 27px;
}

.reference-mode-card__code {
  margin-top: 16px;

  color: #8a8589;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.reference-mode-card > strong {
  margin-top: 6px;

  color: #1b181b;
  font-size: 25px;
  font-weight: 900;
}

.reference-mode-card > p {
  margin: 7px 0 16px;

  color: #756f75;
  font-size: 11px;
  line-height: 1.55;
}

.reference-mode-card__footer {
  margin-top: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #8b858b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.reference-mode-card__arrow {
  color: var(--card-accent);
  font-size: 21px;
  line-height: 1;
}

/* 深色主题也保留这种布局，只换成暗色卡面 */
html[data-theme="dark"]
.reference-hero {
  background:
    linear-gradient(
      115deg,
      rgba(18, 23, 19, 0.98),
      rgba(10, 14, 11, 0.98)
    );
  border-color: var(--line);
}

html[data-theme="dark"]
.reference-hero::before {
  background:
    repeating-linear-gradient(
      125deg,
      rgba(210, 225, 212, 0.025) 0,
      rgba(210, 225, 212, 0.025) 1px,
      transparent 1px,
      transparent 36px
    );
}

html[data-theme="dark"]
.reference-hero h1 {
  color: #edf1ec;
  text-shadow:
    6px 6px 0
    rgba(129, 168, 67, 0.6);
}

html[data-theme="dark"]
.reference-hero__subtitle {
  color: #cbd4cb;
}

html[data-theme="dark"]
.reference-hero p {
  color: #79887b;
}

html[data-theme="dark"]
.reference-hero__kicker {
  color: #9bab8f;
}

html[data-theme="dark"]
.reference-mode-card {
  color: #e8eee7;
  background: #101611;
  border-color: #283129;
}

html[data-theme="dark"]
.reference-mode-card__icon {
  background:
    color-mix(
      in srgb,
      var(--card-soft) 12%,
      #111
    );
}

html[data-theme="dark"]
.reference-mode-card > strong {
  color: #edf1ec;
}

html[data-theme="dark"]
.reference-mode-card > p,
html[data-theme="dark"]
.reference-mode-card__code,
html[data-theme="dark"]
.reference-mode-card__footer {
  color: #829084;
}

/* 低高度桌面进一步压缩 */
@media
  (min-width: 761px)
  and (max-height: 820px) {

  .reference-home-layout {
    grid-template-rows:
      minmax(200px, 0.9fr)
      minmax(160px, 0.72fr);
    gap: 14px;
    padding: 10px 0 12px;
  }

  .reference-hero h1 {
    font-size: clamp(50px, 6.5vw, 76px);
  }

  .reference-hero__subtitle {
    margin-top: 8px;
  }

  .reference-mode-card {
    padding: 16px 18px;
  }

  .reference-mode-card__icon {
    width: 44px;
    height: 44px;
  }

  .reference-mode-card__icon svg {
    width: 23px;
    height: 23px;
  }

  .reference-mode-card__code {
    margin-top: 10px;
  }

  .reference-mode-card > strong {
    font-size: 21px;
  }

  .reference-mode-card > p {
    margin: 4px 0 10px;
  }
}

/* ---------- 载具查询页 ---------- */

.vehicle-lookup-page {
  min-height: 100vh;
  min-height: 100dvh;
}

.vehicle-lookup-main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 60px;
}

.vehicle-lookup-hero {
  width: min(780px, 100%);
  margin: 0 auto;
  text-align: center;
}

.vehicle-lookup-hero > small {
  color: var(--text-dim);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.vehicle-lookup-hero h1 {
  margin: 8px 0 4px;

  color: var(--text);
  font-size: clamp(38px, 5vw, 58px);
}

.vehicle-lookup-hero > p {
  margin: 0;

  color: var(--text-dim);
  font-size: 11px;
}

.vehicle-lookup-search {
  position: relative;

  width: min(680px, 100%);
  margin: 24px auto 0;
}

.vehicle-lookup-search__box {
  display: grid;
  grid-template-columns:
    24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;

  min-height: 54px;
  padding: 6px 7px 6px 15px;

  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.07);
}

.vehicle-lookup-search__box > svg {
  width: 22px;
  height: 22px;

  color: var(--text-dim);
}

.vehicle-lookup-search__box input {
  min-width: 0;
  height: 42px;

  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  outline: 0;

  font-family: inherit;
  font-size: 13px;
}

.vehicle-lookup-search__box button {
  height: 42px;
  padding: 0 22px;

  color: #ffffff;
  background: #171717;
  border: 1px solid #171717;
  border-radius: 7px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

html[data-theme="dark"]
.vehicle-lookup-search__box button {
  color: #171717;
  background: #f1f1ec;
  border-color: #f1f1ec;
}

.vehicle-lookup-suggestions {
  position: absolute;
  z-index: 20;

  top: calc(100% - 20px);
  left: 0;
  right: 0;

  margin: 0;
  padding: 6px;

  list-style: none;

  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, 0.14);
}

.vehicle-lookup-suggestions[hidden] {
  display: none;
}

.vehicle-lookup-suggestions li {
  padding: 9px 10px;

  display: grid;
  gap: 3px;

  text-align: left;
  border-radius: 5px;

  cursor: pointer;
}

.vehicle-lookup-suggestions li:hover,
.vehicle-lookup-suggestions
li[aria-selected="true"] {
  background: var(--panel-soft);
}

.vehicle-lookup-suggestions strong {
  color: var(--text);
  font-size: 11px;
}

.vehicle-lookup-suggestions span {
  color: var(--text-dim);
  font-size: 9px;
}

.vehicle-lookup-message {
  min-height: 17px;
  margin: 9px 0 0;

  color: var(--text-dim);
  font-size: 10px;
}

.vehicle-lookup-message[data-type="error"],
.vehicle-lookup-message[data-type="warning"] {
  color: #ad5e50;
}

.vehicle-lookup-message[data-type="success"] {
  color: #5f8c69;
}

.vehicle-lookup-result {
  width: min(960px, 100%);
  margin: 34px auto 0;
  padding: 24px;

  box-sizing: border-box;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;

  box-shadow:
    0 14px 45px
    rgba(0, 0, 0, 0.07);
}

.vehicle-lookup-result[hidden] {
  display: none;
}

.vehicle-lookup-result__head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;

  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.vehicle-lookup-result__head small {
  color: var(--text-dim);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.vehicle-lookup-result__head h2 {
  margin: 5px 0 4px;

  color: var(--text);
  font-size: 29px;
}

.vehicle-lookup-result__head p {
  margin: 0;

  color: var(--text-dim);
  font-size: 10px;
}

.vehicle-lookup-id {
  max-width: 320px;
  padding: 6px 8px;

  overflow: hidden;

  color: var(--text-dim);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-data-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 9px;

  margin-top: 18px;
}

.vehicle-data-item {
  min-width: 0;
  padding: 12px;

  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.vehicle-data-item span {
  display: block;

  color: var(--text-dim);
  font-size: 9px;
}

.vehicle-data-item strong {
  display: block;
  margin-top: 5px;

  overflow-wrap: anywhere;

  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.vehicle-data-item sup {
  margin-left: 3px;
  color: #b17929;
}

.vehicle-lookup-extra {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 9px;

  margin-top: 9px;
}

.vehicle-lookup-extra > div {
  padding: 12px;

  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.vehicle-lookup-extra span {
  display: block;

  color: var(--text-dim);
  font-size: 9px;
}

.vehicle-lookup-extra strong {
  display: block;
  margin-top: 5px;

  overflow-wrap: anywhere;

  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}

html[data-theme="light"]
.vehicle-lookup-page {
  background: #ffffff !important;
}

html[data-theme="light"]
.vehicle-lookup-page::before,
html[data-theme="light"]
.vehicle-lookup-page::after,
html[data-theme="light"]
.vehicle-lookup-page
.page-noise {
  display: none !important;
}

html[data-theme="light"]
.vehicle-lookup-result,
html[data-theme="light"]
.vehicle-lookup-search__box,
html[data-theme="light"]
.vehicle-lookup-suggestions {
  background: #ffffff;
}

html[data-theme="light"]
.vehicle-data-item,
html[data-theme="light"]
.vehicle-lookup-extra > div {
  background: #f7f7f7;
}

@media (max-width: 900px) {
  .reference-mode-grid {
    grid-template-columns: 1fr;
  }

  .reference-home-layout {
    height: auto;
    grid-template-rows: auto auto;
  }

  .landing-home-page {
    overflow-y: auto !important;
  }

  .vehicle-data-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .reference-home-layout {
    width: calc(100% - 18px);
  }

  .reference-hero {
    min-height: 250px;
  }

  .reference-hero h1 {
    font-size: 54px;
  }

  .vehicle-lookup-main {
    width: calc(100% - 18px);
    padding-top: 24px;
  }

  .vehicle-lookup-search__box {
    grid-template-columns:
      22px minmax(0, 1fr);
  }

  .vehicle-lookup-search__box button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .vehicle-lookup-result {
    padding: 17px;
  }

  .vehicle-lookup-result__head {
    flex-direction: column;
  }

  .vehicle-data-grid,
  .vehicle-lookup-extra {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V2.9 - 载具中英文名 / Wiki / 弗一把式底栏
   ========================================================= */

/* ---------- 首页底栏功能按钮：截图式横向切角 ---------- */

.landing-footer__tools {
  gap: 8px;
  align-items: center;
}

.landing-footer__tools
:is(
  button,
  .landing-tool-link
) {
  min-height: 40px;
  padding: 0 16px !important;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 0 !important;
  border-radius: 0 !important;

  text-decoration: none;

  clip-path:
    polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );

  transition:
    transform 120ms ease,
    filter 120ms ease;
}

/* 用户之前指定：数据 / 排行榜 / 更新公告同一高对比颜色 */
.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
) {
  color: #16200e !important;
  background: #c7ec43 !important;
  box-shadow: none !important;
}

.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
):hover {
  color: #16200e !important;
  background: #d5f46a !important;
  transform: translateY(-2px);
  filter: none;
}

/* B站单独使用识别度更高的蓝色 */
.landing-footer__tools
#bilibili-home-link {
  color: #ffffff !important;
  background: #42a8df !important;
}

.landing-footer__tools
#bilibili-home-link:hover {
  color: #ffffff !important;
  background: #58b5e5 !important;
  transform: translateY(-2px);
}

html[data-theme="dark"]
.landing-footer__tools
:is(
  #open-profile-button,
  #open-leaderboard-button,
  #open-updates-button
) {
  color: #14200d !important;
  background: #c7ec43 !important;
}

html[data-theme="dark"]
.landing-footer__tools
#bilibili-home-link {
  color: #ffffff !important;
  background: #42a8df !important;
}

.landing-tool-icon {
  width: 18px;
  height: 18px;

  display: inline-grid;
  place-items: center;

  flex: 0 0 auto;
}

.landing-tool-icon svg {
  width: 18px;
  height: 18px;
}

.landing-tool-label {
  white-space: nowrap;
}

/* ---------- 查载具：Wiki 与中英文名 ---------- */

.vehicle-lookup-result__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;

  min-width: min(320px, 38%);
}

.vehicle-wiki-link {
  min-height: 36px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #ffffff;
  background: #171717;
  border: 1px solid #171717;
  border-radius: 7px;

  text-decoration: none;
  font-size: 10px;
  font-weight: 850;

  transition:
    transform 120ms ease,
    background 120ms ease;
}

.vehicle-wiki-link[hidden] {
  display: none !important;
}

.vehicle-wiki-link:hover {
  background: #343434;
  transform: translateY(-1px);
}

.vehicle-wiki-link svg {
  width: 17px;
  height: 17px;
}

html[data-theme="dark"]
.vehicle-wiki-link {
  color: #171717;
  background: #f1f1ec;
  border-color: #f1f1ec;
}

html[data-theme="dark"]
.vehicle-wiki-link:hover {
  background: #ffffff;
}

.vehicle-lookup-extra {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.vehicle-lookup-extra strong {
  font-size: 12px;
}

@media (max-width: 900px) {
  .landing-footer__tools {
    flex-wrap: wrap;
    justify-content: center;
  }

  .vehicle-lookup-result__actions {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }

  .vehicle-lookup-id {
    max-width: 100%;
  }

  .vehicle-lookup-extra {
    grid-template-columns:
      1fr 1fr;
  }
}

@media (max-width: 560px) {
  .landing-footer__tools
  :is(
    button,
    .landing-tool-link
  ) {
    min-height: 38px;
    padding: 0 10px !important;
  }

  .vehicle-lookup-extra {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V2.10 - 浅色模式对比度 / 情报色 / 图标修复
   ========================================================= */

/* A. 快速匹配 BO3 */
html[data-theme="light"] .room-radio {
  color: #222924 !important;
  background: #ffffff !important;
  border-color: #c9d0ca !important;
}

html[data-theme="light"] .room-radio span {
  color: #222924 !important;
}

html[data-theme="light"] .room-radio small {
  color: #667068 !important;
}

html[data-theme="light"] .room-radio input[type="radio"] {
  accent-color: #2867d8;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-locked-choice {
  opacity: 1 !important;
  background:
    linear-gradient(
      135deg,
      #f7fbe9,
      #edf5d4
    ) !important;
  border-color: #8da73d !important;
  box-shadow:
    inset 4px 0 0 #a8ca38;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-locked-choice span {
  color: #172016 !important;
  font-weight: 850;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-locked-choice small {
  color: #4e6224 !important;
  font-weight: 750;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-disabled-choice {
  opacity: 0.58 !important;
  background: #f3f4f3 !important;
  border-color: #d9ddda !important;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-disabled-choice span {
  color: #626963 !important;
}

html[data-theme="light"]
.matchmaking-panel
.room-radio.is-disabled-choice small {
  color: #858b86 !important;
}

/* B. 浅色情报状态色 */
html[data-theme="light"] .comparison-table td.exact,
html[data-theme="light"] .comparison-table td.correct,
html[data-theme="light"] .comparison-table td.is-exact,
html[data-theme="light"] .comparison-table td.result-exact {
  color: #ffffff !important;
  background:
    linear-gradient(
      145deg,
      #4f9c64,
      #34784a
    ) !important;
  border-color: #2d693e !important;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.06),
    0 3px 10px rgba(45,105,62,0.18)
    !important;
}

html[data-theme="light"] .comparison-table td.close,
html[data-theme="light"] .comparison-table td.near,
html[data-theme="light"] .comparison-table td.is-close,
html[data-theme="light"] .comparison-table td.result-close {
  color: #2b1b05 !important;
  background:
    linear-gradient(
      145deg,
      #efbd66,
      #d99a38
    ) !important;
  border-color: #b9781e !important;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.13),
    0 3px 10px rgba(185,120,30,0.15)
    !important;
}

html[data-theme="light"] .comparison-table td.wrong,
html[data-theme="light"] .comparison-table td.incorrect,
html[data-theme="light"] .comparison-table td.is-wrong,
html[data-theme="light"] .comparison-table td.result-wrong {
  color: #ffffff !important;
  background:
    linear-gradient(
      145deg,
      #776d82,
      #5d5567
    ) !important;
  border-color: #50485a !important;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.05),
    0 3px 10px rgba(80,72,90,0.16)
    !important;
}

/* 覆盖浅色偶数行的 !important 斑马纹 */
html[data-theme="light"]
.comparison-table tr:nth-child(even)
td:is(.exact,.correct,.is-exact,.result-exact) {
  background:
    linear-gradient(
      145deg,
      #4f9c64,
      #34784a
    ) !important;
}

html[data-theme="light"]
.comparison-table tr:nth-child(even)
td:is(.close,.near,.is-close,.result-close) {
  background:
    linear-gradient(
      145deg,
      #efbd66,
      #d99a38
    ) !important;
}

html[data-theme="light"]
.comparison-table tr:nth-child(even)
td:is(.wrong,.incorrect,.is-wrong,.result-wrong) {
  background:
    linear-gradient(
      145deg,
      #776d82,
      #5d5567
    ) !important;
}

html[data-theme="light"]
.comparison-table
td:is(
  .exact,.correct,.is-exact,.result-exact,
  .close,.near,.is-close,.result-close,
  .wrong,.incorrect,.is-wrong,.result-wrong
)
.arrow {
  color: currentColor !important;
}

html[data-theme="light"]
.comparison-table td.unknown {
  color: #5f6962 !important;
  background: #eceeec !important;
  border-color: #ced3cf !important;
}

/* C. 特殊载具来源图标：白图在白底自动转深 */
html[data-theme="light"] .vehicle-origin-icon {
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
}

/* 绿色 / 紫色结果格恢复白图标 */
html[data-theme="light"]
.comparison-table
td:is(
  .exact,.correct,.is-exact,.result-exact,
  .wrong,.incorrect,.is-wrong,.result-wrong
)
.vehicle-origin-icon {
  filter: none !important;
  opacity: 1;
}

/* 黄色 close 格保持深图标 */
html[data-theme="light"]
.comparison-table
td:is(.close,.near,.is-close,.result-close)
.vehicle-origin-icon {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.78;
}

/* D. footer span 的旧全局 accent 规则不能污染按钮内部 */
.landing-footer__tools
:is(.landing-tool-icon,.landing-tool-label) {
  color: inherit !important;
}

.landing-footer__tools
.landing-tool-icon svg {
  color: inherit !important;
  stroke: currentColor;
}

.landing-footer__tools
#bilibili-home-link,
.landing-footer__tools
#bilibili-home-link:visited,
.landing-footer__tools
#bilibili-home-link:hover,
.landing-footer__tools
#bilibili-home-link:active {
  color: #ffffff !important;
}

.landing-footer__tools
#bilibili-home-link
:is(.landing-tool-icon,.landing-tool-label) {
  color: #ffffff !important;
}

/* E. currentColor SVG 浅色模式统一保持清晰 */
html[data-theme="light"]
:is(
  .icon-settings-button,
  .reference-mode-card__icon,
  .vehicle-wiki-link,
  .landing-footer__tools
) svg {
  opacity: 1;
}

html[data-theme="light"]
.icon-settings-button {
  color: #252b27 !important;
}

/* F. 浅色图例同步 */
html[data-theme="light"] .legend__swatch--exact {
  background: #3d8753 !important;
  border-color: #2d693e !important;
}

html[data-theme="light"] .legend__swatch--close {
  background: #e1a64a !important;
  border-color: #b9781e !important;
}

html[data-theme="light"] .legend__swatch--wrong {
  background: #665d70 !important;
  border-color: #50485a !important;
}


/* =========================================================
   V2.11 - 匹配雷达联系人 / MATCH FOUND 过场
   ========================================================= */

/* 搜索阶段：雷达上没有任何联系人 */
.matchmaking-radar__dot {
  width: 32px !important;
  height: 32px !important;

  display: grid;
  place-items: center;

  color: #d9f4d0;
  background:
    rgba(16, 27, 18, 0.92)
    !important;

  border:
    1px solid
    rgba(187, 225, 177, 0.68);

  box-sizing: border-box;

  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(0.2);

  box-shadow: none !important;
  animation: none !important;

  transition:
    opacity 180ms ease,
    transform 240ms
      cubic-bezier(.2,.9,.25,1.25);

  pointer-events: none;
}

.matchmaking-radar__dot svg {
  width: 19px;
  height: 19px;
}

/* 扫到人：联系人突然锁定并脉冲 */
.matchmaking-radar.is-found
.matchmaking-radar__dot {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);

  box-shadow:
    0 0 0 4px
      rgba(184, 226, 169, 0.08),
    0 0 24px
      rgba(184, 226, 169, 0.7)
    !important;

  animation:
    matchmakingContactPulse
    520ms ease-out 2 !important;
}

.matchmaking-radar.is-found
.matchmaking-radar__dot::after {
  content: "";
  position: absolute;
  inset: -9px;

  border:
    1px solid
    rgba(184, 226, 169, 0.66);

  border-radius: 50%;

  animation:
    matchmakingContactPing
    760ms ease-out 2;
}

/* 匹配成功后，扫描线快速锁向联系人 */
.matchmaking-radar.is-found
.matchmaking-radar__sweep {
  animation:
    matchmakingSweepLock
    480ms ease-out forwards
    !important;
}

/* 雷达整体在成功的一瞬间亮一下 */
.matchmaking-radar.is-found {
  border-color:
    rgba(184, 226, 169, 0.78);

  box-shadow:
    0 0 0 3px
      rgba(184, 226, 169, 0.06),
    0 0 36px
      rgba(118, 172, 103, 0.16);
}

/* 匹配成功提示 */
.matchmaking-found-banner {
  min-height: 54px;
  margin:
    -4px auto 12px;

  display: grid;
  place-items: center;
  align-content: center;

  color: #dcebd7;
}

.matchmaking-found-banner[hidden] {
  display: none !important;
}

.matchmaking-found-banner small {
  color: #8ba785;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
}

.matchmaking-found-banner strong {
  margin-top: 2px;

  color: #dff4d8;
  font-size: 18px;
}

.matchmaking-found-banner span {
  margin-top: 2px;

  color: #9eb69a;
  font-size: 10px;
}

/* 搜索 -> 游戏的最后一段过场 */
.matchmaking-search-shell {
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    filter 320ms ease;
}

.matchmaking-search-screen.is-match-found
.matchmaking-search-shell {
  transform: scale(1.008);
}

.matchmaking-search-screen.is-transitioning
.matchmaking-search-shell {
  opacity: 0;

  transform:
    translateY(-10px)
    scale(1.035);

  filter: blur(5px);
}

/* 浅色模式联系人 */
html[data-theme="light"]
.matchmaking-radar__dot {
  color: #244126;

  background:
    #f6fff1
    !important;

  border-color:
    #6f9c67;
}

html[data-theme="light"]
.matchmaking-radar.is-found
.matchmaking-radar__dot {
  box-shadow:
    0 0 0 4px
      rgba(94, 137, 84, 0.1),
    0 0 22px
      rgba(94, 137, 84, 0.36)
    !important;
}

html[data-theme="light"]
.matchmaking-found-banner {
  color: #273126;
}

html[data-theme="light"]
.matchmaking-found-banner small {
  color: #6c7e67;
}

html[data-theme="light"]
.matchmaking-found-banner strong {
  color: #253824;
}

html[data-theme="light"]
.matchmaking-found-banner span {
  color: #63715f;
}

@keyframes matchmakingContactPulse {
  0% {
    transform:
      translate(-50%, -50%)
      scale(.3);
  }

  58% {
    transform:
      translate(-50%, -50%)
      scale(1.18);
  }

  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }
}

@keyframes matchmakingContactPing {
  from {
    opacity: .9;
    transform: scale(.55);
  }

  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes matchmakingSweepLock {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(315deg);
  }
}


/* =========================================================
   V2.12 - 浅色搜索建议高对比
   ========================================================= */

/* 单人 / 多人搜索建议：hover 和键盘选中统一深底浅字 */
html[data-theme="light"]
.suggestions
li:hover,
html[data-theme="light"]
.suggestions
li[aria-selected="true"],
html[data-theme="light"]
.suggestions
li.is-active {
  color: #ffffff !important;
  background: #252b27 !important;
  border-color: #252b27 !important;
}

html[data-theme="light"]
.suggestions
li:hover strong,
html[data-theme="light"]
.suggestions
li[aria-selected="true"] strong,
html[data-theme="light"]
.suggestions
li.is-active strong,
html[data-theme="light"]
.suggestions
li:hover
.vehicle-display-name__text,
html[data-theme="light"]
.suggestions
li[aria-selected="true"]
.vehicle-display-name__text,
html[data-theme="light"]
.suggestions
li.is-active
.vehicle-display-name__text {
  color: #ffffff !important;
}

html[data-theme="light"]
.suggestions
li:hover > span,
html[data-theme="light"]
.suggestions
li[aria-selected="true"] > span,
html[data-theme="light"]
.suggestions
li.is-active > span {
  color: #d8ded9 !important;
}

/* 白色来源图标在深色 hover 卡片中恢复白色 */
html[data-theme="light"]
.suggestions
li:hover
.vehicle-origin-icon,
html[data-theme="light"]
.suggestions
li[aria-selected="true"]
.vehicle-origin-icon,
html[data-theme="light"]
.suggestions
li.is-active
.vehicle-origin-icon {
  filter: none !important;
  opacity: 1 !important;
}

/* 查载具搜索建议也保持相同逻辑 */
html[data-theme="light"]
.vehicle-lookup-suggestions
li:hover,
html[data-theme="light"]
.vehicle-lookup-suggestions
li[aria-selected="true"] {
  background: #252b27 !important;
}

html[data-theme="light"]
.vehicle-lookup-suggestions
li:hover strong,
html[data-theme="light"]
.vehicle-lookup-suggestions
li[aria-selected="true"] strong,
html[data-theme="light"]
.vehicle-lookup-suggestions
li:hover
.vehicle-display-name__text,
html[data-theme="light"]
.vehicle-lookup-suggestions
li[aria-selected="true"]
.vehicle-display-name__text {
  color: #ffffff !important;
}

html[data-theme="light"]
.vehicle-lookup-suggestions
li:hover > span,
html[data-theme="light"]
.vehicle-lookup-suggestions
li[aria-selected="true"] > span {
  color: #d8ded9 !important;
}

html[data-theme="light"]
.vehicle-lookup-suggestions
li:hover
.vehicle-origin-icon,
html[data-theme="light"]
.vehicle-lookup-suggestions
li[aria-selected="true"]
.vehicle-origin-icon {
  filter: none !important;
  opacity: 1 !important;
}


/* =========================================================
   V2.14 - BO3 / BO5 自动下一局过场
   ========================================================= */

.inter-round-transition {
  margin: 0 22px 20px;
  padding: 15px 16px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.inter-round-transition[hidden] {
  display: none !important;
}

.inter-round-transition__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.inter-round-transition__top span {
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
}

.inter-round-transition__top strong {
  min-width: 34px;
  color: var(--text);
  font-size: 21px;
  font-weight: 950;
  text-align: right;
}

.inter-round-transition__track {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background:
    color-mix(
      in srgb,
      var(--text) 10%,
      transparent
    );
  border-radius: 99px;
}

.inter-round-transition__track i {
  display: block;
  width:
    calc(
      var(--inter-round-progress, 0)
      * 100%
    );
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 100ms linear;
}

.inter-round-transition small {
  display: block;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 9px;
}

#online-result-panel.is-inter-round
.end-modal__actions {
  display: none !important;
}

#online-result-panel.is-inter-round
.end-modal__card {
  animation:
    interRoundCardIn
    260ms ease-out both;
}

#online-result-panel.is-inter-round
.result-panel__icon {
  animation:
    interRoundResultPulse
    520ms ease-out both;
}

@keyframes interRoundCardIn {
  from {
    opacity: 0;
    transform:
      translateY(10px)
      scale(.985);
  }
  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes interRoundResultPulse {
  0% {
    transform: scale(.72);
    opacity: .25;
  }
  58% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

html[data-theme="light"]
.inter-round-transition {
  background: #f5f7f4;
  border-color: #d8ddd8;
}

html[data-theme="light"]
.inter-round-transition__track {
  background: #dfe4df;
}

@media (max-width: 560px) {
  .inter-round-transition {
    margin: 0 14px 14px;
    padding: 13px 14px 12px;
  }
}