/* ═══════════════════════════════════════════════
   RedditGacha — Card Component v2
═══════════════════════════════════════════════ */

/* ─── Rarity tokens ──────────────────────────── */
:root {
  --rarity-C:   #9E9E9E;
  --rarity-UC:  #B0BEC5;
  --rarity-R:   #00C853;
  --rarity-SR:  #0079D3;
  --rarity-SSR: #9C27B0;
  --rarity-UR:  #FF4500;
  --rarity-LR:  #FFD700;

  --faction-Knowledge: #0079D3;
  --faction-Drama:     #E53935;
  --faction-Finance:   #F9A825;
  --faction-Wholesome: #E91E8C;
  --faction-Cursed:    #5C6BC0;
  --faction-Power:     #1565C0;
  --faction-Meta:      #2E7D32;
  --faction-Ghost:     #37474F;
}

/* ─── Base card ──────────────────────────────── */

.card {
  position: relative;
  width: 210px;
  min-height: 330px;
  border-radius: 14px;
  background: #fff;
  border: 2.5px solid #d0d3d6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(.23,1,.32,1),
    box-shadow 0.25s cubic-bezier(.23,1,.32,1);
  user-select: none;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    0 2px 6px rgba(0,0,0,.09),
    0 1px 2px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.card:hover {
  transform: translateY(-8px) scale(1.025);
}

/* ─── Light-sweep on hover (SSR / UR / LR) ──── */

.card.rarity-SSR::before,
.card.rarity-UR::before,
.card.rarity-LR::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.18) 55%,
    transparent 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 30;
  transition: left 0.55s cubic-bezier(.4,0,.2,1);
}

.card.rarity-SSR:hover::before,
.card.rarity-UR:hover::before,
.card.rarity-LR:hover::before {
  left: 140%;
}

/* ─── Rarity borders + glows ──────────────────── */

.card.rarity-C  { border-color: var(--rarity-C); }

.card.rarity-UC {
  border-color: var(--rarity-UC);
  box-shadow:
    0 3px 12px rgba(176,190,197,.45),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.card.rarity-R {
  border-color: var(--rarity-R);
  box-shadow:
    0 4px 18px rgba(0,200,83,.38),
    0 1px 3px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.card.rarity-SR {
  border-color: var(--rarity-SR);
  box-shadow:
    0 4px 22px rgba(0,121,211,.48),
    0 1px 4px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(165deg, #f0f7ff 0%, #fff 55%);
}

.card.rarity-SSR {
  border-color: var(--rarity-SSR);
  box-shadow:
    0 4px 28px rgba(156,39,176,.52),
    0 1px 4px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(165deg, #f9f0ff 0%, #fce4ff 18%, #fff 55%);
}

.card.rarity-UR {
  border-color: var(--rarity-UR);
  box-shadow:
    0 6px 32px rgba(255,69,0,.6),
    0 2px 6px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(165deg, #fff3ee 0%, #ffe8e0 18%, #fff 55%);
}

.card.rarity-LR {
  border-color: var(--rarity-LR);
  box-shadow:
    0 4px 20px rgba(255,215,0,.55),
    0 2px 6px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.9);
  background: linear-gradient(165deg, #fffde7 0%, #fff9c4 22%, #fffef5 55%);
  animation: legendPulse 16s ease-in-out infinite;
  transform: translateZ(0);
}

/* ─── Hover glow boost ───────────────────────── */

.card.rarity-R:hover   { box-shadow: 0 10px 32px rgba(0,200,83,.55); }
.card.rarity-SR:hover  { box-shadow: 0 10px 36px rgba(0,121,211,.65); }
.card.rarity-SSR:hover { box-shadow: 0 10px 42px rgba(156,39,176,.7); }
.card.rarity-UR:hover  { box-shadow: 0 12px 48px rgba(255,69,0,.75); }
.card.rarity-LR:hover  {
  box-shadow:
    0 12px 50px rgba(255,215,0,.8),
    0 0 70px rgba(255,215,0,.25);
}

/* ─── Holo video (LR) ─────────────────────────── */

.card-holo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0.38;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateZ(0);
  filter: saturate(1.45) contrast(1.1);
  transition: opacity 0.4s ease-in-out;
}

.card > :not(.card-holo-video) {
  position: relative;
  z-index: 1;
}

/* ─── LR overrides ────────────────────────────── */

.card.rarity-LR .card-header {
  background: linear-gradient(135deg, #e6a817, #f9c23c, #ffe066, #f9c23c);
  background-size: 200% 100%;
  animation: headerShimmer 8s ease infinite;
}

.card.rarity-LR .card-faction-badge,
.card.rarity-LR .card-rarity-badge {
  color: rgba(70,40,0,.88) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.card.rarity-LR .card-rarity-badge {
  background: rgba(0,0,0,.12) !important;
}

.card.rarity-LR .card-art { background: transparent; }
.card.rarity-LR .card-art-img { opacity: 1; z-index: 5; }

@keyframes headerShimmer {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 0%; }
}

@keyframes legendPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,215,0,.55), 0 2px 6px rgba(0,0,0,.1); }
  50%       { box-shadow: 0 8px 44px rgba(255,215,0,.9), 0 0 60px rgba(255,215,0,.28); }
}

/* ─── Card header band ────────────────────────── */

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: var(--theme-color, #607D8B);
  position: relative;
  z-index: 20;
  min-height: 36px;
  flex-shrink: 0;
}

/* Subtle light sheen on header */
.card-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}

.card-faction-badge {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.card-rarity-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.28);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  white-space: nowrap;
}

