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

:root {
  --page-bg: linear-gradient(180deg, #040814 0%, #09152d 46%, #13274b 100%);
  --panel-bg: rgba(8, 16, 34, 0.93);
  --panel-border: rgba(120, 194, 255, 0.24);
  --board-bg: #14284c;
  --cell-bg: rgba(184, 220, 255, 0.14);
  --text-main: #eef5ff;
  --text-muted: #d6e6fb;
  --button-main: #8bd2ff;
  --button-main-hover: #66bfff;
  --button-secondary: rgba(10, 18, 36, 0.96);
  --shadow-soft: 0 26px 56px rgba(2, 7, 18, 0.54);
  --shadow-card: 0 14px 30px rgba(3, 9, 24, 0.42);
  --chrome-surface: rgba(7, 14, 28, 0.97);
  --chrome-surface-strong: rgba(8, 15, 30, 0.99);
  --chrome-border: rgba(120, 194, 255, 0.2);
  --chrome-text: #f8fbff;
  --chrome-text-muted: #dbe9ff;
  --chrome-accent: #8bd2ff;
  --chrome-accent-hover: #b4e4ff;
}

body {
  background:
    radial-gradient(circle at 14% 14%, rgba(125, 191, 255, 0.14), transparent 18%),
    radial-gradient(circle at 84% 12%, rgba(196, 151, 255, 0.14), transparent 20%),
    radial-gradient(circle at 76% 72%, rgba(121, 222, 255, 0.1), transparent 18%),
    radial-gradient(circle at 18% 84%, rgba(255, 255, 255, 0.08), transparent 16%),
    var(--page-bg);
  color: var(--text-main);
}

.site-nav,
.seo-content,
.overlay-card,
.score-card {
  background: rgba(8, 16, 34, 0.95);
  border-color: rgba(120, 194, 255, 0.26);
}

.site-nav {
  background: rgba(6, 13, 27, 0.97) !important;
  border-bottom-color: rgba(120, 194, 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, 24, 46, 0.96);
  border-color: rgba(120, 194, 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: #e7f1ff !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: #8bd2ff !important;
}

.site-nav-menu,
.site-nav-mobile,
.site-language-trigger,
.site-language-menu,
.site-nav-mobile-theme-links {
  background: rgba(8, 16, 34, 0.97) !important;
  border-color: rgba(120, 194, 255, 0.18) !important;
}

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

.site-language-option:hover,
.site-language-option:focus-visible {
  background: rgba(23, 38, 71, 0.98) !important;
}

.site-language-option.is-active {
  background: rgba(39, 82, 132, 0.96) !important;
  border-color: rgba(145, 212, 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: #eaf3ff !important;
  border-color: rgba(120, 194, 255, 0.22) !important;
  background: rgba(10, 18, 38, 0.94) !important;
}

.site-nav-toggle-bars span {
  background: #eaf3ff !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, 7, 20, 0.62);
}

.primary,
#overlay-restart-btn {
  color: #071322;
  box-shadow: 0 12px 26px rgba(102, 191, 255, 0.28);
}

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

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

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

.tile.level-missing {
  background: linear-gradient(160deg, #d8eeff, #8bd2ff);
  color: #0a1830;
}