/* ============================================================
   HOLOGRAPHIC TRIGGER CARDS — COLLECTIBLE
   Mirrors mobile trigger-detail layout inside holo card
   Light pearl holographic base + proper blend modes
   ============================================================ */

/* --- Cards content area --- */
.cards-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 60vh;
}
.cards-content .cd-cat-nav { margin-top: 16px; margin-bottom: 4px; }

/* Highlight pulse on category button */
.cd-cat-btn--highlight {
  animation: cat-highlight-pulse 1.5s ease-in-out infinite;
}
@keyframes cat-highlight-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 2px 2px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.03), 0 4px 0 #c9c5be, 0 5px 0 #bab6af, 0 6px 0 #a8a49d, 0 7px 3px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.08); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 2px 2px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.03), 0 4px 0 #c9c5be, 0 5px 0 #bab6af, 0 6px 0 #a8a49d, 0 7px 3px rgba(0,0,0,0.2), 0 8px 12px rgba(0,0,0,0.15); }
}

/* Error */
.cards-error {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.cards-error-text {
  font-family: var(--cd-font); font-size: 8px; color: #999; text-align: center; line-height: 2.2;
}

/* --- Card Stack Area --- */
.cards-stack-area {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 0 16px; min-height: 600px;
}
.cards-stack {
  position: relative;
  width: 340px;
  height: 560px;
}

/* --- Bottom bar --- */
.cards-bottom-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 6px 0 4px; width: 100%;
}
.cards-counter {
  font-family: var(--cd-font); font-size: 7px; color: #999; letter-spacing: 2px;
}
.cards-hint {
  font-family: var(--cd-font-body, 'Space Mono', monospace);
  font-size: 7px; color: #aaa; letter-spacing: 1px;
}
.cards-reset-btn {
  display: none;
  font-size: 7px !important; padding: 5px 10px !important;
  background: transparent !important; color: #999 !important;
  border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: none !important;
}
.cards-reset-btn:hover { color: #333 !important; border-color: rgba(0,0,0,0.3) !important; }
.cards-reset-btn.visible { display: flex; }

/* --- Empty state --- */
.cards-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border: 2px dashed #ccc; border-radius: 14px; background: #f0ece4;
}
.cards-empty-text { font-family: var(--cd-font); font-size: 9px; color: #999; text-align: center; line-height: 2; }
.cards-empty-btn { font-family: var(--cd-font); font-size: 8px; letter-spacing: 1px; padding: 10px 20px; background: #111; color: #eee; border: none; cursor: pointer; }
.cards-empty-btn:hover { background: #333; }

/* ============================================================
   THE HOLOGRAPHIC CARD
   ============================================================ */
.holo-card {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.holo-card.is-top { cursor: grab; will-change: transform; }
.holo-card.is-top.is-dragging { cursor: grabbing; }

/* --- Card outer frame --- */
.holo-card-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden; will-change: transform;
  border: 3px solid rgba(255,255,255,0.6);
  background: #e8e4dc;
}

.holo-card.is-top .holo-card-inner {
  box-shadow:
    0 2px 0 rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.1),
    0 12px 40px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}
.holo-card:not(.is-top) .holo-card-inner {
  box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.12);
}

/* --- LAYER 0: Light pearl base --- */
.holo-layer-base {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(170deg, #f0ece4 0%, #e8e4dc 25%, #e0dcd4 50%, #d8d4cc 75%, #e4e0d8 100%);
}
.holo-layer-base::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.012) 2px, rgba(0,0,0,0.012) 3px);
}

/* --- HOLO LAYERS --- */
.holo-layer-rainbow {
  position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply; pointer-events: none;
}
.holo-layer-sparkle {
  position: absolute; inset: 0; z-index: 2;
  mix-blend-mode: overlay; pointer-events: none;
}
.holo-layer-shine {
  position: absolute; inset: 0; z-index: 3;
  mix-blend-mode: soft-light; pointer-events: none;
}
.holo-layer-edge {
  position: absolute; inset: 0; z-index: 5;
  border-radius: 14px; pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  border: 3px solid transparent;
}

/* ============================================================
   CARD CONTENT — mirrors mobile trigger detail
   Row 1: Image + Title
   Row 2: Category color bar
   Row 3: Mechanism
   Row 4: ? THE QUESTION
   Row 5: Question (dark panel HERO)
   Row 6: Footer
   ============================================================ */
.holo-card-content {
  position: relative; z-index: 4;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 14px;
}

