/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0c0e18;
  --bg-card: #141828;
  --bg-card-hover: #1c2240;
  --surface: #1a1f35;
  --border: #252d4a;
  --text: #e2e6f0;
  --text-muted: #7a82a0;
  --accent: #c8df45;
  --accent-light: #daea80;
  --accent-glow: rgba(200, 223, 69, 0.15);
  --blue: #6b83b0;
  --blue-light: #8ea4cc;
  --score-5: #c8df45;
  --score-4: #8ebf5a;
  --score-3: #6b83b0;
  --score-2: #8a6a50;
  --score-1: #6a3a3a;
  --review: #6b83b0;
  --preview: #c8df45;
  --news: #5a8a9a;
  --feature: #b07050;
  --retro: #9a8a40;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: 0 4px 30px rgba(0,0,0,0.5);
  --max-width: 1340px;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-heading: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-editorial: 'Newsreader', Georgia, serif;
  --font-logo: 'Chakra Petch', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

button, select, input, textarea {
  color: inherit;
  font-family: inherit;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-light); }

img { max-width: 100%; display: block; }

.hidden { display: none !important; }

/* === Ambient Background === */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

.bg-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(120px);
}

.bg-glow--1 {
  width: 700px;
  height: 700px;
  top: -200px;
  left: -100px;
  background: radial-gradient(circle, rgba(200, 223, 69, 0.14) 0%, transparent 65%);
}

.bg-glow--2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(107, 131, 176, 0.12) 0%, transparent 65%);
}

/* === Header === */
.site-header {
  background: rgba(12, 14, 24, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(200, 223, 69, 0.25));
  transition: filter 0.3s;
}

.logo:hover .logo-img {
  filter: drop-shadow(0 0 20px rgba(200, 223, 69, 0.5));
}

.logo-text {
  font-family: var(--font-logo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.main-nav {
  display: flex;
  gap: 0.15rem;
}

.main-nav a {
  font-family: var(--font-heading);
  padding: 0.45rem 0.85rem;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.25s;
  position: relative;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all 0.25s;
  transform: translateX(-50%);
  border-radius: 1px;
}

.main-nav a:hover {
  color: var(--text);
}

.main-nav a:hover::after {
  width: 60%;
}

.main-nav a.active {
  color: var(--accent);
}

.main-nav a.active::after {
  width: 80%;
  background: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-selector {
  font-family: var(--font-body);
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.theme-selector:hover { border-color: var(--accent); }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 24px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

/* === Content === */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 76px - 80px);
  position: relative;
  z-index: 1;
}

/* === Section Titles === */
.section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.5rem;
  position: relative;
  display: block;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
}

.section-title::after { display: none; }

/* === Filters === */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 240px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-controls select {
  font-family: var(--font-body);
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  min-width: 140px;
  transition: border-color 0.2s;
}

.filter-controls select:focus {
  border-color: var(--accent);
}

.results-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

.btn-link:hover { text-decoration: underline; }

/* === Featured Hero === */
.featured-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
}

.hero-card:hover { transform: translateY(-3px); }
.hero-card:first-child { grid-row: span 2; }
.hero-card img { width: 100%; height: 100%; object-fit: cover; }

.hero-card .hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.hero-card .hero-overlay h3 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.25rem; }
.hero-card:first-child .hero-overlay h3 { font-size: 1.35rem; }
.hero-card .hero-meta { font-size: 0.75rem; color: var(--text-muted); }

/* === Articles Grid === */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

a.article-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.article-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s;
  border: 1px solid var(--border);
  position: relative;
}

.article-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.35s;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4));
  pointer-events: none;
  z-index: 1;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.article-card:hover::before {
  opacity: 0;
}

.card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--surface);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1), filter 0.6s;
}

.article-card:hover .card-image img {
  transform: scale(1.03);
}

.card-image .placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface), var(--bg-card));
  color: var(--text-muted);
  font-size: 2.5rem;
}

