@import url("../cupcakes/style.css?v=20260615-181704");

:root {
  --page-bg: linear-gradient(180deg, #050816 0%, #0a1030 42%, #151b45 100%);
  --panel-bg: rgba(10, 14, 35, 0.92);
  --panel-border: rgba(90, 226, 255, 0.24);
  --board-bg: #12193c;
  --cell-bg: rgba(121, 221, 255, 0.14);
  --text-main: #edf4ff;
  --text-muted: #d1e1f7;
  --button-main: #67d7ff;
  --button-main-hover: #42c5ff;
  --button-secondary: rgba(9, 14, 34, 0.96);
  --shadow-soft: 0 26px 56px rgba(2, 5, 18, 0.52);
  --shadow-card: 0 14px 32px rgba(2, 6, 20, 0.4);
  --chrome-surface: rgba(7, 12, 28, 0.96);
  --chrome-surface-strong: rgba(8, 12, 26, 0.985);
  --chrome-border: rgba(90, 226, 255, 0.2);
  --chrome-text: #f8fbff;
  --chrome-text-muted: #d6e5ff;
  --chrome-accent: #67d7ff;
  --chrome-accent-hover: #9beaff;
}

body {
  background:
    radial-gradient(circle at 14% 16%, rgba(85, 223, 255, 0.18), transparent 18%),
    radial-gradient(circle at 86% 10%, rgba(132, 104, 255, 0.18), transparent 20%),
    radial-gradient(circle at 78% 74%, rgba(255, 97, 171, 0.14), transparent 18%),
    radial-gradient(circle at 18% 82%, rgba(123, 255, 215, 0.12), transparent 20%),
    var(--page-bg);
  color: var(--text-main);
}

.site-nav,
.seo-content,
.overlay-card,
.score-card {
  background: rgba(9, 14, 34, 0.94);
  border-color: rgba(90, 226, 255, 0.26);
}

.site-nav {
  background: rgba(7, 11, 28, 0.97) !important;
  border-bottom-color: rgba(90, 226, 255, 0.18) !important;
}

.site-nav-inner,
.site-nav-mobile {
  background: transparent;
}

.site-brand,
.site-nav-link,
.theme-card,
.variant-comparison,
.board-frame {
  background: rgba(13, 19, 44, 0.96);
  border-color: rgba(90, 226, 255, 0.22);
}

.site-brand,
.theme-card h3,
.variant-comparison th,
.faq-section h3,
.seo-content h2,
.seo-content h3,
.topbar h1,
.score-card strong,
.overlay-card h2 {
  color: var(--text-main) !important;
}

.subtitle,
.theme-label,
.site-nav-link,
.site-nav-mobile-link,
.site-nav-dropdown > summary,
.site-nav-mobile-group > summary,
.seo-content p,
.faq-section p,
.theme-card p,
.variant-comparison td,
.score-card .label,
.overlay-card p,
.site-language-trigger-meta,
.site-language-option small {
  color: var(--text-muted) !important;
}

.site-nav-link,
.site-nav-mobile-link,
.site-nav-dropdown > summary,
.site-nav-mobile-group > summary,
.site-theme-link,
.site-language-trigger,
.site-language-option,
.site-language-option span {
  color: #e6efff !important;
}

.site-nav-link:hover,
.site-nav-link.is-active,
.site-nav-mobile-link:hover,
.site-nav-mobile-link.is-active,
.site-nav-dropdown > summary:hover,
.site-nav-dropdown > summary.is-active,
.site-nav-mobile-group > summary:hover,
.site-nav-mobile-group > summary.is-active,
.site-theme-link:hover,
.site-theme-link.is-active,
.site-language-trigger:hover,
.site-language-option:hover,
.site-language-option.is-active,
.seo-content a {
  color: #67d7ff !important;
}

.site-nav-menu,
.site-nav-mobile,
.site-language-trigger,
.site-language-menu,
.site-nav-mobile-theme-links {
  background: rgba(9, 14, 34, 0.97) !important;
  border-color: rgba(90, 226, 255, 0.18) !important;
}

.site-language-option {
  background: rgba(14, 20, 47, 0.88) !important;
}

.site-language-option:hover,
.site-language-option:focus-visible {
  background: rgba(24, 36, 72, 0.98) !important;
}

.site-language-option.is-active {
  background: rgba(30, 87, 132, 0.96) !important;
  border-color: rgba(112, 232, 255, 0.32) !important;
}

.site-nav-link::after,
.site-nav-mobile-link::after,
.site-nav-dropdown > summary::after,
.site-theme-link::after {
  background: currentColor !important;
}

.site-nav-toggle,
.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
  color: #e6efff !important;
  border-color: rgba(90, 226, 255, 0.22) !important;
  background: rgba(10, 16, 38, 0.94) !important;
}

.site-nav-toggle-bars span {
  background: #e6efff !important;
}

.theme-card,
.seo-content,
.score-card,
.overlay-card,
.variant-comparison {
  box-shadow: 0 18px 38px rgba(2, 8, 24, 0.34);
}

.theme-card p,
.seo-content p,
.faq-section p,
.variant-comparison td {
  text-shadow: 0 1px 0 rgba(2, 6, 20, 0.22);
}

.overlay {
  background: rgba(2, 6, 20, 0.62);
}

.primary,
#overlay-restart-btn {
  color: #04101f;
  box-shadow: 0 12px 26px rgba(72, 197, 255, 0.28);
}

.secondary,
.back-link {
  color: var(--text-main);
}

.variant-comparison thead {
  background: linear-gradient(180deg, rgba(103, 215, 255, 0.18), rgba(103, 215, 255, 0.08));
}

.variant-comparison tbody tr:hover {
  background: rgba(103, 215, 255, 0.08);
}

.tile.level-missing {
  background: linear-gradient(160deg, #d5ecff, #67d7ff);
  color: #081223;
}