/* ═══════════════════════════════════════════════════════════════════════════════
   path.css — Learning Path map (Phase 3A)
   Renders a Duolingo-style winding path of nodes for one certification.
═══════════════════════════════════════════════════════════════════════════════ */

.path-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 96px;
  position: relative;
  z-index: 1;
}

.path-page-loading {
  text-align: center;
  padding: 80px 20px;
  color: #a8b6d1;
}
.path-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #60a5fa;
  border-radius: 999px;
  margin: 0 auto 16px;
  animation: path-spin 0.9s linear infinite;
}
@keyframes path-spin { to { transform: rotate(360deg); } }

.path-page-error {
  text-align: center;
  padding: 80px 20px;
  color: #e8edf8;
}
.path-page-error h1 { margin: 0 0 8px; font-size: 22px; }
.path-page-error p { color: #a8b6d1; font-size: 14px; margin: 0 0 24px; }
.path-page-error .cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff; text-decoration: none;
  padding: 12px 22px; border-radius: 12px; font-weight: 600;
  border: none;
}

/* ─── Header ─── */
.path-header {
  text-align: center;
  margin: 0 0 28px;
  padding: 26px 22px 22px;
  /* Was max-width: 560px → looked orphaned/narrow next to the 720px-wide
     path map below. Now full-width inside .path-page. */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(96, 165, 250, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(14, 20, 36, 0.7), rgba(10, 15, 29, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.path-header::before {
  content: '';
  position: absolute; top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #60a5fa, #a78bfa, transparent);
  opacity: 0.7;
}
.path-header-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93c5fd;
  display: inline-block;
  padding: 4px 11px;
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  margin-bottom: 10px;
}
.path-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.path-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.path-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #a8b6d1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 12px;
  border-radius: 999px;
}
.path-stat-icon { font-size: 14px; }

/* ─── Chapter banner ─── */
.path-chapter-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 18px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.08), rgba(167, 139, 250, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.path-chapter-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
  font-weight: 700;
}
.path-chapter-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #e8edf8;
}

/* ─── Map / nodes ─── */
.path-map {
  position: relative;
  padding: 12px 0 40px;
}
.path-node-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0;
  position: relative;
}
.path-node-row--left  { padding-left: 0;    padding-right: 30%; justify-content: flex-start; }
.path-node-row--right { padding-left: 30%;  padding-right: 0;   justify-content: flex-end; flex-direction: row-reverse; }
.path-node-row--right .path-node-title { text-align: right; }
@media (max-width: 480px) {
  .path-node-row--left  { padding-right: 18%; }
  .path-node-row--right { padding-left: 18%; }
}

