/* ==========================================================================
   POLCOMP CALCULATOR — 2D POLITICAL COMPASS & ELEMENTARY VECTOR ENGINE
   polcomp.calculator.ankab.org • Ankab.org
   ========================================================================== */

:root,
body.theme-daylight {
  --bg-primary: #fafaf7;
  --bg-secondary: #f2f1eb;
  --bg-card: #ffffff;
  --bg-elevated: #f7f6f1;
  --text-primary: #111318;
  --text-secondary: #434956;
  --text-muted: #6e7687;
  --border-color: rgba(17, 19, 24, 0.11);
  --border-strong: rgba(17, 19, 24, 0.22);
  --accent-color: #1d4ed8;
  --accent-soft: rgba(29, 78, 216, 0.10);
  --shadow-card: 0 10px 28px -10px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 18px 36px -12px rgba(15, 23, 42, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.06);

  /* Authentic Political Compass Quadrant Fills */
  --q-auth-left-bg: #f9baba;
  --q-auth-right-bg: #92d9f8;
  --q-lib-left-bg: #c8e4bc;
  --q-lib-right-yellow: #f5f471;
  --q-lib-right-purple: #d8bef3;

  /* Quadrant Strong Badge Accents */
  --q-auth-left: #dc2626;
  --q-auth-right: #2563eb;
  --q-lib-left: #16a34a;
  --q-lib-right: #ca8a04;
  --q-centrist: #64748b;
}

body.theme-obsidian {
  --bg-primary: #090b10;
  --bg-secondary: #10141d;
  --bg-card: #131824;
  --bg-elevated: #192030;
  --text-primary: #f3f5f9;
  --text-secondary: #b4bfd0;
  --text-muted: #7e8ba1;
  --border-color: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --accent-color: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --shadow-card: 0 12px 32px -10px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 20px 42px -12px rgba(0, 0, 0, 0.72);

  /* Rich Tinted Quadrant Fills in Dark Mode */
  --q-auth-left-bg: #4c1d24;
  --q-auth-right-bg: #173254;
  --q-lib-left-bg: #183d2c;
  --q-lib-right-yellow: #494219;
  --q-lib-right-purple: #382352;

  --q-auth-left: #f87171;
  --q-auth-right: #60a5fa;
  --q-lib-left: #4ade80;
  --q-lib-right: #facc15;
  --q-centrist: #94a3b8;
}

/* Base Typography & Theme Transitions */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", "Hind Siliguri", system-ui, -apple-system, sans-serif;
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
  overflow-x: hidden;
}

body.lang-bn {
  font-family: "Hind Siliguri", "Plus Jakarta Sans", sans-serif;
}

.serif-display {
  font-family: "Lora", "Noto Serif Bengali", Georgia, serif;
}

body.lang-bn .serif-display {
  font-family: "Noto Serif Bengali", "Lora", serif;
}

.mono-meta {
  font-family: "JetBrains Mono", "Hind Siliguri", monospace;
}

/* Reusable Theme Surfaces */
.theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.4s ease;
}

.theme-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}

.theme-border {
  border: 1px solid var(--border-color);
}

.theme-border-t {
  border-top: 1px solid var(--border-color);
}

.theme-border-b {
  border-bottom: 1px solid var(--border-color);
}

.theme-text-secondary {
  color: var(--text-secondary);
}

.theme-text-muted {
  color: var(--text-muted);
}

.theme-accent-text {
  color: var(--accent-color);
}

.theme-input {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.theme-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background-color: var(--bg-card);
}

/* Pills & Filter Buttons */
.theme-pill {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  cursor: pointer;
}

