:root {
  color-scheme: dark;
  --ink: rgba(255, 255, 255, 0.96);
  --muted: rgba(255, 255, 255, 0.66);
  --panel: rgba(0, 0, 0, 0.76);
  --panel-strong: rgba(0, 0, 0, 0.9);
  --line: rgba(255, 255, 255, 0.18);
  --gold: #1713ed;
  --danger: #ffffff;
  --blue: #1713ed;
  --blue-soft: rgba(23, 19, 237, 0.44);
  --shadow: 0 18px 58px rgba(0, 0, 0, 0.48);
  color: var(--ink);
  background: #000000;
}

html,
body,
#app {
  background: #000000 !important;
}

.game-shell {
  background:
    radial-gradient(circle at 54% 46%, rgba(23, 19, 237, 0.18), transparent 42%),
    radial-gradient(circle at 48% 52%, rgba(0, 42, 118, 0.22), transparent 58%),
    linear-gradient(180deg, #000000 0%, #000000 100%) !important;
  color: var(--ink) !important;
}

.viewport {
  background:
    radial-gradient(circle at 52% 45%, rgba(23, 19, 237, 0.1), transparent 38%),
    radial-gradient(circle at 50% 55%, rgba(0, 58, 132, 0.18), transparent 62%),
    #000000 !important;
  box-shadow:
    inset 0 0 76px rgba(23, 19, 237, 0.18),
    inset 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

.viewport canvas {
  filter: saturate(0.86) contrast(1.16) brightness(0.78);
  opacity: 1;
}

.viewport::before {
  background:
    linear-gradient(90deg, rgba(23, 19, 237, 0.05), transparent 18% 84%, rgba(23, 19, 237, 0.05)),
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) !important;
  background-size: auto, 48px 48px, 48px 48px !important;
  mix-blend-mode: screen;
  opacity: 0.32;
}

.viewport::after {
  border: 1px solid rgba(23, 19, 237, 0.56) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 0 30px rgba(23, 19, 237, 0.2),
    0 0 18px rgba(23, 19, 237, 0.14) !important;
}

.hud-bar,
.side-panel,
.tower-deck,
.editor-panel,
.end-dialog,
.customer-controls,
.customer-hud span,
.asset-panel,
.map-start-panel,
.radial-tower-menu::before,
.upgrade-menu,
.toast,
.boss-bar,
.command-card,
.map-select,
.fold-panel,
.editor-section,
.status-text,
.map-card,
.tower-card,
.customer-map-card {
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, rgba(23, 19, 237, 0.16), transparent 62%),
    rgba(0, 0, 0, 0.76) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

.map-start-overlay,
.end-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(23, 19, 237, 0.28), transparent 34%),
    rgba(0, 0, 0, 0.9) !important;
}

.crest {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.9) 46% 54%, transparent 55%),
    radial-gradient(circle at 50% 42%, #ffffff 0 26%, #1713ed 27% 62%, #000000 63%) !important;
}

h1,
h2,
h3,
.stats-strip strong,
.customer-hud b,
.map-start-panel h2,
.customer-map-card strong,
.tower-card strong,
.asset-row strong,
.upgrade-menu strong,
.end-dialog h2 {
  color: var(--ink) !important;
}

.brand-block p,
.stats-strip span,
.tower-card span,
.tower-card em,
.status-text,
.form-grid label,
.fold-panel label,
.small-note,
.editor-head p,
.customer-hud small,
.asset-panel-head span,
.asset-row span,
.bonus-wave-text,
.map-start-panel p,
.customer-map-card span,
.customer-map-card em,
.upgrade-menu span,
.end-dialog p,
.command-kicker,
.section-label span,
.map-card span,
.map-card em {
  color: var(--muted) !important;
}

.map-start-panel .pretitle,
.section-label strong,
.asset-panel-head strong,
.end-badge,
.asset-toggle,
.orientation-hint {
  color: #ffffff !important;
}

.stats-strip div,
.asset-row,
.milestone-card,
.tool-button,
.icon-button,
.tool-grid button,
.fold-panel input,
.fold-panel select,
.form-grid input,
.wide-select,
.advanced-json textarea {
  border-color: var(--line) !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: var(--ink) !important;
}

.cinematic-button,
.primary-button,
.danger-button,
.asset-upgrade-button,
.buy-life-button,
.welcome-language,
.enter-map,
.upgrade-menu button,
.tool-grid button.active,
.map-card.selected,
.customer-map-card.selected,
.cinematic-button.start,
.cinematic-button.pause.is-paused {
  border-color: rgba(23, 19, 237, 0.88) !important;
  background:
    linear-gradient(135deg, rgba(23, 19, 237, 1), rgba(23, 19, 237, 0.52)),
    #000000 !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 0 22px rgba(23, 19, 237, 0.28) !important;
}

.cinematic-button:disabled,
.primary-button:disabled,
.tool-button:disabled,
.asset-upgrade-button:disabled,
.buy-life-button:disabled {
  background: rgba(0, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.asset-panel:not(.expanded),
.asset-panel:not(.expanded).has-upgrade {
  background:
    linear-gradient(135deg, rgba(23, 19, 237, 0.24), transparent 70%),
    rgba(0, 0, 0, 0.66) !important;
  border-color: rgba(23, 19, 237, 0.46) !important;
}

.asset-dot,
.tower-gem,
.radial-tower-button b {
  background: var(--blue) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(23, 19, 237, 0.88) !important;
}

.milestone-card {
  --asset: #1713ed !important;
}

.milestone-card.active,
.asset-row.maxed,
.asset-row.gate,
.asset-row.aux {
  border-color: rgba(23, 19, 237, 0.62) !important;
  background:
    linear-gradient(135deg, rgba(23, 19, 237, 0.24), transparent 68%),
    rgba(0, 0, 0, 0.82) !important;
}

.radial-tower-button {
  border-color: rgba(23, 19, 237, 0.78) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 44%),
    rgba(0, 0, 0, 0.86) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46), 0 0 22px rgba(23, 19, 237, 0.28) !important;
}

.tower-card {
  --accent: #1713ed !important;
}

.tower-card::after {
  box-shadow: inset 0 0 0 0 var(--blue) !important;
}

.tower-card:hover::after,
.tower-card.selected::after {
  box-shadow: inset 0 0 0 3px var(--blue) !important;
}

.life-alarm {
  background:
    radial-gradient(circle at 50% 48%, transparent 40%, rgba(23, 19, 237, 0.42) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 24% 76%, rgba(23, 19, 237, 0.44)) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    inset 0 0 72px rgba(23, 19, 237, 0.62),
    inset 0 0 130px rgba(255, 255, 255, 0.18) !important;
}

.toast.bad {
  background: rgba(23, 19, 237, 0.88) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
}

.boss-bar i {
  background: linear-gradient(90deg, #ffffff, #1713ed) !important;
}

.boss-bar div {
  background: rgba(255, 255, 255, 0.18) !important;
}

.highlight,
.radial-tower-button,
.tower-card,
.customer-map-card,
.map-card,
.cinematic-button {
  text-shadow: none !important;
}

@media (width <= 620px) {
  .customer-controls,
  .asset-panel,
  .asset-panel:not(.expanded) {
    background:
      linear-gradient(135deg, rgba(23, 19, 237, 0.18), transparent 70%),
      rgba(0, 0, 0, 0.7) !important;
  }
}