#map { height: 350px; width: 100%; border-radius: 0.75rem; z-index: 1; transition: height 0.3s ease; }
#miniMap { height: 180px; width: 100%; border-radius: 1rem; z-index: 1; }
@media (min-width: 768px) { #map { height: 450px; } }

.custom-loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.panel-slide { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; height: 100%; top: 0; right: 0; position: fixed; }
@media (min-width: 768px) { .panel-slide { width: 500px; } }
.panel-slide.active { transform: translateX(0); }

.audio-player-bar { 
    transform: translateY(150%); 
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    right: 1.5rem;
    left: auto;
    width: auto;
    max-width: 280px;
}
.audio-player-bar.active { transform: translateY(0); }

.prose-custom p { margin-bottom: 1.25rem; line-height: 1.7; font-size: 1rem; }
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }