/* ═══════════════════════════════════════════════════════════════════
   THEMES — Theme cards, carousel, mini boards
═══════════════════════════════════════════════════════════════════ */

#themes { background: var(--surface); overflow: hidden; }

/* ── Theme card ── */
.theme-card {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.3s;
  cursor: pointer; position: relative;
  background: var(--bg);
}
.theme-card:hover { transform: translateY(-6px); }

.tc-ia:hover   { border-color: #BCCCAB; box-shadow: 0 12px 40px rgba(59,109,17,0.2); }
.tc-si:hover   { border-color: #A8D4E6; box-shadow: 0 12px 40px rgba(91,143,168,0.25); }
.tc-ka:hover   { border-color: #D4894A; box-shadow: 0 12px 40px rgba(139,69,19,0.25); }
.tc-navy:hover { border-color: #6A9BD4; box-shadow: 0 12px 40px rgba(40,80,160,0.2); }
.tc-af:hover   { border-color: #8AB4D8; box-shadow: 0 12px 40px rgba(30,100,180,0.2); }
.tc-para:hover { border-color: #9B8B6A; box-shadow: 0 12px 40px rgba(100,80,40,0.2); }

/* Card preview area */
.tc-preview {
  height: 200px; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Particle canvas */
.tc-preview canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  transition: opacity 0.4s;
}
.theme-card:hover .tc-preview canvas { opacity: 1; }

/* Floating piece decorations */
.tc-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tc-floater {
  position: absolute; font-size: 28px; opacity: 0.12;
  transition: opacity 0.4s, transform 0.6s;
}
.theme-card:hover .tc-floater { opacity: 0.3; }

/* Mini board */
.tc-board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: 110px; height: 110px; border-radius: 4px;
  overflow: hidden; position: relative; z-index: 2;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.theme-card:hover .tc-board { transform: scale(1.06) rotate(-1deg); }
.tc-sq { aspect-ratio: 1; }

/* Board colors per theme */
.tc-ia   .tc-sq.l { background: #EAF3DE; }
.tc-ia   .tc-sq.d { background: #3B6D11; }
.tc-si   .tc-sq.l { background: #D6ECFA; }
.tc-si   .tc-sq.d { background: #4A7A96; }
.tc-ka   .tc-sq.l { background: #E8C89A; }
.tc-ka   .tc-sq.d { background: #8B5E3C; }
.tc-navy .tc-sq.l { background: #D0DFFE; }
.tc-navy .tc-sq.d { background: #2A4A8A; }
.tc-af   .tc-sq.l { background: #D8EDF8; }
.tc-af   .tc-sq.d { background: #3A6A9A; }
.tc-para .tc-sq.l { background: #E4D8C4; }
.tc-para .tc-sq.d { background: #6A5434; }

/* Preview backgrounds */
.tc-ia   .tc-preview { background: radial-gradient(ellipse at top, #1A2414 0%, #0E0F0C 100%); }
.tc-si   .tc-preview { background: radial-gradient(ellipse at top, #0A1A2F 0%, #080F18 100%); }
.tc-ka   .tc-preview { background: radial-gradient(ellipse at top, #200F05 0%, #100A04 100%); }
.tc-navy .tc-preview { background: radial-gradient(ellipse at top, #0A1428 0%, #050A18 100%); }
.tc-af   .tc-preview { background: radial-gradient(ellipse at top, #0A1830 0%, #060B1A 100%); }
.tc-para .tc-preview { background: radial-gradient(ellipse at top, #201408 0%, #120A04 100%); }

/* Badges */
.tc-badge {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px; font-weight: 500;
}
.tc-badge.free { background: rgba(188,204,171,0.15); color: #BCCCAB; border: 1px solid rgba(188,204,171,0.3); }
.tc-badge.paid { background: rgba(214,198,146,0.12); color: #D6C692; border: 1px solid rgba(214,198,146,0.3); }
.tc-badge.soon { background: rgba(100,100,100,0.15); color: #888;    border: 1px solid rgba(120,120,120,0.2); }

/* Coming-soon overlay */
.tc-coming-overlay {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  opacity: 0; transition: opacity 0.3s;
}
.theme-card.coming-soon:hover .tc-coming-overlay { opacity: 1; }

/* Card info section */
.tc-info { padding: 18px 20px; background: var(--bg); }
.tc-name {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text); margin-bottom: 6px;
}
.tc-ia   .tc-name { color: #BCCCAB; }
.tc-si   .tc-name { color: #A8D4E6; }
.tc-ka   .tc-name { color: #D4894A; }
.tc-navy .tc-name { color: #6A9BD4; }
.tc-af   .tc-name { color: #8AB4D8; }
.tc-para .tc-name { color: #B8A880; }
.tc-desc  { font-size: 12px; color: var(--text-mute); line-height: 1.5; margin-bottom: 12px; }
.tc-price { font-family: var(--font-mono); font-size: 11px; color: var(--secondary); }

/* "More themes" label */
.themes-more {
  margin-top: 32px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-mute);
}
.themes-more span { color: var(--primary); }

/* ── Carousel ── */
.themes-carousel-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 56px;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.themes-carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: carouselScroll 60s linear infinite;
  cursor: grab;
}
.themes-carousel-track:active { cursor: grabbing; }
.themes-carousel-wrap:hover .themes-carousel-track { animation-play-state: paused; }

@keyframes carouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 10px)); }
}

.themes-carousel-track .theme-card { width: 280px; flex-shrink: 0; }
.themes-carousel-track .theme-card .tc-preview { height: 180px; }
.themes-carousel-track .theme-card .tc-board   { width: 100px; height: 100px; }