/* Vibe Check (quiz engine) styles. Imports design tokens from common/theme.css. */

.quiz-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

.quiz-tile {
  display: flex; align-items: center; gap: var(--space-3);
  text-align: left; width: 100%;
  cursor: pointer; color: var(--text);
  font: inherit;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quiz-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tile-accent, var(--accent)) 55%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--tile-accent, var(--accent)) 20%, transparent);
}
.quiz-tile .big { font-size: 2rem; }
.quiz-tile .t { font-weight: 800; font-size: 1.1rem; }
.quiz-tile .s { color: var(--text-dim); font-size: 0.88rem; }

.quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.q-text { margin: var(--space-4) 0; min-height: 2.4em; }

.q-options { display: grid; gap: var(--space-2); }
.q-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  font: 600 1rem var(--font); color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px;
  min-height: 60px;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
}
.q-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.q-option:active { transform: scale(0.985); }
.q-option .emo { font-size: 1.5rem; flex: none; }
.q-option.picked { border-color: var(--accent); background: var(--accent-soft); }

/* Result card (on-page DOM version; the PNG is drawn separately) */
.result-card { text-align: center; padding: var(--space-5) var(--space-4); overflow: hidden; position: relative; }
.result-card .r-emoji { font-size: 4rem; display: block; margin-bottom: var(--space-2); }
.result-card .r-kicker { letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 800; color: var(--accent-text); text-transform: uppercase; }
.result-card h2 { font-size: 2rem; margin: 6px 0 4px; }
.result-card .r-tagline { color: var(--accent-text); font-weight: 650; margin-bottom: var(--space-3); }
.result-card .r-desc { color: var(--text-dim); max-width: 46ch; margin: 0 auto var(--space-4); }

.palette-row { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--space-3); }
.palette-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); }

.vibe-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--space-4); }

.r-stats { display: grid; gap: 10px; max-width: 380px; margin: 0 auto; text-align: left; }
.r-stat .lab { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 650; color: var(--text-dim); margin-bottom: 4px; }

.result-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

@keyframes revealPop {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  60% { transform: scale(1.04) rotate(0.5deg); }
  100% { opacity: 1; transform: none; }
}
.result-card.anim-in { animation: revealPop 600ms var(--ease) both; }