/* ============================================================
   PYQUEST - ZONES.CSS
   Per-zone CSS custom properties and color overrides
   ============================================================ */

/* Zone 0 - Cyan */
.zone-0 {
  --zone-color: #06b6d4;
  --zone-color-rgb: 6, 182, 212;
  --zone-glow: rgba(6, 182, 212, 0.4);
}
.zone-0.zone-node { border-color: #06b6d4; }
.zone-0.zone-node.active { box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); }
.zone-0.zone-node .zone-node-name { color: #06b6d4; }
.zone-0.encounter-card { border-color: rgba(6, 182, 212, 0.4); }
.zone-0.encounter-card:hover:not(.encounter-locked) { border-color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.25); }
.zone-0 .challenge-type-badge { color: #06b6d4; border-color: #06b6d4 !important; }
.zone-0 .btn-primary { background: #06b6d4; border-color: #06b6d4; box-shadow: 0 0 12px rgba(6, 182, 212, 0.4); }
.zone-0 .btn-primary:hover { background: #22d3ee; border-color: #22d3ee; }
.zone-0 .xp-fill { background: linear-gradient(90deg, #0891b2, #06b6d4); box-shadow: 0 0 8px rgba(6, 182, 212, 0.5); }
.zone-0 .challenge-narrative { border-left-color: #06b6d4; background: rgba(6, 182, 212, 0.05); }
.zone-0 .code-block { border-color: rgba(6, 182, 212, 0.3); }

/* Zone 1 - Green */
.zone-1 {
  --zone-color: #22c55e;
  --zone-color-rgb: 34, 197, 94;
  --zone-glow: rgba(34, 197, 94, 0.4);
}
.zone-1.zone-node { border-color: #22c55e; }
.zone-1.zone-node.active { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); animation: node-pulse-green 2s ease-in-out infinite; }
.zone-1.zone-node .zone-node-name { color: #22c55e; }
.zone-1.encounter-card { border-color: rgba(34, 197, 94, 0.4); }
.zone-1.encounter-card:hover:not(.encounter-locked) { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.25); }
.zone-1 .challenge-type-badge { color: #22c55e; border-color: #22c55e !important; }
.zone-1 .btn-primary { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); }
.zone-1 .btn-primary:hover { background: #4ade80; border-color: #4ade80; }
.zone-1 .xp-fill { background: linear-gradient(90deg, #16a34a, #22c55e); }
.zone-1 .challenge-narrative { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.05); }
.zone-1 .code-block { border-color: rgba(34, 197, 94, 0.3); }

/* Zone 2 - Purple */
.zone-2 {
  --zone-color: #a855f7;
  --zone-color-rgb: 168, 85, 247;
  --zone-glow: rgba(168, 85, 247, 0.4);
}
.zone-2.zone-node { border-color: #a855f7; }
.zone-2.zone-node.active { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); animation: node-pulse-purple 2s ease-in-out infinite; }
.zone-2.zone-node .zone-node-name { color: #a855f7; }
.zone-2.encounter-card { border-color: rgba(168, 85, 247, 0.4); }
.zone-2.encounter-card:hover:not(.encounter-locked) { border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.25); }
.zone-2 .challenge-type-badge { color: #a855f7; border-color: #a855f7 !important; }
.zone-2 .btn-primary { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); }
.zone-2 .btn-primary:hover { background: #c084fc; border-color: #c084fc; }
.zone-2 .xp-fill { background: linear-gradient(90deg, #7e22ce, #a855f7); box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); }
.zone-2 .challenge-narrative { border-left-color: #a855f7; background: rgba(168, 85, 247, 0.05); }
.zone-2 .code-block { border-color: rgba(168, 85, 247, 0.3); }

/* Zone 3 - Orange */
.zone-3 {
  --zone-color: #f97316;
  --zone-color-rgb: 249, 115, 22;
  --zone-glow: rgba(249, 115, 22, 0.4);
}
.zone-3.zone-node { border-color: #f97316; }
.zone-3.zone-node.active { box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); animation: node-pulse-orange 2s ease-in-out infinite; }
.zone-3.zone-node .zone-node-name { color: #f97316; }
.zone-3.encounter-card { border-color: rgba(249, 115, 22, 0.4); }
.zone-3.encounter-card:hover:not(.encounter-locked) { border-color: #f97316; box-shadow: 0 0 20px rgba(249, 115, 22, 0.25); }
.zone-3 .challenge-type-badge { color: #f97316; border-color: #f97316 !important; }
.zone-3 .btn-primary { background: #f97316; border-color: #f97316; box-shadow: 0 0 12px rgba(249, 115, 22, 0.4); }
.zone-3 .btn-primary:hover { background: #fb923c; border-color: #fb923c; }
.zone-3 .xp-fill { background: linear-gradient(90deg, #c2410c, #f97316); box-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
.zone-3 .challenge-narrative { border-left-color: #f97316; background: rgba(249, 115, 22, 0.05); }
.zone-3 .code-block { border-color: rgba(249, 115, 22, 0.3); }

/* Zone 4 - Blue */
.zone-4 {
  --zone-color: #3b82f6;
  --zone-color-rgb: 59, 130, 246;
  --zone-glow: rgba(59, 130, 246, 0.4);
}
.zone-4.zone-node { border-color: #3b82f6; }
.zone-4.zone-node.active { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); animation: node-pulse-blue 2s ease-in-out infinite; }
.zone-4.zone-node .zone-node-name { color: #3b82f6; }
.zone-4.encounter-card { border-color: rgba(59, 130, 246, 0.4); }
.zone-4.encounter-card:hover:not(.encounter-locked) { border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.25); }
.zone-4 .challenge-type-badge { color: #3b82f6; border-color: #3b82f6 !important; }
.zone-4 .btn-primary { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); }
.zone-4 .btn-primary:hover { background: #60a5fa; border-color: #60a5fa; }
.zone-4 .xp-fill { background: linear-gradient(90deg, #1d4ed8, #3b82f6); box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }
.zone-4 .challenge-narrative { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }
.zone-4 .code-block { border-color: rgba(59, 130, 246, 0.3); }

/* Zone 5 - Red */
.zone-5 {
  --zone-color: #ef4444;
  --zone-color-rgb: 239, 68, 68;
  --zone-glow: rgba(239, 68, 68, 0.4);
}
.zone-5.zone-node { border-color: #ef4444; }
.zone-5.zone-node.active { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); animation: node-pulse-red 2s ease-in-out infinite; }
.zone-5.zone-node .zone-node-name { color: #ef4444; }
.zone-5.encounter-card { border-color: rgba(239, 68, 68, 0.4); }
.zone-5.encounter-card:hover:not(.encounter-locked) { border-color: #ef4444; box-shadow: 0 0 20px rgba(239, 68, 68, 0.25); }
.zone-5 .challenge-type-badge { color: #ef4444; border-color: #ef4444 !important; }
.zone-5 .btn-primary { background: #ef4444; border-color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.zone-5 .btn-primary:hover { background: #f87171; border-color: #f87171; }
.zone-5 .xp-fill { background: linear-gradient(90deg, #b91c1c, #ef4444); box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
.zone-5 .challenge-narrative { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.zone-5 .code-block { border-color: rgba(239, 68, 68, 0.3); }

/* Zone 6 - Gold */
.zone-6 {
  --zone-color: #eab308;
  --zone-color-rgb: 234, 179, 8;
  --zone-glow: rgba(234, 179, 8, 0.4);
}
.zone-6.zone-node { border-color: #eab308; }
.zone-6.zone-node.active { box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); animation: node-pulse-gold 2s ease-in-out infinite; }
.zone-6.zone-node .zone-node-name { color: #eab308; }
.zone-6.encounter-card { border-color: rgba(234, 179, 8, 0.4); }
.zone-6.encounter-card:hover:not(.encounter-locked) { border-color: #eab308; box-shadow: 0 0 20px rgba(234, 179, 8, 0.25); }
.zone-6 .challenge-type-badge { color: #eab308; border-color: #eab308 !important; }
.zone-6 .btn-primary { background: #eab308; border-color: #eab308; box-shadow: 0 0 12px rgba(234, 179, 8, 0.4); color: #000; }
.zone-6 .btn-primary:hover { background: #facc15; border-color: #facc15; }
.zone-6 .xp-fill { background: linear-gradient(90deg, #a16207, #eab308); box-shadow: 0 0 8px rgba(234, 179, 8, 0.5); }
.zone-6 .challenge-narrative { border-left-color: #eab308; background: rgba(234, 179, 8, 0.05); }
.zone-6 .code-block { border-color: rgba(234, 179, 8, 0.3); }

/* Zone 7 - Silver */
.zone-7 {
  --zone-color: #94a3b8;
  --zone-color-rgb: 148, 163, 184;
  --zone-glow: rgba(148, 163, 184, 0.4);
}
.zone-7.zone-node { border-color: #94a3b8; }
.zone-7.zone-node.active { box-shadow: 0 0 20px rgba(148, 163, 184, 0.4); animation: node-pulse-silver 2s ease-in-out infinite; }
.zone-7.zone-node .zone-node-name { color: #94a3b8; }
.zone-7.encounter-card { border-color: rgba(148, 163, 184, 0.4); }
.zone-7.encounter-card:hover:not(.encounter-locked) { border-color: #94a3b8; box-shadow: 0 0 20px rgba(148, 163, 184, 0.25); }
.zone-7 .challenge-type-badge { color: #94a3b8; border-color: #94a3b8 !important; }
.zone-7 .btn-primary { background: #94a3b8; border-color: #94a3b8; box-shadow: 0 0 12px rgba(148, 163, 184, 0.4); color: #000; }
.zone-7 .btn-primary:hover { background: #cbd5e1; border-color: #cbd5e1; }
.zone-7 .xp-fill { background: linear-gradient(90deg, #64748b, #94a3b8); box-shadow: 0 0 8px rgba(148, 163, 184, 0.5); }
.zone-7 .challenge-narrative { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.05); }
.zone-7 .code-block { border-color: rgba(148, 163, 184, 0.3); }

/* Zone 8 - Dark Violet */
.zone-8 {
  --zone-color: #7c3aed;
  --zone-color-rgb: 124, 58, 237;
  --zone-glow: rgba(124, 58, 237, 0.4);
}
.zone-8.zone-node { border-color: #7c3aed; }
.zone-8.zone-node.active { box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); animation: node-pulse-violet 2s ease-in-out infinite; }
.zone-8.zone-node .zone-node-name { color: #7c3aed; }
.zone-8.encounter-card { border-color: rgba(124, 58, 237, 0.4); }
.zone-8.encounter-card:hover:not(.encounter-locked) { border-color: #7c3aed; box-shadow: 0 0 20px rgba(124, 58, 237, 0.25); }
.zone-8 .challenge-type-badge { color: #7c3aed; border-color: #7c3aed !important; }
.zone-8 .btn-primary { background: #7c3aed; border-color: #7c3aed; box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); }
.zone-8 .btn-primary:hover { background: #8b5cf6; border-color: #8b5cf6; }
.zone-8 .xp-fill { background: linear-gradient(90deg, #4c1d95, #7c3aed); box-shadow: 0 0 8px rgba(124, 58, 237, 0.5); }
.zone-8 .challenge-narrative { border-left-color: #7c3aed; background: rgba(124, 58, 237, 0.05); }
.zone-8 .code-block { border-color: rgba(124, 58, 237, 0.3); }

/* Zone 9 - White/Pristine */
.zone-9 {
  --zone-color: #f1f5f9;
  --zone-color-rgb: 241, 245, 249;
  --zone-glow: rgba(241, 245, 249, 0.4);
}
.zone-9.zone-node { border-color: #f1f5f9; }
.zone-9.zone-node.active { box-shadow: 0 0 20px rgba(241, 245, 249, 0.3); animation: node-pulse-white 2s ease-in-out infinite; }
.zone-9.zone-node .zone-node-name { color: #f1f5f9; }
.zone-9.encounter-card { border-color: rgba(241, 245, 249, 0.3); }
.zone-9.encounter-card:hover:not(.encounter-locked) { border-color: #f1f5f9; box-shadow: 0 0 20px rgba(241, 245, 249, 0.2); }
.zone-9 .challenge-type-badge { color: #f1f5f9; border-color: #f1f5f9 !important; }
.zone-9 .btn-primary { background: #f1f5f9; border-color: #f1f5f9; box-shadow: 0 0 12px rgba(241, 245, 249, 0.3); color: #000; }
.zone-9 .btn-primary:hover { background: #fff; border-color: #fff; }
.zone-9 .xp-fill { background: linear-gradient(90deg, #cbd5e1, #f1f5f9); box-shadow: 0 0 8px rgba(241, 245, 249, 0.4); }
.zone-9 .challenge-narrative { border-left-color: #f1f5f9; background: rgba(241, 245, 249, 0.03); }
.zone-9 .code-block { border-color: rgba(241, 245, 249, 0.2); }

/* Per-zone node pulse keyframes */
@keyframes node-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}
@keyframes node-pulse-purple {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(168, 85, 247, 0); }
}
@keyframes node-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
}
@keyframes node-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}
@keyframes node-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}
@keyframes node-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(234, 179, 8, 0); }
}
@keyframes node-pulse-silver {
  0%, 100% { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(148, 163, 184, 0); }
}
@keyframes node-pulse-violet {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
}
@keyframes node-pulse-white {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 245, 249, 0.3); }
  50% { box-shadow: 0 0 0 12px rgba(241, 245, 249, 0); }
}

/* Completed zone connector lines */
.zone-connector.done { background: #22c55e; }

/* Zone-select screen adapts color to current zone */
#screen-zone-select .zone-select-name { color: var(--zone-color, var(--accent)); }

/* Boss encounter border pulsing per zone */
.encounter-boss { border-width: 2px; }