/* @tweakable global font family */
:root { --app-font: 'Inter', 'Poppins', Arial, sans-serif; }

/* @tweakable primary brand color */
:root { --primary-color: #4169E1; }
/* @tweakable accent color */
:root { --accent-color: #1E90FF; }

/* Motion-safe: reduce aggressive scaling and remove layout shift */
.radio-container:hover {
  transform: scale(1.01) !important;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Clean type and fix body offset */
body {
  font-family: var(--app-font) !important;
  top: 0 !important;
}

/* Ensure accessible focus styles for buttons and links */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Prevent giant scaling on core controls that may break layout */
.play-pause-btn {
  transform: none !important;
}

/* Keep main play/pause visually larger but consistent and stable */
#playBtn, #pauseBtn {
  width: 84px !important;
  height: 84px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .radio-container {
        padding: 0.5rem;
        margin-top: 0;
    }
    
    .play-pause-btn {
        width: 60px !important;
        height: 60px !important;
    }
    
    .play-pause-btn i {
        font-size: 24px;
    }
    
    .button-grid {
        gap: 10px;
    }
    
    .button-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn {
        padding: 12px;
    }
    
    .btn i {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .btn span {
        font-size: 0.7rem;
    }
}