/* ============================================================
   style.css — Български политически компас, Избори 2026
   ============================================================
   1.  Design Tokens (CSS Custom Properties)
   2.  Reset & Base
   3.  Typography
   4.  Layout / App Wrapper
   5.  Screens (show/hide)
   6.  Glass Card component
   7.  Start Screen
   8.  Quiz Screen
   9.  Progress Bar
   10. Question Card
   11. Axis Tag badge
   12. Answer Buttons
   13. Results Screen
   14. Compass SVG
   15. Rankings list
   16. Coordinate tiles
   17. Animations
   18. Responsive (≤ 640px)
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-root:    #090913;
  --bg-card:    #12121f;
  --bg-card-2:  #191929;
  --bg-glass:   rgba(255, 255, 255, 0.04);

  /* Borders */
  --border:     rgba(255, 255, 255, 0.09);
  --border-accent: rgba(99, 102, 241, 0.45);

  /* Accents */
  --accent:     #6366f1;   /* indigo */
  --accent-2:   #38bdf8;   /* sky */
  --accent-gold: #f59e0b;  /* amber – winner */
  --accent-glow: rgba(99, 102, 241, 0.35);

  /* Text */
  --text-1:  #f1f1ff;
  --text-2:  rgba(241, 241, 255, 0.58);
  --text-3:  rgba(241, 241, 255, 0.32);

  /* Semantic */
  --agree-color:    #22c55e;
  --disagree-color: #ef4444;

  /* Typography */
  --font: 'Inter', system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Radii */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;

  /* Shadows */
  --shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  --glow:   0 0 50px rgba(99, 102, 241, 0.22);

  /* Transitions */
  --t-fast:   140ms ease;
  --t-normal: 260ms ease;
  --t-slow:   480ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-root);
  color: var(--text-1);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-x: hidden;

  /* Ambient glow meshes */
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 10%,  rgba(99,102,241,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 90%,  rgba(56,189,248,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 50%,  rgba(0,0,0,0.5)        0%, transparent 100%);
  background-attachment: fixed;
}

/* ── 3. Typography ─────────────────────────────────────────── */
h1 {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}
p { line-height: 1.65; color: var(--text-2); }

/* ── 4. Layout ─────────────────────────────────────────────── */
.app {
  width: 100%;
  max-width: 680px;
  padding: 20px 16px 40px;
}

/* ── 5. Screens ────────────────────────────────────────────── */
.screen { display: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.screen.active { display: flex; animation: fadeUp var(--t-normal) both; }

/* ── 6. Glass Card ─────────────────────────────────────────── */
.card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Ambient shimmer top-left */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, transparent 55%);
  pointer-events: none;
}

.card--compact { padding: 24px 28px; }
.card--center  { text-align: center; }

/* ── 7. Start Screen ───────────────────────────────────────── */

/* Super-badge */
.start-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(99,102,241,0.14);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 100px;
  color: #a5b4fc;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 22px;
}

/* Hero title gradient */
.start-title {
  background: linear-gradient(145deg, #f1f1ff 25%, #818cf8 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}

.start-sub {
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto 28px;
}

/* Stats row */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.87rem;
  color: var(--text-2);
}
.stat-icon { font-size: 1.1rem; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.disclaimer {
  font-size: 0.74rem;
  color: var(--text-3);
  line-height: 1.55;
}

/* ── 8. Quiz Screen ────────────────────────────────────────── */
#screen-quiz { gap: 14px; }

.quiz-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-2);
}

/* ── 9. Progress Bar ───────────────────────────────────────── */
.progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 100px;
  transition: width var(--t-slow);
}

/* ── 10. Question Card ─────────────────────────────────────── */
#question-card {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 40px;
  text-align: center;
}

#question-text {
  font-size: clamp(1rem, 2.4vw, 1.22rem);
  font-weight: var(--fw-medium);
  color: var(--text-1);
  line-height: 1.65;
  max-width: 560px;
}

/* ── 11. Axis Tag ──────────────────────────────────────────── */
.axis-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.axis-tag[data-axis="x"] {
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.35);
  color: #a5b4fc;
}
.axis-tag[data-axis="y"] {
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.30);
  color: #7dd3fc;
}

/* ── 12. Answer Buttons ────────────────────────────────────── */
.answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.answer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: var(--fw-medium);
  padding: 16px 12px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  line-height: 1.3;
  text-align: center;
}

.answer-btn .btn-emoji { font-size: 1.35rem; pointer-events: none; }

.answer-btn:hover {
  transform: translateY(-2px);
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.50);
  box-shadow: 0 4px 20px rgba(99,102,241,0.18);
}

/* Per-button accent colors */
#btn-sa:hover  { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.45); }
#btn-pa:hover  { background: rgba(34,197,94,0.07);  border-color: rgba(34,197,94,0.30); }
#btn-pd:hover  { background: rgba(239,68,68,0.07);  border-color: rgba(239,68,68,0.30); }
#btn-sd:hover  { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.45); }

.answer-btn.selected {
  transform: scale(0.97);
  background: rgba(99,102,241,0.22);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(99,102,241,0.35);
}
#btn-sa.selected, #btn-pa.selected {
  background: rgba(34,197,94,0.20);
  border-color: #22c55e;
  box-shadow: 0 0 20px rgba(34,197,94,0.30);
}
#btn-sd.selected, #btn-pd.selected {
  background: rgba(239,68,68,0.20);
  border-color: #ef4444;
  box-shadow: 0 0 20px rgba(239,68,68,0.30);
}

