/* =====================================================================
   Mentalist Test — big glossy answer buttons/sliders + political-compass
   result chart (Frutiger Aero glossy quadrants)
   ===================================================================== */
.app.mentalist {
  padding: 16px 18px 14px; gap: 12px; position: relative;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(225,244,255,0.6), rgba(190,225,255,0.45));
}

/* ---------- intro ---------- */
.app.mentalist .mt-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.app.mentalist .mt-intro-title { font: 700 1.6rem var(--font-display); color: #0b3a80; }
.app.mentalist .mt-intro-sub { font: 500 1rem var(--font); opacity: 0.8; }

/* ---------- progress ---------- */
.app.mentalist .mt-progress-wrap { flex: none; }
.app.mentalist .mt-progress-label { font: 700 0.85rem var(--font); color: #0b3a80; margin-bottom: 4px; }
.app.mentalist .mt-progress { height: 14px; border-radius: 999px; overflow: hidden; padding: 0; }
.app.mentalist .mt-progress-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #e2ffb0 0%, #a4f04a 45%, #7ddc2b 52%, #3f9a12 100%);
  box-shadow: 0 0 10px rgba(125,220,43,0.6);
  transition: width 0.4s cubic-bezier(.2,1,.3,1);
}

/* ---------- question card ---------- */
.app.mentalist .mt-content { flex: 1; min-height: 0; display: flex; }
.app.mentalist .mt-card { flex: 1; display: flex; flex-direction: column; gap: 22px; justify-content: center; padding: 26px; }
.app.mentalist .mt-q { font: 700 1.3rem/1.4 var(--font-display); color: #0b3a80; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.8); }

.app.mentalist .mt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.app.mentalist .mt-opt { border: 0; cursor: pointer; padding: 20px 14px; text-align: center; font: 600 1.05rem var(--font); color: #0b3a80; }
.app.mentalist .mt-opt span { position: relative; z-index: 1; }
.app.mentalist .mt-opt:active { transform: translateY(1px) scale(0.98); }

.app.mentalist .mt-slider-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.app.mentalist .mt-slider-val { font: 700 2.2rem var(--font-display); color: #0b5fd6; }
.app.mentalist .mt-slider { width: 100%; max-width: 420px; accent-color: #0b5fd6; height: 32px; cursor: pointer; }
.app.mentalist .mt-slider-labels { width: 100%; max-width: 420px; display: flex; justify-content: space-between; font: 600 0.8rem var(--font); opacity: 0.65; }
.app.mentalist .mt-confirm { align-self: center; margin-top: 4px; }

/* ---------- result: compass + info ---------- */
.app.mentalist .mt-result-wrap { flex: 1; min-height: 0; display: flex; gap: 18px; align-items: center; }
.app.mentalist .mt-compass-wrap { flex: none; width: 320px; }
.app.mentalist .mt-compass {
  position: relative; width: 320px; height: 320px; padding: 0; overflow: hidden;
}
.app.mentalist .mt-quad { position: absolute; width: 50%; height: 50%; }
.app.mentalist .mt-quad.q-tl { left: 0; top: 0; background: linear-gradient(135deg, rgba(160,210,255,0.55), rgba(120,190,255,0.25)); }
.app.mentalist .mt-quad.q-tr { right: 0; top: 0; background: linear-gradient(225deg, rgba(160,255,190,0.55), rgba(125,220,43,0.22)); }
.app.mentalist .mt-quad.q-bl { left: 0; bottom: 0; background: linear-gradient(45deg, rgba(255,190,230,0.55), rgba(255,140,200,0.22)); }
.app.mentalist .mt-quad.q-br { right: 0; bottom: 0; background: linear-gradient(315deg, rgba(255,220,150,0.55), rgba(255,170,60,0.25)); }
.app.mentalist .mt-axis-h, .app.mentalist .mt-axis-v { position: absolute; background: rgba(11,58,128,0.35); }
.app.mentalist .mt-axis-h { left: 0; right: 0; top: 50%; height: 2px; }
.app.mentalist .mt-axis-v { top: 0; bottom: 0; left: 50%; width: 2px; }
.app.mentalist .mt-axis-label {
  position: absolute; font: 700 0.75rem var(--font); color: #0b3a80; text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  z-index: 2; white-space: nowrap;
}
.app.mentalist .mt-axis-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
.app.mentalist .mt-axis-label.bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
.app.mentalist .mt-axis-label.left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.app.mentalist .mt-axis-label.right { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.app.mentalist .mt-dot {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; z-index: 3;
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.3); opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #ffdf5c 40%, #ff9500 100%);
  box-shadow: 0 0 14px rgba(255,160,0,0.8), 0 2px 6px rgba(0,20,80,0.4), 0 0 0 3px rgba(255,255,255,0.8);
  transition: left 0.7s cubic-bezier(.2,1.2,.3,1), top 0.7s cubic-bezier(.2,1.2,.3,1), transform 0.5s cubic-bezier(.2,1.4,.3,1) 0.15s, opacity 0.3s ease;
}
.app.mentalist .mt-dot.landed { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.app.mentalist .mt-result-info { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.app.mentalist .mt-result-name { font: 700 1.3rem var(--font-display); color: #0b3a80; }
.app.mentalist .mt-result-coords { font: 600 0.85rem var(--font); color: #0b5fd6; }
.app.mentalist .mt-result-profile { font: 500 0.92rem/1.5 var(--font); opacity: 0.85; }
.app.mentalist .mt-retry { margin-top: 10px; }

/* =====================================================================
   Mobile
   ===================================================================== */
html.mobile .app.mentalist { padding: 12px 12px 10px; gap: 10px; }
html.mobile .app.mentalist .mt-card { padding: 18px; gap: 18px; }
html.mobile .app.mentalist .mt-q { font-size: 1.1rem; }
html.mobile .app.mentalist .mt-opts { grid-template-columns: 1fr; gap: 10px; }
html.mobile .app.mentalist .mt-opt { padding: 16px 12px; min-height: 48px; }
html.mobile .app.mentalist .mt-slider { height: 40px; }
html.mobile .app.mentalist .mt-result-wrap { flex-direction: column; overflow: auto; }
html.mobile .app.mentalist .mt-compass-wrap { width: 100%; max-width: 340px; }
html.mobile .app.mentalist .mt-compass { width: 100%; height: auto; aspect-ratio: 1 / 1; }
html.mobile .app.mentalist .mt-result-info { width: 100%; align-items: center; text-align: center; }