/* ============================================
   Překlady - Redesign Override
   Matches main site redesign (dark/light, accent)
   ============================================ */

/* --- Override root variables to match main site --- */
:root {
  --bg-main: #121212;
  --bg-dark: #0a0a0a;
  --bg-card: #1e1e1e;
  --text-main: #e8e8e8;
  --text-muted: #999;
  --accent: var(--user-accent, #ef4444);
  --border-soft: rgba(255,255,255,0.08);
}

/* Light mode */
html[data-theme="light"] {
  --bg-main: #f2f2f0;
  --bg-dark: #e8e8e6;
  --bg-card: #ffffff;
  --text-main: #1a1a1a;
  --text-muted: #555;
  --border-soft: rgba(0,0,0,0.1);
}

/* --- System fonts --- */
body, * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Body --- */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main);
}

/* --- Header --- */
.preklady-header, header {
  background: var(--bg-dark) !important;
  border-bottom: 3px solid var(--accent) !important;
}

/* --- Cards --- */
.game-card, .translator-card, .section-card {
  background: var(--bg-card) !important;
  border: 0.5px solid var(--border-soft) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}
.game-card:hover, .translator-card:hover {
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Card image hover */
.game-card img { transition: transform 0.3s !important; }
.game-card:hover img { transform: scale(1.03) !important; }

/* Translation cards - clean style */
.trans-card {
  background: var(--bg-card) !important;
  border: 0.5px solid var(--border-soft) !important;
  border-radius: 6px !important;
}
.trans-card::before { display: none !important; }
.trans-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--accent) !important;
  background: var(--bg-card) !important;
}
.trans-body {
  background: transparent !important;
}
.trans-title { color: var(--text-main) !important; }
.trans-translator { color: var(--text-muted) !important; }
.trans-translator a { color: var(--accent) !important; }
html[data-theme="light"] .trans-title { color: #1a1a1a !important; }
html[data-theme="light"] .trans-card { border-color: #e0e0d8 !important; }

/* --- Links + accent --- */
a { color: var(--accent); }
a:hover { color: var(--accent); opacity: 0.85; }

/* --- Buttons --- */
.btn-primary, .download-btn, .btn-download {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #fff !important;
}
.btn-primary:hover, .download-btn:hover, .btn-download:hover {
  background: color-mix(in srgb, var(--accent), #000 15%) !important;
  transform: translateY(-1px);
}

/* --- Badges --- */
.badge, .status-badge {
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* --- Section titles --- */
.section-title, h2, h3 {
  color: var(--text-main) !important;
}

/* --- Footer --- */
.preklady-footer, footer {
  background: var(--bg-dark) !important;
  border-top: 3px solid var(--accent) !important;
}
footer a { color: var(--text-muted) !important; }
footer a:hover { color: var(--accent) !important; }

/* --- Light mode specifics --- */
html[data-theme="light"] .game-card,
html[data-theme="light"] .translator-card,
html[data-theme="light"] .section-card {
  border-color: #e0e0d8 !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .section-title {
  color: #1a1a1a !important;
}
html[data-theme="light"] .text-muted,
html[data-theme="light"] p {
  color: #555 !important;
}

/* --- Game detail page --- */
.game-info, .game-detail, .game-description {
  color: var(--text-main) !important;
}
.game-gallery {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
}

/* Section cards in game detail - override inline styles */
.section-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.section-card:hover {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Description text */
.text-light {
  color: var(--text-main) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .text-light {
  color: #1a1a1a !important;
}

/* Section titles in game detail */
.section-card .section-title,
.section-card h5,
.section-card h4 {
  color: var(--accent) !important;
}

/* Game detail hero area */
.game-hero, [class*="game-hero"] {
  color: var(--text-main) !important;
}

html[data-theme="light"] .game-info,
html[data-theme="light"] .game-detail,
html[data-theme="light"] .game-description,
html[data-theme="light"] .section-card,
html[data-theme="light"] .section-card p,
html[data-theme="light"] .section-card span,
html[data-theme="light"] .section-card li {
  color: #1a1a1a !important;
}

/* --- Search/filter inputs --- */
input, select, textarea {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-main) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #fff !important;
  border-color: #e0e0d8 !important;
  color: #1a1a1a !important;
}

/* --- Filter buttons (překlady/vše) --- */
.filter-btn {
  background: var(--bg-elevated, #252525) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.filter-btn:hover {
  transform: none !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  background: var(--bg-elevated) !important;
}
.filter-btn.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  color: #fff !important;
}
html[data-theme="light"] .filter-btn {
  background: #fff !important;
  border-color: #e0e0d8 !important;
  color: #1a1a1a !important;
}
html[data-theme="light"] .filter-btn.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* --- Pagination --- */
.pagination a, .pagination span {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-main) !important;
}
.pagination .active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* --- Kill old visual effects --- */
.pulse-glow, [class*="shimmer"], [class*="gradient-shift"] {
  animation: none !important;
}

/* Light mode: hide ALL background effects (matrix rain, grain, particles) */
html[data-theme="light"] body::before {
  display: none !important;
}
html[data-theme="light"] #particles-canvas,
html[data-theme="light"] #matrix-rain-canvas {
  display: none !important;
}

/* --- Smooth theme transitions --- */
body, .game-card, .section-card, header, footer, input, select {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}