.theme-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.theme-pill.active {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* Quadrant Pill Badges */
.q-badge-auth-left {
  background-color: rgba(220, 38, 38, 0.13);
  color: var(--q-auth-left);
  border: 1px solid rgba(220, 38, 38, 0.28);
}

.q-badge-auth-right {
  background-color: rgba(37, 99, 235, 0.13);
  color: var(--q-auth-right);
  border: 1px solid rgba(37, 99, 235, 0.28);
}

.q-badge-lib-left {
  background-color: rgba(22, 163, 74, 0.13);
  color: var(--q-lib-left);
  border: 1px solid rgba(22, 163, 74, 0.28);
}

.q-badge-lib-right {
  background-color: rgba(202, 138, 4, 0.15);
  color: var(--q-lib-right);
  border: 1px solid rgba(202, 138, 4, 0.32);
}

.q-badge-centrist {
  background-color: rgba(100, 116, 139, 0.15);
  color: var(--q-centrist);
  border: 1px solid rgba(100, 116, 139, 0.30);
}

/* ==========================================================================
   FLOATING 3D POLITICAL COMPASS MEDALLION (TOP RIGHT — TWIN TO YIN & YANG COIN)
   ========================================================================== */
.medallion-float-wrapper {
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 48;
  width: 62px;
  height: 62px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .medallion-float-wrapper {
    top: 11px;
    right: 24px;
    width: 68px;
    height: 68px;
  }
}

.medallion-3d-stage {
  width: 100%;
  height: 100%;
  perspective: 900px;
  animation: medallionFloat 4.2s ease-in-out infinite;
}

@keyframes medallionFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.medallion-3d-rotor {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.medallion-3d-rotor.is-daylight {
  transform: rotateY(0deg);
}

.medallion-3d-rotor.is-obsidian {
  transform: rotateY(180deg);
}

.medallion-3d-rotor.flipping-to-obsidian {
  animation: flipToObsidian 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.medallion-3d-rotor.flipping-to-daylight {
  animation: flipToDaylight 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes flipToObsidian {
  0%   { transform: translateY(0) scale(1) rotateY(0deg) rotateX(0deg); }
  45%  { transform: translateY(-14px) scale(1.14) rotateY(360deg) rotateX(14deg); }
  100% { transform: translateY(0) scale(1) rotateY(900deg) rotateX(0deg); }
}

@keyframes flipToDaylight {
  0%   { transform: translateY(0) scale(1) rotateY(180deg) rotateX(0deg); }
  45%  { transform: translateY(-14px) scale(1.14) rotateY(540deg) rotateX(-14deg); }
  100% { transform: translateY(0) scale(1) rotateY(1080deg) rotateX(0deg); }
}

.medallion-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 10px 24px -4px rgba(0, 0, 0, 0.38),
    0 0 0 2.5px rgba(212, 165, 32, 0.85),
    inset 0 0 10px rgba(255, 236, 150, 0.45);
}

.medallion-face::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.45) 50%, transparent 64%);
  transform: translateX(-85%) rotate(15deg);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.medallion-float-wrapper:hover .medallion-face::after {
  transform: translateX(85%) rotate(15deg);
}

.medallion-face-back {
  transform: rotateY(180deg);
}

/* ==========================================================================
   INTERACTIVE 2D POLITICAL COMPASS SVG GRAPH
   ========================================================================== */
.compass-board-shell {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  user-select: none;
}

.compass-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  cursor: crosshair;
}

.compass-pin-group {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.compass-pin-group:hover .compass-pin-dot {
  stroke-width: 1.1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

@keyframes activePinPulse {
  0%, 100% { r: 3.4; opacity: 0.85; }
  50% { r: 5.8; opacity: 0.22; }
}

.compass-active-halo {
  animation: activePinPulse 2s ease-in-out infinite;
}

/* Card Image & Description Styling (Matching bangladeshinews.yay.ankab.org) */
.card-img-wrap {
  overflow: hidden;
}

.card-img-wrap img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-card-interactive:hover .card-img-wrap img {
  transform: scale(1.04);
}

.news-card-desc {
  font-size: 0.825rem;
  line-height: 1.58;
  color: var(--text-secondary);
  padding-top: 2px;
  word-break: break-word;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

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

.article-enter {
  animation: cardFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Live Status Dot */
.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: #10b981;
  display: inline-block;
  animation: liveDotPulse 2.2s ease-in-out infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.82); }
}

/* Custom Scrollbar for 62-Q Test & Drawers */
.slim-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.slim-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}