.card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.badge-review { background: rgba(107, 131, 176, 0.85); color: #fff; }
.badge-preview { background: rgba(200, 223, 69, 0.85); color: #0c0e18; }
.badge-news { background: rgba(90, 138, 154, 0.85); color: #fff; }
.badge-feature { background: rgba(176, 112, 80, 0.85); color: #fff; }
.badge-retro { background: rgba(154, 138, 64, 0.85); color: #fff; }
.badge-guide { background: rgba(80, 160, 154, 0.85); color: #0c0e18; }
.badge-video { background: rgba(160, 80, 120, 0.85); color: #fff; }

.card-score {
  position: absolute;
  top: 0;
  right: 0.85rem;
  width: 38px;
  height: 46px;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 2;
}

.score-5 { background: var(--score-5); color: #0c0e18; }
.score-4 { background: var(--score-4); color: #0c0e18; }
.score-3 { background: var(--score-3); }
.score-2 { background: var(--score-2); }
.score-1 { background: var(--score-1); }

.card-body {
  padding: 1rem 1.2rem 1.1rem;
  position: relative;
  z-index: 2;
}

.card-body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-meta .author { color: var(--text); font-weight: 700; }

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.card-platform {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.card-comments {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* === Article Detail === */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  transition: color 0.2s;
}

.btn-back:hover {
  color: var(--text);
}

#article-detail {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1rem;
}

.detail-header {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.detail-type-badge {
  display: inline-block;
  padding: 0;
  border-radius: 0;
  background: none !important;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
}

.detail-header h1 {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-meta strong { color: var(--text); font-weight: 700; }

.detail-score-display {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.detail-score-display::before { display: none; }

.detail-score-display::after {
  content: 'VERDICT';
  position: absolute;
  top: -0.65em;
  left: 2rem;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: var(--surface);
  padding: 0 0.6rem;
}

.detail-score-number {
  width: 72px;
  height: 72px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: #fff;
  flex-shrink: 0;
}

.detail-score-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-score-wrapper {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}

.detail-score-wrapper .detail-score-display {
  margin-top: 0;
}

.btn-reveal-score {
  display: block;
  width: 100%;
  padding: 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-reveal-score:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.detail-score-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}

.detail-hero-image {
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 2.5rem;
  margin-left: -2rem;
  margin-right: -2rem;
  max-height: 480px;
}

.detail-hero-image img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .detail-hero-image {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius);
  }
}

.detail-body {
  font-family: var(--font-editorial);
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--text);
}

.detail-body p {
  margin-bottom: 1.35rem;
}

.detail-body img {
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

.detail-body iframe,
.detail-body embed,
.detail-body object {
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

/* === Edit toolbar === */
.edit-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.btn-edit, .btn-save, .btn-cancel {
  font-family: var(--font-heading);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.2s;
}

.btn-edit {
  background: var(--surface);
  color: var(--text);
}

.btn-edit:hover { background: var(--bg-card-hover); border-color: var(--accent); }

.btn-save {
  background: var(--accent);
  color: #0c0e18;
  border-color: var(--accent);
}

.btn-save:hover { opacity: 0.85; }

.btn-cancel {
  background: var(--surface);
  color: var(--text-muted);
}

.btn-cancel:hover { background: var(--bg-card-hover); }

.edit-status {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--accent);
}

.editing {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
  min-height: 1.5em;
}

.detail-final-comment {
  margin-top: 2.5rem;
  padding: 2rem 0;
  background: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: center;
  letter-spacing: -0.01em;
}

/* === Pull Quotes === */
.pull-quote {
  margin: 2.5rem 0;
  padding: 2rem 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.pull-quote blockquote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.01em;
  max-width: 600px;
  margin: 0 auto;
}

/* === Tags & Views === */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.detail-views {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* === Comments === */
#comments-section {
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}

.comments-header {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
}

.comment {
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.comment:hover {
  border-color: rgba(255,255,255,0.08);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.comment-meta .comment-author {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-heading);
}

.comment-body {
  font-size: 0.92rem;
  line-height: 1.65;
}

.comment-article-link {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}

.comment-article-link:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

/* === Series Nav === */
.series-nav {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  position: relative;
  z-index: 1;
}

.series-header {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.series-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.series-link {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted) !important;
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s;
}

.series-link:hover {
  color: var(--text) !important;
}

/* === Score Chart === */
.chart-section {
  margin-bottom: 2.5rem;
  max-width: 820px;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 140px;
  text-align: right;
  color: var(--text);
}

.bar-label small {
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.3rem;
}

.bar-track {
  flex: 1;
  height: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.bar-value {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 60px;
  color: var(--text-muted);
}

.bar-value small {
  font-weight: 500;
  color: var(--text-muted);
}

.year-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  padding-top: 1rem;
  border-bottom: 1px solid var(--border);
}

.year-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.year-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.year-bar {
  width: 100%;
  border-radius: var(--radius) var(--radius) 0 0;
  min-height: 4px;
  transition: height 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.year-label {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

@media (max-width: 580px) {
  .bar-label { min-width: 80px; font-size: 0.7rem; }
  .bar-label small { display: none; }
}

/* === Contribute Form === */
.contribute-intro {
  max-width: 100%;
  margin-bottom: 2rem;
}

.contribute-intro p {
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.contribute-form {
  max-width: 100%;
  margin-bottom: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 580px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
  line-height: 1.6;
}

/* === Contributors === */
.contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.contributor-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.contributor-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 223, 69, 0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.contributor-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.contributor-card .real-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.contributor-card .article-count {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
}

/* === On This Day === */
.on-this-day {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
}

.otd-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.otd-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
}

.otd-count {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.otd-cards {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.otd-cards::-webkit-scrollbar { display: none; }

.otd-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.otd-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.otd-arrow:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.otd-card {
  flex: 0 0 200px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}

.otd-card:hover { border-color: var(--accent); }

.otd-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.otd-card-body {
  padding: 0.6rem;
}

.otd-year {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.otd-card h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Reading Progress === */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 200;
  transition: width 0.1s linear;
}

/* === Lightbox === */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

/* === Related Articles === */
.related-articles {
  max-width: 820px;
  margin: 2.5rem auto 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.related-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.related-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.related-card h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.6rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card span {
  display: block;
  padding: 0 0.6rem 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Author Profile === */
.author-header {
  margin-bottom: 2rem;
  max-width: 820px;
}

.author-header h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.author-real-name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.author-bio {
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 600px;
}

.author-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.author-stats .stat {
  text-align: center;
}

.author-stats .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--text);
}

.author-stats .stat span {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.author-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* === Tag Cloud === */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-top: 1.5rem;
  line-height: 2;
}

.tag-cloud-item {
  font-family: var(--font-heading);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.tag-cloud-item:hover { color: var(--accent); }

.tag-cloud-item sup {
  font-size: 0.55em;
  color: var(--text-muted);
  margin-left: 0.15em;
}

/* === Share Buttons === */
.share-buttons {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
}

.btn-share {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

.btn-share:hover { border-color: var(--accent); color: var(--accent); }

.btn-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-listen svg {
  flex-shrink: 0;
}

/* === Prominent Listen Button === */
.listen-bar {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-listen-prominent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.btn-listen-prominent:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-listen-prominent svg {
  flex-shrink: 0;
}

.listen-bar .tts-controls {
  margin-top: 0;
}

/* === TTS Controls === */
.tts-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.5rem;
  flex-wrap: nowrap;
  font-size: 0.75rem;
}

.tts-voice-select {
  flex: 1;
  min-width: 160px;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.75rem;
}

.tts-speed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tts-speed input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
}

.tts-speed span {
  min-width: 2.5em;
  text-align: right;
  color: var(--text);
}

/* === Random Button === */
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  transition: border-color 0.2s, color 0.2s;
}

.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* === Card Stats === */
.card-stats {
  display: flex;
  gap: 0.6rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* === Platform Link === */
.platform-link, .author-link {
  color: var(--text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s;
}

.platform-link:hover, .author-link:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

/* === Load More === */
.load-more-wrap {
  text-align: center;
  padding: 2.5rem 0;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--text);
  padding: 0.85rem 2.5rem;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn-primary::before { display: none; }

.btn-primary:hover {
  background: var(--text);
  color: var(--bg);
  transform: none;
  box-shadow: none;
}

.btn-primary:active {
  opacity: 0.8;
}

/* === Footer === */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 2rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.footer-logo {
  height: 28px;
  width: auto;
  opacity: 0.4;
}

.site-footer p {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === Loading === */
.loading {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.loading::after {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin: 1.25rem auto;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* === Card appear animation === */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.article-card {
  animation: cardIn 0.5s cubic-bezier(0.2, 0, 0, 1) both;
}

.articles-grid .article-card:nth-child(3n+2) { animation-delay: 0.06s; }
.articles-grid .article-card:nth-child(3n+3) { animation-delay: 0.12s; }

/* === Responsive === */
@media (max-width: 768px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: rgba(12, 14, 24, 0.95);
    backdrop-filter: blur(20px);
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    gap: 0.25rem;
  }
  .mobile-menu-btn { display: flex; }
  .header-actions { margin-right: 0.5rem; }

  .featured-hero { grid-template-columns: 1fr; }
  .hero-card:first-child { grid-row: span 1; }

  .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .filters-bar { flex-direction: column; }
  .filter-controls { width: 100%; }
  .filter-controls select { flex: 1; min-width: 0; }

  .detail-header h1 { font-size: 1.8rem; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .author-stats { gap: 1.5rem; }
  .share-buttons { display: none; }

  .content { padding: 1.25rem; }
}

@media (max-width: 580px) {
  .articles-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .author-stats { flex-wrap: wrap; gap: 1rem; }
  .otd-header { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 480px) {
  .header-inner { padding: 0 1rem; }
  .content { padding: 1rem; }
  .logo-text { display: none; }
}

/* === Image Gallery === */
.image-gallery {
  max-width: 820px;
  margin: 2rem auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.gallery-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
  border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.2s;
}

.gallery-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.03);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Alphabet Bar === */
.alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.alpha-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.alpha-btn:hover { border-color: var(--accent); color: var(--accent); }
.alpha-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* === Calendar View === */
.calendar-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.cal-day-name {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.4rem;
  color: var(--text-muted);
}

.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-cell {
  min-height: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.4rem;
  border-radius: var(--radius);
  position: relative;
}

.cal-cell.empty { background: transparent; border: none; }
.cal-cell.has-articles { border-color: var(--accent); }

.cal-date {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.cal-count {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
}

.cal-article {
  display: block;
  font-size: 0.6rem;
  line-height: 1.3;
  margin-top: 0.25rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}

.cal-article:hover { color: var(--accent); }

@media (max-width: 768px) {
  .cal-cell { min-height: 50px; }
  .cal-article { display: none; }
}

/* === Constellation === */
#constellation-canvas {
  width: 100%;
  height: 700px;
  background: #050510;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.constellation-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  z-index: 10;
  max-width: 280px;
}

.constellation-tooltip strong {
  font-family: var(--font-display);
  font-weight: 400;
}

/* === Reveal on Scroll === */
.reveal-ready {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-ready.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === Kinetic Quotes === */
.kinetic-quote {
  transition: transform 0.3s ease;
}

.kinetic-quote:hover {
  transform: scale(1.03);
}

/* === Article DNA === */
.article-dna {
  display: flex;
  gap: 2px;
  flex: 1;
  max-width: 60px;
  margin-left: auto;
}

.dna-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}

.dna-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

/* === Reaction Buttons === */
.reaction-buttons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.reaction-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-right: 0.3rem;
}

.reaction-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reaction-btn:hover {
  border-color: var(--accent);
  transform: scale(1.15);
}

.reaction-btn.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  transform: scale(1.1);
}

/* === Logo DDR Animation === */
.logo-img {
  animation: ddrBeat 2s ease-in-out infinite;
}

@keyframes ddrBeat {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(200, 223, 69, 0.12)); }
  12.5% { filter: drop-shadow(0 -2px 8px rgba(200, 223, 69, 0.25)); }
  25% { filter: drop-shadow(0 0 6px rgba(200, 223, 69, 0.12)); }
  37.5% { filter: drop-shadow(2px 0 8px rgba(107, 131, 176, 0.25)); }
  50% { filter: drop-shadow(0 0 6px rgba(200, 223, 69, 0.12)); }
  62.5% { filter: drop-shadow(0 2px 8px rgba(200, 223, 69, 0.25)); }
  75% { filter: drop-shadow(0 0 6px rgba(200, 223, 69, 0.12)); }
  87.5% { filter: drop-shadow(-2px 0 8px rgba(107, 131, 176, 0.25)); }
}

.logo:hover .logo-img {
  animation: ddrBeatFast 0.6s ease-in-out infinite;
}

@keyframes ddrBeatFast {
  0% { filter: drop-shadow(0 -3px 10px rgba(200, 223, 69, 0.4)); }
  25% { filter: drop-shadow(3px 0 10px rgba(107, 131, 176, 0.4)); }
  50% { filter: drop-shadow(0 3px 10px rgba(200, 223, 69, 0.4)); }
  75% { filter: drop-shadow(-3px 0 10px rgba(107, 131, 176, 0.4)); }
  100% { filter: drop-shadow(0 -3px 10px rgba(200, 223, 69, 0.4)); }
}

/* === Quiz Mode === */
.quiz-mode {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.quiz-prompt h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.quiz-prompt p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.quiz-options {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.quiz-btn {
  width: 52px;
  height: 52px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: scale(1.1);
}

.quiz-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.quiz-btn.quiz-actual {
  opacity: 1 !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--bg) !important;
  transform: scale(1.15);
}

.quiz-result {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  padding: 0.75rem;
  border-radius: var(--radius);
}

.quiz-correct {
  background: rgba(0, 200, 100, 0.1);
  color: var(--score-5);
}

.quiz-wrong {
  background: rgba(200, 100, 0, 0.1);
  color: var(--score-2);
}

/* === Text Size === */
.text-size-controls {
  display: flex;
  gap: 0.15rem;
}

/* === View Toggle: List Mode === */
.articles-grid.list-mode {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.list-mode .article-card {
  display: flex;
  flex-direction: row;
  height: auto;
}

.list-mode .card-image {
  width: 160px;
  min-width: 160px;
  height: 100px;
}

.list-mode .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.list-mode .card-body h3 {
  font-size: 0.95rem;
  -webkit-line-clamp: 1;
}

@media (max-width: 580px) {
  .list-mode .card-image { width: 100px; min-width: 100px; height: 70px; }
}

/* Detail extra — hidden by default, shown in detail mode */
.card-detail-extra {
  display: none;
}

/* === Detail View Mode === */
.articles-grid.detail-mode {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.detail-mode .article-card {
  display: flex;
  flex-direction: row;
  height: auto;
}

.detail-mode .card-image {
  width: 220px;
  min-width: 220px;
  height: 150px;
}

.detail-mode .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 1rem 1.5rem;
}

.detail-mode .card-body h3 {
  font-size: 1.15rem;
  -webkit-line-clamp: 1;
  margin-bottom: 0.3rem;
}

.detail-mode .card-detail-extra {
  display: block;
  margin-top: 0.4rem;
}

.detail-mode .card-footer {
  display: none;
}

.card-intro {
  font-family: var(--font-editorial);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-detail-meta {
  display: flex;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 580px) {
  .detail-mode .card-image { width: 120px; min-width: 120px; height: 100px; }
  .detail-mode .card-body { padding: 0.75rem 1rem; }
  .card-intro { -webkit-line-clamp: 1; }
  .card-detail-meta { flex-wrap: wrap; gap: 0.5rem; }
}

/* === Parallax Header === */
.detail-hero-image.parallax {
  position: relative;
  overflow: hidden;
  height: 400px;
  max-height: 50vh;
}

.detail-hero-image.parallax img {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

/* === Page Transitions === */
.view-transition {
  animation: viewFadeIn 0.3s ease both;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Micro-interactions === */
.card-score {
  transition: transform 0.2s;
}

.article-card:hover .card-score {
  transform: scale(1.1);
}

.card-badge {
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover .card-badge {
  transform: translateY(-1px);
}

.btn-back {
  transition: color 0.2s, transform 0.2s;
}

.btn-back:hover {
  transform: translateX(-3px);
}

.tag {
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.tag:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
}

.contributor-card {
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.comment {
  transition: border-color 0.2s, transform 0.15s;
}

.comment:hover {
  transform: translateX(4px);
}

/* Score number pulse on article load */
@keyframes scorePop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.detail-score-number {
  animation: scorePop 0.4s 0.3s ease both;
}

/* === Pointer cursor for interactive elements (overrides theme cursors) === */
a, button, select, .article-card, .contributor-card, .otd-card,
.alpha-btn, .btn-icon, .tag, .reaction-btn, .quiz-btn,
[role="button"], [onclick], label[for] {
  cursor: pointer !important;
}

/* === Custom Cursors === */
/* Each theme gets a cursor that matches its accent colour */
[data-theme="default"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23a855f7'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="aatg"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23c8df45'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="scifi"] { cursor: crosshair; }

[data-theme="retro"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23f0a030'/%3E%3C/svg%3E") 4 4, auto; }

[data-theme="matrix"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext x='0' y='12' fill='%2300ff41' font-size='12' font-family='monospace'%3E_%3C/text%3E%3C/svg%3E") 4 12, auto; }

[data-theme="neon"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23ff00ff' opacity='0.8'/%3E%3C/svg%3E") 4 4, auto; }

[data-theme="fluoro"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%2339ff14'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="pink"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='0' y='16' font-size='16'%3E%E2%9D%A4%3C/text%3E%3C/svg%3E") 10 10, auto; }

[data-theme="blackred"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23cc0000'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="speccy"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='8' height='8' fill='%23cc0000'/%3E%3C/svg%3E") 4 4, auto; }

[data-theme="c64"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16'%3E%3Crect width='8' height='14' fill='%23a0a0ff'/%3E%3C/svg%3E") 4 7, auto; }

[data-theme="high-contrast"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23ffff00' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 4 4, auto; }

[data-theme="light"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23c0392b'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="muted"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%238a5a3a'/%3E%3C/svg%3E") 3 3, auto; }

[data-theme="90s"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext x='0' y='12' font-size='12'%3E%E2%9C%A8%3C/text%3E%3C/svg%3E") 6 6, auto; }

[data-theme="y2k"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='4' fill='%231e90ff' opacity='0.6'/%3E%3C/svg%3E") 4 4, auto; }

/* === Print Stylesheet === */
@media print {
  .site-header, .site-footer, .bg-noise, .bg-glow,
  .reading-progress, .lightbox, .edit-toolbar,
  .share-buttons, .btn-back, .filters-bar,
  .results-info, .load-more-wrap, .related-articles,
  .mobile-menu-btn, .header-actions,
  #comments-section, .detail-tags, .detail-views { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, serif !important;
    font-size: 12pt !important;
    line-height: 1.6 !important;
  }

  .content { max-width: none; padding: 0; }

  .detail-header h1 {
    font-size: 24pt !important;
    color: #000 !important;
    font-family: Georgia, serif !important;
  }

  .detail-meta {
    color: #666 !important;
    border-bottom: 1px solid #ccc !important;
    font-size: 10pt !important;
  }

  .detail-body {
    color: #000 !important;
    font-size: 12pt !important;
  }

  .detail-hero-image { margin: 0 !important; max-height: 300px !important; }
  .detail-hero-image img { max-height: 300px !important; }

  .detail-score-display {
    background: #f0f0f0 !important;
    border-top: 3px solid #000 !important;
    color: #000 !important;
  }

  .detail-score-number { color: #000 !important; background: #ddd !important; }

  a { color: #000 !important; text-decoration: underline !important; }
}

/* =============================================
   THEMES — each has unique visual personality
   ============================================= */

/* --- DARK: Neon purple cyberpunk --- */
[data-theme="default"] {
  --bg: #0a0a14;
  --bg-card: #12121f;
  --bg-card-hover: #1a1a2e;
  --surface: #18182a;
  --border: #2a2a44;
  --text: #e0e0f0;
  --text-muted: #7878a0;
  --accent: #a855f7;
  --accent-light: #c084fc;
  --accent-glow: rgba(168, 85, 247, 0.2);
  --score-5: #22c55e;
  --score-4: #4ade80;
  --score-3: #facc15;
  --score-2: #f97316;
  --score-1: #ef4444;
  --review: #a855f7;
  --preview: #3b82f6;
  --news: #22c55e;
  --feature: #f97316;
  --retro: #facc15;
}

[data-theme="default"] .site-header {
  background: rgba(10, 10, 20, 0.92);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

[data-theme="default"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}

[data-theme="default"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 70%);
}

[data-theme="default"] .article-card {
  border-color: rgba(168, 85, 247, 0.1);
}

[data-theme="default"] .article-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 40px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(168, 85, 247, 0.1);
}

[data-theme="default"] .article-card::before {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), transparent 60%);
}

[data-theme="default"] .main-nav a.active { color: #c084fc; }
[data-theme="default"] .main-nav a::after { background: #a855f7; }

[data-theme="default"] .card-badge {
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

[data-theme="default"] .btn-primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

[data-theme="default"] .btn-primary:hover {
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.5);
}

/* --- LIGHT: Editorial magazine --- */
[data-theme="light"] {
  --bg: #faf9f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f4f0;
  --surface: #eeecea;
  --border: #dddad5;
  --text: #1a1816;
  --text-muted: #6a6560;
  --accent: #c0392b;
  --accent-light: #e74c3c;
  --accent-glow: rgba(192, 57, 43, 0.08);
  --score-5: #27ae60;
  --score-4: #2ecc71;
  --score-3: #f39c12;
  --score-2: #e67e22;
  --score-1: #c0392b;
  --review: #c0392b;
  --preview: #2980b9;
  --news: #27ae60;
  --feature: #e67e22;
  --retro: #8e6e3a;
  --radius: 4px;
  --radius-lg: 6px;
}

[data-theme="light"] .site-header {
  background: #fff;
  border-bottom: 3px solid #1a1816;
  backdrop-filter: none;
}

[data-theme="light"] .bg-glow { display: none; }
[data-theme="light"] .bg-noise { opacity: 0; }

[data-theme="light"] .article-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 4px;
}

[data-theme="light"] .article-card::before { display: none; }

[data-theme="light"] .article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: transparent;
}

[data-theme="light"] .card-body h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

[data-theme="light"] .detail-header h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  letter-spacing: -0.03em;
}

[data-theme="light"] .card-badge {
  backdrop-filter: none;
  border-radius: 2px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

[data-theme="light"] .main-nav a {
  color: #6a6560;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

[data-theme="light"] .main-nav a::after { background: #c0392b; height: 3px; bottom: 0; }
[data-theme="light"] .main-nav a.active { color: #1a1816; }

[data-theme="light"] .logo-text { color: #1a1816; }

[data-theme="light"] .btn-primary {
  background: #1a1816;
  color: #faf9f6;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
}

[data-theme="light"] .btn-primary:hover {
  background: #c0392b;
  box-shadow: none;
}

/* --- RETRO: CRT scanlines, pixel vibes --- */
[data-theme="retro"] {
  --bg: #1a1208;
  --bg-card: #2a200e;
  --bg-card-hover: #352a15;
  --surface: #302510;
  --border: #4a3a20;
  --text: #e8d8a8;
  --text-muted: #a89060;
  --accent: #f0a030;
  --accent-light: #ffc060;
  --accent-glow: rgba(240, 160, 48, 0.15);
  --review: #f0a030;
  --preview: #70b030;
  --news: #d09030;
  --feature: #d05030;
  --retro: #f0a030;
  --score-5: #70b030;
  --score-4: #a0d040;
  --score-3: #f0a030;
  --score-2: #d05030;
  --score-1: #801800;
  --radius: 2px;
  --radius-lg: 3px;
  --font-display: 'Courier New', monospace;
  --font-heading: 'Courier New', monospace;
}

[data-theme="retro"] .site-header {
  background: #1a1208;
  border-bottom: 2px solid #f0a030;
  backdrop-filter: none;
}

[data-theme="retro"] .bg-glow { display: none; }

/* CRT scanline overlay */
[data-theme="retro"] .bg-noise {
  opacity: 0.06;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.3) 2px,
    rgba(0,0,0,0.3) 4px
  );
  background-size: auto;
}

[data-theme="retro"] .article-card {
  border: 2px solid #4a3a20;
  border-radius: 2px;
}

[data-theme="retro"] .article-card::before { display: none; }

[data-theme="retro"] .article-card:hover {
  border-color: #f0a030;
  box-shadow: 0 0 20px rgba(240, 160, 48, 0.2), inset 0 0 20px rgba(240, 160, 48, 0.12);
  transform: none;
}

[data-theme="retro"] .article-card:hover .card-image img {
  transform: none;
  filter: saturate(1.3) contrast(1.1);
}

[data-theme="retro"] .card-badge {
  backdrop-filter: none;
  border: 1px solid;
  font-family: 'Courier New', monospace;
}

[data-theme="retro"] .card-score {
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

[data-theme="retro"] .main-nav a {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-size: 0.8rem;
}

[data-theme="retro"] .main-nav a::after { display: none; }
[data-theme="retro"] .main-nav a.active { color: #f0a030; text-decoration: underline; }
[data-theme="retro"] .main-nav a:hover { color: #ffc060; }

[data-theme="retro"] .logo-text {
  font-family: 'Courier New', monospace;
  text-shadow: 2px 2px 0 rgba(240, 160, 48, 0.3);
}

[data-theme="retro"] .btn-primary {
  background: #f0a030;
  color: #1a1208;
  border: 2px solid #d08020;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

[data-theme="retro"] .btn-primary:hover {
  background: #ffc060;
  transform: none;
  box-shadow: 0 0 15px rgba(240, 160, 48, 0.4);
}

/* --- SCI-FI: Holographic terminal --- */
[data-theme="scifi"] {
  --bg: #030810;
  --bg-card: #06101e;
  --bg-card-hover: #0a1830;
  --surface: #081420;
  --border: #0c2040;
  --text: #a0d0f0;
  --text-muted: #406080;
  --accent: #00e0ff;
  --accent-light: #60f0ff;
  --accent-glow: rgba(0, 224, 255, 0.12);
  --review: #00e0ff;
  --preview: #00ff80;
  --news: #00e0ff;
  --feature: #ff4080;
  --retro: #ffd000;
  --score-5: #00ff80;
  --score-4: #00e0ff;
  --score-3: #ffd000;
  --score-2: #ff4080;
  --score-1: #ff1040;
  --font-display: 'Chakra Petch', monospace;
}

[data-theme="scifi"] .site-header {
  background: rgba(3, 8, 16, 0.9);
  border-bottom: 1px solid rgba(0, 224, 255, 0.3);
  box-shadow: 0 1px 30px rgba(0, 224, 255, 0.12);
}

[data-theme="scifi"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(0, 224, 255, 0.14) 0%, transparent 70%);
  animation: glowPulse 8s ease-in-out infinite;
}

[data-theme="scifi"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(0, 255, 128, 0.1) 0%, transparent 70%);
  animation: glowPulse 10s ease-in-out infinite reverse;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Horizontal scan line */
[data-theme="scifi"] .bg-noise {
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 1px, rgba(0, 224, 255, 0.03) 1px, transparent 3px
  );
  background-size: auto;
}

[data-theme="scifi"] .article-card {
  border: 1px solid rgba(0, 224, 255, 0.12);
  background: linear-gradient(180deg, rgba(6,16,30,0.9) 0%, rgba(3,8,16,0.95) 100%);
}

[data-theme="scifi"] .article-card::before {
  background: linear-gradient(135deg, rgba(0, 224, 255, 0.08), transparent 50%);
}

[data-theme="scifi"] .article-card:hover {
  border-color: rgba(0, 224, 255, 0.5);
  box-shadow:
    0 0 30px rgba(0, 224, 255, 0.1),
    0 0 60px rgba(0, 224, 255, 0.12),
    inset 0 1px 0 rgba(0, 224, 255, 0.15);
}

[data-theme="scifi"] .card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(3, 8, 16, 0.6));
  pointer-events: none;
}

[data-theme="scifi"] .main-nav a {
  font-family: 'Chakra Petch', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

[data-theme="scifi"] .main-nav a::after { background: #00e0ff; box-shadow: 0 0 8px rgba(0, 224, 255, 0.5); }

[data-theme="scifi"] .logo-text {
  text-shadow: 0 0 20px rgba(0, 224, 255, 0.4);
}

[data-theme="scifi"] .logo-img {
  filter: drop-shadow(0 0 15px rgba(0, 224, 255, 0.3)) hue-rotate(120deg) brightness(1.2);
}

[data-theme="scifi"] .btn-primary {
  background: transparent;
  border: 1px solid #00e0ff;
  color: #00e0ff;
  box-shadow: 0 0 15px rgba(0, 224, 255, 0.15), inset 0 0 15px rgba(0, 224, 255, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

[data-theme="scifi"] .btn-primary:hover {
  background: rgba(0, 224, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 224, 255, 0.3), inset 0 0 20px rgba(0, 224, 255, 0.1);
}

[data-theme="scifi"] .search-box input:focus {
  box-shadow: 0 0 0 3px rgba(0, 224, 255, 0.15), 0 0 20px rgba(0, 224, 255, 0.1);
}

/* --- MUTED: Newspaper editorial --- */
[data-theme="muted"] {
  --bg: #f2efe8;
  --bg-card: #faf8f4;
  --bg-card-hover: #f0ede6;
  --surface: #e8e4dc;
  --border: #d4cfc4;
  --text: #2c2820;
  --text-muted: #7a7468;
  --accent: #8a5a3a;
  --accent-light: #6a4028;
  --accent-glow: rgba(138, 90, 58, 0.08);
  --review: #8a5a3a;
  --preview: #4a7a55;
  --news: #5a6a7a;
  --feature: #8a5a3a;
  --retro: #7a6a40;
  --score-5: #4a7a55;
  --score-4: #5a8a5a;
  --score-3: #8a7a40;
  --score-2: #8a5a3a;
  --score-1: #7a3a2a;
  --radius: 0;
  --radius-lg: 0;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
}

[data-theme="muted"] .site-header {
  background: #faf8f4;
  border-bottom: 1px solid #2c2820;
  backdrop-filter: none;
}

[data-theme="muted"] .bg-glow { display: none; }
[data-theme="muted"] .bg-noise { opacity: 0.015; }

[data-theme="muted"] .article-card {
  border: none;
  border-bottom: 1px solid #d4cfc4;
  border-radius: 0;
  background: transparent;
}

[data-theme="muted"] .article-card::before { display: none; }

[data-theme="muted"] .article-card:hover {
  transform: none;
  box-shadow: none;
  background: #f0ede6;
  border-color: #8a5a3a;
}

[data-theme="muted"] .article-card:hover .card-image img { transform: none; }

[data-theme="muted"] .card-body h3 {
  font-family: Georgia, serif;
  font-style: italic;
}

[data-theme="muted"] .card-badge {
  backdrop-filter: none;
  border-radius: 0;
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="muted"] .main-nav a {
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="muted"] .main-nav a::after { display: none; }
[data-theme="muted"] .main-nav a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #2c2820;
}

[data-theme="muted"] .logo-text {
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.2rem;
}

[data-theme="muted"] .detail-header h1 {
  font-size: 2.8rem;
  font-style: italic;
  letter-spacing: -0.02em;
}

[data-theme="muted"] .btn-primary {
  background: transparent;
  color: #2c2820;
  border: 1px solid #2c2820;
  border-radius: 0;
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="muted"] .btn-primary:hover {
  background: #2c2820;
  color: #faf8f4;
  transform: none;
  box-shadow: none;
}

/* --- HIGH CONTRAST: Bold accessibility --- */
[data-theme="high-contrast"] {
  --bg: #000000;
  --bg-card: #0a0a0a;
  --bg-card-hover: #1a1a1a;
  --surface: #0a0a0a;
  --border: #ffffff;
  --text: #ffffff;
  --text-muted: #dddddd;
  --accent: #ffff00;
  --accent-light: #ffff66;
  --accent-glow: rgba(255, 255, 0, 0.2);
  --review: #ffff00;
  --preview: #00ffff;
  --news: #00ff00;
  --feature: #ff8800;
  --retro: #ffff00;
  --score-5: #00ff00;
  --score-4: #00ffcc;
  --score-3: #ffff00;
  --score-2: #ff8800;
  --score-1: #ff0000;
  --radius: 0;
  --radius-lg: 0;
}

[data-theme="high-contrast"] .site-header {
  background: #000;
  border-bottom: 3px solid #ffff00;
  backdrop-filter: none;
}

[data-theme="high-contrast"] .bg-glow { display: none; }
[data-theme="high-contrast"] .bg-noise { display: none; }

[data-theme="high-contrast"] .article-card {
  border: 3px solid #fff;
  border-radius: 0;
}

[data-theme="high-contrast"] .article-card::before { display: none; }

[data-theme="high-contrast"] .article-card:hover {
  border-color: #ffff00;
  box-shadow: 0 0 0 3px #ffff00;
  transform: none;
}

[data-theme="high-contrast"] .article-card:hover .card-image img { transform: none; }

[data-theme="high-contrast"] .main-nav a {
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
}

[data-theme="high-contrast"] .main-nav a::after { display: none; }
[data-theme="high-contrast"] .main-nav a.active {
  border-color: #ffff00;
  color: #ffff00;
}

[data-theme="high-contrast"] .main-nav a:hover { color: #ffff00; }

[data-theme="high-contrast"] .btn-primary {
  background: #ffff00;
  color: #000;
  border: 3px solid #fff;
  border-radius: 0;
  font-weight: 700;
  font-size: 1rem;
}

[data-theme="high-contrast"] .btn-primary:hover {
  background: #fff;
  color: #000;
  transform: none;
  box-shadow: none;
}

[data-theme="high-contrast"] .card-badge {
  backdrop-filter: none;
  border: 2px solid #fff;
  font-weight: 700;
}

/* --- COLOUR BLIND: Deuteranopia-safe with shapes --- */
[data-theme="colorblind"] {
  --bg: #0f1117;
  --bg-card: #1a1d27;
  --bg-card-hover: #222636;
  --surface: #252936;
  --border: #2e3347;
  --text: #e4e6ef;
  --text-muted: #8b8fa8;
  --accent: #4477aa;
  --accent-light: #66aadd;
  --accent-glow: rgba(68, 119, 170, 0.15);
  --review: #4477aa;
  --preview: #228833;
  --news: #ccbb44;
  --feature: #ee6677;
  --retro: #aa3377;
  --score-5: #228833;
  --score-4: #66ccee;
  --score-3: #ccbb44;
  --score-2: #ee6677;
  --score-1: #aa3377;
}

[data-theme="colorblind"] .card-score {
  border: 3px solid #fff;
  font-size: 0.8rem;
}

[data-theme="colorblind"] .card-badge {
  border: 1px solid rgba(255,255,255,0.4);
}

/* --- 90s INTERNET: Geocities fever dream --- */
[data-theme="90s"] {
  --bg: #000080;
  --bg-card: #c0c0c0;
  --bg-card-hover: #d0d0d0;
  --surface: #808080;
  --border: #404040;
  --text: #000000;
  --text-muted: #404040;
  --accent: #ff00ff;
  --accent-light: #ff66ff;
  --accent-glow: rgba(255, 0, 255, 0.1);
  --review: #ff0000;
  --preview: #00ff00;
  --news: #ffff00;
  --feature: #ff6600;
  --retro: #ff00ff;
  --score-5: #00ff00;
  --score-4: #00ffff;
  --score-3: #ffff00;
  --score-2: #ff6600;
  --score-1: #ff0000;
  --radius: 0;
  --radius-lg: 0;
  --font-display: 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-heading: 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-body: 'Times New Roman', serif;
}

[data-theme="90s"] .site-header {
  background: #000080;
  border-bottom: 3px ridge #c0c0c0;
  backdrop-filter: none;
}

[data-theme="90s"] .bg-glow { display: none; }
[data-theme="90s"] .bg-noise { display: none; }

/* Starfield background */
[data-theme="90s"] body {
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 10%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 90% 20%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 90%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 40%, #ff0 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, #0ff 50%, transparent 100%);
  background-size: 200px 200px;
  background-color: #000080;
}

[data-theme="90s"] .logo-text {
  font-family: 'Comic Sans MS', cursive;
  color: #ffff00;
  text-shadow: 2px 2px 0 #ff0000, -1px -1px 0 #00ff00;
  font-size: 1.1rem;
}

[data-theme="90s"] .logo-img {
  filter: none;
  border: 2px ridge #c0c0c0;
}

[data-theme="90s"] .main-nav a {
  font-family: 'Comic Sans MS', cursive;
  color: #00ffff;
  font-size: 0.85rem;
}

[data-theme="90s"] .main-nav a::after { display: none; }
[data-theme="90s"] .main-nav a:hover { color: #ffff00; text-decoration: underline; }
[data-theme="90s"] .main-nav a.active { color: #ffff00; font-weight: 700; text-decoration: underline; }

[data-theme="90s"] .article-card {
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  border-radius: 0;
}

[data-theme="90s"] .article-card::before { display: none; }

[data-theme="90s"] .article-card:hover {
  transform: none;
  border-color: #ff00ff;
  box-shadow: none;
}

[data-theme="90s"] .article-card:hover .card-image img { transform: none; }

[data-theme="90s"] .card-body h3 {
  font-family: 'Comic Sans MS', cursive;
  color: #000080;
}

[data-theme="90s"] .card-badge {
  backdrop-filter: none;
  border-radius: 0;
  border: 1px solid #000;
  font-family: 'Arial', sans-serif;
  font-size: 0.6rem;
}

[data-theme="90s"] .card-score {
  border-radius: 0;
  border: 2px outset #c0c0c0;
  font-family: 'Arial', sans-serif;
}

[data-theme="90s"] .card-meta .author { color: #0000ff; text-decoration: underline; }

[data-theme="90s"] .btn-primary {
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  border-radius: 0;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  text-transform: none;
}

[data-theme="90s"] .btn-primary:hover {
  background: #d0d0d0;
  transform: none;
  box-shadow: none;
  border-style: inset;
}

[data-theme="90s"] .search-box input,
[data-theme="90s"] .filter-controls select,
[data-theme="90s"] .theme-selector {
  background: #fff;
  color: #000;
  border: 2px inset #c0c0c0;
  border-radius: 0;
  font-family: 'Arial', sans-serif;
}

[data-theme="90s"] .results-info { color: #ffff00; }
[data-theme="90s"] .btn-link { color: #00ffff; }
[data-theme="90s"] .card-footer,
[data-theme="90s"] .card-meta,
[data-theme="90s"] .card-comments { color: #444; }

[data-theme="90s"] .site-footer {
  background: #000080;
  border-top: 3px ridge #c0c0c0;
}

[data-theme="90s"] .site-footer p {
  color: #00ffff;
  font-family: 'Comic Sans MS', cursive;
}

[data-theme="90s"] #article-detail,
[data-theme="90s"] #comments-section {
  background: #c0c0c0;
  padding: 1.5rem;
  border: 2px outset #e0e0e0;
}

[data-theme="90s"] .detail-header h1 {
  font-family: 'Comic Sans MS', cursive;
  color: #000080;
}

[data-theme="90s"] .detail-body {
  font-family: 'Times New Roman', serif;
  color: #000;
}

[data-theme="90s"] .detail-meta { color: #444; border-bottom-color: #999; }
[data-theme="90s"] .detail-meta strong { color: #000; }
[data-theme="90s"] .detail-type-badge { color: #cc0000 !important; border-bottom-color: #cc0000 !important; }

[data-theme="90s"] .detail-score-display {
  background: #d0d0d0;
  border: 2px inset #c0c0c0;
  border-top: 4px solid #cc0000;
}

[data-theme="90s"] .detail-score-display::after {
  background: #d0d0d0;
  color: #cc0000;
}

[data-theme="90s"] .detail-score-label { color: #444; }
[data-theme="90s"] .detail-score-label strong { color: #000; }

[data-theme="90s"] .detail-final-comment { color: #333; border-color: #999; }

[data-theme="90s"] .pull-quote { border-top-color: #cc0000; border-bottom-color: #999; }
[data-theme="90s"] .pull-quote blockquote { color: #000080; }

[data-theme="90s"] .detail-tags .tag { background: #d0d0d0; border-color: #999; color: #333; }
[data-theme="90s"] .detail-views { color: #444; }

[data-theme="90s"] .edit-toolbar .btn-edit,
[data-theme="90s"] .edit-toolbar .btn-save,
[data-theme="90s"] .edit-toolbar .btn-cancel {
  background: #c0c0c0;
  border: 2px outset #e0e0e0;
  color: #000;
}

[data-theme="90s"] .comments-header { color: #000; border-bottom-color: #000080; }

[data-theme="90s"] .comment {
  background: #d0d0d0;
  border: 2px inset #c0c0c0;
}

[data-theme="90s"] .comment-meta { color: #444; }
[data-theme="90s"] .comment-meta .comment-author { color: #0000ff; }
[data-theme="90s"] .comment-body { color: #000; }

[data-theme="90s"] .btn-back { color: #ffff00; }
[data-theme="90s"] .btn-back:hover { color: #fff; }

[data-theme="90s"] #contributors-view {
  background: #c0c0c0;
  padding: 1.5rem;
  border: 2px outset #e0e0e0;
}

[data-theme="90s"] .contributor-card {
  background: #d0d0d0;
  border: 2px inset #c0c0c0;
}

[data-theme="90s"] .section-title {
  font-family: 'Comic Sans MS', cursive;
  color: #000080;
  border-bottom-color: #ff00ff;
}

/* --- Y2K / 2000s INTERNET: Aqua gel, brushed metal --- */
[data-theme="y2k"] {
  --bg: #e8eef4;
  --bg-card: #f0f4f8;
  --bg-card-hover: #e4eaf2;
  --surface: #d8e0ea;
  --border: #b0bcc8;
  --text: #2a3040;
  --text-muted: #6a7888;
  --accent: #1e90ff;
  --accent-light: #4dabff;
  --accent-glow: rgba(30, 144, 255, 0.12);
  --review: #ff4500;
  --preview: #32cd32;
  --news: #1e90ff;
  --feature: #ff8c00;
  --retro: #9370db;
  --score-5: #32cd32;
  --score-4: #1e90ff;
  --score-3: #ffd700;
  --score-2: #ff8c00;
  --score-1: #ff4500;
  --radius: 10px;
  --radius-lg: 14px;
  --font-display: 'Trebuchet MS', 'Lucida Grande', sans-serif;
  --font-heading: 'Trebuchet MS', 'Lucida Grande', sans-serif;
  --font-body: 'Lucida Grande', 'Lucida Sans', sans-serif;
}

[data-theme="y2k"] .site-header {
  background: linear-gradient(180deg, #e8f0f8 0%, #c8d8e8 50%, #a8bcd0 100%);
  border-bottom: 1px solid #90a0b8;
  backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

[data-theme="y2k"] .bg-glow { display: none; }
[data-theme="y2k"] .bg-noise { display: none; }

/* Brushed metal texture */
[data-theme="y2k"] body {
  background-image: linear-gradient(90deg,
    rgba(200,210,220,0.3) 0%, rgba(220,228,238,0.1) 20%,
    rgba(200,210,220,0.2) 40%, rgba(220,228,238,0.05) 60%,
    rgba(200,210,220,0.15) 80%, rgba(220,228,238,0.1) 100%
  );
  background-color: #e8eef4;
}

[data-theme="y2k"] .logo-text { color: #2a3040; }

[data-theme="y2k"] .main-nav a {
  color: #4a5a70;
  font-weight: 700;
  font-size: 0.82rem;
}

[data-theme="y2k"] .main-nav a::after { background: #1e90ff; height: 3px; border-radius: 2px; }
[data-theme="y2k"] .main-nav a.active { color: #1e90ff; }
[data-theme="y2k"] .main-nav a:hover { color: #1e90ff; }

[data-theme="y2k"] .article-card {
  background: linear-gradient(180deg, #f8fafc, #e8eef6);
  border: 1px solid #b8c8d8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  border-radius: 10px;
}

[data-theme="y2k"] .article-card::before { display: none; }

[data-theme="y2k"] .article-card:hover {
  box-shadow: 0 6px 20px rgba(30, 144, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  border-color: #1e90ff;
  transform: translateY(-3px);
}

[data-theme="y2k"] .article-card:hover .card-image img { transform: none; }

[data-theme="y2k"] .card-badge {
  backdrop-filter: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

[data-theme="y2k"] .card-score {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Aqua gel buttons */
[data-theme="y2k"] .btn-primary {
  background: linear-gradient(180deg, #5ab0ff 0%, #1e90ff 40%, #0070dd 100%);
  color: #fff;
  border: 1px solid #0060cc;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  font-weight: 700;
}

[data-theme="y2k"] .btn-primary:hover {
  background: linear-gradient(180deg, #70c0ff 0%, #3aa0ff 40%, #0080ee 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}

[data-theme="y2k"] .search-box input,
[data-theme="y2k"] .filter-controls select {
  background: #fff;
  border: 1px solid #b0bcc8;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
  border-radius: 8px;
}

[data-theme="y2k"] .search-box input:focus {
  border-color: #1e90ff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(30,144,255,0.15);
}

[data-theme="y2k"] .theme-selector {
  background: linear-gradient(180deg, #f0f4f8, #d8e0ea);
  border: 1px solid #b0bcc8;
  border-radius: 8px;
}

[data-theme="y2k"] .site-footer {
  background: linear-gradient(180deg, #c8d8e8, #a8bcd0);
  border-top: 1px solid #90a0b8;
}

[data-theme="y2k"] .site-footer p { color: #4a5a70; }
[data-theme="y2k"] .footer-logo { opacity: 0.5; }

[data-theme="y2k"] .detail-header h1 {
  color: #1a2030;
}

/* --- WEB 1.0: Nostalgic 2000s web --- */
[data-theme="web10"] {
  --bg: #e8e0d0;
  --bg-card: #f5f0e8;
  --bg-card-hover: #ebe5d8;
  --surface: #ddd6c4;
  --border: #b8a888;
  --text: #333322;
  --text-muted: #666650;
  --accent: #0066cc;
  --accent-light: #0044aa;
  --accent-glow: rgba(0, 102, 204, 0.1);
  --review: #cc3300;
  --preview: #339933;
  --news: #0066cc;
  --feature: #cc6600;
  --retro: #996633;
  --score-5: #339933;
  --score-4: #66aa33;
  --score-3: #cc9900;
  --score-2: #cc6600;
  --score-1: #cc3300;
  --radius: 3px;
  --radius-lg: 4px;
  --font-display: 'Trebuchet MS', Verdana, sans-serif;
  --font-heading: 'Trebuchet MS', Verdana, sans-serif;
  --font-body: Verdana, Geneva, sans-serif;
}

[data-theme="web10"] .site-header {
  background: linear-gradient(180deg, #5577aa 0%, #335588 100%);
  border-bottom: 3px solid #224477;
  backdrop-filter: none;
}

[data-theme="web10"] .bg-glow { display: none; }
[data-theme="web10"] .bg-noise { display: none; }

[data-theme="web10"] .logo-text,
[data-theme="web10"] .main-nav a { color: #fff; }
[data-theme="web10"] .main-nav a.active { color: #ffdd44; background: rgba(0,0,0,0.2); }
[data-theme="web10"] .main-nav a::after { display: none; }
[data-theme="web10"] .main-nav a:hover { color: #ffdd44; background: rgba(0,0,0,0.15); }
[data-theme="web10"] .theme-selector { background: #335588; border-color: #224477; color: #ddd; }

[data-theme="web10"] .article-card {
  border: 1px solid #b8a888;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.12);
  border-radius: 3px;
}

[data-theme="web10"] .article-card:hover {
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  transform: none;
  border-color: #0066cc;
}

[data-theme="web10"] .article-card::before { display: none; }
[data-theme="web10"] .article-card:hover .card-image img { transform: none; }

[data-theme="web10"] .card-badge {
  backdrop-filter: none;
  border-radius: 2px;
  font-family: Verdana, sans-serif;
  font-size: 0.6rem;
}

[data-theme="web10"] .btn-primary {
  background: linear-gradient(180deg, #5588cc 0%, #3366aa 100%);
  border: 2px outset #6699dd;
  border-radius: 3px;
  color: #fff;
  font-family: Verdana, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="web10"] .btn-primary:hover {
  background: linear-gradient(180deg, #6699dd 0%, #4477bb 100%);
  transform: none;
  box-shadow: none;
}

[data-theme="web10"] .site-footer {
  background: linear-gradient(180deg, #5577aa 0%, #335588 100%);
  border-top: 3px solid #224477;
}

[data-theme="web10"] .site-footer p { color: #ccc; }

[data-theme="web10"] .search-box input,
[data-theme="web10"] .filter-controls select {
  border: 2px inset #ccc;
  border-radius: 2px;
}

/* --- WEB 2.0: Glossy rounded social era --- */
[data-theme="web20"] {
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #fafbfc;
  --surface: #e4e6ea;
  --border: #ccd0d5;
  --text: #1c1e21;
  --text-muted: #65676b;
  --accent: #1877f2;
  --accent-light: #4599ff;
  --accent-glow: rgba(24, 119, 242, 0.1);
  --review: #e74c3c;
  --preview: #27ae60;
  --news: #1877f2;
  --feature: #f39c12;
  --retro: #8e44ad;
  --score-5: #27ae60;
  --score-4: #2ecc71;
  --score-3: #f39c12;
  --score-2: #e67e22;
  --score-1: #e74c3c;
  --radius: 8px;
  --radius-lg: 12px;
  --font-display: 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Segoe UI', Helvetica, Arial, sans-serif;
}

[data-theme="web20"] .site-header {
  background: #fff;
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
  backdrop-filter: none;
}

[data-theme="web20"] .bg-glow { display: none; }
[data-theme="web20"] .bg-noise { display: none; }

[data-theme="web20"] .logo-text { color: #1877f2; font-weight: 700; }

[data-theme="web20"] .main-nav a {
  color: #65676b;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

[data-theme="web20"] .main-nav a::after { display: none; }

[data-theme="web20"] .main-nav a.active {
  color: #1877f2;
  background: #e7f3ff;
}

[data-theme="web20"] .main-nav a:hover {
  background: #f0f2f5;
  color: #1c1e21;
}

[data-theme="web20"] .article-card {
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 12px;
}

[data-theme="web20"] .article-card::before { display: none; }

[data-theme="web20"] .article-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  border-color: transparent;
}

[data-theme="web20"] .article-card:hover .card-image img { transform: none; }

[data-theme="web20"] .card-badge {
  backdrop-filter: none;
  border-radius: 6px;
  font-weight: 700;
}

[data-theme="web20"] .card-score {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

[data-theme="web20"] .card-meta .author { color: #1877f2; }

[data-theme="web20"] .btn-primary {
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: none;
}

[data-theme="web20"] .btn-primary:hover {
  background: #166fe5;
  transform: none;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

[data-theme="web20"] .search-box input {
  background: #f0f2f5;
  border: none;
  border-radius: 20px;
  padding-left: 2.8rem;
}

[data-theme="web20"] .search-box input:focus {
  box-shadow: 0 0 0 2px #1877f2;
  background: #fff;
}

[data-theme="web20"] .filter-controls select {
  background: #f0f2f5;
  border: none;
  border-radius: 8px;
}

[data-theme="web20"] .theme-selector {
  background: #f0f2f5;
  border: none;
  border-radius: 8px;
}

[data-theme="web20"] .site-footer {
  background: #fff;
  border-top: 1px solid #ccd0d5;
}

[data-theme="web20"] .site-footer p { color: #65676b; }

[data-theme="web20"] .comment {
  background: #f0f2f5;
  border: none;
  border-radius: 18px;
}

[data-theme="web20"] .detail-header h1 {
  font-weight: 800;
}

/* --- ZX SPECTRUM: Sinclair BASIC with attribute clash & loading stripes --- */
[data-theme="speccy"] {
  --bg: #c8c8c8;
  --bg-card: #c8c8c8;
  --bg-card-hover: #b8b8b8;
  --surface: #b0b0b0;
  --border: #000;
  --text: #000;
  --text-muted: #444;
  --accent: #cc0000;
  --accent-light: #ff0000;
  --accent-glow: rgba(204, 0, 0, 0.1);
  --review: #cc0000;
  --preview: #00cc00;
  --news: #0000cc;
  --feature: #cccc00;
  --retro: #cc00cc;
  --score-5: #00cc00;
  --score-4: #00cccc;
  --score-3: #cccc00;
  --score-2: #cc6600;
  --score-1: #cc0000;
  --radius: 0px;
  --radius-lg: 0px;
  --font-display: 'Courier New', monospace;
  --font-heading: 'Courier New', monospace;
  --font-body: 'Courier New', monospace;
  --font-editorial: 'Courier New', monospace;
}

/* Loading stripes animation */
@keyframes speccy-loading-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}

[data-theme="speccy"] body {
  background-color: #c8c8c8;
  letter-spacing: 0.06em;
}

[data-theme="speccy"] .site-header {
  background: #0000cc;
  border-bottom: 4px solid #ffff00;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
}

[data-theme="speccy"] .bg-glow { display: none; }

/* Loading stripes background — the famous Spectrum tape-loading bars */
[data-theme="speccy"] .bg-noise {
  display: block;
  opacity: 0.08;
  background: repeating-linear-gradient(
    0deg,
    #cc0000 0px, #cc0000 4px,
    #cccc00 4px, #cccc00 8px,
    #00cc00 8px, #00cc00 12px,
    #00cccc 12px, #00cccc 16px,
    #0000cc 16px, #0000cc 20px,
    #cc00cc 20px, #cc00cc 24px
  );
  background-size: 200px 100%;
  animation: speccy-loading-stripes 8s linear infinite;
}

[data-theme="speccy"] .logo-text {
  font-family: 'Courier New', monospace;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="speccy"] .logo-img {
  filter: none;
  height: 40px;
  image-rendering: pixelated;
}

[data-theme="speccy"] .main-nav a {
  font-family: 'Courier New', monospace;
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
}

[data-theme="speccy"] .main-nav a::after { display: none; }
[data-theme="speccy"] .main-nav a.active { color: #000; background: #ffff00; }
[data-theme="speccy"] .main-nav a:hover { color: #ffff00; background: rgba(255, 255, 0, 0.1); }

[data-theme="speccy"] .theme-selector {
  background: #0000aa;
  border: 2px solid #ffff00;
  color: #fff;
}

/* Cards with attribute-clash bright colour borders cycling through Spectrum BRIGHT palette */
[data-theme="speccy"] .article-card {
  border: 3px solid #000;
  border-radius: 0;
  background: #c8c8c8;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

[data-theme="speccy"] .article-card:nth-child(7n+1) { border-color: #cc0000; }
[data-theme="speccy"] .article-card:nth-child(7n+2) { border-color: #0000cc; }
[data-theme="speccy"] .article-card:nth-child(7n+3) { border-color: #00cc00; }
[data-theme="speccy"] .article-card:nth-child(7n+4) { border-color: #cccc00; }
[data-theme="speccy"] .article-card:nth-child(7n+5) { border-color: #00cccc; }
[data-theme="speccy"] .article-card:nth-child(7n+6) { border-color: #cc00cc; }
[data-theme="speccy"] .article-card:nth-child(7n)   { border-color: #cc0000; }

[data-theme="speccy"] .article-card::before { display: none; }

[data-theme="speccy"] .article-card:hover {
  transform: none;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="speccy"] .article-card:hover .card-image img { transform: none; }

/* Attribute clash colour-block grid overlay on card images */
[data-theme="speccy"] .card-image {
  position: relative;
}

[data-theme="speccy"] .card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(204, 0, 0, 0.04) 0px, rgba(204, 0, 0, 0.04) 32px,
      rgba(0, 0, 204, 0.04) 32px, rgba(0, 0, 204, 0.04) 64px,
      rgba(0, 204, 0, 0.04) 64px, rgba(0, 204, 0, 0.04) 96px,
      rgba(204, 204, 0, 0.04) 96px, rgba(204, 204, 0, 0.04) 128px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 32px,
      rgba(0, 0, 0, 0.03) 32px, rgba(0, 0, 0, 0.03) 33px
    );
  pointer-events: none;
  z-index: 1;
}

[data-theme="speccy"] .card-body h3 {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Score badges with Spectrum BRIGHT colours */
[data-theme="speccy"] .card-badge {
  backdrop-filter: none;
  border: 2px solid #000;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="speccy"] .card-score {
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  border: 3px solid #000;
}

[data-theme="speccy"] .score-5 { background: #00cc00; color: #000; }
[data-theme="speccy"] .score-4 { background: #00cccc; color: #000; }
[data-theme="speccy"] .score-3 { background: #cccc00; color: #000; }
[data-theme="speccy"] .score-2 { background: #cc6600; color: #000; }
[data-theme="speccy"] .score-1 { background: #cc0000; color: #fff; }

[data-theme="speccy"] .badge-review { background: #cc0000 !important; color: #fff !important; }
[data-theme="speccy"] .badge-news { background: #0000cc !important; color: #fff !important; }
[data-theme="speccy"] .badge-feature { background: #cccc00 !important; color: #000 !important; }
[data-theme="speccy"] .badge-preview { background: #00cc00 !important; color: #000 !important; }
[data-theme="speccy"] .badge-retro { background: #cc00cc !important; color: #fff !important; }

[data-theme="speccy"] .search-box input,
[data-theme="speccy"] .filter-controls select {
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  color: #000;
  font-family: 'Courier New', monospace;
}

[data-theme="speccy"] .search-box input:focus {
  border-color: #cc0000;
  box-shadow: none;
}

[data-theme="speccy"] .btn-primary {
  background: #cc0000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

[data-theme="speccy"] .btn-primary:hover {
  background: #ff0000;
  color: #fff;
  transform: none;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="speccy"] .site-footer {
  background: #0000cc;
  border-top: 4px solid #ffff00;
  text-align: center;
}

[data-theme="speccy"] .site-footer p {
  color: #fff;
  font-family: 'Courier New', monospace;
}

/* Sinclair copyright in footer */
[data-theme="speccy"] .site-footer::after {
  content: '\00A9  1982 Sinclair Research Ltd';
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: #aaa;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
  letter-spacing: 0.05em;
}

[data-theme="speccy"] .detail-header h1 {
  font-family: 'Courier New', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="speccy"] .detail-type-badge {
  color: #fff !important;
  background: #cc0000 !important;
  border: 2px solid #000;
  border-bottom: 2px solid #000 !important;
  border-radius: 0 !important;
  padding: 0.2rem 0.5rem !important;
}

[data-theme="speccy"] .detail-score-display {
  border: 3px solid #000;
  border-top: 4px solid #cc0000;
  border-radius: 0;
  background: #b0b0b0;
}

[data-theme="speccy"] .detail-score-display::after {
  background: #b0b0b0;
  color: #cc0000;
  font-family: 'Courier New', monospace;
}

[data-theme="speccy"] .detail-score-number {
  border: 3px solid #000;
  border-radius: 0;
}

[data-theme="speccy"] .comment {
  border: 2px solid #000;
  border-radius: 0;
  background: #b8b8b8;
}

/* Loading screen tribute */
[data-theme="speccy"] .loading {
  font-family: 'Courier New', monospace;
  color: #000;
}

[data-theme="speccy"] .loading::after {
  border-color: #cc0000;
  border-top-color: #0000cc;
}

/* --- COMMODORE 64: BASIC V2 screen with PETSCII borders & blinking cursor --- */
[data-theme="c64"] {
  --bg: #4040e0;
  --bg-card: #3030c0;
  --bg-card-hover: #5050f0;
  --surface: #3030c0;
  --border: #7070ff;
  --text: #a0a0ff;
  --text-muted: #7070cc;
  --accent: #70a0ff;
  --accent-light: #a0c0ff;
  --accent-glow: rgba(112, 160, 255, 0.15);
  --review: #70a0ff;
  --preview: #50e050;
  --news: #70a0ff;
  --feature: #e0e050;
  --retro: #e07050;
  --score-5: #50e050;
  --score-4: #70a0ff;
  --score-3: #e0e050;
  --score-2: #e07050;
  --score-1: #e05050;
  --radius: 0px;
  --radius-lg: 0px;
  --font-display: 'Courier New', 'Lucida Console', monospace;
  --font-heading: 'Courier New', 'Lucida Console', monospace;
  --font-body: 'Courier New', 'Lucida Console', monospace;
  --font-editorial: 'Courier New', 'Lucida Console', monospace;
}

/* Blinking C64 cursor animation */
@keyframes c64blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

[data-theme="c64"] body {
  background-color: #4040e0;
}

[data-theme="c64"] .site-header {
  background: #2020a0;
  border-bottom: 4px solid #7070ff;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
}

/* BASIC V2 prompt in header */
[data-theme="c64"] .site-header::after {
  content: '**** COMMODORE 64 BASIC V2 ****';
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.55rem;
  color: #7070cc;
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: #2020a0;
  border-top: 1px solid #3030c0;
}

[data-theme="c64"] .bg-glow { display: none; }
[data-theme="c64"] .bg-noise { display: none; }

[data-theme="c64"] .logo-text {
  font-family: 'Courier New', monospace;
  color: #a0a0ff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="c64"] .logo-img {
  filter: brightness(0.7) sepia(1) hue-rotate(200deg) saturate(3);
  height: 40px;
  image-rendering: pixelated;
}

[data-theme="c64"] .main-nav a {
  font-family: 'Courier New', monospace;
  color: #7070cc;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="c64"] .main-nav a::after { display: none; }
[data-theme="c64"] .main-nav a.active { color: #4040e0; background: #a0a0ff; font-weight: 700; }
[data-theme="c64"] .main-nav a:hover { color: #a0a0ff; }

[data-theme="c64"] .theme-selector {
  background: #2020a0;
  border: 2px solid #7070ff;
  color: #a0a0ff;
}

/* Cards with PETSCII-style thick borders and reverse-video headers */
[data-theme="c64"] .article-card {
  border: 3px solid #7070ff;
  border-radius: 0;
  background: #3030c0;
  box-shadow: none;
  position: relative;
}

/* Reverse-video title bar on cards */
[data-theme="c64"] .article-card::before {
  content: '';
  display: block;
  height: 4px;
  background: #a0a0ff;
  margin: 0;
  border-radius: 0;
}

[data-theme="c64"] .article-card:hover {
  transform: none;
  box-shadow: 4px 4px 0 #2020a0;
  border-color: #a0a0ff;
}

[data-theme="c64"] .article-card:hover .card-image img { transform: none; }

/* Low-res posterize effect on images */
[data-theme="c64"] .card-image img {
  filter: contrast(1.3) saturate(0.3) brightness(0.9);
}

[data-theme="c64"] .article-card:hover .card-image img {
  filter: contrast(1.3) saturate(0.3) brightness(0.9);
}

/* Card headers in reverse video (light bg, dark text) */
[data-theme="c64"] .card-body h3 {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #4040e0;
  background: #a0a0ff;
  padding: 4px 8px;
  margin: 0 -0.75rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

[data-theme="c64"] .card-meta { color: #7070cc; }
[data-theme="c64"] .card-meta .author { color: #a0c0ff; }
[data-theme="c64"] .card-comments { color: #7070cc; }

[data-theme="c64"] .card-badge {
  backdrop-filter: none;
  border: 2px solid #7070ff;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="c64"] .card-score {
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  border: 3px solid #7070ff;
}

/* Search input with blinking cursor */
[data-theme="c64"] .search-box input,
[data-theme="c64"] .filter-controls select {
  background: #2020a0;
  border: 3px solid #7070ff;
  border-radius: 0;
  color: #a0a0ff;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

[data-theme="c64"] .search-box input::placeholder {
  color: #5050aa;
}

[data-theme="c64"] .search-box input:focus {
  border-color: #a0a0ff;
  box-shadow: none;
}

[data-theme="c64"] .search-box input:focus::placeholder {
  animation: c64blink 1s step-end infinite;
}

[data-theme="c64"] .results-info { color: #7070cc; }

/* Buttons like C64 function keys — rectangular with slight bevel */
[data-theme="c64"] .btn-primary {
  background: #7070ff;
  color: #2020a0;
  border: 2px solid #a0a0ff;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.2), inset 2px 2px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="c64"] .btn-primary:hover {
  background: #a0a0ff;
  color: #2020a0;
  transform: none;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2), inset -2px -2px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="c64"] .site-footer {
  background: #2020a0;
  border-top: 4px solid #7070ff;
}

[data-theme="c64"] .site-footer p { color: #7070cc; font-family: 'Courier New', monospace; }

[data-theme="c64"] .detail-header h1 {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #a0a0ff;
  letter-spacing: 0.04em;
}

[data-theme="c64"] .detail-body { color: #a0a0ff; }

[data-theme="c64"] .detail-type-badge {
  color: #4040e0 !important;
  background: #a0a0ff !important;
  border: 2px solid #7070ff;
  border-bottom: 2px solid #7070ff !important;
  border-radius: 0 !important;
  padding: 0.2rem 0.5rem !important;
  font-family: 'Courier New', monospace;
}

[data-theme="c64"] .detail-score-display {
  border: 3px solid #7070ff;
  border-top: 4px solid #a0a0ff;
  border-radius: 0;
  background: #3030c0;
}

[data-theme="c64"] .detail-score-display::after {
  background: #3030c0;
  color: #a0a0ff;
  font-family: 'Courier New', monospace;
}

[data-theme="c64"] .detail-score-number {
  border: 3px solid #7070ff;
  border-radius: 0;
}

[data-theme="c64"] .comment {
  border: 3px solid #7070ff;
  border-radius: 0;
  background: #3030c0;
}

[data-theme="c64"] .comment-meta .comment-author { color: #a0c0ff; }

[data-theme="c64"] .loading { color: #7070cc; }
[data-theme="c64"] .loading::after { border-color: #3030c0; border-top-color: #a0a0ff; }

/* --- AATG: Flagship theme --- */
[data-theme="aatg"] {
  --bg: #0c0e18;
  --bg-card: #141828;
  --bg-card-hover: #1c2240;
  --surface: #1a1f35;
  --border: #252d4a;
  --text: #e2e6f0;
  --text-muted: #7a82a0;
  --accent: #c8df45;
  --accent-light: #daea80;
  --accent-glow: rgba(200, 223, 69, 0.15);
  --blue: #6b83b0;
  --score-5: #c8df45;
  --score-4: #8ebf5a;
  --score-3: #6b83b0;
  --score-2: #8a6a50;
  --score-1: #6a3a3a;
  --review: #6b83b0;
  --preview: #c8df45;
  --news: #5a8a9a;
  --feature: #b07050;
  --retro: #9a8a40;
}

[data-theme="aatg"] .site-header {
  border-bottom-color: rgba(200, 223, 69, 0.2);
}

/* DDR logo animation handles AATG logo glow */

[data-theme="aatg"] .article-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

[data-theme="aatg"] .detail-score-display {
  border-top-color: var(--accent);
}

[data-theme="aatg"] .btn-primary {
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="aatg"] .btn-primary:hover {
  background: var(--accent);
  color: #0c0e18;
}

/* --- NEON: Electric nightclub --- */
[data-theme="neon"] {
  --bg: #050510;
  --bg-card: #0a0a1a;
  --bg-card-hover: #10102a;
  --surface: #0c0c20;
  --border: #1a1a3a;
  --text: #f0f0ff;
  --text-muted: #8080b0;
  --accent: #ff00ff;
  --accent-light: #ff66ff;
  --accent-glow: rgba(255, 0, 255, 0.2);
  --review: #ff00ff;
  --preview: #00ff66;
  --news: #00ccff;
  --feature: #ff6600;
  --retro: #ffff00;
  --score-5: #00ff66;
  --score-4: #00ccff;
  --score-3: #ffff00;
  --score-2: #ff6600;
  --score-1: #ff0033;
}

[data-theme="neon"] .site-header {
  background: rgba(5, 5, 16, 0.9);
  border-bottom: 2px solid #ff00ff;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.15);
}

[data-theme="neon"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(255, 0, 255, 0.08) 0%, transparent 70%);
  animation: glowPulse 6s ease-in-out infinite;
}

[data-theme="neon"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(0, 204, 255, 0.14) 0%, transparent 70%);
  animation: glowPulse 8s ease-in-out infinite reverse;
}

[data-theme="neon"] .article-card {
  border: 1px solid rgba(255, 0, 255, 0.15);
  background: rgba(10, 10, 26, 0.8);
}

[data-theme="neon"] .article-card::before {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 204, 255, 0.12), transparent 60%);
}

[data-theme="neon"] .article-card:hover {
  border-color: #ff00ff;
  box-shadow:
    0 0 20px rgba(255, 0, 255, 0.25),
    0 0 50px rgba(255, 0, 255, 0.1),
    inset 0 0 20px rgba(255, 0, 255, 0.12);
  transform: translateY(-4px);
}

[data-theme="neon"] .main-nav a { color: #8080b0; }
[data-theme="neon"] .main-nav a.active { color: #ff00ff; text-shadow: 0 0 10px rgba(255, 0, 255, 0.5); }
[data-theme="neon"] .main-nav a::after { background: #ff00ff; box-shadow: 0 0 10px #ff00ff; }
[data-theme="neon"] .main-nav a:hover { color: #ff66ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.3); }

[data-theme="neon"] .logo-text {
  text-shadow: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.2);
}

[data-theme="neon"] .logo-img {
  filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.4)) hue-rotate(280deg) saturate(2);
}

[data-theme="neon"] .btn-primary {
  background: transparent;
  border: 2px solid #ff00ff;
  color: #ff00ff;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.08);
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

[data-theme="neon"] .btn-primary:hover {
  background: rgba(255, 0, 255, 0.15);
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), inset 0 0 25px rgba(255, 0, 255, 0.15);
  text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
}

[data-theme="neon"] .card-badge {
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

[data-theme="neon"] .card-score {
  box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
  color: #050510;
}

[data-theme="neon"] .score-1,
[data-theme="neon"] .score-2 {
  color: #fff;
}

[data-theme="neon"] .search-box input:focus {
  border-color: #ff00ff;
  box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.15), 0 0 20px rgba(255, 0, 255, 0.1);
}

/* --- FLUORESCENT: Acid bright on black --- */
[data-theme="fluoro"] {
  --bg: #0a0a0a;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --surface: #141414;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-muted: #999;
  --accent: #39ff14;
  --accent-light: #7fff50;
  --accent-glow: rgba(57, 255, 20, 0.15);
  --review: #ff1493;
  --preview: #39ff14;
  --news: #00e5ff;
  --feature: #ff6f00;
  --retro: #ffea00;
  --score-5: #39ff14;
  --score-4: #00e5ff;
  --score-3: #ffea00;
  --score-2: #ff6f00;
  --score-1: #ff1744;
}

[data-theme="fluoro"] .site-header {
  background: #0a0a0a;
  border-bottom: 3px solid #39ff14;
  backdrop-filter: none;
  box-shadow: 0 2px 20px rgba(57, 255, 20, 0.1);
}

[data-theme="fluoro"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(57, 255, 20, 0.12) 0%, transparent 70%);
}

[data-theme="fluoro"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(255, 20, 147, 0.1) 0%, transparent 70%);
}

[data-theme="fluoro"] .article-card {
  border: 2px solid #222;
}

[data-theme="fluoro"] .article-card::before { display: none; }

[data-theme="fluoro"] .article-card:hover {
  border-color: #39ff14;
  box-shadow: 0 0 0 1px #39ff14, 0 0 30px rgba(57, 255, 20, 0.15);
  transform: translateY(-3px);
}

[data-theme="fluoro"] .article-card:hover .card-image img {
  filter: saturate(1.4) contrast(1.1);
}

[data-theme="fluoro"] .card-badge {
  backdrop-filter: none;
  font-weight: 800;
  text-transform: uppercase;
}

[data-theme="fluoro"] .main-nav a { color: #888; }
[data-theme="fluoro"] .main-nav a.active { color: #39ff14; }
[data-theme="fluoro"] .main-nav a::after { background: #39ff14; }
[data-theme="fluoro"] .main-nav a:hover { color: #7fff50; }

[data-theme="fluoro"] .logo-text { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.3); }
[data-theme="fluoro"] .logo-img { filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.3)) hue-rotate(60deg) saturate(3) brightness(1.5); }

[data-theme="fluoro"] .btn-primary {
  background: #39ff14;
  color: #000;
  font-weight: 800;
  border: none;
  text-transform: uppercase;
}

[data-theme="fluoro"] .btn-primary:hover {
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.5);
  background: #7fff50;
}

[data-theme="fluoro"] .search-box input:focus {
  border-color: #39ff14;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2);
}

/* --- MATRIX: Green rain terminal --- */
[data-theme="matrix"] {
  --bg: #000800;
  --bg-card: #001200;
  --bg-card-hover: #001a00;
  --surface: #001000;
  --border: #003300;
  --text: #00ff41;
  --text-muted: #008f20;
  --accent: #00ff41;
  --accent-light: #66ff88;
  --accent-glow: rgba(0, 255, 65, 0.12);
  --review: #00ff41;
  --preview: #00cc33;
  --news: #00ff41;
  --feature: #00aa30;
  --retro: #009920;
  --score-5: #00ff41;
  --score-4: #00dd38;
  --score-3: #00aa30;
  --score-2: #008820;
  --score-1: #006618;
  --font-display: 'Courier New', 'Lucida Console', monospace;
  --font-heading: 'Courier New', 'Lucida Console', monospace;
  --font-body: 'Courier New', 'Lucida Console', monospace;
  --radius: 0;
  --radius-lg: 0;
}

[data-theme="matrix"] .site-header {
  background: rgba(0, 8, 0, 0.95);
  border-bottom: 1px solid #003300;
  backdrop-filter: none;
}

[data-theme="matrix"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(0, 255, 65, 0.1) 0%, transparent 70%);
}

[data-theme="matrix"] .bg-glow--2 { display: none; }

/* Falling characters effect via noise */
[data-theme="matrix"] .bg-noise {
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' fill='%2300ff41' font-family='monospace' font-size='12'%3E1%3C/text%3E%3Ctext x='30' y='60' fill='%2300ff41' font-family='monospace' font-size='10'%3E0%3C/text%3E%3Ctext x='50' y='30' fill='%2300ff41' font-family='monospace' font-size='14'%3E1%3C/text%3E%3Ctext x='70' y='80' fill='%2300ff41' font-family='monospace' font-size='11'%3E0%3C/text%3E%3Ctext x='20' y='120' fill='%2300ff41' font-family='monospace' font-size='9'%3E1%3C/text%3E%3Ctext x='80' y='150' fill='%2300ff41' font-family='monospace' font-size='13'%3E0%3C/text%3E%3Ctext x='40' y='180' fill='%2300ff41' font-family='monospace' font-size='10'%3E1%3C/text%3E%3Ctext x='60' y='100' fill='%2300ff41' font-family='monospace' font-size='12'%3E0%3C/text%3E%3C/svg%3E");
  background-size: 100px 200px;
  animation: matrixScroll 20s linear infinite;
}

@keyframes matrixScroll {
  from { background-position: 0 0; }
  to { background-position: 0 200px; }
}

[data-theme="matrix"] .article-card {
  border: 1px solid #003300;
  border-radius: 0;
  background: rgba(0, 12, 0, 0.8);
}

[data-theme="matrix"] .article-card::before { display: none; }

[data-theme="matrix"] .article-card:hover {
  border-color: #00ff41;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.15), inset 0 0 15px rgba(0, 255, 65, 0.03);
  transform: none;
}

[data-theme="matrix"] .article-card:hover .card-image img {
  filter: grayscale(0.5) brightness(0.8) sepia(0.3) hue-rotate(70deg);
  transform: none;
}

[data-theme="matrix"] .card-image img {
  filter: grayscale(0.7) brightness(0.7) sepia(0.2) hue-rotate(70deg);
}

[data-theme="matrix"] .card-badge {
  backdrop-filter: none;
  background: #001a00 !important;
  color: #00ff41 !important;
  border: 1px solid #003300;
  border-radius: 0;
}

[data-theme="matrix"] .card-score {
  border-radius: 0;
  border: 1px solid #003300;
}

[data-theme="matrix"] .main-nav a::after { display: none; }
[data-theme="matrix"] .main-nav a.active { color: #00ff41; text-decoration: underline; }
[data-theme="matrix"] .main-nav a:hover { color: #66ff88; }
[data-theme="matrix"] .logo-text { color: #00ff41; text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); }
[data-theme="matrix"] .logo-img { filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(70deg) saturate(5) drop-shadow(0 0 8px rgba(0, 255, 65, 0.4)); }

[data-theme="matrix"] .btn-primary {
  background: transparent;
  border: 1px solid #00ff41;
  color: #00ff41;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Courier New', monospace;
}

[data-theme="matrix"] .btn-primary:hover {
  background: rgba(0, 255, 65, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
  transform: none;
}

[data-theme="matrix"] .search-box input,
[data-theme="matrix"] .filter-controls select,
[data-theme="matrix"] .theme-selector {
  border-color: #003300;
  color: #00ff41;
  background: #000800;
}

[data-theme="matrix"] .search-box input:focus {
  border-color: #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.15);
}

/* --- TWEE PINK: Pastel kawaii --- */
[data-theme="pink"] {
  --bg: #fff0f5;
  --bg-card: #fff8fa;
  --bg-card-hover: #ffe8f0;
  --surface: #fce4ec;
  --border: #f8bbd0;
  --text: #4a2040;
  --text-muted: #9a6080;
  --accent: #e91e8c;
  --accent-light: #f06ab0;
  --accent-glow: rgba(233, 30, 140, 0.1);
  --review: #e91e8c;
  --preview: #ab47bc;
  --news: #f06292;
  --feature: #ec407a;
  --retro: #ce93d8;
  --score-5: #e91e8c;
  --score-4: #f06292;
  --score-3: #ce93d8;
  --score-2: #ba68c8;
  --score-1: #8e4585;
  --radius: 20px;
  --radius-lg: 24px;
}

[data-theme="pink"] .site-header {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  border-bottom: 3px solid #f48fb1;
  backdrop-filter: none;
}

[data-theme="pink"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(233, 30, 140, 0.14) 0%, transparent 70%);
}

[data-theme="pink"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(171, 71, 188, 0.12) 0%, transparent 70%);
}

[data-theme="pink"] .bg-noise { opacity: 0; }

[data-theme="pink"] .article-card {
  border: 2px solid #f8bbd0;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(233, 30, 140, 0.08);
}

[data-theme="pink"] .article-card::before { display: none; }

[data-theme="pink"] .article-card:hover {
  border-color: #e91e8c;
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 0 10px 30px rgba(233, 30, 140, 0.15);
}

[data-theme="pink"] .card-image {
  border-radius: 18px 18px 0 0;
}

[data-theme="pink"] .card-badge {
  backdrop-filter: none;
  border-radius: 12px;
  font-weight: 700;
}

[data-theme="pink"] .card-score {
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(233, 30, 140, 0.3);
}

[data-theme="pink"] .main-nav a {
  color: #9a6080;
  font-weight: 700;
  border-radius: 20px;
}

[data-theme="pink"] .main-nav a::after { display: none; }
[data-theme="pink"] .main-nav a.active {
  background: #e91e8c;
  color: #fff;
}

[data-theme="pink"] .main-nav a:hover { background: rgba(233, 30, 140, 0.1); color: #e91e8c; }

[data-theme="pink"] .logo-text { color: #e91e8c; }
[data-theme="pink"] .logo-img { filter: drop-shadow(0 0 10px rgba(233, 30, 140, 0.3)) hue-rotate(320deg) saturate(1.5); }

[data-theme="pink"] .btn-primary {
  background: linear-gradient(135deg, #e91e8c, #ab47bc);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 0.85rem 2.5rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(233, 30, 140, 0.3);
}

[data-theme="pink"] .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(233, 30, 140, 0.4);
}

[data-theme="pink"] .search-box input,
[data-theme="pink"] .filter-controls select,
[data-theme="pink"] .theme-selector {
  border-radius: 20px;
  border-color: #f8bbd0;
}

[data-theme="pink"] .search-box input:focus {
  border-color: #e91e8c;
  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

[data-theme="pink"] .site-footer {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  border-top: 3px solid #f48fb1;
}

[data-theme="pink"] .site-footer p { color: #9a6080; }

/* --- BLACK & RED: Dark aggressive --- */
[data-theme="blackred"] {
  --bg: #0a0000;
  --bg-card: #140808;
  --bg-card-hover: #1e0c0c;
  --surface: #180808;
  --border: #3a1010;
  --text: #e0d0d0;
  --text-muted: #8a5a5a;
  --accent: #cc0000;
  --accent-light: #ff2222;
  --accent-glow: rgba(204, 0, 0, 0.2);
  --review: #cc0000;
  --preview: #aa2200;
  --news: #cc0000;
  --feature: #dd3300;
  --retro: #882200;
  --score-5: #cc0000;
  --score-4: #aa2200;
  --score-3: #883a1a;
  --score-2: #663020;
  --score-1: #441a10;
}

[data-theme="blackred"] .site-header {
  background: linear-gradient(180deg, #140808, #0a0000);
  border-bottom: 2px solid #cc0000;
  backdrop-filter: none;
  box-shadow: 0 2px 30px rgba(204, 0, 0, 0.1);
}

[data-theme="blackred"] .bg-glow--1 {
  background: radial-gradient(circle, rgba(204, 0, 0, 0.08) 0%, transparent 70%);
}

[data-theme="blackred"] .bg-glow--2 {
  background: radial-gradient(circle, rgba(204, 0, 0, 0.1) 0%, transparent 70%);
  top: 50%;
  right: -200px;
}

/* Blood drip texture */
[data-theme="blackred"] .bg-noise {
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 3px, rgba(204, 0, 0, 0.12) 3px, transparent 5px
  );
  background-size: auto;
}

[data-theme="blackred"] .article-card {
  border: 1px solid #3a1010;
  background: linear-gradient(180deg, #140808, #0e0404);
}

[data-theme="blackred"] .article-card::before {
  background: linear-gradient(180deg, rgba(204, 0, 0, 0.14), transparent 40%);
}

[data-theme="blackred"] .article-card:hover {
  border-color: #cc0000;
  box-shadow: 0 0 30px rgba(204, 0, 0, 0.2), 0 0 60px rgba(204, 0, 0, 0.12);
  transform: translateY(-3px);
}

[data-theme="blackred"] .card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 0, 0, 0.2), rgba(10, 0, 0, 0.5));
  pointer-events: none;
  mix-blend-mode: multiply;
}

[data-theme="blackred"] .card-image img {
  filter: saturate(0.6) contrast(1.1);
}

[data-theme="blackred"] .article-card:hover .card-image img {
  filter: saturate(0.8) contrast(1.15);
}

[data-theme="blackred"] .main-nav a { color: #8a5a5a; }
[data-theme="blackred"] .main-nav a.active { color: #ff2222; }
[data-theme="blackred"] .main-nav a::after { background: #cc0000; }
[data-theme="blackred"] .main-nav a:hover { color: #e0d0d0; }

[data-theme="blackred"] .logo-text { color: #cc0000; }
[data-theme="blackred"] .logo-img {
  filter: drop-shadow(0 0 10px rgba(204, 0, 0, 0.3)) saturate(0) brightness(0.7) sepia(1) hue-rotate(-30deg) saturate(5);
}

[data-theme="blackred"] .btn-primary {
  background: #cc0000;
  color: #fff;
  border: none;
  box-shadow: 0 0 20px rgba(204, 0, 0, 0.3);
}

[data-theme="blackred"] .btn-primary:hover {
  background: #ff2222;
  box-shadow: 0 0 35px rgba(204, 0, 0, 0.5);
}

[data-theme="blackred"] .card-badge {
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

[data-theme="blackred"] .search-box input:focus {
  border-color: #cc0000;
  box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
}

/* =============================================
   THEME: Amiga Workbench 1.3
   ============================================= */

[data-theme="amiga"] {
  --bg: #0055aa;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f0;
  --surface: #0044aa;
  --border: #000;
  --text: #000;
  --text-muted: #444;
  --accent: #ff8800;
  --accent-light: #ffaa33;
  --accent-glow: rgba(255, 136, 0, 0.2);
  --review: #ff8800;
  --preview: #000;
  --news: #ff8800;
  --feature: #ffaa33;
  --retro: #ff8800;
  --score-5: #ff8800;
  --score-4: #ffaa33;
  --score-3: #ffffff;
  --score-2: #aaccff;
  --score-1: #6688bb;
  --radius: 0px;
  --radius-lg: 0px;
  --font-display: 'Courier New', 'Lucida Console', monospace;
  --font-heading: 'Courier New', 'Lucida Console', monospace;
  --font-body: 'Courier New', 'Lucida Console', monospace;
  --font-editorial: 'Courier New', 'Lucida Console', monospace;
  cursor: crosshair;
}

/* Workbench blue/white dither desktop pattern */
[data-theme="amiga"] body {
  background-color: #0055aa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23ffffff' opacity='0.15'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23ffffff' opacity='0.15'/%3E%3C/svg%3E");
}

/* Workbench screen bar header — blue with orange stripe */
[data-theme="amiga"] .site-header {
  background: #0055aa;
  border-bottom: none;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
  border-top: 3px solid #ff8800;
}

[data-theme="amiga"] .site-header::after {
  content: '';
  display: block;
  height: 2px;
  background: #ff8800;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

[data-theme="amiga"] .bg-glow { display: none; }

/* Workbench dither pattern in bg-noise */
[data-theme="amiga"] .bg-noise {
  display: block;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23fff'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

/* Cards as Workbench windows — white fill, orange title bar, 3D beveled borders */
[data-theme="amiga"] .article-card {
  background: #ffffff;
  border: 2px outset #aaa;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
  position: relative;
  overflow: visible;
}

/* Orange Workbench window title bar with close/depth gadgets */
[data-theme="amiga"] .article-card::before {
  content: '';
  display: block;
  height: 22px;
  background: #ff8800;
  border-bottom: 2px solid #000;
  margin: 0;
  border-radius: 0;
  position: relative;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  background-image:
    /* close gadget (left square) */
    linear-gradient(#fff, #fff),
    linear-gradient(#000, #000),
    /* depth gadget front (right) */
    linear-gradient(#fff, #fff),
    linear-gradient(#000, #000),
    /* depth gadget back */
    linear-gradient(#ccc, #ccc),
    linear-gradient(#000, #000);
  background-size:
    12px 12px, 16px 16px,
    10px 10px, 14px 14px,
    10px 10px, 14px 14px;
  background-position:
    4px 3px, 2px 1px,
    calc(100% - 4px) 4px, calc(100% - 2px) 2px,
    calc(100% - 20px) 7px, calc(100% - 18px) 5px;
  background-repeat: no-repeat;
}

[data-theme="amiga"] .article-card:hover {
  background: #f0f0f0;
  border-color: #ff8800;
  transform: none;
  box-shadow: 2px 2px 0 #000;
}

/* Workbench gadget-style score badges — square, outset, orange for high scores */
[data-theme="amiga"] .card-badge {
  background: #ff8800;
  color: #000;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  border: 2px outset #ffaa33;
  backdrop-filter: none;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

[data-theme="amiga"] .card-score {
  border-radius: 0;
  border: 2px outset #ccc;
}

[data-theme="amiga"] .score-5 { background: #ff8800; color: #000; border-color: #ffaa33; }
[data-theme="amiga"] .score-4 { background: #ffaa33; color: #000; }
[data-theme="amiga"] .score-3 { background: #fff; color: #000; border-color: #aaa; }
[data-theme="amiga"] .score-2 { background: #aaccff; color: #000; }
[data-theme="amiga"] .score-1 { background: #6688bb; color: #fff; }

/* Nav as Workbench menu items — white text on blue, orange highlight */
[data-theme="amiga"] .main-nav a {
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.04em;
}

[data-theme="amiga"] .main-nav a::after { display: none; }

[data-theme="amiga"] .main-nav a.active {
  color: #fff;
  background: #ff8800;
}

[data-theme="amiga"] .main-nav a:hover {
  color: #fff;
  background: #ff8800;
}

[data-theme="amiga"] .logo-text {
  color: #fff;
  font-family: 'Courier New', monospace;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.05em;
}

[data-theme="amiga"] .logo-img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(90%) saturate(800%) hue-rotate(5deg);
}

/* Workbench gadget buttons — raised 3D with outset borders */
[data-theme="amiga"] .btn-primary {
  background: #ff8800;
  color: #000;
  border: 2px outset #ffaa33;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  box-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="amiga"] .btn-primary:hover {
  background: #ffaa33;
  border: 2px inset #ff8800;
  box-shadow: none;
}

[data-theme="amiga"] .btn-primary:active {
  border-style: inset;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="amiga"] .site-footer {
  background: #0055aa;
  border-top: 2px solid #ff8800;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23ffffff' opacity='0.1'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23ffffff' opacity='0.1'/%3E%3C/svg%3E");
}
[data-theme="amiga"] .site-footer p { color: #fff; font-family: 'Courier New', monospace; }

[data-theme="amiga"] .card-body h3 {
  font-family: 'Courier New', monospace;
  color: #000;
}

[data-theme="amiga"] .card-body p {
  color: #333;
}

[data-theme="amiga"] .detail-header h1 {
  font-family: 'Courier New', monospace;
  color: #ff8800;
  text-shadow: 2px 2px 0 #000;
}

[data-theme="amiga"] .search-box input {
  background: #fff;
  border: 2px inset #888;
  border-radius: 0;
  color: #000;
  font-family: 'Courier New', monospace;
}

[data-theme="amiga"] .search-box input:focus {
  border-color: #ff8800;
  box-shadow: none;
}

[data-theme="amiga"] .filter-controls select {
  background: #fff;
  border: 2px inset #888;
  border-radius: 0;
  color: #000;
  font-family: 'Courier New', monospace;
}

[data-theme="amiga"] .detail-score-display {
  border: 2px outset #ccc;
  border-top: 3px solid #ff8800;
  border-radius: 0;
  background: #fff;
}

[data-theme="amiga"] .detail-score-display::after {
  background: #fff;
  color: #ff8800;
  font-family: 'Courier New', monospace;
}

[data-theme="amiga"] .detail-score-number {
  border: 2px outset #ccc;
  border-radius: 0;
}

[data-theme="amiga"] .comment {
  border: 2px outset #aaa;
  border-radius: 0;
  background: #fff;
}

[data-theme="amiga"] .detail-type-badge {
  color: #000 !important;
  background: #ff8800 !important;
  border: 2px outset #ffaa33;
  border-bottom: 2px outset #ffaa33 !important;
  border-radius: 0 !important;
}

/* =============================================
   THEME: Game Boy — LCD screen with pixel grid & 4-colour palette
   ============================================= */

[data-theme="gameboy"] {
  --bg: #9bbc0f;
  --bg-card: #8bac0f;
  --bg-card-hover: #306230;
  --surface: #8bac0f;
  --border: #306230;
  --text: #0f380f;
  --text-muted: #306230;
  --accent: #0f380f;
  --accent-light: #306230;
  --accent-glow: rgba(15, 56, 15, 0.15);
  --review: #0f380f;
  --preview: #306230;
  --news: #0f380f;
  --feature: #306230;
  --retro: #0f380f;
  --score-5: #0f380f;
  --score-4: #306230;
  --score-3: #8bac0f;
  --score-2: #9bbc0f;
  --score-1: #9bbc0f;
  --radius: 0px;
  --radius-lg: 0px;
  --font-display: 'Courier New', 'Lucida Console', monospace;
  --font-heading: 'Courier New', 'Lucida Console', monospace;
  --font-body: 'Courier New', 'Lucida Console', monospace;
  --font-editorial: 'Courier New', 'Lucida Console', monospace;
}

/* LCD screen bezel — dark rounded border around the entire page */
[data-theme="gameboy"] body {
  background-color: #9bbc0f;
  border: 8px solid #0f380f;
  border-radius: 12px;
  box-shadow: inset 0 0 40px rgba(15, 56, 15, 0.15);
  margin: 4px;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* Pixel grid overlay on the entire page */
[data-theme="gameboy"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(15, 56, 15, 0.06) 0px,
      rgba(15, 56, 15, 0.06) 1px,
      transparent 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(15, 56, 15, 0.06) 0px,
      rgba(15, 56, 15, 0.06) 1px,
      transparent 1px,
      transparent 2px
    );
}

/* Header — darker strip like the Game Boy top band */
[data-theme="gameboy"] .site-header {
  background: #306230;
  border-bottom: 3px solid #0f380f;
  backdrop-filter: none;
  box-shadow: none;
}

[data-theme="gameboy"] .bg-glow { display: none; }
[data-theme="gameboy"] .bg-noise { display: none; }

/* POWER indicator red dot on logo */
[data-theme="gameboy"] .logo-text {
  color: #0f380f;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

[data-theme="gameboy"] .logo-text::before {
  content: '';
  display: inline-block;
  background: #cc0000;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: relative;
  top: -0.5em;
  margin-right: 4px;
  box-shadow: 0 0 3px rgba(204, 0, 0, 0.6);
}

[data-theme="gameboy"] .logo-img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(600%) hue-rotate(80deg);
}

/* Cards — no border-radius, thick borders, pixel-perfect */
[data-theme="gameboy"] .article-card {
  background: #8bac0f;
  border: 2px solid #306230;
  border-radius: 0;
  box-shadow: 4px 4px 0 #0f380f;
  position: relative;
}

[data-theme="gameboy"] .article-card::before { display: none; }

[data-theme="gameboy"] .article-card:hover {
  background: #306230;
  border-color: #0f380f;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0f380f;
}

[data-theme="gameboy"] .article-card:hover .card-body h3,
[data-theme="gameboy"] .article-card:hover .card-body p,
[data-theme="gameboy"] .article-card:hover .card-body span {
  color: #9bbc0f;
}

/* Game Boy green filter on all images */
[data-theme="gameboy"] .card-image img {
  filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(3) contrast(0.9);
}

[data-theme="gameboy"] .article-card:hover .card-image img {
  filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(3) contrast(0.9);
}

/* Score badges — square, no border-radius */
[data-theme="gameboy"] .card-badge {
  background: #0f380f;
  color: #9bbc0f;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  border: none;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 1px;
  backdrop-filter: none;
}

[data-theme="gameboy"] .card-score {
  border-radius: 0;
  border: 2px solid #0f380f;
}

/* Nav — uppercase monospace pixel text */
[data-theme="gameboy"] .main-nav a {
  color: #9bbc0f;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

[data-theme="gameboy"] .main-nav a.active { color: #0f380f; background: #9bbc0f; font-weight: bold; }
[data-theme="gameboy"] .main-nav a::after { background: #0f380f; }
[data-theme="gameboy"] .main-nav a:hover { color: #0f380f; }

/* Buttons — circular like Game Boy A/B buttons with inset shadow */
[data-theme="gameboy"] .btn-primary {
  background: #306230;
  color: #9bbc0f;
  border: 2px solid #0f380f;
  border-radius: 50%;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), 2px 2px 0 #0f380f;
  padding: 12px 20px;
  min-width: 44px;
}

[data-theme="gameboy"] .btn-primary:hover {
  background: #0f380f;
  color: #9bbc0f;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
  transform: translate(1px, 1px);
}

[data-theme="gameboy"] .site-footer {
  background: #306230;
  border-top: 3px solid #0f380f;
}
[data-theme="gameboy"] .site-footer p { color: #9bbc0f; font-family: 'Courier New', monospace; text-transform: uppercase; }

[data-theme="gameboy"] .card-body h3 {
  font-family: 'Courier New', monospace;
  color: #0f380f;
  text-transform: uppercase;
}

[data-theme="gameboy"] .detail-header h1 {
  font-family: 'Courier New', monospace;
  color: #0f380f;
  text-shadow: 2px 2px 0 #306230;
  text-transform: uppercase;
}

/* Green filter on detail images too */
[data-theme="gameboy"] .detail-header img,
[data-theme="gameboy"] .detail-body img {
  filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(3) contrast(0.9);
}

[data-theme="gameboy"] .search-box input {
  background: #9bbc0f;
  border: 2px solid #0f380f;
  border-radius: 0;
  color: #0f380f;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

[data-theme="gameboy"] .search-box input:focus {
  border-color: #0f380f;
  box-shadow: 3px 3px 0 #306230;
}

[data-theme="gameboy"] .detail-score-display {
  border: 2px solid #0f380f;
  border-radius: 0;
  background: #8bac0f;
}

[data-theme="gameboy"] .detail-score-display::after {
  background: #8bac0f;
  color: #0f380f;
  font-family: 'Courier New', monospace;
}

[data-theme="gameboy"] .detail-score-number {
  border: 2px solid #0f380f;
  border-radius: 0;
}

[data-theme="gameboy"] .detail-type-badge {
  color: #9bbc0f !important;
  background: #0f380f !important;
  border: none;
  border-bottom: none !important;
  border-radius: 0 !important;
}

[data-theme="gameboy"] .comment {
  border: 2px solid #306230;
  border-radius: 0;
  background: #8bac0f;
}

[data-theme="gameboy"] .filter-controls select {
  background: #9bbc0f;
  border: 2px solid #0f380f;
  border-radius: 0;
  color: #0f380f;
  font-family: 'Courier New', monospace;
}

/* =============================================
   THEME: SNES / Super Nintendo
   ============================================= */

/* SNES colour reference:
   Console grey: #c8c4bc (light), #a8a4a0 (mid), #888480 (dark)
   Purple accents: #4b2d8e (dark), #6b4dae (mid)
   Buttons: A=#2636c4 (blue circle), B=#c4c426 (yellow circle),
            X=#264bc4 (blue), Y=#26c436 (green)
   D-pad: #2a2a2a dark cross on grey
   Logo text: rainbow gradient (red/orange/yellow/green/blue)
*/

[data-theme="snes"] {
  --bg: #c8c4bc;
  --bg-card: #d8d4cc;
  --bg-card-hover: #e0dcd4;
  --surface: #b8b4ac;
  --border: #a0a098;
  --text: #1a1a2a;
  --text-muted: #5a5a6a;
  --accent: #4b2d8e;
  --accent-light: #6b4dae;
  --accent-glow: rgba(75, 45, 142, 0.12);
  --review: #2636c4;
  --preview: #c42626;
  --news: #26c436;
  --feature: #c4c426;
  --retro: #4b2d8e;
  --score-5: #26c436;
  --score-4: #2636c4;
  --score-3: #c4c426;
  --score-2: #c48026;
  --score-1: #c42626;
  --radius: 8px;
  --radius-lg: 10px;
  --font-display: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-heading: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-editorial: 'Instrument Sans', 'Helvetica Neue', sans-serif;
}

/* Header: console top ridge with purple stripe */
[data-theme="snes"] .site-header {
  background: linear-gradient(180deg, #a8a4a0 0%, #c8c4bc 100%);
  border-bottom: none;
  backdrop-filter: none;
  box-shadow: 0 2px 0 #888480, 0 4px 0 #4b2d8e, 0 6px 12px rgba(0,0,0,0.15);
  position: relative;
}

[data-theme="snes"] .bg-glow { display: none; }
[data-theme="snes"] .bg-noise { display: none; }

/* Console texture — subtle ridged plastic */
[data-theme="snes"] body {
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px, rgba(0,0,0,0.015) 3px, transparent 4px
  );
  background-color: #c8c4bc;
}

/* Cards look like cartridge labels */
[data-theme="snes"] .article-card {
  background: linear-gradient(180deg, #e8e4dc, #d8d4cc);
  border: 2px solid #a0a098;
  border-radius: 8px;
  box-shadow: 2px 3px 0 #888480;
  transition: all 0.2s;
  position: relative;
}

/* Purple cartridge slot stripe at top of card */
[data-theme="snes"] .article-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4b2d8e, #6b4dae, #4b2d8e);
  border-radius: 8px 8px 0 0;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.2s;
}

[data-theme="snes"] .article-card:hover {
  transform: translateY(-3px);
  box-shadow: 2px 6px 16px rgba(75, 45, 142, 0.2);
}

[data-theme="snes"] .article-card:hover::before {
  opacity: 1;
}

/* ABXY button badges — circular like SNES face buttons */
[data-theme="snes"] .card-badge {
  width: auto;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
  backdrop-filter: none;
  padding: 0.25rem 0.7rem;
}

/* Map article types to SNES button colours */
[data-theme="snes"] .badge-review { background: #2636c4 !important; }   /* A button blue */
[data-theme="snes"] .badge-news { background: #26c436 !important; }     /* B button green */
[data-theme="snes"] .badge-feature { background: #c4c426 !important; color: #1a1a2a !important; } /* Y button yellow */
[data-theme="snes"] .badge-preview { background: #c42626 !important; }  /* X button red */
[data-theme="snes"] .badge-retro { background: #4b2d8e !important; }
[data-theme="snes"] .badge-guide { background: #888480 !important; }
[data-theme="snes"] .badge-video { background: #1a1a2a !important; }

/* Score: circular like controller buttons */
[data-theme="snes"] .card-score {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 0.75rem;
  right: 0.75rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
  font-weight: 800;
}

[data-theme="snes"] .score-5 { background: #26c436; color: #fff; }
[data-theme="snes"] .score-4 { background: #2636c4; color: #fff; }
[data-theme="snes"] .score-3 { background: #c4c426; color: #1a1a2a; }
[data-theme="snes"] .score-2 { background: #c48026; color: #fff; }
[data-theme="snes"] .score-1 { background: #c42626; color: #fff; }

/* D-pad shaped nav: cross layout feel */
[data-theme="snes"] .main-nav a {
  color: #5a5a6a;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  transition: all 0.15s;
}

[data-theme="snes"] .main-nav a::after { display: none; }

/* Active states cycle ABXY colours too */
[data-theme="snes"] .main-nav a:nth-child(1).active { background: #2636c4; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(2).active { background: #c42626; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(3).active { background: #26c436; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(4).active { background: #c4c426; color: #1a1a2a; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
[data-theme="snes"] .main-nav a:nth-child(5).active { background: #2636c4; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(6).active { background: #c42626; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(7).active { background: #26c436; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
[data-theme="snes"] .main-nav a:nth-child(8).active { background: #c4c426; color: #1a1a2a; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }

/* ABXY colours on hover — repeating in order */
[data-theme="snes"] .main-nav a:nth-child(1):hover { background: #2636c4; color: #fff; } /* A blue */
[data-theme="snes"] .main-nav a:nth-child(2):hover { background: #c42626; color: #fff; } /* B red (JP layout: green) */
[data-theme="snes"] .main-nav a:nth-child(3):hover { background: #26c436; color: #fff; } /* X green */
[data-theme="snes"] .main-nav a:nth-child(4):hover { background: #c4c426; color: #1a1a2a; } /* Y yellow */
[data-theme="snes"] .main-nav a:nth-child(5):hover { background: #2636c4; color: #fff; } /* A blue */
[data-theme="snes"] .main-nav a:nth-child(6):hover { background: #c42626; color: #fff; } /* B red */
[data-theme="snes"] .main-nav a:nth-child(7):hover { background: #26c436; color: #fff; } /* X green */
[data-theme="snes"] .main-nav a:nth-child(8):hover { background: #c4c426; color: #1a1a2a; } /* Y yellow */

/* Logo: rainbow text like the SNES logo */
[data-theme="snes"] .logo-text {
  background: linear-gradient(90deg, #c42626, #c48026, #c4c426, #26c436, #2636c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15));
}

[data-theme="snes"] .logo-img {
  filter: contrast(1.1) saturate(0.8);
}

/* Power/Reset style buttons */
[data-theme="snes"] .btn-primary {
  background: linear-gradient(180deg, #6b4dae, #4b2d8e);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 3px 8px rgba(75, 45, 142, 0.3);
}

[data-theme="snes"] .btn-primary:hover {
  background: linear-gradient(180deg, #8060c0, #6b4dae);
  transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 5px 14px rgba(75, 45, 142, 0.35);
}

[data-theme="snes"] .btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.15);
}

/* D-pad style filter controls */
[data-theme="snes"] .filter-controls select,
[data-theme="snes"] .search-box input {
  background: #e8e4dc;
  border: 2px solid #a0a098;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

[data-theme="snes"] .search-box input:focus {
  border-color: #4b2d8e;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(75, 45, 142, 0.12);
}

/* Alphabet bar: each button like a controller button */
[data-theme="snes"] .alpha-btn {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.6rem;
  background: #d8d4cc;
  border: 2px solid #a0a098;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

[data-theme="snes"] .alpha-btn:hover { background: #e0dcd4; border-color: #4b2d8e; }
[data-theme="snes"] .alpha-btn.active {
  background: #4b2d8e;
  color: #fff;
  border-color: #3a1d7e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.15);
}

/* Footer: bottom of console */
[data-theme="snes"] .site-footer {
  background: linear-gradient(180deg, #c8c4bc, #a8a4a0);
  border-top: none;
  box-shadow: 0 -2px 0 #888480, 0 -4px 0 #4b2d8e;
}

[data-theme="snes"] .site-footer p { color: #5a5a6a; }

/* Article detail */
[data-theme="snes"] .detail-header h1 {
  color: #4b2d8e;
}

[data-theme="snes"] .detail-type-badge {
  color: #4b2d8e !important;
  border-bottom-color: #4b2d8e !important;
}

/* Score verdict box with controller button inset look */
[data-theme="snes"] .detail-score-display {
  background: linear-gradient(180deg, #e8e4dc, #d8d4cc);
  border: 2px solid #a0a098;
  border-top: 4px solid #4b2d8e;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 2px 3px 0 #888480;
}

[data-theme="snes"] .detail-score-display::after {
  background: #e8e4dc;
  color: #4b2d8e;
}

[data-theme="snes"] .detail-score-number {
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15);
}

/* Comments with cartridge-slot styling */
[data-theme="snes"] .comment {
  border: 2px solid #a0a098;
  border-radius: 8px;
  box-shadow: 1px 2px 0 #888480;
}

/* Contributor cards like game cartridges */
[data-theme="snes"] .contributor-card {
  border: 2px solid #a0a098;
  border-radius: 8px;
  box-shadow: 2px 3px 0 #888480;
  position: relative;
}

[data-theme="snes"] .contributor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4b2d8e, #6b4dae);
  border-radius: 6px 6px 0 0;
}

/* D-pad cursor */
[data-theme="snes"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='6' y='0' width='8' height='20' rx='1' fill='%232a2a2a'/%3E%3Crect x='0' y='6' width='20' height='8' rx='1' fill='%232a2a2a'/%3E%3C/svg%3E") 10 10, auto; }

/* Results bar with purple accent */
[data-theme="snes"] .results-info::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4b2d8e, #6b4dae, transparent 60%);
}

/* Tags as button-coloured pills */
[data-theme="snes"] .tag {
  border-radius: 50px;
  border-color: #a0a098;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

[data-theme="snes"] .tag:hover {
  background: #4b2d8e;
  color: #fff;
}

/* Reaction buttons as SNES face buttons */
[data-theme="snes"] .reaction-btn {
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.1);
}

[data-theme="snes"] .reaction-btn:nth-child(2) { border-color: #2636c4; }
[data-theme="snes"] .reaction-btn:nth-child(3) { border-color: #c42626; }
[data-theme="snes"] .reaction-btn:nth-child(4) { border-color: #26c436; }
[data-theme="snes"] .reaction-btn:nth-child(5) { border-color: #c4c426; }
[data-theme="snes"] .reaction-btn:nth-child(6) { border-color: #4b2d8e; }

/* =============================================
   THEME: PlayStation 1
   ============================================= */

@keyframes ps1-jitter {
  0%  { transform: translate(0, 0) skew(0deg); }
  20% { transform: translate(-1px, 1px) skew(-0.3deg); }
  40% { transform: translate(1px, -1px) skew(0.3deg); }
  60% { transform: translate(-0.5px, -1px) skew(-0.2deg); }
  80% { transform: translate(1px, 0.5px) skew(0.2deg); }
  100%{ transform: translate(0, 0) skew(0deg); }
}

@keyframes ps1-warp {
  0%   { transform: perspective(400px) rotateY(0deg); }
  25%  { transform: perspective(400px) rotateY(0.5deg); }
  50%  { transform: perspective(400px) rotateY(0deg); }
  75%  { transform: perspective(400px) rotateY(-0.5deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}

@keyframes ps1-boot-glow {
  0%, 100% { opacity: 0.5; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 20px rgba(151, 167, 200, 0.6); }
}

@keyframes ps1-scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 6px; }
}

[data-theme="ps1"] {
  --bg: #000000;
  --bg-card: #0a0a1a;
  --bg-card-hover: #12122a;
  --surface: #08081a;
  --border: #1a1a3a;
  --text: #b0b0c8;
  --text-muted: #5a5a80;
  --accent: #97a7c8;
  --accent-light: #c0d0e8;
  --accent-glow: rgba(151, 167, 200, 0.15);
  --review: #97a7c8;
  --preview: #c0a070;
  --news: #7090a8;
  --feature: #a080a0;
  --retro: #808898;
  --score-5: #97a7c8;
  --score-4: #7090a8;
  --score-3: #808898;
  --score-2: #5a5a80;
  --score-1: #3a3a50;
  --radius: 0px;
  --radius-lg: 0px;
  --font-display: 'Courier New', 'Lucida Console', monospace;
  --font-heading: 'Courier New', 'Lucida Console', monospace;
  --font-body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-editorial: 'Courier New', 'Lucida Console', monospace;
}

/* PS1 boot gradient header */
[data-theme="ps1"] .site-header {
  background: linear-gradient(180deg, #000 0%, #0a0a2a 100%);
  border-bottom: none;
  backdrop-filter: none;
  box-shadow: 0 4px 40px rgba(151, 167, 200, 0.08);
  position: relative;
}

/* Sony diamond pattern underline */
[data-theme="ps1"] .site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #e60012 0%, #e60012 25%,
    #f5a623 25%, #f5a623 50%,
    #3fb549 50%, #3fb549 75%,
    #00a0e9 75%, #00a0e9 100%
  );
}

[data-theme="ps1"] .bg-glow--1 {
  background: radial-gradient(circle at 50% 100%, rgba(151, 167, 200, 0.14) 0%, transparent 50%);
}
[data-theme="ps1"] .bg-glow--2 { display: none; }

/* CRT scanlines + interlace */
[data-theme="ps1"] .bg-noise {
  opacity: 1;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  background-size: auto;
  animation: ps1-scanline 0.3s linear infinite;
  pointer-events: none;
}

/* Polygon-style cards with vertex warp */
[data-theme="ps1"] .article-card {
  background: linear-gradient(170deg, #0e0e28 0%, #08081a 60%, #0a0a22 100%);
  border: 1px solid #1a1a3a;
  border-radius: 0;
  box-shadow: 3px 3px 0 #000;
  animation: ps1-warp 4s ease-in-out infinite;
  transform-origin: center center;
}

[data-theme="ps1"] .article-card::before { display: none; }

[data-theme="ps1"] .article-card:hover {
  background: linear-gradient(170deg, #14143a 0%, #0c0c2a 60%, #10103a 100%);
  border-color: #97a7c8;
  transform: perspective(400px) rotateY(-1deg) rotateX(0.5deg);
  box-shadow: 6px 4px 0 #000, 0 0 25px rgba(151, 167, 200, 0.12);
  animation: none;
}

[data-theme="ps1"] .article-card:hover .card-body h3 {
  /* jitter removed */
}

[data-theme="ps1"] .article-card:hover .card-image img {
  filter: saturate(0.6) contrast(1.2);
  transform: skew(-0.3deg, 0.2deg);
}

/* Low-res texture feel */
[data-theme="ps1"] .card-image img {
  image-rendering: auto;
  filter: saturate(0.5) contrast(1.1) brightness(0.9);
}

[data-theme="ps1"] .card-body h3 {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

[data-theme="ps1"] .card-badge {
  background: #1a1a3a !important;
  color: #97a7c8 !important;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid #2a2a4a;
  backdrop-filter: none;
}

[data-theme="ps1"] .card-score {
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
}

/* Nav with PS button colours */
[data-theme="ps1"] .main-nav a {
  color: #5a5a80;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  transition: all 0.15s;
}

[data-theme="ps1"] .main-nav a::after { display: none; }

[data-theme="ps1"] .main-nav a:nth-child(1).active { color: #00a0e9; border-bottom: 2px solid #00a0e9; }
[data-theme="ps1"] .main-nav a:nth-child(2).active { color: #e60012; border-bottom: 2px solid #e60012; }
[data-theme="ps1"] .main-nav a:nth-child(3).active { color: #3fb549; border-bottom: 2px solid #3fb549; }
[data-theme="ps1"] .main-nav a:nth-child(4).active { color: #f5a623; border-bottom: 2px solid #f5a623; }
[data-theme="ps1"] .main-nav a:nth-child(5).active { color: #e60012; border-bottom: 2px solid #e60012; }
[data-theme="ps1"] .main-nav a:nth-child(6).active { color: #00a0e9; border-bottom: 2px solid #00a0e9; }
[data-theme="ps1"] .main-nav a:nth-child(7).active { color: #3fb549; border-bottom: 2px solid #3fb549; }
[data-theme="ps1"] .main-nav a:hover { color: #c0d0e8; }

/* Boot screen logo */
[data-theme="ps1"] .logo-text {
  color: #97a7c8;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 4px;
  animation: ps1-boot-glow 3s ease-in-out infinite;
}

[data-theme="ps1"] .logo-img {
  filter: brightness(0.7) saturate(30%) sepia(20%) hue-rotate(190deg);
  animation: ps1-warp 5s ease-in-out infinite;
}

/* Polygon-style buttons */
[data-theme="ps1"] .btn-primary {
  background: linear-gradient(180deg, #2a2a50, #1a1a3a);
  color: #97a7c8;
  border: 1px solid #3a3a5a;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 3px 3px 0 #000;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  padding-left: 2rem;
  padding-right: 2rem;
}

[data-theme="ps1"] .btn-primary:hover {
  background: linear-gradient(180deg, #3a3a60, #2a2a4a);
  color: #c0d0e8;
  border-color: #97a7c8;
  box-shadow: 5px 5px 0 #000, 0 0 15px rgba(151, 167, 200, 0.15);
  transform: translate(-1px, -1px);
}

[data-theme="ps1"] .site-footer {
  background: #000;
  border-top: none;
  position: relative;
}

[data-theme="ps1"] .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e60012, #f5a623, #3fb549, #00a0e9);
}

[data-theme="ps1"] .site-footer p { color: #5a5a80; font-family: 'Courier New', monospace; }

[data-theme="ps1"] .detail-header h1 {
  color: #97a7c8;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Vertex jitter on the entire article detail on hover */
[data-theme="ps1"] .detail-body {
  font-family: 'Courier New', monospace;
}

[data-theme="ps1"] .detail-score-display {
  border: 1px solid #2a2a4a;
  border-top: 3px solid #97a7c8;
  box-shadow: 3px 3px 0 #000;
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

[data-theme="ps1"] .detail-score-display::after { display: none; }

[data-theme="ps1"] .comment {
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
}

/* Warped search/filter inputs */
[data-theme="ps1"] .search-box input,
[data-theme="ps1"] .filter-controls select,
[data-theme="ps1"] .theme-selector {
  border-radius: 0;
  background: #0a0a1a;
  border: 1px solid #2a2a4a;
  font-family: 'Courier New', monospace;
}

[data-theme="ps1"] .alpha-btn {
  border-radius: 0;
}

/* =============================================
   THEME: Xbox 360 Blades
   ============================================= */

[data-theme="xbox360"] {
  --bg: #2d2d2d;
  --bg-card: #363636;
  --bg-card-hover: #404040;
  --surface: #333333;
  --border: #4a4a4a;
  --text: #e8e8e8;
  --text-muted: #8a8a8a;
  --accent: #9bc848;
  --accent-light: #b0dd60;
  --accent-glow: rgba(155, 200, 72, 0.15);
  --review: #9bc848;
  --preview: #48a0c8;
  --news: #c8a848;
  --feature: #c86848;
  --retro: #6a8a40;
  --score-5: #9bc848;
  --score-4: #80b840;
  --score-3: #c8a848;
  --score-2: #c87848;
  --score-1: #c84848;
  --radius: 6px;
  --radius-lg: 12px;
  --font-display: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-heading: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-editorial: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

[data-theme="xbox360"] .site-header {
  background: linear-gradient(105deg, #1a1a1a 0%, #2d2d2d 40%, #363636 70%, #2d2d2d 100%);
  border-bottom: none;
  backdrop-filter: none;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 40% 90%, 0 100%);
  padding-bottom: 0.5rem;
  box-shadow: none;
}

[data-theme="xbox360"] .bg-glow--1 {
  background: radial-gradient(ellipse at 30% 0%, rgba(155, 200, 72, 0.08) 0%, transparent 60%);
  width: 800px;
  height: 500px;
}
[data-theme="xbox360"] .bg-glow--2 { display: none; }

/* Diagonal blade stripes */
[data-theme="xbox360"] .bg-noise {
  opacity: 1;
  background-image: none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(155,200,72,0.03) 30.5%, rgba(155,200,72,0.03) 33%, transparent 33.5%),
    linear-gradient(115deg, transparent 50%, rgba(155,200,72,0.02) 50.5%, rgba(155,200,72,0.02) 53%, transparent 53.5%),
    linear-gradient(115deg, transparent 70%, rgba(155,200,72,0.015) 70.5%, rgba(155,200,72,0.015) 73%, transparent 73.5%);
}

/* Blade-shaped cards with curved left edge */
[data-theme="xbox360"] .article-card {
  background: linear-gradient(135deg, #363636 0%, #3a3a3a 50%, #333333 100%);
  border: none;
  border-radius: 0 12px 12px 0;
  border-left: 4px solid #9bc848;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

[data-theme="xbox360"] .article-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #9bc848 0%, #7aa838 100%);
  border-radius: 4px 0 0 4px;
  transition: width 0.3s, left 0.3s;
}

[data-theme="xbox360"] .article-card:hover {
  transform: translateX(6px);
  box-shadow: -8px 4px 20px rgba(155, 200, 72, 0.12), 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="xbox360"] .article-card:hover::before {
  width: 6px;
  left: -6px;
  opacity: 1;
}

[data-theme="xbox360"] .card-image {
  border-radius: 0 12px 0 0;
}

[data-theme="xbox360"] .card-badge {
  background: linear-gradient(180deg, #9bc848, #7aa838) !important;
  color: #1a1a1a !important;
  border-radius: 4px;
  font-weight: bold;
  backdrop-filter: none;
}

/* Blade-curved nav items */
[data-theme="xbox360"] .main-nav a {
  color: #8a8a8a;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 1px;
  border-radius: 0 20px 20px 0;
  padding: 0.4rem 1rem 0.4rem 0.7rem;
  transition: all 0.2s;
}

[data-theme="xbox360"] .main-nav a::after { display: none; }

[data-theme="xbox360"] .main-nav a.active {
  color: #1a1a1a;
  background: linear-gradient(90deg, #9bc848, #b0dd60);
}

[data-theme="xbox360"] .main-nav a:hover {
  color: #fff;
  background: rgba(155, 200, 72, 0.15);
}

[data-theme="xbox360"] .logo-text {
  color: #9bc848;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(155, 200, 72, 0.2);
}

[data-theme="xbox360"] .logo-img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%) hue-rotate(50deg) brightness(1.1);
}

/* Blade-shaped button */
[data-theme="xbox360"] .btn-primary {
  background: linear-gradient(90deg, #9bc848, #7aa838);
  color: #1a1a1a;
  border: none;
  border-radius: 0 25px 25px 0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 1.5rem;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

[data-theme="xbox360"] .btn-primary:hover {
  background: linear-gradient(90deg, #b0dd60, #9bc848);
  transform: translateX(4px);
  box-shadow: -4px 0 20px rgba(155, 200, 72, 0.3);
}

/* Blade dividers */
[data-theme="xbox360"] .results-info {
  border-bottom: none;
  position: relative;
}

[data-theme="xbox360"] .results-info::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #9bc848, transparent 60%);
}

[data-theme="xbox360"] .site-footer {
  background: #1a1a1a;
  border-top: none;
  clip-path: polygon(0 20%, 40% 0, 70% 10%, 100% 0, 100% 100%, 0 100%);
  padding-top: 2rem;
}

[data-theme="xbox360"] .site-footer p { color: #8a8a8a; }
[data-theme="xbox360"] .card-body h3 { color: #e8e8e8; }

[data-theme="xbox360"] .detail-header h1 {
  color: #9bc848;
}

[data-theme="xbox360"] .search-box input {
  background: #1a1a1a;
  border: 2px solid #4a4a4a;
  border-radius: 0 20px 20px 0;
  color: #e8e8e8;
}

[data-theme="xbox360"] .search-box input:focus {
  border-color: #9bc848;
  box-shadow: 0 0 0 3px rgba(155, 200, 72, 0.15);
}

[data-theme="xbox360"] .filter-controls select {
  border-radius: 0 12px 12px 0;
}

[data-theme="xbox360"] .comments-header {
  border-bottom: none;
  position: relative;
}

[data-theme="xbox360"] .comments-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #9bc848, transparent 40%);
}

[data-theme="xbox360"] .detail-score-display {
  border-top: none;
  border-left: 4px solid #9bc848;
  border-radius: 0 12px 12px 0;
}

[data-theme="xbox360"] .detail-score-display::after {
  display: none;
}

/* =============================================
   THEME: Steam Big Picture Mode — dark tiles, blue glow, controller UI
   ============================================= */

/* Shimmer animation for card hover */
@keyframes steam-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[data-theme="steam"] {
  --bg: #1b2838;
  --bg-card: #213040;
  --bg-card-hover: #2a3a4a;
  --surface: #1e2d3d;
  --border: #2a4050;
  --text: #c6d4df;
  --text-muted: #6b8a9e;
  --accent: #1a9fff;
  --accent-light: #4db8ff;
  --accent-glow: rgba(26, 159, 255, 0.15);
  --review: #1a9fff;
  --preview: #4db8ff;
  --news: #5cb0a6;
  --feature: #d4a24c;
  --retro: #7a9aaa;
  --score-5: #1a9fff;
  --score-4: #4db8ff;
  --score-3: #5cb0a6;
  --score-2: #8a7a5a;
  --score-1: #6a4a4a;
  --radius: 16px;
  --radius-lg: 20px;
  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-editorial: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Steam dark top bar with blue accent */
[data-theme="steam"] .site-header {
  background: linear-gradient(180deg, #171a21 0%, #1b2838 100%);
  border-bottom: 2px solid #1a9fff;
  backdrop-filter: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="steam"] .bg-glow--1 {
  background: radial-gradient(circle at 50% 20%, rgba(26, 159, 255, 0.08) 0%, transparent 60%);
}
[data-theme="steam"] .bg-glow--2 { display: none; }

[data-theme="steam"] .bg-noise {
  opacity: 0.015;
}

/* Large tiles with generous padding and rounded corners */
[data-theme="steam"] .article-card {
  background: linear-gradient(180deg, #213040 0%, #1a2535 100%);
  border: 1px solid rgba(42, 64, 80, 0.8);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  padding: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

[data-theme="steam"] .article-card::before { display: none; }

/* Hover: scale up with blue glow + animated shimmer */
[data-theme="steam"] .article-card:hover {
  background: linear-gradient(180deg, #2a3a4a 0%, #253545 100%);
  border-color: #1a9fff;
  transform: scale(1.03);
  box-shadow:
    0 0 20px rgba(26, 159, 255, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Animated gradient shimmer on hover */
[data-theme="steam"] .article-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 159, 255, 0.06) 40%,
    rgba(26, 159, 255, 0.12) 50%,
    rgba(26, 159, 255, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}

[data-theme="steam"] .article-card:hover::after {
  opacity: 1;
  animation: steam-shimmer 2s ease-in-out infinite;
}

[data-theme="steam"] .card-badge {
  background: linear-gradient(180deg, #1a9fff, #1480d0);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  backdrop-filter: none;
}

/* Pill-shaped Big Picture mode navigation */
[data-theme="steam"] .main-nav a {
  color: #6b8a9e;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 20px;
  border-radius: 50px;
  transition: all 0.2s;
  border: 1px solid transparent;
}

[data-theme="steam"] .main-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(26, 159, 255, 0.2), rgba(26, 159, 255, 0.1));
  border-color: rgba(26, 159, 255, 0.3);
}

[data-theme="steam"] .main-nav a::after { display: none; }

[data-theme="steam"] .main-nav a:hover {
  color: #c6d4df;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="steam"] .logo-text {
  color: #c6d4df;
  font-weight: 700;
}

[data-theme="steam"] .logo-img {
  filter: brightness(0.8) saturate(80%) sepia(10%) hue-rotate(180deg) brightness(1.2);
}

/* Steam blue gradient buttons */
[data-theme="steam"] .btn-primary {
  background: linear-gradient(180deg, #1a9fff 0%, #1480d0 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 0.95rem;
  box-shadow: 0 2px 12px rgba(26, 159, 255, 0.25);
  transition: all 0.2s;
  position: relative;
}

/* Controller hint on buttons */
[data-theme="steam"] .btn-primary::after {
  content: '\2009(A)';
  font-size: 0.7em;
  opacity: 0.5;
  font-weight: 400;
}

[data-theme="steam"] .btn-primary:hover {
  background: linear-gradient(180deg, #4db8ff 0%, #1a9fff 100%);
  box-shadow: 0 4px 24px rgba(26, 159, 255, 0.4);
  transform: translateY(-2px);
}

/* Valve-style minimal footer */
[data-theme="steam"] .site-footer {
  background: #171a21;
  border-top: 1px solid #2a4050;
  text-align: center;
}

[data-theme="steam"] .site-footer p { color: #6b8a9e; font-size: 0.8rem; }

[data-theme="steam"] .site-footer::after {
  content: '\00A9  Valve Corporation. All rights reserved.';
  display: block;
  font-size: 0.65rem;
  color: #4a5a6a;
  text-align: center;
  padding: 0.3rem 0;
}

[data-theme="steam"] .card-body h3 {
  color: #c6d4df;
  font-size: 1.1rem;
}

[data-theme="steam"] .card-body {
  padding: 16px 20px;
}

/* Detail view: Steam game page feel — darker panel */
[data-theme="steam"] .detail-header {
  background: linear-gradient(180deg, #1b2838, #171a21);
  border-radius: 16px;
  overflow: hidden;
}

[data-theme="steam"] .detail-header h1 {
  color: #c6d4df;
}

[data-theme="steam"] .detail-body {
  background: #171a21;
  border-radius: 12px;
  padding: 1.5rem;
}

[data-theme="steam"] .detail-score-display {
  background: linear-gradient(180deg, #213040, #1a2535);
  border: 1px solid #2a4050;
  border-radius: 12px;
}

[data-theme="steam"] .detail-score-display::after {
  background: #1e2d3d;
  color: #1a9fff;
}

[data-theme="steam"] .detail-score-number {
  border-radius: 10px;
}

/* Steam search bar — rounded, dark, with magnifier feel */
[data-theme="steam"] .search-box input {
  background: #141a22;
  border: 1px solid #2a4050;
  border-radius: 50px;
  color: #c6d4df;
  padding: 10px 20px;
  font-size: 0.95rem;
}

[data-theme="steam"] .search-box input:focus {
  border-color: #1a9fff;
  box-shadow: 0 0 0 3px rgba(26, 159, 255, 0.15), 0 0 12px rgba(26, 159, 255, 0.1);
}

[data-theme="steam"] .comment {
  background: #1e2d3d;
  border: 1px solid #2a4050;
  border-radius: 12px;
}

[data-theme="steam"] .filter-controls select {
  background: #141a22;
  border: 1px solid #2a4050;
  border-radius: 50px;
  color: #c6d4df;
}

/* Controller hint on interactive card links */
[data-theme="steam"] .article-card .card-body::after {
  content: '(A) View';
  display: block;
  font-size: 0.6rem;
  color: #4a6070;
  margin-top: 8px;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s;
}

[data-theme="steam"] .article-card:hover .card-body::after {
  opacity: 1;
}

/* =============================================
   READABILITY FIXES — all themes
   Ensures text is readable on buttons, selects,
   inputs, dropdowns, badges, and scores.
   ============================================= */

/* === Global form element fix === */
button, select, input, textarea {
  color: inherit;
  font-family: inherit;
}

/* === Light themes: force dark text on controls === */
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] button,
[data-theme="light"] .btn-icon,
[data-theme="light"] .alpha-btn,
[data-theme="light"] .theme-selector { color: #1a1c24; }

[data-theme="muted"] select,
[data-theme="muted"] input,
[data-theme="muted"] button,
[data-theme="muted"] .btn-icon,
[data-theme="muted"] .alpha-btn,
[data-theme="muted"] .theme-selector { color: #2c2820; }

[data-theme="y2k"] select,
[data-theme="y2k"] input,
[data-theme="y2k"] button,
[data-theme="y2k"] .btn-icon,
[data-theme="y2k"] .alpha-btn,
[data-theme="y2k"] .theme-selector { color: #2a3040; }

[data-theme="web20"] select,
[data-theme="web20"] input,
[data-theme="web20"] button,
[data-theme="web20"] .btn-icon,
[data-theme="web20"] .alpha-btn,
[data-theme="web20"] .theme-selector { color: #1c1e21; }

[data-theme="web10"] .btn-icon,
[data-theme="web10"] .alpha-btn { color: #333322; }

[data-theme="pink"] select,
[data-theme="pink"] input,
[data-theme="pink"] button,
[data-theme="pink"] .btn-icon,
[data-theme="pink"] .alpha-btn,
[data-theme="pink"] .theme-selector { color: #4a2040; }

[data-theme="snes"] select,
[data-theme="snes"] input,
[data-theme="snes"] button,
[data-theme="snes"] .btn-icon,
[data-theme="snes"] .alpha-btn,
[data-theme="snes"] .theme-selector { color: #1a1a2a; }

/* === 90s: controls on grey background === */
[data-theme="90s"] .btn-icon,
[data-theme="90s"] .alpha-btn { color: #000; background: #c0c0c0; border-color: #808080; }
[data-theme="90s"] .btn-back { color: #ffff00; }
[data-theme="90s"] .otd-arrow { color: #000; background: #c0c0c0; border-color: #808080; }

/* === Amiga: white/orange on blue === */
[data-theme="amiga"] .btn-icon { color: #fff; border-color: #0044aa; }
[data-theme="amiga"] .alpha-btn { color: #000; background: #fff; border-color: #aaa; }
[data-theme="amiga"] .alpha-btn.active { background: #ff8800; color: #000; }
[data-theme="amiga"] .alpha-btn:hover { background: #ff8800; color: #000; }
[data-theme="amiga"] .theme-selector { color: #fff; background: #0044aa; border-color: #003388; }
[data-theme="amiga"] .otd-arrow { color: #000; background: #fff; border-color: #aaa; }
[data-theme="amiga"] select,
[data-theme="amiga"] input { color: #000; background: #fff; }
[data-theme="amiga"] .btn-back { color: #ff8800; }
[data-theme="amiga"] .card-meta,
[data-theme="amiga"] .card-comments,
[data-theme="amiga"] .card-stats { color: #555; }

/* === Game Boy: green on green === */
[data-theme="gameboy"] .btn-icon { color: #0f380f; border-color: #306230; }
[data-theme="gameboy"] .alpha-btn { color: #0f380f; background: #9bbc0f; border-color: #306230; }
[data-theme="gameboy"] .alpha-btn.active { background: #306230; color: #9bbc0f; }
[data-theme="gameboy"] .theme-selector { color: #0f380f; background: #8bac0f; border-color: #306230; }
[data-theme="gameboy"] select,
[data-theme="gameboy"] input { color: #0f380f; background: #9bbc0f; border-color: #306230; }
[data-theme="gameboy"] .otd-arrow { color: #0f380f; background: #8bac0f; border-color: #306230; }
[data-theme="gameboy"] .btn-back { color: #0f380f; }
[data-theme="gameboy"] .card-meta,
[data-theme="gameboy"] .card-comments,
[data-theme="gameboy"] .card-stats { color: #306230; }

/* === C64: light blue on blue === */
[data-theme="c64"] .btn-icon { color: #a0a0ff; border-color: #7070ff; }
[data-theme="c64"] .alpha-btn { color: #a0a0ff; background: #3030c0; border-color: #7070ff; }
[data-theme="c64"] .alpha-btn.active { background: #a0a0ff; color: #2020a0; }
[data-theme="c64"] .otd-arrow { color: #a0a0ff; background: #3030c0; border-color: #7070ff; }
[data-theme="c64"] .btn-back { color: #a0a0ff; }
[data-theme="c64"] .btn-primary { color: #2020a0; }

/* === Speccy: black on grey === */
[data-theme="speccy"] .btn-icon { color: #000; border-color: #000; }
[data-theme="speccy"] .alpha-btn { color: #000; background: #c8c8c8; border-color: #000; }
[data-theme="speccy"] .alpha-btn.active { background: #cc0000; color: #fff; }
[data-theme="speccy"] .otd-arrow { color: #000; background: #c8c8c8; border-color: #000; }
[data-theme="speccy"] .btn-back { color: #000; }
[data-theme="speccy"] .card-meta,
[data-theme="speccy"] .card-comments,
[data-theme="speccy"] .card-stats { color: #444; }

/* === Steam: light grey on dark === */
[data-theme="steam"] .btn-icon { color: #c6d4df; border-color: #2a4050; }
[data-theme="steam"] .alpha-btn { color: #c6d4df; background: #1e2a38; border-color: #2a4050; }
[data-theme="steam"] .alpha-btn.active { background: #1a9fff; color: #fff; }
[data-theme="steam"] .otd-arrow { color: #c6d4df; background: #1e2a38; border-color: #2a4050; }
[data-theme="steam"] .btn-back { color: #8a9aa8; }

/* === PS1: grey-blue on black === */
[data-theme="ps1"] .btn-icon { color: #97a7c8; border-color: #2a2a4a; }
[data-theme="ps1"] .alpha-btn { color: #97a7c8; background: #0a0a1a; border-color: #2a2a4a; }
[data-theme="ps1"] .alpha-btn.active { background: #97a7c8; color: #0a0a1a; }
[data-theme="ps1"] .otd-arrow { color: #97a7c8; background: #0a0a1a; border-color: #2a2a4a; }
[data-theme="ps1"] .btn-back { color: #5a5a80; }

/* === Xbox 360: green on dark grey === */
[data-theme="xbox360"] .btn-icon { color: #e8e8e8; border-color: #4a4a4a; }
[data-theme="xbox360"] .alpha-btn { color: #e8e8e8; background: #333; border-color: #4a4a4a; }
[data-theme="xbox360"] .alpha-btn.active { background: #9bc848; color: #1a1a1a; }
[data-theme="xbox360"] .otd-arrow { color: #e8e8e8; background: #333; border-color: #4a4a4a; }
[data-theme="xbox360"] .btn-back { color: #8a8a8a; }

/* === Dark themes: ensure bright text on controls === */
[data-theme="default"] .btn-icon,
[data-theme="default"] .alpha-btn { color: #e0e0f0; }

[data-theme="neon"] .btn-icon { color: #f0f0ff; border-color: #1a1a3a; }
[data-theme="neon"] .alpha-btn { color: #f0f0ff; background: #0a0a1a; border-color: #1a1a3a; }
[data-theme="neon"] .alpha-btn.active { background: #ff00ff; color: #fff; }

[data-theme="fluoro"] .btn-icon { color: #f0f0f0; border-color: #2a2a2a; }
[data-theme="fluoro"] .alpha-btn { color: #f0f0f0; background: #111; border-color: #2a2a2a; }
[data-theme="fluoro"] .alpha-btn.active { background: #39ff14; color: #000; }

[data-theme="matrix"] .btn-icon { color: #00ff41; border-color: #003300; }
[data-theme="matrix"] .alpha-btn { color: #00ff41; background: #000800; border-color: #003300; }
[data-theme="matrix"] .alpha-btn.active { background: #00ff41; color: #000800; }

[data-theme="blackred"] .btn-icon { color: #e0d0d0; border-color: #3a1010; }
[data-theme="blackred"] .alpha-btn { color: #e0d0d0; background: #140808; border-color: #3a1010; }
[data-theme="blackred"] .alpha-btn.active { background: #cc0000; color: #fff; }

[data-theme="retro"] .btn-icon { color: #f0d9b5; border-color: #5c4430; }
[data-theme="retro"] .alpha-btn { color: #f0d9b5; background: #3d2b1a; border-color: #5c4430; }
[data-theme="retro"] .alpha-btn.active { background: #f0a030; color: #1a1208; }

[data-theme="scifi"] .btn-icon { color: #b8d8f8; border-color: #152550; }
[data-theme="scifi"] .alpha-btn { color: #b8d8f8; background: #0e1830; border-color: #152550; }
[data-theme="scifi"] .alpha-btn.active { background: #00e0ff; color: #030810; }

[data-theme="high-contrast"] .btn-icon { color: #fff; border-color: #fff; }
[data-theme="high-contrast"] .alpha-btn { color: #fff; background: #111; border-color: #fff; }
[data-theme="high-contrast"] .alpha-btn.active { background: #ffff00; color: #000; }

[data-theme="colorblind"] .btn-icon { color: #e4e6ef; border-color: #2e3347; }
[data-theme="colorblind"] .alpha-btn { color: #e4e6ef; background: #252936; border-color: #2e3347; }
[data-theme="colorblind"] .alpha-btn.active { background: #4477aa; color: #fff; }

/* === Score badge text readability — force dark text on light backgrounds === */
.score-3, .score-4 { color: #1a1a1a; }
[data-theme="default"] .score-3 { color: #1a1a1a; }
[data-theme="default"] .score-4 { color: #1a1a1a; }
[data-theme="neon"] .score-3 { color: #050510; }
[data-theme="neon"] .score-4 { color: #050510; }
[data-theme="neon"] .score-5 { color: #050510; }
[data-theme="fluoro"] .score-3 { color: #000; }
[data-theme="fluoro"] .score-5 { color: #000; }
[data-theme="scifi"] .score-3 { color: #030810; }
[data-theme="scifi"] .score-5 { color: #030810; }

/* === Dropdown/select readability on all themes === */
[data-theme="amiga"] .filter-controls select { color: #000; background: #fff; border: 2px outset #ccc; }
[data-theme="gameboy"] .filter-controls select { color: #0f380f; background: #9bbc0f; border: 2px solid #306230; }
[data-theme="speccy"] .filter-controls select { color: #000; background: #fff; border: 2px solid #000; }
[data-theme="90s"] .filter-controls select { color: #000; background: #fff; }

/* === Listen / Share / Edit button text on light themes === */
[data-theme="light"] .btn-share,
[data-theme="muted"] .btn-share,
[data-theme="y2k"] .btn-share,
[data-theme="web20"] .btn-share,
[data-theme="pink"] .btn-share,
[data-theme="snes"] .btn-share,
[data-theme="90s"] .btn-share,
[data-theme="amiga"] .btn-share,
[data-theme="gameboy"] .btn-share,
[data-theme="speccy"] .btn-share { color: var(--text); }

[data-theme="light"] .btn-edit,
[data-theme="muted"] .btn-edit,
[data-theme="y2k"] .btn-edit,
[data-theme="web20"] .btn-edit,
[data-theme="pink"] .btn-edit,
[data-theme="snes"] .btn-edit,
[data-theme="90s"] .btn-edit,
[data-theme="amiga"] .btn-edit,
[data-theme="gameboy"] .btn-edit,
[data-theme="speccy"] .btn-edit { color: var(--text); }

/* === OTD arrow fix for all themes === */
[data-theme="light"] .otd-arrow,
[data-theme="muted"] .otd-arrow,
[data-theme="y2k"] .otd-arrow,
[data-theme="web20"] .otd-arrow,
[data-theme="pink"] .otd-arrow,
[data-theme="snes"] .otd-arrow { color: var(--text); background: var(--surface); border-color: var(--border); }

/* === Card text readability for light-bg themes === */
[data-theme="amiga"] .card-body h3 { color: #000; }
[data-theme="speccy"] .card-body h3 { color: #000; }
[data-theme="gameboy"] .card-body h3 { color: #0f380f; }
[data-theme="90s"] .card-body h3 { color: #000080; }

/* === TTS controls readability === */
[data-theme="light"] .tts-controls,
[data-theme="muted"] .tts-controls,
[data-theme="y2k"] .tts-controls,
[data-theme="web20"] .tts-controls,
[data-theme="pink"] .tts-controls,
[data-theme="snes"] .tts-controls { color: var(--text); }

[data-theme="light"] .tts-voice-select,
[data-theme="muted"] .tts-voice-select,
[data-theme="y2k"] .tts-voice-select,
[data-theme="web20"] .tts-voice-select,
[data-theme="pink"] .tts-voice-select,
[data-theme="snes"] .tts-voice-select,
[data-theme="amiga"] .tts-voice-select,
[data-theme="gameboy"] .tts-voice-select,
[data-theme="speccy"] .tts-voice-select,
[data-theme="90s"] .tts-voice-select { color: var(--text); background: var(--surface); }

/* === Quiz button readability === */
[data-theme="light"] .quiz-btn,
[data-theme="muted"] .quiz-btn,
[data-theme="y2k"] .quiz-btn,
[data-theme="web20"] .quiz-btn,
[data-theme="pink"] .quiz-btn,
[data-theme="snes"] .quiz-btn { color: var(--text); background: var(--bg-card); }

[data-theme="amiga"] .quiz-btn { color: #000; background: #fff; border: 2px outset #ccc; }
[data-theme="gameboy"] .quiz-btn { color: #0f380f; background: #9bbc0f; border: 2px solid #306230; }
[data-theme="speccy"] .quiz-btn { color: #000; background: #c8c8c8; border: 2px solid #000; }
[data-theme="90s"] .quiz-btn { color: #000; background: #c0c0c0; border: 2px outset #fff; }
[data-theme="c64"] .quiz-btn { color: #a0a0ff; background: #3030c0; border: 2px solid #7070ff; }

/* === Reaction button readability === */
[data-theme="amiga"] .reaction-btn,
[data-theme="gameboy"] .reaction-btn,
[data-theme="speccy"] .reaction-btn,
[data-theme="90s"] .reaction-btn { background: var(--bg-card); border-color: var(--border); }

/* === Reveal score button on light themes === */
[data-theme="light"] .btn-reveal-score,
[data-theme="muted"] .btn-reveal-score,
[data-theme="y2k"] .btn-reveal-score,
[data-theme="web20"] .btn-reveal-score,
[data-theme="pink"] .btn-reveal-score,
[data-theme="snes"] .btn-reveal-score { color: var(--text); }

[data-theme="amiga"] .btn-reveal-score { color: #000; background: #fff; border: 2px outset #ccc; border-top: 3px solid #ff8800; }
[data-theme="gameboy"] .btn-reveal-score { color: #0f380f; background: #8bac0f; border: 2px solid #306230; border-top: 3px solid #0f380f; }
[data-theme="speccy"] .btn-reveal-score { color: #000; background: #c8c8c8; border: 2px solid #000; border-top: 3px solid #cc0000; }
[data-theme="90s"] .btn-reveal-score { color: #000; background: #c0c0c0; border: 2px outset #fff; border-top: 3px solid #ff0000; }