.game-mode-select {
  display: inline-flex;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}

.game-mode-btn {
  padding: 3px 8px 5px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.game-mode-btn.active {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--ink);
  font-weight: 700;
}

.campaign-home[hidden], .campaign-hud[hidden], .campaign-only[hidden] { display: none !important; }

.campaign-home {
  padding-top: 30px;
}

.campaign-home-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 26px;
  padding-bottom: 20px;
  border-bottom: 3px double var(--rule-strong);
}

.campaign-home h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3.3vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

html[lang="zh-CN"] .campaign-home h2 { letter-spacing: 0; }

.campaign-home-copy {
  max-width: 56ch;
  margin: 9px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
}

.campaign-progress-block { min-width: 190px; text-align: right; }
.campaign-progress-value { font-family: var(--serif); font-size: 32px; line-height: 1; }
.campaign-progress-label { margin-top: 5px; color: var(--muted); font: 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.campaign-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.campaign-total-stars { font: 700 13px/1 var(--mono); letter-spacing: .05em; }
.campaign-toolbar-actions { display: flex; align-items: center; gap: 12px; }
.campaign-toolbar-actions .btn { min-height: 36px; padding: 8px 14px; }
.campaign-reset { border: 0; border-bottom: 1px solid var(--rule-strong); color: var(--muted); background: transparent; font-size: 13px; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  margin-top: 22px;
}

.level-card {
  position: relative;
  min-height: 142px;
  padding: 17px 18px 16px;
  border: 0;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  background: rgb(255 255 255 / .12);
  text-align: left;
}

.level-card:hover:not(:disabled) { background: rgb(255 255 255 / .38); }
.level-card.current { box-shadow: inset 0 0 0 3px var(--head); }
.level-card.completed::after {
  position: absolute;
  right: 13px;
  bottom: 12px;
  content: "✓";
  color: var(--overlap);
  font-family: var(--serif);
  font-size: 28px;
}
.level-card:disabled { cursor: not-allowed; opacity: .42; }
.level-number { display: block; color: var(--muted); font: 11px/1 var(--mono); letter-spacing: .1em; }
.level-word { display: block; margin-top: 13px; font: 400 28px/1.1 var(--serif); }
.level-meta { display: block; margin-top: 10px; color: var(--muted); font: 11px/1.4 var(--mono); }
.level-stars { display: block; margin-top: 9px; color: var(--tail); font: 15px/1 var(--mono); letter-spacing: .06em; }

.campaign-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.campaign-hud button {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  background: transparent;
  font-size: 13px;
}

.campaign-level-label { font: 700 12px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.campaign-move-count, .campaign-par-count { color: var(--muted); font: 12px/1.25 var(--mono); white-space: nowrap; }
.campaign-move-count strong { color: var(--ink); font-size: 16px; }

.campaign-result-stars {
  margin: 12px 0 8px;
  color: var(--tail);
  font: 700 32px/1 var(--mono);
  letter-spacing: .08em;
}

.campaign-overlay-copy { color: var(--muted); font-family: var(--serif); line-height: 1.65; }
.campaign-overlay-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

body.campaign-mode .diff-select { display: none; }
body.campaign-mode .mode-description { margin-top: 0; }
body.campaign-playing .solve-section { display: none !important; }

@media (max-width: 800px) {
  .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-home-head { grid-template-columns: 1fr; }
  .campaign-progress-block { min-width: 0; text-align: left; }
  .campaign-hud { grid-template-columns: auto 1fr auto; }
  .campaign-par-count { grid-column: 2 / -1; }
}

@media (max-width: 480px) {
  .campaign-toolbar { align-items: flex-start; flex-direction: column; }
  .campaign-toolbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .campaign-toolbar-actions .btn-primary { width: 100%; }
  .level-grid { grid-template-columns: 1fr; }
  .level-card { min-height: 122px; }
  .campaign-hud { gap: 9px; }
  .campaign-move-count { grid-column: 2 / -1; }
}