/* --- ROW 1: Image + Title grid (mirrors mobile trigger-detail-header) --- */
.holo-hero-row {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0;
  border: 3px solid var(--cd-dark, #1a2e0a);
  mix-blend-mode: multiply;
}

.holo-art {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--cd-bg, #8a9f78);
}
.holo-art-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(100%) saturate(300%) hue-rotate(50deg) brightness(0.65) contrast(1.4);
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.holo-art-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(26,46,10,0.06) 2px, rgba(26,46,10,0.06) 3px);
}

.holo-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: clamp(11px, 3.2vw, 16px);
  font-weight: 400;
  color: var(--cd-dark, #1a2e0a);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 8px 10px;
  background: var(--cd-screen, #b3c4a1);
  display: flex;
  align-items: center;
  min-width: 0;
}

/* --- ROW 2: Category color bar --- */
.holo-cat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cat-color, #9900FF);
  min-height: 32px;
  mix-blend-mode: multiply;
}

.holo-code {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 8px;
  color: var(--cat-text, #fff);
  letter-spacing: 2px;
}

.holo-bar-sep {
  width: 2px;
  height: 12px;
  background: var(--cat-text, #fff);
  flex-shrink: 0;
}

.holo-cat-name {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 8px;
  color: var(--cat-text, #fff);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- ROW 3: Mechanism --- */
.holo-mechanism {
  border-left: 3px solid var(--cat-color, #9900FF);
  padding: 8px 0 8px 12px;
  margin: 8px 0 0;
  mix-blend-mode: multiply;
}
.holo-mech-label {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 7px;
  color: var(--cat-color, #9900FF);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.holo-mech-text {
  font-family: var(--cd-font-body, 'Space Mono', monospace);
  font-size: 10px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

/* --- ROW 4: Section title "? THE QUESTION" --- */
.holo-q-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 5px;
  margin: 10px 0 6px;
  border-bottom: 2px solid #111;
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 8px;
  color: #111;
  letter-spacing: 1px;
  mix-blend-mode: multiply;
}

.holo-q-icon {
  font-size: 8px;
  line-height: 1;
}

/* --- ROW 5: Question — DARK PANEL HERO --- */
.holo-question-panel {
  background: #111;
  margin: 0;
  padding: 14px;
  flex: 1;
  display: flex;
  align-items: center;
}

.holo-question {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 13px;
  font-weight: 400;
  color: var(--cat-color, #9900FF);
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.5px;
}

/* --- ROW 6: Footer --- */
.holo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  mix-blend-mode: multiply;
}

.holo-brand {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 7px;
  color: #555;
  letter-spacing: 2px;
}

.holo-rarity-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 2px solid var(--cat-color, #9900FF);
  background: rgba(0,0,0,0.04);
}

.holo-rarity {
  font-family: var(--cd-font, 'Press Start 2P', monospace);
  font-size: 7px;
  color: var(--cat-color, #9900FF);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.holo-rarity-pips {
  display: flex;
  gap: 2px;
}
.holo-pip {
  width: 8px;
  height: 4px;
  background: rgba(0,0,0,0.1);
}
.holo-pip.filled {
  background: var(--cat-color, #9900FF);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .cards-stack { width: 310px; height: 510px; }
  .cards-stack-area { min-height: 540px; }
  .holo-title { font-size: clamp(10px, 3vw, 14px); padding: 6px 8px; }
  .holo-question { font-size: 12px; }
  .holo-mech-text { font-size: 9px; }
}

@media (max-width: 480px) {
  .cards-stack {
    width: min(300px, calc(100vw - 32px));
    height: min(490px, calc((100vw - 32px) * 1.63));
  }
  .cards-stack-area { min-height: 510px; padding: 8px 0 12px; }
  .holo-card-content { padding: 10px; }
  .holo-title { font-size: clamp(9px, 2.8vw, 13px); padding: 5px 7px; }
  .holo-question { font-size: 11px; line-height: 1.7; }
  .holo-question-panel { padding: 10px 12px; }
  .holo-cat-bar { padding: 6px 10px; gap: 6px; }
  .holo-code, .holo-cat-name { font-size: 7px; }
  .cards-bottom-bar { gap: 8px; }
  .cards-hint { display: none; }
}

@media (max-width: 360px) {
  .holo-title { font-size: 9px; }
  .holo-question { font-size: 10px; }
  .holo-mech-text { font-size: 8px; }
}