.genre-root{width:100%;margin:14px 0 6px;padding:0 16px}.genre-track{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y;padding:6px 2px 10px}.genre-track::-webkit-scrollbar{display:none}.genre-track.dragging{cursor:grabbing}.genre-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;padding:0;cursor:pointer}.genre-circle{width:64px;height:64px;border-radius:50%;overflow:hidden;position:relative;background:hsl(var(--surface));border:2.5px solid transparent;transition:border-color .2s,transform .2s}.genre-card.on.genre-circle{border-color:#ff2a2a;transform:scale(1.06)}.genre-circle img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;pointer-events:none}.genre-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;background:#222;color:white;z-index:-1}.genre-label{font-size:11px;font-weight:600;opacity:.8;text-transform:capitalize;white-space:nowrap}.genre-card.on.genre-label{opacity:1;font-weight:800;color:#ff2a2a}@media (max-width:768px){.genre-root{padding:0 12px;margin:10px 0 4px}.genre-track{gap:12px}.genre-circle{width:56px;height:56px}.genre-label{font-size:10px}}