/* ChessApp v2.2: permanent dark theme and high-visibility material lead */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1218;
  --bg-accent: #131c25;
  --surface: rgba(18, 27, 36, .96);
  --surface-strong: #131d27;
  --surface-alt: #182532;
  --surface-soft: #17232d;
  --text: #f2f6f9;
  --muted: #9eb0bc;
  --border: #2b3d4a;
  --primary: #82d964;
  --primary-strong: #68bd4d;
  --primary-soft: rgba(130, 217, 100, .16);
  --board-light: #dcdbbe;
  --board-dark: #6e934f;
  --selected: #f3d752;
  --legal: rgba(139, 224, 102, .46);
  --last: rgba(244, 214, 78, .48);
  --danger: #ff6f78;
  --shadow: 0 24px 56px rgba(0, 0, 0, .42);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, .3);
  --piece-white-fill: #fbfcfe;
  --piece-white-stroke: #87929e;
  --piece-white-eye: #646e78;
  --piece-black-fill: #454b52;
  --piece-black-stroke: #0e1318;
  --piece-black-eye: #f7fafc;
}

html,
body {
  background: #0d1218 !important;
  color: var(--text);
}

body {
  background-image:
    radial-gradient(circle at 45% -10%, rgba(58, 88, 109, .22), transparent 34%),
    linear-gradient(180deg, #101821 0%, #0d1218 100%) !important;
}

.site-header {
  background: rgba(14, 22, 30, .96) !important;
  border-bottom-color: #253542 !important;
}

/* The product now has one permanent theme, so no theme control is shown. */
.theme-toggle {
  display: none !important;
}

.board-panel,
.control-panel,
.moves-card,
.status-card,
.settings-modal {
  background-color: var(--surface) !important;
}

.control-panel,
.moves-card,
.status-card,
.settings-modal,
select,
input,
.button,
.icon-button {
  border-color: var(--border) !important;
}

select,
input,
.button:not(.primary),
.icon-button {
  background: #172532 !important;
  color: var(--text) !important;
}

.status-card {
  background:
    linear-gradient(135deg, rgba(126, 209, 94, .16), rgba(19, 30, 39, .95)) !important;
}

.status-kicker,
.section-heading button {
  color: #91eb6e !important;
}

.player-strip {
  color: var(--text);
}

.player-strip strong {
  color: #ffffff;
}

/* Make the one leading score unmistakable and readable. */
.material-row {
  min-height: 22px !important;
  height: 22px !important;
  overflow: visible !important;
  gap: 6px !important;
}

.captured-pieces {
  min-height: 20px;
}

.advantage-badge {
  min-width: 64px !important;
  height: 24px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  border: 1px solid #d7ffbf !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #a6f47e 0%, #78cf57 100%) !important;
  color: #10210f !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  box-shadow:
    0 0 0 2px rgba(128, 218, 96, .14),
    0 5px 12px rgba(0, 0, 0, .34) !important;
}

.advantage-badge::before {
  content: "LEAD ";
  margin-right: 3px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  opacity: .75;
}

.material-row:has(.advantage-badge) {
  width: fit-content;
  max-width: 100%;
  padding-right: 2px;
}

.player-strip:has(.advantage-badge) .player-details > strong {
  color: #a7f681 !important;
}

.player-strip:has(.advantage-badge) .turn-dot {
  background: #8be268 !important;
  box-shadow: 0 0 0 4px rgba(139, 226, 104, .16) !important;
}

@media (max-width: 799px) {
  .material-row {
    min-height: 21px !important;
    height: 21px !important;
  }

  .advantage-badge {
    min-width: 58px !important;
    height: 22px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }

  .advantage-badge::before {
    font-size: 7px;
  }
}