.path-node {
  --node-color: #60a5fa;
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--node-color) 18%, #0c1120),
    color-mix(in srgb, var(--node-color) 5%, #08101e));
  border: 3px solid var(--node-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 0 0 4px rgba(10, 15, 29, 0.9),
    0 8px 18px rgba(0, 0, 0, 0.40),
    inset 0 -3px 0 color-mix(in srgb, var(--node-color) 35%, #000);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}
.path-node:hover { transform: translateY(-2px); }
.path-node:active { transform: scale(0.96); }
.path-node-icon {
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.path-node-title {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #e8edf8;
  line-height: 1.3;
  min-width: 0;
}

/* States */
.path-node.is-locked {
  background: linear-gradient(180deg, rgba(40, 50, 70, 0.6), rgba(20, 28, 48, 0.4));
  border-color: rgba(100, 115, 140, 0.4);
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow:
    0 0 0 4px rgba(10, 15, 29, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}
.path-node.is-locked .path-node-icon { filter: grayscale(1) brightness(0.55); }
.path-node-row:has(.path-node.is-locked) .path-node-title { color: #6b7c97; }

.path-node.is-completed {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #4ade80;
}
.path-node.is-completed .path-node-icon {
  color: #fff;
  font-weight: 800;
  font-size: 26px;
}

.path-node.is-current {
  width: 84px;
  height: 84px;
  font-size: 34px;
  animation: path-node-pulse 1.4s ease-in-out infinite;
}
@keyframes path-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(10, 15, 29, 0.9), 0 8px 24px var(--node-color), 0 0 0 0 var(--node-color); }
  50%      { box-shadow: 0 0 0 4px rgba(10, 15, 29, 0.9), 0 8px 24px var(--node-color), 0 0 0 12px color-mix(in srgb, var(--node-color) 12%, transparent); }
}

.path-node-current-pin {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.path-node-current-label {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1c1917;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.35);
}
.path-node-current-arrow {
  color: #fbbf24;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: path-arrow-bob 1.4s ease-in-out infinite;
}
@keyframes path-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Final-boss styling */
.path-node.is-finalboss {
  width: 110px;
  height: 110px;
  border-radius: 26px;
  font-size: 44px;
  background: linear-gradient(135deg, #f59e0b, #d97706 60%, #92400e);
  border-color: #fbbf24;
  border-width: 4px;
  box-shadow:
    0 0 0 5px rgba(10, 15, 29, 0.9),
    0 12px 30px rgba(245, 158, 11, 0.4),
    inset 0 -4px 0 #92400e;
}
.path-node-final {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: #fbbf24;
  color: #1c1917;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Sub-boss styling */
.path-node.is-subboss {
  width: 92px;
  height: 92px;
  font-size: 38px;
  background: linear-gradient(135deg, #fb923c, #c2410c);
  border-color: #fdba74;
  box-shadow:
    0 0 0 4px rgba(10, 15, 29, 0.9),
    0 10px 22px rgba(251, 146, 60, 0.4),
    inset 0 -3px 0 #9a3412;
}

/* ─── Bottom-sheet ─── */
.node-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.node-sheet[hidden] { display: none; }
.node-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.node-sheet.is-open .node-sheet-backdrop { opacity: 1; }
.node-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, #0f172a 0%, #0a0f1d 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px 22px 0 0;
  padding: 30px 22px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
  max-height: 85vh;
  overflow-y: auto;
}
.node-sheet.is-open .node-sheet-panel { transform: translateY(0); opacity: 1; }
.node-sheet-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #cbd5e1;
  font-size: 16px;
  cursor: pointer;
}
.node-sheet-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 10px;
}
.node-sheet-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.node-sheet h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f1f5fb;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.node-sheet-desc {
  color: #a8b6d1;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.node-sheet-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #7c90ae;
  margin-bottom: 18px;
}
.node-sheet-start {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  min-height: 54px;
}
.node-sheet-start:active { transform: scale(0.985); }

/* ─── Concept flashcards (inline) — V25 readable rewrite ───────────
   The old 3D flip with absolute children clipped long explanations
   (some "back" texts run 200+ chars). Now: simple stacked-faces grid
   that grows with content. Both faces share a grid cell and toggle via
   opacity + scale so the visual still feels like a flip without the
   clipping problems. */
.node-sheet-inline { margin-top: 14px; }
.concept-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.flashcard {
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.flashcard-inner {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
}
.flashcard-front,
.flashcard-back {
  grid-area: stack;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  display: block;
  color: #f1f5fb;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.flashcard-back {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.06));
  border-color: rgba(96, 165, 250, 0.40);
  color: #e8edf8;
}
.flashcard.is-flipped .flashcard-front {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}
.flashcard.is-flipped .flashcard-back {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.flashcard::before {
  content: 'Tap to flip';
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: #7c90ae;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.7;
  z-index: 2;
}
.flashcard.is-flipped::before { content: 'Tap to see question'; color: #93c5fd; }
.flashcard-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 6px;
  font-weight: 700;
}
.flashcard-back .flashcard-label { color: #4ade80; }
.flashcard-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #f1f5fb;
}
.flashcard-back .flashcard-body { color: #e8edf8; }
.flashcard:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* ─── Mini-game (match) ─── */
.minigame-help {
  color: #93c5fd; font-size: 13px; text-align: center;
  margin: 0 0 14px;
}
.minigame-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.minigame-col { display: flex; flex-direction: column; gap: 6px; }
.minigame-tile {
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8edf8;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.minigame-tile.is-active {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}
.minigame-tile.is-solved {
  background: rgba(34, 197, 94, 0.18);
  border-color: #4ade80;
  cursor: default;
  opacity: 0.7;
}
.minigame-tile.is-wrong {
  background: rgba(239, 68, 68, 0.16);
  border-color: #f87171;
  animation: minigame-shake 0.4s;
}
@keyframes minigame-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PATH WALKER — player avatar sitting on the current node (Phase 3B, V23)
   Body-attached + JS-positioned to viewport-coords above the current node.
═══════════════════════════════════════════════════════════════════════════════ */
.cq-path-walker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.35s ease, transform 0s;
  will-change: transform;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}
.cq-path-walker--visible { opacity: 1; }
.cq-path-walker-emoji {
  font-size: 34px;
  line-height: 1;
  animation: cq-walker-idle 2.4s ease-in-out infinite;
}
.cq-path-walker--walking .cq-path-walker-emoji {
  animation: cq-walker-walk 0.7s linear;
}
.cq-path-walker-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 4px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
  border-radius: 999px;
  z-index: -1;
}
@keyframes cq-walker-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-1.5px) rotate(3deg); }
}
@keyframes cq-walker-walk {
  0%   { transform: translateY(0) rotate(-8deg); }
  25%  { transform: translateY(-6px) rotate(6deg); }
  50%  { transform: translateY(0) rotate(-4deg); }
  75%  { transform: translateY(-6px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONFETTI — vanilla particles, no library
═══════════════════════════════════════════════════════════════════════════════ */
.cq-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.cq-confetti-piece {
  --dx: 0px;
  --dy: -200px;
  --rot: 360deg;
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: cq-confetti-fly 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes cq-confetti-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 600px)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cq-path-walker-emoji, .cq-confetti-piece { animation: none !important; }
  .cq-confetti { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHEST node + reward modal (Phase 3B)
═══════════════════════════════════════════════════════════════════════════════ */
.path-node.is-chest {
  background: linear-gradient(180deg, #fde047, #f59e0b);
  border-color: #fef08a;
  font-size: 32px;
}
.path-node.is-chest.is-completed {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #4ade80;
}

.cq-chest-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 14px 0 6px;
}
.cq-chest {
  position: relative;
  width: 120px; height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease;
}
.cq-chest:active { transform: scale(0.97); }
.cq-chest-art {
  font-size: 88px;
  line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(251, 191, 36, 0.45));
  animation: cq-chest-bob 1.6s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes cq-chest-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-2px) rotate(3deg); }
}
.cq-chest-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(251,191,36,0.5) 0deg, transparent 25deg, rgba(251,191,36,0.5) 50deg, transparent 75deg, rgba(251,191,36,0.5) 100deg, transparent 125deg, rgba(251,191,36,0.5) 150deg, transparent 175deg, rgba(251,191,36,0.5) 200deg, transparent 225deg, rgba(251,191,36,0.5) 250deg, transparent 275deg, rgba(251,191,36,0.5) 300deg, transparent 325deg, rgba(251,191,36,0.5) 350deg, transparent 360deg);
  filter: blur(8px);
  opacity: 0;
  border-radius: 999px;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cq-chest--opening .cq-chest-art {
  animation: cq-chest-pop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.cq-chest--opening .cq-chest-rays {
  opacity: 1;
  animation: cq-chest-spin 4s linear infinite;
}
@keyframes cq-chest-pop {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(0.9) rotate(-8deg); }
  40%  { transform: scale(1.25) rotate(8deg); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes cq-chest-spin { to { transform: rotate(360deg); } }

.cq-chest-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cq-chest-xp {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  animation: cq-chest-xp-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes cq-chest-xp-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cq-chest-cos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.18), rgba(96, 165, 250, 0.10));
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
}
.cq-chest-cos-emoji { font-size: 28px; line-height: 1; }
.cq-chest-cos-name { color: #f1f5fb; font-size: 14px; font-weight: 600; }
.cq-chest-cos-name small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cq-chest-hint {
  margin: 0;
  color: #93c5fd;
  font-size: 13px;
}
.cq-chest-continue {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

/* Hat overlay on the walker emoji */
.cq-path-walker-hat {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  z-index: 1;
  pointer-events: none;
  animation: cq-walker-hat-tilt 4.2s ease-in-out infinite;
}
@keyframes cq-walker-hat-tilt {
  0%, 100% { transform: translateX(-50%) rotate(-6deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMBO FLASH (Phase 3B.4) — pops over the matched tile / TF card
═══════════════════════════════════════════════════════════════════════════════ */
.cq-combo-flash {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: cq-combo-fly 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.cq-combo-x {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: -0.02em;
  text-shadow:
    0 2px 0 #92400e,
    0 4px 12px rgba(251, 191, 36, 0.55),
    0 0 16px rgba(251, 191, 36, 0.4);
}
.cq-combo-xp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  color: #1c1917;
  background: #fbbf24;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
}
@keyframes cq-combo-fly {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20%  { transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
  70%  { transform: translate(-50%, -90%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -130%) scale(0.85); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   YES/NO QUICK DRILL (Phase 4 rework — replaces TF speed-run + match-up)
   The card shows "Q: …" and "A: …" so any MCQ produces a sensible Yes/No
   prompt without rewriting questions.
═══════════════════════════════════════════════════════════════════════════════ */
.minigame-yn {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 8px;
}
.yn-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #cbd5e1;
}
.yn-progress, .yn-score { flex: 0 0 auto; }
.yn-timer {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.yn-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4ade80, #fbbf24, #f87171);
  border-radius: 999px;
}
.yn-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 16px 16px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #e8edf8;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.yn-stem {
  font-size: 15px;
  line-height: 1.45;
  color: #f1f5fb;
}
.yn-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.yn-option {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #fef3c7;
}
.yn-card--right { background: linear-gradient(180deg, rgba(34, 197, 94, 0.20), rgba(34, 197, 94, 0.08)); border-color: rgba(74, 222, 128, 0.45); }
.yn-card--wrong { background: linear-gradient(180deg, rgba(239, 68, 68, 0.20), rgba(239, 68, 68, 0.08)); border-color: rgba(248, 113, 113, 0.45); animation: minigame-shake 0.4s; }
.yn-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.yn-btn {
  padding: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 17px;
  border-radius: 14px;
  border: 2px solid;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.yn-btn:active { transform: scale(0.96); }
.yn-btn--yes { background: rgba(34, 197, 94, 0.16); border-color: #4ade80; color: #4ade80; }
.yn-btn--no  { background: rgba(239, 68, 68, 0.16); border-color: #f87171; color: #f87171; }
.yn-btn--yes:hover { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18); }
.yn-btn--no:hover  { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); }

.yn-summary {
  text-align: center;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.yn-summary-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: #f1f5fb;
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.yn-summary-label { color: #93c5fd; font-size: 15px; }
.yn-summary-bonus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.30);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 4px;
}
.yn-continue {
  margin-top: 14px;
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PATH INDEX (Phase 3B.6) — grid of all available paths
═══════════════════════════════════════════════════════════════════════════════ */
.path-index-header { margin-bottom: 22px; }
.path-index-sub { color: #a8b6d1; font-size: 14px; line-height: 1.55; margin: 8px 0 0; }
.path-index-loading { text-align: center; color: #a8b6d1; padding: 40px 0; }
.path-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.path-index-card {
  --brand-color: #60a5fa;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-color) 8%, rgba(14, 20, 36, 0.8)),
    color-mix(in srgb, var(--brand-color) 2%, rgba(10, 15, 29, 0.7)));
  border: 1px solid color-mix(in srgb, var(--brand-color) 22%, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  min-height: 130px;
}
.path-index-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-color), transparent);
  opacity: 0.7;
}
.path-index-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-color) 50%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}
.path-index-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-color) 75%, #cbd5e1);
}
.path-index-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f1f5fb;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 2px 0 4px;
}
.path-index-meta {
  display: flex;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #7c90ae;
  margin-bottom: 8px;
}
.path-index-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.path-index-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 60%, #fbbf24));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.path-index-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--brand-color);
  font-weight: 700;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .path-index-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END-OF-PATH CEREMONY (Phase 3C polish, V24, 2026-05-12)
   Full-bleed overlay that fires when the final-boss node is cleared.
   Rotating gold rays behind a giant laurel + brand-colored CTA + share path.
═══════════════════════════════════════════════════════════════════════════════ */
.cq-ceremony {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cq-ceremony-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--brand-color, #fbbf24) 30%, rgba(4, 8, 18, 0.85)) 0%,
    rgba(4, 8, 18, 0.92) 70%);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cq-ceremony.is-open .cq-ceremony-backdrop { opacity: 1; }

.cq-ceremony-panel {
  position: relative;
  width: min(92%, 460px);
  padding: 40px 30px 28px;
  background: linear-gradient(180deg, #1a2236 0%, #0a0f1d 100%);
  border: 2px solid color-mix(in srgb, var(--brand-color, #fbbf24) 50%, transparent);
  border-radius: 28px;
  text-align: center;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px color-mix(in srgb, var(--brand-color, #fbbf24) 30%, transparent) inset;
  overflow: hidden;
}
.cq-ceremony.is-open .cq-ceremony-panel { transform: scale(1); opacity: 1; }

.cq-ceremony-rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 0deg,
    transparent 20deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 40deg,
    transparent 60deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 80deg,
    transparent 100deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 120deg,
    transparent 140deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 160deg,
    transparent 180deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 200deg,
    transparent 220deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 240deg,
    transparent 260deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 280deg,
    transparent 300deg,
    color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent) 320deg,
    transparent 340deg);
  filter: blur(20px);
  opacity: 0;
  animation: cq-ceremony-rays 8s linear infinite, cq-ceremony-rays-fade 1s ease 0.2s forwards;
  pointer-events: none;
}
@keyframes cq-ceremony-rays { to { transform: rotate(360deg); } }
@keyframes cq-ceremony-rays-fade { to { opacity: 0.55; } }

.cq-ceremony-laurel {
  position: relative;
  display: inline-block;
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--brand-color, #fbbf24) 60%, transparent));
  animation: cq-ceremony-laurel-pop 1.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  z-index: 1;
}
@keyframes cq-ceremony-laurel-pop {
  0%   { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.cq-ceremony-eyebrow {
  position: relative;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--brand-color, #fbbf24);
  font-weight: 700;
  z-index: 1;
}
.cq-ceremony h2 {
  position: relative;
  margin: 8px 0 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  background: linear-gradient(180deg, #fff, #cbd5e1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
.cq-ceremony-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: #a8b6d1;
  line-height: 1.55;
  z-index: 1;
}
.cq-ceremony-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}
.cq-ceremony-share {
  background: linear-gradient(135deg, var(--brand-color, #fbbf24), color-mix(in srgb, var(--brand-color, #fbbf24) 70%, #92400e));
  color: #1c1917;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 16px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-color, #fbbf24) 45%, transparent);
}
.cq-ceremony-share:active { transform: scale(0.97); }
.cq-ceremony-dismiss {
  background: transparent;
  color: #a8b6d1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 22px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cq-ceremony-dismiss:hover { background: rgba(255, 255, 255, 0.04); }

@media (prefers-reduced-motion: reduce) {
  .cq-ceremony-rays { animation: cq-ceremony-rays-fade 1s ease 0.2s forwards !important; }
  .cq-ceremony-laurel { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VISUAL POLISH PASS (V24)
═══════════════════════════════════════════════════════════════════════════════ */

/* Keyboard focus ring on path nodes — clear and branded */
.path-node:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(10, 15, 29, 0.9),
    0 0 0 7px color-mix(in srgb, var(--node-color) 70%, #fff),
    0 8px 18px rgba(0, 0, 0, 0.40),
    inset 0 -3px 0 color-mix(in srgb, var(--node-color) 35%, #000) !important;
}

/* Locked-node hover: subtle indicator that it's deliberately gated, not broken */
.path-node.is-locked:hover {
  opacity: 0.7;
}
.path-node.is-locked::before {
  content: '🔒';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #1a2236;
  border-radius: 999px;
  border: 1.5px solid rgba(124, 144, 174, 0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}
.path-node.is-locked:hover::before { opacity: 1; transform: scale(1); }

/* Skip-to-main link should be visible on focus */
a.skip-to-main:focus {
  left: 16px !important;
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
}