/* Final premium visual contract for Blupoli Puzzles.
 * Loaded last so feature CSS can keep layout/behavior while presentation stays coherent.
 */

body.puzzles-app,
body[data-puzzles-app],
.home-page,
.catalogue-page,
.stats-page,
.statistics-page,
.records-page,
.progress-page,
.streaks-page,
.achievements-page {
  background: var(--bg) !important;
}

.home-lobby-intro h1 em,
.home-hero-copy h1 em {
  background: none !important;
  color: var(--product-puzzles) !important;
  -webkit-text-fill-color: currentColor !important;
}

.home-focus-card,
.home-game-card,
.home-category-card,
.home-cpu-strip,
.hero-category-tile,
.category-card,
.catalog-game-card,
.competitive-showcase,
.catalogue-category-panel,
.catalog-category-option,
.catalogue-empty,
.game-hero-panel,
.game-play-card,
.game-guide-card,
.related-game-card,
.game-onboarding,
.onboarding-demo,
.onboarding-engine-stage,
.progress-next-section,
.progress-category-card,
.record-feature,
.streaks-current-card,
.streaks-day-detail,
.statistics-scope,
.statistics-empty,
.stats-insight,
.stats-history-note,
.stats-game-row,
.stats-achievement,
.stats-selection-chips button,
#stats-selection-clear {
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

.home-focus-card,
.home-game-card,
.home-category-card,
.hero-category-tile,
.category-card,
.catalog-game-card,
.catalog-category-option,
.progress-category-card {
  border-color: var(--line) !important;
}

.home-focus-card,
.catalog-game-card,
.category-card,
.home-game-card {
  border-left: 3px solid var(--card-accent, var(--category-accent, var(--focus-accent, var(--product-puzzles)))) !important;
}

.home-focus-card:hover,
.home-game-card:hover,
.home-category-card:hover,
.hero-category-tile:hover,
.category-card:hover,
.catalog-game-card:hover,
.catalog-category-option:hover,
.progress-category-card:hover,
.related-game-card:hover,
.stats-game-row:hover {
  transform: translateY(-1px) !important;
  border-color: var(--card-accent, var(--category-accent, var(--focus-accent, var(--game-accent, var(--product-puzzles))))) !important;
  box-shadow: none !important;
}

