better ui for new selectors on player

docker/views/css/anime/player.css

@@ -538,13 +538,65 @@ body.stop-scrolling {
     transform: scale(0.95);
 }
 
-#audio-select {
-    background: transparent;
-    color: white;
-    border: none;
-    font-size: 13px;
-    padding: 4px;
+.plyr__custom-select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
 }
-#audio-select option {
-    color: black;
+
+/* El select real: invisible pero clickable */
+.plyr__custom-select-wrapper select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2; /* Encima del botón visual */
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+/* El botón visual que imita a Plyr */
+.plyr__custom-control-btn {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: #fff; /* Plyr default white */
+    padding: 7px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.3s ease, color 0.3s ease;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+}
+
+.plyr__custom-control-btn:hover {
+    background: rgba(255, 255, 255, 0.15); /* Plyr hover effect */
+    color: #fff;
+}
+
+.plyr__custom-control-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+    pointer-events: none;
+}
+
+/* Badge pequeño para indicar calidad actual (opcional) */
+.quality-badge {
+    background: var(--brand-color);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
 }