/* ─── Subreddit label ────────────────────────── */

.card-subreddit {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 5px 10px 0;
  letter-spacing: 0.4px;
  opacity: 0.85;
}

/* ─── Card art area ──────────────────────────── */

.card-art {
  margin: 6px 8px;
  height: 120px;
  border-radius: 9px;
  background: var(--theme-color, #607D8B);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 2px 6px rgba(0,0,0,.12);
}

.card-art--image { background: transparent; }

.card-art-icon {
  font-size: 46px;
  opacity: 1 !important;
  position: absolute;
  z-index: 3;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

.card-art-bg {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.1)), var(--theme-color);
  z-index: 1;
}

.card-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

/* Faction art backgrounds */
.faction-Knowledge .card-art { background: linear-gradient(145deg, #1565C0 0%, #0D47A1 100%); }
.faction-Drama     .card-art { background: linear-gradient(145deg, #C62828 0%, #880E4F 100%); }
.faction-Finance   .card-art { background: linear-gradient(145deg, #E65100 0%, #BF360C 100%); }
.faction-Wholesome .card-art { background: linear-gradient(145deg, #880E4F 0%, #4A148C 100%); }
.faction-Cursed    .card-art { background: linear-gradient(145deg, #1A237E 0%, #311B92 100%); }
.faction-Power     .card-art { background: linear-gradient(145deg, #0D47A1 0%, #1A237E 100%); }
.faction-Meta      .card-art { background: linear-gradient(145deg, #1B5E20 0%, #33691E 100%); }
.faction-Ghost     .card-art { background: linear-gradient(145deg, #1a1a2e 0%, #37474F 100%); }

/* ─── Card title ──────────────────────────────── */

.card-title {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  padding: 6px 10px 3px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─── Special badges ─────────────────────────── */

.card-special-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 10px;
  min-height: 0;
}

.card-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}

.badge-ghost     { background: #263238; color: #90A4AE; }
.badge-deleted   { background: #1c1c1c; color: #757575; }
.badge-removed   { background: #1c1c1c; color: #616161; }
.badge-award     {
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  color: #D84315;
  border: 1px solid rgba(216,67,21,.22);
}
.badge-crossover {
  background: #E3F2FD;
  color: #0D47A1;
  border: 1px solid #BBDEFB;
}
.badge-oc {
  background: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #A5D6A7;
}

/* ─── Stats bar ───────────────────────────────── */

.card-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,.07);
  margin-top: auto;
  background: rgba(0,0,0,.018);
  flex-shrink: 0;
}

.card-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 6px 6px;
  gap: 1px;
}

.card-stat:first-child { border-right: 1px solid rgba(0,0,0,.07); }

.stat-label {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-meta);
}

.stat-value {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.stat-atk .stat-value { color: #C62828; }
.stat-def .stat-value { color: #1565C0; }

.stat-icon { font-size: 10px; line-height: 1; }

/* ─── Stat mini-bars ──────────────────────────── */

.stat-bar {
  width: 80%;
  height: 2.5px;
  background: rgba(0,0,0,.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

.stat-atk .stat-bar-fill { background: linear-gradient(90deg, #C62828, #EF5350); }
.stat-def .stat-bar-fill { background: linear-gradient(90deg, #1565C0, #42A5F5); }

/* ─── Card footer ─────────────────────────────── */

.card-footer {
  padding: 4px 10px 8px;
  text-align: center;
  flex-shrink: 0;
}

.card-reddit-link {
  font-size: 9.5px;
  color: var(--reddit-orange);
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.card-reddit-link:hover { opacity: 1; }

/* ─── Ghost / deleted / removed ──────────────── */

.card.special-ghost .card-title,
.card.special-deleted .card-title,
.card.special-removed .card-title {
  color: var(--text-secondary);
  font-style: italic;
}

.card.special-ghost .card-art {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ─── Collection count badge ─────────────────── */

.card-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--reddit-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 2;
}

/* ─── Card in collection wrapper ─────────────── */

.collection-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Card inside a wrap stretches to fill the grid cell */
.collection-card-wrap .card {
  flex: 1;
}

/* ─── New card shimmer (reveal) ──────────────── */

.card.new-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.72) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 0.9s ease forwards;
  pointer-events: none;
  z-index: 50;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Flavour text (modal) ───────────────────── */

.card-flavour {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 4px 10px 8px;
  line-height: 1.5;
  border-top: 1px dashed var(--border);
}

/* ═══════════════════════════════════════════════
   Reddit-style Card Modal
═══════════════════════════════════════════════ */

.reddit-modal {
  display: flex;
  flex-direction: column;
}

.modal-content--reddit .modal-close {
  position: sticky;
  top: 12px;
  right: 12px;
  float: right;
  z-index: 10;
  margin: 12px 12px -28px auto;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.modal-content--reddit .modal-close:hover {
  background: var(--bg-surface3);
  color: var(--text-primary);
}

/* ─── Top section ────────────────────────────── */

.rm-top {
  display: flex;
  gap: 20px;
  padding: 24px 24px 20px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}

.rm-card-col { flex-shrink: 0; }
.rm-card-col .card {
  pointer-events: none;
  width: 160px;
  min-height: 252px;
}
.rm-card-col .card .card-art { height: 90px; }

.rm-post-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

/* ─── Subreddit / faction / date ─────────────── */

.rm-subreddit-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.rm-subreddit {
  font-weight: 700;
  color: var(--reddit-orange);
  text-decoration: none;
}
.rm-subreddit:hover { text-decoration: underline; }

.rm-dot   { color: var(--text-meta); }
.rm-faction-tag { font-weight: 600; color: var(--text-secondary); }
.rm-date  { font-size: 11px; color: var(--text-meta); }

/* ─── Post title ────────────────────────────── */

.rm-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

/* ─── Special badges row ────────────────────── */

.rm-special-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ─── Rarity + Q-Score pills ─────────────────── */

.rm-rarity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rm-rarity-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-surface2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.rarity-pill-C   { border-color: var(--rarity-C);   color: var(--rarity-C); }
.rarity-pill-UC  { border-color: var(--rarity-UC);  color: var(--rarity-UC); }
.rarity-pill-R   { border-color: var(--rarity-R);   color: var(--rarity-R); }
.rarity-pill-SR  { border-color: var(--rarity-SR);  color: var(--rarity-SR); }
.rarity-pill-SSR { border-color: var(--rarity-SSR); color: var(--rarity-SSR); }
.rarity-pill-UR  { border-color: var(--rarity-UR);  color: var(--rarity-UR); }
.rarity-pill-LR  { border-color: var(--rarity-LR);  color: var(--rarity-LR); background: rgba(255,215,0,.08); }

.rm-qscore-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-surface2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.rm-copies-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255,69,0,.12);
  color: var(--reddit-orange);
  border: 1px solid rgba(255,69,0,.25);
}

/* ─── Vote section ──────────────────────────── */

.rm-vote-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-vote-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rm-vote-arrow  { font-size: 18px; color: var(--reddit-orange); line-height: 1; }
.rm-vote-score  { font-size: 22px; font-weight: 800; color: var(--reddit-orange); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.rm-vote-label  { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

.rm-vote-bar {
  height: 5px;
  background: var(--bg-surface3);
  border-radius: 3px;
  overflow: hidden;
  max-width: 240px;
}

.rm-vote-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--reddit-orange), #ff6534);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ─── Engagement pills ──────────────────────── */

.rm-engagement { display: flex; flex-wrap: wrap; gap: 8px; }

.rm-eng-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--bg-surface2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.rm-eng-comments { color: var(--text-primary); }
.rm-eng-awards   { background: rgba(255,248,225,.06); color: #F9A825; border-color: rgba(249,168,37,.3); }

/* ─── Media block ───────────────────────────── */

.rm-media {
  margin: 0 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm-media img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  display: block;
}

/* ─── Video player ──────────────────────────── */

.rm-media--video video {
  width: 100%;
  max-height: 400px;
  display: block;
  background: #000;
}

/* ─── Video thumbnail + overlay (no stored URL) */

.rm-media--video-thumb {
  position: relative;
  cursor: pointer;
}

.rm-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: background 0.2s ease;
}

.rm-video-overlay:hover {
  background: rgba(0, 0, 0, 0.6);
}

.rm-video-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 20px;
  padding-left: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform 0.15s ease, background 0.15s ease;
}

.rm-video-overlay:hover .rm-video-play-icon {
  transform: scale(1.08);
  background: #fff;
}

.rm-video-play-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ─── Selftext ──────────────────────────────── */

.rm-selftext {
  margin: 0 24px;
  padding: 16px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Game stats bars ───────────────────────── */

.rm-game-stats {
  margin: 0 24px;
  padding: 16px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-game-stats-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-meta);
  margin-bottom: 2px;
}

.rm-stat-row, .rm-stat-qscore {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rm-stat-label {
  font-size: 11px;
  font-weight: 700;
  width: 52px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rm-stat-atk { color: #C62828; }
.rm-stat-def { color: #1565C0; }

.rm-stat-track {
  flex: 1;
  height: 6px;
  background: var(--bg-surface3);
  border-radius: 3px;
  overflow: hidden;
}

.rm-stat-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.rm-fill-atk { background: linear-gradient(90deg, #C62828, #EF5350); }
.rm-fill-def { background: linear-gradient(90deg, #1565C0, #42A5F5); }
.rm-fill-q   { background: linear-gradient(90deg, #7B1FA2, #CE93D8); }

.rm-stat-num {
  font-size: 12px;
  font-weight: 700;
  width: 40px;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ─── Flavour text ──────────────────────────── */

.rm-flavour {
  margin: 0 24px;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  padding: 12px 16px;
  border-left: 3px solid var(--border-dk);
  background: var(--bg-surface2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ─── Comments section ──────────────────────── */

.rm-comments-section {
  margin: 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rm-comments-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-surface2);
  border-bottom: 1px solid var(--border);
}

.rm-comments-icon  { font-size: 14px; }
.rm-comments-count { font-size: 13px; font-weight: 700; color: var(--text-primary); }

.rm-comments-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface);
}

/* ─── Comment skeletons ─────────────────────── */

.rm-comment-skeleton { display: flex; gap: 10px; align-items: flex-start; }

.rm-cs-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface3);
  flex-shrink: 0;
  animation: skeletonPulse 1.6s ease-in-out infinite;
}

.rm-cs-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.rm-cs-line {
  height: 10px;
  background: var(--bg-surface3);
  border-radius: 5px;
  width: 85%;
  animation: skeletonPulse 1.6s ease-in-out infinite;
}

.rm-cs-line--sm { width: 40%; height: 8px; }
.rm-cs-line--lg { width: 95%; }

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.rm-load-comments-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--reddit-orange);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}
.rm-load-comments-btn:hover { background: var(--bg-surface3); }

/* ─── Real comments ─────────────────────────── */

.rm-comment { padding: 10px 0; border-top: 1px solid var(--border); }
.rm-comment:first-child { border-top: none; padding-top: 0; }

.rm-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.rm-comment-author { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.rm-comment-score  { font-size: 11px; font-weight: 600; color: var(--reddit-orange); margin-left: auto; }
.rm-comment-age    { font-size: 11px; color: var(--text-meta); }
.rm-comment-body   { font-size: 13px; line-height: 1.55; color: var(--text-primary); word-break: break-word; }

.rm-op-badge  { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--reddit-orange); color: #fff; letter-spacing: 0.3px; }
.rm-mod-badge { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: #00a87e; color: #fff; letter-spacing: 0.3px; }
.rm-gold-badge { font-size: 11px; color: #F9A825; }

/* ─── Footer actions ────────────────────────── */

.rm-footer-actions {
  padding: 20px 24px 28px;
  display: flex;
  justify-content: flex-end;
}

.rm-view-btn { text-decoration: none; display: inline-block; }

/* ─── Section spacing ───────────────────────── */

.rm-top,
.rm-media,
.rm-selftext,
.rm-game-stats,
.rm-flavour,
.rm-comments-section {
  margin-bottom: 16px;
}

/* ─── Responsive ─────────────────────────────── */

@media (max-width: 580px) {
  .rm-top {
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
  }

  .rm-title { font-size: 15px; }
  .rm-vote-score { font-size: 18px; }

  .rm-media,
  .rm-selftext,
  .rm-game-stats,
  .rm-flavour,
  .rm-comments-section { margin-left: 16px; margin-right: 16px; }

  .rm-footer-actions { padding: 16px; }
}