.home-search > div,
.catalogue-search,
.stats-search input,
.stats-game-controls select,
.game-select,
.game-action,
.game-board-tool,
.game-segmented,
.favorite-toggle,
.home-intent-button,
.catalogue-mode-switch,
.catalogue-mode-switch button,
.statistics-scope-tabs,
.statistics-periods,
.stats-periods,
.stats-chart-tabs,
.stats-achievement-scopes,
.story-links a {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.home-search > div:focus-within,
.catalogue-search:focus-within,
.stats-search input:focus,
.stats-game-controls select:focus,
.game-select:focus-visible,
.game-action:focus-visible,
.game-board-tool:focus-visible,
.favorite-toggle:focus-visible {
  border-color: var(--brand-aqua) !important;
  box-shadow: none !important;
  outline: 3px solid var(--brand-aqua) !important;
  outline-offset: 2px !important;
}

.home-search button,
.game-action--primary,
.game-board-tool--primary,
.onboarding-actions .button.primary {
  background: var(--product-puzzles) !important;
  border-color: var(--product-puzzles) !important;
  color: var(--brand-cobalt) !important;
  box-shadow: none !important;
}

.favorite-toggle.is-favorite,
.catalogue-mode-switch button.is-active,
.catalog-category-option.is-active,
.stats-periods button[aria-pressed="true"],
.stats-chart-tabs button[aria-pressed="true"],
.stats-achievement-scopes button[aria-pressed="true"],
.statistics-scope-tabs button[aria-pressed="true"],
.statistics-periods button[aria-pressed="true"] {
  background: var(--surface) !important;
  border-color: var(--product-puzzles) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.home-mini-preview,
.game-card-preview,
.game-card-visual,
.home-category-card-symbol,
.category-card-symbol,
.catalog-category-option-symbol,
.game-symbol,
.stats-kpi-icon,
.stats-record-icon,
.stats-achievement-badge,
.stats-history-result,
.streaks-current-icon,
.streaks-run-length,
.statistics-empty-icon,
.progress-category-symbol,
.onboarding-demo-symbol {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.home-mini-preview.preview-connections > span:not(:empty),
.game-card-preview.preview-connections > span:not(:empty) {
  box-shadow: none !important;
}

.game-hero-panel {
  border-color: var(--line) !important;
  border-top: 3px solid var(--game-accent, var(--product-puzzles)) !important;
}

.game-symbol {
  border-color: var(--game-accent, var(--product-puzzles)) !important;
  color: var(--game-accent, var(--product-puzzles)) !important;
}

.game-play-card {
  border-color: var(--line) !important;
}

.game-play-header,
.game-board-actions,
.game-guide-card,
.related-game-card {
  background: var(--surface) !important;
}

.game-action--toggle.is-active,
.game-board-tool--toggle.is-active,
.game-timer[data-state="running"],
.game-timer[data-state="completed"] {
  background: var(--surface) !important;
  border-color: var(--game-accent, var(--product-puzzles)) !important;
  box-shadow: none !important;
}

.game-guide-card ol li::before {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
}

.game-onboarding,
.onboarding-demo,
.onboarding-engine-stage,
html[data-theme="light"] .game-onboarding--interactive,
html[data-theme="light"] .onboarding-demo {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.onboarding-progress span.active,
.game-onboarding--interactive .onboarding-progress span.active,
.onboarding-cell.is-path::after {
  background: var(--game-accent, var(--product-puzzles)) !important;
}

.onboarding-brand span,
.onboarding-demo-symbol,
.onboarding-cell.is-solution,
.onboarding-cell.is-target,
.onboarding-cell.is-selected,
.onboarding-cell.is-shaded::after {
  background: var(--surface2) !important;
}

.game-board-skeleton > span {
  background: var(--surface2) !important;
  animation: none !important;
}

.progress-next-section,
.record-feature,
.streaks-current-card,
.statistics-scope {
  border-color: var(--line) !important;
}

.streaks-current-card::after {
  content: none !important;
}

.stats-heatmap-day,
.streaks-heatmap-day,
.streaks-day {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.stats-heatmap-day[data-level="1"],
.streaks-heatmap-day[data-level="1"],
.streaks-day[data-level="1"] {
  background: var(--brand-aqua) !important;
}

.stats-heatmap-day[data-level="2"],
.streaks-heatmap-day[data-level="2"],
.streaks-day[data-level="2"] {
  background: var(--brand-violet) !important;
}

.stats-heatmap-day[data-level="3"],
.streaks-heatmap-day[data-level="3"],
.streaks-day[data-level="3"],
.stats-heatmap-day[data-level="4"],
.streaks-heatmap-day[data-level="4"],
.streaks-day[data-level="4"] {
  background: var(--brand-coral) !important;
}

.stats-chart-area,
.streaks-chart-area {
  fill: var(--brand-aqua) !important;
  opacity: .16;
}

.stats-progress-ring {
  background: var(--surface2) !important;
  border: 4px solid var(--product-puzzles);
}

.statistics-activity-chart {
  background: none !important;
}

.statistics-activity-bar i {
  background: var(--product-puzzles) !important;
}

.stats-achievement.is-master,
.stats-achievement.is-unlocked .stats-achievement-badge,
.stats-insight,
.statistics-empty {
  background: var(--surface) !important;
}

.game-category-tag,
.statistics-scope-badge,
.streaks-run-badge,
.game-state,
.pill,
.status,
.live-pill {
  background: var(--surface) !important;
}

html[data-theme="light"] .hero-orbit,
html[data-theme="light"] .game-card,
html[data-theme="light"] .about,
html[data-theme="light"] .play-card,
html[data-theme="light"] .rules-card,
html[data-theme="light"] .featured-post,
html[data-theme="light"] .sudoku-input-dock {
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .button.primary {
  background: var(--product-puzzles) !important;
  border-color: var(--product-puzzles) !important;
  color: var(--brand-cobalt) !important;
}

html[data-theme="light"] .hero h1 em {
  background: none !important;
  color: var(--product-puzzles) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="light"] .sudoku-cell.selected {
  background: var(--brand-cobalt) !important;
  color: var(--brand-cream) !important;
  outline-color: var(--brand-aqua) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .sudoku-cell.conflict {
  background: var(--brand-coral) !important;
  color: var(--brand-cobalt) !important;
  border-color: var(--brand-coral) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .norinori-cell.filled,
html[data-theme="light"] .lits-cell.filled,
html[data-theme="light"] .norinori-cell.filled:hover {
  background: var(--brand-violet) !important;
  box-shadow: none !important;
}