.answer-btn:active { transform: scale(0.96); }

/* ── 13. Results Screen ────────────────────────────────────── */
#screen-results { gap: 16px; }

/* Winner card */
.winner-card {
  border-color: rgba(245,158,11,0.35);
  background: linear-gradient(135deg, rgba(245,158,11,0.07), transparent);
  padding: 32px 36px;
  text-align: center;
}

.winner-label {
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 14px;
}

#match-party {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: var(--fw-black);
  margin-bottom: 10px;
}

#match-desc {
  font-size: 0.82rem;
  color: var(--text-2);
}

/* ── Compass SVG wrapper ── */
.compass-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.35);
}
.compass-wrapper svg { width: 100%; height: 100%; display: block; }

/* Pulse ring на позицията "ВИЕ" */
.user-pulse { animation: svgPulse 2s ease-out infinite; }

/* ── Coordinate tiles ── */
.coords-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.coord-tile {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
}

.coord-axis { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px; }
.coord-val  { font-size: 2.1rem; font-weight: var(--fw-black); color: var(--accent); line-height: 1; margin-bottom: 4px; }
.coord-desc { font-size: 0.75rem; color: var(--text-2); }

/* ── Rankings list ── */
.section-label {
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
  width: 100%;
}

#ranking-list { width: 100%; display: flex; flex-direction: column; gap: 7px; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}

.rank-row--top {
  background: rgba(245,158,11,0.09);
  border-color: rgba(245,158,11,0.30);
}

.rank-pos   { font-size: 0.88rem; flex-shrink: 0; width: 24px; text-align: center; color: var(--text-2); }
.rank-abbr  { font-size: 0.8rem; font-weight: var(--fw-bold); flex-shrink: 0; width: 56px; }
.rank-name  { font-size: 0.83rem; flex: 1; color: var(--text-2); }
.rank-dist  { font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 14. Buttons (Primary / Secondary) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--r-md);
  padding: 16px 44px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 28px rgba(99,102,241,0.45);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 40px rgba(99,102,241,0.65);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  border: 1.5px solid rgba(99,102,241,0.45);
  border-radius: var(--r-md);
  padding: 12px 28px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-secondary:hover {
  background: rgba(99,102,241,0.12);
  border-color: var(--accent);
}

/* ── 15. Animations ────────────────────────────────────────── */

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

.slide-in {
  animation: slideRight 340ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes svgPulse {
  0%   { r: 18; opacity: 0.55; }
  70%  { r: 26; opacity: 0; }
  100% { r: 26; opacity: 0; }
}

/* ── 16. Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 24px 20px; }
  #question-card { padding: 28px 20px; }
  .answers-grid { grid-template-columns: 1fr; }
  .coords-grid  { grid-template-columns: 1fr; }
  .stats { flex-direction: column; align-items: center; gap: 10px; }
  .winner-card { padding: 24px 20px; }
  .rank-name { display: none; }
  .rank-abbr { width: auto; flex: 1; }
}

@media (max-width: 380px) {
  .card { padding: 18px 14px; }
  h1 { font-size: 1.7rem; }
}

/* ── 17. Footer — Автор и Бутон за дарение ────────────────── */

.site-footer {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: var(--r-lg);
  padding: 14px 22px;
  text-decoration: none;
  color: var(--text-1);
  width: 100%;
  max-width: 420px;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.btn-donate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.btn-donate:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.60);
  box-shadow: 0 6px 30px rgba(99, 102, 241, 0.22);
}
.btn-donate:active { transform: scale(0.99); }

.donate-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));
}
.donate-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.donate-main { font-size: 0.98rem; font-weight: var(--fw-bold); color: var(--text-1); }
.donate-sub  { font-size: 0.73rem; color: var(--text-2); letter-spacing: 0.01em; }
.donate-arrow {
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.btn-donate:hover .donate-arrow { transform: translateX(4px); }

.footer-credit {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.74rem;
  color: var(--text-3);
}
.footer-author { color: var(--text-2); font-weight: var(--fw-bold); }
.footer-dot    { color: var(--text-3); font-size: 0.65rem; }

@media (max-width: 480px) {
  .btn-donate  { max-width: 100%; }
  .donate-main { font-size: 0.88rem; }
}

/* ── 18. Share бутон и Results actions ────────────────────── */

/* Ред с двата бутона (Отново + Сподели) */
.results-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.results-actions .btn-secondary { flex: 1; justify-content: center; }

/* Share бутон */
.btn-share {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--r-md);
  padding: 13px 20px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.40);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.btn-share:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(5, 150, 105, 0.60);
  background: linear-gradient(135deg, #10b981, #059669);
}
.btn-share:active { transform: scale(0.98); }

/* ── 19. Toast нотификация ─────────────────────────────────── */

.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 15, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: var(--r-lg);
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
  padding: 13px 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: 9999;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.share-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .results-actions { flex-direction: column; }
  .results-actions .btn-secondary,
  .btn-share { flex: unset; width: 100%; }
}

/* ── Имейл за контакт ── */
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--t-fast);
  letter-spacing: 0.01em;
}
.footer-email:hover {
  color: var(--accent);
}

/* ─── край на style.css ──────────────────────────────────── */